:recycle: split view

CHANGELOG.md

@@ -58,7 +58,7 @@
 * [221](https://github.com/Vanessa219/vditor/issues/221) 输入复选框时出现乱码 `修复缺陷`
 * [222](https://github.com/Vanessa219/vditor/issues/222) The cursor does not enter when added in the middle of the list. `修复缺陷`
 * 文档更新
-  * 修改 `options.mode` 可选值为：'markdown', 'wysiwyg', 'typora'
+  * 修改 `options.mode` 可选值为：'sv', 'wysiwyg', 'ir'
   * toolbar 中的 wysiwyg 修改为 'edit-mode'
 
 ### v2.3.0 / 2020-03-12

src/assets/index.d.min.ts

@@ -135,7 +135,7 @@ interface IOptions {
     resize?: IResize;
     counter?: number;
     cache?: boolean;
-    mode?: "wysiwyg-show" | "markdown-show" | "wysiwyg-only" | "markdown-only";
+    mode?: "sv" | "wysiwyg" | "ir";
     preview?: IPreview;
     hint?: IHint;
     upload?: IUpload;

src/index.ts

@@ -1,11 +1,6 @@
 import {VDITOR_VERSION} from "./ts/constants";
 import {Counter} from "./ts/counter/index";
 import {DevTools} from "./ts/devtools";
-import {formatRender} from "./ts/editor/formatRender";
-import {getSelectText} from "./ts/editor/getSelectText";
-import {html2md} from "./ts/editor/html2md";
-import {Editor} from "./ts/editor/index";
-import {insertText} from "./ts/editor/insertText";
 import {Hint} from "./ts/hint/index";
 import {IR} from "./ts/ir";
 import {input as irInput} from "./ts/ir/input";
@@ -23,6 +18,11 @@ import {previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
 import {Preview} from "./ts/preview/index";
 import {Resize} from "./ts/resize/index";
+import {formatRender} from "./ts/sv/formatRender";
+import {getSelectText} from "./ts/sv/getSelectText";
+import {html2md} from "./ts/sv/html2md";
+import {Editor} from "./ts/sv/index";
+import {insertText} from "./ts/sv/insertText";
 import {Tip} from "./ts/tip";
 import {Toolbar} from "./ts/toolbar/index";
 import {disableToolbar} from "./ts/toolbar/setToolbar";
@@ -136,7 +136,7 @@ class Vditor {
     }
 
     public focus() {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             this.vditor.editor.element.focus();
         } else if (this.vditor.currentMode === "wysiwyg") {
             this.vditor.wysiwyg.element.focus();
@@ -146,7 +146,7 @@ class Vditor {
     }
 
     public blur() {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             this.vditor.editor.element.blur();
         } else if (this.vditor.currentMode === "wysiwyg") {
             this.vditor.wysiwyg.element.blur();
@@ -176,7 +176,7 @@ class Vditor {
     }
 
     public setSelection(start: number, end: number) {
-        if (this.vditor.currentMode !== "markdown") {
+        if (this.vditor.currentMode !== "sv") {
             console.error("所见即所得模式暂不支持该方法");
         } else {
             setSelectionByPosition(start, end, this.vditor.editor.element);
@@ -186,7 +186,7 @@ class Vditor {
     public getSelection() {
         if (this.vditor.currentMode === "wysiwyg") {
             return getSelectText(this.vditor.wysiwyg.element);
-        } else if (this.vditor.currentMode === "markdown") {
+        } else if (this.vditor.currentMode === "sv") {
             return getSelectText(this.vditor.editor.element);
         } else if (this.vditor.currentMode === "ir") {
             return getSelectText(this.vditor.ir.element);
@@ -194,7 +194,7 @@ class Vditor {
     }
 
     public renderPreview(value?: string) {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             this.vditor.preview.render(this.vditor, value);
         }
     }
@@ -202,7 +202,7 @@ class Vditor {
     public getCursorPosition() {
         if (this.vditor.currentMode === "wysiwyg") {
             return getCursorPosition(this.vditor.wysiwyg.element);
-        } else if (this.vditor.currentMode === "markdown") {
+        } else if (this.vditor.currentMode === "sv") {
             return getCursorPosition(this.vditor.editor.element);
         } else if (this.vditor.currentMode === "ir") {
             return getCursorPosition(this.vditor.ir.element);
@@ -230,7 +230,7 @@ class Vditor {
     }
 
     public getHTML() {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             return md2htmlByVditor(getMarkdown(this.vditor), this.vditor);
         } else if (this.vditor.currentMode === "wysiwyg") {
             return this.vditor.lute.VditorDOM2HTML(this.vditor.wysiwyg.element.innerHTML);
@@ -251,7 +251,7 @@ class Vditor {
         if (window.getSelection().isCollapsed) {
             return;
         }
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             insertText(this.vditor, "", "", true);
         } else {
             document.execCommand("delete", false);
@@ -259,7 +259,7 @@ class Vditor {
     }
 
     public updateValue(value: string) {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             insertText(this.vditor, value, "", true);
         } else {
             document.execCommand("insertHTML", false, value);
@@ -267,7 +267,7 @@ class Vditor {
     }
 
     public insertValue(value: string, render = true) {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             insertText(this.vditor, value, "");
         } else if (this.vditor.currentMode === "wysiwyg") {
             const range = getEditorRange(this.vditor.wysiwyg.element);
@@ -287,7 +287,7 @@ class Vditor {
     }
 
     public setValue(markdown: string) {
-        if (this.vditor.currentMode === "markdown") {
+        if (this.vditor.currentMode === "sv") {
             formatRender(this.vditor, markdown, {
                 end: markdown.length,
                 start: markdown.length,

src/ts/hint/index.ts

@@ -1,5 +1,5 @@
-import {formatRender} from "../editor/formatRender";
 import {processAfterRender} from "../ir/process";
+import {formatRender} from "../sv/formatRender";
 import {code160to32} from "../util/code160to32";
 import {getMarkdown} from "../util/getMarkdown";
 import {hasClosestByClassName} from "../util/hasClosest";
@@ -27,7 +27,7 @@ export class Hint {
         const position = getSelectPosition(vditor.currentMode === "wysiwyg" ?
             vditor.wysiwyg.element : vditor.editor.element);
         let currentLineValue: string;
-        if (vditor.currentMode !== "markdown") {
+        if (vditor.currentMode !== "sv") {
             const range = getSelection().getRangeAt(0);
             currentLineValue = range.startContainer.textContent.substring(0, range.startOffset) || "";
         } else {
@@ -86,7 +86,7 @@ export class Hint {
         const splitChar = value.indexOf("@") === 0 ? "@" : ":";
         const range: Range = window.getSelection().getRangeAt(0);
 
-        if (vditor.currentMode !== "markdown") {
+        if (vditor.currentMode !== "sv") {
             range.setStart(range.startContainer, range.startContainer.textContent.lastIndexOf(splitChar));
             range.deleteContents();
             if (value.indexOf(":") > -1) {

src/ts/markdown/md2html.ts

@@ -2,15 +2,15 @@ import {VDITOR_VERSION} from "../constants";
 import {addScript} from "../util/addScript";
 
 export const loadLuteJs = (vditor: IVditor | string) => {
-    let cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
-    if (typeof vditor === "string" && vditor) {
-        cdn = vditor;
-    } else if (typeof vditor === "object" && vditor.options.cdn) {
-        cdn = vditor.options.cdn;
-    }
-    addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
+    // let cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
+    // if (typeof vditor === "string" && vditor) {
+    //     cdn = vditor;
+    // } else if (typeof vditor === "object" && vditor.options.cdn) {
+    //     cdn = vditor.options.cdn;
+    // }
+    // addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
     // addScript(`/src/js/lute/lute.min.js`, "vditorLuteScript");
-    // addScript(`http://192.168.80.35:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
+    addScript(`http://192.168.2.248:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
 
     if (vditor && typeof vditor === "object" && !vditor.lute) {
         vditor.lute = Lute.New();

src/ts/toolbar/Both.ts

@@ -6,7 +6,7 @@ import {MenuItem} from "./MenuItem";
 export class Both extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        if (vditor.currentMode !== "markdown") {
+        if (vditor.currentMode !== "sv") {
             this.element.style.display = "none";
         }
         this.element.children[0].innerHTML = menuItem.icon || bothSVG;
@@ -19,7 +19,7 @@ export class Both extends MenuItem {
 
     public _bindEvent(vditor: IVditor) {
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (vditor.currentMode !== "markdown") {
+            if (vditor.currentMode !== "sv") {
                 return;
             }
             if (vditor.currentPreviewMode === "both") {

src/ts/toolbar/EditMode.ts

@@ -1,6 +1,6 @@
 import editSVG from "../../assets/icons/edit.svg";
-import {formatRender} from "../editor/formatRender";
 import {processAfterRender} from "../ir/process";
+import {formatRender} from "../sv/formatRender";
 import {setPadding} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
@@ -54,7 +54,7 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
         vditor.wysiwyg.element.focus();
         vditor.wysiwyg.popover.style.display = "none";
         setPadding(vditor);
-    } else if (type === "markdown") {
+    } else if (type === "sv") {
         showToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
         vditor.toolbar.element.style.display = "block";
         removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
@@ -71,7 +71,7 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
         }
 
         const wysiwygMD = getMarkdown(vditor);
-        vditor.currentMode = "markdown";
+        vditor.currentMode = "sv";
         formatRender(vditor, wysiwygMD, undefined);
         vditor.editor.element.focus();
     }
@@ -87,9 +87,9 @@ export class EditMode extends MenuItem {
 
         this.panelElement = document.createElement("div");
         this.panelElement.className = "vditor-hint vditor-arrow";
-        this.panelElement.innerHTML = `<button data-value="wysiwyg">WYSIWYG &lt;${updateHotkeyTip("⌘-⌥-7")}></button>
-<button data-value="markdown">Split View &lt;${updateHotkeyTip("⌘-⌥-9")}></button>`;
-        // <button data-value="ir">Instant Rendering &lt;${updateHotkeyTip("⌘-⌥-8")}></button>
+        this.panelElement.innerHTML = `<button>WYSIWYG &lt;${updateHotkeyTip("⌘-⌥-7")}></button>
+<button>Split View &lt;${updateHotkeyTip("⌘-⌥-9")}></button>`;
+        // <button>Instant Rendering &lt;${updateHotkeyTip("⌘-⌥-8")}></button>
 
         this.element.appendChild(this.panelElement);
 
@@ -123,7 +123,7 @@ export class EditMode extends MenuItem {
 
         this.panelElement.children.item(1).addEventListener(getEventName(), (event: Event) => {
             // markdown
-            setEditMode(vditor, "markdown", event);
+            setEditMode(vditor, "sv", event);
         });
     }
 }

src/ts/toolbar/Emoji.ts

@@ -1,5 +1,5 @@
 import emojiSVG from "../../assets/icons/emoji.svg";
-import {insertText} from "../editor/insertText";
+import {insertText} from "../sv/insertText";
 import {getEventName} from "../util/compatibility";
 import {getEditorRange, setSelectionFocus} from "../util/selection";
 import {insertHTML} from "../wysiwyg/insertHTML";

src/ts/toolbar/Format.ts

@@ -1,5 +1,5 @@
 import formatSVG from "../../assets/icons/outdent.svg";
-import {formatRender} from "../editor/formatRender";
+import {formatRender} from "../sv/formatRender";
 import {getEventName} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {getSelectPosition} from "../util/selection";
@@ -8,7 +8,7 @@ import {MenuItem} from "./MenuItem";
 export class Format extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        if (vditor.currentMode !== "markdown") {
+        if (vditor.currentMode !== "sv") {
             this.element.style.display = "none";
         }
         this.element.children[0].innerHTML = menuItem.icon || formatSVG;

src/ts/toolbar/Headings.ts

@@ -1,5 +1,5 @@
 import headingsSVG from "../../assets/icons/headings.svg";
-import {insertText} from "../editor/insertText";
+import {insertText} from "../sv/insertText";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 import {removeHeading, setHeading} from "../wysiwyg/setHeading";

src/ts/toolbar/MenuItem.ts

@@ -1,5 +1,5 @@
-import {insertText} from "../editor/insertText";
 import {i18n} from "../i18n/index";
+import {insertText} from "../sv/insertText";
 import {getEventName} from "../util/compatibility";
 import {updateHotkeyTip} from "../util/compatibility";
 import {toolbarEvent} from "../wysiwyg/toolbarEvent";

src/ts/toolbar/Preview.ts

@@ -6,7 +6,7 @@ import {MenuItem} from "./MenuItem";
 export class Preview extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        if (vditor.currentMode !== "markdown") {
+        if (vditor.currentMode !== "sv") {
             this.element.style.display = "none";
         }
         this.element.children[0].innerHTML = menuItem.icon || previewSVG;

src/ts/toolbar/Redo.ts

@@ -12,7 +12,7 @@ export class Redo extends MenuItem {
             if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
                 return;
             }
-            if (vditor.currentMode === "markdown") {
+            if (vditor.currentMode === "sv") {
                 vditor.undo.redo(vditor);
             } else {
                 vditor.wysiwygUndo.redo(vditor);

src/ts/toolbar/Undo.ts

@@ -12,7 +12,7 @@ export class Undo extends MenuItem {
             if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
                 return;
             }
-            if (vditor.currentMode === "markdown") {
+            if (vditor.currentMode === "sv") {
                 vditor.undo.undo(vditor);
             } else {
                 vditor.wysiwygUndo.undo(vditor);

src/ts/types/index.d.ts

@@ -244,7 +244,7 @@ interface IOptions {
     resize?: IResize;
     counter?: number;
     cache?: boolean;
-    mode?: "wysiwyg" | "markdown" | "ir";
+    mode?: "wysiwyg" | "sv" | "ir";
     preview?: IPreview;
     hint?: IHint;
     hideToolbar?: boolean;
@@ -278,7 +278,7 @@ interface IVditor {
     options: IOptions;
     originalInnerHTML: string;
     lute: ILute;
-    currentMode: "markdown" | "wysiwyg" | "ir";
+    currentMode: "sv" | "wysiwyg" | "ir";
     currentPreviewMode: keyof IPreviewMode;
     devtools?: {
         element: HTMLDivElement,

src/ts/ui/initUI.ts

@@ -1,6 +1,6 @@
-import {formatRender} from "../editor/formatRender";
-import {html2md} from "../editor/html2md";
 import {processAfterRender} from "../ir/process";
+import {formatRender} from "../sv/formatRender";
+import {html2md} from "../sv/html2md";
 import {setEditMode} from "../toolbar/EditMode";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {setTheme} from "./setTheme";
@@ -112,7 +112,7 @@ const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
 
     if (vditor.options.mode === "wysiwyg") {
         renderDomByMd(vditor, initValue, false);
-    } else if (vditor.options.mode === "markdown") {
+    } else if (vditor.options.mode === "sv") {
         formatRender(vditor, initValue, undefined, {
             enableAddUndoStack: true,
             enableHint: false,

src/ts/undo/index.ts

@@ -1,5 +1,5 @@
 import DiffMatchPatch, {diff_match_patch, patch_obj} from "diff-match-patch";
-import {formatRender} from "../editor/formatRender";
+import {formatRender} from "../sv/formatRender";
 import {disableToolbar} from "../toolbar/setToolbar";
 import {enableToolbar} from "../toolbar/setToolbar";
 import {scrollCenter} from "../util/editorCommenEvent";

src/ts/upload/index.ts

@@ -1,5 +1,5 @@
-import {insertText} from "../editor/insertText";
 import {i18n} from "../i18n/index";
+import {insertText} from "../sv/insertText";
 import {getEditorRange, setSelectionFocus} from "../util/selection";
 import {setHeaders} from "./setHeaders";
 
@@ -73,7 +73,7 @@ const validateFile = (vditor: IVditor, files: File[]) => {
 };
 
 const genUploadedLabel = (responseText: string, vditor: IVditor) => {
-    const editorElement = vditor.currentMode === "markdown" ? vditor.editor.element : vditor.wysiwyg.element;
+    const editorElement = vditor.currentMode === "sv" ? vditor.editor.element : vditor.wysiwyg.element;
     editorElement.focus();
     const response = JSON.parse(responseText);
     let errorTip = "";
@@ -181,7 +181,7 @@ const uploadFiles = (vditor: IVditor, files: FileList | DataTransferItemList | F
             return;
         }
     }
-    const editorElement = vditor.currentMode === "markdown" ? vditor.editor.element : vditor.wysiwyg.element;
+    const editorElement = vditor.currentMode === "sv" ? vditor.editor.element : vditor.wysiwyg.element;
 
     vditor.upload.range = getEditorRange(editorElement);
 

src/ts/util/editorCommenEvent.ts

@@ -1,6 +1,6 @@
-import {getSelectText} from "../editor/getSelectText";
-import {insertText} from "../editor/insertText";
-import {processKeydown as mdProcessKeydown} from "../editor/processKeydown";
+import {getSelectText} from "../sv/getSelectText";
+import {insertText} from "../sv/insertText";
+import {processKeydown as mdProcessKeydown} from "../sv/processKeydown";
 import {setEditMode} from "../toolbar/EditMode";
 import {hidePanel} from "../toolbar/setToolbar";
 import {getCursorPosition} from "../util/selection";
@@ -79,7 +79,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             return;
         }
 
-        if (vditor.currentMode === "markdown") {
+        if (vditor.currentMode === "sv") {
             if (mdProcessKeydown(vditor, event)) {
                 return;
             }
@@ -97,7 +97,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
 
         // undo
         if (!vditor.toolbar.elements.undo && matchHotKey("⌘-Z", event)) {
-            if (vditor.currentMode === "markdown") {
+            if (vditor.currentMode === "sv") {
                 vditor.undo.undo(vditor);
             } else if (vditor.currentMode === "wysiwyg") {
                 vditor.wysiwygUndo.undo(vditor);
@@ -110,7 +110,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
 
         // redo
         if (!vditor.toolbar.elements.redo && matchHotKey("⌘-Y", event)) {
-            if (vditor.currentMode === "markdown") {
+            if (vditor.currentMode === "sv") {
                 vditor.undo.redo(vditor);
             } else if (vditor.currentMode === "wysiwyg") {
                 vditor.wysiwygUndo.redo(vditor);
@@ -177,7 +177,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             } else if (event.code === "Digit8") {
                 setEditMode(vditor, "ir", event);
             } else if (event.code === "Digit9") {
-                setEditMode(vditor, "markdown", event);
+                setEditMode(vditor, "sv", event);
             }
         }
     });

src/ts/util/getMarkdown.ts

@@ -2,7 +2,7 @@ import {code160to32} from "../util/code160to32";
 import {addP2Li} from "../wysiwyg/addP2Li";
 
 export const getMarkdown = (vditor: IVditor) => {
-    if (vditor.currentMode === "markdown") {
+    if (vditor.currentMode === "sv") {
         // last char must be a `\n`.
         return code160to32(`${vditor.editor.element.textContent}\n`.replace(/\n\n$/, "\n"));
     } else if (vditor.currentMode === "wysiwyg") {

src/ts/util/processPasteCode.ts

@@ -1,4 +1,4 @@
-export const processPasteCode = (html: string, text: string, type = "markdown") => {
+export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
     tempElement.innerHTML = html;
     let isCode = false;