@block-kit/plugin 1.0.0

package/dist/lib/font-size/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@block-kit/react');
+var utils = require('@block-kit/utils');
+var fontSize_types_index = require('./types/index.js');
+
+class FontSizePlugin extends react.EditorPlugin {
+    destroy() { }
+    constructor(editor) {
+        super();
+        this.key = fontSize_types_index.FONT_SIZE_KEY;
+        editor.command.register(fontSize_types_index.FONT_SIZE_KEY, context => {
+            const sel = editor.selection.get();
+            sel && editor.perform.applyMarks(sel, { [fontSize_types_index.FONT_SIZE_KEY]: context.value });
+        });
+    }
+    match(attrs) {
+        return !!attrs[fontSize_types_index.FONT_SIZE_KEY];
+    }
+    renderLeaf(context) {
+        const attrs = context.attributes || {};
+        const size = attrs[fontSize_types_index.FONT_SIZE_KEY];
+        if (size) {
+            context.style.fontSize = utils.Styles.pixelate(size);
+        }
+        return context.children;
+    }
+}
+
+exports.FontSizePlugin = FontSizePlugin;

package/dist/lib/font-size/types/index.d.ts

@@ -0,0 +1 @@
+export declare const FONT_SIZE_KEY = "font-size";

package/dist/lib/font-size/types/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const FONT_SIZE_KEY = "font-size";
+
+exports.FONT_SIZE_KEY = FONT_SIZE_KEY;

package/dist/lib/heading/index.d.ts

@@ -0,0 +1,13 @@
+import "./styles/index.scss";
+import type { Editor } from "@block-kit/core";
+import type { AttributeMap } from "@block-kit/delta";
+import type { ReactLineContext } from "@block-kit/react";
+import { EditorPlugin } from "@block-kit/react";
+import type { ReactNode } from "react";
+export declare class HeadingPlugin extends EditorPlugin {
+    key: string;
+    destroy(): void;
+    constructor(editor: Editor);
+    match(attrs: AttributeMap): boolean;
+    renderLine(context: ReactLineContext): ReactNode;
+}

package/dist/lib/heading/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@block-kit/react');
+var heading_types_index = require('./types/index.js');
+
+class HeadingPlugin extends react.EditorPlugin {
+    destroy() { }
+    constructor(editor) {
+        super();
+        this.key = heading_types_index.HEADING_KEY;
+        editor.command.register(heading_types_index.HEADING_KEY, context => {
+            const sel = editor.selection.get();
+            sel && editor.perform.applyLineMarks(sel, { [heading_types_index.HEADING_KEY]: context.value });
+        });
+    }
+    match(attrs) {
+        return !!attrs[heading_types_index.HEADING_KEY];
+    }
+    renderLine(context) {
+        const attrs = context.attributes || {};
+        const level = attrs[heading_types_index.HEADING_KEY];
+        switch (level) {
+            case "h1":
+                return jsxRuntime.jsx("div", { className: "block-kit-heading h1", children: context.children });
+            case "h2":
+                return jsxRuntime.jsx("div", { className: "block-kit-heading h2", children: context.children });
+            case "h3":
+                return jsxRuntime.jsx("div", { className: "block-kit-heading h3", children: context.children });
+        }
+        return context.children;
+    }
+}
+
+exports.HeadingPlugin = HeadingPlugin;

package/dist/lib/heading/types/index.d.ts

@@ -0,0 +1 @@
+export declare const HEADING_KEY = "heading";

package/dist/lib/heading/types/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const HEADING_KEY = "heading";
+
+exports.HEADING_KEY = HEADING_KEY;

package/dist/lib/image/index.d.ts

@@ -0,0 +1,21 @@
+import type { CMDPayload, Editor } from "@block-kit/core";
+import type { AttributeMap } from "@block-kit/delta";
+import type { ReactLeafContext } from "@block-kit/react";
+import { EditorPlugin } from "@block-kit/react";
+import type { ReactNode } from "react";
+import { SelectionPlugin } from "../shared/modules/selection";
+export declare class ImagePlugin extends EditorPlugin {
+    protected editor: Editor;
+    key: string;
+    selection: SelectionPlugin;
+    protected input: HTMLInputElement | null;
+    constructor(editor: Editor);
+    destroy(): void;
+    match(attrs: AttributeMap): boolean;
+    renderLeaf(context: ReactLeafContext): ReactNode;
+    protected pickMultiImage(): Promise<FileList | null>;
+    protected uploadImage(file: File): Promise<{
+        src: string;
+    }>;
+    protected onExec(payload: CMDPayload): Promise<void>;
+}

package/dist/lib/image/index.js

@@ -0,0 +1,249 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-d44c9a95.js');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@block-kit/core');
+var delta = require('@block-kit/delta');
+var react = require('@block-kit/react');
+var utils = require('@block-kit/utils');
+var selection = require('../selection-868f15c1.js');
+var dom = require('../dom-cb8b8e40.js');
+var is = require('../is-473d664a.js');
+var image_types_index = require('./types/index.js');
+var icon = require('@arco-design/web-react/icon');
+var webReact = require('@arco-design/web-react');
+var React = require('react');
+
+const Preview = webReact.Image.Preview;
+const ImageWrapper = props => {
+    const { readonly } = react.useReadonly();
+    const [src, setImage] = React.useState("");
+    const ref = React.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 = core.RawRange.fromRange(props.editor, range);
+            if (!raw)
+                return;
+            const onMouseMove = utils.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$1 = new delta.Delta().retain(raw.start).retain(raw.len, {
+                    [image_types_index.IMAGE_WIDTH]: String(Math.max(nextWidth, 100)),
+                    [image_types_index.IMAGE_HEIGHT]: String(Math.max(nextHeight, 100)),
+                });
+                props.editor.state.apply(delta$1, { autoCaret: false });
+            }, 10);
+            const onMouseUp = () => {
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        }
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [src && jsxRuntime.jsx(Preview, { src: src, visible: !!src, onVisibleChange: v => !v && setImage("") }), !readonly && (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: utils.cs(enable && "block-kit-image-resider"), "data-type": "lt", onMouseDown: onMouseDown }), jsxRuntime.jsx("div", { className: utils.cs(enable && "block-kit-image-resider"), "data-type": "rt", onMouseDown: onMouseDown }), jsxRuntime.jsx("div", { className: utils.cs(enable && "block-kit-image-resider"), "data-type": "lb", onMouseDown: onMouseDown }), jsxRuntime.jsx("div", { className: utils.cs(enable && "block-kit-image-resider"), "data-type": "rb", onMouseDown: onMouseDown })] })), jsxRuntime.jsx("div", { ref: ref, onMouseDown: preview, className: utils.cs(enable && "block-kit-image-preview"), children: props.children })] }));
+};
+
+const ImageView = props => {
+    const { selection: selection$1, context, editor } = props;
+    const attrs = context.attributes || {};
+    const src = attrs[image_types_index.IMAGE_SRC];
+    const width = attrs[image_types_index.IMAGE_WIDTH];
+    const height = attrs[image_types_index.IMAGE_HEIGHT];
+    const status = attrs[image_types_index.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_types_index.IMAGE_WIDTH]: String(naturalWidth),
+            [image_types_index.IMAGE_HEIGHT]: String(naturalHeight),
+            [image_types_index.IMAGE_SCALE]: String(scale),
+        };
+        const range = context.leafState.toRange();
+        const rawRange = core.RawRange.fromRange(editor, range);
+        if (!rawRange)
+            return void 0;
+        const delta$1 = new delta.Delta().retain(rawRange.start).retain(rawRange.len, next);
+        editor.state.apply(delta$1, { source: core.APPLY_SOURCE.NO_UNDO, autoCaret: false });
+    };
+    return (jsxRuntime.jsxs(react.Void, { className: "block-kit-image-container", context: context, children: [status === image_types_index.LOADING_STATUS.LOADING && (jsxRuntime.jsx("div", { className: "block-kit-image-loading", children: jsxRuntime.jsx(icon.IconLoading, {}) })), jsxRuntime.jsx(selection.SelectionHOC, { selection: selection$1, leaf: context.leafState, children: jsxRuntime.jsx(ImageWrapper, { editor: props.editor, src: src, leaf: context.leafState, children: jsxRuntime.jsx("img", { className: "block-kit-image", src: src, onLoad: onImageLoad, width: utils.Styles.pixelate(width), height: utils.Styles.pixelate(height) }) }) })] }));
+};
+
+class ImagePlugin extends react.EditorPlugin {
+    constructor(editor) {
+        super();
+        this.editor = editor;
+        this.key = image_types_index.IMAGE_KEY;
+        this.input = null;
+        this.selection = new selection.SelectionPlugin(editor);
+        editor.command.register(image_types_index.IMAGE_KEY, this.onExec);
+    }
+    destroy() {
+        this.input && this.input.remove();
+        this.input = null;
+        this.selection.destroy();
+    }
+    match(attrs) {
+        return !!attrs[image_types_index.IMAGE_KEY];
+    }
+    renderLeaf(context) {
+        return (jsxRuntime.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;
+            dom.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 utils.sleep(2000).then(() => ({
+            src: URL.createObjectURL(file),
+        }));
+    }
+    onExec(payload) {
+        return tslib_es6.__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 = is.isEmptyLine(line);
+            let nextLineIndex = line.index;
+            const delta$1 = new delta.Delta();
+            let index = line.start;
+            if (isEmptyTextLine) {
+                delta$1.retain(line.start);
+            }
+            else {
+                index = index + line.length;
+                delta$1.retain(line.start + line.length);
+            }
+            const packIndex = [];
+            // 处理临时图片文件
+            for (const file of files) {
+                const status = image_types_index.LOADING_STATUS.LOADING;
+                const src = URL.createObjectURL(file);
+                delta$1
+                    .insert(" ", { [image_types_index.IMAGE_KEY]: utils.TRULY, [image_types_index.IMAGE_SRC]: src, [image_types_index.IMAGE_STATUS]: status })
+                    .insertEOL();
+                packIndex.push(index);
+                index = index + 2;
+                nextLineIndex++;
+            }
+            if (!isEmptyTextLine) {
+                nextLineIndex++;
+                delta$1.insertEOL();
+            }
+            const point = new core.Point(nextLineIndex, 0);
+            editor.state.apply(delta$1, { autoCaret: false });
+            editor.selection.set(new core.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(core.RawRange.from(refIndex, 0));
+                // 独立并行上传, 且独立 unpack
+                this.uploadImage(file)
+                    .then(res => {
+                    const rawRange = ref.unpack();
+                    if (!rawRange)
+                        return void 0;
+                    const next = {
+                        [image_types_index.IMAGE_SRC]: res.src,
+                        [image_types_index.IMAGE_STATUS]: image_types_index.LOADING_STATUS.SUCCESS,
+                    };
+                    const change = new delta.Delta().retain(rawRange.start).retain(1, next);
+                    editor.state.apply(change, { source: core.APPLY_SOURCE.NO_UNDO });
+                })
+                    .catch(() => {
+                    const rawRange = ref.unpack();
+                    if (!rawRange)
+                        return void 0;
+                    const next = {
+                        [image_types_index.IMAGE_STATUS]: image_types_index.LOADING_STATUS.FAIL,
+                    };
+                    const change = new delta.Delta().retain(rawRange.start).retain(rawRange.len, next);
+                    editor.state.apply(change, { source: core.APPLY_SOURCE.NO_UNDO, autoCaret: false });
+                });
+            }
+        });
+    }
+}
+tslib_es6.__decorate([
+    utils.Bind
+], ImagePlugin.prototype, "onExec", null);
+
+exports.ImagePlugin = ImagePlugin;

package/dist/lib/image/types/index.d.ts

@@ -0,0 +1,12 @@
+export declare const LOADING_STATUS: {
+    readonly LOADING: "1";
+    readonly SUCCESS: "2";
+    readonly FAIL: "3";
+};
+export declare const MIN_WIDTH = 100;
+export declare const IMAGE_KEY = "image";
+export declare const IMAGE_SRC = "src";
+export declare const IMAGE_WIDTH = "width";
+export declare const IMAGE_SCALE = "scale";
+export declare const IMAGE_HEIGHT = "height";
+export declare const IMAGE_STATUS = "status";

package/dist/lib/image/types/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const LOADING_STATUS = {
+    LOADING: "1",
+    SUCCESS: "2",
+    FAIL: "3",
+};
+const MIN_WIDTH = 100;
+const IMAGE_KEY = "image";
+const IMAGE_SRC = "src";
+const IMAGE_WIDTH = "width";
+const IMAGE_SCALE = "scale";
+const IMAGE_HEIGHT = "height";
+const IMAGE_STATUS = "status";
+
+exports.IMAGE_HEIGHT = IMAGE_HEIGHT;
+exports.IMAGE_KEY = IMAGE_KEY;
+exports.IMAGE_SCALE = IMAGE_SCALE;
+exports.IMAGE_SRC = IMAGE_SRC;
+exports.IMAGE_STATUS = IMAGE_STATUS;
+exports.IMAGE_WIDTH = IMAGE_WIDTH;
+exports.LOADING_STATUS = LOADING_STATUS;
+exports.MIN_WIDTH = MIN_WIDTH;

package/dist/lib/image/view/image.d.ts

@@ -0,0 +1,10 @@
+import "../styles/index.scss";
+import type { Editor } from "@block-kit/core";
+import type { ReactLeafContext } from "@block-kit/react";
+import type { FC } from "react";
+import type { SelectionPlugin } from "../../shared/modules/selection";
+export declare const ImageView: FC<{
+    selection: SelectionPlugin;
+    context: ReactLeafContext;
+    editor: Editor;
+}>;

package/dist/lib/image/view/wrapper.d.ts

@@ -0,0 +1,10 @@
+import "../styles/wrapper.scss";
+import type { Editor } from "@block-kit/core";
+import type { LeafState } from "@block-kit/core";
+import type { FC } from "react";
+export declare const ImageWrapper: FC<{
+    selected?: boolean;
+    src: string;
+    editor: Editor;
+    leaf: LeafState;
+}>;

package/dist/lib/indent/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Editor } from "@block-kit/core";
+import type { AttributeMap } from "@block-kit/delta";
+import type { ReactLineContext } from "@block-kit/react";
+import { EditorPlugin } from "@block-kit/react";
+export declare class IndentPlugin extends EditorPlugin {
+    protected editor: Editor;
+    key: string;
+    constructor(editor: Editor);
+    destroy(): void;
+    match(attrs: AttributeMap): boolean;
+    renderLine(context: ReactLineContext): React.ReactNode;
+    protected onKeydown(event: KeyboardEvent): void;
+}

package/dist/lib/indent/index.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-d44c9a95.js');
+var core = require('@block-kit/core');
+var delta = require('@block-kit/delta');
+var react = require('@block-kit/react');
+var utils = require('@block-kit/utils');
+var is = require('../is-473d664a.js');
+var indent_types_index = require('./types/index.js');
+
+class IndentPlugin extends react.EditorPlugin {
+    constructor(editor) {
+        super();
+        this.editor = editor;
+        this.key = indent_types_index.INDENT_LEVEL_KEY;
+        // 保证优先级需要大于相关插件, 例如有序列表插件
+        editor.event.on(core.EDITOR_EVENT.KEY_DOWN, this.onKeydown, 90);
+    }
+    destroy() {
+        this.editor.event.off(core.EDITOR_EVENT.KEY_DOWN, this.onKeydown);
+    }
+    match(attrs) {
+        return !!attrs[indent_types_index.INDENT_LEVEL_KEY];
+    }
+    renderLine(context) {
+        const attrs = context.attributes;
+        const level = Number(attrs[indent_types_index.INDENT_LEVEL_KEY]);
+        if (!isNaN(level)) {
+            context.style.paddingLeft = `${level * 25}px`;
+        }
+        return context.children;
+    }
+    onKeydown(event) {
+        if (!is.isKeyCode(event, utils.KEY_CODE.TAB))
+            return void 0;
+        const sel = this.editor.selection.get();
+        if (!sel)
+            return void 0;
+        const { start, end } = sel;
+        const block = this.editor.state.block;
+        const rawPoint = core.RawPoint.fromPoint(this.editor, core.Point.from(start.line, 0));
+        if (!rawPoint)
+            return void 0;
+        const delta$1 = new delta.Delta();
+        delta$1.retain(rawPoint.offset);
+        for (let i = start.line; i <= end.line; i++) {
+            const lineState = block.getLine(i);
+            if (!lineState)
+                break;
+            delta$1.retain(lineState.length - 1);
+            const attrs = lineState.attributes;
+            const current = Number(attrs[indent_types_index.INDENT_LEVEL_KEY]) || 0;
+            const ins = event.shiftKey ? -1 : 1;
+            // 限制缩进的最大值与最小值
+            const next = Math.min(Math.max(0, current + ins), 15);
+            delta$1.retain(1, {
+                [indent_types_index.INDENT_LEVEL_KEY]: next ? next.toString() : "",
+            });
+        }
+        this.editor.state.apply(delta$1);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+tslib_es6.__decorate([
+    utils.Bind
+], IndentPlugin.prototype, "onKeydown", null);
+
+exports.IndentPlugin = IndentPlugin;

package/dist/lib/indent/types/index.d.ts

@@ -0,0 +1 @@
+export declare const INDENT_LEVEL_KEY = "indent-level";

package/dist/lib/indent/types/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const INDENT_LEVEL_KEY = "indent-level";
+
+exports.INDENT_LEVEL_KEY = INDENT_LEVEL_KEY;