fix(doc): bad image path when parsing clipboard HTML (#4119)

dream-num · Nov 21, 2024 · adfaf14 · adfaf14
1 parent bf8329f
commit adfaf14
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/docs-ui/src/services/clipboard/html-to-udm/converter.ts b/packages/docs-ui/src/services/clipboard/html-to-udm/converter.ts
@@ -18,7 +18,7 @@ import type { IDocumentBody, IDocumentData, ITable, ITextStyle, Nullable } from
 import type { IAfterProcessRule, IPastePlugin, IStyleRule } from './paste-plugins/type';
 
 import { CustomRangeType, DataStreamTreeTokenType, generateRandomId, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType, skipParseTagNames, Tools } from '@univerjs/core';
-import { DrawingTypeEnum } from '@univerjs/drawing';
+import { DrawingTypeEnum, ImageSourceType } from '@univerjs/drawing';
 import { genTableSource, getEmptyTableCell, getEmptyTableRow, getTableColumn } from '../../../commands/commands/table/table';
 import { extractNodeStyle } from './parse-node-style';
 import parseToDom from './parse-to-dom';
@@ -130,8 +130,8 @@ export class HtmlToUDMService {
                 }
             } else if (node.nodeName === 'IMG') {
                 const element = node as HTMLImageElement;
-                const source = element.src;
                 const imageSourceType = element.dataset.imageSourceType;
+                const source = imageSourceType === ImageSourceType.UUID ? element.dataset.source : element.src;
 
                 if (source && imageSourceType) {
                     const width = Number(element.dataset.width || 100);

diff --git a/packages/docs-ui/src/services/clipboard/udm-to-html/convertor.ts b/packages/docs-ui/src/services/clipboard/udm-to-html/convertor.ts
@@ -18,11 +18,29 @@ import type { IDocumentBody, IDocumentData, IParagraph, ITextRun } from '@univer
 import type { IDocImage } from '@univerjs/docs-drawing';
 import type { DataStreamTreeNode } from '@univerjs/engine-render';
 import { BaselineOffset, BooleanNumber, CustomRangeType, DataStreamTreeNodeType, Tools } from '@univerjs/core';
-import { DrawingTypeEnum } from '@univerjs/drawing';
+import { DrawingTypeEnum, ImageSourceType } from '@univerjs/drawing';
 import { parseDataStreamToTree } from '@univerjs/engine-render';
 
 function covertImageToHtml(item: IDocImage) {
-    return `<img data-doc-transform-height="${item.docTransform.size.height}" data-doc-transform-width="${item.docTransform.size.width}" data-width="${item.transform?.width}" data-height="${item.transform?.height}" data-image-source-type="${item.imageSourceType}" src="${item.source}"></img>`;
+    const transformObjectToString = (obj: Record<string, string | number | undefined>) => {
+        let result = '';
+        Object.keys(obj).forEach((key) => {
+            if (obj[key] !== undefined) {
+                result += ` ${key}=${obj[key]}`;
+            }
+        });
+        return result;
+    };
+    const obj = {
+        'data-doc-transform-height': item.docTransform.size.height,
+        'data-doc-transform-width': item.docTransform.size.width,
+        'data-width': item.transform?.width,
+        'data-height': item.transform?.height,
+        'data-image-source-type': item.imageSourceType,
+        'data-source': item.imageSourceType === ImageSourceType.UUID ? item.source : undefined,
+        src: item.source,
+    };
+    return `<img  ${transformObjectToString(obj)}></img>`;
 }
 
 export function covertTextRunToHtml(dataStream: string, textRun: ITextRun): string {
@@ -223,7 +241,7 @@ export function convertBodyToHtml(doc: IDocumentData): string {
     return result.html;
 }
 
-// eslint-disable-next-line max-lines-per-function, complexity
+// eslint-disable-next-line max-lines-per-function
 function processNode(node: DataStreamTreeNode, doc: IDocumentData, result: IHtmlResult) {
     switch (node.nodeType) {
         case DataStreamTreeNodeType.SECTION_BREAK: {