diff --git a/package-lock.json b/package-lock.json index 216f1c67140..97f74d56156 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "@types/prismjs": "^1.26.0", "@types/react": "^18.0.8", "@types/react-dom": "^18.0.3", + "@types/trusted-types": "^2.0.7", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "child-process-promise": "^2.2.1", @@ -8357,6 +8358,13 @@ "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -42703,6 +42711,12 @@ "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==", "dev": true }, + "@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "dev": true + }, "@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", diff --git a/package.json b/package.json index 1c646ed711c..f1d0d0d401c 100644 --- a/package.json +++ b/package.json @@ -136,6 +136,7 @@ "@types/prismjs": "^1.26.0", "@types/react": "^18.0.8", "@types/react-dom": "^18.0.3", + "@types/trusted-types": "^2.0.7", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "child-process-promise": "^2.2.1", diff --git a/packages/lexical-clipboard/src/clipboard.ts b/packages/lexical-clipboard/src/clipboard.ts index b8511cbd619..3de6860e998 100644 --- a/packages/lexical-clipboard/src/clipboard.ts +++ b/packages/lexical-clipboard/src/clipboard.ts @@ -154,7 +154,10 @@ export function $insertDataTransferForRichText( if (htmlString) { try { const parser = new DOMParser(); - const dom = parser.parseFromString(htmlString, 'text/html'); + const dom = parser.parseFromString( + trustHTML(htmlString) as string, + 'text/html', + ); const nodes = $generateNodesFromDOM(editor, dom); return $insertGeneratedNodes(editor, nodes, selection); } catch { @@ -192,6 +195,16 @@ export function $insertDataTransferForRichText( } } +function trustHTML(html: string): string | TrustedHTML { + if (window.trustedTypes && window.trustedTypes.createPolicy) { + const policy = window.trustedTypes.createPolicy('lexical', { + createHTML: (input) => input, + }); + return policy.createHTML(html); + } + return html; +} + /** * Inserts Lexical nodes into the editor using different strategies depending on * some simple selection-based heuristics. If you're looking for a generic way to