@8btc/mditor 0.0.1

package/src/ts/toolbar/Upload.ts

@@ -0,0 +1,41 @@
+import {Constants} from "../constants";
+import {uploadFiles} from "../upload/index";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Upload extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        let inputHTML = '<input type="file"';
+        if (vditor.options.upload.multiple) {
+            inputHTML += ' multiple="multiple"';
+        }
+        if (vditor.options.upload.accept) {
+            inputHTML += ` accept="${vditor.options.upload.accept}"`;
+        }
+        this.element.children[0].innerHTML = `${(menuItem.icon || '<svg><use xlink:href="#vditor-icon-upload"></use></svg>')}${inputHTML}>`;
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+        });
+        this.element.querySelector("input").addEventListener("change",
+            (event: InputEvent & { target: HTMLInputElement }) => {
+                if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    return;
+                }
+                if (event.target.files.length === 0) {
+                    return;
+                }
+                uploadFiles(vditor, event.target.files, event.target);
+            });
+    }
+}

package/src/ts/toolbar/index.ts

@@ -0,0 +1,195 @@
+import { getEventName } from "../util/compatibility";
+import { Both } from "./Both";
+import { Br } from "./Br";
+import { CodeTheme } from "./CodeTheme";
+import { ContentTheme } from "./ContentTheme";
+import { Counter } from "./Counter";
+import { Custom } from "./Custom";
+import { Devtools } from "./Devtools";
+import { Divider } from "./Divider";
+import { EditMode } from "./EditMode";
+import { Emoji } from "./Emoji";
+import { Fullscreen } from "./Fullscreen";
+import { Headings } from "./Headings";
+import { Help } from "./Help";
+import { Indent } from "./Indent";
+import { Info } from "./Info";
+import { InsertAfter } from "./InsertAfter";
+import { InsertBefore } from "./InsertBefore";
+import { MenuItem } from "./MenuItem";
+import { Outdent } from "./Outdent";
+import { Outline } from "./Outline";
+import { Preview } from "./Preview";
+import { Record } from "./Record";
+import { Redo } from "./Redo";
+import { toggleSubMenu } from "./setToolbar";
+import { Undo } from "./Undo";
+import { Upload } from "./Upload";
+
+export class Toolbar {
+    public elements: { [key: string]: HTMLElement };
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor) {
+        const options = vditor.options;
+        this.elements = {};
+
+        this.element = document.createElement("div");
+        this.element.className = "vditor-toolbar";
+
+        options.toolbar.forEach((menuItem: IMenuItem, i: number) => {
+            const itemElement = this.genItem(vditor, menuItem, i);
+            this.element.appendChild(itemElement);
+            if (menuItem.toolbar) {
+                const panelElement = document.createElement("div");
+                panelElement.className = "vditor-hint vditor-panel--arrow";
+                panelElement.addEventListener(getEventName(), (event) => {
+                    panelElement.style.display = "none";
+                });
+                menuItem.toolbar.forEach(
+                    (subMenuItem: IMenuItem, subI: number) => {
+                        subMenuItem.level = 2;
+                        panelElement.appendChild(
+                            this.genItem(vditor, subMenuItem, i + subI)
+                        );
+                    }
+                );
+                itemElement.appendChild(panelElement);
+                toggleSubMenu(vditor, panelElement, itemElement.children[0], 2);
+            }
+        });
+
+        if (vditor.options.toolbarConfig.hide) {
+            this.element.classList.add("vditor-toolbar--hide");
+        }
+        if (vditor.options.toolbarConfig.pin) {
+            this.element.classList.add("vditor-toolbar--pin");
+        }
+
+        if (vditor.options.counter.enable) {
+            vditor.counter = new Counter(vditor);
+            this.element.appendChild(vditor.counter.element);
+        }
+    }
+
+    public updateConfig(vditor: IVditor, options: IToolbarConfig) {
+        vditor.options.toolbarConfig = Object.assign(
+            {
+                hide: false,
+                pin: false,
+            },
+            options
+        );
+        if (vditor.options.toolbarConfig.hide) {
+            this.element.classList.add("vditor-toolbar--hide");
+        } else {
+            this.element.classList.remove("vditor-toolbar--hide");
+        }
+        if (vditor.options.toolbarConfig.pin) {
+            this.element.classList.add("vditor-toolbar--pin");
+        } else {
+            this.element.classList.remove("vditor-toolbar--pin");
+        }
+    }
+
+    private genItem(vditor: IVditor, menuItem: IMenuItem, index: number) {
+        let menuItemObj;
+        switch (menuItem.name) {
+            case "bold":
+            case "italic":
+            case "more":
+            case "strike":
+            case "line":
+            case "quote":
+            case "list":
+            case "ordered-list":
+            case "check":
+            case "code":
+            case "inline-code":
+            case "link":
+            case "table":
+                menuItemObj = new MenuItem(vditor, menuItem);
+                break;
+            case "emoji":
+                menuItemObj = new Emoji(vditor, menuItem);
+                break;
+            case "headings":
+                menuItemObj = new Headings(vditor, menuItem);
+                break;
+            case "|":
+                menuItemObj = new Divider();
+                break;
+            case "br":
+                menuItemObj = new Br();
+                break;
+            case "undo":
+                menuItemObj = new Undo(vditor, menuItem);
+                break;
+            case "redo":
+                menuItemObj = new Redo(vditor, menuItem);
+                break;
+            case "help":
+                menuItemObj = new Help(vditor, menuItem);
+                break;
+            case "both":
+                menuItemObj = new Both(vditor, menuItem);
+                break;
+            case "preview":
+                menuItemObj = new Preview(vditor, menuItem);
+                break;
+            case "fullscreen":
+                menuItemObj = new Fullscreen(vditor, menuItem);
+                break;
+            case "upload":
+                menuItemObj = new Upload(vditor, menuItem);
+                break;
+            case "record":
+                menuItemObj = new Record(vditor, menuItem);
+                break;
+            case "info":
+                menuItemObj = new Info(vditor, menuItem);
+                break;
+            case "edit-mode":
+                menuItemObj = new EditMode(vditor, menuItem);
+                break;
+            case "devtools":
+                menuItemObj = new Devtools(vditor, menuItem);
+                break;
+            case "outdent":
+                menuItemObj = new Outdent(vditor, menuItem);
+                break;
+            case "indent":
+                menuItemObj = new Indent(vditor, menuItem);
+                break;
+            case "outline":
+                menuItemObj = new Outline(vditor, menuItem);
+                break;
+            case "insert-after":
+                menuItemObj = new InsertAfter(vditor, menuItem);
+                break;
+            case "insert-before":
+                menuItemObj = new InsertBefore(vditor, menuItem);
+                break;
+            case "code-theme":
+                menuItemObj = new CodeTheme(vditor, menuItem);
+                break;
+            case "content-theme":
+                menuItemObj = new ContentTheme(vditor, menuItem);
+                break;
+            default:
+                menuItemObj = new Custom(vditor, menuItem);
+                break;
+        }
+
+        if (!menuItemObj) {
+            return;
+        }
+        let key = menuItem.name;
+        if (key === "br" || key === "|") {
+            key = key + index;
+        }
+
+        this.elements[key] = menuItemObj.element;
+        return menuItemObj.element;
+    }
+}

package/src/ts/toolbar/setToolbar.ts

@@ -0,0 +1,120 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+
+export const removeCurrentToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && itemElement.classList.contains("vditor-menu--current")) {
+            itemElement.classList.remove("vditor-menu--current");
+        }
+    });
+};
+
+export const setCurrentToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && !itemElement.classList.contains("vditor-menu--current")) {
+            itemElement.classList.add("vditor-menu--current");
+        }
+    });
+};
+
+export const enableToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && itemElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            itemElement.classList.remove(Constants.CLASS_MENU_DISABLED);
+        }
+    });
+};
+
+export const disableToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && !itemElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            itemElement.classList.add(Constants.CLASS_MENU_DISABLED);
+        }
+    });
+};
+
+export const hideToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        if (toolbar[name]) {
+            toolbar[name].style.display = "none";
+        }
+    });
+};
+
+export const showToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        if (toolbar[name]) {
+            toolbar[name].style.display = "block";
+        }
+    });
+};
+
+// "subToolbar", "hint", "popover"
+export const hidePanel = (vditor: IVditor, panels: string[], exceptElement?: HTMLElement) => {
+    if (panels.includes("subToolbar")) {
+        vditor.toolbar.element.querySelectorAll(".vditor-hint").forEach((item: HTMLElement) => {
+            if (exceptElement && item.isEqualNode(exceptElement)) {
+                return;
+            }
+            item.style.display = "none";
+        });
+        if (vditor.toolbar.elements.emoji) {
+            (vditor.toolbar.elements.emoji.lastElementChild as HTMLElement).style.display = "none";
+        }
+    }
+    if (panels.includes("hint")) {
+        vditor.hint.element.style.display = "none";
+    }
+    if (vditor.wysiwyg.popover && panels.includes("popover")) {
+        vditor.wysiwyg.popover.style.display = "none";
+    }
+};
+
+export const toggleSubMenu = (vditor: IVditor, panelElement: HTMLElement, actionBtn: Element, level: number) => {
+    actionBtn.addEventListener(getEventName(), (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (actionBtn.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            return;
+        }
+        vditor.toolbar.element.querySelectorAll(".vditor-hint--current").forEach((item) => {
+            item.classList.remove("vditor-hint--current");
+        });
+        if (panelElement.style.display === "block") {
+            panelElement.style.display = "none";
+        } else {
+            hidePanel(vditor, ["subToolbar", "hint", "popover"], actionBtn.parentElement.parentElement);
+            if (!actionBtn.classList.contains("vditor-tooltipped")) {
+                actionBtn.classList.add("vditor-hint--current");
+            }
+            panelElement.style.display = "block";
+            if (vditor.toolbar.element.getBoundingClientRect().right - actionBtn.getBoundingClientRect().right < 250) {
+                panelElement.classList.add("vditor-panel--left");
+            } else {
+                panelElement.classList.remove("vditor-panel--left");
+            }
+        }
+    });
+};

package/src/ts/ui/initUI.ts

@@ -0,0 +1,214 @@
+import { Constants } from "../constants";
+import { setEditMode } from "../toolbar/EditMode";
+import { hidePanel } from "../toolbar/setToolbar";
+import { accessLocalStorage } from "../util/compatibility";
+import { setContentTheme } from "./setContentTheme";
+import { setTheme } from "./setTheme";
+
+// 初始化编辑器 UI 结构：根据配置构建整体布局。
+// 特别说明：当 toolbar 配置为空数组([])时，不将 toolbar 节点插入到 DOM。
+export const initUI = (vditor: IVditor) => {
+    vditor.element.innerHTML = "";
+    vditor.element.classList.add("vditor");
+    // 支持 RTL
+    if (vditor.options.rtl) {
+        vditor.element.setAttribute("dir", "rtl");
+    }
+    setTheme(vditor);
+    setContentTheme(
+        vditor.options.preview.theme.current,
+        vditor.options.preview.theme.path
+    );
+    if (typeof vditor.options.height === "number") {
+        vditor.element.style.height = vditor.options.height + "px";
+    } else {
+        vditor.element.style.height = vditor.options.height;
+    }
+    if (typeof vditor.options.minHeight === "number") {
+        vditor.element.style.minHeight = vditor.options.minHeight + "px";
+    }
+    if (typeof vditor.options.width === "number") {
+        vditor.element.style.width = vditor.options.width + "px";
+    } else {
+        vditor.element.style.width = vditor.options.width;
+    }
+
+    // 当 toolbar 为空数组时不渲染 toolbar 节点
+    if (
+        Array.isArray(vditor.options.toolbar) &&
+        vditor.options.toolbar.length > 0
+    ) {
+        vditor.element.appendChild(vditor.toolbar.element);
+    }
+
+    const contentElement = document.createElement("div");
+    contentElement.className = "vditor-content";
+
+    if (vditor.options.outline.position === "left") {
+        contentElement.appendChild(vditor.outline.element);
+    }
+
+    contentElement.appendChild(vditor.wysiwyg.element.parentElement);
+
+    contentElement.appendChild(vditor.sv.element);
+
+    contentElement.appendChild(vditor.ir.element.parentElement);
+
+    contentElement.appendChild(vditor.preview.element);
+
+    if (vditor.toolbar.elements.devtools) {
+        contentElement.appendChild(vditor.devtools.element);
+    }
+
+    if (vditor.options.outline.position === "right") {
+        vditor.outline.element.classList.add("vditor-outline--right");
+        contentElement.appendChild(vditor.outline.element);
+    }
+
+    if (vditor.upload) {
+        contentElement.appendChild(vditor.upload.element);
+    }
+
+    if (vditor.options.resize.enable) {
+        contentElement.appendChild(vditor.resize.element);
+    }
+
+    contentElement.appendChild(vditor.hint.element);
+
+    contentElement.appendChild(vditor.tip.element);
+
+    vditor.element.appendChild(contentElement);
+
+    contentElement.addEventListener("click", () => {
+        hidePanel(vditor, ["subToolbar"]);
+    });
+
+    setEditMode(vditor, vditor.options.mode, afterRender(vditor));
+
+    document.execCommand("DefaultParagraphSeparator", false, "p");
+
+    if (
+        navigator.userAgent.indexOf("iPhone") > -1 &&
+        typeof window.visualViewport !== "undefined"
+    ) {
+        // https://github.com/Vanessa219/vditor/issues/379
+        let pendingUpdate = false;
+        const viewportHandler = (event: Event) => {
+            if (pendingUpdate) {
+                return;
+            }
+            pendingUpdate = true;
+
+            requestAnimationFrame(() => {
+                pendingUpdate = false;
+                const layoutViewport = vditor.toolbar.element;
+                layoutViewport.style.transform = "none";
+                if (layoutViewport.getBoundingClientRect().top < 0) {
+                    layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
+                }
+            });
+        };
+        window.visualViewport.addEventListener("scroll", viewportHandler);
+        window.visualViewport.addEventListener("resize", viewportHandler);
+    }
+};
+// 计算并设置编辑区左右 padding，适配预览最大宽度与大纲位置
+export const setPadding = (vditor: IVditor) => {
+    const minPadding = window.innerWidth <= Constants.MOBILE_WIDTH ? 10 : 24;
+    if (vditor.wysiwyg.element.parentElement.style.display !== "none") {
+        const padding =
+            (vditor.wysiwyg.element.parentElement.clientWidth -
+                vditor.options.preview.maxWidth) /
+            2;
+        const basePad = Math.max(minPadding, padding);
+        const leftExtra = vditor.options.lineNumber && basePad < 40 ? 20 : 0;
+        vditor.wysiwyg.element.style.padding = `10px ${basePad}px 10px ${basePad + leftExtra}px`;
+    }
+
+    if (vditor.ir.element.parentElement.style.display !== "none") {
+        const padding =
+            (vditor.ir.element.parentElement.clientWidth -
+                vditor.options.preview.maxWidth) /
+            2;
+        const basePad = Math.max(minPadding, padding);
+        const leftExtra = vditor.options.lineNumber && basePad < 40 ? 20 : 0;
+        vditor.ir.element.style.padding = `10px ${basePad}px 10px ${basePad + leftExtra}px`;
+    }
+
+    if (vditor.preview.element.style.display !== "block") {
+        vditor.toolbar.element.style.paddingLeft =
+            Math.max(
+                5,
+                parseInt(
+                    vditor[vditor.currentMode].element.style.paddingLeft || "0",
+                    10
+                ) +
+                    (vditor.options.outline.position === "left"
+                        ? vditor.outline.element.offsetWidth
+                        : 0)
+            ) + "px";
+    } else {
+        vditor.toolbar.element.style.paddingLeft =
+            5 +
+            (vditor.options.outline.position === "left"
+                ? vditor.outline.element.offsetWidth
+                : 0) +
+            "px";
+    }
+};
+// 设置打字机模式的垂直居中位置，依据容器高度与 toolbar 高度计算
+export const setTypewriterPosition = (vditor: IVditor) => {
+    if (!vditor.options.typewriterMode) {
+        return;
+    }
+    let height: number = window.innerHeight;
+    if (typeof vditor.options.height === "number") {
+        height = vditor.options.height;
+        if (typeof vditor.options.minHeight === "number") {
+            height = Math.max(height, vditor.options.minHeight);
+        }
+        height = Math.min(window.innerHeight, height);
+    } else {
+        height = vditor.element.clientHeight;
+    }
+    if (vditor.element.classList.contains("vditor--fullscreen")) {
+        height = window.innerHeight;
+    }
+    // 由于 Firefox padding-bottom bug，只能使用 :after
+    vditor[vditor.currentMode].element.style.setProperty(
+        "--editor-bottom",
+        (height - vditor.toolbar.element.offsetHeight) / 2 + "px"
+    );
+};
+
+let resizeCb: () => void;
+// 解绑与窗口大小变化相关的监听器，避免重复绑定
+export function UIUnbindListener() {
+    window.removeEventListener("resize", resizeCb);
+}
+// 渲染后初始化：绑定 resize、设置打字机模式位置，并确定初始内容
+const afterRender = (vditor: IVditor) => {
+    setTypewriterPosition(vditor);
+    UIUnbindListener();
+    window.addEventListener(
+        "resize",
+        (resizeCb = () => {
+            setPadding(vditor);
+            setTypewriterPosition(vditor);
+        })
+    );
+
+    // set default value
+    let initValue =
+        accessLocalStorage() && localStorage.getItem(vditor.options.cache.id);
+    if (!vditor.options.cache.enable || !initValue) {
+        if (vditor.options.value) {
+            initValue = vditor.options.value;
+        } else if (vditor.originalInnerHTML) {
+            initValue = vditor.lute.HTML2Md(vditor.originalInnerHTML);
+        } else if (!vditor.options.cache.enable) {
+            initValue = "";
+        }
+    }
+    return initValue || "";
+};

package/src/ts/ui/setCodeTheme.ts

@@ -0,0 +1,16 @@
+import {Constants} from "../constants";
+import {addStyle} from "../util/addStyle";
+
+export const setCodeTheme = (codeTheme: string, cdn = Constants.CDN) => {
+    if (!Constants.CODE_THEME.includes(codeTheme)) {
+        codeTheme = "github";
+    }
+    const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
+    const href = `${cdn}/dist/js/highlight.js/styles/${codeTheme}.min.css`;
+    if (!vditorHljsStyle) {
+        addStyle(href, "vditorHljsStyle");
+    } else if (vditorHljsStyle.getAttribute('href') !== href) {
+        vditorHljsStyle.remove();
+        addStyle(href, "vditorHljsStyle");
+    }
+};

package/src/ts/ui/setContentTheme.ts

@@ -0,0 +1,15 @@
+import {addStyle} from "../util/addStyle";
+
+export const setContentTheme = (contentTheme: string, path: string) => {
+    if (!contentTheme || !path) {
+        return;
+    }
+    const vditorContentTheme = document.getElementById("vditorContentTheme") as HTMLLinkElement;
+    const cssPath = `${path}/${contentTheme}.css`;
+    if (!vditorContentTheme) {
+        addStyle(cssPath, "vditorContentTheme");
+    } else if (vditorContentTheme.getAttribute("href") !== cssPath) {
+        vditorContentTheme.remove();
+        addStyle(cssPath, "vditorContentTheme");
+    }
+};

package/src/ts/ui/setPreviewMode.ts

@@ -0,0 +1,31 @@
+import {removeCurrentToolbar} from "../toolbar/setToolbar";
+import {setCurrentToolbar} from "../toolbar/setToolbar";
+
+export const setPreviewMode = (mode: "both" | "editor", vditor: IVditor) => {
+    if (vditor.options.preview.mode === mode) {
+        return;
+    }
+    vditor.options.preview.mode = mode;
+
+    switch (mode) {
+        case "both":
+            vditor.sv.element.style.display = "block";
+            vditor.preview.element.style.display = "block";
+            vditor.preview.render(vditor);
+
+            setCurrentToolbar(vditor.toolbar.elements, ["both"]);
+            break;
+        case "editor":
+            vditor.sv.element.style.display = "block";
+            vditor.preview.element.style.display = "none";
+
+            removeCurrentToolbar(vditor.toolbar.elements, ["both"]);
+            break;
+        default:
+            break;
+    }
+
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
+    }
+};

package/src/ts/ui/setTheme.ts

@@ -0,0 +1,14 @@
+/**
+ * 设置编辑器外观主题。根据编辑器主题和内容主题共同决定是否应用暗色样式：
+ * 只要 `options.theme` 或 `options.preview.theme.current` 为 `dark`，
+ * 则在根节点上添加 `vditor--dark` 类；否则移除。
+ */
+export const setTheme = (vditor: IVditor) => {
+    const isDarkEditor = vditor.options.theme === "dark";
+    const isDarkContent = vditor.options.preview?.theme?.current === "dark";
+    if (isDarkEditor || isDarkContent) {
+        vditor.element.classList.add("vditor--dark");
+    } else {
+        vditor.element.classList.remove("vditor--dark");
+    }
+};