diff --git a/packages/web/src/javascripts/Components/ClipperView/getSuperJSONFromClipHTML.tsx b/packages/web/src/javascripts/Components/ClipperView/getSuperJSONFromClipHTML.tsx index acbb420a9..560950446 100644 --- a/packages/web/src/javascripts/Components/ClipperView/getSuperJSONFromClipHTML.tsx +++ b/packages/web/src/javascripts/Components/ClipperView/getSuperJSONFromClipHTML.tsx @@ -1,5 +1,5 @@ import { $createParagraphNode, $getRoot, $insertNodes, LexicalNode } from 'lexical' -import { $generateNodesFromDOM } from '../SuperEditor/Lexical/Utils/generateNodesFromDOM' +import { $generateNodesFromDOM } from '@lexical/html' import { createHeadlessEditor } from '@lexical/headless' import { BlockEditorNodes } from '../SuperEditor/Lexical/Nodes/AllNodes' import BlocksEditorTheme from '../SuperEditor/Lexical/Theme/Theme' diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/generateNodesFromDOM.ts b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/generateNodesFromDOM.ts deleted file mode 100644 index 8375b9bab..000000000 --- a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/generateNodesFromDOM.ts +++ /dev/null @@ -1,135 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -import { $isElementNode, DOMChildConversion, DOMConversion, DOMConversionFn, LexicalEditor, LexicalNode } from 'lexical' - -/** - * How you parse your html string to get a document is left up to you. In the browser you can use the native - * DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom - * or an equivilant library and pass in the document here. - */ -export function $generateNodesFromDOM(editor: LexicalEditor, dom: Document): Array { - let lexicalNodes: Array = [] - const elements = dom.body ? dom.body.childNodes : [] - - for (let i = 0; i < elements.length; i++) { - const element = elements[i] - - if (!IGNORE_TAGS.has(element.nodeName)) { - const lexicalNode = $createNodesFromDOM(element, editor) - - if (lexicalNode !== null) { - lexicalNodes = lexicalNodes.concat(lexicalNode) - } - } - } - - return lexicalNodes -} - -function getConversionFunction(domNode: Node, editor: LexicalEditor): DOMConversionFn | null { - const { nodeName } = domNode - - const cachedConversions = editor._htmlConversions.get(nodeName.toLowerCase()) - - let currentConversion: DOMConversion | null = null - - if (cachedConversions !== undefined) { - for (const cachedConversion of cachedConversions) { - const domConversion = cachedConversion(domNode) - - if ( - domConversion !== null && - (currentConversion === null || currentConversion.priority < domConversion.priority) - ) { - currentConversion = domConversion - } - } - } - - return currentConversion !== null ? currentConversion.conversion : null -} - -const IGNORE_TAGS = new Set(['STYLE', 'SCRIPT']) - -function $createNodesFromDOM( - node: Node, - editor: LexicalEditor, - forChildMap: Map = new Map(), - parentLexicalNode?: LexicalNode | null | undefined, - preformatted = false, -): Array { - let lexicalNodes: Array = [] - - if (IGNORE_TAGS.has(node.nodeName)) { - return lexicalNodes - } - - let currentLexicalNode = null - const transformFunction = getConversionFunction(node, editor) - const transformOutput = transformFunction ? transformFunction(node as HTMLElement, undefined, preformatted) : null - let postTransform = null - - if (transformOutput !== null) { - postTransform = transformOutput.after - currentLexicalNode = transformOutput.node - - if (currentLexicalNode !== null) { - for (const [, forChildFunction] of forChildMap) { - currentLexicalNode = forChildFunction(currentLexicalNode, parentLexicalNode) - - if (!currentLexicalNode) { - break - } - } - - if (currentLexicalNode) { - lexicalNodes.push(currentLexicalNode) - } - } - - if (transformOutput.forChild != null) { - forChildMap.set(node.nodeName, transformOutput.forChild) - } - } - - // If the DOM node doesn't have a transformer, we don't know what - // to do with it but we still need to process any childNodes. - const children = node.childNodes - let childLexicalNodes = [] - - for (let i = 0; i < children.length; i++) { - childLexicalNodes.push( - ...$createNodesFromDOM( - children[i], - editor, - new Map(forChildMap), - currentLexicalNode, - preformatted || (transformOutput && transformOutput.preformatted) === true, - ), - ) - } - - if (postTransform != null) { - childLexicalNodes = postTransform(childLexicalNodes) - } - - if (currentLexicalNode == null) { - // If it hasn't been converted to a LexicalNode, we hoist its children - // up to the same level as it. - lexicalNodes = lexicalNodes.concat(childLexicalNodes) - } else { - if ($isElementNode(currentLexicalNode)) { - // If the current node is a ElementNode after conversion, - // we can append all the children to it. - currentLexicalNode.append(...childLexicalNodes) - } - } - - return lexicalNodes -} diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx index e88e4dc70..5c090893f 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx +++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx @@ -4,7 +4,7 @@ import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown' import { $createParagraphNode, $createRangeSelection, LexicalEditor } from 'lexical' import { handleEditorChange } from '../../Utils' import { SuperNotePreviewCharLimit } from '../../SuperEditor' -import { $generateNodesFromDOM } from '../../Lexical/Utils/generateNodesFromDOM' +import { $generateNodesFromDOM } from '@lexical/html' /** Note that markdown conversion does not insert new lines. See: https://github.com/facebook/lexical/issues/2815 */ export default function ImportPlugin({