@block-kit/plugin 1.0.0

package/dist/es/index-1e46887d.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EditorPlugin, Embed } from '@block-kit/react';
+import { _ as __decorate } from './tslib.es6-83956cc1.js';
+import { Range, RawRange, EDITOR_EVENT, Point, relativeTo } from '@block-kit/core';
+import { Delta, deltaToText } from '@block-kit/delta';
+import { KEY_CODE, TRULY, preventNativeEvent, cs, Bind } from '@block-kit/utils';
+import ReactDOM from 'react-dom';
+import { s as scrollIfNeeded, p as preventContextEvent, g as getMountDOM } from './dom-71a99400.js';
+import { a as isKeyCode } from './is-3de778e2.js';
+import { useMemoFn } from '@block-kit/utils/dist/es/hooks';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { MENTION_KEY, MENTION_NAME } from './mention/types/index.js';
+
+const SUGGEST_OFFSET = 5;
+const DATA = [
+    "Alice",
+    "Bob",
+    "Charlie",
+    "David",
+    "Eve",
+    "Frank",
+    "Grace",
+    "Heidi",
+    "Ivan",
+    "Judy",
+    "Mallory",
+    "Oscar",
+    "Peggy",
+    "Romeo",
+    "Sybil",
+    "Trudy",
+    "Victor",
+    "Walter",
+    "Zoe",
+];
+
+const Suggest = props => {
+    const { controller } = props;
+    const editor = controller.editor;
+    const ref = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const list = useMemo(() => {
+        setActiveIndex(0);
+        if (!props.text)
+            return DATA;
+        return DATA.filter(it => {
+            return it.toUpperCase().includes(props.text.toUpperCase());
+        });
+    }, [props.text]);
+    const onKeydown = useMemoFn((event, context) => {
+        if (isKeyCode(event, KEY_CODE.DOWN)) {
+            const nextIndex = (activeIndex + 1) % list.length;
+            setActiveIndex(nextIndex);
+            const container = ref.current;
+            const child = container && container.children[nextIndex];
+            container && child && scrollIfNeeded(container, child, 5);
+            preventContextEvent(event, context);
+        }
+        if (isKeyCode(event, KEY_CODE.UP)) {
+            const prevIndex = (activeIndex - 1 + list.length) % list.length;
+            setActiveIndex(prevIndex);
+            const container = ref.current;
+            const child = container && container.children[prevIndex];
+            container && child && scrollIfNeeded(container, child, 5);
+            preventContextEvent(event, context);
+        }
+        if (isKeyCode(event, KEY_CODE.ENTER)) {
+            const item = list[activeIndex];
+            preventContextEvent(event, context);
+            const sel = editor.selection.get();
+            if (!item || !sel)
+                return void 0;
+            const range = new Range(controller.point, sel.end);
+            const raw = RawRange.fromRange(editor, range);
+            if (!raw)
+                return void 0;
+            const delta = new Delta()
+                .retain(raw.start)
+                .delete(raw.len)
+                .insert(" ", {
+                [MENTION_KEY]: TRULY,
+                [MENTION_NAME]: item,
+            });
+            editor.state.apply(delta);
+            controller.unmountSuggestPanel();
+        }
+    });
+    useEffect(() => {
+        editor.event.on(EDITOR_EVENT.KEY_DOWN, onKeydown, 80);
+        return () => {
+            editor.event.off(EDITOR_EVENT.KEY_DOWN, onKeydown);
+        };
+    }, [onKeydown, editor.event]);
+    return (jsxs("div", { ref: ref, className: "block-kit-suggest-panel", style: { top: props.top, left: props.left }, onMouseDown: preventNativeEvent, children: [list.map((it, index) => (jsx("div", { className: cs("block-kit-suggest-item", index === activeIndex && "active"), children: it }, index))), !list.length && jsx("div", { className: "block-kit-suggest-empty", children: "No result" })] }));
+};
+
+class SuggestModule {
+    constructor(editor) {
+        this.editor = editor;
+        this.rect = null;
+        this.isMountSuggest = false;
+        this.mountSuggestNode = null;
+        this.point = new Point(0, 0);
+        editor.event.on(EDITOR_EVENT.KEY_DOWN, this.onKeydown, 101);
+    }
+    destroy() {
+        this.unmountSuggestPanel();
+        this.editor.event.off(EDITOR_EVENT.KEY_DOWN, this.onKeydown);
+        this.editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
+    }
+    onKeydown(event) {
+        if (isKeyCode(event, KEY_CODE.D2) && event.shiftKey) {
+            const sel = this.editor.selection.get();
+            const caretRect = this.editor.rect.getRawCaretRect();
+            if (!caretRect || !sel)
+                return void 0;
+            const editorRect = this.editor.rect.getEditorRect();
+            const rect = relativeTo(caretRect, editorRect);
+            // 这里是 CSS 预设的面板高度
+            const PANEL_HEIGHT = 150;
+            if (caretRect.bottom + PANEL_HEIGHT <= window.innerHeight) {
+                // 放置于下方
+                rect.top = rect.bottom + SUGGEST_OFFSET;
+            }
+            else {
+                // 放置于上方
+                rect.top = rect.top - PANEL_HEIGHT - SUGGEST_OFFSET;
+            }
+            this.rect = { top: rect.top, left: rect.left };
+            this.point = sel.start.clone();
+            this.editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
+        }
+        if (this.isMountSuggest && isKeyCode(event, KEY_CODE.ESC)) {
+            this.unmountSuggestPanel();
+        }
+    }
+    onSelectionChange(event) {
+        const { current } = event;
+        if (!current ||
+            !current.isCollapsed ||
+            current.start.line !== this.point.line ||
+            current.start.offset <= this.point.offset) {
+            this.unmountSuggestPanel();
+            return void 0;
+        }
+        const ops = this.editor.collect.getFragment(new Range(this.point, current.end));
+        if (!ops)
+            return void 0;
+        const text = deltaToText(new Delta(ops));
+        this.mountSuggestPanel(text.slice(1));
+    }
+    mountSuggestPanel(text = "") {
+        if (!this.rect)
+            return void 0;
+        if (!this.mountSuggestNode) {
+            this.mountSuggestNode = document.createElement("div");
+            this.mountSuggestNode.dataset.type = "mention";
+            getMountDOM(this.editor).appendChild(this.mountSuggestNode);
+        }
+        const top = this.rect.top;
+        const left = this.rect.left;
+        const dom = this.mountSuggestNode;
+        this.isMountSuggest = true;
+        ReactDOM.render(jsx(Suggest, { controller: this, top: top, left: left, text: text }), dom);
+    }
+    unmountSuggestPanel() {
+        if (this.isMountSuggest && this.mountSuggestNode) {
+            ReactDOM.unmountComponentAtNode(this.mountSuggestNode);
+        }
+        this.mountSuggestNode && this.mountSuggestNode.remove();
+        this.editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
+        this.mountSuggestNode = null;
+        this.isMountSuggest = false;
+    }
+}
+__decorate([
+    Bind
+], SuggestModule.prototype, "onKeydown", null);
+__decorate([
+    Bind
+], SuggestModule.prototype, "onSelectionChange", null);
+
+class MentionPlugin extends EditorPlugin {
+    constructor(editor) {
+        super();
+        this.editor = editor;
+        this.key = MENTION_KEY;
+        this.suggest = new SuggestModule(editor);
+    }
+    destroy() {
+        this.suggest.destroy();
+    }
+    match(attrs) {
+        return !!attrs[MENTION_KEY];
+    }
+    renderLeaf(context) {
+        const attrs = context.attributes || {};
+        const name = attrs[MENTION_NAME];
+        if (!name || !attrs[MENTION_KEY])
+            return context.children;
+        return (jsx(Embed, { className: "block-kit-mention-embed", context: context, children: jsxs("span", { className: "block-kit-mention-name", children: ["@", name] }) }));
+    }
+}
+
+export { MentionPlugin as M, SuggestModule as S };