@block-kit/plugin 1.0.0 → 1.0.1

package/dist/es/image/index.js

@@ -1,245 +0,0 @@
-import { _ as __decorate, a as __awaiter } from '../tslib.es6-83956cc1.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { RawRange, APPLY_SOURCE, Point, Range } from '@block-kit/core';
-import { Delta } from '@block-kit/delta';
-import { useReadonly, Void, EditorPlugin } from '@block-kit/react';
-import { cs, throttle, Styles, Bind, sleep, TRULY } from '@block-kit/utils';
-import { S as SelectionHOC, a as SelectionPlugin } from '../selection-badfb0bc.js';
-import { g as getMountDOM } from '../dom-71a99400.js';
-import { i as isEmptyLine } from '../is-3de778e2.js';
-import { IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_SRC, IMAGE_STATUS, LOADING_STATUS, IMAGE_SCALE, IMAGE_KEY } from './types/index.js';
-import { IconLoading } from '@arco-design/web-react/icon';
-import { Image } from '@arco-design/web-react';
-import { useState, useRef, Fragment as Fragment$1 } from 'react';
-
-const Preview = Image.Preview;
-const ImageWrapper = props => {
-    const { readonly } = useReadonly();
-    const [src, setImage] = useState("");
-    const ref = useRef(null);
-    const enable = readonly || props.selected;
-    const preview = (e) => {
-        // https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button
-        if (e.button !== 0)
-            return;
-        enable && setImage(props.src || "");
-    };
-    const onMouseDown = (e) => {
-        const resider = e.target;
-        if (!ref.current)
-            return void 0;
-        // 这里直接取图片的宽高，若取原始图宽高会导致拖拽缩放问题
-        const width = ref.current.clientWidth;
-        const height = ref.current.clientHeight;
-        e.stopPropagation();
-        e.preventDefault();
-        if (resider instanceof HTMLDivElement && resider.dataset.type && width && height) {
-            const startX = e.clientX;
-            const startY = e.clientY;
-            const startWidth = Number(width);
-            const startHeight = Number(height);
-            const ratio = startWidth / startHeight;
-            const type = resider.dataset.type;
-            const range = props.leaf.toRange();
-            const raw = RawRange.fromRange(props.editor, range);
-            if (!raw)
-                return;
-            const onMouseMove = throttle((event) => {
-                const currentX = event.clientX;
-                const currentY = event.clientY;
-                const diffX = currentX - startX;
-                const diffY = currentY - startY;
-                let nextWidth = startWidth;
-                let nextHeight = startHeight;
-                switch (type) {
-                    case "lt":
-                        nextWidth = nextWidth - diffX;
-                        nextHeight = nextHeight - diffY;
-                        break;
-                    case "rt":
-                        nextWidth = nextWidth + diffX;
-                        nextHeight = nextHeight - diffY;
-                        break;
-                    case "lb":
-                        nextWidth = nextWidth - diffX;
-                        nextHeight = nextHeight + diffY;
-                        break;
-                    case "rb":
-                        nextWidth = nextWidth + diffX;
-                        nextHeight = nextHeight + diffY;
-                        break;
-                }
-                if (nextWidth / nextHeight > ratio) {
-                    nextHeight = nextWidth / ratio;
-                }
-                else {
-                    nextWidth = nextHeight * ratio;
-                }
-                const delta = new Delta().retain(raw.start).retain(raw.len, {
-                    [IMAGE_WIDTH]: String(Math.max(nextWidth, 100)),
-                    [IMAGE_HEIGHT]: String(Math.max(nextHeight, 100)),
-                });
-                props.editor.state.apply(delta, { autoCaret: false });
-            }, 10);
-            const onMouseUp = () => {
-                document.removeEventListener("mousemove", onMouseMove);
-                document.removeEventListener("mouseup", onMouseUp);
-            };
-            document.addEventListener("mousemove", onMouseMove);
-            document.addEventListener("mouseup", onMouseUp);
-        }
-    };
-    return (jsxs(Fragment, { children: [src && jsx(Preview, { src: src, visible: !!src, onVisibleChange: v => !v && setImage("") }), !readonly && (jsxs(Fragment$1, { children: [jsx("div", { className: cs(enable && "block-kit-image-resider"), "data-type": "lt", onMouseDown: onMouseDown }), jsx("div", { className: cs(enable && "block-kit-image-resider"), "data-type": "rt", onMouseDown: onMouseDown }), jsx("div", { className: cs(enable && "block-kit-image-resider"), "data-type": "lb", onMouseDown: onMouseDown }), jsx("div", { className: cs(enable && "block-kit-image-resider"), "data-type": "rb", onMouseDown: onMouseDown })] })), jsx("div", { ref: ref, onMouseDown: preview, className: cs(enable && "block-kit-image-preview"), children: props.children })] }));
-};
-
-const ImageView = props => {
-    const { selection, context, editor } = props;
-    const attrs = context.attributes || {};
-    const src = attrs[IMAGE_SRC];
-    const width = attrs[IMAGE_WIDTH];
-    const height = attrs[IMAGE_HEIGHT];
-    const status = attrs[IMAGE_STATUS];
-    const onImageLoad = event => {
-        const target = event.target;
-        if (width && height)
-            return void 0;
-        const { naturalHeight, naturalWidth } = target;
-        const scale = naturalHeight / naturalWidth;
-        const next = {
-            [IMAGE_WIDTH]: String(naturalWidth),
-            [IMAGE_HEIGHT]: String(naturalHeight),
-            [IMAGE_SCALE]: String(scale),
-        };
-        const range = context.leafState.toRange();
-        const rawRange = RawRange.fromRange(editor, range);
-        if (!rawRange)
-            return void 0;
-        const delta = new Delta().retain(rawRange.start).retain(rawRange.len, next);
-        editor.state.apply(delta, { source: APPLY_SOURCE.NO_UNDO, autoCaret: false });
-    };
-    return (jsxs(Void, { className: "block-kit-image-container", context: context, children: [status === LOADING_STATUS.LOADING && (jsx("div", { className: "block-kit-image-loading", children: jsx(IconLoading, {}) })), jsx(SelectionHOC, { selection: selection, leaf: context.leafState, children: jsx(ImageWrapper, { editor: props.editor, src: src, leaf: context.leafState, children: jsx("img", { className: "block-kit-image", src: src, onLoad: onImageLoad, width: Styles.pixelate(width), height: Styles.pixelate(height) }) }) })] }));
-};
-
-class ImagePlugin extends EditorPlugin {
-    constructor(editor) {
-        super();
-        this.editor = editor;
-        this.key = IMAGE_KEY;
-        this.input = null;
-        this.selection = new SelectionPlugin(editor);
-        editor.command.register(IMAGE_KEY, this.onExec);
-    }
-    destroy() {
-        this.input && this.input.remove();
-        this.input = null;
-        this.selection.destroy();
-    }
-    match(attrs) {
-        return !!attrs[IMAGE_KEY];
-    }
-    renderLeaf(context) {
-        return (jsx(ImageView, { editor: this.editor, context: context, selection: this.selection }));
-    }
-    pickMultiImage() {
-        let imageInput = this.input;
-        if (!imageInput) {
-            imageInput = document.createElement("input");
-            imageInput.setAttribute("type", "file");
-            imageInput.setAttribute("accept", "image/png, image/jpeg, image/svg+xml");
-            imageInput.hidden = true;
-            imageInput.setAttribute("multiple", "true");
-            this.input = imageInput;
-            getMountDOM(this.editor).append(imageInput);
-        }
-        return new Promise(resolve => {
-            imageInput.onchange = e => {
-                const target = e.target;
-                const files = target.files;
-                resolve(files);
-            };
-            imageInput.click();
-        });
-    }
-    uploadImage(file) {
-        this.editor.logger.debug("Upload Image", file);
-        return sleep(2000).then(() => ({
-            src: URL.createObjectURL(file),
-        }));
-    }
-    onExec(payload) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const files = yield this.pickMultiImage();
-            const editor = this.editor;
-            const sel = editor.selection.get() || payload.range;
-            const line = sel && editor.state.block.getLine(sel.start.line);
-            if (!sel || !line || !files)
-                return void 0;
-            // 开始计算索引值
-            const isEmptyTextLine = isEmptyLine(line);
-            let nextLineIndex = line.index;
-            const delta = new Delta();
-            let index = line.start;
-            if (isEmptyTextLine) {
-                delta.retain(line.start);
-            }
-            else {
-                index = index + line.length;
-                delta.retain(line.start + line.length);
-            }
-            const packIndex = [];
-            // 处理临时图片文件
-            for (const file of files) {
-                const status = LOADING_STATUS.LOADING;
-                const src = URL.createObjectURL(file);
-                delta
-                    .insert(" ", { [IMAGE_KEY]: TRULY, [IMAGE_SRC]: src, [IMAGE_STATUS]: status })
-                    .insertEOL();
-                packIndex.push(index);
-                index = index + 2;
-                nextLineIndex++;
-            }
-            if (!isEmptyTextLine) {
-                nextLineIndex++;
-                delta.insertEOL();
-            }
-            const point = new Point(nextLineIndex, 0);
-            editor.state.apply(delta, { autoCaret: false });
-            editor.selection.set(new Range(point, point));
-            // 正式开始上传文件
-            // 注意这里需要先 apply 再上传文件，否则 pack 的索引会被影响到
-            for (let i = 0; i < packIndex.length; i++) {
-                const file = files[i];
-                const refIndex = packIndex[i];
-                const ref = editor.ref.pack(RawRange.from(refIndex, 0));
-                // 独立并行上传, 且独立 unpack
-                this.uploadImage(file)
-                    .then(res => {
-                    const rawRange = ref.unpack();
-                    if (!rawRange)
-                        return void 0;
-                    const next = {
-                        [IMAGE_SRC]: res.src,
-                        [IMAGE_STATUS]: LOADING_STATUS.SUCCESS,
-                    };
-                    const change = new Delta().retain(rawRange.start).retain(1, next);
-                    editor.state.apply(change, { source: APPLY_SOURCE.NO_UNDO });
-                })
-                    .catch(() => {
-                    const rawRange = ref.unpack();
-                    if (!rawRange)
-                        return void 0;
-                    const next = {
-                        [IMAGE_STATUS]: LOADING_STATUS.FAIL,
-                    };
-                    const change = new Delta().retain(rawRange.start).retain(rawRange.len, next);
-                    editor.state.apply(change, { source: APPLY_SOURCE.NO_UNDO, autoCaret: false });
-                });
-            }
-        });
-    }
-}
-__decorate([
-    Bind
-], ImagePlugin.prototype, "onExec", null);
-
-export { ImagePlugin };

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 };