feat(editor-md): feat checkbox plugin (DevCloudFE#1725)

GreatZPP · web-flow · commit c90238f8a28d · 2023-09-04T10:13:33.000+08:00
diff --git a/packages/devui-vue/devui/editor-md/index.ts b/packages/devui-vue/devui/editor-md/index.ts
@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import EditorMd from './src/editor-md';
 import MdRender from './src/components/md-render';
 export * from './src/editor-md-types';
+export * from './src/plugins/checkbox';
 
 export { EditorMd, MdRender };
 
@@ -12,5 +13,5 @@ export default {
   install(app: App): void {
     app.component(EditorMd.name, EditorMd);
     app.component(MdRender.name, MdRender);
-  }
+  },
 };
diff --git a/packages/devui-vue/devui/editor-md/src/components/md-render.tsx b/packages/devui-vue/devui/editor-md/src/components/md-render.tsx
@@ -6,7 +6,7 @@ import { useEditorMdRender, useMdRenderWatcher } from '../composables/use-editor
 export default defineComponent({
   name: 'DMdRender',
   props: mdRenderProps,
-  emits: ['mdRenderChange', 'mdCheckedEvent'],
+  emits: ['mdRenderChange', 'checkedChange'],
   setup(props: MdRenderProps, ctx: SetupContext) {
     const { previewRef, renderService, onPreviewClick, setContainerContent } = useEditorMdRender(props, ctx);
     useMdRenderWatcher(props, renderService, setContainerContent);
diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-render.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-render.ts
@@ -54,7 +54,7 @@ export function useEditorMdRender(props: MdRenderProps, ctx: SetupContext) {
       const result = previewRef.value.querySelectorAll('input');
       const index = [...result].filter((el: any) => el.type === 'checkbox').findIndex((item: any) => item === e.target);
       const checkContent = setChecked(e.target.checked, index);
-      ctx.emit('mdCheckedEvent', checkContent);
+      ctx.emit('checkedChange', checkContent);
     }
   };
 
diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts
@@ -102,7 +102,7 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
   };
 
   const onChecked = (e: string) => {
-    ctx.emit('mdCheckedEvent', e);
+    ctx.emit('checkedChange', e);
   };
 
   const scrollToFocusItem = () => {
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.scss b/packages/devui-vue/devui/editor-md/src/editor-md.scss
@@ -109,6 +109,10 @@ $font-family: helvetica, arial, 'PingFang', 'Microsoft YaHei', 'Hiragino Sans GB
   .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {
     color: $devui-line;
   }
+
+  input[type='checkbox'] + label {
+    margin-left: 6px;
+  }
 }
 
 .dp-editor-md-preview-container.dp-md-view {
diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx
@@ -11,7 +11,7 @@ import './editor-md.scss';
 export default defineComponent({
   name: 'DEditorMd',
   props: editorMdProps,
-  emits: ['update:modelValue', 'mdCheckedEvent', 'selectHint', 'afterEditorInit', 'contentChange', 'previewContentChange', 'imageUpload'],
+  emits: ['update:modelValue', 'checkedChange', 'selectHint', 'afterEditorInit', 'contentChange', 'previewContentChange', 'imageUpload'],
   setup(props: EditorMdProps, ctx: SetupContext) {
     const {
       mode,
@@ -64,7 +64,8 @@ export default defineComponent({
           class={[
             'dp-md-container',
             { 'dp-md-readonly': mode.value === 'readonly', 'dp-md-editonly': mode.value === 'editonly', 'dp-md-dark': isDarkMode.value },
-          ]} onPaste={onPaste}>
+          ]}
+          onPaste={onPaste}>
           <div class="dp-md-toolbar-container">
             <Toolbar />
           </div>
@@ -94,7 +95,7 @@ export default defineComponent({
               disable-render
               md-plugins={mdPlugins.value}
               onMdRenderChange={previewContentChange}
-              onMdCheckedEvent={onChecked}
+              onCheckedChange={onChecked}
               onScroll={onPreviewScroll}
               onMouseover={onPreviewMouseover}
               onMouseout={onPreviewMouseout}>
diff --git a/packages/devui-vue/devui/editor-md/src/plugins/checkbox.ts b/packages/devui-vue/devui/editor-md/src/plugins/checkbox.ts
@@ -0,0 +1,112 @@
+import * as _ from 'lodash';
+
+const checkboxReplace = function (md: any, options: any) {
+  let lastId: number;
+  const arrReplaceAt = md.utils.arrayReplaceAt;
+  lastId = 0;
+  const defaults = {
+    divWrap: false,
+    divClass: 'checkbox',
+    idPrefix: 'checkbox',
+  };
+  options = _.extend(defaults, options);
+  const pattern = /\[(X|\s|\_|\-)\]\s(.*)/i;
+  const createTokens = function (checked: any, label: any, Token: any) {
+    let token;
+    const nodes = [];
+    /**
+     * <div class="checkbox">
+     */
+    if (options.divWrap) {
+      token = new Token('checkbox_open', 'div', 1);
+      token.attrs = [['class', 'checkbox']];
+      nodes.push(token);
+    }
+
+    /**
+     * <input type="checkbox" id="checkbox{n}" checked="true">
+     */
+    const id = options.idPrefix + lastId;
+    lastId += 1;
+    token = new Token('checkbox_input', 'input', 0);
+    token.attrs = [
+      ['type', 'checkbox'],
+      ['id', id],
+    ];
+
+    if (options.disabled) {
+      token.attrs.push(['disabled', true]);
+    }
+    if (checked === true) {
+      token.attrs.push(['checked', 'true']);
+    }
+    nodes.push(token);
+
+    /**
+     * <label for="checkbox{n}">
+     */
+    token = new Token('label_open', 'label', 1);
+    token.attrs = [['for', id]];
+    nodes.push(token);
+
+    /**
+     * content of label tag
+     */
+    token = new Token('text', '', 0);
+    token.content = label;
+    nodes.push(token);
+
+    /**
+     * closing tags
+     */
+    nodes.push(new Token('label_close', 'label', -1));
+    if (options.divWrap) {
+      nodes.push(new Token('checkbox_close', 'div', -1));
+    }
+    return nodes;
+  };
+
+  const splitTextToken = function (original: any, Token: any) {
+    let checked;
+    const text = original.content;
+    const matches = text.match(pattern);
+
+    if (matches === null) {
+      return original;
+    }
+    checked = false;
+    const value = matches[1];
+    const label = matches[2];
+    if (value === 'X' || value === 'x') {
+      checked = true;
+    }
+    return createTokens(checked, label, Token);
+  };
+
+  return function (state: any) {
+    let i, j, token, tokens;
+    const blockTokens = state.tokens;
+    j = 0;
+    const l = blockTokens.length;
+    while (j < l) {
+      if (blockTokens[j].type !== 'inline') {
+        j++;
+        continue;
+      }
+      tokens = blockTokens[j].children;
+      i = tokens.length - 1;
+      while (i >= 0) {
+        token = tokens[i];
+        if (token.type === 'text' && pattern.test(token.content)) {
+          blockTokens[j].children = tokens = arrReplaceAt(tokens, i, splitTextToken(token, state.Token));
+        }
+        i--;
+      }
+      j++;
+    }
+  };
+};
+
+export function checkbox(md: any, options: any) {
+  md.core.ruler.push('checkbox', checkboxReplace(md, options));
+}
diff --git a/packages/devui-vue/docs/components/editor-md/checkbox.vue b/packages/devui-vue/docs/components/editor-md/checkbox.vue
@@ -0,0 +1,48 @@
+<template>
+  <d-editor-md
+    v-model="content"
+    :md-rules="mdRules"
+    base-url="https://test-base-url"
+    @content-change="valueChange"
+    @checked-change="onCheckedEvent"
+  />
+  <!-- <d-editor-md
+    v-model="content"
+    :md-rules="mdRules"
+    :md-plugins="plugins"
+    base-url="https://test-base-url"
+    @content-change="valueChange"
+    @checked-change="onCheckedEvent"
+  /> -->
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+// import { checkbox } from 'vue-devui/editor-md'; // demo无法进行import，使用时请放开注释
+
+const content = ref('- [x] checked \n - [ ] unchecked');
+const mdRules = reactive({
+  linkify: {
+    fuzzyLink: false,
+  },
+});
+
+const valueChange = (val) => {
+  console.log(val);
+};
+
+const plugins = reactive([
+  {
+    // plugin: checkbox,
+    opts: {
+      idPrefix: 'devui',
+      disable: false,
+    },
+  },
+]);
+
+const onCheckedEvent = (val) => {
+  console.log('demo', val);
+  content.value = val;
+};
+</script>
diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md
@@ -225,6 +225,13 @@ export default defineComponent({
 
 :::
 
+### checkbox 渲染
+
+:::demo 通过配置md-plugins checkbox插件，进行checkbox渲染于checked变更响应。
+
+editor-md/checkbox
+:::
+
 ### EditorMd 参数
 
 | 参数名                 | 类型                                      | 默认值   | 说明                                                                                                               |
@@ -234,6 +241,7 @@ export default defineComponent({
 | base-url               | `string`                                  | --       | 设置渲染到 html 时，为相对 url 添加的 baseUrl                                                                      |
 | custom-parse           | `(html: string) => string`                | --       | 自定义对渲染后的 html 处理，需要接收渲染后的 html，返回自定义处理后的 html                                         |
 | md-rules               | `object`                                  | {}       | 设置 markdown 对字符串的处理方式， 可参考[markdown-it](https://www.npmjs.com/package/markdown-it?activeTab=readme) |
+| md-plugins             | [MdPlugin[]](#mdplugin)                   | --       | 设置 markdown-it 插件 |
 | mode                   | `'editonly' \| 'readonly' \| 'normal'`    | 'normal' | 只写/只读/双栏显示模式选择，默认 'normal' 双栏模式显示                                                             |
 | custom-renderer-rules  | [ICustomRenderRule[]](#icustomrenderrule) | []       | 自定义 markdown 对节点的渲染方式，每条规则需要指定对应节点 key,并自定义渲染函数                                    |
 | custom-xss-rules       | [ICustomXssRule[]](#icustomxssrule)       | []       | 自定义 xss 对某种 tag 的过滤方式，每条规则需要指定 tag, 并给出需要加入白名单的属性数组                             |
@@ -249,6 +257,7 @@ export default defineComponent({
 | content-change         | `Function(content: string)`  | 编辑器内容改变事件，返回当前内容                                   |           |
 | preview-content-change | `Function()`                 | 预览内容改变时触发                                                 |           |
 | image-upload           | `Function({file, callback})` | 打开图片上传开关后，图片上传事件回调，返回文件内容与 callback 函数 |           |
+| checked-change           | `Function(content: string)` | plugins添加checkbox后，预览checkbox checked状态改变回调 |           |
 
 ### MdRender 参数
 
@@ -265,6 +274,7 @@ export default defineComponent({
 | 事件名           | 回调参数           | 说明                                       | 跳转 Demo |
 | :--------------- | :----------------- | :----------------------------------------- | :-------- |
 | md-render-change | `Function(string)` | 内容改变时触发，返回对应 html 渲染结果字段 |           |
+| checked-change   | `Function(content: string)` | plugins添加checkbox后，预览checkbox checked状态改变回调 |           |
 
 #### ICustomRenderRule
 
@@ -283,3 +293,12 @@ interface ICustomXssRule {
   value: string[];
 }
 ```
+
+#### MdPlugin
+
+```ts
+export interface MdPlugin {
+  plugin: any;
+  opts?: Object;
+}
+```
diff --git a/packages/devui-vue/docs/vite.config.ts b/packages/devui-vue/docs/vite.config.ts
@@ -9,7 +9,8 @@ export default defineConfig({
     alias: [
       { find: '@devui/theme', replacement: resolve(__dirname, '../../devui-theme/src') },
       { find: '@devui/shared/components', replacement: resolve(__dirname, '../devui') },
-      { find: '@devui', replacement: resolve(__dirname, '../devui') }
+      { find: '@devui', replacement: resolve(__dirname, '../devui') },
+      { find: 'vue-devui', replacement: resolve(__dirname, '../devui') },
     ],
   },
   plugins: [vueJsx({}), svgLoader(), MdTransformer()],

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export function useEditorMdRender(props: MdRenderProps, ctx: SetupContext) {`
`54`	`54`	`const result = previewRef.value.querySelectorAll('input');`
`55`	`55`	`const index = [...result].filter((el: any) => el.type === 'checkbox').findIndex((item: any) => item === e.target);`
`56`	`56`	`const checkContent = setChecked(e.target.checked, index);`
`57`		`- ctx.emit('mdCheckedEvent', checkContent);`
	`57`	`+ ctx.emit('checkedChange', checkContent);`
`58`	`58`	`}`
`59`	`59`	`};`
`60`	`60`
Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,10 @@ $font-family: helvetica, arial, 'PingFang', 'Microsoft YaHei', 'Hiragino Sans GB`
`109`	`109`	`.CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {`
`110`	`110`	`color: $devui-line;`
`111`	`111`	`}`
	`112`	`+`
	`113`	`+ input[type='checkbox'] + label {`
	`114`	`+ margin-left: 6px;`
	`115`	`+ }`
`112`	`116`	`}`
`113`	`117`
`114`	`118`	`.dp-editor-md-preview-container.dp-md-view {`