Merge pull request #102 from jiyee/bugfix-text-highlight-missing-in-invalid-children

fix(lark): text highlight missing in invalid children of table cell

Author: whale4113

.changeset/shy-taxes-chew.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/lark': patch
+---
+
+fix: text highlight missing in invalid children of table cell

apps/chrome-extension/src/common/utils.ts

@@ -75,6 +75,7 @@ export class UniqueFileName {
 
 export const transformInvalidTablesToHtml = (
   invalidTables: InvalidTable[],
+  options: { allowDangerousHtml: boolean } = { allowDangerousHtml: false },
 ): void => {
   invalidTables.forEach(invalidTable => {
     const invalidTableIndex = invalidTable.parent?.children.findIndex(
@@ -84,17 +85,25 @@ export const transformInvalidTablesToHtml = (
       invalidTable.parent?.children.splice(invalidTableIndex, 1, {
         type: 'html',
         value: toHtml(
-          toHast({
-            ...invalidTable.inner,
-            // @ts-expect-error non-phrasing content can be supported.
-            children: invalidTable.inner.children.map(row => ({
-              ...row,
-              children: row.children.map(cell => ({
-                ...cell,
-                children: cell.data?.invalidChildren ?? cell.children,
+          toHast(
+            {
+              ...invalidTable.inner,
+              // @ts-expect-error non-phrasing content can be supported.
+              children: invalidTable.inner.children.map(row => ({
+                ...row,
+                children: row.children.map(cell => ({
+                  ...cell,
+                  children: cell.data?.invalidChildren ?? cell.children,
+                })),
               })),
-            })),
-          }),
+            },
+            {
+              allowDangerousHtml: options.allowDangerousHtml,
+            },
+          ),
+          {
+            allowDangerousHtml: options.allowDangerousHtml,
+          },
         ),
       })
     }

apps/chrome-extension/src/scripts/copy-lark-docx-as-markdown.ts

@@ -92,7 +92,9 @@ const main = async () => {
     settings[SettingKey.TableWithNonPhrasingContent] ===
     TableWithNonPhrasingContent.ToHTML
   ) {
-    transformInvalidTablesToHtml(invalidTables)
+    transformInvalidTablesToHtml(invalidTables, {
+      allowDangerousHtml: true,
+    })
   }
 
   const markdown = Docx.stringify(root)

apps/chrome-extension/src/scripts/download-lark-docx-as-markdown.ts

@@ -526,7 +526,9 @@ const main = async (options: { signal?: AbortSignal } = {}) => {
         settings[SettingKey.TableWithNonPhrasingContent] ===
         TableWithNonPhrasingContent.ToHTML
       ) {
-        transformInvalidTablesToHtml(invalidTables)
+        transformInvalidTablesToHtml(invalidTables, {
+          allowDangerousHtml: true,
+        })
       }
 
       const markdown = Docx.stringify(root)
@@ -588,7 +590,9 @@ const main = async (options: { signal?: AbortSignal } = {}) => {
         settings[SettingKey.TableWithNonPhrasingContent] ===
         TableWithNonPhrasingContent.ToHTML
       ) {
-        transformInvalidTablesToHtml(invalidTables)
+        transformInvalidTablesToHtml(invalidTables, {
+          allowDangerousHtml: true,
+        })
       }
 
       const markdown = Docx.stringify(root)

apps/chrome-extension/src/scripts/view-lark-docx-as-markdown.ts

@@ -94,7 +94,9 @@ const main = async () => {
     settings[SettingKey.TableWithNonPhrasingContent] ===
     TableWithNonPhrasingContent.ToHTML
   ) {
-    transformInvalidTablesToHtml(invalidTables)
+    transformInvalidTablesToHtml(invalidTables, {
+      allowDangerousHtml: true,
+    })
   }
 
   const markdown = Docx.stringify(root)

packages/lark/src/docx.ts

@@ -24,6 +24,7 @@ import {
 } from './utils/mdast'
 import { resolveFileDownloadUrl } from './file'
 import isString from 'lodash-es/isString'
+import escape from 'lodash-es/escape'
 
 declare module 'mdast' {
   interface ImageData {
@@ -720,7 +721,7 @@ export const transformOperationsToPhrasingContents = (
     if (options.highlight && (textHighlight || textHighlightBackground)) {
       return {
         type: 'html',
-        value: `<span style="color: ${textHighlight ?? 'inherit'}; background-color: ${textHighlightBackground ?? 'inherit'}">${insert}</span>`,
+        value: `<span style="color: ${textHighlight ?? 'inherit'}; background-color: ${textHighlightBackground ?? 'inherit'}">${escape(insert)}</span>`,
       }
     }