Added dropdown to select state of the markup tags list.

Also removed the button from the input bar, you can now select it from the settings side menu under Text -> Show markup buttons.

src/mami.css/setting.css

@@ -27,13 +27,19 @@ select {
     margin-bottom: 6px;
 }
 
-.setting__container--select .setting__input,
 .setting__container--number .setting__input,
 .setting__container--text .setting__input {
     width: 100%;
     font-size: 1.1em;
     line-height: 1.4em;
-    font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif
+    font-family: inherit;
+}
+
+.setting__container--select .setting__input {
+    width: 100%;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 2px;
 }
 
 .setting__container--range .setting__input {

src/mami.js/main.js

@@ -149,6 +149,7 @@ const MamiInit = async args => {
     settings.define('marqueeAllNames').default(false).create();
     settings.define('dbgAnimDurationMulti').default(1).min(0).max(10).create();
     settings.define('newLineOnEnter').default(false).create();
+    settings.define('showMarkupSelector').type(['always', 'focus', 'never']).default('focus').create();
 
     const noNotifSupport = !('Notification' in window);
     settings.define('enableNotifications').default(false).immutable(noNotifSupport).critical().create();
@@ -461,6 +462,13 @@ const MamiInit = async args => {
         category.setting('autoEmbedV1').title('Auto-embed media').done();
         category.setting('autoEmbedPlay').title('Auto-play embedded media').done();
         category.setting('newLineOnEnter').title('Swap Enter and Shift+Enter behaviour').done();
+        category.setting('showMarkupSelector').title('Show markup buttons').type('select').options(() => {
+            return {
+                'always': 'Always show',
+                'focus': 'Show when focussed',
+                'never': 'Never show',
+            };
+        }).done();
     });
     sbSettings.category(category => {
         category.header('Notifications');
@@ -660,9 +668,13 @@ const MamiInit = async args => {
     const sbActPing = new MamiSidebarActionPing(pingIndicator, ctx.msgbox);
     sidebar.createAction(sbActPing);
 
-    Umi.UI.InputMenus.Add('markup', 'BB Code');
+    Umi.UI.InputMenus.Add('markup');
     Umi.UI.InputMenus.Add('emotes', 'Emoticons');
 
+    settings.watch('showMarkupSelector', ev => {
+        Umi.UI.InputMenus.Toggle('markup', ev.detail.value === 'always');
+    });
+
     let doUpload;
     ctx.eeprom = new MamiEEPROM(futami.get('eeprom2'), MamiMisuzuAuth.getLine);
     ctx.eeprom.init()

src/mami.js/ui/hooks.js

@@ -11,15 +11,34 @@ Umi.UI.Hooks = (function() {
             sendMessage = sendMessageFunc;
         },
         AddHooks: function() {
+            const msgForm = $i('umi-msg-form');
+            const msgText = $i('umi-msg-text');
+
             window.addEventListener('keydown', function(ev) {
                 if((ev.ctrlKey && ev.key !== 'v') || ev.altKey)
                     return;
 
                 if(!ev.target.matches('input, textarea, select, button'))
-                    $i('umi-msg-text').focus();
+                    msgText.focus();
             });
 
-            $i('umi-msg-form').addEventListener('submit', ev => {
+            msgForm.addEventListener('focusin', ev => {
+                console.info(ev);
+
+                if(mami.settings.get('showMarkupSelector') === 'focus' && Umi.UI.InputMenus.Current() === '')
+                    Umi.UI.InputMenus.Toggle('markup', true);
+            });
+            msgForm.addEventListener('focusout', ev => {
+                console.info(ev);
+
+                if(ev.relatedTarget instanceof Element && msgForm.contains(ev.relatedTarget))
+                    return;
+
+                if(mami.settings.get('showMarkupSelector') === 'focus' && Umi.UI.InputMenus.Current() === 'markup')
+                    Umi.UI.InputMenus.Toggle('markup', false);
+            });
+
+            msgForm.addEventListener('submit', ev => {
                 ev.preventDefault();
 
                 if(typeof sendMessage !== 'function')
@@ -36,13 +55,12 @@ Umi.UI.Hooks = (function() {
                 }
             });
 
-            $i('umi-msg-text').addEventListener('input', function(ev) {
+            msgText.addEventListener('input', function(ev) {
-                const elemInput = $i('umi-msg-text');
+                const elemParent = msgText.parentNode;
-                const elemParent = elemInput.parentNode;
                 let height = 40;
 
-                if(mami.settings.get('expandTextBox') && elemInput.scrollHeight > elemInput.clientHeight)
+                if(mami.settings.get('expandTextBox') && msgText.scrollHeight > msgText.clientHeight)
-                    height = elemInput.scrollHeight;
+                    height = msgText.scrollHeight;
 
                 if(height > 40)
                     elemParent.style.height = height.toString() + 'px';
@@ -50,7 +68,7 @@ Umi.UI.Hooks = (function() {
                     elemParent.style.height = null;
             });
 
-            $i('umi-msg-text').addEventListener('keydown', function(ev) {
+            msgText.addEventListener('keydown', function(ev) {
                 if(ev.key === 'Tab' && (!ev.shiftKey || !ev.ctrlKey)) {
                     ev.preventDefault();
 
@@ -94,7 +112,7 @@ Umi.UI.Hooks = (function() {
 
                 if((ev.key === 'Enter' || ev.key === 'NumpadEnter') && ev.shiftKey === mami.settings.get('newLineOnEnter')) {
                     ev.preventDefault();
-                    $i('umi-msg-form').requestSubmit();
+                    msgForm.requestSubmit();
                     return;
                 }
             });

src/mami.js/ui/input-menus.js

@@ -10,21 +10,30 @@ Umi.UI.InputMenus = (function() {
 
     const createButtonId = id => `umi-msg-menu-btn-${id}`;
 
-    const toggle = function(baseId) {
+    const toggle = function(baseId, force) {
-        const button = createButtonId(baseId);
+        if(typeof force === 'boolean' && (current === baseId) === force)
-        const menu = 'umi-msg-menu-sub-' + baseId;
+            return;
 
-        if($c(inputMenuActive).length)
+        const buttonId = createButtonId(baseId);
-            $c(inputMenuActive)[0].classList.remove(inputMenuActive);
+        const menuId = 'umi-msg-menu-sub-' + baseId;
 
-        if($c(inputButtonActive).length)
+        const activeMenus = Array.from($qa(`.${inputMenuActive}`));
-            $c(inputButtonActive)[0].classList.remove(inputButtonActive);
+        if(activeMenus.length > 0)
+            for(const menu of activeMenus)
+                menu.classList.remove(inputMenuActive);
+
+        const activeButtons = Array.from($qa(`.${inputButtonActive}`));
+        if(activeButtons.length > 0)
+            for(const button of activeButtons)
+                button.classList.remove(inputButtonActive);
 
         if(current !== baseId) {
-            $i(menu).classList.add(inputMenuActive);
+            $i(`umi-msg-menu-sub-${baseId}`)?.classList.add(inputMenuActive);
-            $i(button).classList.add(inputButtonActive);
+            $i(createButtonId(baseId))?.classList.add(inputButtonActive);
             current = baseId;
-        } else current = '';
+        } else {
+            current = '';
+        }
     };
 
     const createButton = function(id, title, onClick) {
@@ -43,6 +52,8 @@ Umi.UI.InputMenus = (function() {
     };
 
     return {
+        Current: () => current,
+        Toggle: toggle,
         Add: function(baseId, title, beforeButtonId) {
             if(ids.includes(baseId))
                 return;
@@ -54,9 +65,16 @@ Umi.UI.InputMenus = (function() {
             if(!(beforeButton instanceof Element))
                 beforeButton = $i('umi-msg-send');
 
+            if(typeof title === 'string')
                 $i('umi-msg-container').insertBefore(createButton(baseId, title), beforeButton);
             $i('umi-msg-menu').appendChild(
-                $e({ attrs: { 'class': ['input__menu', 'input__menu--' + baseId], id: 'umi-msg-menu-sub-' + baseId } })
+                $e({
+                    attrs: {
+                        'class': ['input__menu', 'input__menu--' + baseId],
+                        id: 'umi-msg-menu-sub-' + baseId,
+                        tabindex: '0',
+                    }
+                })
             );
         },
         AddButton: function(baseId, title, onClick, beforeButtonId) {

src/mami.js/ui/view.js

@@ -28,8 +28,8 @@ Umi.UI.View = (function() {
             return length;
         },
         EnterAtCursor: function(text, overwrite) {
-            const value = getText(),
+            const value = getText();
-                current = getPosition();
+            const current = getPosition();
             let out = '';
 
             out += value.slice(0, current);