♻️ editor -> sv

src/index.ts

@@ -83,7 +83,7 @@ class Vditor {
             this.vditor.counter = new Counter(this.vditor);
         }
 
-        this.vditor.editor = new Editor(this.vditor);
+        this.vditor.sv = new Editor(this.vditor);
         this.vditor.undo = new Undo();
         this.vditor.wysiwyg = new WYSIWYG(this.vditor);
         this.vditor.wysiwygUndo = new WysiwygUndo();
@@ -112,7 +112,7 @@ class Vditor {
 
         loadLuteJs(this.vditor);
 
-        if (this.vditor.editor && (this.vditor.toolbar.elements.preview || this.vditor.toolbar.elements.both)) {
+        if (this.vditor.sv && (this.vditor.toolbar.elements.preview || this.vditor.toolbar.elements.both)) {
             this.vditor.preview = new Preview(this.vditor);
         }
 
@@ -137,7 +137,7 @@ class Vditor {
 
     public focus() {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.editor.element.focus();
+            this.vditor.sv.element.focus();
         } else if (this.vditor.currentMode === "wysiwyg") {
             this.vditor.wysiwyg.element.focus();
         } else if (this.vditor.currentMode === "ir") {
@@ -147,7 +147,7 @@ class Vditor {
 
     public blur() {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.editor.element.blur();
+            this.vditor.sv.element.blur();
         } else if (this.vditor.currentMode === "wysiwyg") {
             this.vditor.wysiwyg.element.blur();
         } else if (this.vditor.currentMode === "ir") {
@@ -159,7 +159,7 @@ class Vditor {
         disableToolbar(this.vditor.toolbar.elements, ["emoji", "headings", "bold", "italic", "strike", "link",
             "list", "ordered-list", "check", "quote", "line", "code", "inline-code", "upload", "record", "table",
             "undo", "redo", "wysiwyg"]);
-        this.vditor.editor.element.setAttribute("contenteditable", "false");
+        this.vditor.sv.element.setAttribute("contenteditable", "false");
         this.vditor.wysiwyg.element.setAttribute("contenteditable", "false");
         this.vditor.wysiwyg.element.setAttribute("contenteditable", "false");
     }
@@ -168,7 +168,7 @@ class Vditor {
         enableToolbar(this.vditor.toolbar.elements, ["emoji", "headings", "bold", "italic", "strike", "link",
             "list", "ordered-list", "check", "quote", "line", "code", "inline-code", "upload", "record", "table", "wysiwyg"]);
         this.vditor.undo.enableIcon(this.vditor);
-        this.vditor.editor.element.setAttribute("contenteditable", "true");
+        this.vditor.sv.element.setAttribute("contenteditable", "true");
         this.vditor.wysiwygUndo.enableIcon(this.vditor);
         this.vditor.wysiwyg.element.setAttribute("contenteditable", "true");
         this.vditor.irUndo.enableIcon(this.vditor);
@@ -179,15 +179,15 @@ class Vditor {
         if (this.vditor.currentMode !== "sv") {
             console.error("所见即所得模式暂不支持该方法");
         } else {
-            setSelectionByPosition(start, end, this.vditor.editor.element);
+            setSelectionByPosition(start, end, this.vditor.sv.element);
         }
     }
 
     public getSelection() {
         if (this.vditor.currentMode === "wysiwyg") {
             return getSelectText(this.vditor.wysiwyg.element);
         } else if (this.vditor.currentMode === "sv") {
-            return getSelectText(this.vditor.editor.element);
+            return getSelectText(this.vditor.sv.element);
         } else if (this.vditor.currentMode === "ir") {
             return getSelectText(this.vditor.ir.element);
         }
@@ -203,7 +203,7 @@ class Vditor {
         if (this.vditor.currentMode === "wysiwyg") {
             return getCursorPosition(this.vditor.wysiwyg.element);
         } else if (this.vditor.currentMode === "sv") {
-            return getCursorPosition(this.vditor.editor.element);
+            return getCursorPosition(this.vditor.sv.element);
         } else if (this.vditor.currentMode === "ir") {
             return getCursorPosition(this.vditor.ir.element);
         }

src/ts/hint/index.ts

@@ -25,7 +25,7 @@ export class Hint {
             return;
         }
         const position = getSelectPosition(vditor.currentMode === "wysiwyg" ?
-            vditor.wysiwyg.element : vditor.editor.element);
+            vditor.wysiwyg.element : vditor.sv.element);
         let currentLineValue: string;
         if (vditor.currentMode !== "sv") {
             const range = getSelection().getRangeAt(0);
@@ -52,7 +52,7 @@ export class Hint {
                 this.timeId = window.setTimeout(() => {
                     this.genHTML(vditor.options.hint.at(key), key,
                         vditor.currentMode === "wysiwyg" ?
-                            vditor.wysiwyg.element : vditor.editor.element, vditor);
+                            vditor.wysiwyg.element : vditor.sv.element, vditor);
                 }, vditor.options.hint.delay);
             }
             if (!isAt) {
@@ -74,7 +74,7 @@ export class Hint {
                     }
                 });
                 this.genHTML(matchEmojiData, key, vditor.currentMode === "wysiwyg" ?
-                    vditor.wysiwyg.element : vditor.editor.element, vditor);
+                    vditor.wysiwyg.element : vditor.sv.element, vditor);
             }
         }
     }
@@ -109,7 +109,7 @@ export class Hint {
                 processAfterRender(vditor);
             }
         } else {
-            const position = getSelectPosition(vditor.editor.element, range);
+            const position = getSelectPosition(vditor.sv.element, range);
             const text = getMarkdown(vditor);
             const preText = text.substring(0, text.substring(0, position.start).lastIndexOf(splitChar));
             formatRender(vditor, preText + value + text.substring(position.start),

src/ts/ir/index.ts

@@ -4,7 +4,7 @@ import {expandMarker} from "./expandMarker";
 import {input} from "./input";
 
 class IR {
-    public element: HTMLElement;
+    public element: HTMLPreElement;
     public composingLock: boolean = false;
 
     constructor(vditor: IVditor) {

src/ts/ir/processKeydown.ts

@@ -3,4 +3,4 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     if (event.isComposing) {
         return false;
     }
-}
+};

src/ts/resize/index.ts

@@ -34,8 +34,8 @@ export class Resize {
                     vditorElement.style.height = Math.max(minHeight, height + (moveEvent.clientY - y)) + "px";
                 }
                 if (vditor.options.typewriterMode) {
-                    vditor.editor.element.style.paddingBottom =
-                        vditor.editor.element.parentElement.offsetHeight / 2 + "px";
+                    vditor.sv.element.style.paddingBottom =
+                        vditor.sv.element.parentElement.offsetHeight / 2 + "px";
                 }
             };
 

src/ts/sv/formatRender.ts

@@ -31,14 +31,14 @@ export const formatRender = (vditor: IVditor, content: string, position?: { star
 
     if (textList.length <= 2 && isEmpty) {
         // 当内容等于空或 \n 时把编辑器内部元素置空，显示 placeholder 文字
-        vditor.editor.element.innerHTML = "";
+        vditor.sv.element.innerHTML = "";
     } else {
         // TODO: 使用虚拟 Dom
-        vditor.editor.element.innerHTML = html || newLine;
+        vditor.sv.element.innerHTML = html || newLine;
     }
 
     if (position) {
-        setSelectionByPosition(position.start, position.end, vditor.editor.element);
+        setSelectionByPosition(position.start, position.end, vditor.sv.element);
     }
 
     inputEvent(vditor, {

src/ts/sv/html2md.ts

@@ -38,7 +38,7 @@ export const html2md = (vditor: IVditor, textHTML: string, textPlain?: string) =
                                         return;
                                     }
                                     const original = responseJSON.data.originalURL;
-                                    setSelectionByInlineText(original, vditor.editor.element.childNodes);
+                                    setSelectionByInlineText(original, vditor.sv.element.childNodes);
                                     insertText(vditor, responseJSON.data.url, "", true);
                                 } else {
                                     vditor.tip.show(responseJSON.msg);

src/ts/sv/insertText.ts

@@ -4,9 +4,9 @@ import {formatRender} from "./formatRender";
 
 export const insertText = (vditor: IVditor, prefix: string, suffix: string, replace: boolean = false,
                            toggle: boolean = false) => {
-    const range = getEditorRange(vditor.editor.element);
+    const range = getEditorRange(vditor.sv.element);
 
-    const position = getSelectPosition(vditor.editor.element, range);
+    const position = getSelectPosition(vditor.sv.element, range);
     const content = getMarkdown(vditor);
 
     // select none || select something and need replace

src/ts/sv/processKeydown.ts

@@ -9,7 +9,7 @@ import {insertText} from "./insertText";
 export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     vditor.undo.recordFirstPosition(vditor);
 
-    const editorElement = vditor.editor.element;
+    const editorElement = vditor.sv.element;
     const position = getSelectPosition(editorElement);
     const text = getMarkdown(vditor);
     // tab and shift + tab

src/ts/toolbar/EditMode.ts

@@ -25,7 +25,7 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
 
     if (type === "ir") {
         vditor.toolbar.element.style.display = "none";
-        vditor.editor.element.style.display = "none";
+        vditor.sv.element.style.display = "none";
         vditor.preview.element.style.display = "none";
         vditor.wysiwyg.element.parentElement.style.display = "none";
         vditor.ir.element.parentElement.style.display = "block";
@@ -43,7 +43,7 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
     } else if (type === "wysiwyg") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
         vditor.toolbar.element.style.display = "block";
-        vditor.editor.element.style.display = "none";
+        vditor.sv.element.style.display = "none";
         vditor.preview.element.style.display = "none";
         vditor.wysiwyg.element.parentElement.style.display = "block";
         vditor.ir.element.parentElement.style.display = "none";
@@ -62,18 +62,18 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
         vditor.wysiwyg.element.parentElement.style.display = "none";
         vditor.ir.element.parentElement.style.display = "none";
         if (vditor.currentPreviewMode === "both") {
-            vditor.editor.element.style.display = "block";
+            vditor.sv.element.style.display = "block";
             vditor.preview.element.style.display = "block";
         } else if (vditor.currentPreviewMode === "preview") {
             vditor.preview.element.style.display = "block";
         } else if (vditor.currentPreviewMode === "editor") {
-            vditor.editor.element.style.display = "block";
+            vditor.sv.element.style.display = "block";
         }
 
         const wysiwygMD = getMarkdown(vditor);
         vditor.currentMode = "sv";
         formatRender(vditor, wysiwygMD, undefined);
-        vditor.editor.element.focus();
+        vditor.sv.element.focus();
     }
 };
 

src/ts/toolbar/Format.ts

@@ -11,7 +11,7 @@ export class Format extends MenuItem {
         this.element.children[0].innerHTML = menuItem.icon || formatSVG;
         this.element.children[0].addEventListener(getEventName(), (event) => {
             formatRender(vditor,  vditor.lute.FormatMd( getMarkdown(vditor)),
-                getSelectPosition(vditor.editor.element, getSelection().getRangeAt(0)));
+                getSelectPosition(vditor.sv.element, getSelection().getRangeAt(0)));
             event.preventDefault();
         });
     }

src/ts/toolbar/Record.ts

@@ -20,7 +20,7 @@ export class Record extends MenuItem {
                 return;
             }
             event.preventDefault();
-            const editorElement = vditor.currentMode === "wysiwyg" ? vditor.wysiwyg.element : vditor.editor.element;
+            const editorElement = vditor.currentMode === "wysiwyg" ? vditor.wysiwyg.element : vditor.sv.element;
             if (!mediaRecorder) {
                 navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
                     mediaRecorder = new RecordMedia(mediaStream);

src/ts/types/index.d.ts

@@ -295,7 +295,7 @@ interface IVditor {
         element: HTMLElement
         render(vditor: IVditor, value?: string): void,
     };
-    editor?: {
+    sv?: {
         element: HTMLPreElement,
     };
     counter?: {
@@ -351,7 +351,7 @@ interface IVditor {
         composingLock: boolean,
     };
     ir?: {
-        element: HTMLElement,
+        element: HTMLPreElement,
         composingLock: boolean,
     };
 }

src/ts/ui/initUI.ts

@@ -26,7 +26,7 @@ export const initUI = (vditor: IVditor) => {
 
     contentElement.appendChild(vditor.wysiwyg.element.parentElement);
 
-    contentElement.appendChild(vditor.editor.element);
+    contentElement.appendChild(vditor.sv.element);
 
     contentElement.appendChild(vditor.ir.element.parentElement);
 

src/ts/ui/setPreviewMode.ts

@@ -9,7 +9,7 @@ export const setPreviewMode = (mode: keyof IPreviewMode, vditor: IVditor) => {
 
     switch (mode) {
         case "both":
-            vditor.editor.element.style.display = "block";
+            vditor.sv.element.style.display = "block";
             vditor.preview.element.style.display = "block";
             vditor.preview.render(vditor);
 
@@ -18,18 +18,18 @@ export const setPreviewMode = (mode: keyof IPreviewMode, vditor: IVditor) => {
 
             break;
         case "editor":
-            vditor.editor.element.style.display = "block";
+            vditor.sv.element.style.display = "block";
             vditor.preview.element.style.display = "none";
 
             removeCurrentToolbar(vditor.toolbar.elements, ["preview"]);
             removeCurrentToolbar(vditor.toolbar.elements, ["both"]);
 
             break;
         case "preview":
-            vditor.editor.element.style.display = "none";
+            vditor.sv.element.style.display = "none";
             vditor.preview.element.style.display = "block";
             vditor.preview.render(vditor);
-            vditor.editor.element.blur();
+            vditor.sv.element.blur();
 
             setCurrentToolbar(vditor.toolbar.elements, ["preview"]);
             removeCurrentToolbar(vditor.toolbar.elements, ["both"]);

src/ts/undo/index.ts

@@ -36,12 +36,12 @@ class Undo {
 
     public recordFirstPosition(vditor: IVditor) {
         if (this.undoStack.length === 1) {
-            this.undoStack[0].end = getSelectPosition(vditor.editor.element).end;
+            this.undoStack[0].end = getSelectPosition(vditor.sv.element).end;
         }
     }
 
     public undo(vditor: IVditor) {
-        if (vditor.editor.element.getAttribute("contenteditable") === "false") {
+        if (vditor.sv.element.getAttribute("contenteditable") === "false") {
             return;
         }
         if (this.undoStack.length < 2) {
@@ -57,7 +57,7 @@ class Undo {
     }
 
     public redo(vditor: IVditor) {
-        if (vditor.editor.element.getAttribute("contenteditable") === "false") {
+        if (vditor.sv.element.getAttribute("contenteditable") === "false") {
             return;
         }
         const state = this.redoStack.pop();
@@ -78,7 +78,7 @@ class Undo {
                 return;
             }
             this.lastText = text;
-            this.undoStack.push({patchList, end: getSelectPosition(vditor.editor.element).end});
+            this.undoStack.push({patchList, end: getSelectPosition(vditor.sv.element).end});
             if (this.undoStack.length > this.stackSize) {
                 this.undoStack.shift();
             }
@@ -127,7 +127,7 @@ class Undo {
             enableInput: true,
         });
 
-        scrollCenter(vditor.editor.element);
+        scrollCenter(vditor.sv.element);
 
         if (this.undoStack.length > 1) {
             enableToolbar(vditor.toolbar.elements, ["undo"]);

src/ts/upload/getElement.ts

@@ -5,6 +5,6 @@ export const getElement = (vditor: IVditor) => {
         case "wysiwyg":
             return vditor.wysiwyg.element;
         case "sv":
-            return vditor.editor.element;
+            return vditor.sv.element;
     }
 };

src/ts/util/editorCommenEvent.ts

@@ -1,7 +1,7 @@
+import {processKeydown as irProcessKeydown} from "../ir/processKeydown";
 import {getSelectText} from "../sv/getSelectText";
 import {insertText} from "../sv/insertText";
 import {processKeydown as mdProcessKeydown} from "../sv/processKeydown";
-import {processKeydown as irProcessKeydown} from "../ir/processKeydown";
 import {setEditMode} from "../toolbar/EditMode";
 import {hidePanel} from "../toolbar/setToolbar";
 import {getCursorPosition} from "../util/selection";
@@ -195,7 +195,7 @@ export const selectEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("selectstart", (event: IHTMLInputEvent) => {
         editorElement.onmouseup = () => {
             const element = vditor.currentMode === "wysiwyg" ?
-                vditor.wysiwyg.element : vditor.editor.element;
+                vditor.wysiwyg.element : vditor.sv.element;
             const selectText = getSelectText(element);
             vditor.options.select(selectText);
         };

src/ts/util/getMarkdown.ts

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