@milkdown/plugin-emoji 6.5.1 → 6.5.3

package/lib/node.d.ts

@@ -1,6 +1,6 @@
-export declare type EmojiOptions = {
+export interface EmojiOptions {
     maxListSize: number;
     twemojiOptions: TwemojiOptions;
-};
+}
 export declare const emojiNode: import("@milkdown/utils").NodeCreator<string, EmojiOptions>;
 //# sourceMappingURL=node.d.ts.map

package/lib/node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../src/node.ts"],"names":[],"mappings":"AAaA,oBAAY,YAAY,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,SAAS,6DAmFpB,CAAC"}
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../src/node.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,cAAc,CAAA;CAC/B;AAED,eAAO,MAAM,SAAS,6DAoFpB,CAAA"}

package/lib/parse.d.ts.map

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

package/lib/remark-twemoji.d.ts

@@ -1,3 +1,3 @@
-import { RemarkPlugin } from '@milkdown/core';
+import type { RemarkPlugin } from '@milkdown/core';
 export declare const twemojiPlugin: (twemojiOptions?: TwemojiOptions) => RemarkPlugin;
 //# sourceMappingURL=remark-twemoji.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"remark-twemoji.d.ts","sourceRoot":"","sources":["../src/remark-twemoji.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAsC9C,eAAO,MAAM,aAAa,EAAE,CAAC,cAAc,CAAC,EAAE,cAAc,KAAK,YA6BhE,CAAC"}
+{"version":3,"file":"remark-twemoji.d.ts","sourceRoot":"","sources":["../src/remark-twemoji.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAqClD,eAAO,MAAM,aAAa,EAAE,CAAC,cAAc,CAAC,EAAE,cAAc,KAAK,YA8BhE,CAAA"}

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@milkdown/plugin-emoji",
-  "version": "6.5.1",
   "type": "module",
+  "version": "6.5.3",
+  "license": "MIT",
+  "keywords": [
+    "milkdown",
+    "milkdown plugin"
+  ],
+  "sideEffects": false,
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
-  "sideEffects": false,
-  "license": "MIT",
   "files": [
     "lib",
     "src"
   ],
-  "keywords": [
-    "milkdown",
-    "milkdown plugin"
-  ],
-  "devDependencies": {
-    "@milkdown/core": "6.5.0",
-    "@milkdown/prose": "6.5.0",
-    "@types/unist": "^2.0.6"
-  },
   "peerDependencies": {
     "@milkdown/core": "^6.0.1",
     "@milkdown/prose": "^6.0.1"
   },
   "dependencies": {
-    "@milkdown/exception": "6.5.0",
-    "@milkdown/utils": "6.5.0",
     "@types/node-emoji": "^1.8.1",
     "emoji-regex": "^10.0.0",
     "node-emoji": "^1.10.0",
     "remark-emoji": "^3.0.1",
     "tslib": "^2.4.0",
     "twemoji": "^14.0.1",
-    "unist-util-visit": "^4.0.0"
+    "unist-util-visit": "^4.0.0",
+    "@milkdown/exception": "6.5.3",
+    "@milkdown/utils": "6.5.3"
+  },
+  "devDependencies": {
+    "@types/unist": "^2.0.6",
+    "@milkdown/core": "6.5.3",
+    "@milkdown/prose": "6.5.3"
   },
   "nx": {
     "targets": {

package/src/constant.ts

@@ -1,4 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-export const part = /:\+1|:-1|:[\w-]+/;
-export const full = /:\+1:|:-1:|:[\w-]+:/;
-export const input = /(:([^:\s]+):)$/;
+export const part = /:\+1|:-1|:[\w-]+/
+export const full = /:\+1:|:-1:|:[\w-]+:/
+export const input = /(:([^:\s]+):)$/

package/src/filter/helper.ts

@@ -1,94 +1,83 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { EditorView } from '@milkdown/prose/view';
-import type { Emoji } from 'node-emoji';
+import type { EditorView } from '@milkdown/prose/view'
+import type { Emoji } from 'node-emoji'
 
-import { full, part } from '../constant';
-import { parse } from '../parse';
+import { full, part } from '../constant'
+import { parse } from '../parse'
 
 export const checkTrigger = (
-    view: EditorView,
-    from: number,
-    to: number,
-    text: string,
-    setRange: (from: number, to: number) => void,
-    setSearch: (words: string) => void,
+  view: EditorView,
+  from: number,
+  to: number,
+  text: string,
+  setRange: (from: number, to: number) => void,
+  setSearch: (words: string) => void,
 ) => {
-    if (view.composing) return false;
-    const { state } = view;
-    const $from = state.doc.resolve(from);
-    if ($from.parent.type.spec.code) return false;
-    const textBefore = (
-        $from.parent.textBetween(Math.max(0, $from.parentOffset - 10), $from.parentOffset, undefined, '\ufffc') + text
-    ).toLowerCase();
-    if (full.test(textBefore)) {
-        return false;
-    }
-    const regex = part.exec(textBefore);
-    if (regex && regex[0] && textBefore.endsWith(regex[0])) {
-        const match = regex[0];
-        setRange(from - (match.length - text.length), to);
-        setSearch(match);
-        return true;
-    }
-    return false;
-};
+  if (view.composing)
+    return false
+  const { state } = view
+  const $from = state.doc.resolve(from)
+  if ($from.parent.type.spec.code)
+    return false
+  const textBefore = (
+    $from.parent.textBetween(Math.max(0, $from.parentOffset - 10), $from.parentOffset, undefined, '\uFFFC') + text
+  ).toLowerCase()
+  if (full.test(textBefore))
+    return false
+
+  const regex = part.exec(textBefore)
+  if (regex && regex[0] && textBefore.endsWith(regex[0])) {
+    const match = regex[0]
+    setRange(from - (match.length - text.length), to)
+    setSearch(match)
+    return true
+  }
+  return false
+}
 
 export const renderDropdownList = (
-    list: Emoji[],
-    dropDown: HTMLElement,
-    $active: HTMLElement | null,
-    onConfirm: () => void,
-    setActive: (active: HTMLElement | null) => void,
-    twemojiOptions?: TwemojiOptions,
+  list: Emoji[],
+  dropDown: HTMLElement,
+  onConfirm: () => void,
+  setActive: (active: HTMLElement | null) => void,
+  twemojiOptions?: TwemojiOptions,
 ) => {
-    while (dropDown.firstChild) {
-        dropDown.firstChild.remove();
-    }
-    list.forEach(({ emoji, key }, i) => {
-        const container = document.createElement('div');
-        container.className = 'milkdown-emoji-filter_item';
+  while (dropDown.firstChild)
+    dropDown.firstChild.remove()
 
-        const emojiSpan = document.createElement('span');
-        emojiSpan.innerHTML = parse(emoji, twemojiOptions);
+  list.forEach(({ emoji, key }, i) => {
+    const container = document.createElement('div')
+    container.className = 'milkdown-emoji-filter_item'
 
-        emojiSpan.className = 'milkdown-emoji-filter_item-emoji';
-        const keySpan = document.createElement('span');
-        keySpan.textContent = ':' + key + ':';
-        keySpan.className = 'milkdown-emoji-filter_item-key';
+    const emojiSpan = document.createElement('span')
+    emojiSpan.innerHTML = parse(emoji, twemojiOptions)
 
-        container.appendChild(emojiSpan);
-        container.appendChild(keySpan);
-        dropDown.appendChild(container);
+    emojiSpan.className = 'milkdown-emoji-filter_item-emoji'
+    const keySpan = document.createElement('span')
+    keySpan.textContent = `:${key}:`
+    keySpan.className = 'milkdown-emoji-filter_item-key'
 
-        if (i === 0) {
-            container.classList.add('active');
-            setActive(container);
-        }
+    container.appendChild(emojiSpan)
+    container.appendChild(keySpan)
+    dropDown.appendChild(container)
 
-        const onEnter = (e: MouseEvent) => {
-            if ($active) {
-                $active.classList.remove('active');
-            }
-            const { target } = e;
-            if (!(target instanceof HTMLElement)) return;
-            target.classList.add('active');
-            setActive(target);
-        };
+    if (i === 0)
+      setActive(container)
 
-        const onLeave = (e: MouseEvent) => {
-            const { target } = e;
-            if (!(target instanceof HTMLElement)) return;
-            target.classList.remove('active');
-        };
+    const onEnter = (e: MouseEvent) => {
+      const { target } = e
+      if (!(target instanceof HTMLElement))
+        return
+      setActive(target)
+    }
 
-        const onClick = (e: MouseEvent) => {
-            e.preventDefault();
-            onConfirm();
-        };
+    const onClick = (e: MouseEvent) => {
+      e.preventDefault()
+      onConfirm()
+    }
 
-        container.addEventListener('mouseenter', onEnter);
-        container.addEventListener('mouseleave', onLeave);
-        container.addEventListener('mousedown', onClick);
-    });
-};
+    container.addEventListener('mouseenter', onEnter)
+    container.addEventListener('mousedown', onClick)
+  })
+}

package/src/filter/index.ts

@@ -1,188 +1,217 @@
 /* Copyright 2021, Milkdown by Mirone. */
 
-import { missingRootElement } from '@milkdown/exception';
-import { calculateNodePosition } from '@milkdown/prose';
-import { Plugin, PluginKey } from '@milkdown/prose/state';
-import { ThemeUtils } from '@milkdown/utils';
-import nodeEmoji from 'node-emoji';
+import { missingRootElement } from '@milkdown/exception'
+import { calculateNodePosition } from '@milkdown/prose'
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import type { ThemeUtils } from '@milkdown/utils'
+import nodeEmoji from 'node-emoji'
 
-import { checkTrigger, renderDropdownList } from './helper';
-import { injectStyle } from './style';
+import { checkTrigger, renderDropdownList } from './helper'
+import { injectStyle } from './style'
 
-export const key = new PluginKey('MILKDOWN_EMOJI_FILTER');
+export const key = new PluginKey('MILKDOWN_EMOJI_FILTER')
 
 export const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?: TwemojiOptions) => {
-    let trigger = false;
-    let _from = 0;
-    let _search = '';
-    let $active: null | HTMLElement = null;
-
-    const off = () => {
-        trigger = false;
-        _from = 0;
-        _search = '';
-        $active = null;
-    };
-
-    return new Plugin({
-        key,
-        props: {
-            handleKeyDown(_, event) {
-                if (['Delete', 'Backspace'].includes(event.key)) {
-                    _search = _search.slice(0, -1);
-                    if (_search.length <= 1) {
-                        off();
-                    }
-                    return false;
-                }
-                if (!trigger) return false;
-                if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
-                    return false;
-                }
-                return true;
-            },
-            handleTextInput(view, from, to, text) {
-                trigger = checkTrigger(
-                    view,
-                    from,
-                    to,
-                    text,
-                    (from) => {
-                        _from = from;
-                    },
-                    (search) => {
-                        _search = search;
-                    },
-                );
-                if (!trigger) {
-                    off();
-                }
-                return false;
-            },
-        },
-        view: (editorView) => {
-            const { parentNode } = editorView.dom;
-            if (!parentNode) {
-                throw missingRootElement();
+  let trigger = false
+  let _from = 0
+  let _search = ''
+  let $active: null | HTMLElement = null
+
+  const off = () => {
+    trigger = false
+    _from = 0
+    _search = ''
+    $active = null
+  }
+
+  const setActive = (active: HTMLElement | null) => {
+    if ($active)
+      $active.classList.remove('active')
+
+    if (active)
+      active.classList.add('active')
+
+    $active = active
+  }
+
+  return new Plugin({
+    key,
+    props: {
+      handleKeyDown(_, event) {
+        if (['Delete', 'Backspace'].includes(event.key)) {
+          _search = _search.slice(0, -1)
+          if (_search.length <= 1)
+            off()
+
+          return false
+        }
+        if (!trigger)
+          return false
+        if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key))
+          return false
+
+        return true
+      },
+      handleTextInput(view, from, to, text) {
+        trigger = checkTrigger(
+          view,
+          from,
+          to,
+          text,
+          (from) => {
+            _from = from
+          },
+          (search) => {
+            _search = search
+          },
+        )
+        if (!trigger)
+          off()
+
+        return false
+      },
+    },
+    view: (editorView) => {
+      const { parentNode } = editorView.dom
+      if (!parentNode)
+        throw missingRootElement()
+
+      const dropDown = document.createElement('div')
+
+      dropDown.classList.add('milkdown-emoji-filter', 'hide')
+
+      utils.themeManager.onFlush(() => {
+        const className = dropDown.className
+          .split(' ')
+          .filter(x => ['hide', 'milkdown-emoji-filter'].includes(x))
+        dropDown.className = className.join(' ')
+        const style = utils.getStyle(emotion => injectStyle(utils.themeManager, emotion))
+        if (style)
+          style.split(' ').forEach(x => dropDown.classList.add(x))
+      })
+
+      const replace = () => {
+        if (!$active)
+          return
+
+        const { tr } = editorView.state
+        const node = editorView.state.schema.node('emoji', { html: $active.firstElementChild?.innerHTML })
+
+        editorView.dispatch(tr.delete(_from, _from + _search.length).insert(_from, node))
+        off()
+        dropDown.classList.add('hide')
+      }
+
+      parentNode.appendChild(dropDown)
+      const onKeydown = (e: Event) => {
+        if (!trigger || !(e instanceof KeyboardEvent))
+          return
+
+        const { key } = e
+
+        if (key === 'Enter') {
+          replace()
+          return
+        }
+
+        if (['ArrowDown', 'ArrowUp'].includes(key)) {
+          const next
+            = key === 'ArrowDown'
+              ? $active?.nextElementSibling || dropDown.firstElementChild
+              : $active?.previousElementSibling || dropDown.lastElementChild
+          if (!next)
+            return
+          setActive(next as HTMLElement)
+        }
+      }
+      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) => {
+          const { selection } = view.state
+
+          if (selection.from - selection.to !== 0 || !trigger) {
+            off()
+            dropDown.classList.add('hide')
+            return null
+          }
+          const result = nodeEmoji.search(_search).slice(0, maxListSize)
+          const { node } = view.domAtPos(_from)
+          if (result.length === 0 || !node) {
+            dropDown.classList.add('hide')
+            return null
+          }
+
+          dropDown.style.maxHeight = ''
+          dropDown.classList.remove('hide')
+          renderDropdownList(result, dropDown, replace, setActive, twemojiOptions)
+          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
+
+            if (left < 0)
+              left = 0
+
+            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]
+          })
+
+          return null
+        },
 
-            const dropDown = document.createElement('div');
-
-            dropDown.classList.add('milkdown-emoji-filter', 'hide');
-
-            utils.themeManager.onFlush(() => {
-                const className = dropDown.className
-                    .split(' ')
-                    .filter((x) => ['hide', 'milkdown-emoji-filter'].includes(x));
-                dropDown.className = className.join(' ');
-                const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));
-                if (style) {
-                    style.split(' ').forEach((x) => dropDown.classList.add(x));
-                }
-            });
-
-            const replace = () => {
-                if (!$active) return;
-
-                const { tr } = editorView.state;
-                const node = editorView.state.schema.node('emoji', { html: $active.firstElementChild?.innerHTML });
-
-                editorView.dispatch(tr.delete(_from, _from + _search.length).insert(_from, node));
-                off();
-                dropDown.classList.add('hide');
-            };
-
-            parentNode.appendChild(dropDown);
-            const onKeydown = (e: Event) => {
-                if (!trigger || !(e instanceof KeyboardEvent)) return;
-
-                const { key } = e;
-
-                if (key === 'Enter') {
-                    replace();
-                    return;
-                }
-
-                if (['ArrowDown', 'ArrowUp'].includes(key)) {
-                    const next =
-                        key === 'ArrowDown'
-                            ? $active?.nextElementSibling || dropDown.firstElementChild
-                            : $active?.previousElementSibling || dropDown.lastElementChild;
-                    if ($active) {
-                        $active.classList.remove('active');
-                    }
-                    if (!next) return;
-                    next.classList.add('active');
-                    $active = next as HTMLElement;
-
-                    return;
-                }
-            };
-            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) => {
-                    const { selection } = view.state;
-
-                    if (selection.from - selection.to !== 0 || !trigger) {
-                        off();
-                        dropDown.classList.add('hide');
-                        return null;
-                    }
-                    const result = nodeEmoji.search(_search).slice(0, maxListSize);
-                    const { node } = view.domAtPos(_from);
-                    if (result.length === 0 || !node) {
-                        dropDown.classList.add('hide');
-                        return null;
-                    }
-
-                    dropDown.classList.remove('hide');
-                    renderDropdownList(
-                        result,
-                        dropDown,
-                        $active,
-                        replace,
-                        (a) => {
-                            $active = a;
-                        },
-                        twemojiOptions,
-                    );
-                    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;
-                        }
-                        return [top, left];
-                    });
-
-                    return null;
-                },
-
-                destroy: () => {
-                    parentNode.removeEventListener('keydown', onKeydown);
-                    parentNode.removeEventListener('mousedown', onClick);
-                    dropDown.remove();
-                },
-            };
+        destroy: () => {
+          parentNode.removeEventListener('keydown', onKeydown)
+          parentNode.removeEventListener('mousedown', onClick)
+          dropDown.remove()
         },
-    });
-};
+      }
+    },
+  })
+}