@block-kit/plugin 1.0.0 → 1.0.3

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

@@ -1,205 +0,0 @@
-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 };