Render chatbox message form via lit-html

src/converse-chatview.js

@@ -10,7 +10,7 @@ import "converse-modal";
 import log from "@converse/headless/log";
 import tpl_chatbox from "templates/chatbox.js";
 import tpl_chatbox_head from "templates/chatbox_head.js";
-import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
+import tpl_chatbox_message_form from "templates/chatbox_message_form.js";
 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";
@@ -355,7 +355,7 @@ converse.plugins.add('converse-chatview', {
 
             renderMessageForm () {
                 const form_container = this.el.querySelector('.message-form-container');
-                form_container.innerHTML = tpl_chatbox_message_form(
+                render(tpl_chatbox_message_form(
                     Object.assign(this.model.toJSON(), {
                         '__': __,
                         'message_limit': api.settings.get('message_limit'),
@@ -366,7 +366,7 @@ converse.plugins.add('converse-chatview', {
                         'show_send_button': api.settings.get('show_send_button'),
                         'show_toolbar': api.settings.get('show_toolbar'),
                         'unread_msgs': __('You have unread messages')
-                    }));
+                    })), form_container);
                 this.el.addEventListener('focusin', ev => this.emitFocused(ev));
                 this.el.addEventListener('focusout', ev => this.emitBlurred(ev));
                 this.renderToolbar();

src/templates/chatbox_message_form.html

-<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
-<form class="setNicknameButtonForm hidden">
-    <input type="submit" class="btn btn-primary" name="join" value="Join"/>
-</form>
-<form class="sendXMPPMessage">
-    {[ if (o.show_toolbar || o.show_send_button) { ]}
-    <div class="chat-toolbar--container">
-    {[ if (o.show_toolbar) { ]}
-        <ul class="chat-toolbar no-text-select"></ul>
-    {[ } ]}
-    {[ if (o.show_send_button) { ]}
-        <button type="submit" class="btn send-button fa fa-paper-plane" title="{{{ o.__('Send the message') }}}"></button>
-    {[ } ]}
-    </div>
-    {[ } ]}
-    <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
-           class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
-
-    <div class="suggestion-box">
-        <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
-        <textarea
-            type="text"
-            class="chat-textarea suggestion-box__input
-                {[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
-                {[ if (o.composing_spoiler) { ]} spoiler {[ } ]}"
-            placeholder="{{{o.label_message}}}">{{ o.message_value }}</textarea>
-        <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
-    </div>
-</form>

src/templates/chatbox_message_form.js

+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+
+const i18n_send_message = __('Send the message');
+
+
+export default (o) => html`
+    <div class="new-msgs-indicator hidden">▼ ${ o.unread_msgs } ▼</div>
+    <form class="setNicknameButtonForm hidden">
+        <input type="submit" class="btn btn-primary" name="join" value="Join"/>
+    </form>
+    <form class="sendXMPPMessage">
+        ${ (o.show_toolbar || o.show_send_button) ? html`
+            <div class="chat-toolbar--container">
+                ${ o.show_toolbar ? html`<ul class="chat-toolbar no-text-select"></ul>` : '' }
+                ${ o.show_send_button ? html`<button type="submit" class="btn send-button fa fa-paper-plane" title="${ i18n_send_message }"></button>` : '' }
+            </div>` : ''
+        }
+        <input type="text" placeholder="${o.label_spoiler_hint || ''}" value="${o.hint_value || ''}" class="${o.composing_spoiler ? '' : 'hidden'} spoiler-hint"/>
+
+        <div class="suggestion-box">
+            <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+            <textarea
+                type="text"
+                class="chat-textarea suggestion-box__input
+                    ${ o.show_send_button ? 'chat-textarea-send-button' : '' }
+                    ${ o.composing_spoile ? 'spoiler' : '' }"
+                placeholder="${o.label_message}">${ o.message_value || '' }</textarea>
+            <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
+        </div>
+    </form>
+`;