@milkdown/plugin-emoji 5.5.0 → 6.0.0

package/lib/{src/constant.d.ts → constant.d.ts}

@@ -1,5 +1,4 @@
 export declare const part: RegExp;
 export declare const full: RegExp;
 export declare const input: RegExp;
-export declare const keyword = ":emoji:";
 //# sourceMappingURL=constant.d.ts.map

package/lib/constant.d.ts.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../src/filter/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,SAmDlD,CAAC"}

package/lib/{src/filter → filter}/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/filter/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyB,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAMxC,eAAO,MAAM,GAAG,qBAAgD,CAAC;AAEjE,eAAO,MAAM,MAAM,UAAW,KAAK,eAAe,MAAM,qBAuKvD,CAAC"}

package/lib/filter/style.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/filter/style.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,OAAO,EAIP,YAAY,EAGf,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,iBAAkB,YAAY,eAAe,OAAO,WAyC3E,CAAC"}

package/lib/index.d.ts

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

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,cAAc,QAAQ,CAAC;AAEvB,eAAO,MAAM,KAAK,wLAAiC,CAAC"}

package/lib/index.es.js

@@ -18,17 +18,18 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { createNode, AtomList } from "@milkdown/utils";
-import { PluginKey, Plugin, calculateNodePosition, DecorationSet, Decoration, InputRule } from "@milkdown/prose";
+import { PluginKey, Plugin, calculateNodePosition, InputRule } from "@milkdown/prose";
 import nodeEmoji, { search } from "node-emoji";
 import remarkEmoji from "remark-emoji";
 import twemoji from "twemoji";
-import { EmojiButton } from "@joeattardi/emoji-button";
+import { ThemeBorder, ThemeShadow, ThemeSize, ThemeFont, ThemeColor } from "@milkdown/core";
 import emojiRegex from "emoji-regex";
 const part = /:\+1|:-1|:[\w-]+/;
 const full = /:\+1:|:-1:|:[\w-]+:/;
 const input = /(:([^:\s]+):)$/;
-const parse = (emoji2) => twemoji.parse(emoji2, { attributes: (text) => ({ title: text }) });
-const checkTrigger$1 = (view, from, to, text, setRange, setSearch) => {
+const setAttr = (text) => ({ title: text });
+const parse = (emoji2) => twemoji.parse(emoji2, { attributes: setAttr });
+const checkTrigger = (view, from, to, text, setRange, setSearch) => {
   if (view.composing)
     return false;
   const { state } = view;
@@ -49,7 +50,9 @@ const checkTrigger$1 = (view, from, to, text, setRange, setSearch) => {
   return false;
 };
 const renderDropdownList = (list, dropDown, $active, onConfirm, setActive) => {
-  dropDown.innerHTML = "";
+  while (dropDown.firstChild) {
+    dropDown.firstChild.remove();
+  }
   list.forEach(({ emoji: emoji2, key: key2 }, i) => {
     const container = document.createElement("div");
     container.className = "milkdown-emoji-filter_item";
@@ -66,7 +69,7 @@ const renderDropdownList = (list, dropDown, $active, onConfirm, setActive) => {
       container.classList.add("active");
       setActive(container);
     }
-    container.addEventListener("mouseenter", (e) => {
+    const onEnter = (e) => {
       if ($active) {
         $active.classList.remove("active");
       }
@@ -75,43 +78,48 @@ const renderDropdownList = (list, dropDown, $active, onConfirm, setActive) => {
         return;
       target.classList.add("active");
       setActive(target);
-    });
-    container.addEventListener("mouseleave", (e) => {
+    };
+    const onLeave = (e) => {
       const { target } = e;
       if (!(target instanceof HTMLElement))
         return;
       target.classList.remove("active");
-    });
-    container.addEventListener("mousedown", (e) => {
-      onConfirm();
+    };
+    const onClick = (e) => {
       e.preventDefault();
-    });
+      onConfirm();
+    };
+    container.addEventListener("mouseenter", onEnter);
+    container.addEventListener("mouseleave", onLeave);
+    container.addEventListener("mousedown", onClick);
   });
 };
-const injectStyle = ({ size, mixin, palette, font }, { css, cx }) => {
-  var _a, _b;
-  const border = (_a = mixin.border) == null ? void 0 : _a.call(mixin);
-  const shadow = (_b = mixin.shadow) == null ? void 0 : _b.call(mixin);
+const injectStyle = (themeManager, { css, cx }) => {
+  const border = themeManager.get(ThemeBorder, void 0);
+  const shadow = themeManager.get(ThemeShadow, void 0);
+  const radius = themeManager.get(ThemeSize, "radius");
+  const typography = themeManager.get(ThemeFont, "typography");
+  const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
   const style = css`
         position: absolute;
         &.hide {
             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")};
@@ -127,8 +135,8 @@ const injectStyle = ({ size, mixin, palette, font }, { css, cx }) => {
     `;
   return cx(border, shadow, style);
 };
-const key$1 = new PluginKey("MILKDOWN_PLUGIN_EMOJI_FILTER");
-const filter = (utils) => {
+const key = new PluginKey("MILKDOWN_PLUGIN_EMOJI_FILTER");
+const filter = (utils, maxListSize) => {
   let trigger = false;
   let _from = 0;
   let _search = "";
@@ -140,7 +148,7 @@ const filter = (utils) => {
     $active = null;
   };
   return new Plugin({
-    key: key$1,
+    key,
     props: {
       handleKeyDown(_, event) {
         if (["Delete", "Backspace"].includes(event.key)) {
@@ -158,7 +166,7 @@ const filter = (utils) => {
         return true;
       },
       handleTextInput(view, from, to, text) {
-        trigger = checkTrigger$1(view, from, to, text, (from2) => {
+        trigger = checkTrigger(view, from, to, text, (from2) => {
           _from = from2;
         }, (search2) => {
           _search = search2;
@@ -175,11 +183,15 @@ const filter = (utils) => {
         throw new Error();
       }
       const dropDown = document.createElement("div");
-      const style = utils.getStyle(injectStyle);
-      if (style) {
-        style.split(" ").forEach((x) => dropDown.classList.add(x));
-      }
       dropDown.classList.add("milkdown-emoji-filter", "hide");
+      utils.themeManager.onFlush(() => {
+        const className = dropDown.className.split(" ").filter((x) => ["hide", "milkdown-emoji-filter"].includes(x));
+        dropDown.className = className.join(" ");
+        const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));
+        if (style) {
+          style.split(" ").forEach((x) => dropDown.classList.add(x));
+        }
+      });
       const replace = () => {
         var _a;
         if (!$active)
@@ -191,7 +203,7 @@ const filter = (utils) => {
         dropDown.classList.add("hide");
       };
       parentNode.appendChild(dropDown);
-      parentNode.addEventListener("keydown", (e) => {
+      const onKeydown = (e) => {
         if (!trigger || !(e instanceof KeyboardEvent))
           return;
         const { key: key2 } = e;
@@ -210,14 +222,16 @@ const filter = (utils) => {
           $active = next;
           return;
         }
-      });
-      parentNode.addEventListener("mousedown", (e) => {
+      };
+      const onClick = (e) => {
         if (!trigger)
           return;
         e.stopPropagation();
         off();
         dropDown.classList.add("hide");
-      });
+      };
+      parentNode.addEventListener("keydown", onKeydown);
+      parentNode.addEventListener("mousedown", onClick);
       return {
         update: (view) => {
           const { selection } = view.state;
@@ -226,7 +240,7 @@ const filter = (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");
@@ -253,118 +267,15 @@ const filter = (utils) => {
             return [top, left];
           });
           return null;
-        }
-      };
-    }
-  });
-};
-const keyword = ":emoji:";
-const key = new PluginKey("MILKDOWN_PLUGIN_EMOJI_PICKER");
-const checkTrigger = (view, from, to, text, setRange) => {
-  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, void 0, "\uFFFC") + text;
-  if (textBefore === keyword) {
-    setRange(from - keyword.length + 1, to + 1);
-    return true;
-  }
-  return false;
-};
-const picker = (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({
-    key,
-    props: {
-      handleKeyDown() {
-        off();
-        return false;
-      },
-      handleClick() {
-        off();
-        return false;
-      },
-      handleTextInput(view, from, to, text) {
-        trigger = checkTrigger(view, from, to, text, (from2, to2) => {
-          _from = from2;
-          _to = to2;
-        });
-        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,
-        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();
+          parentNode.removeEventListener("keydown", onKeydown);
+          parentNode.removeEventListener("mousedown", onClick);
+          dropDown.remove();
         }
       };
     }
   });
-  return plugin;
 };
 const regex = emojiRegex();
 const isParent = (node) => !!node.children;
@@ -422,19 +333,19 @@ const twemojiPlugin = () => {
   }
   return transformer;
 };
-const emojiNode = createNode((utils) => {
-  const style = utils.getStyle((_, { css }) => css`
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
+const emojiNode = createNode((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;
-            }
-        `);
+                .emoji {
+                    height: 1em;
+                    width: 1em;
+                    margin: 0 0.05em 0 0.1em;
+                    vertical-align: -0.1em;
+                }
+            `);
   return {
     id: "emoji",
     schema: () => ({
@@ -459,11 +370,14 @@ const emojiNode = createNode((utils) => {
       ],
       toDOM: (node) => {
         const span = document.createElement("span");
-        span.dataset["type"] = "emoji";
-        if (style) {
-          span.classList.add(style);
-        }
         span.classList.add("emoji-wrapper");
+        span.dataset["type"] = "emoji";
+        utils.themeManager.onFlush(() => {
+          const style = getStyle();
+          if (style) {
+            span.classList.add(style);
+          }
+        });
         span.innerHTML = node.attrs["html"];
         return { dom: span };
       },
@@ -498,7 +412,10 @@ const emojiNode = createNode((utils) => {
       })
     ],
     remarkPlugins: () => [remarkEmoji, twemojiPlugin],
-    prosePlugins: () => [picker(utils), filter(utils)]
+    prosePlugins: () => {
+      var _a;
+      return [filter(utils, (_a = options == null ? void 0 : options.maxListSize) != null ? _a : 6)];
+    }
   };
 });
 const emoji = AtomList.create([emojiNode()]);

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/constant.ts","../src/parse.ts","../src/filter/helper.ts","../src/filter/style.ts","../src/filter/index.ts","../src/picker.ts","../src/remark-twemoji.ts","../src/node.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nexport const part = /:\\+1|:-1|:[\\w-]+/;\nexport const full = /:\\+1:|:-1:|:[\\w-]+:/;\nexport const input = /(:([^:\\s]+):)$/;\nexport const keyword = ':emoji:';\n","/* Copyright 2021, Milkdown by Mirone. */\nimport twemoji from 'twemoji';\n\nexport const parse = (emoji: string) => twemoji.parse(emoji, { attributes: (text) => ({ title: text }) });\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { EditorView } from '@milkdown/prose';\nimport { Emoji } from 'node-emoji';\n\nimport { full, part } from '../constant';\nimport { parse } from '../parse';\n\nexport const checkTrigger = (\n    view: EditorView,\n    from: number,\n    to: number,\n    text: string,\n    setRange: (from: number, to: number) => void,\n    setSearch: (words: string) => void,\n) => {\n    if (view.composing) return false;\n    const { state } = view;\n    const $from = state.doc.resolve(from);\n    if ($from.parent.type.spec.code) return false;\n    const textBefore = (\n        $from.parent.textBetween(Math.max(0, $from.parentOffset - 10), $from.parentOffset, undefined, '\\ufffc') + text\n    ).toLowerCase();\n    if (full.test(textBefore)) {\n        return false;\n    }\n    const regex = part.exec(textBefore);\n    if (regex && regex[0] && textBefore.endsWith(regex[0])) {\n        const match = regex[0];\n        setRange(from - (match.length - text.length), to);\n        setSearch(match);\n        return true;\n    }\n    return false;\n};\n\nexport const renderDropdownList = (\n    list: Emoji[],\n    dropDown: HTMLElement,\n    $active: HTMLElement | null,\n    onConfirm: () => void,\n    setActive: (active: HTMLElement | null) => void,\n) => {\n    dropDown.innerHTML = '';\n    list.forEach(({ emoji, key }, i) => {\n        const container = document.createElement('div');\n        container.className = 'milkdown-emoji-filter_item';\n\n        const emojiSpan = document.createElement('span');\n        emojiSpan.innerHTML = parse(emoji);\n\n        emojiSpan.className = 'milkdown-emoji-filter_item-emoji';\n        const keySpan = document.createElement('span');\n        keySpan.textContent = ':' + key + ':';\n        keySpan.className = 'milkdown-emoji-filter_item-key';\n\n        container.appendChild(emojiSpan);\n        container.appendChild(keySpan);\n        dropDown.appendChild(container);\n\n        if (i === 0) {\n            container.classList.add('active');\n            setActive(container);\n        }\n\n        container.addEventListener('mouseenter', (e) => {\n            if ($active) {\n                $active.classList.remove('active');\n            }\n            const { target } = e;\n            if (!(target instanceof HTMLElement)) return;\n            target.classList.add('active');\n            setActive(target);\n        });\n        container.addEventListener('mouseleave', (e) => {\n            const { target } = e;\n            if (!(target instanceof HTMLElement)) return;\n            target.classList.remove('active');\n        });\n        container.addEventListener('mousedown', (e) => {\n            onConfirm();\n            e.preventDefault();\n        });\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Emotion, ThemeTool } from '@milkdown/core';\n\nexport const injectStyle = ({ size, mixin, palette, font }: ThemeTool, { css, cx }: Emotion) => {\n    const border = mixin.border?.();\n    const shadow = mixin.shadow?.();\n\n    const style = css`\n        position: absolute;\n        &.hide {\n            display: none;\n        }\n\n        border-radius: ${size.radius};\n        background: ${palette('surface')};\n\n        .milkdown-emoji-filter_item {\n            display: flex;\n            gap: 0.5rem;\n            height: 2.25rem;\n            padding: 0 1rem;\n            align-items: center;\n            justify-content: flex-start;\n            cursor: pointer;\n            line-height: 2;\n            font-family: ${font.typography};\n            font-size: 0.875rem;\n            &.active {\n                background: ${palette('secondary', 0.12)};\n                color: ${palette('primary')};\n            }\n        }\n\n        .emoji {\n            height: 1em;\n            width: 1em;\n            margin: 0 0.05em 0 0.1em;\n            vertical-align: -0.1em;\n        }\n    `;\n    return cx(border, shadow, style);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { calculateNodePosition, Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\nimport { search } from 'node-emoji';\n\nimport { checkTrigger, renderDropdownList } from './helper';\nimport { injectStyle } from './style';\n\nexport const key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_FILTER');\n\nexport const filter = (utils: Utils) => {\n    let trigger = false;\n    let _from = 0;\n    let _search = '';\n    let $active: null | HTMLElement = null;\n\n    const off = () => {\n        trigger = false;\n        _from = 0;\n        _search = '';\n        $active = null;\n    };\n\n    return new Plugin({\n        key,\n        props: {\n            handleKeyDown(_, event) {\n                if (['Delete', 'Backspace'].includes(event.key)) {\n                    _search = _search.slice(0, -1);\n                    if (_search.length <= 1) {\n                        off();\n                    }\n                    return false;\n                }\n                if (!trigger) return false;\n                if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n                    return false;\n                }\n                return true;\n            },\n            handleTextInput(view, from, to, text) {\n                trigger = checkTrigger(\n                    view,\n                    from,\n                    to,\n                    text,\n                    (from) => {\n                        _from = from;\n                    },\n                    (search) => {\n                        _search = search;\n                    },\n                );\n                if (!trigger) {\n                    off();\n                }\n                return false;\n            },\n        },\n        view: (editorView) => {\n            const { parentNode } = editorView.dom;\n            if (!parentNode) {\n                throw new Error();\n            }\n\n            const dropDown = document.createElement('div');\n            const style = utils.getStyle(injectStyle);\n\n            if (style) {\n                style.split(' ').forEach((x) => dropDown.classList.add(x));\n            }\n\n            dropDown.classList.add('milkdown-emoji-filter', 'hide');\n\n            const replace = () => {\n                if (!$active) return;\n\n                const { tr } = editorView.state;\n                const node = editorView.state.schema.node('emoji', { html: $active.firstElementChild?.innerHTML });\n\n                editorView.dispatch(tr.delete(_from, _from + _search.length).insert(_from, node));\n                off();\n                dropDown.classList.add('hide');\n            };\n\n            parentNode.appendChild(dropDown);\n            parentNode.addEventListener('keydown', (e) => {\n                if (!trigger || !(e instanceof KeyboardEvent)) return;\n\n                const { key } = e;\n\n                if (key === 'Enter') {\n                    replace();\n                    return;\n                }\n\n                if (['ArrowDown', 'ArrowUp'].includes(key)) {\n                    const next =\n                        key === 'ArrowDown'\n                            ? $active?.nextElementSibling || dropDown.firstElementChild\n                            : $active?.previousElementSibling || dropDown.lastElementChild;\n                    if ($active) {\n                        $active.classList.remove('active');\n                    }\n                    if (!next) return;\n                    next.classList.add('active');\n                    $active = next as HTMLElement;\n\n                    return;\n                }\n            });\n            parentNode.addEventListener('mousedown', (e) => {\n                if (!trigger) return;\n\n                e.stopPropagation();\n                off();\n                dropDown.classList.add('hide');\n            });\n\n            return {\n                update: (view) => {\n                    const { selection } = view.state;\n\n                    if (selection.from - selection.to !== 0 || !trigger) {\n                        off();\n                        dropDown.classList.add('hide');\n                        return null;\n                    }\n                    const result = search(_search).slice(0, 5);\n                    const { node } = view.domAtPos(_from);\n                    if (result.length === 0 || !node) {\n                        dropDown.classList.add('hide');\n                        return null;\n                    }\n\n                    dropDown.classList.remove('hide');\n                    renderDropdownList(result, dropDown, $active, replace, (a) => {\n                        $active = a;\n                    });\n                    calculateNodePosition(view, dropDown, (selected, target, parent) => {\n                        const $editor = dropDown.parentElement;\n                        if (!$editor) {\n                            throw new Error();\n                        }\n                        const start = view.coordsAtPos(_from);\n                        let left = start.left - parent.left;\n                        let top = selected.bottom - parent.top + 14 + $editor.scrollTop;\n\n                        if (left < 0) {\n                            left = 0;\n                        }\n\n                        if (window.innerHeight - start.bottom < target.height) {\n                            top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;\n                        }\n                        return [top, left];\n                    });\n\n                    return null;\n                },\n            };\n        },\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { EmojiButton } from '@joeattardi/emoji-button';\nimport { Decoration, DecorationSet, EditorView, Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { parse } from './parse';\n\nconst keyword = ':emoji:';\nexport const key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_PICKER');\n\nconst checkTrigger = (\n    view: EditorView,\n    from: number,\n    to: number,\n    text: string,\n    setRange: (from: number, to: number) => void,\n) => {\n    if (view.composing) return false;\n    const { state } = view;\n    const $from = state.doc.resolve(from);\n    if ($from.parent.type.spec.code) return false;\n    const textBefore =\n        $from.parent.textBetween($from.parentOffset - keyword.length + 1, $from.parentOffset, undefined, '\\ufffc') +\n        text;\n    if (textBefore === keyword) {\n        setRange(from - keyword.length + 1, to + 1);\n        return true;\n    }\n    return false;\n};\n\nexport const picker = (utils: Utils) => {\n    let trigger = false;\n    const holder = document.createElement('span');\n    let _from = 0;\n    let _to = 0;\n    const off = () => {\n        trigger = false;\n        _from = 0;\n        _to = 0;\n    };\n\n    const plugin = new Plugin({\n        key,\n        props: {\n            handleKeyDown() {\n                off();\n                return false;\n            },\n            handleClick() {\n                off();\n                return false;\n            },\n            handleTextInput(view, from, to, text) {\n                trigger = checkTrigger(view, from, to, text, (from, to) => {\n                    _from = from;\n                    _to = to;\n                });\n\n                if (!trigger) {\n                    off();\n                }\n                return false;\n            },\n            decorations(state) {\n                if (!trigger) return null;\n\n                return DecorationSet.create(state.doc, [Decoration.widget(state.selection.to, holder)]);\n            },\n        },\n        view: (editorView) => {\n            const { parentNode } = editorView.dom;\n            if (!parentNode) {\n                throw new Error();\n            }\n            utils.getStyle(({ palette, font }, { injectGlobal }) => {\n                const css = injectGlobal;\n                css`\n                    .emoji-picker {\n                        --dark-search-background-color: ${palette('surface')} !important;\n                        --dark-text-color: ${palette('neutral', 0.87)} !important;\n                        --dark-background-color: ${palette('background')} !important;\n                        --dark-border-color: ${palette('shadow')} !important;\n                        --dark-hover-color: ${palette('secondary', 0.12)} !important;\n                        --dark-blue-color: ${palette('primary')} !important;\n                        --dark-search-icon-color: ${palette('primary')} !important;\n                        --dark-category-button-color: ${palette('secondary', 0.4)} !important;\n                        --font: ${font.typography} !important;\n                        --font-size: 1rem !important;\n                    }\n                `;\n            });\n            const emojiPicker = new EmojiButton({\n                rootElement: parentNode as HTMLElement,\n                autoFocusSearch: false,\n                style: 'twemoji',\n                theme: 'dark',\n                zIndex: 99,\n            });\n            emojiPicker.on('emoji', (selection) => {\n                const start = _from;\n                const end = _to;\n                off();\n                const html = parse(selection.emoji);\n                const node = editorView.state.schema.node('emoji', { html });\n                const { tr } = editorView.state;\n\n                editorView.dispatch(tr.replaceRangeWith(start, end, node));\n            });\n            return {\n                update: () => {\n                    if (!trigger) {\n                        emojiPicker.hidePicker();\n                        return null;\n                    }\n                    emojiPicker.showPicker(holder);\n                    return null;\n                },\n                destroy: () => {\n                    emojiPicker.destroyPicker();\n                },\n            };\n        },\n    });\n\n    return plugin;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport emojiRegex from 'emoji-regex';\nimport { Literal, Node, Parent } from 'unist';\n\nimport { parse } from './parse';\n\nconst regex = emojiRegex();\n\nconst isParent = (node: Node): node is Parent => !!(node as Parent).children;\nconst isLiteral = (node: Node): node is Literal => !!(node as Literal).value;\n\nfunction flatMap(ast: Node, fn: (node: Node, index: number, parent: Node | null) => Node[]) {\n    return transform(ast, 0, null)[0];\n\n    function transform(node: Node, index: number, parent: Node | null) {\n        if (isParent(node)) {\n            const out = [];\n            for (let i = 0, n = node.children.length; i < n; i++) {\n                const nthChild = node.children[i];\n                if (nthChild) {\n                    const xs = transform(nthChild, i, node);\n                    if (xs) {\n                        for (let j = 0, m = xs.length; j < m; j++) {\n                            const item = xs[j];\n                            if (item) {\n                                out.push(item);\n                            }\n                        }\n                    }\n                }\n            }\n            node.children = out;\n        }\n\n        return fn(node, index, parent);\n    }\n}\n\nexport const twemojiPlugin = () => {\n    function transformer(tree: Node) {\n        flatMap(tree, (node) => {\n            if (!isLiteral(node)) {\n                return [node];\n            }\n            const value = node.value as string;\n            const output: Literal<string>[] = [];\n            let match;\n            let str = value;\n            while ((match = regex.exec(str))) {\n                const { index } = match;\n                const emoji = match[0];\n                if (emoji) {\n                    if (index > 0) {\n                        output.push({ ...node, value: str.slice(0, index) });\n                    }\n                    output.push({ ...node, value: parse(emoji), type: 'emoji' });\n                    str = str.slice(index + emoji.length);\n                }\n            }\n            if (str.length) {\n                output.push({ ...node, value: str });\n            }\n            return output;\n        });\n    }\n    return transformer;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { RemarkPlugin } from '@milkdown/core';\nimport { InputRule } from '@milkdown/prose';\nimport { createNode } from '@milkdown/utils';\nimport nodeEmoji from 'node-emoji';\nimport remarkEmoji from 'remark-emoji';\n\nimport { input } from './constant';\nimport { filter } from './filter';\nimport { parse } from './parse';\nimport { picker } from './picker';\nimport { twemojiPlugin } from './remark-twemoji';\n\nexport const emojiNode = createNode((utils) => {\n    const style = utils.getStyle(\n        (_, { css }) => css`\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n\n            .emoji {\n                height: 1em;\n                width: 1em;\n                margin: 0 0.05em 0 0.1em;\n                vertical-align: -0.1em;\n            }\n        `,\n    );\n    return {\n        id: 'emoji',\n        schema: () => ({\n            group: 'inline',\n            inline: true,\n            selectable: false,\n            attrs: {\n                html: {\n                    default: '',\n                },\n            },\n            parseDOM: [\n                {\n                    tag: 'span[data-type=\"emoji\"]',\n                    getAttrs: (dom) => {\n                        if (!(dom instanceof HTMLElement)) {\n                            throw new Error();\n                        }\n                        return { html: dom.innerHTML };\n                    },\n                },\n            ],\n            toDOM: (node) => {\n                const span = document.createElement('span');\n                span.dataset['type'] = 'emoji';\n                if (style) {\n                    span.classList.add(style);\n                }\n                span.classList.add('emoji-wrapper');\n                span.innerHTML = node.attrs['html'];\n                return { dom: span };\n            },\n            parseMarkdown: {\n                match: ({ type }) => type === 'emoji',\n                runner: (state, node, type) => {\n                    state.addNode(type, { html: node['value'] as string });\n                },\n            },\n            toMarkdown: {\n                match: (node) => node.type.name === 'emoji',\n                runner: (state, node) => {\n                    const span = document.createElement('span');\n                    span.innerHTML = node.attrs['html'];\n                    const img = span.querySelector('img');\n                    const title = img?.title;\n                    span.remove();\n                    state.addNode('text', undefined, title);\n                },\n            },\n        }),\n        inputRules: (nodeType) => [\n            new InputRule(input, (state, match, start, end) => {\n                const content = match[0];\n                if (!content) return null;\n                const got = nodeEmoji.get(content);\n                if (!got || content.includes(got)) return null;\n\n                const html = parse(got);\n\n                return state.tr\n                    .setMeta('emoji', true)\n                    .replaceRangeWith(start, end, nodeType.create({ html }))\n                    .scrollIntoView();\n            }),\n        ],\n        remarkPlugins: () => [remarkEmoji as RemarkPlugin, twemojiPlugin],\n        prosePlugins: () => [picker(utils), filter(utils)],\n    };\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList } from '@milkdown/utils';\n\nimport { emojiNode } from './node';\n\nexport const emoji = AtomList.create([emojiNode()]);\n\nexport { emojiNode } from './node';\n"],"names":["checkTrigger","key"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/constant.ts","../src/parse.ts","../src/filter/helper.ts","../src/filter/style.ts","../src/filter/index.ts","../src/remark-twemoji.ts","../src/node.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nexport const part = /:\\+1|:-1|:[\\w-]+/;\nexport const full = /:\\+1:|:-1:|:[\\w-]+:/;\nexport const input = /(:([^:\\s]+):)$/;\n","/* Copyright 2021, Milkdown by Mirone. */\nimport twemoji from 'twemoji';\n\nconst setAttr = (text: string) => ({ title: text });\n\nexport const parse = (emoji: string): string =>\n    twemoji.parse(emoji, { attributes: setAttr as unknown as () => void }) as unknown as string;\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { EditorView } from '@milkdown/prose';\nimport { Emoji } from 'node-emoji';\n\nimport { full, part } from '../constant';\nimport { parse } from '../parse';\n\nexport const checkTrigger = (\n    view: EditorView,\n    from: number,\n    to: number,\n    text: string,\n    setRange: (from: number, to: number) => void,\n    setSearch: (words: string) => void,\n) => {\n    if (view.composing) return false;\n    const { state } = view;\n    const $from = state.doc.resolve(from);\n    if ($from.parent.type.spec.code) return false;\n    const textBefore = (\n        $from.parent.textBetween(Math.max(0, $from.parentOffset - 10), $from.parentOffset, undefined, '\\ufffc') + text\n    ).toLowerCase();\n    if (full.test(textBefore)) {\n        return false;\n    }\n    const regex = part.exec(textBefore);\n    if (regex && regex[0] && textBefore.endsWith(regex[0])) {\n        const match = regex[0];\n        setRange(from - (match.length - text.length), to);\n        setSearch(match);\n        return true;\n    }\n    return false;\n};\n\nexport const renderDropdownList = (\n    list: Emoji[],\n    dropDown: HTMLElement,\n    $active: HTMLElement | null,\n    onConfirm: () => void,\n    setActive: (active: HTMLElement | null) => void,\n) => {\n    while (dropDown.firstChild) {\n        dropDown.firstChild.remove();\n    }\n    list.forEach(({ emoji, key }, i) => {\n        const container = document.createElement('div');\n        container.className = 'milkdown-emoji-filter_item';\n\n        const emojiSpan = document.createElement('span');\n        emojiSpan.innerHTML = parse(emoji);\n\n        emojiSpan.className = 'milkdown-emoji-filter_item-emoji';\n        const keySpan = document.createElement('span');\n        keySpan.textContent = ':' + key + ':';\n        keySpan.className = 'milkdown-emoji-filter_item-key';\n\n        container.appendChild(emojiSpan);\n        container.appendChild(keySpan);\n        dropDown.appendChild(container);\n\n        if (i === 0) {\n            container.classList.add('active');\n            setActive(container);\n        }\n\n        const onEnter = (e: MouseEvent) => {\n            if ($active) {\n                $active.classList.remove('active');\n            }\n            const { target } = e;\n            if (!(target instanceof HTMLElement)) return;\n            target.classList.add('active');\n            setActive(target);\n        };\n\n        const onLeave = (e: MouseEvent) => {\n            const { target } = e;\n            if (!(target instanceof HTMLElement)) return;\n            target.classList.remove('active');\n        };\n\n        const onClick = (e: MouseEvent) => {\n            e.preventDefault();\n            onConfirm();\n        };\n\n        container.addEventListener('mouseenter', onEnter);\n        container.addEventListener('mouseleave', onLeave);\n        container.addEventListener('mousedown', onClick);\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport {\n    Color,\n    Emotion,\n    ThemeBorder,\n    ThemeColor,\n    ThemeFont,\n    ThemeManager,\n    ThemeShadow,\n    ThemeSize,\n} from '@milkdown/core';\n\nexport const injectStyle = (themeManager: ThemeManager, { css, cx }: Emotion) => {\n    const border = themeManager.get(ThemeBorder, undefined);\n    const shadow = themeManager.get(ThemeShadow, undefined);\n    const radius = themeManager.get(ThemeSize, 'radius');\n    const typography = themeManager.get(ThemeFont, 'typography');\n    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n\n    const style = css`\n        position: absolute;\n        &.hide {\n            display: none;\n        }\n\n        border-radius: ${radius};\n        background: ${palette('surface')};\n\n        .milkdown-emoji-filter_item {\n            display: flex;\n            gap: 0.5em;\n            height: 2.57143em;\n            padding: 0 1em;\n            align-items: center;\n            justify-content: flex-start;\n            cursor: pointer;\n            line-height: 2;\n            font-family: ${typography};\n            font-size: 0.875em;\n            &.active {\n                background: ${palette('secondary', 0.12)};\n                color: ${palette('primary')};\n            }\n        }\n\n        .emoji {\n            height: 1em;\n            width: 1em;\n            margin: 0 0.05em 0 0.1em;\n            vertical-align: -0.1em;\n        }\n    `;\n    return cx(border, shadow, style);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { calculateNodePosition, Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\nimport { search } from 'node-emoji';\n\nimport { checkTrigger, renderDropdownList } from './helper';\nimport { injectStyle } from './style';\n\nexport const key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_FILTER');\n\nexport const filter = (utils: Utils, maxListSize: number) => {\n    let trigger = false;\n    let _from = 0;\n    let _search = '';\n    let $active: null | HTMLElement = null;\n\n    const off = () => {\n        trigger = false;\n        _from = 0;\n        _search = '';\n        $active = null;\n    };\n\n    return new Plugin({\n        key,\n        props: {\n            handleKeyDown(_, event) {\n                if (['Delete', 'Backspace'].includes(event.key)) {\n                    _search = _search.slice(0, -1);\n                    if (_search.length <= 1) {\n                        off();\n                    }\n                    return false;\n                }\n                if (!trigger) return false;\n                if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n                    return false;\n                }\n                return true;\n            },\n            handleTextInput(view, from, to, text) {\n                trigger = checkTrigger(\n                    view,\n                    from,\n                    to,\n                    text,\n                    (from) => {\n                        _from = from;\n                    },\n                    (search) => {\n                        _search = search;\n                    },\n                );\n                if (!trigger) {\n                    off();\n                }\n                return false;\n            },\n        },\n        view: (editorView) => {\n            const { parentNode } = editorView.dom;\n            if (!parentNode) {\n                throw new Error();\n            }\n\n            const dropDown = document.createElement('div');\n\n            dropDown.classList.add('milkdown-emoji-filter', 'hide');\n\n            utils.themeManager.onFlush(() => {\n                const className = dropDown.className\n                    .split(' ')\n                    .filter((x) => ['hide', 'milkdown-emoji-filter'].includes(x));\n                dropDown.className = className.join(' ');\n                const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));\n                if (style) {\n                    style.split(' ').forEach((x) => dropDown.classList.add(x));\n                }\n            });\n\n            const replace = () => {\n                if (!$active) return;\n\n                const { tr } = editorView.state;\n                const node = editorView.state.schema.node('emoji', { html: $active.firstElementChild?.innerHTML });\n\n                editorView.dispatch(tr.delete(_from, _from + _search.length).insert(_from, node));\n                off();\n                dropDown.classList.add('hide');\n            };\n\n            parentNode.appendChild(dropDown);\n            const onKeydown = (e: Event) => {\n                if (!trigger || !(e instanceof KeyboardEvent)) return;\n\n                const { key } = e;\n\n                if (key === 'Enter') {\n                    replace();\n                    return;\n                }\n\n                if (['ArrowDown', 'ArrowUp'].includes(key)) {\n                    const next =\n                        key === 'ArrowDown'\n                            ? $active?.nextElementSibling || dropDown.firstElementChild\n                            : $active?.previousElementSibling || dropDown.lastElementChild;\n                    if ($active) {\n                        $active.classList.remove('active');\n                    }\n                    if (!next) return;\n                    next.classList.add('active');\n                    $active = next as HTMLElement;\n\n                    return;\n                }\n            };\n            const onClick = (e: Event) => {\n                if (!trigger) return;\n\n                e.stopPropagation();\n                off();\n                dropDown.classList.add('hide');\n            };\n            parentNode.addEventListener('keydown', onKeydown);\n            parentNode.addEventListener('mousedown', onClick);\n\n            return {\n                update: (view) => {\n                    const { selection } = view.state;\n\n                    if (selection.from - selection.to !== 0 || !trigger) {\n                        off();\n                        dropDown.classList.add('hide');\n                        return null;\n                    }\n                    const result = search(_search).slice(0, maxListSize);\n                    const { node } = view.domAtPos(_from);\n                    if (result.length === 0 || !node) {\n                        dropDown.classList.add('hide');\n                        return null;\n                    }\n\n                    dropDown.classList.remove('hide');\n                    renderDropdownList(result, dropDown, $active, replace, (a) => {\n                        $active = a;\n                    });\n                    calculateNodePosition(view, dropDown, (selected, target, parent) => {\n                        const $editor = dropDown.parentElement;\n                        if (!$editor) {\n                            throw new Error();\n                        }\n                        const start = view.coordsAtPos(_from);\n                        let left = start.left - parent.left;\n                        let top = selected.bottom - parent.top + 14 + $editor.scrollTop;\n\n                        if (left < 0) {\n                            left = 0;\n                        }\n\n                        if (window.innerHeight - start.bottom < target.height) {\n                            top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;\n                        }\n                        return [top, left];\n                    });\n\n                    return null;\n                },\n\n                destroy: () => {\n                    parentNode.removeEventListener('keydown', onKeydown);\n                    parentNode.removeEventListener('mousedown', onClick);\n                    dropDown.remove();\n                },\n            };\n        },\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport emojiRegex from 'emoji-regex';\nimport { Literal, Node, Parent } from 'unist';\n\nimport { parse } from './parse';\n\nconst regex = emojiRegex();\n\nconst isParent = (node: Node): node is Parent => !!(node as Parent).children;\nconst isLiteral = (node: Node): node is Literal => !!(node as Literal).value;\n\nfunction flatMap(ast: Node, fn: (node: Node, index: number, parent: Node | null) => Node[]) {\n    return transform(ast, 0, null)[0];\n\n    function transform(node: Node, index: number, parent: Node | null) {\n        if (isParent(node)) {\n            const out = [];\n            for (let i = 0, n = node.children.length; i < n; i++) {\n                const nthChild = node.children[i];\n                if (nthChild) {\n                    const xs = transform(nthChild, i, node);\n                    if (xs) {\n                        for (let j = 0, m = xs.length; j < m; j++) {\n                            const item = xs[j];\n                            if (item) {\n                                out.push(item);\n                            }\n                        }\n                    }\n                }\n            }\n            node.children = out;\n        }\n\n        return fn(node, index, parent);\n    }\n}\n\nexport const twemojiPlugin = () => {\n    function transformer(tree: Node) {\n        flatMap(tree, (node) => {\n            if (!isLiteral(node)) {\n                return [node];\n            }\n            const value = node.value as string;\n            const output: Literal<string>[] = [];\n            let match;\n            let str = value;\n            while ((match = regex.exec(str))) {\n                const { index } = match;\n                const emoji = match[0];\n                if (emoji) {\n                    if (index > 0) {\n                        output.push({ ...node, value: str.slice(0, index) });\n                    }\n                    output.push({ ...node, value: parse(emoji), type: 'emoji' });\n                    str = str.slice(index + emoji.length);\n                }\n            }\n            if (str.length) {\n                output.push({ ...node, value: str });\n            }\n            return output;\n        });\n    }\n    return transformer;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { RemarkPlugin } from '@milkdown/core';\nimport { InputRule } from '@milkdown/prose';\nimport { createNode } from '@milkdown/utils';\nimport nodeEmoji from 'node-emoji';\nimport remarkEmoji from 'remark-emoji';\n\nimport { input } from './constant';\nimport { filter } from './filter';\nimport { parse } from './parse';\nimport { twemojiPlugin } from './remark-twemoji';\n\nexport type EmojiOptions = {\n    maxListSize: number;\n};\n\nexport const emojiNode = createNode<string, EmojiOptions>((utils, options) => {\n    const getStyle = () =>\n        utils.getStyle(\n            ({ css }) => css`\n                display: inline-flex;\n                justify-content: center;\n                align-items: center;\n\n                .emoji {\n                    height: 1em;\n                    width: 1em;\n                    margin: 0 0.05em 0 0.1em;\n                    vertical-align: -0.1em;\n                }\n            `,\n        );\n    return {\n        id: 'emoji',\n        schema: () => ({\n            group: 'inline',\n            inline: true,\n            selectable: false,\n            attrs: {\n                html: {\n                    default: '',\n                },\n            },\n            parseDOM: [\n                {\n                    tag: 'span[data-type=\"emoji\"]',\n                    getAttrs: (dom) => {\n                        if (!(dom instanceof HTMLElement)) {\n                            throw new Error();\n                        }\n                        return { html: dom.innerHTML };\n                    },\n                },\n            ],\n            toDOM: (node) => {\n                const span = document.createElement('span');\n                span.classList.add('emoji-wrapper');\n                span.dataset['type'] = 'emoji';\n                utils.themeManager.onFlush(() => {\n                    const style = getStyle();\n                    if (style) {\n                        span.classList.add(style);\n                    }\n                });\n                span.innerHTML = node.attrs['html'];\n                return { dom: span };\n            },\n            parseMarkdown: {\n                match: ({ type }) => type === 'emoji',\n                runner: (state, node, type) => {\n                    state.addNode(type, { html: node['value'] as string });\n                },\n            },\n            toMarkdown: {\n                match: (node) => node.type.name === 'emoji',\n                runner: (state, node) => {\n                    const span = document.createElement('span');\n                    span.innerHTML = node.attrs['html'];\n                    const img = span.querySelector('img');\n                    const title = img?.title;\n                    span.remove();\n                    state.addNode('text', undefined, title);\n                },\n            },\n        }),\n        inputRules: (nodeType) => [\n            new InputRule(input, (state, match, start, end) => {\n                const content = match[0];\n                if (!content) return null;\n                const got = nodeEmoji.get(content);\n                if (!got || content.includes(got)) return null;\n\n                const html = parse(got);\n\n                return state.tr\n                    .setMeta('emoji', true)\n                    .replaceRangeWith(start, end, nodeType.create({ html }))\n                    .scrollIntoView();\n            }),\n        ],\n        remarkPlugins: () => [remarkEmoji as RemarkPlugin, twemojiPlugin],\n        prosePlugins: () => [filter(utils, options?.maxListSize ?? 6)],\n    };\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList } from '@milkdown/utils';\n\nimport { emojiNode } from './node';\nexport * from './node';\n\nexport const emoji = AtomList.create([emojiNode()]);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;MACa,OAAO;MACP,OAAO;MACP,QAAQ;ACArB,MAAM,UAAU,CAAC,YAAoB,OAAO;MAE/B,QAAQ,CAAC,WAClB,QAAQ,MAAM,QAAO,EAAE,YAAY;MCE1B,eAAe,CACxB,MACA,MACA,IACA,MACA,UACA,cACC;MACG,KAAK;WAAkB;QACrB,EAAE,UAAU;QACZ,QAAQ,MAAM,IAAI,QAAQ;MAC5B,MAAM,OAAO,KAAK,KAAK;WAAa;QAClC,oBACI,OAAO,YAAY,KAAK,IAAI,GAAG,MAAM,eAAe,KAAK,MAAM,cAAc,QAAW,YAAY,MAC5G;MACE,KAAK,KAAK,aAAa;WAChB;AAAA;QAEL,SAAQ,KAAK,KAAK;MACpB,UAAS,OAAM,MAAM,WAAW,SAAS,OAAM,KAAK;UAC9C,QAAQ,OAAM;aACX,cAAc,SAAS,KAAK,SAAS;cACpC;WACH;AAAA;SAEJ;AAAA;MAGE,qBAAqB,CAC9B,MACA,UACA,SACA,WACA,cACC;SACM,SAAS,YAAY;aACf,WAAW;AAAA;OAEnB,QAAQ,CAAC,EAAE,eAAO,aAAO,MAAM;UAC1B,YAAY,SAAS,cAAc;cAC/B,YAAY;UAEhB,YAAY,SAAS,cAAc;cAC/B,YAAY,MAAM;cAElB,YAAY;UAChB,UAAU,SAAS,cAAc;YAC/B,cAAc,MAAM,OAAM;YAC1B,YAAY;cAEV,YAAY;cACZ,YAAY;aACb,YAAY;QAEjB,MAAM,GAAG;gBACC,UAAU,IAAI;gBACd;AAAA;UAGR,UAAU,CAAC,MAAkB;UAC3B,SAAS;gBACD,UAAU,OAAO;AAAA;YAEvB,EAAE,WAAW;UACf,oBAAoB;;aACjB,UAAU,IAAI;gBACX;AAAA;UAGR,UAAU,CAAC,MAAkB;YACzB,EAAE,WAAW;UACf,oBAAoB;;aACjB,UAAU,OAAO;AAAA;UAGtB,UAAU,CAAC,MAAkB;QAC7B;;;cAII,iBAAiB,cAAc;cAC/B,iBAAiB,cAAc;cAC/B,iBAAiB,aAAa;AAAA;AAAA;MC9EnC,cAAc,CAAC,cAA4B,EAAE,KAAK,SAAkB;QACvE,SAAS,aAAa,IAAI,aAAa;QACvC,SAAS,aAAa,IAAI,aAAa;QACvC,SAAS,aAAa,IAAI,WAAW;QACrC,aAAa,aAAa,IAAI,WAAW;QACzC,UAAU,CAAC,OAAc,UAAU,MAAM,aAAa,IAAI,YAAY,CAAC,OAAO;QAE9E,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMO;AAAA,sBACH,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAWH;AAAA;AAAA;AAAA,8BAGG,QAAQ,aAAa;AAAA,yBAC1B,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;SAWtB,GAAG,QAAQ,QAAQ;AAAA;MC3CjB,MAAM,IAAI,UAAU;MAEpB,SAAS,CAAC,OAAc,gBAAwB;MACrD,UAAU;MACV,QAAQ;MACR,UAAU;MACV,UAA8B;QAE5B,MAAM,MAAM;cACJ;YACF;cACE;cACA;AAAA;SAGP,IAAI,OAAO;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,cAAc,GAAG,OAAO;YAChB,CAAC,UAAU,aAAa,SAAS,MAAM,MAAM;oBACnC,QAAQ,MAAM,GAAG;cACvB,QAAQ,UAAU,GAAG;;;iBAGlB;AAAA;YAEP,CAAC;iBAAgB;YACjB,CAAC,CAAC,WAAW,aAAa,SAAS,SAAS,MAAM,MAAM;iBACjD;AAAA;eAEJ;AAAA;AAAA,MAEX,gBAAgB,MAAM,MAAM,IAAI,MAAM;kBACxB,aACN,MACA,MACA,IACA,MACA,CAAC,UAAS;kBACE;AAAA,WAEZ,CAAC,YAAW;oBACE;AAAA;YAGd,CAAC,SAAS;;;eAGP;AAAA;AAAA;AAAA,IAGf,MAAM,CAAC,eAAe;YACZ,EAAE,eAAe,WAAW;UAC9B,CAAC,YAAY;cACP,IAAI;AAAA;YAGR,WAAW,SAAS,cAAc;eAE/B,UAAU,IAAI,yBAAyB;YAE1C,aAAa,QAAQ,MAAM;cACvB,YAAY,SAAS,UACtB,MAAM,KACN,OAAO,CAAC,MAAM,CAAC,QAAQ,yBAAyB,SAAS;iBACrD,YAAY,UAAU,KAAK;cAC9B,QAAQ,MAAM,SAAS,CAAC,YAAY,YAAY,MAAM,cAAc;YACtE,OAAO;gBACD,MAAM,KAAK,QAAQ,CAAC,MAAM,SAAS,UAAU,IAAI;AAAA;AAAA;YAIzD,UAAU,MAAM;;YACd,CAAC;;cAEC,EAAE,OAAO,WAAW;cACpB,OAAO,WAAW,MAAM,OAAO,KAAK,SAAS,EAAE,MAAM,cAAQ,sBAAR,mBAA2B;mBAE3E,SAAS,GAAG,OAAO,OAAO,QAAQ,QAAQ,QAAQ,OAAO,OAAO;;iBAElE,UAAU,IAAI;AAAA;iBAGhB,YAAY;YACjB,YAAY,CAAC,MAAa;YACxB,CAAC,WAAW,eAAe;;cAEzB,EAAE,cAAQ;YAEZ,SAAQ,SAAS;;;;YAKjB,CAAC,aAAa,WAAW,SAAS,OAAM;gBAClC,OACF,SAAQ,cACF,oCAAS,uBAAsB,SAAS,oBACxC,oCAAS,2BAA0B,SAAS;cAClD,SAAS;oBACD,UAAU,OAAO;AAAA;cAEzB,CAAC;;eACA,UAAU,IAAI;oBACT;;;;YAKZ,UAAU,CAAC,MAAa;YACtB,CAAC;;UAEH;;iBAEO,UAAU,IAAI;AAAA;iBAEhB,iBAAiB,WAAW;iBAC5B,iBAAiB,aAAa;aAElC;AAAA,QACH,QAAQ,CAAC,SAAS;gBACR,EAAE,cAAc,KAAK;cAEvB,UAAU,OAAO,UAAU,OAAO,KAAK,CAAC,SAAS;;qBAExC,UAAU,IAAI;mBAChB;AAAA;gBAEL,SAAS,OAAO,SAAS,MAAM,GAAG;gBAClC,EAAE,SAAS,KAAK,SAAS;cAC3B,OAAO,WAAW,KAAK,CAAC,MAAM;qBACrB,UAAU,IAAI;mBAChB;AAAA;mBAGF,UAAU,OAAO;6BACP,QAAQ,UAAU,SAAS,SAAS,CAAC,MAAM;sBAChD;AAAA;gCAEQ,MAAM,UAAU,CAAC,UAAU,QAAQ,WAAW;kBAC1D,UAAU,SAAS;gBACrB,CAAC,SAAS;oBACJ,IAAI;AAAA;kBAER,QAAQ,KAAK,YAAY;gBAC3B,OAAO,MAAM,OAAO,OAAO;gBAC3B,MAAM,SAAS,SAAS,OAAO,MAAM,KAAK,QAAQ;gBAElD,OAAO,GAAG;qBACH;AAAA;gBAGP,OAAO,cAAc,MAAM,SAAS,OAAO,QAAQ;oBAC7C,SAAS,MAAM,OAAO,MAAM,OAAO,SAAS,KAAK,QAAQ;AAAA;mBAE5D,CAAC,KAAK;AAAA;iBAGV;AAAA;AAAA,QAGX,SAAS,MAAM;qBACA,oBAAoB,WAAW;qBAC/B,oBAAoB,aAAa;mBACnC;AAAA;AAAA;AAAA;AAAA;AAAA;ACvK7B,MAAM,QAAQ;AAEd,MAAM,WAAW,CAAC,SAA+B,CAAC,CAAE,KAAgB;AACpE,MAAM,YAAY,CAAC,SAAgC,CAAC,CAAE,KAAiB;AAEvE,iBAAiB,KAAW,IAAgE;SACjF,UAAU,KAAK,GAAG,MAAM;qBAEZ,MAAY,OAAe,QAAqB;QAC3D,SAAS,OAAO;YACV,MAAM;eACH,IAAI,GAAG,IAAI,KAAK,SAAS,QAAQ,IAAI,GAAG,KAAK;cAC5C,WAAW,KAAK,SAAS;YAC3B,UAAU;gBACJ,KAAK,UAAU,UAAU,GAAG;cAC9B,IAAI;qBACK,IAAI,GAAG,IAAI,GAAG,QAAQ,IAAI,GAAG,KAAK;oBACjC,OAAO,GAAG;kBACZ,MAAM;oBACF,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;WAMxB,WAAW;AAAA;WAGb,GAAG,MAAM,OAAO;AAAA;AAAA;MAIlB,gBAAgB,MAAM;uBACV,MAAY;YACrB,MAAM,CAAC,SAAS;UAChB,CAAC,UAAU,OAAO;eACX,CAAC;AAAA;YAEN,QAAQ,KAAK;YACb,SAA4B;UAC9B;UACA,MAAM;aACF,QAAQ,MAAM,KAAK,MAAO;cACxB,EAAE,UAAU;cACZ,SAAQ,MAAM;YAChB,QAAO;cACH,QAAQ,GAAG;mBACJ,KAAK,iCAAK,OAAL,EAAW,OAAO,IAAI,MAAM,GAAG;AAAA;iBAExC,KAAK,iCAAK,OAAL,EAAW,OAAO,MAAM,SAAQ,MAAM;gBAC5C,IAAI,MAAM,QAAQ,OAAM;AAAA;AAAA;UAGlC,IAAI,QAAQ;eACL,KAAK,iCAAK,OAAL,EAAW,OAAO;AAAA;aAE3B;AAAA;AAAA;SAGR;AAAA;MCjDE,YAAY,WAAiC,CAAC,OAAO,YAAY;QACpE,WAAW,MACb,MAAM,SACF,CAAC,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;SAad;AAAA,IACH,IAAI;AAAA,IACJ,QAAQ;MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO;AAAA,QACH,MAAM;AAAA,UACF,SAAS;AAAA;AAAA;AAAA,MAGjB,UAAU;AAAA,QACN;AAAA,UACI,KAAK;AAAA,UACL,UAAU,CAAC,QAAQ;gBACX,iBAAiB,cAAc;oBACzB,IAAI;AAAA;mBAEP,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,MAI/B,OAAO,CAAC,SAAS;cACP,OAAO,SAAS,cAAc;aAC/B,UAAU,IAAI;aACd,QAAQ,UAAU;cACjB,aAAa,QAAQ,MAAM;gBACvB,QAAQ;cACV,OAAO;iBACF,UAAU,IAAI;AAAA;AAAA;aAGtB,YAAY,KAAK,MAAM;eACrB,EAAE,KAAK;AAAA;AAAA,MAElB,eAAe;AAAA,QACX,OAAO,CAAC,EAAE,WAAW,SAAS;AAAA,QAC9B,QAAQ,CAAC,OAAO,MAAM,SAAS;gBACrB,QAAQ,MAAM,EAAE,MAAM,KAAK;AAAA;AAAA;AAAA,MAGzC,YAAY;AAAA,QACR,OAAO,CAAC,SAAS,KAAK,KAAK,SAAS;AAAA,QACpC,QAAQ,CAAC,OAAO,SAAS;gBACf,OAAO,SAAS,cAAc;eAC/B,YAAY,KAAK,MAAM;gBACtB,MAAM,KAAK,cAAc;gBACzB,QAAQ,2BAAK;eACd;gBACC,QAAQ,QAAQ,QAAW;AAAA;AAAA;AAAA;AAAA,IAI7C,YAAY,CAAC,aAAa;AAAA,MACtB,IAAI,UAAU,OAAO,CAAC,OAAO,OAAO,OAAO,QAAQ;cACzC,UAAU,MAAM;YAClB,CAAC;iBAAgB;cACf,MAAM,UAAU,IAAI;YACtB,CAAC,OAAO,QAAQ,SAAS;iBAAa;cAEpC,OAAO,MAAM;eAEZ,MAAM,GACR,QAAQ,SAAS,MACjB,iBAAiB,OAAO,KAAK,SAAS,OAAO,EAAE,SAC/C;AAAA;AAAA;AAAA,IAGb,eAAe,MAAM,CAAC,aAA6B;AAAA,IACnD,cAAc;;AAAM,cAAC,OAAO,OAAO,yCAAS,gBAAT,YAAwB;AAAA;AAAA;AAAA;MC/FtD,QAAQ,SAAS,OAAO,CAAC;;"}

package/lib/node.d.ts

@@ -0,0 +1,9 @@
+export declare type EmojiOptions = {
+    maxListSize: number;
+};
+export declare const emojiNode: import("@milkdown/utils/lib/types").WithExtend<string, EmojiOptions, 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/node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../src/node.ts"],"names":[],"mappings":"AAYA,oBAAY,YAAY,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;EAuFpB,CAAC"}

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.5.0",
+  "version": "6.0.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -15,30 +15,52 @@
     "milkdown plugin"
   ],
   "devDependencies": {
-    "@milkdown/core": "5.5.0",
-    "@milkdown/prose": "5.5.0"
+    "@milkdown/core": "6.0.0",
+    "@milkdown/prose": "6.0.0"
   },
   "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.5.0",
+    "@milkdown/utils": "6.0.0",
     "@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

@@ -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

@@ -9,7 +9,7 @@ import { injectStyle } from './style';
 
 export const key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_FILTER');
 
-export const filter = (utils: Utils) => {
+export const filter = (utils: Utils, maxListSize: number) => {
     let trigger = false;
     let _from = 0;
     let _search = '';
@@ -65,14 +65,20 @@ 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));
-            }
 
             dropDown.classList.add('milkdown-emoji-filter', 'hide');
 
+            utils.themeManager.onFlush(() => {
+                const className = dropDown.className
+                    .split(' ')
+                    .filter((x) => ['hide', 'milkdown-emoji-filter'].includes(x));
+                dropDown.className = className.join(' ');
+                const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));
+                if (style) {
+                    style.split(' ').forEach((x) => dropDown.classList.add(x));
+                }
+            });
+
             const replace = () => {
                 if (!$active) return;
 
@@ -85,7 +91,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;
@@ -109,14 +115,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) => {
@@ -127,7 +135,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');
@@ -159,6 +167,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

@@ -2,7 +2,6 @@
 import { AtomList } from '@milkdown/utils';
 
 import { emojiNode } from './node';
+export * from './node';
 
 export const emoji = AtomList.create([emojiNode()]);
-
-export { emojiNode } 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 emojiNode = 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,11 +54,14 @@ export const emojiNode = createNode((utils) => {
             ],
             toDOM: (node) => {
                 const span = document.createElement('span');
-                span.dataset['type'] = 'emoji';
-                if (style) {
-                    span.classList.add(style);
-                }
                 span.classList.add('emoji-wrapper');
+                span.dataset['type'] = 'emoji';
+                utils.themeManager.onFlush(() => {
+                    const style = getStyle();
+                    if (style) {
+                        span.classList.add(style);
+                    }
+                });
                 span.innerHTML = node.attrs['html'];
                 return { dom: span };
             },
@@ -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/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.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyB,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAMxC,eAAO,MAAM,GAAG,qBAAgD,CAAC;AAEjE,eAAO,MAAM,MAAM,UAAW,KAAK,qBAyJlC,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,5 +0,0 @@
-import { Plugin, PluginKey } from '@milkdown/prose';
-import { Utils } from '@milkdown/utils';
-export declare const key: PluginKey<any, any>;
-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,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAKxC,eAAO,MAAM,GAAG,qBAAgD,CAAC;AAuBjE,eAAO,MAAM,MAAM,UAAW,KAAK,qBA+FlC,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;AAoC9C,eAAO,MAAM,aAAa,eACK,IAAI,SA2BlC,CAAC"}

package/src/picker.ts

@@ -1,127 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { EmojiButton } from '@joeattardi/emoji-button';
-import { Decoration, DecorationSet, EditorView, Plugin, PluginKey } from '@milkdown/prose';
-import { Utils } from '@milkdown/utils';
-
-import { parse } from './parse';
-
-const keyword = ':emoji:';
-export const key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_PICKER');
-
-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({
-        key,
-        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;
-};