:lipstick: preview 改进

CHANGELOG.md

@@ -115,7 +115,7 @@
   * 添加 lazyLoadImageRender 静态方法
   * insert line 默认快捷键由 `⌘-⇧-D` 修改为 `⌘-⇧-H`，添加下移 `⌘-⇧-D`、上移 `⌘-⇧-U` 快捷键，移除上传、预览、编辑器模式切换快捷键
   * 为 `options.toolbar` 添加 toolbar 参数，最多可进行 3 级菜单
-  * 为 `options.toolbar` 添加 outdent，indent, outline, insert-after, insert-before, 子菜单，code-theme, content-theme
+  * 为 `options.toolbar` 添加 outdent，indent, outline, insert-after, insert-before, more，code-theme, content-theme
   * `setTheme` 方法添加 `conentTheme`, `codeTheme` 参数
   * `setPreviewMode` 方法移除 `preview`
   * `options.preview` 中 `maxWidth` 默认值改为 800, `mode` 移除 `preview` 选项，`markdonw` 添加 `theme`、`setext` 配置

demo/index.js

@@ -50,6 +50,7 @@ if (window.innerWidth < 768) {
 window.vditor = new Vditor('vditor', {
   toolbar,
   debugger: true,
+  cdn: "http://localhost:9000",
   typewriterMode: true,
   placeholder: 'placeholder',
   preview: {

src/assets/scss/_content.scss

@@ -123,15 +123,6 @@
       padding: 10px;
       margin: 0 auto;
     }
-
-    &--only {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      background-color: #fff;
-    }
   }
 
   &-devtools {

src/css/content-theme/dark.css

@@ -24,12 +24,6 @@
  * SOFTWARE.
  *
  */
-
-.vditor-reset {
-    color: #d1d5da;
-    background-color: #2f363d !important;
-}
-
 .vditor-reset a, .vditor-ir__link {
     color: #4285f4;
 }

src/ts/toolbar/Preview.ts

@@ -19,18 +19,28 @@ export class Preview extends MenuItem {
 
             const toolbars = Constants.EDIT_TOOLBARS.concat(["both", "format", "edit-mode", "outline", "devtools"]);
             if (btnElement.classList.contains("vditor-menu--current")) {
-                vditor.preview.element.classList.remove("vditor-preview--only");
                 btnElement.classList.remove("vditor-menu--current");
-                if (vditor.currentMode !== "sv" ||
-                    (vditor.currentMode === "sv" && vditor.options.preview.mode !== "both")) {
+                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);
             } 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);
-                vditor.preview.element.classList.add("vditor-preview--only");
                 btnElement.classList.add("vditor-menu--current");
                 hidePanel(vditor, ["subToolbar", "hint", "popover"]);
             }