npm - @milkdown/plugin-emoji - Versions diffs - 6.5.1 → 6.5.2 - Mend

@milkdown/plugin-emoji 6.5.1 → 6.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/filter/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAM7C,eAAO,MAAM,GAAG,gBAAyC,CAAC;AAE1D,eAAO,MAAM,MAAM,UAAW,UAAU,eAAe,MAAM,mBAAmB,cAAc,~~gBA8K7F~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/filter/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAM7C,eAAO,MAAM,GAAG,gBAAyC,CAAC;AAE1D,eAAO,MAAM,MAAM,UAAW,UAAU,eAAe,MAAM,mBAAmB,cAAc,gBA6M7F,CAAC"}

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/filter/style.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,OAAO,EAIP,YAAY,EAIf,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,iBAAkB,YAAY,eAAe,OAAO,WA6C3E,CAAC"}

package/lib/index.es.js CHANGED Viewed

@@ -1,60 +1,63 @@
-import { createNode as S, AtomList as b } from "@milkdown/utils";
-import { missingRootElement as T, expectDomTypeError as D } from "@milkdown/exception";
-import { InputRule as P } from "@milkdown/prose/inputrules";
-import M from "node-emoji";
-import A from "remark-emoji";
-import { calculateNodePosition as H } from "@milkdown/prose";
-import { PluginKey as O, Plugin as _ } from "@milkdown/prose/state";
-import F from "twemoji";
-import { ThemeBorder as I, ThemeShadow as R, ThemeSize as K, ThemeFont as B, ThemeColor as $ } from "@milkdown/core";
-import z from "emoji-regex";
-const W = /:\+1|:-1|:[\w-]+/, U = /:\+1:|:-1:|:[\w-]+:/, q = /(:([^:\s]+):)$/, J = (i) => ({ title: i }), j = (i, a) => F.parse(i, { attributes: J, ...a }), G = (i, a, u, e, l, o) => {
-  if (i.composing)
+import { createNode as A, AtomList as H } from "@milkdown/utils";
+import { missingRootElement as N, expectDomTypeError as O } from "@milkdown/exception";
+import { InputRule as F } from "@milkdown/prose/inputrules";
+import D from "node-emoji";
+import I from "remark-emoji";
+import { calculateNodePosition as R } from "@milkdown/prose";
+import { PluginKey as B, Plugin as K } from "@milkdown/prose/state";
+import W from "twemoji";
+import { ThemeBorder as $, ThemeShadow as z, ThemeScrollbar as U, ThemeSize as q, ThemeFont as J, ThemeColor as G } from "@milkdown/core";
+import Q from "emoji-regex";
+const X = /:\+1|:-1|:[\w-]+/, Y = /:\+1:|:-1:|:[\w-]+:/, Z = /(:([^:\s]+):)$/, V = (r) => ({ title: r }), b = (r, a) => W.parse(r, { attributes: V, ...a }), ee = (r, a, f, e, i, s) => {
+  if (r.composing)
     return !1;
-  const { state: n } = i, s = n.doc.resolve(a);
-  if (s.parent.type.spec.code)
+  const { state: o } = r, l = o.doc.resolve(a);
+  if (l.parent.type.spec.code)
     return !1;
-  const c = (s.parent.textBetween(Math.max(0, s.parentOffset - 10), s.parentOffset, void 0, "\uFFFC") + e).toLowerCase();
-  if (U.test(c))
+  const c = (l.parent.textBetween(Math.max(0, l.parentOffset - 10), l.parentOffset, void 0, "\uFFFC") + e).toLowerCase();
+  if (Y.test(c))
     return !1;
-  const t = W.exec(c);
+  const t = X.exec(c);
   if (t && t[0] && c.endsWith(t[0])) {
-    const r = t[0];
-    return l(a - (r.length - e.length), u), o(r), !0;
+    const n = t[0];
+    return i(a - (n.length - e.length), f), s(n), !0;
   }
   return !1;
-}, Q = (i, a, u, e, l, o) => {
+}, te = (r, a, f, e, i, s) => {
   for (; a.firstChild; )
     a.firstChild.remove();
-  i.forEach(({ emoji: n, key: s }, c) => {
+  r.forEach(({ emoji: o, key: l }, c) => {
     const t = document.createElement("div");
     t.className = "milkdown-emoji-filter_item";
-    const r = document.createElement("span");
-    r.innerHTML = j(n, o), r.className = "milkdown-emoji-filter_item-emoji";
+    const n = document.createElement("span");
+    n.innerHTML = b(o, s), n.className = "milkdown-emoji-filter_item-emoji";
     const h = document.createElement("span");
-    h.textContent = ":" + s + ":", h.className = "milkdown-emoji-filter_item-key", t.appendChild(r), t.appendChild(h), a.appendChild(t), c === 0 && (t.classList.add("active"), l(t));
-    const p = (d) => {
-      u && u.classList.remove("active");
+    h.textContent = ":" + l + ":", h.className = "milkdown-emoji-filter_item-key", t.appendChild(n), t.appendChild(h), a.appendChild(t), c === 0 && (t.classList.add("active"), i(t));
+    const g = (d) => {
+      f && f.classList.remove("active");
       const { target: m } = d;
-      m instanceof HTMLElement && (m.classList.add("active"), l(m));
-    }, g = (d) => {
+      m instanceof HTMLElement && (m.classList.add("active"), i(m));
+    }, w = (d) => {
       const { target: m } = d;
       m instanceof HTMLElement && m.classList.remove("active");
-    }, f = (d) => {
+    }, u = (d) => {
       d.preventDefault(), e();
     };
-    t.addEventListener("mouseenter", p), t.addEventListener("mouseleave", g), t.addEventListener("mousedown", f);
+    t.addEventListener("mouseenter", g), t.addEventListener("mouseleave", w), t.addEventListener("mousedown", u);
   });
-}, X = (i, { css: a, cx: u }) => {
-  const e = i.get(I, void 0), l = i.get(R, void 0), o = i.get(K, "radius"), n = i.get(B, "typography"), s = (t, r = 1) => i.get($, [t, r]), c = a`
+}, ne = (r, { css: a, cx: f }) => {
+  const e = r.get($, void 0), i = r.get(z, void 0), s = r.get(U, void 0), o = r.get(q, "radius"), l = r.get(J, "typography"), c = (n, h = 1) => r.get(G, [n, h]), t = a`
+        min-height: 36px;
+        max-height: 320px;
+        overflow-y: auto;
+        border-radius: ${o};
         position: absolute;
+        background: ${c("surface")};
         &.hide {
             display: none;
         }
-        border-radius: ${o};
-        background: ${s("surface")};
         .milkdown-emoji-filter_item {
             display: flex;
             gap: 8px;
@@ -64,11 +67,11 @@ const W = /:\+1|:-1|:[\w-]+/, U = /:\+1:|:-1:|:[\w-]+:/, q = /(:([^:\s]+):)$/, J
             justify-content: flex-start;
             cursor: pointer;
             line-height: 2;
-            font-family: ${n};
+            font-family: ${l};
             font-size: 14px;
             &.active {
-                background: ${s("secondary", 0.12)};
-                color: ${s("primary")};
+                background: ${c("secondary", 0.12)};
+                color: ${c("primary")};
             }
         }
@@ -79,132 +82,155 @@ const W = /:\+1|:-1|:[\w-]+/, U = /:\+1:|:-1:|:[\w-]+:/, q = /(:([^:\s]+):)$/, J
             vertical-align: -1.5px;
         }
     `;
-  return u(e, l, c);
-}, Y = new O("MILKDOWN_EMOJI_FILTER"), Z = (i, a, u) => {
-  let e = !1, l = 0, o = "", n = null;
-  const s = () => {
-    e = !1, l = 0, o = "", n = null;
+  return f(e, i, s, t);
+}, oe = new B("MILKDOWN_EMOJI_FILTER"), re = (r, a, f) => {
+  let e = !1, i = 0, s = "", o = null;
+  const l = () => {
+    e = !1, i = 0, s = "", o = null;
   };
-  return new _({
-    key: Y,
+  return new K({
+    key: oe,
     props: {
       handleKeyDown(c, t) {
-        return ["Delete", "Backspace"].includes(t.key) ? (o = o.slice(0, -1), o.length <= 1 && s(), !1) : !(!e || !["ArrowUp", "ArrowDown", "Enter"].includes(t.key));
+        return ["Delete", "Backspace"].includes(t.key) ? (s = s.slice(0, -1), s.length <= 1 && l(), !1) : !(!e || !["ArrowUp", "ArrowDown", "Enter"].includes(t.key));
       },
-      handleTextInput(c, t, r, h) {
-        return e = G(c, t, r, h, (p) => {
-          l = p;
-        }, (p) => {
-          o = p;
-        }), e || s(), !1;
+      handleTextInput(c, t, n, h) {
+        return e = ee(
+          c,
+          t,
+          n,
+          h,
+          (g) => {
+            i = g;
+          },
+          (g) => {
+            s = g;
+          }
+        ), e || l(), !1;
       }
     },
     view: (c) => {
       const { parentNode: t } = c.dom;
       if (!t)
-        throw T();
-      const r = document.createElement("div");
-      r.classList.add("milkdown-emoji-filter", "hide"), i.themeManager.onFlush(() => {
-        const f = r.className.split(" ").filter((m) => ["hide", "milkdown-emoji-filter"].includes(m));
-        r.className = f.join(" ");
-        const d = i.getStyle((m) => X(i.themeManager, m));
-        d && d.split(" ").forEach((m) => r.classList.add(m));
+        throw N();
+      const n = document.createElement("div");
+      n.classList.add("milkdown-emoji-filter", "hide"), r.themeManager.onFlush(() => {
+        const u = n.className.split(" ").filter((m) => ["hide", "milkdown-emoji-filter"].includes(m));
+        n.className = u.join(" ");
+        const d = r.getStyle((m) => ne(r.themeManager, m));
+        d && d.split(" ").forEach((m) => n.classList.add(m));
       });
       const h = () => {
         var m;
-        if (!n)
+        if (!o)
           return;
-        const { tr: f } = c.state, d = c.state.schema.node("emoji", { html: (m = n.firstElementChild) == null ? void 0 : m.innerHTML });
-        c.dispatch(f.delete(l, l + o.length).insert(l, d)), s(), r.classList.add("hide");
+        const { tr: u } = c.state, d = c.state.schema.node("emoji", { html: (m = o.firstElementChild) == null ? void 0 : m.innerHTML });
+        c.dispatch(u.delete(i, i + s.length).insert(i, d)), l(), n.classList.add("hide");
       };
-      t.appendChild(r);
-      const p = (f) => {
-        if (!e || !(f instanceof KeyboardEvent))
+      t.appendChild(n);
+      const g = (u) => {
+        if (!e || !(u instanceof KeyboardEvent))
           return;
-        const { key: d } = f;
+        const { key: d } = u;
         if (d === "Enter") {
           h();
           return;
         }
         if (["ArrowDown", "ArrowUp"].includes(d)) {
-          const m = d === "ArrowDown" ? (n == null ? void 0 : n.nextElementSibling) || r.firstElementChild : (n == null ? void 0 : n.previousElementSibling) || r.lastElementChild;
-          if (n && n.classList.remove("active"), !m)
+          const m = d === "ArrowDown" ? (o == null ? void 0 : o.nextElementSibling) || n.firstElementChild : (o == null ? void 0 : o.previousElementSibling) || n.lastElementChild;
+          if (o && o.classList.remove("active"), !m)
             return;
-          m.classList.add("active"), n = m;
+          m.classList.add("active"), o = m;
           return;
         }
-      }, g = (f) => {
-        !e || (f.stopPropagation(), s(), r.classList.add("hide"));
+      }, w = (u) => {
+        !e || (u.stopPropagation(), l(), n.classList.add("hide"));
       };
-      return t.addEventListener("keydown", p), t.addEventListener("mousedown", g), {
-        update: (f) => {
-          const { selection: d } = f.state;
+      return t.addEventListener("keydown", g), t.addEventListener("mousedown", w), {
+        update: (u) => {
+          const { selection: d } = u.state;
           if (d.from - d.to !== 0 || !e)
-            return s(), r.classList.add("hide"), null;
-          const m = M.search(o).slice(0, a), { node: N } = f.domAtPos(l);
-          return m.length === 0 || !N ? (r.classList.add("hide"), null) : (r.classList.remove("hide"), Q(m, r, n, h, (w) => {
-            n = w;
-          }, u), H(f, r, (w, E, y) => {
-            const L = r.parentElement;
-            if (!L)
-              throw T();
-            const x = f.coordsAtPos(l);
-            let v = x.left - y.left, k = w.bottom - y.top + 14 + L.scrollTop;
-            return v < 0 && (v = 0), window.innerHeight - x.bottom < E.height && (k = w.top - y.top - E.height - 14 + L.scrollTop), [k, v];
+            return l(), n.classList.add("hide"), null;
+          const m = D.search(s).slice(0, a), { node: P } = u.domAtPos(i);
+          return m.length === 0 || !P ? (n.classList.add("hide"), null) : (n.style.maxHeight = "", n.classList.remove("hide"), te(
+            m,
+            n,
+            o,
+            h,
+            (C) => {
+              o = C;
+            },
+            f
+          ), R(u, n, (C, j, y) => {
+            const E = n.parentElement;
+            if (!E)
+              throw N();
+            const v = u.coordsAtPos(i);
+            let L = v.left - y.left;
+            L < 0 && (L = 0);
+            let x, p;
+            const k = v.top - y.top, T = y.height + y.top - v.bottom;
+            T >= j.height + 28 ? x = "bottom" : k >= j.height + 28 ? x = "top" : T >= k ? (x = "bottom", p = T - 28) : (x = "top", p = k - 28), (k < 0 || T < 0) && (p = y.height - (v.bottom - v.top) - 28, p > j.height && (p = void 0));
+            const _ = x === "top" ? v.top - y.top - (p != null ? p : j.height) - 14 + E.scrollTop : v.bottom - y.top + 14 + E.scrollTop;
+            n.style.maxHeight = p !== void 0 && p > 0 ? `${p}px` : "";
+            const M = E.clientWidth - (n.offsetWidth + 4);
+            return L > M && (L = M), [_, L];
           }), null);
         },
         destroy: () => {
-          t.removeEventListener("keydown", p), t.removeEventListener("mousedown", g), r.remove();
+          t.removeEventListener("keydown", g), t.removeEventListener("mousedown", w), n.remove();
         }
       };
     }
   });
-}, C = z(), V = (i) => !!i.children, ee = (i) => !!i.value;
-function te(i, a) {
-  return u(i, 0, null)[0];
-  function u(e, l, o) {
-    if (V(e)) {
-      const n = [];
-      for (let s = 0, c = e.children.length; s < c; s++) {
-        const t = e.children[s];
+}, S = Q(), se = (r) => !!r.children, ie = (r) => !!r.value;
+function le(r, a) {
+  return f(r, 0, null)[0];
+  function f(e, i, s) {
+    if (se(e)) {
+      const o = [];
+      for (let l = 0, c = e.children.length; l < c; l++) {
+        const t = e.children[l];
         if (t) {
-          const r = u(t, s, e);
-          if (r)
-            for (let h = 0, p = r.length; h < p; h++) {
-              const g = r[h];
-              g && n.push(g);
+          const n = f(t, l, e);
+          if (n)
+            for (let h = 0, g = n.length; h < g; h++) {
+              const w = n[h];
+              w && o.push(w);
             }
         }
       }
-      e.children = n;
+      e.children = o;
     }
-    return a(e, l, o);
+    return a(e, i, s);
   }
 }
-const ne = (i) => () => {
-  function a(u) {
-    te(u, (e) => {
-      if (!ee(e))
+const ae = (r) => () => {
+  function a(f) {
+    le(f, (e) => {
+      if (!ie(e))
         return [e];
-      const l = e.value, o = [];
-      let n, s = l;
-      for (; n = C.exec(s); ) {
-        const { index: c } = n, t = n[0];
-        t && (c > 0 && o.push({ ...e, value: s.slice(0, c) }), o.push({ ...e, value: j(t, i), type: "emoji" }), s = s.slice(c + t.length)), C.lastIndex = 0;
+      const i = e.value, s = [];
+      let o, l = i;
+      for (; o = S.exec(l); ) {
+        const { index: c } = o, t = o[0];
+        t && (c > 0 && s.push({ ...e, value: l.slice(0, c) }), s.push({ ...e, value: b(t, r), type: "emoji" }), l = l.slice(c + t.length)), S.lastIndex = 0;
       }
-      return s.length && o.push({ ...e, value: s }), o;
+      return l.length && s.push({ ...e, value: l }), s;
     });
   }
   return a;
-}, re = S((i, a) => {
-  const u = () => i.getStyle(({ css: e }) => e`
+}, ce = A((r, a) => {
+  const f = () => r.getStyle(
+    ({ css: e }) => e`
                 .emoji {
                     height: 1em;
                     width: 1em;
                     margin: 0 1px 0 1.5px;
                     vertical-align: -1.5px;
                 }
-            `);
+            `
+  );
   return {
     id: "emoji",
     schema: () => ({
@@ -221,55 +247,55 @@ const ne = (i) => () => {
           tag: 'span[data-type="emoji"]',
           getAttrs: (e) => {
             if (!(e instanceof HTMLElement))
-              throw D(e);
+              throw O(e);
             return { html: e.innerHTML };
           }
         }
       ],
       toDOM: (e) => {
-        const l = document.createElement("span");
-        return l.classList.add("emoji-wrapper"), l.dataset.type = "emoji", i.themeManager.onFlush(() => {
-          const o = u();
-          o && l.classList.add(o);
-        }), l.innerHTML = e.attrs.html, { dom: l };
+        const i = document.createElement("span");
+        return i.classList.add("emoji-wrapper"), i.dataset.type = "emoji", r.themeManager.onFlush(() => {
+          const s = f();
+          s && i.classList.add(s);
+        }), i.innerHTML = e.attrs.html, { dom: i };
       },
       parseMarkdown: {
         match: ({ type: e }) => e === "emoji",
-        runner: (e, l, o) => {
-          e.addNode(o, { html: l.value });
+        runner: (e, i, s) => {
+          e.addNode(s, { html: i.value });
         }
       },
       toMarkdown: {
         match: (e) => e.type.name === "emoji",
-        runner: (e, l) => {
-          const o = document.createElement("span");
-          o.innerHTML = l.attrs.html;
-          const n = o.querySelector("img"), s = n == null ? void 0 : n.title;
-          o.remove(), e.addNode("text", void 0, s);
+        runner: (e, i) => {
+          const s = document.createElement("span");
+          s.innerHTML = i.attrs.html;
+          const o = s.querySelector("img"), l = o == null ? void 0 : o.title;
+          s.remove(), e.addNode("text", void 0, l);
         }
       }
     }),
     inputRules: (e) => [
-      new P(q, (l, o, n, s) => {
-        const c = o[0];
+      new F(Z, (i, s, o, l) => {
+        const c = s[0];
         if (!c)
           return null;
-        const t = M.get(c);
+        const t = D.get(c);
         if (!t || c.includes(t))
           return null;
-        const r = j(t, a == null ? void 0 : a.twemojiOptions);
-        return l.tr.setMeta("emoji", !0).replaceRangeWith(n, s, e.create({ html: r })).scrollIntoView();
+        const n = b(t, a == null ? void 0 : a.twemojiOptions);
+        return i.tr.setMeta("emoji", !0).replaceRangeWith(o, l, e.create({ html: n })).scrollIntoView();
       })
     ],
-    remarkPlugins: () => [A, ne(a == null ? void 0 : a.twemojiOptions)],
+    remarkPlugins: () => [I, ae(a == null ? void 0 : a.twemojiOptions)],
     prosePlugins: () => {
       var e;
-      return [Z(i, (e = a == null ? void 0 : a.maxListSize) != null ? e : 6, a == null ? void 0 : a.twemojiOptions)];
+      return [re(r, (e = a == null ? void 0 : a.maxListSize) != null ? e : 6, a == null ? void 0 : a.twemojiOptions)];
     }
   };
-}), he = b.create([re()]);
+}), Le = H.create([ce()]);
 export {
-  he as emoji,
-  re as emojiNode
+  Le as emoji,
+  ce as emojiNode
 };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map CHANGED Viewed

	@@ -1 +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/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, twemojiOptions?: TwemojiOptions): string =>\n twemoji.parse(emoji, { attributes: setAttr, ...twemojiOptions }) as unknown as string;\n","/ Copyright 2021, Milkdown by Mirone. /\n\nimport { EditorView } from '@milkdown/prose/view';\nimport type { 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 twemojiOptions?: TwemojiOptions,\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, twemojiOptions);\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: 8px;\n height: 36px;\n padding: 0 14px;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n line-height: 2;\n font-family: ${typography};\n font-size: 14px;\n &.active {\n background: ${palette('secondary', 0.12)};\n color: ${palette('primary')};\n }\n }\n\n .emoji {\n height: 14px;\n width: 14px;\n margin: 0 1px 0 1.5px;\n vertical-align: -1.5px;\n }\n `;\n return cx(border, shadow, style);\n};\n","/ Copyright 2021, Milkdown by Mirone. /\n\nimport { missingRootElement } from '@milkdown/exception';\nimport { calculateNodePosition } from '@milkdown/prose';\nimport { Plugin, PluginKey } from '@milkdown/prose/state';\nimport { ThemeUtils } from '@milkdown/utils';\nimport nodeEmoji from 'node-emoji';\n\nimport { checkTrigger, renderDropdownList } from './helper';\nimport { injectStyle } from './style';\n\nexport const key = new PluginKey('MILKDOWN_EMOJI_FILTER');\n\nexport const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?: TwemojiOptions) => {\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 missingRootElement();\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 = nodeEmoji.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(\n result,\n dropDown,\n $active,\n replace,\n (a) => {\n $active = a;\n },\n twemojiOptions,\n );\n calculateNodePosition(view, dropDown, (selected, target, parent) => {\n const $editor = dropDown.parentElement;\n if (!$editor) {\n throw missingRootElement();\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 { RemarkPlugin } from '@milkdown/core';\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: (twemojiOptions?: TwemojiOptions) => RemarkPlugin = (twemojiOptions) => () => {\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, twemojiOptions), type: 'emoji' });\n str = str.slice(index + emoji.length);\n }\n regex.lastIndex = 0;\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 { expectDomTypeError } from '@milkdown/exception';\nimport { InputRule } from '@milkdown/prose/inputrules';\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 twemojiOptions: TwemojiOptions;\n};\n\nexport const emojiNode = createNode<string, EmojiOptions>((utils, options) => {\n const getStyle = () =>\n utils.getStyle(\n ({ css }) => css`\n .emoji {\n height: 1em;\n width: 1em;\n margin: 0 1px 0 1.5px;\n vertical-align: -1.5px;\n }\n `,\n );\n return {\n id: 'emoji',\n schema: () => ({\n group: 'inline',\n inline: true,\n atom: true,\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 expectDomTypeError(dom);\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, options?.twemojiOptions);\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(options?.twemojiOptions)],\n prosePlugins: () => [filter(utils, options?.maxListSize ?? 6, options?.twemojiOptions)],\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":"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"}
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/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, twemojiOptions?: TwemojiOptions): string =>\n twemoji.parse(emoji, { attributes: setAttr, ...twemojiOptions }) as unknown as string;\n","/ Copyright 2021, Milkdown by Mirone. /\n\nimport { EditorView } from '@milkdown/prose/view';\nimport type { 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 twemojiOptions?: TwemojiOptions,\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, twemojiOptions);\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 ThemeScrollbar,\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 scrollbar = themeManager.get(ThemeScrollbar, 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 min-height: 36px;\n max-height: 320px;\n overflow-y: auto;\n border-radius: ${radius};\n position: absolute;\n background: ${palette('surface')};\n\n &.hide {\n display: none;\n }\n\n .milkdown-emoji-filter_item {\n display: flex;\n gap: 8px;\n height: 36px;\n padding: 0 14px;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n line-height: 2;\n font-family: ${typography};\n font-size: 14px;\n &.active {\n background: ${palette('secondary', 0.12)};\n color: ${palette('primary')};\n }\n }\n\n .emoji {\n height: 14px;\n width: 14px;\n margin: 0 1px 0 1.5px;\n vertical-align: -1.5px;\n }\n `;\n return cx(border, shadow, scrollbar, style);\n};\n","/ Copyright 2021, Milkdown by Mirone. /\n\nimport { missingRootElement } from '@milkdown/exception';\nimport { calculateNodePosition } from '@milkdown/prose';\nimport { Plugin, PluginKey } from '@milkdown/prose/state';\nimport { ThemeUtils } from '@milkdown/utils';\nimport nodeEmoji from 'node-emoji';\n\nimport { checkTrigger, renderDropdownList } from './helper';\nimport { injectStyle } from './style';\n\nexport const key = new PluginKey('MILKDOWN_EMOJI_FILTER');\n\nexport const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?: TwemojiOptions) => {\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 missingRootElement();\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 = nodeEmoji.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.style.maxHeight = '';\n dropDown.classList.remove('hide');\n renderDropdownList(\n result,\n dropDown,\n $active,\n replace,\n (a) => {\n $active = a;\n },\n twemojiOptions,\n );\n calculateNodePosition(view, dropDown, (_selected, target, parent) => {\n const $editor = dropDown.parentElement;\n if (!$editor) {\n throw missingRootElement();\n }\n const start = view.coordsAtPos(_from);\n let left = start.left - parent.left;\n\n if (left < 0) {\n left = 0;\n }\n\n let direction: 'top' \| 'bottom';\n let maxHeight: number \| undefined;\n const startToTop = start.top - parent.top;\n const startToBottom = parent.height + parent.top - start.bottom;\n if (startToBottom >= target.height + 28) {\n direction = 'bottom';\n } else if (startToTop >= target.height + 28) {\n direction = 'top';\n } else if (startToBottom >= startToTop) {\n direction = 'bottom';\n maxHeight = startToBottom - 28;\n } else {\n direction = 'top';\n maxHeight = startToTop - 28;\n }\n if (startToTop < 0 \|\| startToBottom < 0) {\n maxHeight = parent.height - (start.bottom - start.top) - 28;\n if (maxHeight > target.height) {\n maxHeight = undefined;\n }\n }\n\n const top =\n direction === 'top'\n ? start.top - parent.top - (maxHeight ?? target.height) - 14 + $editor.scrollTop\n : start.bottom - parent.top + 14 + $editor.scrollTop;\n\n dropDown.style.maxHeight = maxHeight !== undefined && maxHeight > 0 ? `${maxHeight}px` : '';\n\n const maxLeft = $editor.clientWidth - (dropDown.offsetWidth + 4);\n if (left > maxLeft) {\n left = maxLeft;\n }\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 { RemarkPlugin } from '@milkdown/core';\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: (twemojiOptions?: TwemojiOptions) => RemarkPlugin = (twemojiOptions) => () => {\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, twemojiOptions), type: 'emoji' });\n str = str.slice(index + emoji.length);\n }\n regex.lastIndex = 0;\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 { expectDomTypeError } from '@milkdown/exception';\nimport { InputRule } from '@milkdown/prose/inputrules';\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 twemojiOptions: TwemojiOptions;\n};\n\nexport const emojiNode = createNode<string, EmojiOptions>((utils, options) => {\n const getStyle = () =>\n utils.getStyle(\n ({ css }) => css`\n .emoji {\n height: 1em;\n width: 1em;\n margin: 0 1px 0 1.5px;\n vertical-align: -1.5px;\n }\n `,\n );\n return {\n id: 'emoji',\n schema: () => ({\n group: 'inline',\n inline: true,\n atom: true,\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 expectDomTypeError(dom);\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, options?.twemojiOptions);\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(options?.twemojiOptions)],\n prosePlugins: () => [filter(utils, options?.maxListSize ?? 6, options?.twemojiOptions)],\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":["part","full","input","setAttr","text","parse","emoji","twemojiOptions","twemoji","checkTrigger","view","from","to","setRange","setSearch","state","$from","textBefore","regex","match","renderDropdownList","list","dropDown","$active","onConfirm","setActive","key","i","container","emojiSpan","keySpan","onEnter","e","target","onLeave","onClick","injectStyle","themeManager","css","cx","border","ThemeBorder","shadow","ThemeShadow","scrollbar","ThemeScrollbar","radius","ThemeSize","typography","ThemeFont","palette","color","opacity","ThemeColor","style","PluginKey","filter","utils","maxListSize","trigger","_from","_search","off","Plugin","_","event","search","editorView","parentNode","missingRootElement","className","x","emotion","replace","tr","node","_a","onKeydown","next","selection","result","nodeEmoji","a","calculateNodePosition","_selected","parent","$editor","start","left","direction","maxHeight","startToTop","startToBottom","top","maxLeft","emojiRegex","isParent","isLiteral","flatMap","ast","fn","transform","index","out","n","nthChild","xs","j","m","item","twemojiPlugin","transformer","tree","value","output","str","emojiNode","createNode","options","getStyle","dom","expectDomTypeError","span","type","img","title","nodeType","InputRule","end","content","got","html","remarkEmoji","AtomList"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/plugin-emoji",
-  "version": "6.5.1",
+  "version": "6.5.2",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -15,8 +15,8 @@
     "milkdown plugin"
   ],
   "devDependencies": {
-    "@milkdown/core": "6.5.0",
-    "@milkdown/prose": "6.5.0",
+    "@milkdown/core": "6.5.2",
+    "@milkdown/prose": "6.5.2",
     "@types/unist": "^2.0.6"
   },
   "peerDependencies": {
@@ -24,8 +24,8 @@
     "@milkdown/prose": "^6.0.1"
   },
   "dependencies": {
-    "@milkdown/exception": "6.5.0",
-    "@milkdown/utils": "6.5.0",
+    "@milkdown/exception": "6.5.2",
+    "@milkdown/utils": "6.5.2",
     "@types/node-emoji": "^1.8.1",
     "emoji-regex": "^10.0.0",
     "node-emoji": "^1.10.0",

package/src/filter/index.ts CHANGED Viewed

@@ -144,6 +144,7 @@ export const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?:
                         return null;
                     }
+                    dropDown.style.maxHeight = '';
                     dropDown.classList.remove('hide');
                     renderDropdownList(
                         result,
@@ -155,22 +156,52 @@ export const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?:
                         },
                         twemojiOptions,
                     );
-                    calculateNodePosition(view, dropDown, (selected, target, parent) => {
+                    calculateNodePosition(view, dropDown, (_selected, target, parent) => {
                         const $editor = dropDown.parentElement;
                         if (!$editor) {
                             throw missingRootElement();
                         }
                         const start = view.coordsAtPos(_from);
                         let left = start.left - parent.left;
-                        let top = selected.bottom - parent.top + 14 + $editor.scrollTop;
                         if (left < 0) {
                             left = 0;
                         }
-                        if (window.innerHeight - start.bottom < target.height) {
-                            top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
+                        let direction: 'top' | 'bottom';
+                        let maxHeight: number | undefined;
+                        const startToTop = start.top - parent.top;
+                        const startToBottom = parent.height + parent.top - start.bottom;
+                        if (startToBottom >= target.height + 28) {
+                            direction = 'bottom';
+                        } else if (startToTop >= target.height + 28) {
+                            direction = 'top';
+                        } else if (startToBottom >= startToTop) {
+                            direction = 'bottom';
+                            maxHeight = startToBottom - 28;
+                        } else {
+                            direction = 'top';
+                            maxHeight = startToTop - 28;
                         }
+                        if (startToTop < 0 || startToBottom < 0) {
+                            maxHeight = parent.height - (start.bottom - start.top) - 28;
+                            if (maxHeight > target.height) {
+                                maxHeight = undefined;
+                            }
+                        }
+                        const top =
+                            direction === 'top'
+                                ? start.top - parent.top - (maxHeight ?? target.height) - 14 + $editor.scrollTop
+                                : start.bottom - parent.top + 14 + $editor.scrollTop;
+                        dropDown.style.maxHeight = maxHeight !== undefined && maxHeight > 0 ? `${maxHeight}px` : '';
+                        const maxLeft = $editor.clientWidth - (dropDown.offsetWidth + 4);
+                        if (left > maxLeft) {
+                            left = maxLeft;
+                        }
                         return [top, left];
                     });

package/src/filter/style.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import {
     ThemeColor,
     ThemeFont,
     ThemeManager,
+    ThemeScrollbar,
     ThemeShadow,
     ThemeSize,
 } from '@milkdown/core';
@@ -13,19 +14,23 @@ import {
 export const injectStyle = (themeManager: ThemeManager, { css, cx }: Emotion) => {
     const border = themeManager.get(ThemeBorder, undefined);
     const shadow = themeManager.get(ThemeShadow, undefined);
+    const scrollbar = themeManager.get(ThemeScrollbar, 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`
+        min-height: 36px;
+        max-height: 320px;
+        overflow-y: auto;
+        border-radius: ${radius};
         position: absolute;
+        background: ${palette('surface')};
         &.hide {
             display: none;
         }
-        border-radius: ${radius};
-        background: ${palette('surface')};
         .milkdown-emoji-filter_item {
             display: flex;
             gap: 8px;
@@ -50,5 +55,5 @@ export const injectStyle = (themeManager: ThemeManager, { css, cx }: Emotion) =>
             vertical-align: -1.5px;
         }
     `;
-    return cx(border, shadow, style);
+    return cx(border, shadow, scrollbar, style);
 };