diff --git a/CHANGELOG.md b/CHANGELOG.md index 05259ae06..7555da666 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -93,6 +93,7 @@ * 文档更新 * 移除 IPreviewOptions 中的 className 并添加 theme * insertValue 添加 render 参数 + * 移除异步方法 ### v2.1.15 / 2020-02-09 diff --git a/src/index.ts b/src/index.ts index ce454cd58..3022052ce 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,7 +23,7 @@ import {Preview} from "./ts/preview/index"; import {Resize} from "./ts/resize/index"; import {Tip} from "./ts/tip"; import {Toolbar} from "./ts/toolbar/index"; -import {Ui} from "./ts/ui/index"; +import {initUI} from "./ts/ui/initUI"; import {setTheme} from "./ts/ui/setTheme"; import {Undo} from "./ts/undo"; import {WysiwygUndo} from "./ts/undo/WysiwygUndo"; @@ -122,9 +122,7 @@ class Vditor { this.vditor.hint = hint; } - const ui = new Ui(this.vditor); - - ui.afterRender(this.vditor); + initUI(this.vditor); if (mergedOptions.after) { mergedOptions.after(); diff --git a/src/ts/ui/index.ts b/src/ts/ui/index.ts deleted file mode 100644 index f8e7fe6f5..000000000 --- a/src/ts/ui/index.ts +++ /dev/null @@ -1,123 +0,0 @@ -import {formatRender} from "../editor/formatRender"; -import {html2md} from "../editor/html2md"; -import {renderDomByMd} from "../wysiwyg/renderDomByMd"; -import {setTheme} from "./setTheme"; - -export class Ui { - private contentElement: HTMLElement; - - constructor(vditor: IVditor) { - const vditorElement = document.getElementById(vditor.id); - vditorElement.innerHTML = ""; - vditorElement.classList.add("vditor"); - setTheme(vditor); - if (typeof vditor.options.height === "number") { - vditorElement.style.height = vditor.options.height + "px"; - } - if (typeof vditor.options.width === "number") { - vditorElement.style.width = vditor.options.width + "px"; - } else { - vditorElement.style.width = vditor.options.width; - } - - const toolbarElement = document.createElement("div"); - toolbarElement.className = "vditor-toolbar"; - Object.keys(vditor.toolbar.elements).forEach((key) => { - toolbarElement.appendChild(vditor.toolbar.elements[key]); - }); - - vditorElement.appendChild(toolbarElement); - - this.contentElement = document.createElement("div"); - this.contentElement.className = "vditor-content"; - - if (vditor.wysiwyg) { - this.contentElement.appendChild(vditor.wysiwyg.element.parentElement); - } - - if (vditor.editor) { - this.contentElement.appendChild(vditor.editor.element); - } - - if (vditor.preview) { - this.contentElement.appendChild(vditor.preview.element); - } - - if (vditor.toolbar.elements.devtools) { - this.contentElement.appendChild(vditor.devtools.element); - } - - if (vditor.options.counter > 0) { - this.contentElement.appendChild(vditor.counter.element); - } - - if (vditor.upload) { - this.contentElement.appendChild(vditor.upload.element); - } - - if (vditor.options.resize.enable) { - this.contentElement.appendChild(vditor.resize.element); - } - - if (vditor.hint) { - this.contentElement.appendChild(vditor.hint.element); - } - - this.contentElement.appendChild(vditor.tip.element); - - vditorElement.appendChild(this.contentElement); - } - - public afterRender(vditor: IVditor) { - let height: number = Math.max(this.contentElement.offsetHeight, 20); - if (height < 21 && typeof vditor.options.height === "number") { - height = vditor.options.height - 37; - } - - if (vditor.editor && vditor.options.typewriterMode) { - vditor.editor.element.style.paddingBottom = height / 2 + "px"; - } - - if (vditor.wysiwyg) { - const setPadding = () => { - const padding = (vditor.wysiwyg.element.parentElement.parentElement.clientWidth - - vditor.options.preview.maxWidth) / 2; - if (vditor.options.typewriterMode) { - vditor.wysiwyg.element.style.padding = `10px ${Math.max(35, padding)}px ${height / 2}px`; - } else { - vditor.wysiwyg.element.style.padding = `10px ${Math.max(35, padding)}px 10px`; - } - }; - setPadding(); - window.addEventListener("resize", () => { - setPadding(); - }); - } - - // set default value - let initValue = localStorage.getItem("vditor" + vditor.id); - if (!vditor.options.cache || !initValue) { - if (vditor.options.value) { - initValue = vditor.options.value; - } else if (vditor.originalInnerHTML) { - initValue = html2md(vditor, vditor.originalInnerHTML); - } - } - - if (!initValue) { - return; - } - - if (vditor.options.mode.indexOf("wysiwyg") > -1) { - renderDomByMd(vditor, initValue, false); - } - - if (vditor.options.mode.indexOf("markdown") > -1) { - formatRender(vditor, initValue, undefined, { - enableAddUndoStack: true, - enableHint: false, - enableInput: false, - }); - } - } -} diff --git a/src/ts/ui/initUI.ts b/src/ts/ui/initUI.ts new file mode 100644 index 000000000..ea4243cd7 --- /dev/null +++ b/src/ts/ui/initUI.ts @@ -0,0 +1,122 @@ +import {formatRender} from "../editor/formatRender"; +import {html2md} from "../editor/html2md"; +import {renderDomByMd} from "../wysiwyg/renderDomByMd"; +import {setTheme} from "./setTheme"; + +export const initUI = (vditor: IVditor) => { + const vditorElement = document.getElementById(vditor.id); + vditorElement.innerHTML = ""; + vditorElement.classList.add("vditor"); + setTheme(vditor); + if (typeof vditor.options.height === "number") { + vditorElement.style.height = vditor.options.height + "px"; + } + if (typeof vditor.options.width === "number") { + vditorElement.style.width = vditor.options.width + "px"; + } else { + vditorElement.style.width = vditor.options.width; + } + + const toolbarElement = document.createElement("div"); + toolbarElement.className = "vditor-toolbar"; + Object.keys(vditor.toolbar.elements).forEach((key) => { + toolbarElement.appendChild(vditor.toolbar.elements[key]); + }); + + vditorElement.appendChild(toolbarElement); + + const contentElement = document.createElement("div"); + contentElement.className = "vditor-content"; + + if (vditor.wysiwyg) { + contentElement.appendChild(vditor.wysiwyg.element.parentElement); + } + + if (vditor.editor) { + contentElement.appendChild(vditor.editor.element); + } + + if (vditor.preview) { + contentElement.appendChild(vditor.preview.element); + } + + if (vditor.toolbar.elements.devtools) { + contentElement.appendChild(vditor.devtools.element); + } + + if (vditor.options.counter > 0) { + contentElement.appendChild(vditor.counter.element); + } + + if (vditor.upload) { + contentElement.appendChild(vditor.upload.element); + } + + if (vditor.options.resize.enable) { + contentElement.appendChild(vditor.resize.element); + } + + if (vditor.hint) { + contentElement.appendChild(vditor.hint.element); + } + + contentElement.appendChild(vditor.tip.element); + + vditorElement.appendChild(contentElement); + + afterRender(vditor, contentElement); +} + +const afterRender = (vditor: IVditor, contentElement: HTMLElement) => { + + let height: number = Math.max(contentElement.offsetHeight, 20); + if (height < 21 && typeof vditor.options.height === "number") { + height = vditor.options.height - 37; + } + + if (vditor.editor && vditor.options.typewriterMode) { + vditor.editor.element.style.paddingBottom = height / 2 + "px"; + } + + if (vditor.wysiwyg) { + const setPadding = () => { + const padding = (vditor.wysiwyg.element.parentElement.parentElement.clientWidth + - vditor.options.preview.maxWidth) / 2; + if (vditor.options.typewriterMode) { + vditor.wysiwyg.element.style.padding = `10px ${Math.max(35, padding)}px ${height / 2}px`; + } else { + vditor.wysiwyg.element.style.padding = `10px ${Math.max(35, padding)}px 10px`; + } + }; + setPadding(); + window.addEventListener("resize", () => { + setPadding(); + }); + } + + // set default value + let initValue = localStorage.getItem("vditor" + vditor.id); + if (!vditor.options.cache || !initValue) { + if (vditor.options.value) { + initValue = vditor.options.value; + } else if (vditor.originalInnerHTML) { + initValue = html2md(vditor, vditor.originalInnerHTML); + } + } + + if (!initValue) { + return; + } + + if (vditor.options.mode.indexOf("wysiwyg") > -1) { + renderDomByMd(vditor, initValue, false); + } + + if (vditor.options.mode.indexOf("markdown") > -1) { + formatRender(vditor, initValue, undefined, { + enableAddUndoStack: true, + enableHint: false, + enableInput: false, + }); + } +} diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts index b2be57bef..4b4d03243 100644 --- a/src/ts/wysiwyg/highlightToolbar.ts +++ b/src/ts/wysiwyg/highlightToolbar.ts @@ -592,10 +592,11 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => { nextInputElement.focus(); nextInputElement.select(); event.preventDefault(); + return; } if (event.altKey && event.key === "Enter") { - const range = aElement.ownerDocument.createRange(); - range.selectNode(aElement.firstChild); + const range = vditor.wysiwyg.element.ownerDocument.createRange(); + range.selectNodeContents(aElement.lastChild); range.collapse(false); setSelectionFocus(range); event.preventDefault(); @@ -614,7 +615,6 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => { input.setAttribute("placeholder", i18n[vditor.options.lang].textIsNotEmpty); input.style.width = "120px"; input.value = aElement.innerHTML || ""; - input.onblur = updateA; input.oninput = () => { updateA(); }; @@ -630,7 +630,6 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => { input1.className = "vditor-input"; input1.setAttribute("placeholder", i18n[vditor.options.lang].link); input1.value = aElement.getAttribute("href") || ""; - input1.onblur = updateA; input1.oninput = () => { updateA(); }; @@ -647,7 +646,6 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => { input2.setAttribute("placeholder", i18n[vditor.options.lang].tooltipText); input2.style.width = "60px"; input2.value = aElement.getAttribute("title") || ""; - input2.onblur = updateA; input2.oninput = () => { updateA(); };