Emoji picking modal in note editor

src/assets/icons/emoji.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.73132 11.5834C4.6416 11.2842 4.87854 11 5.19092 11H14.8091C15.1215 11 15.3584 11.2842 15.2687 11.5834C14.5887 13.8491 12.4872 15.5 10 15.5C7.51282 15.5 5.41125 13.8491 4.73132 11.5834Z" fill="#666666"/>
+<path d="M8.5 7.5C8.5 8.32843 7.94031 9 7.25 9C6.55969 9 6 8.32843 6 7.5C6 6.67157 6.55969 6 7.25 6C7.94031 6 8.5 6.67157 8.5 7.5Z" fill="#666666"/>
+<path d="M12.75 9C13.4403 9 14 8.32843 14 7.5C14 6.67157 13.4403 6 12.75 6C12.0597 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0597 9 12.75 9Z" fill="#666666"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 10C19 14.9706 14.9706 19 10 19C5.02942 19 1 14.9706 1 10C1 5.02945 5.02942 1 10 1C14.9706 1 19 5.02945 19 10ZM17.5 10C17.5 14.1422 14.1421 17.5 10 17.5C5.85791 17.5 2.5 14.1422 2.5 10C2.5 5.85785 5.85791 2.5 10 2.5C14.1421 2.5 17.5 5.85785 17.5 10Z" fill="#666666"/>
+</svg>

src/components/Buttons/ButtonGhost.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@kobalte/core';
+import { Component, JSXElement } from 'solid-js';
+import { hookForDev } from '../../lib/devTools';
+
+import styles from './Buttons.module.scss';
+
+
+const ButtonGhost: Component<{
+  id?: string,
+  onClick?: (e: MouseEvent) => void,
+  children?: JSXElement,
+  disabled?: boolean,
+}> = (props) => {
+  return (
+    <Button.Root
+      id={props.id}
+      class={styles.ghost}
+      onClick={props.onClick}
+      disabled={props.disabled}
+    >
+      {props.children}
+    </Button.Root>
+  )
+}
+
+export default hookForDev(ButtonGhost);

src/components/Buttons/Buttons.module.scss

@@ -200,3 +200,21 @@
     border: 1px solid var(--text-tertiary);
   }
 }
+
+
+.ghost {
+  border-radius: 6px;
+  padding-inline: 10px;
+  padding-block: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+  margin: 0px;
+  color: var(--text-primary);
+  background: none;
+  border: none;
+
+  &:hover {
+    background: none;
+  }
+}

src/components/EmojiPickModal/EmojiPickModal.module.scss

@@ -0,0 +1,88 @@
+.zapEmojiChangeModal {
+  position: fixed;
+  height: 344px;
+  color: var(--text-secondary);
+  background-color: var(--background-input);
+  border: 1px solid transparent;
+  border-radius: 6px;
+
+  display: flex;
+  flex-direction: column;
+  padding-left: 22px;
+  padding-right: 16px;
+  padding-block: 22px;
+
+  justify-content: flex-start;
+  align-items: center;
+
+  input {
+    display: flex;
+    width: 70%;
+    height: 36px;
+    text-align: left;
+    margin: 0;
+    margin-bottom: 24px;
+    padding-inline: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--text-primary);
+    background: none;
+    border: none;
+    border-radius: 18px;
+
+    &:focus {
+      background-color: var(--subtile-devider);
+      outline: none;
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: var(--text-tertiary);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+
+  .title {
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 18px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    margin-bottom: 20px;
+  }
+
+  .xClose {
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: fit-content;
+
+    position: absolute;
+    top: 16px;
+    right: 22px;
+
+    .iconClose {
+      width: 14px;
+      height: 14px;
+      display: inline-block;
+      margin: 0px 0px;
+      background-color: var(--text-secondary);
+      -webkit-mask: url(../../assets/icons/close.svg) no-repeat center;
+      mask: url(../../assets/icons/close.svg) no-repeat center;
+    }
+
+    &:hover {
+      .iconClose {
+        background-color: var(--text-primary);
+      }
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}

src/components/EmojiPickModal/EmojiPickModal.tsx

@@ -0,0 +1,85 @@
+import { Component, createEffect, createSignal, For } from 'solid-js';
+
+import styles from './EmojiPickModal.module.scss';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+import { debounce, isVisibleInContainer, uuidv4 } from '../../utils';
+import { useIntl } from '@cookbook/solid-intl';
+import ConfirmModal from '../ConfirmModal/ConfirmModal';
+import { settings as t } from '../../translations';
+import { hookForDev } from '../../lib/devTools';
+import ButtonLink from '../Buttons/ButtonLink';
+import Modal from '../Modal/Modal';
+
+import emojiSearch from '@jukben/emoji-search';
+import { createStore } from 'solid-js/store';
+import { EmojiOption } from '../../types/primal';
+import ButtonPrimary from '../Buttons/ButtonPrimary';
+import EmojiPicker from '../EmojiPicker/EmojiPicker';
+
+const EmojiPickModal: Component<{
+  id?: string,
+  open: boolean,
+  onClose: (e: MouseEvent | KeyboardEvent) => void,
+  onSelect: (emoji: EmojiOption) => void,
+}> = (props) => {
+
+  const intl = useIntl();
+
+  const [emojiSearchTerm, setEmojiSearchTerm] = createSignal('smile');
+
+  const onKey = (e: KeyboardEvent) => {
+    if (e.code === 'Escape') {
+      props.onClose(e);
+      return;
+    }
+  };
+
+  let emojiInput: HTMLInputElement | undefined;
+
+  createEffect(() => {
+    if (props.open) {
+      window.addEventListener('keydown', onKey);
+      setTimeout(() => {
+        setEmojiSearchTerm(() => 'smile')
+        emojiInput?.focus();
+      }, 10);
+    }
+    else {
+      window.removeEventListener('keydown', onKey);
+    }
+  })
+
+  return (
+    <Modal
+      open={props.open}
+      onBackdropClick={(e: MouseEvent) => props.onClose(e)}
+    >
+      <div id={props.id} class={styles.zapEmojiChangeModal}>
+        <div class={styles.title}>
+          {intl.formatMessage(t.zapEmojiFilterTitle)}
+        </div>
+
+        <button class={styles.xClose} onClick={props.onClose}>
+          <div class={styles.iconClose}></div>
+        </button>
+
+        <input
+          ref={emojiInput}
+          onInput={(e: InputEvent) => {
+            const target = e.target as HTMLInputElement;
+            setEmojiSearchTerm(() => target.value);
+          }}
+          placeholder={intl.formatMessage(t.zapEmojiFilterPlaceholder)}
+        >
+        </input>
+
+        <EmojiPicker
+          filter={emojiSearchTerm()}
+          onSelect={props.onSelect}
+        />
+      </div>
+    </Modal>
+  );
+}
+
+export default EmojiPickModal;

src/components/NewNote/EditBox/EditBox.module.scss

@@ -79,6 +79,7 @@
     margin-left: 8px;
   }
   .editorOptions {
+    display: flex;
     width: 100%;
 
     .attachIcon {
@@ -93,6 +94,26 @@
         background-color: var(--text-secondary);
       }
     }
+    .emojiIcon {
+      width: 21px;
+      height: 21px;
+      display: inline-block;
+      margin-right: 9px;
+      background-color: var(--text-tertiary);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--text-secondary);
+      }
+    }
+
+    >button {
+      width: 26px;
+      height: 21px;
+      padding: 0;
+      margin-block: 0;
+      margin-inline: 8px;
+    }
 
   }
 

src/components/NewNote/EditBox/EditBox.tsx

@@ -39,6 +39,9 @@ import { hookForDev } from "../../../lib/devTools";
 import ButtonPrimary from "../../Buttons/ButtonPrimary";
 import ButtonSecondary from "../../Buttons/ButtonSecondary";
 import { useProfileContext } from "../../../contexts/ProfileContext";
+import ButtonTertiary from "../../Buttons/ButtonTertiary";
+import ButtonGhost from "../../Buttons/ButtonGhost";
+import EmojiPickModal from "../../EmojiPickModal/EmojiPickModal";
 
 type AutoSizedTextArea = HTMLTextAreaElement & { _baseScrollHeight: number };
 
@@ -483,6 +486,9 @@ const EditBox: Component<{
 
   const onEscape = (e: KeyboardEvent) => {
     if (e.code === 'Escape') {
+      console.log('ESCAPE: ', isPickingEmoji())
+      if (isPickingEmoji()) return;
+
       !isMentioning() && !isEmojiInput() ?
         closeEditor() :
         closeEmojiAndMentions();
@@ -992,14 +998,14 @@ const EditBox: Component<{
 
     // Get index of the token and insert emoji character
     const index = msg.slice(0, cursor).lastIndexOf(':');
-    const value = msg.slice(0, index) + emoji.name + msg.slice(cursor);
+    const value = msg.slice(0, index) + `${emoji.name} ` + msg.slice(cursor);
 
     // Reset query, update message and text area value
     setMessage(value);
     textArea.value = message();
 
     // Calculate new cursor position
-    textArea.selectionEnd = index + 1;
+    textArea.selectionEnd = index + 3;
     textArea.focus();
 
     setEmojiInput(false);
@@ -1148,6 +1154,30 @@ const EditBox: Component<{
     callback && callback();
   }
 
+  const [isPickingEmoji, setIsPickingEmoji] = createSignal(false);
+
+  const addSelectedEmoji = (emoji: EmojiOption) => {
+    if (!textArea || !emoji) {
+      return;
+    }
+
+    const msg = message();
+
+    // Get cursor position to determine insertion point
+    let cursor = textArea.selectionStart;
+
+    // Get index of the token and insert emoji character
+    const value = msg.slice(0, cursor) + `${emoji.name} ` + msg.slice(cursor);
+
+    // Reset query, update message and text area value
+    setMessage(value);
+    textArea.value = message();
+
+    // Calculate new cursor position
+    textArea.selectionEnd = cursor + 3;
+    textArea.focus();
+  };
+
   return (
     <div
       id={props.id}
@@ -1255,6 +1285,9 @@ const EditBox: Component<{
           />
           <label for={`upload-${instanceId}`} class={`attach_icon ${styles.attachIcon}`}>
           </label>
+          <ButtonGhost onClick={() => {setIsPickingEmoji(true)}}>
+            <div class={`emoji_icon ${styles.emojiIcon}`}></div>
+          </ButtonGhost>
         </div>
         <ButtonPrimary
           onClick={postNote}
@@ -1266,6 +1299,17 @@ const EditBox: Component<{
           {intl.formatMessage(tActions.cancel)}
         </ButtonSecondary>
       </div>
+
+      <EmojiPickModal
+        open={isPickingEmoji()}
+        onClose={() => {
+          setTimeout(() => {
+            setIsPickingEmoji(false);
+            textArea?.focus();
+          }, 100)
+        }}
+        onSelect={addSelectedEmoji}
+      />
     </div>
   )
 }

src/components/SettingsZap/SettingsZap.module.scss

@@ -111,92 +111,3 @@
   justify-content: flex-start;
   margin-top: 36px;
 }
-
-.zapEmojiChangeModal {
-  position: fixed;
-  height: 344px;
-  color: var(--text-secondary);
-  background-color: var(--background-input);
-  border: 1px solid transparent;
-  border-radius: 6px;
-
-  display: flex;
-  flex-direction: column;
-  padding-left: 22px;
-  padding-right: 16px;
-  padding-block: 22px;
-
-  justify-content: flex-start;
-  align-items: center;
-
-  input {
-    display: flex;
-    width: 70%;
-    height: 36px;
-    text-align: left;
-    margin: 0;
-    margin-bottom: 24px;
-    padding-inline: 16px;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    color: var(--text-primary);
-    background: none;
-    border: none;
-    border-radius: 18px;
-
-    &:focus {
-      background-color: var(--subtile-devider);
-      outline: none;
-      box-shadow: none;
-    }
-
-    &::placeholder {
-      color: var(--text-tertiary);
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 20px;
-    }
-  }
-
-  .title {
-    font-weight: 800;
-    font-size: 18px;
-    line-height: 18px;
-    color: var(--text-secondary);
-    text-transform: uppercase;
-    margin-bottom: 20px;
-  }
-
-  .xClose {
-    background: none;
-    border: none;
-    margin: 0;
-    padding: 0;
-    width: fit-content;
-
-    position: absolute;
-    top: 16px;
-    right: 22px;
-
-    .iconClose {
-      width: 14px;
-      height: 14px;
-      display: inline-block;
-      margin: 0px 0px;
-      background-color: var(--text-secondary);
-      -webkit-mask: url(../../assets/icons/close.svg) no-repeat center;
-      mask: url(../../assets/icons/close.svg) no-repeat center;
-    }
-
-    &:hover {
-      .iconClose {
-        background-color: var(--text-primary);
-      }
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-}

src/components/SettingsZap/SettingsZap.tsx

@@ -15,6 +15,7 @@ import { createStore } from 'solid-js/store';
 import { EmojiOption } from '../../types/primal';
 import ButtonPrimary from '../Buttons/ButtonPrimary';
 import EmojiPicker from '../EmojiPicker/EmojiPicker';
+import EmojiPickModal from '../EmojiPickModal/EmojiPickModal';
 
 const SettingsZap: Component<{ id?: string }> = (props) => {
 
@@ -176,35 +177,11 @@ const SettingsZap: Component<{ id?: string }> = (props) => {
         onAbort={() => setIsRestoringZaps(false)}
       />
 
-      <Modal
+      <EmojiPickModal
         open={isEmojiChange() >= 0}
-        onBackdropClick={() => setIsEmojiChange(-1)}
-      >
-        <div id={props.id} class={styles.zapEmojiChangeModal}>
-          <div class={styles.title}>
-            {intl.formatMessage(t.zapEmojiFilterTitle)}
-          </div>
-
-          <button class={styles.xClose} onClick={() => setIsEmojiChange(-1)}>
-            <div class={styles.iconClose}></div>
-          </button>
-
-          <input
-            ref={emojiInput}
-            onInput={(e: InputEvent) => {
-              const target = e.target as HTMLInputElement;
-              setEmojiSearchTerm(() => target.value);
-            }}
-            placeholder={intl.formatMessage(t.zapEmojiFilterPlaceholder)}
-          >
-          </input>
-
-          <EmojiPicker
-            filter={emojiSearchTerm()}
-            onSelect={changeZapOptionEmoji}
-          />
-        </div>
-      </Modal>
+        onClose={() => setIsEmojiChange(-1)}
+        onSelect={changeZapOptionEmoji}
+      />
     </div>
   );
 }

src/index.scss

@@ -159,6 +159,10 @@ a {
   -webkit-mask: url(./assets/icons/attach_media.svg) no-repeat 0 / 100%;
   mask: url(./assets/icons/attach_media.svg) no-repeat 0 / 100%;
 }
+.emoji_icon {
+  -webkit-mask: url(./assets/icons/emoji.svg) no-repeat 0 / 100%;
+  mask: url(./assets/icons/emoji.svg) no-repeat 0 / 100%;
+}
 
 .bordered {
   border:solid 1px var(--subtile-devider);