:art: ad ir

src/assets/scss/_hint.scss

@@ -31,6 +31,10 @@
     &:last-child {
       border-bottom: 0;
     }
+
+    &:focus {
+      outline: none;
+    }
   }
 
   &--current,

src/assets/scss/_ir.scss

@@ -0,0 +1,91 @@
+.vditor-ir {
+  box-sizing: border-box;
+  flex: 1;
+  position: relative;
+  width: 100%;
+
+  .vditor-reset {
+    background-color: var(--panel-background-color);
+    margin: 0;
+    white-space: pre-wrap;
+    height: 100%;
+    box-sizing: border-box;
+
+    &[contenteditable="false"] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    &:empty::before {
+      content: attr(placeholder);
+      color: var(--second-color);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: var(--textarea-background-color);
+    }
+
+    &:after {
+      content: "";
+      height: var(--editor-bottom);
+      display: block;
+    }
+  }
+
+
+  h1:before,
+  h2:before,
+  h3:before,
+  h4:before,
+  h5:before,
+  h6:before,
+  div.vditor-wysiwyg__block:before,
+  div[data-type="link-ref-defs-block"]:before,
+  div[data-type="footnotes-block"]:before,
+  .vditor-toc:before {
+    float: left;
+    padding-right: 4px;
+    margin-left: -29px;
+    content: 'H1';
+    font-size: 0.85rem;
+    font-weight: normal;
+    color: var(--second-color);
+  }
+
+  h2:before {
+    content: 'H2';
+  }
+
+  h3:before {
+    content: 'H3';
+  }
+
+  h4:before {
+    content: 'H4';
+  }
+
+  h5:before {
+    content: 'H5';
+  }
+
+  h6:before {
+    content: 'H6';
+  }
+
+  div[data-type="link-ref-defs-block"]:before {
+    content: '"A"';
+  }
+
+  div[data-type="footnotes-block"]:before {
+    content: '^F';
+  }
+
+  div.vditor-wysiwyg__block:before {
+    content: "</>";
+  }
+
+  .vditor-toc:before {
+    content: "ToC";
+  }
+}

src/assets/scss/_wysiwyg.scss

@@ -28,7 +28,7 @@
 
     &:after {
       content: "";
-      height: var(--editor-wysiwyg-bottom);
+      height: var(--editor-bottom);
       display: block;
     }
   }

src/assets/scss/index.scss

@@ -62,3 +62,4 @@ $transition: all .15s ease-in-out !default;
 @import "hint";
 @import "reset";
 @import "wysiwyg";
+@import "ir";

src/ts/toolbar/EditMode.ts

@@ -43,10 +43,10 @@ export class EditMode extends MenuItem {
         this.panelElement.children.item(0).addEventListener(getEventName(), (event: Event) => {
             // wysiwyg
             event.preventDefault();
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             if (vditor.currentMode === "wysiwyg") {
                 return;
             }
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
             if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
                 vditor.devtools.ASTChart.resize();
@@ -67,10 +67,10 @@ export class EditMode extends MenuItem {
         this.panelElement.children.item(1).addEventListener(getEventName(), (event: Event) => {
             // ir
             event.preventDefault();
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             if (vditor.currentMode === "ir") {
                 return;
             }
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
             if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
                 vditor.devtools.ASTChart.resize();
@@ -90,10 +90,10 @@ export class EditMode extends MenuItem {
         this.panelElement.children.item(2).addEventListener(getEventName(), (event: Event) => {
             // markdown
             event.preventDefault();
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             if (vditor.currentMode === "markdown") {
                 return;
             }
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
             showToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
             if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
                 vditor.devtools.ASTChart.resize();

src/ts/ui/initUI.ts

@@ -72,19 +72,17 @@ const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
         height = vditor.options.height - 37;
     }
 
-    if (vditor.editor && vditor.options.typewriterMode) {
+    if (vditor.options.typewriterMode) {
         // 由于 Firefox padding-bottom bug，只能使用 :after
-        vditor.editor.element.style.setProperty("--editor-bottom", height / 2 + "px");
+        contentElement.style.setProperty("--editor-bottom", height / 2 + "px");
     }
 
-    if (vditor.wysiwyg) {
+    if (vditor.wysiwyg || vditor.ir) {
         const setPadding = () => {
             const padding = (vditor.wysiwyg.element.parentElement.parentElement.clientWidth
                 - vditor.options.preview.maxWidth) / 2;
             vditor.wysiwyg.element.style.padding = `10px ${Math.max(35, padding)}px`;
-            if (vditor.options.typewriterMode) {
-                vditor.wysiwyg.element.style.setProperty("--editor-wysiwyg-bottom", height / 2 + "px");
-            }
+            vditor.ir.element.style.padding = `10px ${Math.max(35, padding)}px`;
         };
         setPadding();
         window.addEventListener("resize", () => {