Working colours

package.json

@@ -19,6 +19,13 @@
         "@fortawesome/free-regular-svg-icons": "^6.7.1",
         "@fortawesome/free-solid-svg-icons": "^6.7.1",
         "@fortawesome/vue-fontawesome": "^3.0.8",
+        "@lexical/code": "^0.20.0",
+        "@lexical/history": "^0.20.0",
+        "@lexical/html": "^0.20.0",
+        "@lexical/plain-text": "^0.20.0",
+        "@lexical/rich-text": "^0.20.0",
+        "@lexical/selection": "^0.20.0",
+        "@lexical/utils": "^0.20.0",
         "buffer": "^6.0.3",
         "compare-versions": "^6.1.1",
         "css-vars-ponyfill": "^2.4.9",
@@ -31,6 +38,7 @@
         "ip-regex": "^5.0.0",
         "irc-framework": "^4.14.0",
         "json5": "^2.2.3",
+        "lexical": "^0.20.0",
         "lodash": "^4.17.21",
         "murmurhash3js": "^3.0.1",
         "sockjs-client": "^1.6.1",

src/components/App.vue

@@ -384,6 +384,13 @@ html, body, #kiwiirc {
     overflow: hidden;
 }
 
+@supports (font-size: round(nearest, 90%, 1px)) and (line-height: round(nearest, 1.6em, 1px)) {
+    .kiwi-wrap {
+        font-size: ~'round(nearest, 90%, 1px)';
+        line-height: ~'round(nearest, 1.6em, 1px)';
+    }
+}
+
 /* .kiwi-workspace has ::before and ::after 4px above itself for the connection status */
 .kiwi-workspace {
     position: relative;

src/components/ControlInput.vue

@@ -108,13 +108,15 @@
                             v-if="shouldShowColorPicker"
                             class="kiwi-controlinput-button"
                             @click.prevent="onToolClickTextStyle"
+                            @mousedown.prevent
                         >
-                            <svg-icon icon="fa-solid fa-circle-half-stroke" />
+                            <svg-icon icon="fa-solid fa-palette" />
                         </div>
                         <div
                             v-if="shouldShowEmojiPicker"
                             class="kiwi-controlinput-button"
                             @click.prevent="onToolClickEmoji"
+                            @mousedown.prevent
                         >
                             <svg-icon icon="fa-regular fa-face-smile" />
                         </div>
@@ -156,6 +158,7 @@ import * as settingTools from '@/libs/settingTools';
 import NewIrcInput from '@/components/utils/NewIrcInput';
 import autocompleteCommands from '@/res/autocompleteCommands';
 import GlobalApi from '@/libs/GlobalApi';
+import { html2irc } from '@/helpers/Html2Irc';
 import AutoComplete from './AutoComplete';
 import ToolTextStyle from './inputtools/TextStyle';
 import ToolEmoji from './inputtools/Emoji';
@@ -406,13 +409,13 @@ export default {
             }
         },
         toggleBold() {
-            this.$refs.input.toggleBold();
+            this.$refs.input.toggleStyle('bold');
         },
         toggleItalic() {
-            this.$refs.input.toggleItalic();
+            this.$refs.input.toggleStyle('italic');
         },
         toggleUnderline() {
-            this.$refs.input.toggleUnderline();
+            this.$refs.input.toggleStyle('underline');
         },
         onAutocompleteCancel() {
             this.autocomplete_open = false;
@@ -449,14 +452,7 @@ export default {
                 this.$refs.autocomplete.selectCurrentItem();
             }
 
-            if (event.key === 'Enter' && (
-                (event.altKey && !event.shiftKey && !event.metaKey && !event.ctrlKey) ||
-                (event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey)
-            )) {
-                // Add new line when shift+enter or alt+enter is pressed
-                event.preventDefault();
-                this.$refs.input.insertText('\n');
-            } else if (event.key === 'Enter') {
+            if (event.key === 'Enter' && !event.shiftKey && !event.altKey) {
                 // Send message when enter is pressed
                 event.preventDefault();
                 this.submitForm();
@@ -603,8 +599,8 @@ export default {
                 this.autocomplete_filter = currentToken;
             }
         },
-        async submitForm() {
-            let rawInput = await this.$refs.input.getValue();
+        submitForm() {
+            let rawInput = this.$refs.input.getValue();
             if (!rawInput) {
                 if (!this.has_focus && this.keep_focus) {
                     // Maybe triggered by the send button on empty input,
@@ -614,7 +610,9 @@ export default {
                 return;
             }
 
-            let ircText = this.$refs.input.buildIrcText();
+            console.log('raw', JSON.stringify(rawInput));
+            let ircText = html2irc(rawInput);
+            console.log('irc', JSON.stringify(ircText));
 
             // Show a warning if a command is preceded by spaces
             let warnExpectedCommand = this.$state.setting('buffers.warn_expected_command');
@@ -1022,6 +1020,12 @@ export default {
     cursor: pointer;
     justify-content: center;
     align-items: center;
+    position: relative;
+
+    .kiwi-controlinput-button-clicker {
+        position: absolute;
+        inset: 0;
+    }
 
     svg {
         font-size: 20px;

src/components/inputtools/Emoji.vue

@@ -5,7 +5,7 @@
                 v-for="(text, eCode) in emojis"
                 :key="eCode"
                 :style="{'background-image':`url(${location}${eCode})`}"
-                :data-code="text"
+                :data-ascii="text"
                 class="kiwi-inputtool-emoji-emoji"
                 @click="onImgClick"
             />
@@ -17,7 +17,7 @@
 'kiwi public';
 
 import _ from 'lodash';
-import * as Misc from '@/helpers/Misc';
+import * as EmojiProvider from '@/libs/EmojiProvider.js';
 
 export default {
     props: ['ircinput'],
@@ -40,12 +40,8 @@ export default {
     },
     methods: {
         onImgClick: function onImgClick(event) {
-            let url = window.getComputedStyle(event.target, null)
-                .getPropertyValue('background-image');
-
-            url = Misc.extractURL(url);
-            let code = event.target.dataset.code;
-            this.ircinput.addImg(code, url);
+            const [emoji] = EmojiProvider.getEmojis(event.target.dataset.ascii);
+            this.ircinput.addEmoji(emoji);
         },
     },
 };