@milkdown/plugin-emoji 6.5.1 → 6.5.3

package/src/filter/style.ts

@@ -1,31 +1,38 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import type {
+  Color,
+  Emotion,
+  ThemeManager,
+} from '@milkdown/core'
 import {
-    Color,
-    Emotion,
-    ThemeBorder,
-    ThemeColor,
-    ThemeFont,
-    ThemeManager,
-    ThemeShadow,
-    ThemeSize,
-} from '@milkdown/core';
+  ThemeBorder,
+  ThemeColor,
+  ThemeFont,
+  ThemeScrollbar,
+  ThemeShadow,
+  ThemeSize,
+} from '@milkdown/core'
 
 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 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`
+  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;
@@ -49,6 +56,6 @@ export const injectStyle = (themeManager: ThemeManager, { css, cx }: Emotion) =>
             margin: 0 1px 0 1.5px;
             vertical-align: -1.5px;
         }
-    `;
-    return cx(border, shadow, style);
-};
+    `
+  return cx(border, shadow, scrollbar, style)
+}

package/src/index.ts

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

package/src/node.ts

@@ -1,25 +1,25 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { RemarkPlugin } from '@milkdown/core';
-import { expectDomTypeError } from '@milkdown/exception';
-import { InputRule } from '@milkdown/prose/inputrules';
-import { createNode } from '@milkdown/utils';
-import nodeEmoji from 'node-emoji';
-import remarkEmoji from 'remark-emoji';
+import type { RemarkPlugin } from '@milkdown/core'
+import { expectDomTypeError } from '@milkdown/exception'
+import { InputRule } from '@milkdown/prose/inputrules'
+import { createNode } from '@milkdown/utils'
+import nodeEmoji from 'node-emoji'
+import remarkEmoji from 'remark-emoji'
 
-import { input } from './constant';
-import { filter } from './filter';
-import { parse } from './parse';
-import { twemojiPlugin } from './remark-twemoji';
+import { input } from './constant'
+import { filter } from './filter'
+import { parse } from './parse'
+import { twemojiPlugin } from './remark-twemoji'
 
-export type EmojiOptions = {
-    maxListSize: number;
-    twemojiOptions: TwemojiOptions;
-};
+export interface EmojiOptions {
+  maxListSize: number
+  twemojiOptions: TwemojiOptions
+}
 
 export const emojiNode = createNode<string, EmojiOptions>((utils, options) => {
-    const getStyle = () =>
-        utils.getStyle(
-            ({ css }) => css`
+  const getStyle = () =>
+    utils.getStyle(
+      ({ css }) => css`
                 .emoji {
                     height: 1em;
                     width: 1em;
@@ -27,76 +27,77 @@ export const emojiNode = createNode<string, EmojiOptions>((utils, options) => {
                     vertical-align: -1.5px;
                 }
             `,
-        );
-    return {
-        id: 'emoji',
-        schema: () => ({
-            group: 'inline',
-            inline: true,
-            atom: true,
-            attrs: {
-                html: {
-                    default: '',
-                },
-            },
-            parseDOM: [
-                {
-                    tag: 'span[data-type="emoji"]',
-                    getAttrs: (dom) => {
-                        if (!(dom instanceof HTMLElement)) {
-                            throw expectDomTypeError(dom);
-                        }
-                        return { html: dom.innerHTML };
-                    },
-                },
-            ],
-            toDOM: (node) => {
-                const span = document.createElement('span');
-                span.classList.add('emoji-wrapper');
-                span.dataset['type'] = 'emoji';
-                utils.themeManager.onFlush(() => {
-                    const style = getStyle();
-                    if (style) {
-                        span.classList.add(style);
-                    }
-                });
-                span.innerHTML = node.attrs['html'];
-                return { dom: span };
-            },
-            parseMarkdown: {
-                match: ({ type }) => type === 'emoji',
-                runner: (state, node, type) => {
-                    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'];
-                    const img = span.querySelector('img');
-                    const title = img?.title;
-                    span.remove();
-                    state.addNode('text', undefined, title);
-                },
-            },
-        }),
-        inputRules: (nodeType) => [
-            new InputRule(input, (state, match, start, end) => {
-                const content = match[0];
-                if (!content) return null;
-                const got = nodeEmoji.get(content);
-                if (!got || content.includes(got)) return null;
+    )
+  return {
+    id: 'emoji',
+    schema: () => ({
+      group: 'inline',
+      inline: true,
+      atom: true,
+      attrs: {
+        html: {
+          default: '',
+        },
+      },
+      parseDOM: [
+        {
+          tag: 'span[data-type="emoji"]',
+          getAttrs: (dom) => {
+            if (!(dom instanceof HTMLElement))
+              throw expectDomTypeError(dom)
 
-                const html = parse(got, options?.twemojiOptions);
+            return { html: dom.innerHTML }
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const span = document.createElement('span')
+        span.classList.add('emoji-wrapper')
+        span.dataset.type = 'emoji'
+        utils.themeManager.onFlush(() => {
+          const style = getStyle()
+          if (style)
+            span.classList.add(style)
+        })
+        span.innerHTML = node.attrs.html
+        return { dom: span }
+      },
+      parseMarkdown: {
+        match: ({ type }) => type === 'emoji',
+        runner: (state, node, type) => {
+          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
+          const img = span.querySelector('img')
+          const title = img?.title
+          span.remove()
+          state.addNode('text', undefined, title)
+        },
+      },
+    }),
+    inputRules: nodeType => [
+      new InputRule(input, (state, match, start, end) => {
+        const content = match[0]
+        if (!content)
+          return null
+        const got = nodeEmoji.get(content)
+        if (!got || content.includes(got))
+          return null
 
-                return state.tr
-                    .setMeta('emoji', true)
-                    .replaceRangeWith(start, end, nodeType.create({ html }))
-                    .scrollIntoView();
-            }),
-        ],
-        remarkPlugins: () => [remarkEmoji as RemarkPlugin, twemojiPlugin(options?.twemojiOptions)],
-        prosePlugins: () => [filter(utils, options?.maxListSize ?? 6, options?.twemojiOptions)],
-    };
-});
+        const html = parse(got, options?.twemojiOptions)
+
+        return state.tr
+          .setMeta('emoji', true)
+          .replaceRangeWith(start, end, nodeType.create({ html }))
+          .scrollIntoView()
+      }),
+    ],
+    remarkPlugins: () => [remarkEmoji as RemarkPlugin, twemojiPlugin(options?.twemojiOptions)],
+    prosePlugins: () => [filter(utils, options?.maxListSize ?? 6, options?.twemojiOptions)],
+  }
+})

package/src/parse.ts

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

package/src/remark-twemoji.ts

@@ -1,69 +1,69 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { RemarkPlugin } from '@milkdown/core';
-import emojiRegex from 'emoji-regex';
-import { Literal, Node, Parent } from 'unist';
+import type { RemarkPlugin } from '@milkdown/core'
+import emojiRegex from 'emoji-regex'
+import type { Literal, Node, Parent } from 'unist'
 
-import { parse } from './parse';
+import { parse } from './parse'
 
-const regex = emojiRegex();
+const regex = emojiRegex()
 
-const isParent = (node: Node): node is Parent => !!(node as Parent).children;
-const isLiteral = (node: Node): node is Literal => !!(node as Literal).value;
+const isParent = (node: Node): node is Parent => !!(node as Parent).children
+const isLiteral = (node: Node): node is Literal => !!(node as Literal).value
 
 function flatMap(ast: Node, fn: (node: Node, index: number, parent: Node | null) => Node[]) {
-    return transform(ast, 0, null)[0];
+  return transform(ast, 0, null)[0]
 
-    function transform(node: Node, index: number, parent: Node | null) {
-        if (isParent(node)) {
-            const out = [];
-            for (let i = 0, n = node.children.length; i < n; i++) {
-                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);
-                            }
-                        }
-                    }
-                }
+  function transform(node: Node, index: number, parent: Node | null) {
+    if (isParent(node)) {
+      const out = []
+      for (let i = 0, n = node.children.length; i < n; i++) {
+        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)
             }
-            node.children = out;
+          }
         }
-
-        return fn(node, index, parent);
+      }
+      node.children = out
     }
+
+    return fn(node, index, parent)
+  }
 }
 
-export const twemojiPlugin: (twemojiOptions?: TwemojiOptions) => RemarkPlugin = (twemojiOptions) => () => {
-    function transformer(tree: Node) {
-        flatMap(tree, (node) => {
-            if (!isLiteral(node)) {
-                return [node];
-            }
-            const value = node.value as string;
-            const output: Literal<string>[] = [];
-            let match;
-            let str = value;
-            while ((match = regex.exec(str))) {
-                const { index } = match;
-                const emoji = match[0];
-                if (emoji) {
-                    if (index > 0) {
-                        output.push({ ...node, value: str.slice(0, index) });
-                    }
-                    output.push({ ...node, value: parse(emoji, twemojiOptions), type: 'emoji' });
-                    str = str.slice(index + emoji.length);
-                }
-                regex.lastIndex = 0;
-            }
-            if (str.length) {
-                output.push({ ...node, value: str });
-            }
-            return output;
-        });
-    }
-    return transformer;
-};
+export const twemojiPlugin: (twemojiOptions?: TwemojiOptions) => RemarkPlugin = twemojiOptions => () => {
+  function transformer(tree: Node) {
+    flatMap(tree, (node) => {
+      if (!isLiteral(node))
+        return [node]
+
+      const value = node.value as string
+      const output: Literal<string>[] = []
+      let match
+      let str = value
+      // eslint-disable-next-line no-cond-assign
+      while ((match = regex.exec(str))) {
+        const { index } = match
+        const emoji = match[0]
+        if (emoji) {
+          if (index > 0)
+            output.push({ ...node, value: str.slice(0, index) })
+
+          output.push({ ...node, value: parse(emoji, twemojiOptions), type: 'emoji' })
+          str = str.slice(index + emoji.length)
+        }
+        regex.lastIndex = 0
+      }
+      if (str.length)
+        output.push({ ...node, value: str })
+
+      return output
+    })
+  }
+  return transformer
+}