@yltrcc/vditor 0.0.1

package/src/ts/toolbar/Indent.ts

@@ -0,0 +1,25 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {listIndent} from "../util/fixBrowserBehavior";
+import {hasClosestByMatchTag} from "../util/hasClosest";
+import {getEditorRange} from "../util/selection";
+import {MenuItem} from "./MenuItem";
+
+export class Indent extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            const range = getEditorRange(vditor);
+            const liElement = hasClosestByMatchTag(range.startContainer, "LI");
+            if (liElement) {
+                listIndent(vditor, liElement, range);
+            }
+        });
+    }
+}

package/src/ts/toolbar/Info.ts

@@ -0,0 +1,43 @@
+import {VDITOR_VERSION} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Info extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            vditor.tip.show(`<div style="max-width: 520px; font-size: 14px;line-height: 22px;margin-bottom: 14px;">
+<p style="text-align: center;margin: 14px 0">
+    <em>下一代的 Markdown 编辑器，为未来而构建</em>
+</p>
+<div style="display: flex;margin-bottom: 14px;flex-wrap: wrap;align-items: center">
+    <img src="https://unpkg.com/vditor/dist/images/logo.png" style="margin: 0 auto;height: 68px"/>
+    <div>&nbsp;&nbsp;</div>
+    <div style="flex: 1;min-width: 250px">
+        Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。
+        它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。
+    </div>
+</div>
+<div style="display: flex;flex-wrap: wrap;">
+    <ul style="list-style: none;flex: 1;min-width:148px">
+        <li>
+        项目地址：<a href="https://b3log.org/vditor" target="_blank">b3log.org/vditor</a>
+        </li>
+        <li>
+        开源协议：MIT
+        </li>
+    </ul>
+    <ul style="list-style: none;margin-right: 18px">
+        <li>
+        组件版本：Vditor v${VDITOR_VERSION} / Lute v${Lute.Version}
+        </li>
+        <li>
+        赞助捐赠：<a href="https://ld246.com/sponsor" target="_blank">https://ld246.com/sponsor</a>
+        </li>
+    </ul>
+</div>
+</div>`, 0);
+        });
+    }
+}

package/src/ts/toolbar/InsertAfter.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {insertEmptyBlock} from "../util/fixBrowserBehavior";
+import {MenuItem} from "./MenuItem";
+
+export class InsertAfter extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            insertEmptyBlock(vditor, "afterend");
+        });
+    }
+}

package/src/ts/toolbar/InsertBefore.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {insertEmptyBlock} from "../util/fixBrowserBehavior";
+import {MenuItem} from "./MenuItem";
+
+export class InsertBefore extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            insertEmptyBlock(vditor, "beforebegin");
+        });
+    }
+}

package/src/ts/toolbar/MenuItem.ts

@@ -0,0 +1,54 @@
+import {Constants} from "../constants";
+import {processToolbar} from "../ir/process";
+import {processToolbar as processToolbarSV} from "../sv/process";
+import {getEventName} from "../util/compatibility";
+import {updateHotkeyTip} from "../util/compatibility";
+import {toolbarEvent} from "../wysiwyg/toolbarEvent";
+
+export class MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        this.element = document.createElement("div");
+        if (menuItem.className) {
+            this.element.classList.add(...menuItem.className.split(" "));
+        }
+
+        let hotkey = menuItem.hotkey ? ` <${updateHotkeyTip(menuItem.hotkey)}>` : "";
+        if (menuItem.level === 2) {
+            hotkey = menuItem.hotkey ? ` &lt;${updateHotkeyTip(menuItem.hotkey)}&gt;` : "";
+        }
+        const tip = menuItem.tip ? menuItem.tip + hotkey : `${window.VditorI18n[menuItem.name]}${hotkey}`;
+        const tagName = menuItem.name === "upload" ? "div" : "button";
+        if (menuItem.level === 2) {
+            this.element.innerHTML = `<${tagName} data-type="${menuItem.name}">${tip}</${tagName}>`;
+        } else {
+            this.element.classList.add("vditor-toolbar__item");
+            const iconElement = document.createElement(tagName);
+            iconElement.setAttribute("data-type", menuItem.name);
+            iconElement.className = `vditor-tooltipped vditor-tooltipped__${menuItem.tipPosition}`;
+            iconElement.setAttribute("aria-label", tip);
+            iconElement.innerHTML = menuItem.icon;
+            this.element.appendChild(iconElement);
+        }
+
+        if (!menuItem.prefix) {
+            return;
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            if (vditor.currentMode === "wysiwyg") {
+                toolbarEvent(vditor, this.element.children[0], event);
+            } else if (vditor.currentMode === "ir") {
+                processToolbar(vditor, this.element.children[0],
+                    menuItem.prefix || "", menuItem.suffix || "");
+            } else {
+                processToolbarSV(vditor, this.element.children[0],
+                    menuItem.prefix || "", menuItem.suffix || "");
+            }
+        });
+    }
+}

package/src/ts/toolbar/Outdent.ts

@@ -0,0 +1,24 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import { listOutdent} from "../util/fixBrowserBehavior";
+import {hasClosestByMatchTag} from "../util/hasClosest";
+import {getEditorRange} from "../util/selection";
+import {MenuItem} from "./MenuItem";
+
+export class Outdent extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            const range = getEditorRange(vditor);
+            const liElement = hasClosestByMatchTag(range.startContainer, "LI");
+            if (liElement) {
+                listOutdent(vditor, liElement, range, liElement.parentElement);
+            }
+        });
+    }
+}

package/src/ts/toolbar/Outline.ts

@@ -0,0 +1,21 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Outline extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        if (vditor.options.outline) {
+            this.element.firstElementChild.classList.add("vditor-menu--current");
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            const btnElement = vditor.toolbar.elements.outline.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.options.outline.enable = !this.element.firstElementChild.classList.contains("vditor-menu--current");
+            vditor.outline.toggle(vditor, vditor.options.outline.enable);
+        });
+    }
+}

package/src/ts/toolbar/Preview.ts

@@ -0,0 +1,55 @@
+import {Constants} from "../constants";
+import {setPadding} from "../ui/initUI";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar, enableToolbar, hidePanel} from "./setToolbar";
+
+export class Preview extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            const btnElement = this.element.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+
+            const toolbars = Constants.EDIT_TOOLBARS.concat(["both", "edit-mode", "devtools"]);
+            if (btnElement.classList.contains("vditor-menu--current")) {
+                btnElement.classList.remove("vditor-menu--current");
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.style.display = "block";
+                    if (vditor.options.preview.mode === "both") {
+                        vditor.preview.element.style.display = "block";
+                    } else {
+                        vditor.preview.element.style.display = "none";
+                    }
+                } else {
+                    vditor[vditor.currentMode].element.parentElement.style.display = "block";
+                    vditor.preview.element.style.display = "none";
+                }
+                enableToolbar(vditor.toolbar.elements, toolbars);
+                vditor.outline.render(vditor);
+            } else {
+                disableToolbar(vditor.toolbar.elements, toolbars);
+                vditor.preview.element.style.display = "block";
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.style.display = "none";
+                } else {
+                    vditor[vditor.currentMode].element.parentElement.style.display = "none";
+                }
+                vditor.preview.render(vditor);
+                btnElement.classList.add("vditor-menu--current");
+                hidePanel(vditor, ["subToolbar", "hint", "popover"]);
+                setTimeout(() => {
+                    vditor.outline.render(vditor);
+                }, vditor.options.preview.delay + 10);
+            }
+            setPadding(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Record.ts

@@ -0,0 +1,60 @@
+import {Constants} from "../constants";
+import {uploadFiles} from "../upload/index";
+import {getEventName} from "../util/compatibility";
+import {RecordMedia} from "../util/RecordMedia";
+import {MenuItem} from "./MenuItem";
+
+export class Record extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        let mediaRecorder: RecordMedia;
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            const editorElement = vditor[vditor.currentMode].element;
+            if (!mediaRecorder) {
+                navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
+                    mediaRecorder = new RecordMedia(mediaStream);
+                    mediaRecorder.recorder.onaudioprocess = (e: AudioProcessingEvent) => {
+                        // Do nothing if not recording:
+                        if (!mediaRecorder.isRecording) {
+                            return;
+                        }
+
+                        // Copy the data from the input buffers;
+                        const left = e.inputBuffer.getChannelData(0);
+                        const right = e.inputBuffer.getChannelData(1);
+                        mediaRecorder.cloneChannelData(left, right);
+                    };
+                    mediaRecorder.startRecordingNewWavFile();
+                    vditor.tip.show(window.VditorI18n.recording);
+                    editorElement.setAttribute("contenteditable", "false");
+                    this.element.children[0].classList.add("vditor-menu--current");
+                }).catch(() => {
+                    vditor.tip.show(window.VditorI18n["record-tip"]);
+                });
+                return;
+            }
+
+            if (mediaRecorder.isRecording) {
+                mediaRecorder.stopRecording();
+                vditor.tip.hide();
+                const file: File = new File([mediaRecorder.buildWavFileBlob()],
+                    `record${(new Date()).getTime()}.wav`, {type: "video/webm"});
+                uploadFiles(vditor, [file]);
+                this.element.children[0].classList.remove("vditor-menu--current");
+            } else {
+                vditor.tip.show(window.VditorI18n.recording);
+                editorElement.setAttribute("contenteditable", "false");
+                mediaRecorder.startRecordingNewWavFile();
+                this.element.children[0].classList.add("vditor-menu--current");
+            }
+        });
+    }
+}

package/src/ts/toolbar/Redo.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar} from "./setToolbar";
+
+export class Redo extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        disableToolbar({redo: this.element}, ["redo"]);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.undo.redo(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Undo.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar} from "./setToolbar";
+
+export class Undo extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        disableToolbar({undo: this.element}, ["undo"]);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.undo.undo(vditor);
+        });
+    }
+}

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,192 @@
+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 {Export} from "./Export";
+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;
+            case "export":
+                menuItemObj = new Export(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;
+    }
+}