chore: use generateNodesFromDOM from core
This commit is contained in:
@@ -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'
|
||||
|
||||
@@ -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<LexicalNode> {
|
||||
let lexicalNodes: Array<LexicalNode> = []
|
||||
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<string, DOMChildConversion> = new Map(),
|
||||
parentLexicalNode?: LexicalNode | null | undefined,
|
||||
preformatted = false,
|
||||
): Array<LexicalNode> {
|
||||
let lexicalNodes: Array<LexicalNode> = []
|
||||
|
||||
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
|
||||
}
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user