feat: 对比

src/configs/elem-to-html.ts

@@ -4,9 +4,11 @@ import { nodeSet } from '@/configs/node.config'
 const elemToHtml = (type: string) => {
     return (elem: SlateElement, childrenHtml: string): string => {
         const dataKey = (elem as any).dataKey || ''
+        const modifyType = (elem as any).modifyType || ''
         return `<${type}
         data-w-e-type="${type}"
         data-key="${dataKey}"
+        data-modify-type="${modifyType}"
     >${childrenHtml}</${type}>`
     }
 }

src/configs/parse-elem-html.ts

@@ -5,11 +5,13 @@ const parseElemHtml = (type: string) => {
     return (domElem: Element, children: SlateDescendant[], editor: IDomEditor): SlateElement => {
         const dataKey = domElem.getAttribute('data-key') || ''
         const dataIndent = domElem.getAttribute('data-indent-level') || ''
+        const modifyType = domElem.getAttribute('data-modify-type') || ''
         const myResume = {
             type,
             dataKey,
             children,
-            dataIndent
+            dataIndent,
+            modifyType
         }
         return myResume
     }

src/configs/render-elem.ts

@@ -6,6 +6,7 @@ import { handleClickDom } from '@/views/editor/functions/compare'
 const renderElem = (type: string, style = { display: 'block' }) => {
     return (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
         const dataKey = (elem as any).dataKey
+        const modifyType = (elem as any).modifyType
         Object.assign(style, {
             // @ts-ignore
             textIndent: Number(elem.dataIndent) * 5 + 'px'
@@ -14,11 +15,11 @@ const renderElem = (type: string, style = { display: 'block' }) => {
             type,
             {
                 style,
-                attrs: { 'data-key': dataKey },
+                attrs: { 'data-key': dataKey, 'data-modify-type': modifyType },
                 on: {
                     click(event: Event) {
                         handleClickDom(event)
-                    },
+                    }
                 }
             },
             children

src/views/editor/components/Compare.vue

@@ -31,6 +31,17 @@
 import { showCompare, compareLeftRef, compareRightRef, compareContainerRef, chooseRowRef, compareData } from '../constants/compare'
 import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
 </script>
+<style lang="less">
+[data-modify-type='removed'] {
+    background-color: red;
+}
+[data-modify-type='added'] {
+    background-color: blue;
+}
+[data-modify-type='placeholder'] {
+    visibility: hidden;
+}
+</style>
 <style lang="less" scoped>
 .choose-row {
     width: 100%;