@milkdown/plugin-emoji 4.11.2 → 4.13.2

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@milkdown/plugin-emoji",
-  "version": "4.11.2",
+  "version": "4.13.2",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "milkdown",

package/src/constant.ts

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

package/src/filter/helper.ts

@@ -0,0 +1,84 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Emoji } from 'node-emoji';
+import { EditorView } from 'prosemirror-view';
+
+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,
+) => {
+    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;
+    if (full.test(textBefore)) {
+        return false;
+    }
+    const regex = part.exec(textBefore);
+    if (regex && 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,
+) => {
+    dropDown.innerHTML = '';
+    list.forEach(({ emoji, key }, i) => {
+        const container = document.createElement('div');
+        container.className = 'milkdown-emoji-filter_item';
+
+        const emojiSpan = document.createElement('span');
+        emojiSpan.innerHTML = parse(emoji);
+
+        emojiSpan.className = 'milkdown-emoji-filter_item-emoji';
+        const keySpan = document.createElement('span');
+        keySpan.textContent = ':' + key + ':';
+        keySpan.className = 'milkdown-emoji-filter_item-key';
+
+        container.appendChild(emojiSpan);
+        container.appendChild(keySpan);
+        dropDown.appendChild(container);
+
+        if (i === 0) {
+            container.classList.add('active');
+            setActive(container);
+        }
+
+        container.addEventListener('mouseenter', (e) => {
+            if ($active) {
+                $active.classList.remove('active');
+            }
+            const { target } = e;
+            if (!(target instanceof HTMLElement)) return;
+            target.classList.add('active');
+            setActive(target);
+        });
+        container.addEventListener('mouseleave', (e) => {
+            const { target } = e;
+            if (!(target instanceof HTMLElement)) return;
+            target.classList.remove('active');
+        });
+        container.addEventListener('mousedown', (e) => {
+            onConfirm();
+            e.preventDefault();
+        });
+    });
+};

package/src/filter/index.ts

@@ -0,0 +1,157 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { calculateNodePosition, createProsePlugin, Utils } from '@milkdown/utils';
+import { search } from 'node-emoji';
+import { Plugin } from 'prosemirror-state';
+
+import { checkTrigger, renderDropdownList } from './helper';
+import { injectStyle } from './style';
+
+const filterPlugin = (utils: Utils) => {
+    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({
+        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 new Error();
+            }
+
+            const dropDown = document.createElement('div');
+            const style = utils.getStyle(injectStyle);
+
+            if (style) {
+                dropDown.classList.add(style);
+            }
+
+            dropDown.classList.add('milkdown-emoji-filter', 'hide');
+
+            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);
+            parentNode.addEventListener('keydown', (e) => {
+                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;
+                }
+            });
+            parentNode.addEventListener('mousedown', (e) => {
+                if (!trigger) return;
+
+                e.stopPropagation();
+                off();
+                dropDown.classList.add('hide');
+            });
+
+            return {
+                update: (view) => {
+                    if (!trigger) {
+                        dropDown.classList.add('hide');
+                        return null;
+                    }
+                    const result = search(_search).slice(0, 5);
+                    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;
+                    });
+                    calculateNodePosition(view, dropDown, (selected, target, parent) => {
+                        const start = view.coordsAtPos(_from);
+                        let left = start.left - parent.left;
+                        let top = selected.bottom - parent.top + 14;
+
+                        if (left < 0) {
+                            left = 0;
+                        }
+
+                        if (window.innerHeight - start.bottom < target.height) {
+                            top = selected.top - parent.top - target.height - 14;
+                        }
+                        return [top, left];
+                    });
+
+                    return null;
+                },
+            };
+        },
+    });
+};
+
+export const filter = createProsePlugin((_, utils) => filterPlugin(utils));

package/src/filter/style.ts

@@ -0,0 +1,41 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import type { ThemeTool } from '@milkdown/core';
+
+export const injectStyle = ({ size, mixin, palette, font }: ThemeTool) => {
+    return css`
+        position: absolute;
+        &.hide {
+            display: none;
+        }
+
+        ${mixin.border?.()};
+        border-radius: ${size.radius};
+        background: ${palette('surface')};
+        ${mixin.shadow?.()};
+
+        .milkdown-emoji-filter_item {
+            display: flex;
+            gap: 0.5rem;
+            height: 2.25rem;
+            padding: 0 1rem;
+            align-items: center;
+            justify-content: flex-start;
+            cursor: pointer;
+            line-height: 2;
+            font-family: ${font.typography};
+            font-size: 0.875rem;
+            &.active {
+                background: ${palette('secondary', 0.12)};
+                color: ${palette('primary')};
+            }
+        }
+
+        .emoji {
+            height: 1em;
+            width: 1em;
+            margin: 0 0.05em 0 0.1em;
+            vertical-align: -0.1em;
+        }
+    `;
+};

package/src/index.ts

@@ -0,0 +1,16 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { remarkPluginFactory } from '@milkdown/core';
+import { AtomList } from '@milkdown/utils';
+import remarkEmoji from 'remark-emoji';
+
+import { filter } from './filter';
+import { emojiNode } from './node';
+import { picker } from './picker';
+import { twemojiPlugin } from './remark-twemoji';
+
+export const remarkPlugin = remarkPluginFactory([remarkEmoji, twemojiPlugin]);
+export const emoji = AtomList.create([remarkPlugin, emojiNode(), filter(), picker()]);
+
+export { filter } from './filter';
+export { emojiNode } from './node';
+export { picker } from './picker';

package/src/node.ts

@@ -0,0 +1,89 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { createNode } from '@milkdown/utils';
+import nodeEmoji from 'node-emoji';
+import { InputRule } from 'prosemirror-inputrules';
+
+import { input } from './constant';
+import { parse } from './parse';
+
+export const emojiNode = createNode((_, utils) => {
+    const style = utils.getStyle(
+        () => css`
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+
+            .emoji {
+                height: 1em;
+                width: 1em;
+                margin: 0 0.05em 0 0.1em;
+                vertical-align: -0.1em;
+            }
+        `,
+    );
+    return {
+        id: 'emoji',
+        schema: {
+            group: 'inline',
+            inline: true,
+            selectable: false,
+            marks: '',
+            attrs: {
+                html: {
+                    default: '',
+                },
+            },
+            parseDOM: [
+                {
+                    tag: 'span[data-type="emoji"]',
+                    getAttrs: (dom) => {
+                        if (!(dom instanceof HTMLElement)) {
+                            throw new Error();
+                        }
+                        return { html: dom.innerHTML };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const span = document.createElement('span');
+                span.dataset.type = 'emoji';
+                if (style) {
+                    span.classList.add(style);
+                }
+                span.classList.add('emoji-wrapper');
+                span.innerHTML = node.attrs.html;
+                return { dom: span };
+            },
+        },
+        parser: {
+            match: ({ type }) => type === 'emoji',
+            runner: (state, node, type) => {
+                state.addNode(type, { html: node.value as string });
+            },
+        },
+        serializer: {
+            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;
+
+                const html = parse(got);
+
+                return state.tr.replaceRangeWith(start, end, nodeType.create({ html })).scrollIntoView();
+            }),
+        ],
+    };
+});

package/src/parse.ts

@@ -0,0 +1,4 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import twemoji from 'twemoji';
+
+export const parse = (emoji: string) => twemoji.parse(emoji, { attributes: (text) => ({ title: text }) });

package/src/picker.ts

@@ -0,0 +1,129 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { injectGlobal } from '@emotion/css';
+import { EmojiButton } from '@joeattardi/emoji-button';
+import { createProsePlugin, Utils } from '@milkdown/utils';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
+
+import { parse } from './parse';
+
+const keyword = ':emoji:';
+
+const checkTrigger = (
+    view: EditorView,
+    from: number,
+    to: number,
+    text: string,
+    setRange: (from: number, to: number) => void,
+) => {
+    if (view.composing) return false;
+    const { state } = view;
+    const $from = state.doc.resolve(from);
+    if ($from.parent.type.spec.code) return false;
+    const textBefore =
+        $from.parent.textBetween($from.parentOffset - keyword.length + 1, $from.parentOffset, undefined, '\ufffc') +
+        text;
+    if (textBefore === keyword) {
+        setRange(from - keyword.length + 1, to + 1);
+        return true;
+    }
+    return false;
+};
+
+const pickerPlugin = (utils: Utils) => {
+    let trigger = false;
+    const holder = document.createElement('span');
+    let _from = 0;
+    let _to = 0;
+    const off = () => {
+        trigger = false;
+        _from = 0;
+        _to = 0;
+    };
+
+    const plugin = new Plugin({
+        props: {
+            handleKeyDown() {
+                off();
+                return false;
+            },
+            handleClick() {
+                off();
+                return false;
+            },
+            handleTextInput(view, from, to, text) {
+                trigger = checkTrigger(view, from, to, text, (from, to) => {
+                    _from = from;
+                    _to = to;
+                });
+
+                if (!trigger) {
+                    off();
+                }
+                return false;
+            },
+            decorations(state) {
+                if (!trigger) return null;
+
+                return DecorationSet.create(state.doc, [Decoration.widget(state.selection.to, holder)]);
+            },
+        },
+        view: (editorView) => {
+            const { parentNode } = editorView.dom;
+            if (!parentNode) {
+                throw new Error();
+            }
+            utils.getStyle(({ palette, font }) => {
+                const css = injectGlobal;
+                css`
+                    .emoji-picker {
+                        --dark-search-background-color: ${palette('surface')} !important;
+                        --dark-text-color: ${palette('neutral', 0.87)} !important;
+                        --dark-background-color: ${palette('background')} !important;
+                        --dark-border-color: ${palette('shadow')} !important;
+                        --dark-hover-color: ${palette('secondary', 0.12)} !important;
+                        --dark-blue-color: ${palette('primary')} !important;
+                        --dark-search-icon-color: ${palette('primary')} !important;
+                        --dark-category-button-color: ${palette('secondary', 0.4)} !important;
+                        --font: ${font.typography} !important;
+                        --font-size: 1rem !important;
+                    }
+                `;
+            });
+            const emojiPicker = new EmojiButton({
+                rootElement: parentNode as HTMLElement,
+                autoFocusSearch: false,
+                style: 'twemoji',
+                theme: 'dark',
+                zIndex: 99,
+            });
+            emojiPicker.on('emoji', (selection) => {
+                const start = _from;
+                const end = _to;
+                off();
+                const html = parse(selection.emoji);
+                const node = editorView.state.schema.node('emoji', { html });
+                const { tr } = editorView.state;
+
+                editorView.dispatch(tr.replaceRangeWith(start, end, node));
+            });
+            return {
+                update: () => {
+                    if (!trigger) {
+                        emojiPicker.hidePicker();
+                        return null;
+                    }
+                    emojiPicker.showPicker(holder);
+                    return null;
+                },
+                destroy: () => {
+                    emojiPicker.destroyPicker();
+                },
+            };
+        },
+    });
+
+    return plugin;
+};
+
+export const picker = createProsePlugin((_, utils) => pickerPlugin(utils));

package/src/remark-twemoji.ts

@@ -0,0 +1,59 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import emojiRegex from 'emoji-regex';
+import { Literal, Node, Parent } from 'unist';
+
+import { parse } from './parse';
+
+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;
+
+function flatMap(ast: Node, fn: (node: Node, index: number, parent: Node | null) => Node[]) {
+    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 xs = transform(node.children[i], i, node);
+                if (xs) {
+                    for (let j = 0, m = xs.length; j < m; j++) {
+                        out.push(xs[j]);
+                    }
+                }
+            }
+            node.children = out;
+        }
+
+        return fn(node, index, parent);
+    }
+}
+
+export const twemojiPlugin = () => {
+    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 (index > 0) {
+                    output.push({ ...node, value: str.slice(0, index) });
+                }
+                output.push({ ...node, value: parse(emoji), type: 'emoji' });
+                str = str.slice(index + emoji.length);
+            }
+            if (str.length) {
+                output.push({ ...node, value: str });
+            }
+            return output;
+        });
+    }
+    return transformer;
+};