@yltrcc/vditor 0.0.1

package/src/assets/less/index.less

@@ -0,0 +1,88 @@
+@errorColor: #d23f31;
+@blurColor: #4285f4;
+
+@font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans",
+  "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
+  "EmojiSymbols";
+@font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier,
+  monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+  "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+
+@transition: all 0.15s ease-in-out;
+
+@max-width: 520px;
+
+.vditor {
+  --border-color: #d1d5da;
+  --second-color: rgba(88, 96, 105, 0.36);
+
+  --panel-background-color: #fff;
+  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+  --toolbar-background-color: #f6f8fa;
+  --toolbar-icon-color: #586069;
+  --toolbar-icon-hover-color: @blurColor;
+  --toolbar-height: 35px;
+  --toolbar-divider-margin-top: 8px;
+
+  --textarea-background-color: #fafbfc;
+  --textarea-text-color: #24292e;
+
+  --resize-icon-color: var(--toolbar-icon-color);
+  --resize-background-color: var(--toolbar-background-color);
+  --resize-hover-icon-color: var(--panel-background-color);
+  --resize-hover-background-color: var(--toolbar-icon-hover-color);
+
+  --count-background-color: rgba(27, 31, 35, 0.05);
+  --heading-border-color: #eaecef;
+  --blockquote-color: #6a737d;
+
+  --ir-heading-color: #660e7a;
+  --ir-title-color: #808080;
+  --ir-bi-color: #0033b3;
+  --ir-link-color: #008000;
+  --ir-bracket-color: #0000ff;
+  --ir-paren-color: #008000;
+
+  &--dark {
+    --border-color: #141414;
+    --second-color: rgba(185, 185, 185, 0.36);
+
+    --panel-background-color: #24292e;
+    --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
+
+    --toolbar-background-color: #1d2125;
+    --toolbar-icon-color: #b9b9b9;
+    --toolbar-icon-hover-color: #fff;
+
+    --textarea-background-color: #2f363d;
+    --textarea-text-color: #d1d5da;
+
+    --resize-icon-color: var(--border-color);
+    --resize-background-color: var(--second-color);
+    --resize-hover-icon-color: var(--toolbar-icon-hover-color);
+    --resize-hover-background-color: rgba(185, 185, 185, 0.86);
+
+    --count-background-color: rgba(@blurColor, 0.36);
+    --heading-border-color: var(--textarea-text-color);
+    --blockquote-color: var(--toolbar-icon-color);
+
+    --ir-heading-color: #9876aa;
+    --ir-title-color: #808080;
+    --ir-bi-color: #cc7832;
+    --ir-link-color: #ffc66d;
+    --ir-bracket-color: #287bde;
+    --ir-paren-color: #6a8759;
+  }
+}
+
+@import "_tooltipped";
+@import "_panel";
+@import "_toolbar";
+@import "_content";
+@import "_hint";
+@import "_reset";
+@import "_wysiwyg";
+@import "_ir";
+@import "_sv";

package/src/index.ts

@@ -0,0 +1,566 @@
+import "./assets/less/index.less";
+import VditorMethod from "./method";
+import {Constants, VDITOR_VERSION} from "./ts/constants";
+import {DevTools} from "./ts/devtools/index";
+import {Hint} from "./ts/hint/index";
+import {IR} from "./ts/ir/index";
+import {input as irInput} from "./ts/ir/input";
+import {processAfterRender} from "./ts/ir/process";
+import {getHTML} from "./ts/markdown/getHTML";
+import {getMarkdown} from "./ts/markdown/getMarkdown";
+import {setLute} from "./ts/markdown/setLute";
+import {Outline} from "./ts/outline/index";
+import {Preview} from "./ts/preview/index";
+import {Resize} from "./ts/resize/index";
+import {Editor} from "./ts/sv/index";
+import {inputEvent} from "./ts/sv/inputEvent";
+import {processAfterRender as processSVAfterRender, processPaste} from "./ts/sv/process";
+import {Tip} from "./ts/tip/index";
+import {Toolbar} from "./ts/toolbar/index";
+import {disableToolbar, hidePanel} from "./ts/toolbar/setToolbar";
+import {enableToolbar} from "./ts/toolbar/setToolbar";
+import {initUI, UIUnbindListener} from "./ts/ui/initUI";
+import {setCodeTheme} from "./ts/ui/setCodeTheme";
+import {setContentTheme} from "./ts/ui/setContentTheme";
+import {setPreviewMode} from "./ts/ui/setPreviewMode";
+import {setTheme} from "./ts/ui/setTheme";
+import {Undo} from "./ts/undo/index";
+import {Upload} from "./ts/upload/index";
+import {addScript, addScriptSync} from "./ts/util/addScript";
+import {getSelectText} from "./ts/util/getSelectText";
+import {Options} from "./ts/util/Options";
+import {processCodeRender} from "./ts/util/processCode";
+import {getCursorPosition, getEditorRange, insertHTML} from "./ts/util/selection";
+import {afterRenderEvent} from "./ts/wysiwyg/afterRenderEvent";
+import {WYSIWYG} from "./ts/wysiwyg/index";
+import {input} from "./ts/wysiwyg/input";
+import {renderDomByMd} from "./ts/wysiwyg/renderDomByMd";
+import {execAfterRender, insertEmptyBlock} from "./ts/util/fixBrowserBehavior";
+import {accessLocalStorage} from "./ts/util/compatibility";
+
+class Vditor extends VditorMethod {
+    public readonly version: string;
+    public vditor: IVditor;
+    private isDestroyed = false;
+
+    /**
+     * @param id 要挂载 Vditor 的元素或者元素 ID。
+     * @param options Vditor 参数
+     */
+    constructor(id: string | HTMLElement, options?: IOptions) {
+        super();
+        this.version = VDITOR_VERSION;
+
+        if (typeof id === "string") {
+            if (!options) {
+                options = {
+                    cache: {
+                        id: `vditor${id}`,
+                    },
+                };
+            } else if (!options.cache) {
+                options.cache = { id: `vditor${id}` };
+            } else if (!options.cache.id) {
+                options.cache.id = `vditor${id}`;
+            }
+            if (!document.getElementById(id)) {
+                this.showErrorTip(`Failed to get element by id: ${id}`);
+                return;
+            }
+            id = document.getElementById(id);
+        }
+
+        const getOptions = new Options(options);
+        const mergedOptions = getOptions.merge();
+
+        // 支持自定义国际化
+        if (!mergedOptions.i18n) {
+            if (!["de_DE", "en_US", "es_ES", "fr_FR", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "sv_SE", "vi_VN", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+                throw new Error(
+                    "options.lang error, see https://ld246.com/article/1549638745630#options",
+                );
+            } else {
+                const i18nScriptPrefix = "vditorI18nScript";
+                const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+                document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                    if (el.id !== i18nScriptID) {
+                        document.head.removeChild(el);
+                    }
+                });
+                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID).then(() => {
+                    this.init(id as HTMLElement, mergedOptions);
+                }).catch(error => {
+                    this.showErrorTip(`GET ${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js net::ERR_ABORTED 404 (Not Found)`);
+                });
+            }
+        } else {
+            window.VditorI18n = mergedOptions.i18n;
+            this.init(id, mergedOptions);
+        }
+    }
+
+    private showErrorTip(error: string) {
+        const tip = new Tip();
+        document.body.appendChild(tip.element);
+        tip.show(error, 0);
+    }
+
+    public updateToolbarConfig(options: IToolbarConfig) {
+        this.vditor.toolbar.updateConfig(this.vditor, options);
+    }
+
+    /** 设置主题 */
+    public setTheme(
+        theme: "dark" | "classic",
+        contentTheme?: string,
+        codeTheme?: string,
+        contentThemePath?: string,
+    ) {
+        this.vditor.options.theme = theme;
+        setTheme(this.vditor);
+        if (contentTheme) {
+            this.vditor.options.preview.theme.current = contentTheme;
+            setContentTheme(contentTheme, contentThemePath || this.vditor.options.preview.theme.path);
+        }
+        if (codeTheme) {
+            this.vditor.options.preview.hljs.style = codeTheme;
+            setCodeTheme(codeTheme, this.vditor.options.cdn);
+        }
+    }
+
+    /** 获取 Markdown 内容 */
+    public getValue() {
+        return getMarkdown(this.vditor);
+    }
+
+    /** 获取编辑器当前编辑模式 */
+    public getCurrentMode() {
+        return this.vditor.currentMode;
+    }
+
+    /** 聚焦到编辑器 */
+    public focus() {
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.focus();
+        } else if (this.vditor.currentMode === "wysiwyg") {
+            this.vditor.wysiwyg.element.focus();
+        } else if (this.vditor.currentMode === "ir") {
+            this.vditor.ir.element.focus();
+        }
+    }
+
+    /** 让编辑器失焦 */
+    public blur() {
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.blur();
+        } else if (this.vditor.currentMode === "wysiwyg") {
+            this.vditor.wysiwyg.element.blur();
+        } else if (this.vditor.currentMode === "ir") {
+            this.vditor.ir.element.blur();
+        }
+    }
+
+    /** 禁用编辑器 */
+    public disabled() {
+        hidePanel(this.vditor, ["subToolbar", "hint", "popover"]);
+        disableToolbar(
+            this.vditor.toolbar.elements,
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
+        );
+        this.vditor[this.vditor.currentMode].element.setAttribute(
+            "contenteditable",
+            "false",
+        );
+    }
+
+    /** 解除编辑器禁用 */
+    public enable() {
+        enableToolbar(
+            this.vditor.toolbar.elements,
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
+        );
+        this.vditor.undo.resetIcon(this.vditor);
+        this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
+    }
+
+    /** 返回选中的字符串 */
+    public getSelection() {
+        if (this.vditor.currentMode === "wysiwyg") {
+            return getSelectText(this.vditor.wysiwyg.element);
+        } else if (this.vditor.currentMode === "sv") {
+            return getSelectText(this.vditor.sv.element);
+        } else if (this.vditor.currentMode === "ir") {
+            return getSelectText(this.vditor.ir.element);
+        }
+    }
+
+    /** 设置预览区域内容 */
+    public renderPreview(value?: string) {
+        this.vditor.preview.render(this.vditor, value);
+    }
+
+    /** 获取焦点位置 */
+    public getCursorPosition() {
+        return getCursorPosition(this.vditor[this.vditor.currentMode].element);
+    }
+
+    /** 上传是否还在进行中 */
+    public isUploading() {
+        return this.vditor.upload.isUploading;
+    }
+
+    /** 清除缓存 */
+    public clearCache() {
+        if (this.vditor.options.cache.enable && accessLocalStorage()) {
+            localStorage.removeItem(this.vditor.options.cache.id);
+        }
+    }
+
+    /** 禁用缓存 */
+    public disabledCache() {
+        this.vditor.options.cache.enable = false;
+    }
+
+    /** 启用缓存 */
+    public enableCache() {
+        if (!this.vditor.options.cache.id) {
+            throw new Error(
+                "need options.cache.id, see https://ld246.com/article/1549638745630#options",
+            );
+        }
+        this.vditor.options.cache.enable = true;
+    }
+
+    /** HTML 转 md */
+    public html2md(value: string) {
+        return this.vditor.lute.HTML2Md(value);
+    }
+
+    /** markdown 转 JSON 输出 */
+    public exportJSON(value: string) {
+        return this.vditor.lute.RenderJSON(value);
+    }
+
+    /** 获取 HTML */
+    public getHTML() {
+        return getHTML(this.vditor);
+    }
+
+    /** 消息提示。time 为 0 将一直显示 */
+    public tip(text: string, time?: number) {
+        this.vditor.tip.show(text, time);
+    }
+
+    /** 设置预览模式 */
+    public setPreviewMode(mode: "both" | "editor") {
+        setPreviewMode(mode, this.vditor);
+    }
+
+    /** 删除选中内容 */
+    public deleteValue() {
+        if (window.getSelection().isCollapsed) {
+            return;
+        }
+        document.execCommand("delete", false);
+    }
+
+    /** 更新选中内容 */
+    public updateValue(value: string) {
+        document.execCommand("insertHTML", false, value);
+    }
+
+    /** 在焦点处插入内容，并默认进行 Markdown 渲染 */
+    public insertValue(value: string, render = true) {
+        const range = getEditorRange(this.vditor);
+        range.collapse(true);
+        // https://github.com/Vanessa219/vditor/issues/716
+        // https://github.com/Vanessa219/vditor/issues/917
+        const tmpElement = document.createElement("template");
+        tmpElement.innerHTML = value;
+        range.insertNode(tmpElement.content.cloneNode(true));
+        range.collapse(false);
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.preventInput = true;
+            if (render) {
+                inputEvent(this.vditor);
+            }
+        } else if (this.vditor.currentMode === "wysiwyg") {
+            // 由于 https://github.com/Vanessa219/vditor/issues/1566 不能使用 this.vditor.wysiwyg.preventInput = true;
+            if (render) {
+                input(this.vditor, getSelection().getRangeAt(0));
+            }
+        } else if (this.vditor.currentMode === "ir") {
+            this.vditor.ir.preventInput = true;
+            if (render) {
+                irInput(this.vditor, getSelection().getRangeAt(0), true);
+            }
+        }
+    }
+
+    /** 在焦点处插入 Markdown */
+    public insertMD(md: string) {
+        // https://github.com/Vanessa219/vditor/issues/1640
+        if (this.vditor.currentMode === "ir") {
+            insertHTML(this.vditor.lute.Md2VditorIRDOM(md), this.vditor);
+        } else if (this.vditor.currentMode === "wysiwyg") {
+            insertHTML(this.vditor.lute.Md2VditorDOM(md), this.vditor);
+        } else {
+            processPaste(this.vditor, md);
+        }
+        this.vditor.outline.render(this.vditor);
+        execAfterRender(this.vditor);
+    }
+
+    /** 设置编辑器内容 */
+    public setValue(markdown: string, clearStack = false) {
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.innerHTML = `<div data-block='0'>${this.vditor.lute.SpinVditorSVDOM(markdown)}</div>`;
+            processSVAfterRender(this.vditor, {
+                enableAddUndoStack: true,
+                enableHint: false,
+                enableInput: false,
+            });
+        } else if (this.vditor.currentMode === "wysiwyg") {
+            renderDomByMd(this.vditor, markdown, {
+                enableAddUndoStack: true,
+                enableHint: false,
+                enableInput: false,
+            });
+        } else {
+            this.vditor.ir.element.innerHTML = this.vditor.lute.Md2VditorIRDOM(markdown);
+            this.vditor.ir.element
+                .querySelectorAll(".vditor-ir__preview[data-render='2']")
+                .forEach((item: HTMLElement) => {
+                    processCodeRender(item, this.vditor);
+                });
+            processAfterRender(this.vditor, {
+                enableAddUndoStack: true,
+                enableHint: false,
+                enableInput: false,
+            });
+        }
+
+        this.vditor.outline.render(this.vditor);
+
+        if (!markdown) {
+            hidePanel(this.vditor, ["emoji", "headings", "submenu", "hint"]);
+            if (this.vditor.wysiwyg.popover) {
+                this.vditor.wysiwyg.popover.style.display = "none";
+            }
+            this.clearCache();
+        }
+        if (clearStack) {
+            this.clearStack();
+        }
+    }
+
+    /** 空块 */
+    public insertEmptyBlock(position: InsertPosition) {
+        insertEmptyBlock(this.vditor, position);
+    }
+
+    /** 清空 undo & redo 栈 */
+    public clearStack() {
+        this.vditor.undo.clearStack(this.vditor);
+        this.vditor.undo.addToUndoStack(this.vditor);
+    }
+
+    /** 销毁编辑器 */
+    public destroy() {
+        this.vditor.element.innerHTML = this.vditor.originalInnerHTML;
+        this.vditor.element.classList.remove("vditor");
+        this.vditor.element.removeAttribute("style");
+        const iconScript = document.getElementById("vditorIconScript");
+        if (iconScript) {
+            iconScript.remove();
+        }
+        this.clearCache();
+
+        UIUnbindListener();
+        this.vditor.wysiwyg.unbindListener();
+        this.vditor.options.after = undefined;
+        this.isDestroyed = true;
+    }
+
+    /** 获取评论 ID */
+    public getCommentIds() {
+        if (this.vditor.currentMode !== "wysiwyg") {
+            return [];
+        }
+        return this.vditor.wysiwyg.getComments(this.vditor, true);
+    }
+
+    /** 高亮评论 */
+    public hlCommentIds(ids: string[]) {
+        if (this.vditor.currentMode !== "wysiwyg") {
+            return;
+        }
+        const hlItem = (item: Element) => {
+            item.classList.remove("vditor-comment--hover");
+            ids.forEach((id) => {
+                if (item.getAttribute("data-cmtids").indexOf(id) > -1) {
+                    item.classList.add("vditor-comment--hover");
+                }
+            });
+        };
+        this.vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment")
+            .forEach((item) => {
+                hlItem(item);
+            });
+        if (this.vditor.preview.element.style.display !== "none") {
+            this.vditor.preview.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    hlItem(item);
+                });
+        }
+    }
+
+    /** 取消评论高亮 */
+    public unHlCommentIds(ids: string[]) {
+        if (this.vditor.currentMode !== "wysiwyg") {
+            return;
+        }
+        const unHlItem = (item: Element) => {
+            ids.forEach((id) => {
+                if (item.getAttribute("data-cmtids").indexOf(id) > -1) {
+                    item.classList.remove("vditor-comment--hover");
+                }
+            });
+        };
+        this.vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment")
+            .forEach((item) => {
+                unHlItem(item);
+            });
+        if (this.vditor.preview.element.style.display !== "none") {
+            this.vditor.preview.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    unHlItem(item);
+                });
+        }
+    }
+
+    /** 删除评论 */
+    public removeCommentIds(removeIds: string[]) {
+        if (this.vditor.currentMode !== "wysiwyg") {
+            return;
+        }
+
+        const removeItem = (item: Element, removeId: string) => {
+            const ids = item.getAttribute("data-cmtids").split(" ");
+            ids.find((id, index) => {
+                if (id === removeId) {
+                    ids.splice(index, 1);
+                    return true;
+                }
+            });
+            if (ids.length === 0) {
+                item.outerHTML = item.innerHTML;
+                getEditorRange(this.vditor).collapse(true);
+            } else {
+                item.setAttribute("data-cmtids", ids.join(" "));
+            }
+        };
+        removeIds.forEach((removeId) => {
+            this.vditor.wysiwyg.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    removeItem(item, removeId);
+                });
+            if (this.vditor.preview.element.style.display !== "none") {
+                this.vditor.preview.element
+                    .querySelectorAll(".vditor-comment")
+                    .forEach((item) => {
+                        removeItem(item, removeId);
+                    });
+            }
+        });
+        afterRenderEvent(this.vditor, {
+            enableAddUndoStack: true,
+            enableHint: false,
+            enableInput: false,
+        });
+    }
+
+    private init(id: HTMLElement, mergedOptions: IOptions) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.vditor = {
+            currentMode: mergedOptions.mode,
+            element: id,
+            hint: new Hint(mergedOptions.hint.extend),
+            lute: undefined,
+            options: mergedOptions,
+            originalInnerHTML: id.innerHTML,
+            outline: new Outline(window.VditorI18n.outline),
+            tip: new Tip(),
+        };
+
+        this.vditor.sv = new Editor(this.vditor);
+        this.vditor.undo = new Undo();
+        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
+        this.vditor.ir = new IR(this.vditor);
+        this.vditor.toolbar = new Toolbar(this.vditor);
+
+        if (mergedOptions.resize.enable) {
+            this.vditor.resize = new Resize(this.vditor);
+        }
+
+        if (this.vditor.toolbar.elements.devtools) {
+            this.vditor.devtools = new DevTools();
+        }
+
+        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
+            this.vditor.upload = new Upload();
+        }
+
+        addScript(
+            mergedOptions._lutePath ||
+            `${mergedOptions.cdn}/dist/js/lute/lute.min.js`,
+            "vditorLuteScript",
+        ).then(() => {
+            this.vditor.lute = setLute({
+                autoSpace: this.vditor.options.preview.markdown.autoSpace,
+                gfmAutoLink: this.vditor.options.preview.markdown.gfmAutoLink,
+                codeBlockPreview: this.vditor.options.preview.markdown
+                    .codeBlockPreview,
+                emojiSite: this.vditor.options.hint.emojiPath,
+                emojis: this.vditor.options.hint.emoji,
+                fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
+                footnotes: this.vditor.options.preview.markdown.footnotes,
+                headingAnchor: false,
+                inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
+                linkBase: this.vditor.options.preview.markdown.linkBase,
+                linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
+                listStyle: this.vditor.options.preview.markdown.listStyle,
+                mark: this.vditor.options.preview.markdown.mark,
+                mathBlockPreview: this.vditor.options.preview.markdown
+                    .mathBlockPreview,
+                paragraphBeginningSpace: this.vditor.options.preview.markdown
+                    .paragraphBeginningSpace,
+                sanitize: this.vditor.options.preview.markdown.sanitize,
+                sub: this.vditor.options.preview.markdown.sub,
+                sup: this.vditor.options.preview.markdown.sup,
+                toc: this.vditor.options.preview.markdown.toc,
+            });
+
+            this.vditor.preview = new Preview(this.vditor);
+
+            initUI(this.vditor);
+
+            if (mergedOptions.after) {
+                mergedOptions.after();
+            }
+            if (mergedOptions.icon) {
+                // 防止初始化 2 个编辑器时加载 2 次
+                addScriptSync(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+            }
+        });
+    }
+}
+
+export default Vditor;