refactor:(RichTextWidget)refactor richtext toobar

frontend/src/app/components/ChartGraph/BasicRichText/ChartRichTextAdapter.tsx

@@ -18,10 +18,6 @@
 
 import { SelectOutlined } from '@ant-design/icons';
 import { Button, Dropdown, Menu, Modal, Row, Tooltip } from 'antd';
-// TODO(tianlei): extract settings from DashBoardPage to standalone file to avoid cycle reference?
-import { MarkdownOptions } from 'app/pages/DashBoardPage/components/WidgetCore/MediaWidget/RichTextWidget/configs/MarkdownOptions';
-import TagBlot from 'app/pages/DashBoardPage/components/WidgetCore/MediaWidget/RichTextWidget/configs/TagBlot';
-import { Formats } from 'app/pages/DashBoardPage/components/WidgetCore/MediaWidget/RichTextWidget/Formats';
 import { FONT_FAMILIES, FONT_SIZES } from 'globalConstants';
 import debounce from 'lodash/debounce';
 import { DeltaStatic } from 'quill';
@@ -42,6 +38,11 @@ import 'react-quill/dist/quill.bubble.css';
 import 'react-quill/dist/quill.core.css';
 import styled from 'styled-components/macro';
 import './RichTextPluginLoader';
+import {
+  Formats,
+  MarkdownOptions,
+} from './RichTextPluginLoader/RichTextConfig';
+import TagBlot from './RichTextPluginLoader/TagBlot';
 
 Quill.register('modules/imageDrop', ImageDrop);
 Quill.register('formats/tag', TagBlot);
@@ -84,6 +85,7 @@ const ChartRichTextAdapter: FC<{
           container: isEditing ? `#${newId}` : null,
           handlers: {},
         },
+
         calcfield: {},
         imageDrop: true,
       };

frontend/src/app/components/ChartGraph/BasicRichText/RichTextPluginLoader/RichTextConfig.ts

@@ -0,0 +1,37 @@
+export const Formats = [
+  'header',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'blockquote',
+  'list',
+  'bullet',
+  'indent',
+  'link',
+  'color',
+  'tag',
+  'calcfield',
+  'mention',
+  'image',
+  'size',
+  'background',
+  'font',
+  'align',
+  'code-block',
+];
+
+export const MarkdownOptions = {
+  ignoreTags: ['pre', 'strikethrough'], // @option - if you need to ignore some tags.
+  tags: {
+    blockquote: {
+      pattern: /^(\|){1,6}\s/g,
+    },
+    bold: {
+      pattern: /^(\|){1,6}\s/g,
+    },
+    italic: {
+      pattern: /(\_){1}(.+?)(?:\1){1}/g,
+    },
+  },
+};

frontend/src/app/components/ChartGraph/BasicRichText/RichTextPluginLoader/TagBlot.ts

@@ -0,0 +1,36 @@
+import { Quill } from 'react-quill';
+
+const Embed = Quill.import('blots/embed');
+class TagBlot extends Embed {
+  static blotName = 'tag';
+  static tagName = 'span';
+  static className = 'tag-container';
+
+  static create(data): any {
+    const node = super.create(data);
+
+    const { name, background, color } = data;
+
+    // 将 delta 数据中的 insert 值存储在 dom 中，以便 static value 中能拿到
+    node.setAttribute('data-name', name);
+    node.setAttribute('data-background', background);
+    node.setAttribute('data-color', color);
+    node.setAttribute('contenteditable', 'false');
+
+    var nodeSpan = document.createElement('span');
+
+    nodeSpan.textContent = name;
+    node.appendChild(nodeSpan);
+
+    node.addEventListener('click', event => {});
+    return node;
+  }
+  static value(node): any {
+    return {
+      name: node.getAttribute('data-name'),
+      background: node.getAttribute('data-background'),
+      color: node.getAttribute('data-color'),
+    };
+  }
+}
+export default TagBlot;