fix: transformCopied mdImgUri

close #89

Author: drl990114

package.json

@@ -177,6 +177,6 @@
     "svgmoji": "^3.2.0",
     "void-elements": "^3.1.0",
     "yjs": "^13.6.14",
-    "zens": "^0.0.24"
+    "zens": "^0.0.25"
   }
 }

src/editor/components/Preview/preview.tsx

@@ -1,16 +1,29 @@
 import { WysiwygThemeWrapper } from '../../theme'
 import { prosemirrorNodeToHtml } from 'remirror'
-import type { Node } from '@remirror/pm/model'
+import { DOMSerializer, type Node } from '@remirror/pm/model'
 import { EditorProps } from '../Editor'
 import { createWysiwygDelegate } from '../WysiwygEditor'
+// @ts-ignore
+import HTML from 'html-parse-stringify'
+import { useEffect, useState } from 'react'
+import { nanoid } from 'nanoid'
+import { Loading3QuartersOutlined } from 'zens/esm/Icons'
 
 interface PreviewProps {
   doc: Node | string
   delegateOptions?: EditorProps['delegateOptions']
 }
 
+type HTMLAstNode = {
+  attrs: Record<string, any>
+  name: string
+  type: string
+  children?: HTMLAstNode[]
+}
+
 export const Preview: React.FC<PreviewProps> = (props) => {
   const { doc, delegateOptions } = props
+  const [processedHtml, setProcessedHtml] = useState('')
   let targetDoc: PreviewProps['doc'] = doc
 
   if (typeof targetDoc === 'string') {
@@ -19,5 +32,60 @@ export const Preview: React.FC<PreviewProps> = (props) => {
 
   const html = prosemirrorNodeToHtml(targetDoc)
 
-  return <WysiwygThemeWrapper dangerouslySetInnerHTML={{ __html: html }} />
+  useEffect(() => {
+    const fullAst = HTML.parse(html)
+
+    const imageLoadTasks: Promise<void>[] = []
+    const handleHtmlText = async (ast: HTMLAstNode[]) => {
+      const handleNode = (node: HTMLAstNode) => {
+        if (!node) {
+          return
+        }
+
+        if (node.name === 'img' && node.attrs?.src && delegateOptions?.handleViewImgSrcUrl) {
+          imageLoadTasks.push(
+            (async () => {
+              node.attrs.src = await delegateOptions?.handleViewImgSrcUrl?.(node.attrs.src)
+              node.attrs.key = nanoid()
+            })(),
+          )
+        }
+
+        if (node.children) {
+          handleHtmlText(node.children)
+        }
+      }
+
+      for (let i = 0; i < ast.length; i++) {
+        handleNode(ast[i])
+      }
+    }
+
+    handleHtmlText(fullAst)
+    Promise.all(imageLoadTasks)
+      .then((res) => {
+        setProcessedHtml(HTML.stringify(fullAst))
+      })
+      .catch(() => {
+        setProcessedHtml(html)
+      })
+  }, [html])
+
+  if (!processedHtml) {
+    return (
+      <div
+        style={{
+          width: '100%',
+          minHeight: '60px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Loading3QuartersOutlined spin size={40} />
+      </div>
+    )
+  }
+
+  return <WysiwygThemeWrapper dangerouslySetInnerHTML={{ __html: processedHtml }} />
 }

src/editor/extensions/Inline/inline-mark-extensions.ts

@@ -197,7 +197,7 @@ const globalImageHrefCache: Map<string, string> = new Map()
   },
   staticKeys: [],
   handlerKeys: [],
-  customHandlerKeys: []
+  customHandlerKeys: [],
 })
 class ImgUri extends MarkExtension<MfImgOptions> {
   static disableExtraAttributes = true
@@ -216,7 +216,11 @@ class ImgUri extends MarkExtension<MfImgOptions> {
           default: '',
         },
       },
-      toDOM: (mark) => ['img', { src: globalImageHrefCache.get(mark.attrs.href) || mark.attrs.href }, 0]
+      toDOM: (mark) => [
+        'img',
+        { src: mark.attrs.href },
+        0,
+      ],
     }
   }
 

yarn.lock

@@ -20,6 +20,29 @@
   resolved "https://registry.yarnpkg.com/@anatine/esbuild-decorators/-/esbuild-decorators-0.2.19.tgz#d4137182abfdf0e6de680f69b447492813b62ef4"
   integrity sha512-pyj6ULyMacyzpDqlnbS2OCkOqxcVgk8IqiTMRJ5CrsF8Yl1azvlX/AM6xWR8UzHKUYDlWOw5mOpos3+7KKR0Lw==
 
+"@ant-design/colors@^7.0.0":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.2.tgz#c5c753a467ce8d86ba7ca4736d2c01f599bb5492"
+  integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==
+  dependencies:
+    "@ctrl/tinycolor" "^3.6.1"
+
+"@ant-design/icons-svg@^4.4.0":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz#ed2be7fb4d82ac7e1d45a54a5b06d6cecf8be6f6"
+  integrity sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==
+
+"@ant-design/icons@^5.3.7":
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.3.7.tgz#d9f3654bf7934ee5faba43f91b5a187f5309ec68"
+  integrity sha512-bCPXTAg66f5bdccM4TT21SQBDO1Ek2gho9h3nO9DAKXJP4sq+5VBjrQMSxMVXSB3HyEz+cUbHQ5+6ogxCOpaew==
+  dependencies:
+    "@ant-design/colors" "^7.0.0"
+    "@ant-design/icons-svg" "^4.4.0"
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-util "^5.31.1"
+
 "@ariakit/[email protected]":
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/@ariakit/core/-/core-0.4.5.tgz#ba42573474c1f54109cf96650e8614d7312a432d"
@@ -612,6 +635,11 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@ctrl/tinycolor@^3.6.1":
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
+  integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
+
 "@drl990114/codemirror-themes@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@drl990114/codemirror-themes/-/codemirror-themes-0.0.1.tgz#da604383518cd4213207aaf8831422312a3fd2ae"
@@ -8392,6 +8420,14 @@ rc-util@^5.21.0, rc-util@^5.24.4, rc-util@^5.34.1:
     "@babel/runtime" "^7.18.3"
     react-is "^18.2.0"
 
+rc-util@^5.31.1:
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c"
+  integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
 react-color@^2.19.3:
   version "2.19.3"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
@@ -9153,6 +9189,7 @@ string-hash@^1.1.1:
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10101,6 +10138,7 @@ why-is-node-running@^2.2.2:
     stackback "0.0.2"
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10257,11 +10295,12 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zens@^0.0.24:
-  version "0.0.24"
-  resolved "https://registry.yarnpkg.com/zens/-/zens-0.0.24.tgz#c46a119549eda1edb03d7a71abd3d7cb1cb7c2cf"
-  integrity sha512-Gy4LGu0X0hV9nWaiuCQ6ZRoDRUYCM3wMAdHXG4UpI5xVDYee6QdT4OrhpldvQ8oxWncxCbxBOryJE6JQ7gqeTg==
+zens@^0.0.25:
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/zens/-/zens-0.0.25.tgz#958134c776a4e52399747316124b7677e863af15"
+  integrity sha512-7cjRP6Xp0rNNVTtIxspetI9yFU6GUDTSVEoGGvs3e94Z77ocGSfMbkbfoX624Ub7XGn5tg5UJsot8t6h4N4A+w==
   dependencies:
+    "@ant-design/icons" "^5.3.7"
     "@ariakit/react" "^0.4.5"
     "@babel/runtime" "^7"
     "@emotion/is-prop-valid" "^1.2.2"