@milkdown/plugin-emoji 5.4.0 → 6.0.0-next.0

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;AACtC,eAAO,MAAM,OAAO,YAAY,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/filter/index.d.ts

@@ -0,0 +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>;
+//# 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,qBAmKlC,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 declare const emoji: AtomList<import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, import("@milkdown/utils").UnknownRecord>> & import("@milkdown/core").MilkdownPlugin>;
+export { emojiNode } from './node';
+//# 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;AAI3C,eAAO,MAAM,KAAK,kMAAiC,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/index.es.js

@@ -4,7 +4,7 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
@@ -18,10 +18,11 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { createNode, AtomList } from "@milkdown/utils";
-import { Plugin, calculateNodePosition, DecorationSet, Decoration, InputRule } from "@milkdown/prose";
+import { PluginKey, Plugin, calculateNodePosition, DecorationSet, Decoration, InputRule } from "@milkdown/prose";
 import nodeEmoji, { search } from "node-emoji";
 import remarkEmoji from "remark-emoji";
 import twemoji from "twemoji";
+import { ThemeBorder, ThemeShadow, ThemeSize, ThemeFont, ThemeColor } from "@milkdown/core";
 import { EmojiButton } from "@joeattardi/emoji-button";
 import emojiRegex from "emoji-regex";
 const part = /:\+1|:-1|:[\w-]+/;
@@ -40,7 +41,7 @@ const checkTrigger$1 = (view, from, to, text, setRange, setSearch) => {
     return false;
   }
   const regex2 = part.exec(textBefore);
-  if (regex2 && textBefore.endsWith(regex2[0])) {
+  if (regex2 && regex2[0] && textBefore.endsWith(regex2[0])) {
     const match = regex2[0];
     setRange(from - (match.length - text.length), to);
     setSearch(match);
@@ -49,15 +50,17 @@ const checkTrigger$1 = (view, from, to, text, setRange, setSearch) => {
   return false;
 };
 const renderDropdownList = (list, dropDown, $active, onConfirm, setActive) => {
-  dropDown.innerHTML = "";
-  list.forEach(({ emoji: emoji2, key }, i) => {
+  while (dropDown.firstChild) {
+    dropDown.firstChild.remove();
+  }
+  list.forEach(({ emoji: emoji2, key: key2 }, i) => {
     const container = document.createElement("div");
     container.className = "milkdown-emoji-filter_item";
     const emojiSpan = document.createElement("span");
     emojiSpan.innerHTML = parse(emoji2);
     emojiSpan.className = "milkdown-emoji-filter_item-emoji";
     const keySpan = document.createElement("span");
-    keySpan.textContent = ":" + key + ":";
+    keySpan.textContent = ":" + key2 + ":";
     keySpan.className = "milkdown-emoji-filter_item-key";
     container.appendChild(emojiSpan);
     container.appendChild(keySpan);
@@ -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,6 +135,7 @@ 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) => {
   let trigger = false;
   let _from = 0;
@@ -139,6 +148,7 @@ const filter = (utils) => {
     $active = null;
   };
   return new Plugin({
+    key: key$1,
     props: {
       handleKeyDown(_, event) {
         if (["Delete", "Backspace"].includes(event.key)) {
@@ -173,10 +183,12 @@ 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));
-      }
+      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");
       const replace = () => {
         var _a;
@@ -189,16 +201,16 @@ 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 } = e;
-        if (key === "Enter") {
+        const { key: key2 } = e;
+        if (key2 === "Enter") {
           replace();
           return;
         }
-        if (["ArrowDown", "ArrowUp"].includes(key)) {
-          const next = key === "ArrowDown" ? ($active == null ? void 0 : $active.nextElementSibling) || dropDown.firstElementChild : ($active == null ? void 0 : $active.previousElementSibling) || dropDown.lastElementChild;
+        if (["ArrowDown", "ArrowUp"].includes(key2)) {
+          const next = key2 === "ArrowDown" ? ($active == null ? void 0 : $active.nextElementSibling) || dropDown.firstElementChild : ($active == null ? void 0 : $active.previousElementSibling) || dropDown.lastElementChild;
           if ($active) {
             $active.classList.remove("active");
           }
@@ -208,14 +220,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;
@@ -251,12 +265,18 @@ const filter = (utils) => {
             return [top, left];
           });
           return null;
+        },
+        destroy: () => {
+          parentNode.removeEventListener("keydown", onKeydown);
+          parentNode.removeEventListener("mousedown", onClick);
+          dropDown.remove();
         }
       };
     }
   });
 };
 const keyword = ":emoji:";
+const key = new PluginKey("MILKDOWN_PLUGIN_EMOJI_PICKER");
 const checkTrigger = (view, from, to, text, setRange) => {
   if (view.composing)
     return false;
@@ -282,6 +302,7 @@ const picker = (utils) => {
     _to = 0;
   };
   const plugin = new Plugin({
+    key,
     props: {
       handleKeyDown() {
         off();
@@ -312,7 +333,9 @@ const picker = (utils) => {
       if (!parentNode) {
         throw new Error();
       }
-      utils.getStyle(({ palette, font }, { injectGlobal }) => {
+      utils.getStyle((themeManager, { injectGlobal }) => {
+        const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+        const typography = themeManager.get(ThemeFont, "typography");
         const css = injectGlobal;
         css`
                     .emoji-picker {
@@ -324,8 +347,8 @@ const picker = (utils) => {
                         --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;
+                        --font: ${typography} !important;
+                        --font-size: 1em !important;
                     }
                 `;
       });
@@ -371,10 +394,16 @@ function flatMap(ast, fn) {
     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);
+              }
+            }
           }
         }
       }
@@ -396,11 +425,13 @@ const twemojiPlugin = () => {
       while (match = regex.exec(str)) {
         const { index } = match;
         const emoji2 = match[0];
-        if (index > 0) {
-          output.push(__spreadProps(__spreadValues({}, node), { value: str.slice(0, index) }));
+        if (emoji2) {
+          if (index > 0) {
+            output.push(__spreadProps(__spreadValues({}, node), { value: str.slice(0, index) }));
+          }
+          output.push(__spreadProps(__spreadValues({}, node), { value: parse(emoji2), type: "emoji" }));
+          str = str.slice(index + emoji2.length);
         }
-        output.push(__spreadProps(__spreadValues({}, node), { value: parse(emoji2), type: "emoji" }));
-        str = str.slice(index + emoji2.length);
       }
       if (str.length) {
         output.push(__spreadProps(__spreadValues({}, node), { value: str }));
@@ -411,18 +442,18 @@ const twemojiPlugin = () => {
   return transformer;
 };
 const emojiNode = createNode((utils) => {
-  const style = utils.getStyle((_, { css }) => css`
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
+  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: () => ({
@@ -447,25 +478,28 @@ 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 });
+          state.addNode(type, { html: node["value"] });
         }
       },
       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 == null ? void 0 : img.title;
           span.remove();

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 && 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 } 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 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        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 } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { parse } from './parse';\n\nconst keyword = ':emoji:';\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        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 xs = transform(node.children[i], i, node);\n                if (xs) {\n                    for (let j = 0, m = xs.length; j < m; j++) {\n                        out.push(xs[j]);\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 (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            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"],"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/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    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) => {\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            utils.themeManager.onFlush(() => {\n                const style = utils.getStyle(injectStyle);\n                if (style) {\n                    style.split(' ').forEach((x) => dropDown.classList.add(x));\n                }\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            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, 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                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 { EmojiButton } from '@joeattardi/emoji-button';\nimport { Color, ThemeColor, ThemeFont } from '@milkdown/core';\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((themeManager, { injectGlobal }) => {\n                const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n                const typography = themeManager.get(ThemeFont, 'typography');\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: ${typography} !important;\n                        --font-size: 1em !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 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.dataset['type'] = 'emoji';\n                utils.themeManager.onFlush(() => {\n                    const style = getStyle();\n                    if (style) {\n                        span.classList.add(style);\n                    }\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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"}

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

@@ -1,4 +1,4 @@
-export declare const emojiNode: import("@milkdown/utils/lib/src/types").WithExtend<string, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const emojiNode: import("@milkdown/utils/lib/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;

package/lib/node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../src/node.ts"],"names":[],"mappings":"AAaA,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":"AAGA,eAAO,MAAM,KAAK,UAAW,MAAM,WAAsE,CAAC"}

package/lib/picker.d.ts

@@ -0,0 +1,5 @@
+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/picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.d.ts","sourceRoot":"","sources":["../src/picker.ts"],"names":[],"mappings":"AAGA,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,qBAiGlC,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.0",
+  "version": "6.0.0-next.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -15,30 +15,54 @@
     "milkdown plugin"
   ],
   "devDependencies": {
-    "@milkdown/core": "5.4.0",
-    "@milkdown/prose": "5.4.0"
+    "@milkdown/core": "6.0.0-next.0",
+    "@milkdown/prose": "6.0.0-next.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.4.0",
+    "@joeattardi/emoji-button": "^4.6.4",
+    "@milkdown/utils": "6.0.0-next.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": "~12.1.2",
     "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/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,12 +1,14 @@
 /* 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 key = new PluginKey('MILKDOWN_PLUGIN_EMOJI_FILTER');
+
 export const filter = (utils: Utils) => {
     let trigger = false;
     let _from = 0;
@@ -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) => {
@@ -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/node.ts

@@ -12,20 +12,21 @@ 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;
+    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: () => ({
@@ -50,25 +51,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();

package/src/picker.ts

@@ -1,11 +1,13 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { EmojiButton } from '@joeattardi/emoji-button';
-import { Decoration, DecorationSet, EditorView, Plugin } from '@milkdown/prose';
+import { Color, ThemeColor, ThemeFont } from '@milkdown/core';
+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,
@@ -40,6 +42,7 @@ export const picker = (utils: Utils) => {
     };
 
     const plugin = new Plugin({
+        key,
         props: {
             handleKeyDown() {
                 off();
@@ -71,7 +74,9 @@ export const picker = (utils: Utils) => {
             if (!parentNode) {
                 throw new Error();
             }
-            utils.getStyle(({ palette, font }, { injectGlobal }) => {
+            utils.getStyle((themeManager, { injectGlobal }) => {
+                const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+                const typography = themeManager.get(ThemeFont, 'typography');
                 const css = injectGlobal;
                 css`
                     .emoji-picker {
@@ -83,8 +88,8 @@ export const picker = (utils: Utils) => {
                         --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;
+                        --font: ${typography} !important;
+                        --font-size: 1em !important;
                     }
                 `;
             });

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.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"}