@yltrcc/vditor 0.1.1 → 0.3.0

package/src/assets/less/_wysiwyg.less

@@ -1,270 +1,314 @@
-.vditor-wysiwyg {
-  box-sizing: border-box;
-  flex: 1;
-  position: relative;
-  width: 100%;
-  min-width: 1px;
-
-  pre.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;
-    }
-  }
-
-  blockquote:empty::before,
-  pre > code:empty::before,
-  p:empty::before,
-  h1:empty::after,
-  h2:empty::after,
-  h3:empty::after,
-  h4:empty::after,
-  h5:empty::after,
-  h6:empty::after {
-    content: ' ';
-  }
-
-  code[data-marker="`"] {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  &__block {
-    position: relative;
-    
-    // 编辑区域 - 默认隐藏
-    pre:first-child {
-      margin-bottom: -1em;
-      display: none; // 默认隐藏编辑区域
-
-      code {
-        height: auto;
-        color: var(--textarea-text-color);
-        height: auto;
-        text-align: left;
-      }
-    }
-
-    pre:last-child {
-      margin-bottom: 1em;
-    }
-    
-    // 当处于编辑状态时显示编辑区域，隐藏预览区域
-    &--editing {
-      pre:first-child {
-        display: block;
-      }
-      
-      .vditor-wysiwyg__preview {
-        display: none;
-      }
-    }
-  }
-
-  &__preview {
-    cursor: pointer;
-    white-space: initial;
-    min-height: 27px;
-    display: block; // 默认显示预览区域
-    
-    // 代码块预览样式优化
-    pre {
-      margin: 0;
-      padding: 1em;
-      background-color: var(--code-background-color);
-      border-radius: 4px;
-      overflow-x: auto;
-      
-      code {
-        font-family: var(--code-font-family);
-        font-size: var(--code-font-size);
-        line-height: var(--code-line-height);
-      }
-    }
-    
-    // 语言标签
-    &::before {
-      content: attr(data-language);
-      position: absolute;
-      top: 0;
-      right: 0;
-      padding: 2px 8px;
-      font-size: 12px;
-      color: var(--second-color);
-      background-color: var(--panel-background-color);
-      border-radius: 0 4px 0 4px;
-    }
-    
-    &:hover {
-      box-shadow: 0 0 0 2px var(--blurColor);
-    }
-  }
-
-  & > .vditor-reset > h1:before,
-  & > .vditor-reset > h2:before,
-  & > .vditor-reset > h3:before,
-  & > .vditor-reset > h4:before,
-  & > .vditor-reset > h5:before,
-  & > .vditor-reset > 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);
-  }
-
-  & > .vditor-reset > h2:before {
-    content: 'H2';
-  }
-
-  & > .vditor-reset > h3:before {
-    content: 'H3';
-  }
-
-  & > .vditor-reset > h4:before {
-    content: 'H4';
-  }
-
-  & > .vditor-reset > h5:before {
-    content: 'H5';
-  }
-
-  & > .vditor-reset > 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: "</>";
-  }
-
-  div.vditor-wysiwyg__block[data-type="yaml-front-matter"]:before {
-    content: "F";
-  }
-
-  div.vditor-wysiwyg__block[data-type="math-block"]:before {
-    content: "$$";
-  }
-
-  .vditor-toc:before {
-    content: "ToC";
-  }
-
-  hr {
-    display: inline-block;
-    margin: 12px 0;
-    width: 100%;
-  }
-
-  details {
-    white-space: initial;
-  }
-
-  a {
-    cursor: pointer;
-    color: @blurColor;
-    text-decoration: none;
-    background-color: rgba(66, 133, 244, 0.1);
-    padding: 2px 4px;
-    border-radius: 3px;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: rgba(66, 133, 244, 0.2);
-      text-decoration: underline;
-    }
-
-    &:visited {
-      color: darken(@blurColor, 10%);
-    }
-  }
-
-  img {
-    cursor: pointer;
-    border: 2px solid transparent;
-    border-radius: 4px;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-    &:hover {
-      border-color: @blurColor;
-      box-shadow: 0 0 8px rgba(66, 133, 244, 0.3);
-    }
-  }
-
-  span[data-type="backslash"] > span {
-    display: none;
-    color: var(--second-color);
-  }
-
-  span[data-type="link-ref"],
-  sup[data-type="footnotes-ref"] {
-    color: @blurColor;
-  }
-
-  span[data-type="toc-h"] {
-    color: @blurColor;
-    text-decoration: underline;
-  }
-
-  div[data-type="footnotes-block"] {
-    border-top: 2px solid var(--heading-border-color);
-    padding-top: 24px;
-    margin-top: 24px;
-  }
-
-  div[data-type="link-ref-defs-block"] {
-    color: var(--blockquote-color);
-  }
-}
-
-@media screen and (max-width: @max-width) {
-  .vditor-wysiwyg {
-    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 {
-      content: none;
-    }
-  }
-}
+.vditor-wysiwyg {
+  box-sizing: border-box;
+  flex: 1;
+  position: relative;
+  width: 100%;
+  min-width: 1px;
+
+  pre.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;
+    }
+  }
+
+  blockquote:empty::before,
+  pre > code:empty::before,
+  p:empty::before,
+  h1:empty::after,
+  h2:empty::after,
+  h3:empty::after,
+  h4:empty::after,
+  h5:empty::after,
+  h6:empty::after {
+    content: ' ';
+  }
+
+  code[data-marker="`"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  &__block {
+    position: relative;
+    
+    // 编辑区域 - 默认隐藏，但保持预览区域的样式
+    pre:first-child {
+      display: none; // 默认隐藏编辑区域
+      position: relative;
+      margin: 0;
+      padding: 1em;
+      background-color: rgba(0, 0, 0, 0.03);
+      border-radius: 4px;
+      overflow-x: auto;
+      cursor: text;
+      white-space: initial;
+      min-height: 27px;
+      background-size: 20px 20px;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+      
+      code {
+        margin: 0;
+        font-family: var(--code-font-family);
+        font-size: var(--code-font-size);
+        line-height: var(--code-line-height);
+        padding: 0;
+        background-color: transparent !important;
+        border-radius: 0;
+        display: inline;
+        overflow: visible;
+        white-space: pre;
+        word-break: initial;
+        word-wrap: normal;
+      }
+      
+      // 编辑状态下的语言标签
+      &::before {
+        content: attr(data-language);
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 2px 8px;
+        font-size: 12px;
+        color: var(--second-color);
+        background-color: var(--panel-background-color);
+        border-radius: 0 4px 0 4px;
+        z-index: 1;
+      }
+      
+      // 编辑状态下也有 hover 效果，保持一致
+      &:hover {
+        box-shadow: 0 0 0 2px var(--blurColor);
+      }
+      
+      // 编辑状态下去掉 outline，保持美观
+      &:focus {
+        outline: none;
+      }
+    }
+
+    pre:last-child {
+      margin-bottom: 1em;
+    }
+    
+    // 当处于编辑状态时显示编辑区域，隐藏预览区域
+    &--editing {
+      pre:first-child {
+        display: block;
+        margin: 0;
+      }
+      
+      .vditor-wysiwyg__preview {
+        display: none;
+      }
+    }
+  }
+
+  &__preview {
+    cursor: pointer;
+    white-space: initial;
+    min-height: 27px;
+    display: block; // 默认显示预览区域
+    
+    // 代码块预览样式优化
+    pre {
+      margin: 0;
+      padding: 1em;
+      background-color: var(--code-background-color);
+      border-radius: 4px;
+      overflow-x: auto;
+      
+      code {
+        font-family: var(--code-font-family);
+        font-size: var(--code-font-size);
+        line-height: var(--code-line-height);
+        background-color: transparent !important;
+      }
+    }
+    
+    // 语言标签
+    &::before {
+      content: attr(data-language);
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 2px 8px;
+      font-size: 12px;
+      color: var(--second-color);
+      background-color: var(--panel-background-color);
+      border-radius: 0 4px 0 4px;
+    }
+    
+    &:hover {
+      box-shadow: 0 0 0 2px var(--blurColor);
+    }
+  }
+
+  & > .vditor-reset > h1:before,
+  & > .vditor-reset > h2:before,
+  & > .vditor-reset > h3:before,
+  & > .vditor-reset > h4:before,
+  & > .vditor-reset > h5:before,
+  & > .vditor-reset > 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);
+  }
+
+  & > .vditor-reset > h2:before {
+    content: 'H2';
+  }
+
+  & > .vditor-reset > h3:before {
+    content: 'H3';
+  }
+
+  & > .vditor-reset > h4:before {
+    content: 'H4';
+  }
+
+  & > .vditor-reset > h5:before {
+    content: 'H5';
+  }
+
+  & > .vditor-reset > 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: "</>";
+  }
+
+  div.vditor-wysiwyg__block[data-type="yaml-front-matter"]:before {
+    content: "F";
+  }
+
+  div.vditor-wysiwyg__block[data-type="math-block"]:before {
+    content: "$$";
+  }
+
+  .vditor-toc:before {
+    content: "ToC";
+  }
+
+  hr {
+    display: inline-block;
+    margin: 12px 0;
+    width: 100%;
+  }
+
+  details {
+    white-space: initial;
+  }
+
+  a {
+    cursor: pointer;
+    color: @blurColor;
+    text-decoration: none;
+    background-color: rgba(66, 133, 244, 0.1);
+    padding: 2px 4px;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(66, 133, 244, 0.2);
+      text-decoration: underline;
+    }
+
+    &:visited {
+      color: darken(@blurColor, 10%);
+    }
+  }
+
+  img {
+    cursor: pointer;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+      border-color: @blurColor;
+      box-shadow: 0 0 8px rgba(66, 133, 244, 0.3);
+    }
+  }
+
+  span[data-type="backslash"] > span {
+    display: none;
+    color: var(--second-color);
+  }
+
+  span[data-type="link-ref"],
+  sup[data-type="footnotes-ref"] {
+    color: @blurColor;
+  }
+
+  span[data-type="toc-h"] {
+    color: @blurColor;
+    text-decoration: underline;
+  }
+
+  div[data-type="footnotes-block"] {
+    border-top: 2px solid var(--heading-border-color);
+    padding-top: 24px;
+    margin-top: 24px;
+  }
+
+  div[data-type="link-ref-defs-block"] {
+    color: var(--blockquote-color);
+  }
+}
+
+@media screen and (max-width: @max-width) {
+  .vditor-wysiwyg {
+    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 {
+      content: none;
+    }
+  }
+}

package/src/index.ts

@@ -37,6 +37,7 @@ import {input} from "./ts/wysiwyg/input";
 import {renderDomByMd} from "./ts/wysiwyg/renderDomByMd";
 import {execAfterRender, insertEmptyBlock} from "./ts/util/fixBrowserBehavior";
 import {accessLocalStorage} from "./ts/util/compatibility";
+import {initImageResize} from "./ts/util/imageResize";
 
 class Vditor extends VditorMethod {
     public readonly version: string;
@@ -552,6 +553,8 @@ class Vditor extends VditorMethod {
 
             initUI(this.vditor);
 
+            initImageResize(this.vditor);
+
             if (mergedOptions.after) {
                 mergedOptions.after();
             }