@block-kit/plugin 1.0.0 → 1.0.1

package/dist/lib/index-ffc4bb34.js

@@ -1,212 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('@block-kit/react');
-var tslib_es6 = require('./tslib.es6-d44c9a95.js');
-var core = require('@block-kit/core');
-var delta = require('@block-kit/delta');
-var utils = require('@block-kit/utils');
-var ReactDOM = require('react-dom');
-var dom = require('./dom-cb8b8e40.js');
-var is = require('./is-473d664a.js');
-var hooks = require('@block-kit/utils/dist/es/hooks');
-var React = require('react');
-var mention_types_index = require('./mention/types/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-
-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 = React.useRef(null);
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const list = React.useMemo(() => {
-        setActiveIndex(0);
-        if (!props.text)
-            return DATA;
-        return DATA.filter(it => {
-            return it.toUpperCase().includes(props.text.toUpperCase());
-        });
-    }, [props.text]);
-    const onKeydown = hooks.useMemoFn((event, context) => {
-        if (is.isKeyCode(event, utils.KEY_CODE.DOWN)) {
-            const nextIndex = (activeIndex + 1) % list.length;
-            setActiveIndex(nextIndex);
-            const container = ref.current;
-            const child = container && container.children[nextIndex];
-            container && child && dom.scrollIfNeeded(container, child, 5);
-            dom.preventContextEvent(event, context);
-        }
-        if (is.isKeyCode(event, utils.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 && dom.scrollIfNeeded(container, child, 5);
-            dom.preventContextEvent(event, context);
-        }
-        if (is.isKeyCode(event, utils.KEY_CODE.ENTER)) {
-            const item = list[activeIndex];
-            dom.preventContextEvent(event, context);
-            const sel = editor.selection.get();
-            if (!item || !sel)
-                return void 0;
-            const range = new core.Range(controller.point, sel.end);
-            const raw = core.RawRange.fromRange(editor, range);
-            if (!raw)
-                return void 0;
-            const delta$1 = new delta.Delta()
-                .retain(raw.start)
-                .delete(raw.len)
-                .insert(" ", {
-                [mention_types_index.MENTION_KEY]: utils.TRULY,
-                [mention_types_index.MENTION_NAME]: item,
-            });
-            editor.state.apply(delta$1);
-            controller.unmountSuggestPanel();
-        }
-    });
-    React.useEffect(() => {
-        editor.event.on(core.EDITOR_EVENT.KEY_DOWN, onKeydown, 80);
-        return () => {
-            editor.event.off(core.EDITOR_EVENT.KEY_DOWN, onKeydown);
-        };
-    }, [onKeydown, editor.event]);
-    return (jsxRuntime.jsxs("div", { ref: ref, className: "block-kit-suggest-panel", style: { top: props.top, left: props.left }, onMouseDown: utils.preventNativeEvent, children: [list.map((it, index) => (jsxRuntime.jsx("div", { className: utils.cs("block-kit-suggest-item", index === activeIndex && "active"), children: it }, index))), !list.length && jsxRuntime.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 core.Point(0, 0);
-        editor.event.on(core.EDITOR_EVENT.KEY_DOWN, this.onKeydown, 101);
-    }
-    destroy() {
-        this.unmountSuggestPanel();
-        this.editor.event.off(core.EDITOR_EVENT.KEY_DOWN, this.onKeydown);
-        this.editor.event.off(core.EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
-    }
-    onKeydown(event) {
-        if (is.isKeyCode(event, utils.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 = core.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(core.EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
-        }
-        if (this.isMountSuggest && is.isKeyCode(event, utils.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 core.Range(this.point, current.end));
-        if (!ops)
-            return void 0;
-        const text = delta.deltaToText(new delta.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";
-            dom.getMountDOM(this.editor).appendChild(this.mountSuggestNode);
-        }
-        const top = this.rect.top;
-        const left = this.rect.left;
-        const dom$1 = this.mountSuggestNode;
-        this.isMountSuggest = true;
-        ReactDOM__default["default"].render(jsxRuntime.jsx(Suggest, { controller: this, top: top, left: left, text: text }), dom$1);
-    }
-    unmountSuggestPanel() {
-        if (this.isMountSuggest && this.mountSuggestNode) {
-            ReactDOM__default["default"].unmountComponentAtNode(this.mountSuggestNode);
-        }
-        this.mountSuggestNode && this.mountSuggestNode.remove();
-        this.editor.event.off(core.EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
-        this.mountSuggestNode = null;
-        this.isMountSuggest = false;
-    }
-}
-tslib_es6.__decorate([
-    utils.Bind
-], SuggestModule.prototype, "onKeydown", null);
-tslib_es6.__decorate([
-    utils.Bind
-], SuggestModule.prototype, "onSelectionChange", null);
-
-class MentionPlugin extends react.EditorPlugin {
-    constructor(editor) {
-        super();
-        this.editor = editor;
-        this.key = mention_types_index.MENTION_KEY;
-        this.suggest = new SuggestModule(editor);
-    }
-    destroy() {
-        this.suggest.destroy();
-    }
-    match(attrs) {
-        return !!attrs[mention_types_index.MENTION_KEY];
-    }
-    renderLeaf(context) {
-        const attrs = context.attributes || {};
-        const name = attrs[mention_types_index.MENTION_NAME];
-        if (!name || !attrs[mention_types_index.MENTION_KEY])
-            return context.children;
-        return (jsxRuntime.jsx(react.Embed, { className: "block-kit-mention-embed", context: context, children: jsxRuntime.jsxs("span", { className: "block-kit-mention-name", children: ["@", name] }) }));
-    }
-}
-
-exports.MentionPlugin = MentionPlugin;
-exports.SuggestModule = SuggestModule;