Use lit-html to render the toolbar

src/converse-chatview.js

@@ -14,7 +14,7 @@ import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
 import tpl_new_day from "templates/new_day.html";
 import tpl_spinner from "templates/spinner.html";
 import tpl_spoiler_button from "templates/spoiler_button.html";
-import tpl_toolbar from "templates/toolbar.html";
+import tpl_toolbar from "templates/toolbar.js";
 import tpl_toolbar_fileupload from "templates/toolbar_fileupload.html";
 import tpl_user_details_modal from "templates/user_details_modal.js";
 import { BootstrapModal } from "./converse-modal.js";
@@ -339,7 +339,7 @@ converse.plugins.add('converse-chatview', {
                     this.model.toJSON(),
                     this.getToolbarOptions()
                 );
-                this.el.querySelector('.chat-toolbar').innerHTML = tpl_toolbar(options);
+                render(tpl_toolbar(options), this.el.querySelector('.chat-toolbar'));
                 this.addSpoilerButton(options);
                 this.addFileUploadButton();
                 /**

src/templates/toolbar.html

@@ -1,10 +0,0 @@
-{[ if (o.show_call_button)  { ]}
-<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
-{[ } ]}
-{[ if (o.show_occupants_toggle)  { ]}
-<li class="toggle-occupants float-right fa {[ if (o.hidden_occupants)  { ]} fa-angle-double-left {[ } else { ]} fa-angle-double-right {[ } ]}"
-    title="{{{o.label_hide_occupants}}}"></li>
-{[ } ]}
-{[ if (o.message_limit)  { ]}
-<li class="message-limit font-weight-bold float-right" title="{{{o.label_message_limit}}}">{{{o.message_limit}}}</li>
-{[ } ]}

src/templates/toolbar.js

@@ -0,0 +1,11 @@
+import { html } from "lit-html";
+
+export default (o) => html`
+    ${ o.show_call_button ? html`<li class="toggle-call fa fa-phone" title="${o.label_start_call}"></li>` : '' }
+
+    ${ o.show_occupants_toggle ?
+            html` <li class="toggle-occupants float-right fa ${ o.hidden_occupants ? `fa-angle-double-left` : `fa-angle-double-right` }"
+                      title="${o.label_hide_occupants}"></li>` : '' }
+
+    ${ o.message_limit ? html`<li class="message-limit font-weight-bold float-right" title="${o.label_message_limit}">${o.message_limit}</li>` :  '' }
+`;