chore: development

Author: hoiheart

dev/App.vue

@@ -50,7 +50,7 @@ export default defineComponent({
     const modes = ref(['split', 'unified'])
     const mode = ref('split')
     const languages = ref(['javascript', 'html', 'css'])
-    const language = ref('html')
+    const language = ref('javascript')
     const themes = ref(['dark', 'light'])
     const theme = ref('dark')
 

src/Code.vue

@@ -7,10 +7,23 @@
 
 <script lang="ts">
 import hljs from 'highlight.js'
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted, watch } from 'vue'
 import { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG } from './utils'
 import 'highlight.js/styles/monokai.css'
 
+hljs.configure({
+  noHighlightRe: new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g')
+})
+
+function escapeHTML (value: string) {
+  return value
+  // .replace(/&/g, '&amp;')
+  // .replace(/</g, '&lt;')
+  // .replace(/>/g, '&gt;')
+  // .replace(/"/g, '&quot;')
+  // .replace(/'/g, '&#x27;')
+}
+
 export default defineComponent({
   props: {
     language: {
@@ -25,14 +38,68 @@ export default defineComponent({
   setup (props) {
     const code = ref('')
 
-    const pureValue = props.value.replace(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'), '')
-    code.value = hljs.highlight(props.language, pureValue).value
-
     onMounted(() => {
-      const el = document.createElement('div')
-      el.innerHTML = code.value
+      watch(() => props.value, () => {
+        const hasModifyTags = props.value.match(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'))
+
+        if (!hasModifyTags) {
+          const { value: highlightCode } = hljs.highlight(props.language, props.value)
+          code.value = highlightCode
+          return
+        }
+
+        let highlightCode = ''
+        const pureValue = props.value.replace(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'), '') // without modify tag
+
+        const pureHighlightCode = hljs.highlight(props.language, pureValue).value
+        let plainCode = escapeHTML(props.value)
+        highlightCode = plainCode
+
+        const pureEl = document.createElement('pre')
+        pureEl.innerHTML = pureHighlightCode
+        const plainEl = document.createElement('div')
+        plainEl.innerHTML = plainCode
+
+        function diff (node: HTMLElement) {
+          node.childNodes.forEach(child => {
+            if (child.nodeType === 1) {
+              diff(child as HTMLElement)
+            }
+            if (child.nodeType === 3) {
+              if (!child.textContent) return
+
+              let text = escapeHTML(child.textContent)
+
+              let code = ''
+
+              while (text.length) {
+                if (plainCode.startsWith(MODIFIED_START_TAG)) {
+                  plainCode = plainCode.slice(MODIFIED_START_TAG.length)
+                  code = code + MODIFIED_START_TAG
+                  continue
+                }
+                if (plainCode.startsWith(MODIFIED_CLOSE_TAG)) {
+                  plainCode = plainCode.slice(MODIFIED_CLOSE_TAG.length)
+                  code = code + MODIFIED_CLOSE_TAG
+                  continue
+                }
+
+                code = code + text[0]
+                plainCode = plainCode.slice(1)
+                text = text.slice(1)
+              }
+
+              child.textContent = code
+            }
+          })
+        }
+        diff(pureEl)
+
+        const startEntity = MODIFIED_START_TAG.replace('<', '&lt;').replace('>', '&gt;')
+        const closeEntity = MODIFIED_CLOSE_TAG.replace('<', '&lt;').replace('>', '&gt;')
 
-      console.log(el.childNodes)
+        code.value = pureEl.innerHTML.replace(new RegExp(startEntity, 'g'), '<span class="modified">').replace(new RegExp(closeEntity, 'g'), '</span>')
+      }, { immediate: true })
     })
 
     return {

src/Line.vue

@@ -109,8 +109,8 @@ td {
 td.vue-diff-cell-removed {
   background-color: rgba(255, 0, 0, .1);
 
-  :deep(.hljs-modified) {
-    background-color: rgba(255, 0, 0, .3);
+  :deep(.modified) {
+    background-color: rgba(255, 0, 0, .2);
   }
 }
 
@@ -123,8 +123,8 @@ td.vue-diff-cell-removed.code {
 td.vue-diff-cell-added {
   background-color: rgba(0, 255, 128, .1);
 
-  :deep(.hljs-modified) {
-    background-color: rgba(0, 255, 128, .3);
+  :deep(.modified) {
+    background-color: rgba(0, 255, 128, .2);
   }
 }
 

src/utils.ts

@@ -14,8 +14,8 @@ interface Line {
 type Lines = Array<Line>
 type Diffs = Array<Change>
 
-const MODIFIED_START_TAG = '<span class="modified">'
-const MODIFIED_CLOSE_TAG = '</span>'
+const MODIFIED_START_TAG = '<vue-diff-modified>'
+const MODIFIED_CLOSE_TAG = '</vue-diff-modified>'
 
 const getDiffType = (diff: Change) => {
   if (!diff.count) return 'disabled'