vditor 3.11.2 → 4.0.0

package/README.md

@@ -20,6 +20,10 @@
 <a href="https://github.com/Vanessa219/vditor/blob/master/README_en_US.md">English</a> &nbsp;|&nbsp; <a href="https://b3log.org/vditor/demo/index.html">Demo</a>
 </p>
 
+<p align="center">
+🔥 欢迎观摩我们的另一个开源项目 <a href="https://github.com/siyuan-note/siyuan">思源笔记</a>
+<p>
+
 ## 💡 简介
 
 [Vditor](https://b3log.org/vditor) 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。
@@ -53,7 +57,7 @@ Vditor 在这些方面做了努力，希望能为现代化的通用 Markdown 编
 ## ✨  特性
 
 * 支持三种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）
-* 支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、[多媒体](https://ld246.com/article/1589813914768)、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、[plantuml](https://plantuml.com)UML图
+* 支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、数字波形图、五线谱、[多媒体](https://ld246.com/article/1589813914768)、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、[plantuml](https://plantuml.com)UML图
 * 导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能
 * 实现 CommonMark 和 GFM 规范，可对 Markdown 进行格式化和语法树查看，并支持[10+项](https://ld246.com/article/1549638745630#options-preview-markdown)配置
 * 工具栏包含 36+ 项操作，除支持扩展外还可对每一项中的[快捷键](https://ld246.com/article/1582778815353)、提示、提示位置、图标、点击事件、类名、子工具栏进行自定义
@@ -99,6 +103,7 @@ Vditor 在这些方面做了努力，希望能为现代化的通用 Markdown 编
 * 图表语法
   * 流程图、时序图、甘特图，通过 Mermaid 支持
   * Graphviz
+  * 数字波形图，通过 WaveDrom 支持
   * 折线图、饼图、脑图等，通过 ECharts 支持
 * 五线谱：通过 abc.js 支持
 * 数学公式：数学公式块、行级数学公式，通过 MathJax 和 KaTeX 支持
@@ -220,6 +225,7 @@ Markdown 输出的 HTML 所展现的外观。内置 ant-design, light，dark，w
 | icon | 图标风格：ant, material | 'ant' |
 | customRenders: {language: string, render: (element: HTMLElement, vditor: IVditor) => void}[] | 自定义渲染器 | [] |
 | customWysiwygToolbar(type: TWYSISYGToolbar, element: HTMLElement): void | 对 wysiwyg 模式下的工具栏进行自定义 | - |
+| customWysiwygMobileToolbar(type: TWYSISYGToolbar, element: HTMLElement): void | 对移动端 wysiwyg 模式下的工具栏进行自定义，未添加菜单项时不显示入口 | - |
 
 #### options.toolbar
 
@@ -318,6 +324,7 @@ new Vditor('vditor', {
 |   | 说明 | 默认值 |
 | - | - | - |
 | autoSpace | 自动空格 | false |
+| callout | Callout 块 | true |
 | gfmAutoLink | 自动链接 | true |
 | fixTermTypo | 自动矫正术语 | false |
 | toc | 插入目录 | false |
@@ -330,6 +337,8 @@ new Vditor('vditor', {
 | linkBase | 链接相对路径前缀 | '' |
 | linkPrefix | 链接强制前缀 | '' |
 | mark | 启用 mark 标记 | false |
+| sup | 上标 | false |
+| sub | 下标 | false |
 
 #### options.preview.theme
 
@@ -614,6 +623,7 @@ options?: IPreviewOptions {
 | mathRender(element: HTMLElement, options?: {cdn?: string, math?: IMath}) | 对数学公式进行渲染 |
 | speechRender(element: HTMLElement, lang?: (keyof II18nLang)) | 对选中的文字进行阅读 |
 | graphvizRender(element: HTMLElement, cdn?: string) | 对 graphviz 进行渲染 |
+| wavedromRender(element: (HTMLElement \| Document) = document, cdn = options.cdn) | 对数字波形图进行渲染 |
 | outlineRender(contentElement: HTMLElement, targetElement: Element) | 对大纲进行渲染 |
 | lazyLoadImageRender(element: (HTMLElement \| Document) = document) | 对启用懒加载的图片进行渲染 |
 | setCodeTheme(codeTheme: string, cdn = options.cdn) | 设置代码主题，codeTheme 参见 options.preview.hljs.style |
@@ -671,6 +681,7 @@ Vditor 使用 [MIT](https://opensource.org/licenses/MIT) 开源协议。
 * [Lute](https://github.com/88250/lute)：🎼 一款结构化的 Markdown 引擎，支持 Go 和 JavaScript
 * [highlight.js](https://github.com/highlightjs/highlight.js)：JavaScript syntax highlighter
 * [mermaid](https://github.com/knsv/mermaid)：Generation of diagram and flowchart from text in a similar manner as Markdown
+* [WaveDrom](https://github.com/wavedrom/wavedrom)：Digital timing diagram rendering engine
 * [incubator-echarts](https://github.com/apache/incubator-echarts)：A powerful, interactive charting and visualization library for browser
 * [abcjs](https://github.com/paulrosen/abcjs)：JavaScript library for rendering standard music notation in a browser
 

package/dist/css/content-theme/ant-design.css

@@ -29,6 +29,16 @@
     color: rgba(0, 0, 0, .85);
     font-size: 14px;
     line-height: 2;
+    --callout-note-color: #0969da;
+    --callout-note-background-color: rgba(9, 105, 218, 0.08);
+    --callout-tip-color: #1a7f37;
+    --callout-tip-background-color: rgba(26, 127, 55, 0.08);
+    --callout-important-color: #8250df;
+    --callout-important-background-color: rgba(130, 80, 223, 0.08);
+    --callout-warning-color: #9a6700;
+    --callout-warning-background-color: rgba(154, 103, 0, 0.08);
+    --callout-caution-color: #cf222e;
+    --callout-caution-background-color: rgba(207, 34, 46, 0.08);
 }
 
 .vditor-reset img {

package/dist/css/content-theme/dark.css

@@ -26,6 +26,16 @@
  */
 .vditor-reset {
     color: #d1d5da;
+    --callout-note-color: #58a6ff;
+    --callout-note-background-color: rgba(56, 139, 253, 0.15);
+    --callout-tip-color: #3fb950;
+    --callout-tip-background-color: rgba(46, 160, 67, 0.15);
+    --callout-important-color: #a371f7;
+    --callout-important-background-color: rgba(163, 113, 247, 0.15);
+    --callout-warning-color: #d29922;
+    --callout-warning-background-color: rgba(187, 128, 9, 0.15);
+    --callout-caution-color: #f85149;
+    --callout-caution-background-color: rgba(248, 81, 73, 0.15);
 }
 
 .vditor-reset a, .vditor-ir__link {

package/dist/css/content-theme/light.css

@@ -24,6 +24,19 @@
  * SOFTWARE.
  *
  */
+.vditor-reset {
+    --callout-note-color: #0969da;
+    --callout-note-background-color: rgba(9, 105, 218, 0.08);
+    --callout-tip-color: #1a7f37;
+    --callout-tip-background-color: rgba(26, 127, 55, 0.08);
+    --callout-important-color: #8250df;
+    --callout-important-background-color: rgba(130, 80, 223, 0.08);
+    --callout-warning-color: #9a6700;
+    --callout-warning-background-color: rgba(154, 103, 0, 0.08);
+    --callout-caution-color: #cf222e;
+    --callout-caution-background-color: rgba(207, 34, 46, 0.08);
+}
+
 .vditor-reset h1, .vditor-reset h2 {
     padding-bottom: 0.3em;
     border-bottom: 1px solid #eaecef;

package/dist/css/content-theme/wechat.css

@@ -27,6 +27,16 @@
 .vditor-reset {
     font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
     color: rgb(62, 62, 62);
+    --callout-note-color: #0969da;
+    --callout-note-background-color: rgba(9, 105, 218, 0.08);
+    --callout-tip-color: #1a7f37;
+    --callout-tip-background-color: rgba(26, 127, 55, 0.08);
+    --callout-important-color: #8250df;
+    --callout-important-background-color: rgba(130, 80, 223, 0.08);
+    --callout-warning-color: #9a6700;
+    --callout-warning-background-color: rgba(154, 103, 0, 0.08);
+    --callout-caution-color: #cf222e;
+    --callout-caution-background-color: rgba(207, 34, 46, 0.08);
 }
 
 .vditor-reset a, .vditor-ir__link {

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * Vditor v3.11.2 - A markdown editor written in TypeScript.
+ * Vditor v4.0.0 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -25,7 +25,7 @@
  *
  */
 /*!
- * Vditor v3.11.2 - A markdown editor written in TypeScript.
+ * Vditor v4.0.0 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -69,6 +69,16 @@
   --count-background-color: rgba(27, 31, 35, 0.05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
+  --callout-note-color: #0969da;
+  --callout-note-background-color: rgba(9, 105, 218, 0.08);
+  --callout-tip-color: #1a7f37;
+  --callout-tip-background-color: rgba(26, 127, 55, 0.08);
+  --callout-important-color: #8250df;
+  --callout-important-background-color: rgba(130, 80, 223, 0.08);
+  --callout-warning-color: #9a6700;
+  --callout-warning-background-color: rgba(154, 103, 0, 0.08);
+  --callout-caution-color: #cf222e;
+  --callout-caution-background-color: rgba(207, 34, 46, 0.08);
   --ir-heading-color: #660e7a;
   --ir-title-color: #808080;
   --ir-bi-color: #0033b3;
@@ -93,6 +103,16 @@
   --count-background-color: rgba(66, 133, 244, 0.36);
   --heading-border-color: var(--textarea-text-color);
   --blockquote-color: var(--toolbar-icon-color);
+  --callout-note-color: #58a6ff;
+  --callout-note-background-color: rgba(56, 139, 253, 0.15);
+  --callout-tip-color: #3fb950;
+  --callout-tip-background-color: rgba(46, 160, 67, 0.15);
+  --callout-important-color: #a371f7;
+  --callout-important-background-color: rgba(163, 113, 247, 0.15);
+  --callout-warning-color: #d29922;
+  --callout-warning-background-color: rgba(187, 128, 9, 0.15);
+  --callout-caution-color: #f85149;
+  --callout-caution-background-color: rgba(248, 81, 73, 0.15);
   --ir-heading-color: #9876aa;
   --ir-title-color: #808080;
   --ir-bi-color: #cc7832;
@@ -866,6 +886,31 @@
   max-width: 20px;
   vertical-align: sub;
 }
+.vditor-reset figure.vditor-image {
+  margin: 0 0 16px;
+  text-align: center;
+}
+.vditor-reset figure.vditor-image figcaption {
+  font-size: 0.875em;
+  margin-top: 4px;
+  opacity: 0.65;
+  white-space: pre-wrap;
+}
+.vditor-reset span.vditor-image[data-image-caption] {
+  display: inline-block;
+  max-width: 100%;
+  text-align: center;
+  vertical-align: top;
+}
+.vditor-reset span.vditor-image[data-image-caption]::after {
+  content: attr(data-image-caption);
+  display: block;
+  font-size: 0.875em;
+  line-height: 1.5;
+  margin-top: 4px;
+  opacity: 0.65;
+  white-space: pre-wrap;
+}
 .vditor-reset h1,
 .vditor-reset h2,
 .vditor-reset h3,
@@ -1011,7 +1056,8 @@
 .vditor-reset .language-markmap,
 .vditor-reset .language-abc,
 .vditor-reset .language-flowchart,
-.vditor-reset .language-graphviz {
+.vditor-reset .language-graphviz,
+.vditor-reset .language-wavedrom {
   margin-bottom: 16px;
 }
 .vditor-reset .language-math mjx-container:focus {
@@ -1031,7 +1077,8 @@
 .vditor-reset .language-mermaid,
 .vditor-reset .language-markmap,
 .vditor-reset .language-flowchart,
-.vditor-reset .language-graphviz {
+.vditor-reset .language-graphviz,
+.vditor-reset .language-wavedrom {
   text-align: center;
 }
 .vditor-reset .language-graphviz parsererror {
@@ -1333,6 +1380,88 @@
 .vditor-outline__action--close {
   transform: rotate(-90deg);
 }
+.vditor-reset .callout,
+.vditor-wysiwyg blockquote.callout,
+.vditor-ir blockquote.callout {
+  --callout-color: var(--callout-note-color, #0969da);
+  --callout-background-color: var(--callout-note-background-color, rgba(9, 105, 218, 0.08));
+  position: relative;
+  margin: 0 0 16px;
+  padding: 0.75em 1em;
+  color: inherit;
+  background-color: var(--callout-background-color);
+  border: 0;
+  border-left: 0.25em solid var(--callout-color);
+}
+.vditor-reset .callout[data-subtype="TIP"],
+.vditor-wysiwyg blockquote.callout[data-subtype="TIP"],
+.vditor-ir blockquote.callout[data-subtype="TIP"] {
+  --callout-color: var(--callout-tip-color, #1a7f37);
+  --callout-background-color: var(--callout-tip-background-color, rgba(26, 127, 55, 0.08));
+}
+.vditor-reset .callout[data-subtype="IMPORTANT"],
+.vditor-wysiwyg blockquote.callout[data-subtype="IMPORTANT"],
+.vditor-ir blockquote.callout[data-subtype="IMPORTANT"] {
+  --callout-color: var(--callout-important-color, #8250df);
+  --callout-background-color: var(--callout-important-background-color, rgba(130, 80, 223, 0.08));
+}
+.vditor-reset .callout[data-subtype="WARNING"],
+.vditor-wysiwyg blockquote.callout[data-subtype="WARNING"],
+.vditor-ir blockquote.callout[data-subtype="WARNING"] {
+  --callout-color: var(--callout-warning-color, #9a6700);
+  --callout-background-color: var(--callout-warning-background-color, rgba(154, 103, 0, 0.08));
+}
+.vditor-reset .callout[data-subtype="CAUTION"],
+.vditor-wysiwyg blockquote.callout[data-subtype="CAUTION"],
+.vditor-ir blockquote.callout[data-subtype="CAUTION"] {
+  --callout-color: var(--callout-caution-color, #cf222e);
+  --callout-background-color: var(--callout-caution-background-color, rgba(207, 34, 46, 0.08));
+}
+.vditor-reset .callout > .callout-info,
+.vditor-wysiwyg blockquote.callout > .callout-info,
+.vditor-ir blockquote.callout > .callout-info {
+  display: flex;
+  align-items: center;
+  min-height: 1.5em;
+  margin: 0 0 0.5em;
+  color: var(--callout-color);
+  font-weight: 600;
+}
+.vditor-reset .callout > .callout-info .callout-icon,
+.vditor-wysiwyg blockquote.callout > .callout-info .callout-icon,
+.vditor-ir blockquote.callout > .callout-info .callout-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.35em;
+}
+.vditor-reset .callout > .callout-info .callout-title,
+.vditor-wysiwyg blockquote.callout > .callout-info .callout-title,
+.vditor-ir blockquote.callout > .callout-info .callout-title {
+  min-width: 1px;
+}
+.vditor-reset .callout > .callout-info .callout-img,
+.vditor-wysiwyg blockquote.callout > .callout-info .callout-img,
+.vditor-ir blockquote.callout > .callout-info .callout-img,
+.vditor-reset .callout > .callout-info > .callout-img,
+.vditor-wysiwyg blockquote.callout > .callout-info > .callout-img,
+.vditor-ir blockquote.callout > .callout-info > .callout-img {
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: 0.35em;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.vditor-reset .callout > .callout-content > :last-child,
+.vditor-wysiwyg blockquote.callout > .callout-content > :last-child,
+.vditor-ir blockquote.callout > .callout-content > :last-child,
+.vditor-reset .callout > :last-child,
+.vditor-wysiwyg blockquote.callout > :last-child,
+.vditor-ir blockquote.callout > :last-child {
+  margin-bottom: 0;
+}
+.vditor-wysiwyg__callout-marker {
+  display: none;
+}
 .vditor-wysiwyg {
   box-sizing: border-box;
   flex: 1;
@@ -1477,7 +1606,32 @@
 .vditor-wysiwyg div[data-type="link-ref-defs-block"] {
   color: var(--blockquote-color);
 }
+.vditor-wysiwyg__mobile-toolbar {
+  display: none;
+}
 @media screen and (max-width: 520px) {
+  .vditor-wysiwyg__mobile-toolbar {
+    display: block;
+    float: left;
+    height: 21px;
+    position: relative;
+    width: 23px;
+  }
+  .vditor-wysiwyg__mobile-actions {
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    left: 0;
+    padding: 5px;
+    top: 26px;
+    white-space: normal;
+  }
+  .vditor-wysiwyg__mobile-actions.vditor-panel--left {
+    left: auto;
+    right: 0;
+  }
+  .vditor-wysiwyg__mobile-actions--open {
+    display: flex;
+  }
   .vditor-wysiwyg h1:before,
   .vditor-wysiwyg h2:before,
   .vditor-wysiwyg h3:before,
@@ -1735,89 +1889,17 @@
   word-break: break-word;
   word-wrap: break-word;
 }
-.vditor-sv[contenteditable="false"] {
+.vditor-sv:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
-.vditor-sv:empty::before {
-  content: attr(placeholder);
+.vditor-sv::-moz-placeholder {
   color: var(--second-color);
 }
-.vditor-sv:focus {
-  background-color: var(--textarea-background-color);
-}
-.vditor-sv:after {
-  content: "";
-  height: var(--editor-bottom);
-  display: block;
-}
-.vditor-sv span[data-type="newline"] + span[data-type="text"]:empty {
-  display: inherit;
-}
-.vditor-sv .sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-.vditor-sv .strong {
-  font-weight: bold;
-}
-.vditor-sv .em {
-  font-style: italic;
-}
-.vditor-sv .s {
-  text-decoration: line-through;
-}
-.vditor-sv .mark:not(.vditor-sv__marker) {
-  background-color: yellow;
-  color: black;
-}
-.vditor-sv .h1 {
-  font-size: 1.75em;
-  line-height: 44px;
-}
-.vditor-sv .h2 {
-  font-size: 1.55em;
-  line-height: 38px;
-}
-.vditor-sv .h3 {
-  font-size: 1.38em;
-  line-height: 27px;
-}
-.vditor-sv .h4 {
-  font-size: 1.25em;
-  line-height: 25px;
-}
-.vditor-sv .h5 {
-  font-size: 1.13em;
-}
-.vditor-sv .h6 {
-  font-size: 1em;
-}
-.vditor-sv__marker {
+.vditor-sv::placeholder {
   color: var(--second-color);
 }
-.vditor-sv__marker--heading {
-  color: var(--ir-heading-color);
-}
-.vditor-sv__marker--bi {
-  color: var(--ir-bi-color);
-}
-.vditor-sv__marker--link {
-  color: var(--ir-link-color);
-}
-.vditor-sv__marker--title {
-  color: var(--ir-title-color);
-}
-.vditor-sv__marker--bracket {
-  color: var(--ir-bracket-color);
-}
-.vditor-sv__marker--paren {
-  color: var(--ir-paren-color);
-}
-.vditor-sv__marker--info {
-  color: var(--ir-heading-color);
-}
-.vditor-sv__marker--strong {
-  font-weight: bold;
+.vditor-sv:focus {
+  background-color: var(--textarea-background-color);
 }