@8btc/mditor 0.0.1

package/src/ts/undo/index.ts

@@ -0,0 +1,270 @@
+import * as DiffMatchPatch from "diff-match-patch";
+import {disableToolbar, enableToolbar, hidePanel} from "../toolbar/setToolbar";
+import {isFirefox, isSafari} from "../util/compatibility";
+import {scrollCenter} from "../util/editorCommonEvent";
+import {execAfterRender} from "../util/fixBrowserBehavior";
+import {highlightToolbar} from "../util/highlightToolbar";
+import {processCodeRender} from "../util/processCode";
+import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {renderToc} from "../util/toc";
+
+interface IUndo {
+    hasUndo: boolean;
+    lastText: string;
+    redoStack: DiffMatchPatch.patch_obj[][];
+    undoStack: DiffMatchPatch.patch_obj[][];
+}
+
+class Undo {
+    private stackSize = 50;
+    private dmp: DiffMatchPatch.diff_match_patch;
+    private wysiwyg: IUndo;
+    private ir: IUndo;
+    private sv: IUndo;
+
+    constructor() {
+        this.resetStack();
+        // @ts-ignore
+        this.dmp = new DiffMatchPatch();
+    }
+
+    public clearStack(vditor: IVditor) {
+        this.resetStack();
+        this.resetIcon(vditor);
+    }
+
+    public resetIcon(vditor: IVditor) {
+        if (!vditor.toolbar) {
+            return;
+        }
+
+        if (this[vditor.currentMode].undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+
+        if (this[vditor.currentMode].redoStack.length !== 0) {
+            enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
+    }
+
+    public undo(vditor: IVditor) {
+        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        if (this[vditor.currentMode].undoStack.length < 2) {
+            return;
+        }
+        const state = this[vditor.currentMode].undoStack.pop();
+        if (!state) {
+            return;
+        }
+        this[vditor.currentMode].redoStack.push(state);
+        this.renderDiff(state, vditor);
+        this[vditor.currentMode].hasUndo = true;
+        // undo 操作后，需要关闭 hint
+        hidePanel(vditor, ["hint"]);
+    }
+
+    public redo(vditor: IVditor) {
+        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        const state = this[vditor.currentMode].redoStack.pop();
+        if (!state) {
+            return;
+        }
+        this[vditor.currentMode].undoStack.push(state);
+        this.renderDiff(state, vditor, true);
+    }
+
+    public recordFirstPosition(vditor: IVditor, event: KeyboardEvent) {
+        if (getSelection().rangeCount === 0) {
+            return;
+        }
+        if (this[vditor.currentMode].undoStack.length !== 1 || this[vditor.currentMode].undoStack[0].length === 0 ||
+            this[vditor.currentMode].redoStack.length > 0) {
+            return;
+        }
+        if (isFirefox() && event.key === "Backspace") {
+            // Firefox 第一次删除无效
+            return;
+        }
+        if (isSafari()) {
+            // Safari keydown 在 input 之后，不需要重复记录历史
+            return;
+        }
+        const text = this.addCaret(vditor);
+        if (text.replace("<wbr>", "").replace(" vditor-ir__node--expand", "")
+            !== this[vditor.currentMode].undoStack[0][0].diffs[0][1].replace("<wbr>", "")) {
+            // 当还不没有存入 undo 栈时，按下 ctrl 后会覆盖 lastText
+            return;
+        }
+        this[vditor.currentMode].undoStack[0][0].diffs[0][1] = text;
+        this[vditor.currentMode].lastText = text;
+        // 不能添加 setSelectionFocus(cloneRange); 否则 windows chrome 首次输入会烂
+    }
+
+    public addToUndoStack(vditor: IVditor) {
+        // afterRenderEvent.ts 已经 debounce
+        const text = this.addCaret(vditor, true);
+        const diff = this.dmp.diff_main(text, this[vditor.currentMode].lastText, true);
+        const patchList = this.dmp.patch_make(text, this[vditor.currentMode].lastText, diff);
+        if (patchList.length === 0 && this[vditor.currentMode].undoStack.length > 0) {
+            return;
+        }
+        this[vditor.currentMode].lastText = text;
+        this[vditor.currentMode].undoStack.push(patchList);
+        if (this[vditor.currentMode].undoStack.length > this.stackSize) {
+            this[vditor.currentMode].undoStack.shift();
+        }
+        if (this[vditor.currentMode].hasUndo) {
+            this[vditor.currentMode].redoStack = [];
+            this[vditor.currentMode].hasUndo = false;
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
+
+        if (this[vditor.currentMode].undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+    }
+
+    private renderDiff(state: DiffMatchPatch.patch_obj[], vditor: IVditor, isRedo: boolean = false) {
+        let text;
+        if (isRedo) {
+            const redoPatchList = this.dmp.patch_deepCopy(state).reverse();
+            redoPatchList.forEach((patch) => {
+                patch.diffs.forEach((diff) => {
+                    diff[0] = -diff[0];
+                });
+            });
+            text = this.dmp.patch_apply(redoPatchList, this[vditor.currentMode].lastText)[0];
+        } else {
+            text = this.dmp.patch_apply(state, this[vditor.currentMode].lastText)[0];
+        }
+
+        this[vditor.currentMode].lastText = text;
+        vditor[vditor.currentMode].element.innerHTML = text;
+        if (vditor.currentMode !== "sv") {
+            vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview`)
+                .forEach((blockElement: HTMLElement) => {
+                    if (blockElement.parentElement.querySelector(".language-echarts")) {
+                        if (vditor.currentMode === "ir") {
+                            blockElement.parentElement.outerHTML = vditor.lute.SpinVditorIRDOM(blockElement.parentElement.outerHTML);
+                        } else {
+                            blockElement.parentElement.outerHTML = vditor.lute.SpinVditorDOM(blockElement.parentElement.outerHTML);
+                        }
+                    }
+                });
+            vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='2']`)
+                .forEach((blockElement: HTMLElement) => {
+                    processCodeRender(blockElement, vditor);
+                });
+        }
+
+        if (!vditor[vditor.currentMode].element.querySelector("wbr")) {
+            // Safari 第一次输入没有光标，需手动定位到结尾
+            const range = getSelection().getRangeAt(0);
+            range.setEndBefore(vditor[vditor.currentMode].element);
+            range.collapse(false);
+        } else {
+            setRangeByWbr(
+                vditor[vditor.currentMode].element, vditor[vditor.currentMode].element.ownerDocument.createRange());
+            scrollCenter(vditor);
+        }
+
+        renderToc(vditor);
+
+        execAfterRender(vditor, {
+            enableAddUndoStack: false,
+            enableHint: false,
+            enableInput: true,
+        });
+        highlightToolbar(vditor);
+
+        vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='2']`)
+            .forEach((item: HTMLElement) => {
+                processCodeRender(item, vditor);
+            });
+
+        if (this[vditor.currentMode].undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+
+        if (this[vditor.currentMode].redoStack.length !== 0) {
+            enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
+    }
+
+    private resetStack() {
+        this.ir = {
+            hasUndo: false,
+            lastText: "",
+            redoStack: [],
+            undoStack: [],
+        };
+        this.sv = {
+            hasUndo: false,
+            lastText: "",
+            redoStack: [],
+            undoStack: [],
+        };
+        this.wysiwyg = {
+            hasUndo: false,
+            lastText: "",
+            redoStack: [],
+            undoStack: [],
+        };
+    }
+
+    private addCaret(vditor: IVditor, setFocus = false) {
+        let cloneRange: Range;
+        if (getSelection().rangeCount !== 0 && !vditor[vditor.currentMode].element.querySelector("wbr")) {
+            const range = getSelection().getRangeAt(0);
+            if (vditor[vditor.currentMode].element.contains(range.startContainer)) {
+                cloneRange = range.cloneRange();
+                const wbrElement = document.createElement("span");
+                wbrElement.className = "vditor-wbr";
+                range.insertNode(wbrElement);
+            }
+        }
+        // 移除数学公式、echart 渲染 https://github.com/Vanessa219/vditor/issues/1738
+        const cloneElement = vditor[vditor.currentMode].element.cloneNode(true) as HTMLElement;
+        cloneElement.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='1']`)
+            .forEach((item: HTMLElement) => {
+                if (!item.firstElementChild) {
+                    return;
+                }
+                if (item.firstElementChild.classList.contains("language-echarts") ||
+                    item.firstElementChild.classList.contains("language-plantuml") ||
+                    item.firstElementChild.classList.contains("language-mindmap")) {
+                    item.firstElementChild.removeAttribute("_echarts_instance_");
+                    item.firstElementChild.removeAttribute("data-processed");
+                    item.firstElementChild.innerHTML = item.previousElementSibling.firstElementChild.innerHTML;
+                    item.setAttribute("data-render", "2");
+                } else if (item.firstElementChild.classList.contains("language-math")) {
+                    item.setAttribute("data-render", "2");
+                    item.firstElementChild.textContent = item.firstElementChild.getAttribute("data-math");
+                    item.firstElementChild.removeAttribute("data-math");
+                }
+            });
+        const text = cloneElement.innerHTML;
+        vditor[vditor.currentMode].element.querySelectorAll(".vditor-wbr").forEach((item) => {
+            item.remove();
+            // 使用 item.outerHTML = "" 会产生 https://github.com/Vanessa219/vditor/pull/686;
+        });
+        if (setFocus && cloneRange) {
+            setSelectionFocus(cloneRange);
+        }
+        return text.replace('<span class="vditor-wbr"></span>', "<wbr>");
+    }
+}
+
+export {Undo};

package/src/ts/upload/getElement.ts

@@ -0,0 +1,10 @@
+export const getElement = (vditor: IVditor) => {
+    switch (vditor.currentMode) {
+        case "ir":
+            return vditor.ir.element;
+        case "wysiwyg":
+            return vditor.wysiwyg.element;
+        case "sv":
+            return vditor.sv.element;
+    }
+};

package/src/ts/upload/index.ts

@@ -0,0 +1,273 @@
+import { getEditorRange, setSelectionFocus } from "../util/selection";
+import { getElement } from "./getElement";
+import { setHeaders } from "./setHeaders";
+
+class Upload {
+    public element: HTMLElement;
+    public isUploading: boolean;
+    public range: Range;
+
+    constructor() {
+        this.isUploading = false;
+        this.element = document.createElement("div");
+        this.element.className = "vditor-upload";
+    }
+}
+
+const validateFile = (vditor: IVditor, files: File[]) => {
+    vditor.tip.hide();
+    const uploadFileList: File[] = [];
+    let errorTip = "";
+    let uploadingStr = "";
+    const lang: keyof II18n | "" = vditor.options.lang;
+    const options: IOptions = vditor.options;
+
+    for (let iMax = files.length, i = 0; i < iMax; i++) {
+        const file = files[i];
+        let validate = true;
+
+        if (!file.name) {
+            errorTip += `<li>${window.VditorI18n.nameEmpty}</li>`;
+            validate = false;
+        }
+
+        if (file.size > vditor.options.upload.max) {
+            errorTip += `<li>${file.name} ${window.VditorI18n.over} ${vditor.options.upload.max / 1024 / 1024}M</li>`;
+            validate = false;
+        }
+
+        const lastIndex = file.name.lastIndexOf(".");
+        const fileExt = file.name.substr(lastIndex);
+        const filename = vditor.options.upload.filename(file.name.substr(0, lastIndex)) + fileExt;
+
+        if (vditor.options.upload.accept) {
+            const isAccept = vditor.options.upload.accept.split(",").some((item) => {
+                const type = item.trim();
+                if (type.indexOf(".") === 0) {
+                    if (fileExt.toLowerCase() === type.toLowerCase()) {
+                        return true;
+                    }
+                } else {
+                    if (file.type.split("/")[0] === type.split("/")[0]) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+
+            if (!isAccept) {
+                errorTip += `<li>${file.name} ${window.VditorI18n.fileTypeError}</li>`;
+                validate = false;
+            }
+        }
+
+        if (validate) {
+            uploadFileList.push(file);
+            uploadingStr += `<li>${filename} ${window.VditorI18n.uploading} <a class="vditorCancelUpload" href="javascript:void(0)">${window.VditorI18n.cancelUpload}</a></li>`;
+        }
+    }
+
+    vditor.tip.show(`<ul>${errorTip}${uploadingStr}</ul>`);
+
+    if (vditor.options.upload.cancel) {
+        const vditorCancelUploadElement = vditor.tip.element.querySelector(".vditorCancelUpload");
+        if (vditorCancelUploadElement) {
+            vditorCancelUploadElement.addEventListener("click", () => {
+                vditor.options.upload.cancel(uploadFileList);
+                vditor.tip.hide();
+                vditor.upload.isUploading = false;
+            });
+        }
+    }
+
+    return uploadFileList;
+};
+
+const genUploadedLabel = (responseText: string, vditor: IVditor) => {
+    const editorElement = getElement(vditor);
+    editorElement.focus();
+    const response = JSON.parse(responseText);
+    let errorTip = "";
+
+    if (response.code === 1) {
+        errorTip = `${response.msg}`;
+    }
+
+    if (response.data.errFiles && response.data.errFiles.length > 0) {
+        errorTip = `<ul><li>${errorTip}</li>`;
+        response.data.errFiles.forEach((data: string) => {
+            const lastIndex = data.lastIndexOf(".");
+            const filename = vditor.options.upload.filename(data.substr(0, lastIndex)) + data.substr(lastIndex);
+            errorTip += `<li>${filename} ${window.VditorI18n.uploadError}</li>`;
+        });
+        errorTip += "</ul>";
+    }
+
+    if (errorTip) {
+        vditor.tip.show(errorTip);
+    } else {
+        vditor.tip.hide();
+    }
+
+    let succFileText = "";
+    Object.keys(response.data.succMap).forEach((key) => {
+        const path = response.data.succMap[key];
+        const lastIndex = key.lastIndexOf(".");
+        let type = key.substr(lastIndex);
+        const filename = vditor.options.upload.filename(key.substr(0, lastIndex)) + type;
+        type = type.toLowerCase();
+        if (type.indexOf(".wav") === 0 || type.indexOf(".mp3") === 0 || type.indexOf(".ogg") === 0) {
+            if (vditor.currentMode === "wysiwyg") {
+                succFileText += `<div class="vditor-wysiwyg__block" data-type="html-block"
+ data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre><pre class="vditor-wysiwyg__preview" data-render="1"><audio controls="controls" src="${path}"></audio></pre></div>\n`;
+            } else if (vditor.currentMode === "ir") {
+                succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
+            } else {
+                succFileText += `[${filename}](${path})\n`;
+            }
+        } else if (type.indexOf(".apng") === 0
+            || type.indexOf(".bmp") === 0
+            || type.indexOf(".gif") === 0
+            || type.indexOf(".ico") === 0 || type.indexOf(".cur") === 0
+            || type.indexOf(".jpg") === 0 || type.indexOf(".jpeg") === 0 || type.indexOf(".jfif") === 0 || type.indexOf(".pjp") === 0 || type.indexOf(".pjpeg") === 0
+            || type.indexOf(".png") === 0
+            || type.indexOf(".svg") === 0
+            || type.indexOf(".webp") === 0) {
+            if (vditor.currentMode === "wysiwyg") {
+                succFileText += `<img alt="${filename}" src="${path}">\n`;
+            } else {
+                succFileText += `![${filename}](${path})\n`;
+            }
+        } else {
+            if (vditor.currentMode === "wysiwyg") {
+                succFileText += `<a href="${path}">${filename}</a>\n`;
+            } else {
+                succFileText += `[${filename}](${path})\n`;
+            }
+        }
+    });
+    setSelectionFocus(vditor.upload.range);
+    document.execCommand("insertHTML", false, succFileText);
+    vditor.upload.range = getSelection().getRangeAt(0).cloneRange();
+};
+
+const uploadFiles =
+    async (vditor: IVditor, files: FileList | DataTransferItemList | File[], element?: HTMLInputElement) => {
+        // FileList | DataTransferItemList | File[] => File[]
+        let fileList = [];
+        const filesMax = vditor.options.upload.multiple === true ? files.length : 1;
+        for (let i = 0; i < filesMax; i++) {
+            let fileItem = files[i];
+            if (fileItem instanceof DataTransferItem) {
+                fileItem = fileItem.getAsFile();
+            }
+            fileList.push(fileItem);
+        }
+
+        if (vditor.options.upload.handler) {
+            const isValidate = await vditor.options.upload.handler(fileList);
+            if (element) {
+                element.value = "";
+            }
+            if (typeof isValidate === "string") {
+                vditor.tip.show(isValidate);
+                return;
+            }
+            return;
+        }
+
+        if (!vditor.options.upload.url || !vditor.upload) {
+            if (element) {
+                element.value = "";
+            }
+            vditor.tip.show("please config: options.upload.url");
+            return;
+        }
+
+        if (vditor.options.upload.file) {
+            fileList = await vditor.options.upload.file(fileList);
+        }
+
+        if (vditor.options.upload.validate) {
+            const isValidate = vditor.options.upload.validate(fileList);
+            if (typeof isValidate === "string") {
+                vditor.tip.show(isValidate);
+                return;
+            }
+        }
+        const editorElement = getElement(vditor);
+
+        vditor.upload.range = getEditorRange(vditor);
+
+        const validateResult = validateFile(vditor, fileList);
+        if (validateResult.length === 0) {
+            if (element) {
+                element.value = "";
+            }
+            return;
+        }
+
+        const formData = new FormData();
+
+        const extraData = vditor.options.upload.extraData;
+        for (const key of Object.keys(extraData)) {
+            formData.append(key, extraData[key]);
+        }
+
+        for (let i = 0, iMax = validateResult.length; i < iMax; i++) {
+            formData.append(vditor.options.upload.fieldName, validateResult[i]);
+        }
+
+        const xhr = new XMLHttpRequest();
+        vditor.upload.xhr = xhr;
+        xhr.open("POST", vditor.options.upload.url);
+        if (vditor.options.upload.token) {
+            xhr.setRequestHeader("X-Upload-Token", vditor.options.upload.token);
+        }
+        if (vditor.options.upload.withCredentials) {
+            xhr.withCredentials = true;
+        }
+        setHeaders(vditor, xhr);
+        vditor.upload.isUploading = true;
+        editorElement.setAttribute("contenteditable", "false");
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                vditor.upload.isUploading = false;
+                editorElement.setAttribute("contenteditable", "true");
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    if (vditor.options.upload.success) {
+                        vditor.options.upload.success(editorElement, xhr.responseText);
+                    } else {
+                        let responseText = xhr.responseText;
+                        if (vditor.options.upload.format) {
+                            responseText = vditor.options.upload.format(files as File [], xhr.responseText);
+                        }
+                        genUploadedLabel(responseText, vditor);
+                    }
+                } else {
+                    if (vditor.options.upload.error) {
+                        vditor.options.upload.error(xhr.responseText);
+                    } else {
+                        vditor.tip.show(xhr.responseText);
+                    }
+                }
+                if (element) {
+                    element.value = "";
+                }
+                vditor.upload.element.style.display = "none";
+                vditor.upload.xhr = undefined;
+            }
+        };
+        xhr.upload.onprogress = (event: ProgressEvent) => {
+            if (!event.lengthComputable) {
+                return;
+            }
+            const progress = event.loaded / event.total * 100;
+            vditor.upload.element.style.display = "block";
+            const progressBar = vditor.upload.element;
+            progressBar.style.width = progress + "%";
+        };
+        xhr.send(formData);
+    };
+
+export { Upload, uploadFiles };

package/src/ts/upload/setHeaders.ts

@@ -0,0 +1,10 @@
+export const setHeaders = (vditor: IVditor, xhr: XMLHttpRequest) => {
+    if (vditor.options.upload.setHeaders) {
+        vditor.options.upload.headers =  vditor.options.upload.setHeaders();
+    }
+    if (vditor.options.upload.headers) {
+        Object.keys(vditor.options.upload.headers).forEach((key) => {
+            xhr.setRequestHeader(key, vditor.options.upload.headers[key]);
+        });
+    }
+};