@milkdown/plugin-emoji 5.4.1 → 6.0.0-next.1

package/lib/parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,UAAW,MAAM,KAAG,MACyD,CAAC"}

package/lib/remark-twemoji.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remark-twemoji.d.ts","sourceRoot":"","sources":["../src/remark-twemoji.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,IAAI,EAAU,MAAM,OAAO,CAAC;AAoC9C,eAAO,MAAM,aAAa,eACK,IAAI,SA2BlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/plugin-emoji",
-  "version": "5.4.1",
+  "version": "6.0.0-next.1",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -15,30 +15,52 @@
     "milkdown plugin"
   ],
   "devDependencies": {
-    "@milkdown/core": "5.4.1",
-    "@milkdown/prose": "5.4.1"
+    "@milkdown/core": "6.0.0-next.1",
+    "@milkdown/prose": "6.0.0-next.1"
   },
   "peerDependencies": {
-    "@milkdown/core": "^5.4.0",
-    "@milkdown/prose": "^5.4.0"
+    "@milkdown/core": "^6.0.0-next.0",
+    "@milkdown/prose": "^6.0.0-next.0"
   },
   "dependencies": {
-    "@joeattardi/emoji-button": "^4.6.0",
-    "@milkdown/utils": "5.4.1",
+    "@milkdown/utils": "6.0.0-next.1",
     "@types/node-emoji": "^1.8.1",
-    "@types/twemoji": "^12.1.2",
     "emoji-regex": "^10.0.0",
     "node-emoji": "^1.10.0",
     "remark-emoji": "^3.0.1",
     "tslib": "^2.3.1",
-    "twemoji": "^13.1.0",
+    "twemoji": "^14.0.1",
     "unist-util-visit": "^4.0.0"
   },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "packages/plugin-emoji/lib"
+        ],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      },
+      "tsc": {
+        "outputs": [],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      }
+    }
+  },
   "scripts": {
-    "start": "vite build --watch",
+    "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
     "test": "vitest",
     "tsc": "tsc --noEmit",
-    "build": "vite build"
+    "build": "vite build && tsc --emitDeclarationOnly"
   },
   "readme": "# @milkdown/plugin-emoji\n\nEmoji plugin for [milkdown](https://saul-mirone.github.io/milkdown/).\nAdd support for emoji through [shortcuts](https://www.webfx.com/tools/emoji-cheat-sheet/).\nRendered by [twemoji](https://github.com/twitter/twemoji).\n\n# Example Usage\n\n```typescript\nimport { Editor } from '@milkdown/core';\nimport { commonmark } from '@milkdown/preset-commonmark';\nimport { nord } from '@milkdown/theme-nord';\n\nimport { emoji } from '@milkdown/plugin-emoji';\n\nEditor.make().use(nord).use(commonmark).use(emoji).create();\n```\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
 }

package/src/constant.ts

@@ -2,4 +2,3 @@
 export const part = /:\+1|:-1|:[\w-]+/;
 export const full = /:\+1:|:-1:|:[\w-]+:/;
 export const input = /(:([^:\s]+):)$/;
-export const keyword = ':emoji:';

package/src/filter/helper.ts

@@ -25,7 +25,7 @@ export const checkTrigger = (
         return false;
     }
     const regex = part.exec(textBefore);
-    if (regex && textBefore.endsWith(regex[0])) {
+    if (regex && regex[0] && textBefore.endsWith(regex[0])) {
         const match = regex[0];
         setRange(from - (match.length - text.length), to);
         setSearch(match);
@@ -41,7 +41,9 @@ export const renderDropdownList = (
     onConfirm: () => void,
     setActive: (active: HTMLElement | null) => void,
 ) => {
-    dropDown.innerHTML = '';
+    while (dropDown.firstChild) {
+        dropDown.firstChild.remove();
+    }
     list.forEach(({ emoji, key }, i) => {
         const container = document.createElement('div');
         container.className = 'milkdown-emoji-filter_item';
@@ -63,7 +65,7 @@ export const renderDropdownList = (
             setActive(container);
         }
 
-        container.addEventListener('mouseenter', (e) => {
+        const onEnter = (e: MouseEvent) => {
             if ($active) {
                 $active.classList.remove('active');
             }
@@ -71,15 +73,21 @@ export const renderDropdownList = (
             if (!(target instanceof HTMLElement)) return;
             target.classList.add('active');
             setActive(target);
-        });
-        container.addEventListener('mouseleave', (e) => {
+        };
+
+        const onLeave = (e: MouseEvent) => {
             const { target } = e;
             if (!(target instanceof HTMLElement)) return;
             target.classList.remove('active');
-        });
-        container.addEventListener('mousedown', (e) => {
-            onConfirm();
+        };
+
+        const onClick = (e: MouseEvent) => {
             e.preventDefault();
-        });
+            onConfirm();
+        };
+
+        container.addEventListener('mouseenter', onEnter);
+        container.addEventListener('mouseleave', onLeave);
+        container.addEventListener('mousedown', onClick);
     });
 };

package/src/filter/index.ts

@@ -1,13 +1,15 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { calculateNodePosition, Plugin } from '@milkdown/prose';
+import { calculateNodePosition, Plugin, PluginKey } from '@milkdown/prose';
 import { Utils } from '@milkdown/utils';
 import { search } from 'node-emoji';
 
 import { checkTrigger, renderDropdownList } from './helper';
 import { injectStyle } from './style';
 
-export const filter = (utils: Utils) => {
+export const key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_FILTER');
+
+export const filter = (utils: Utils, maxListSize: number) => {
     let trigger = false;
     let _from = 0;
     let _search = '';
@@ -21,6 +23,7 @@ export const filter = (utils: Utils) => {
     };
 
     return new Plugin({
+        key,
         props: {
             handleKeyDown(_, event) {
                 if (['Delete', 'Backspace'].includes(event.key)) {
@@ -62,11 +65,13 @@ export const filter = (utils: Utils) => {
             }
 
             const dropDown = document.createElement('div');
-            const style = utils.getStyle(injectStyle);
 
-            if (style) {
-                style.split(' ').forEach((x) => dropDown.classList.add(x));
-            }
+            utils.themeManager.onFlush(() => {
+                const style = utils.getStyle(injectStyle);
+                if (style) {
+                    style.split(' ').forEach((x) => dropDown.classList.add(x));
+                }
+            });
 
             dropDown.classList.add('milkdown-emoji-filter', 'hide');
 
@@ -82,7 +87,7 @@ export const filter = (utils: Utils) => {
             };
 
             parentNode.appendChild(dropDown);
-            parentNode.addEventListener('keydown', (e) => {
+            const onKeydown = (e: Event) => {
                 if (!trigger || !(e instanceof KeyboardEvent)) return;
 
                 const { key } = e;
@@ -106,14 +111,16 @@ export const filter = (utils: Utils) => {
 
                     return;
                 }
-            });
-            parentNode.addEventListener('mousedown', (e) => {
+            };
+            const onClick = (e: Event) => {
                 if (!trigger) return;
 
                 e.stopPropagation();
                 off();
                 dropDown.classList.add('hide');
-            });
+            };
+            parentNode.addEventListener('keydown', onKeydown);
+            parentNode.addEventListener('mousedown', onClick);
 
             return {
                 update: (view) => {
@@ -124,7 +131,7 @@ export const filter = (utils: Utils) => {
                         dropDown.classList.add('hide');
                         return null;
                     }
-                    const result = search(_search).slice(0, 5);
+                    const result = search(_search).slice(0, maxListSize);
                     const { node } = view.domAtPos(_from);
                     if (result.length === 0 || !node) {
                         dropDown.classList.add('hide');
@@ -156,6 +163,12 @@ export const filter = (utils: Utils) => {
 
                     return null;
                 },
+
+                destroy: () => {
+                    parentNode.removeEventListener('keydown', onKeydown);
+                    parentNode.removeEventListener('mousedown', onClick);
+                    dropDown.remove();
+                },
             };
         },
     });

package/src/filter/style.ts

@@ -1,9 +1,21 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Emotion, ThemeTool } from '@milkdown/core';
+import {
+    Color,
+    Emotion,
+    ThemeBorder,
+    ThemeColor,
+    ThemeFont,
+    ThemeManager,
+    ThemeShadow,
+    ThemeSize,
+} from '@milkdown/core';
 
-export const injectStyle = ({ size, mixin, palette, font }: ThemeTool, { css, cx }: Emotion) => {
-    const border = mixin.border?.();
-    const shadow = mixin.shadow?.();
+export const injectStyle = (themeManager: ThemeManager, { css, cx }: Emotion) => {
+    const border = themeManager.get(ThemeBorder, undefined);
+    const shadow = themeManager.get(ThemeShadow, undefined);
+    const radius = themeManager.get(ThemeSize, 'radius');
+    const typography = themeManager.get(ThemeFont, 'typography');
+    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
 
     const style = css`
         position: absolute;
@@ -11,20 +23,20 @@ export const injectStyle = ({ size, mixin, palette, font }: ThemeTool, { css, cx
             display: none;
         }
 
-        border-radius: ${size.radius};
+        border-radius: ${radius};
         background: ${palette('surface')};
 
         .milkdown-emoji-filter_item {
             display: flex;
-            gap: 0.5rem;
-            height: 2.25rem;
-            padding: 0 1rem;
+            gap: 0.5em;
+            height: 2.57143em;
+            padding: 0 1em;
             align-items: center;
             justify-content: flex-start;
             cursor: pointer;
             line-height: 2;
-            font-family: ${font.typography};
-            font-size: 0.875rem;
+            font-family: ${typography};
+            font-size: 0.875em;
             &.active {
                 background: ${palette('secondary', 0.12)};
                 color: ${palette('primary')};

package/src/index.ts

@@ -1,8 +1,2 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { AtomList } from '@milkdown/utils';
-
-import { emojiNode } from './node';
-
-export const emoji = AtomList.create([emojiNode()]);
-
-export { emojiNode } from './node';
+export * from './node';

package/src/node.ts

@@ -8,24 +8,28 @@ import remarkEmoji from 'remark-emoji';
 import { input } from './constant';
 import { filter } from './filter';
 import { parse } from './parse';
-import { picker } from './picker';
 import { twemojiPlugin } from './remark-twemoji';
 
-export const emojiNode = createNode((utils) => {
-    const style = utils.getStyle(
-        (_, { css }) => css`
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
+export type EmojiOptions = {
+    maxListSize: number;
+};
 
-            .emoji {
-                height: 1em;
-                width: 1em;
-                margin: 0 0.05em 0 0.1em;
-                vertical-align: -0.1em;
-            }
-        `,
-    );
+export const emoji = createNode<string, EmojiOptions>((utils, options) => {
+    const getStyle = () =>
+        utils.getStyle(
+            (_, { css }) => css`
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+
+                .emoji {
+                    height: 1em;
+                    width: 1em;
+                    margin: 0 0.05em 0 0.1em;
+                    vertical-align: -0.1em;
+                }
+            `,
+        );
     return {
         id: 'emoji',
         schema: () => ({
@@ -50,25 +54,28 @@ export const emojiNode = createNode((utils) => {
             ],
             toDOM: (node) => {
                 const span = document.createElement('span');
-                span.dataset.type = 'emoji';
-                if (style) {
-                    span.classList.add(style);
-                }
+                span.dataset['type'] = 'emoji';
+                utils.themeManager.onFlush(() => {
+                    const style = getStyle();
+                    if (style) {
+                        span.classList.add(style);
+                    }
+                });
                 span.classList.add('emoji-wrapper');
-                span.innerHTML = node.attrs.html;
+                span.innerHTML = node.attrs['html'];
                 return { dom: span };
             },
             parseMarkdown: {
                 match: ({ type }) => type === 'emoji',
                 runner: (state, node, type) => {
-                    state.addNode(type, { html: node.value as string });
+                    state.addNode(type, { html: node['value'] as string });
                 },
             },
             toMarkdown: {
                 match: (node) => node.type.name === 'emoji',
                 runner: (state, node) => {
                     const span = document.createElement('span');
-                    span.innerHTML = node.attrs.html;
+                    span.innerHTML = node.attrs['html'];
                     const img = span.querySelector('img');
                     const title = img?.title;
                     span.remove();
@@ -92,6 +99,6 @@ export const emojiNode = createNode((utils) => {
             }),
         ],
         remarkPlugins: () => [remarkEmoji as RemarkPlugin, twemojiPlugin],
-        prosePlugins: () => [picker(utils), filter(utils)],
+        prosePlugins: () => [filter(utils, options?.maxListSize ?? 6)],
     };
 });

package/src/parse.ts

@@ -1,4 +1,7 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import twemoji from 'twemoji';
 
-export const parse = (emoji: string) => twemoji.parse(emoji, { attributes: (text) => ({ title: text }) });
+const setAttr = (text: string) => ({ title: text });
+
+export const parse = (emoji: string): string =>
+    twemoji.parse(emoji, { attributes: setAttr as unknown as () => void }) as unknown as string;

package/src/remark-twemoji.ts

@@ -16,10 +16,16 @@ function flatMap(ast: Node, fn: (node: Node, index: number, parent: Node | null)
         if (isParent(node)) {
             const out = [];
             for (let i = 0, n = node.children.length; i < n; i++) {
-                const xs = transform(node.children[i], i, node);
-                if (xs) {
-                    for (let j = 0, m = xs.length; j < m; j++) {
-                        out.push(xs[j]);
+                const nthChild = node.children[i];
+                if (nthChild) {
+                    const xs = transform(nthChild, i, node);
+                    if (xs) {
+                        for (let j = 0, m = xs.length; j < m; j++) {
+                            const item = xs[j];
+                            if (item) {
+                                out.push(item);
+                            }
+                        }
                     }
                 }
             }
@@ -43,11 +49,13 @@ export const twemojiPlugin = () => {
             while ((match = regex.exec(str))) {
                 const { index } = match;
                 const emoji = match[0];
-                if (index > 0) {
-                    output.push({ ...node, value: str.slice(0, index) });
+                if (emoji) {
+                    if (index > 0) {
+                        output.push({ ...node, value: str.slice(0, index) });
+                    }
+                    output.push({ ...node, value: parse(emoji), type: 'emoji' });
+                    str = str.slice(index + emoji.length);
                 }
-                output.push({ ...node, value: parse(emoji), type: 'emoji' });
-                str = str.slice(index + emoji.length);
             }
             if (str.length) {
                 output.push({ ...node, value: str });

package/lib/src/constant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["constant.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,IAAI,QAAqB,CAAC;AACvC,eAAO,MAAM,IAAI,QAAwB,CAAC;AAC1C,eAAO,MAAM,KAAK,QAAmB,CAAC;AACtC,eAAO,MAAM,OAAO,YAAY,CAAC"}

package/lib/src/filter/helper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAKnC,eAAO,MAAM,YAAY,SACf,UAAU,QACV,MAAM,MACR,MAAM,QACJ,MAAM,mBACK,MAAM,MAAM,MAAM,KAAK,IAAI,qBACzB,MAAM,KAAK,IAAI,YAoBrC,CAAC;AAEF,eAAO,MAAM,kBAAkB,SACrB,KAAK,EAAE,YACH,WAAW,WACZ,WAAW,GAAG,IAAI,aAChB,MAAM,IAAI,sBACD,WAAW,GAAG,IAAI,KAAK,IAAI,SA2ClD,CAAC"}

package/lib/src/filter/index.d.ts

@@ -1,4 +0,0 @@
-import { Plugin } from '@milkdown/prose';
-import { Utils } from '@milkdown/utils';
-export declare const filter: (utils: Utils) => Plugin<any, any>;
-//# sourceMappingURL=index.d.ts.map

package/lib/src/filter/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyB,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAMxC,eAAO,MAAM,MAAM,UAAW,KAAK,qBAwJlC,CAAC"}

package/lib/src/filter/style.d.ts

@@ -1,3 +0,0 @@
-import type { Emotion, ThemeTool } from '@milkdown/core';
-export declare const injectStyle: ({ size, mixin, palette, font }: ThemeTool, { css, cx }: Emotion) => string;
-//# sourceMappingURL=style.d.ts.map

package/lib/src/filter/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEzD,eAAO,MAAM,WAAW,mCAAoC,SAAS,eAAe,OAAO,WAsC1F,CAAC"}

package/lib/src/index.d.ts

@@ -1,4 +0,0 @@
-import { AtomList } from '@milkdown/utils';
-export declare const emoji: AtomList<import("@milkdown/utils/lib/src/types").Metadata<import("@milkdown/utils/lib/src/types").GetPlugin<string, import("@milkdown/utils").UnknownRecord>> & import("@milkdown/core").MilkdownPlugin>;
-export { emojiNode } from './node';
-//# sourceMappingURL=index.d.ts.map

package/lib/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,eAAO,MAAM,KAAK,0MAAiC,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/src/node.d.ts

@@ -1,6 +0,0 @@
-export declare const emojiNode: import("@milkdown/utils/lib/src/types").WithExtend<string, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
-    id: string;
-    schema: (ctx: import("@milkdown/core").Ctx) => import("@milkdown/core").NodeSchema;
-    view?: ((ctx: import("@milkdown/core").Ctx) => import("@milkdown/prose").NodeViewFactory) | undefined;
-}>;
-//# sourceMappingURL=node.d.ts.map

package/lib/src/node.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["node.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS;;;;EAmFpB,CAAC"}

package/lib/src/parse.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["parse.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,UAAW,MAAM,WAAsE,CAAC"}

package/lib/src/picker.d.ts

@@ -1,4 +0,0 @@
-import { Plugin } from '@milkdown/prose';
-import { Utils } from '@milkdown/utils';
-export declare const picker: (utils: Utils) => Plugin<any, any>;
-//# sourceMappingURL=picker.d.ts.map

package/lib/src/picker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"picker.d.ts","sourceRoot":"","sources":["picker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyC,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AA2BxC,eAAO,MAAM,MAAM,UAAW,KAAK,qBA8FlC,CAAC"}

package/lib/src/remark-twemoji.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"remark-twemoji.d.ts","sourceRoot":"","sources":["remark-twemoji.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,IAAI,EAAU,MAAM,OAAO,CAAC;AA8B9C,eAAO,MAAM,aAAa,eACK,IAAI,SAyBlC,CAAC"}

package/src/picker.ts

@@ -1,125 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { EmojiButton } from '@joeattardi/emoji-button';
-import { Decoration, DecorationSet, EditorView, Plugin } from '@milkdown/prose';
-import { Utils } from '@milkdown/utils';
-
-import { parse } from './parse';
-
-const keyword = ':emoji:';
-
-const checkTrigger = (
-    view: EditorView,
-    from: number,
-    to: number,
-    text: string,
-    setRange: (from: number, to: number) => void,
-) => {
-    if (view.composing) return false;
-    const { state } = view;
-    const $from = state.doc.resolve(from);
-    if ($from.parent.type.spec.code) return false;
-    const textBefore =
-        $from.parent.textBetween($from.parentOffset - keyword.length + 1, $from.parentOffset, undefined, '\ufffc') +
-        text;
-    if (textBefore === keyword) {
-        setRange(from - keyword.length + 1, to + 1);
-        return true;
-    }
-    return false;
-};
-
-export const picker = (utils: Utils) => {
-    let trigger = false;
-    const holder = document.createElement('span');
-    let _from = 0;
-    let _to = 0;
-    const off = () => {
-        trigger = false;
-        _from = 0;
-        _to = 0;
-    };
-
-    const plugin = new Plugin({
-        props: {
-            handleKeyDown() {
-                off();
-                return false;
-            },
-            handleClick() {
-                off();
-                return false;
-            },
-            handleTextInput(view, from, to, text) {
-                trigger = checkTrigger(view, from, to, text, (from, to) => {
-                    _from = from;
-                    _to = to;
-                });
-
-                if (!trigger) {
-                    off();
-                }
-                return false;
-            },
-            decorations(state) {
-                if (!trigger) return null;
-
-                return DecorationSet.create(state.doc, [Decoration.widget(state.selection.to, holder)]);
-            },
-        },
-        view: (editorView) => {
-            const { parentNode } = editorView.dom;
-            if (!parentNode) {
-                throw new Error();
-            }
-            utils.getStyle(({ palette, font }, { injectGlobal }) => {
-                const css = injectGlobal;
-                css`
-                    .emoji-picker {
-                        --dark-search-background-color: ${palette('surface')} !important;
-                        --dark-text-color: ${palette('neutral', 0.87)} !important;
-                        --dark-background-color: ${palette('background')} !important;
-                        --dark-border-color: ${palette('shadow')} !important;
-                        --dark-hover-color: ${palette('secondary', 0.12)} !important;
-                        --dark-blue-color: ${palette('primary')} !important;
-                        --dark-search-icon-color: ${palette('primary')} !important;
-                        --dark-category-button-color: ${palette('secondary', 0.4)} !important;
-                        --font: ${font.typography} !important;
-                        --font-size: 1rem !important;
-                    }
-                `;
-            });
-            const emojiPicker = new EmojiButton({
-                rootElement: parentNode as HTMLElement,
-                autoFocusSearch: false,
-                style: 'twemoji',
-                theme: 'dark',
-                zIndex: 99,
-            });
-            emojiPicker.on('emoji', (selection) => {
-                const start = _from;
-                const end = _to;
-                off();
-                const html = parse(selection.emoji);
-                const node = editorView.state.schema.node('emoji', { html });
-                const { tr } = editorView.state;
-
-                editorView.dispatch(tr.replaceRangeWith(start, end, node));
-            });
-            return {
-                update: () => {
-                    if (!trigger) {
-                        emojiPicker.hidePicker();
-                        return null;
-                    }
-                    emojiPicker.showPicker(holder);
-                    return null;
-                },
-                destroy: () => {
-                    emojiPicker.destroyPicker();
-                },
-            };
-        },
-    });
-
-    return plugin;
-};