feat: parse html

packages/basic-modules/src/modules/blockquote/index.ts

@@ -6,12 +6,14 @@
 import { IModuleConf } from '@wangeditor/core'
 import { renderBlockQuoteConf } from './render-elem'
 import { quoteToHtmlConf } from './elem-to-html'
+import { parseHtmlConf } from './parse-elem-html'
 import { blockquoteMenuConf } from './menu/index'
 import withBlockquote from './plugin'
 
 const blockquote: Partial<IModuleConf> = {
   renderElems: [renderBlockQuoteConf],
   elemsToHtml: [quoteToHtmlConf],
+  parseElemsHtml: [parseHtmlConf],
   menus: [blockquoteMenuConf],
   editorPlugin: withBlockquote,
 }

packages/basic-modules/src/modules/blockquote/parse-elem-html.ts

@@ -0,0 +1,31 @@
+/**
+ * @description parse html
+ * @author wangfupeng
+ */
+
+import { Descendant } from 'slate'
+import { Dom7Array } from 'dom7'
+import { IDomEditor } from '@wangeditor/core'
+import { BlockQuoteElement } from './custom-types'
+
+function parseHtml(
+  $elem: Dom7Array,
+  children: Descendant[],
+  editor: IDomEditor
+): BlockQuoteElement {
+  // 无 children ，则用纯文本
+  if (children.length === 0) {
+    children = [{ text: $elem.text().replace(/\s+/gm, ' ') }]
+  }
+
+  return {
+    type: 'blockquote',
+    // @ts-ignore
+    children,
+  }
+}
+
+export const parseHtmlConf = {
+  selector: 'blockquote',
+  parseElemHtml: parseHtml,
+}

packages/basic-modules/src/modules/code-block/index.ts

@@ -7,13 +7,17 @@ import { IModuleConf } from '@wangeditor/core'
 import { codeBlockMenuConf } from './menu/index'
 import withCodeBlock from './plugin'
 import { renderPreConf, renderCodeConf } from './render-elem'
+import { preParseHtmlConf } from './pre-parse-html'
+import { parseCodeHtmlConf, parsePreHtmlConf } from './parse-elem-html'
 import { codeToHtmlConf, preToHtmlConf } from './elem-to-html'
 
 const codeBlockModule: Partial<IModuleConf> = {
   menus: [codeBlockMenuConf],
   editorPlugin: withCodeBlock,
   renderElems: [renderPreConf, renderCodeConf],
   elemsToHtml: [codeToHtmlConf, preToHtmlConf],
+  preParseHtml: [preParseHtmlConf],
+  parseElemsHtml: [parseCodeHtmlConf, parsePreHtmlConf],
 }
 
 export default codeBlockModule

packages/basic-modules/src/modules/code-block/parse-elem-html.ts

@@ -0,0 +1,35 @@
+/**
+ * @description parse html
+ * @author wangfupeng
+ */
+
+import { Descendant } from 'slate'
+import { Dom7Array } from 'dom7'
+import { IDomEditor, DomEditor } from '@wangeditor/core'
+import { PreElement, CodeElement } from './custom-types'
+
+function parseCodeHtml($elem: Dom7Array, children: Descendant[], editor: IDomEditor): CodeElement {
+  return {
+    type: 'code',
+    language: '', // language 在 code-highlight 中实现
+    children: [{ text: $elem[0].textContent || '' }],
+  }
+}
+
+export const parseCodeHtmlConf = {
+  selector: 'code',
+  parseElemHtml: parseCodeHtml,
+}
+
+function parsePreHtml($elem: Dom7Array, children: Descendant[], editor: IDomEditor): PreElement {
+  return {
+    type: 'pre',
+    // @ts-ignore
+    children: children.filter(child => DomEditor.getNodeType(child) === 'code'),
+  }
+}
+
+export const parsePreHtmlConf = {
+  selector: 'pre',
+  parseElemHtml: parsePreHtml,
+}

packages/basic-modules/src/modules/code-block/pre-parse-html.ts

@@ -0,0 +1,30 @@
+/**
+ * @description pre parse html
+ * @author wangfupeng
+ */
+
+import { Dom7Array } from 'dom7'
+import { getTagName } from '../../utils/dom'
+
+/**
+ * pre-prase <code> ，去掉其中的 <xmp> （兼容 V4）
+ * @param $code $code
+ */
+function preParse($code: Dom7Array) {
+  const tagName = getTagName($code)
+  if (tagName !== 'code') return $code
+
+  const $xmp = $code.find('xmp')
+  if ($xmp.length === 0) return $code // 不是 V4 格式
+
+  const codeText = $xmp.text()
+  $xmp.remove()
+  $code.text(codeText)
+
+  return $code
+}
+
+export const preParseHtmlConf = {
+  selector: 'pre>code', // 匹配 <pre> 下的 <code>
+  preParseHtml: preParse,
+}

packages/basic-modules/src/modules/color/index.ts

@@ -6,12 +6,16 @@
 import { IModuleConf } from '@wangeditor/core'
 import { renderStyle } from './render-style'
 import { styleToHtml } from './style-to-html'
+import { preParseHtmlConf } from './pre-parse-html'
+import { parseStyleHtml } from './parse-style-html'
 import { colorMenuConf, bgColorMenuConf } from './menu/index'
 import withColor from './plugin'
 
 const color: Partial<IModuleConf> = {
   renderStyle,
   styleToHtml,
+  preParseHtml: [preParseHtmlConf],
+  parseStyleHtml,
   menus: [colorMenuConf, bgColorMenuConf],
   editorPlugin: withColor,
 }

packages/basic-modules/src/modules/color/menu/config.ts

@@ -4,36 +4,36 @@
  */
 
 const COLORS = [
-  '#000000',
-  '#262626',
-  '#595959',
-  '#8c8c8c',
-  '#bfbfbf',
-  '#d9d9d9',
-  '#e9e9e9e',
-  '#f5f5f5',
-  '#fafafa',
-  '#ffffff', // 10
-  '#e13c39',
-  '#e75f33',
-  '#eb903a',
-  '#f5db4d',
-  '#72c040',
-  '#59bfc0',
-  '#4290f7',
-  '#3658e2',
-  '#6a39c9',
-  '#d84493', // 10
-  '#fbe9e6',
-  '#fcede1',
-  '#fcefd4',
-  '#fcfbcf',
-  '#e7f6d5',
-  '#daf4f0',
-  '#d9edfa',
-  '#e0e8fa',
-  '#ede1f8',
-  '#f6e2ea', // 10
+  'rgb(0, 0, 0)',
+  'rgb(38, 38, 38)',
+  'rgb(89, 89, 89)',
+  'rgb(140, 140, 140)',
+  'rgb(191, 191, 191)',
+  'rgb(217, 217, 217)',
+  'rgb(233, 233, 233)',
+  'rgb(245, 245, 245)',
+  'rgb(250, 250, 250)',
+  'rgb(255, 255, 255)', // 10
+  'rgb(225, 60, 57)',
+  'rgb(231, 95, 51)',
+  'rgb(235, 144, 58)',
+  'rgb(245, 219, 77)',
+  'rgb(114, 192, 64)',
+  'rgb(89, 191, 192)',
+  'rgb(66, 144, 247)',
+  'rgb(54, 88, 226)',
+  'rgb(106, 57, 201)',
+  'rgb(216, 68, 147)', // 10
+  'rgb(251, 233, 230)',
+  'rgb(252, 237, 225)',
+  'rgb(252, 239, 212)',
+  'rgb(252, 251, 207)',
+  'rgb(231, 246, 213)',
+  'rgb(218, 244, 240)',
+  'rgb(217, 237, 250)',
+  'rgb(224, 232, 250)',
+  'rgb(237, 225, 248)',
+  'rgb(246, 226, 234)', // 10
   'rgb(255, 163, 158)',
   'rgb(255, 187, 150)',
   'rgb(255, 213, 145)',

packages/basic-modules/src/modules/color/parse-style-html.ts

@@ -0,0 +1,27 @@
+/**
+ * @description parse style html
+ * @author wangfupeng
+ */
+
+import { Dom7Array } from 'dom7'
+import { Descendant, Text } from 'slate'
+import { ColorText } from './custom-types'
+import { getStyleValue } from '../../utils/dom'
+
+export function parseStyleHtml($text: Dom7Array, node: Descendant): Descendant {
+  if (!Text.isText(node)) return node
+
+  const textNode = node as ColorText
+
+  const color = getStyleValue($text, 'color')
+  if (color) {
+    textNode.color = color
+  }
+
+  const bgColor = getStyleValue($text, 'background-color')
+  if (bgColor) {
+    textNode.bgColor = bgColor
+  }
+
+  return textNode
+}

packages/basic-modules/src/modules/color/pre-parse-html.ts

@@ -0,0 +1,30 @@
+/**
+ * @description pre-parse html
+ * @author wangfupeng
+ */
+
+import { Dom7Array } from 'dom7'
+import { getTagName } from '../../utils/dom'
+
+/**
+ * pre-prase font ，兼容 V4
+ * @param $font $font
+ */
+function preParse($font: Dom7Array) {
+  const tagName = getTagName($font)
+  if (tagName !== 'font') return $font
+
+  // 处理 color （V4 使用 <font color="#ccc">xx</font> 格式）
+  const color = $font.attr('color') || ''
+  if (color) {
+    $font.removeAttr('color')
+    $font.css('color', color)
+  }
+
+  return $font
+}
+
+export const preParseHtmlConf = {
+  selector: 'font',
+  preParseHtml: preParse,
+}

packages/basic-modules/src/modules/divider/index.ts

@@ -7,11 +7,13 @@ import { IModuleConf } from '@wangeditor/core'
 import withDivider from './plugin'
 import { renderDividerConf } from './render-elem'
 import { dividerToHtmlConf } from './elem-to-html'
+import { parseHtmlConf } from './parse-elem-html'
 import { insertDividerMenuConf, deleteDividerMenuConf } from './menu/index'
 
 const image: Partial<IModuleConf> = {
   renderElems: [renderDividerConf],
   elemsToHtml: [dividerToHtmlConf],
+  parseElemsHtml: [parseHtmlConf],
   menus: [insertDividerMenuConf, deleteDividerMenuConf],
   editorPlugin: withDivider,
 }

packages/basic-modules/src/modules/divider/parse-elem-html.ts

@@ -0,0 +1,21 @@
+/**
+ * @description parse html
+ * @author wangfupeng
+ */
+
+import { Descendant } from 'slate'
+import { Dom7Array } from 'dom7'
+import { IDomEditor } from '@wangeditor/core'
+import { DividerElement } from './custom-types'
+
+function parseHtml($elem: Dom7Array, children: Descendant[], editor: IDomEditor): DividerElement {
+  return {
+    type: 'divider',
+    children: [{ text: '' }], // void node 有一个空白 text
+  }
+}
+
+export const parseHtmlConf = {
+  selector: 'hr',
+  parseElemHtml: parseHtml,
+}

packages/basic-modules/src/modules/font-size-family/index.ts

@@ -6,11 +6,15 @@
 import { IModuleConf } from '@wangeditor/core'
 import { renderStyle } from './render-style'
 import { styleToHtml } from './style-to-html'
+import { preParseHtmlConf } from './pre-parse-html'
+import { parseStyleHtml } from './parse-style-html'
 import { fontSizeMenuConf, fontFamilyMenuConf } from './menu/index'
 
 const fontSizeAndFamily: Partial<IModuleConf> = {
   renderStyle,
   styleToHtml,
+  preParseHtml: [preParseHtmlConf],
+  parseStyleHtml,
   menus: [fontSizeMenuConf, fontFamilyMenuConf],
 }
 

packages/basic-modules/src/modules/font-size-family/parse-style-html.ts

@@ -0,0 +1,27 @@
+/**
+ * @description parse style html
+ * @author wangfupeng
+ */
+
+import { Dom7Array } from 'dom7'
+import { Descendant, Text } from 'slate'
+import { FontSizeAndFamilyText } from './custom-types'
+import { getStyleValue } from '../../utils/dom'
+
+export function parseStyleHtml($text: Dom7Array, node: Descendant): Descendant {
+  if (!Text.isText(node)) return node
+
+  const textNode = node as FontSizeAndFamilyText
+
+  const fontSize = getStyleValue($text, 'font-size')
+  if (fontSize) {
+    textNode.fontSize = fontSize
+  }
+
+  const fontFamily = getStyleValue($text, 'font-family')
+  if (fontFamily) {
+    textNode.fontFamily = fontFamily
+  }
+
+  return textNode
+}