Deploying to docs from @ 5a5b207 🚀

docs/assets/index-BIM-9ZlQ.js → docs/assets/index-BHxj2HQw.js

@@ -1,4 +1,4 @@
-import{d,ae as m,a as c,ao as o,w as p,af as u,ak as g,ai as f,c as r,ap as i,aq as s}from"./index-K3buWFoz.js";import{_ as v}from"./index.vue_vue_type_script_setup_true_lang-DH6ixbR2.js";import{_ as h}from"./index.vue_vue_type_style_index_0_lang-BW_XA8v_.js";import"./index-HEex3e-n.js";import"./MdCatalog-iZIGoBRJ.js";const l=`> Use it online: [Go](https://codesandbox.io/s/epic-bird-2znqo).
+import{d,a9 as m,a as c,al as o,w as p,aa as u,ah as g,ad as f,c as r,am as i,an as s}from"./index-mstXR5Qg.js";import{_ as v}from"./index.vue_vue_type_script_setup_true_lang-C8FZeH5G.js";import{_ as h}from"./index.vue_vue_type_style_index_0_lang-FAaUKv8z.js";import"./index-BABYOLP-.js";import"./index3-zO_LtZQv.js";const l=`> Use it online: [Go](https://codesandbox.io/s/epic-bird-2znqo).
 
 ## 🔖 MdPreview Props
 
@@ -575,7 +575,13 @@ Except for the same as \`MdPreview\`:
   Preset the size of the table, [columns, rows, Maximum number of columns, Maximum number of rows]
 
   \`\`\`vue
-  <MdEditor :tableShape="[8, 4]" />
+  <template>
+    <MdEditor :tableShape="tableShape" />
+  </tempale>
+
+  <script setup>
+  const tableShape = [8, 4];
+  <\/script>
   \`\`\`
 
   ![Preview](https://imzbf.github.io/md-editor-v3/imgs/20211216165424.png)
@@ -784,11 +790,13 @@ Custom toolbar in \`DropdownToolbar\`, \`NormalToolbar\` or \`ModalToolbar\`.
   import { MdEditor, NormalToolbar } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const toolbars = ['bold', '-', 0, '=', 'github'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          toolbars={['bold', '-', 0, '=', 'github']}
+          toolbars={toolbars}
           defToolbars={
             <>
               <NormalToolbar
@@ -843,11 +851,13 @@ For more info, Get **Internal Components** heading. Get source code of **mark**,
   import { MdEditor } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          footers={['markdownTotal', 0, '=', 1, 'scrollSwitch']}
+          footers={footers}
           defFooters={
             <>
               <span>￥_￥</span>
@@ -1733,6 +1743,25 @@ config({
 
 ---
 
+### 🔧 katexConfig
+
+Configure \`katex\`, [Details](https://katex.org/docs/options)
+
+\`\`\`js
+import { config } from 'md-editor-v3';
+
+config({
+  katexConfig(base: any) {
+    return {
+      ...base,
+      strict: false
+    };
+  }
+});
+\`\`\`
+
+---
+
 ## 🪡 Shortcut keys
 
 !!! warning Pay attention
@@ -1850,7 +1879,7 @@ const handler = () => {
 
 \`\`\`vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -1864,6 +1893,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 <\/script>
 \`\`\`
 
@@ -1956,7 +1986,7 @@ const handler = (emoji: any) => {
 
 \`\`\`vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -1970,6 +2000,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 <\/script>
 \`\`\`
 
@@ -2069,7 +2100,7 @@ const handler = () => {
 
 \`\`\`vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -2083,6 +2114,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 <\/script>
 \`\`\`
 
@@ -2796,7 +2828,13 @@ console.log(iconfontClassUrl, iconfontSvgUrl, allToolbar, allFooter, zh_CN, en_U
   标题栏添加表格时，预设待选表格大小，第一个代表最大列数，第二个代表最大行数，第三个代表扩展最大列数，第四个代表扩展最大行数。
 
   \`\`\`vue
-  <MdEditor :tableShape="[8, 4]" />
+  <template>
+    <MdEditor :tableShape="tableShape" />
+  </tempale>
+
+  <script setup>
+  const tableShape = [8, 4];
+  <\/script>
   \`\`\`
 
   ![表格预设大小预览](https://imzbf.github.io/md-editor-v3/imgs/20211216165424.png)
@@ -3012,11 +3050,13 @@ console.log(iconfontClassUrl, iconfontSvgUrl, allToolbar, allFooter, zh_CN, en_U
   import { MdEditor, NormalToolbar } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const toolbars = ['bold', '-', 0, '=', 'github'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          toolbars={['bold', '-', 0, '=', 'github']}
+          toolbars={toolbars}
           defToolbars={
             <>
               <NormalToolbar
@@ -3025,7 +3065,7 @@ console.log(iconfontClassUrl, iconfontSvgUrl, allToolbar, allFooter, zh_CN, en_U
                     <use xlinkHref="#icon-strike-through" />
                   </svg>
                 }
-              ></NormalToolbar>
+              />
             </>
           }
         />
@@ -3074,11 +3114,13 @@ console.log(iconfontClassUrl, iconfontSvgUrl, allToolbar, allFooter, zh_CN, en_U
   import { MdEditor } from 'md-editor-v3';
   import 'md-editor-v3/lib/style.css';
 
+  const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch'];
+
   export default defineComponent({
     setup() {
       return () => (
         <MdEditor
-          footers={['markdownTotal', 0, '=', 1, 'scrollSwitch']}
+          footers={footers}
           defFooters={
             <>
               <span>￥_￥</span>
@@ -3975,6 +4017,25 @@ config({
 
 ---
 
+### 🔧 katexConfig
+
+katex 配置项，[配置详情](https://katex.org/docs/options)
+
+\`\`\`js
+import { config } from 'md-editor-v3';
+
+config({
+  katexConfig(base: any) {
+    return {
+      ...base,
+      strict: false
+    };
+  }
+});
+\`\`\`
+
+---
+
 ## 🪡 快捷键
 
 主要以\`CTRL\`搭配对应功能英文单词首字母，冲突项添加\`SHIFT\`，再冲突替换为\`ALT\`。
@@ -4092,7 +4153,7 @@ const handler = () => {
 
 \`\`\`vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -4106,6 +4167,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 <\/script>
 \`\`\`
 
@@ -4198,7 +4260,7 @@ const handler = (emoji: any) => {
 
 \`\`\`vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -4212,6 +4274,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 <\/script>
 \`\`\`
 
@@ -4311,7 +4374,7 @@ const handler = () => {
 
 \`\`\`vue
 <template>
-  <MdEditor v-model="text" :toolbars="['bold', 0, 'github']">
+  <MdEditor v-model="text" :toolbars="toolbars">
     <template #defToolbars>
       <MyToolbar />
     </template>
@@ -4325,6 +4388,7 @@ import MyToolbar from './MyToolbar.vue';
 import 'md-editor-v3/lib/style.css';
 
 const text = ref('');
+const toolbars = ['bold', 0, 'github'];
 <\/script>
 \`\`\`
 
@@ -4461,4 +4525,4 @@ console.log(iconfontClassUrl, iconfontSvgUrl, allToolbar, allFooter, zh_CN, en_U
 ## ✍️ 编辑此页面
 
 [doc-zh-CN](https://github.com/imzbf/md-editor-v3/blob/dev-docs/public/doc-zh-CN.md)
-`,b={class:"container"},y={class:"doc"},w={name:"DocPage"},P=d({...w,setup(x){const n=m(),e="doc-preview",t=c(o(n.state.lang==="en-US"?l:a,{iconfontSvgUrl:i,iconfontClassUrl:s}));return p(()=>n.state.lang,()=>{t.value=o(n.state.lang==="en-US"?l:a,{iconfontSvgUrl:i,iconfontClassUrl:s})}),(E,C)=>(u(),g("div",b,[f("div",y,[r(v,{editorId:e,modelValue:t.value},null,8,["modelValue"]),r(h,{editorId:e})])]))}});export{P as default};
+`,b={class:"container"},y={class:"doc"},x={name:"DocPage"},P=d({...x,setup(w){const n=m(),e="doc-preview",t=c(o(n.state.lang==="en-US"?l:a,{iconfontSvgUrl:i,iconfontClassUrl:s}));return p(()=>n.state.lang,()=>{t.value=o(n.state.lang==="en-US"?l:a,{iconfontSvgUrl:i,iconfontClassUrl:s})}),(E,C)=>(u(),g("div",b,[f("div",y,[r(v,{editorId:e,modelValue:t.value},null,8,["modelValue"]),r(h,{editorId:e})])]))}});export{P as default};

docs/assets/index-8kBByIn-.js → docs/assets/index-BJZYCZop.js

@@ -1,4 +1,4 @@
-import{d as l,ae as c,a as p,ao as r,w as u,af as f,ak as h,ai as g,c as o,ap as i,aq as s,ar as m}from"./index-K3buWFoz.js";import{_ as v}from"./index.vue_vue_type_style_index_0_lang-BW_XA8v_.js";import{_ as x}from"./index.vue_vue_type_script_setup_true_lang-DH6ixbR2.js";import"./MdCatalog-iZIGoBRJ.js";import"./index-HEex3e-n.js";const d=`## 😁 Basic Usage
+import{d as l,a9 as c,a as p,al as o,w as u,aa as f,ah as h,ad as g,c as r,am as i,an as s,ao as m}from"./index-mstXR5Qg.js";import{_ as v}from"./index.vue_vue_type_style_index_0_lang-FAaUKv8z.js";import{_ as x}from"./index.vue_vue_type_script_setup_true_lang-C8FZeH5G.js";import"./index3-zO_LtZQv.js";import"./index-BABYOLP-.js";const d=`## 😁 Basic Usage
 
 It has been developing iteratively，so update the latest version please. Publish logs: [releases](https://github.com/imzbf/md-editor-v3/releases)
 
@@ -78,7 +78,9 @@ export default defineComponent({
   name: 'MdEditor',
   setup() {
     const text = ref('');
-    return () => <MdEditor modelValue={text.value} onChange={(v) => (text.value = v)} />;
+    const onChange = (v) => (text.value = v);
+
+    return () => <MdEditor modelValue={text.value} onChange={onChange} />;
   }
 });
 \`\`\`
@@ -104,7 +106,15 @@ const scrollElement = document.documentElement;
 
 When using server-side rendering, \`scrollElement\` should be of string type, eg: \`body\`, \`#id\`, \`.class\`.
 
-## 🥂 Api Usage
+## 🎛 Used in Web Component
+
+Complete example reference [the sample project](https://github.com/imzbf/md-editor-v3/tree/main/example/webComponent) provided in the source code.
+
+Here are the precautions:
+
+1. The image zoom-in view feature is ineffective; implementation needs to be done manually!!!
+2. Do not use CDN to reference dependency libraries by default; refer to [[Import All Library]](https://imzbf.github.io/md-editor-v3/en-US/demo#%F0%9F%99%8D%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8F%20Import%20All%20Library)!!!
+3. Only font-class type icons can be used; the default symbol type is ineffective!!!## 🥂 Api Usage
 
 Usages of some APIs.
 
@@ -717,7 +727,7 @@ To get complete code, refer to [docs](https://github.com/imzbf/md-editor-v3/blob
   --md-color: if(@isDark, #999, #222);
   --md-hover-color: if(@isDark, #bbb, #000);
   --md-bk-color: if(@isDark, #000, #fff);
-  --md-bk-color-outstand: if(@isDark, #111, #f6f6f6);
+  --md-bk-color-outstand: if(@isDark, #333, #f2f2f2);
   --md-bk-hover-color: if(@isDark, #1b1a1a, #f5f7fa);
   --md-border-color: if(@isDark, #2d2d2d, #e6e6e6);
   --md-border-hover-color: if(@isDark, #636262, #b9b9b9);
@@ -1119,9 +1129,9 @@ export default defineComponent({
   name: 'MdEditor',
   setup() {
     const text = ref('');
-    return () => (
-      <MdEditor modelValue={text.value} onChange={(v: string) => (text.value = v)} />
-    );
+    const onChange = (v: string) => (text.value = v);
+
+    return () => <MdEditor modelValue={text.value} onChange={onChange} />
   }
 });
 \`\`\`
@@ -1148,6 +1158,16 @@ const scrollElement = document.documentElement;
 
 当使用服务端渲染时，\`scrollElement\`应该是字符类型，例：\`body\`、\`#id\`、\`.class\`。
 
+## 🎛 Web Component中使用
+
+完整的示例参考源码中提供的[示例项目](https://github.com/imzbf/md-editor-v3/tree/main/example/webComponent)
+
+下面是注意事项
+
+1. 内部的图片放大查看无效，需要自行实现！！！
+2. 不能默认的使用CDN引用依赖库，参考[[自行引入扩展库]](https://imzbf.github.io/md-editor-v3/zh-CN/demo#%F0%9F%99%8D%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8F%20%E8%87%AA%E8%A1%8C%E5%BC%95%E5%85%A5%E6%89%A9%E5%B1%95%E5%BA%93)！！！
+3. 只能使用font-class引用的图标，默认的symbol引用无效！！！
+
 ## 🥂 扩展功能
 
 这里包含了一些编辑器\`api\`的使用示范
@@ -1764,7 +1784,7 @@ const toolbars = ['italic', 'underline', '-', 'bold', '=', 'github'];
   --md-color: if(@isDark, #999, #222);
   --md-hover-color: if(@isDark, #bbb, #000);
   --md-bk-color: if(@isDark, #000, #fff);
-  --md-bk-color-outstand: if(@isDark, #111, #f6f6f6);
+  --md-bk-color-outstand: if(@isDark, #333, #f2f2f2);
   --md-bk-hover-color: if(@isDark, #1b1a1a, #f5f7fa);
   --md-border-color: if(@isDark, #2d2d2d, #e6e6e6);
   --md-border-hover-color: if(@isDark, #636262, #b9b9b9);
@@ -1831,16 +1851,22 @@ import highlight from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
 
 // <3.0
-import prettier from 'prettier';
-import parserMarkdown from 'prettier/parser-markdown';
+// import prettier from 'prettier';
+// import parserMarkdown from 'prettier/parser-markdown';
 // >=3.0
 import * as prettier from 'prettier';
 import parserMarkdown from 'prettier/plugins/markdown';
 
+// 1. symbol引用
 // \${iconfontSvgUrl}
 import './assets/iconfont.js';
+// 2. font-class引用
+// \${iconfontClassUrl}
+import './assets/iconfont.css';
 
 config({
+  // font-class引用
+  // iconfontType: 'class',
   editorExtensions: {
     prettier: {
       prettierInstance: prettier,
@@ -1865,6 +1891,8 @@ config({
 });
 \`\`\`
 
+App.vue
+
 \`\`\`vue
 <template>
   <MdEditor v-model="text" noIconfont />
@@ -2090,4 +2118,4 @@ config({
 ## 🧻 编辑此页面
 
 [demo-zh-CN](https://github.com/imzbf/md-editor-v3/blob/dev-docs/public/demo-zh-CN.md)
-`,b={class:"container"},k={class:"doc"},E={name:"DemoPage"},S=l({...E,setup(y){const n=c(),e="demo-preview",t=p(r(n.state.lang==="en-US"?d:a,{iconfontSvgUrl:i,iconfontClassUrl:s,EDITOR_VERSION:m}));return u(()=>n.state.lang,()=>{t.value=r(n.state.lang==="en-US"?d:a,{iconfontSvgUrl:i,iconfontClassUrl:s,EDITOR_VERSION:m})}),(M,C)=>(f(),h("div",b,[g("div",k,[o(x,{editorId:e,modelValue:t.value},null,8,["modelValue"]),o(v,{editorId:e})])]))}});export{S as default};
+`,b={class:"container"},k={class:"doc"},E={name:"DemoPage"},S=l({...E,setup(y){const n=c(),e="demo-preview",t=p(o(n.state.lang==="en-US"?d:a,{iconfontSvgUrl:i,iconfontClassUrl:s,EDITOR_VERSION:m}));return u(()=>n.state.lang,()=>{t.value=o(n.state.lang==="en-US"?d:a,{iconfontSvgUrl:i,iconfontClassUrl:s,EDITOR_VERSION:m})}),(M,C)=>(f(),h("div",b,[g("div",k,[r(x,{editorId:e,modelValue:t.value},null,8,["modelValue"]),r(v,{editorId:e})])]))}});export{S as default};