chore: add clipper extension package (#2281)

packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/generateNodesFromDOM.ts

@@ -0,0 +1,135 @@
+/**
+ * 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
+}

packages/web/src/javascripts/Components/SuperEditor/Plugins/CollapsiblePlugin/CollapsibleContainerNode.ts

@@ -112,7 +112,7 @@ export class CollapsibleContainerNode extends ElementNode {
   }
 
   getOpen(): boolean {
-    return this.getLatest().__open
+    return this.__open
   }
 
   toggleOpen(): void {

packages/web/src/javascripts/Components/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx

@@ -1,20 +1,22 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
 import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown'
-import { $generateNodesFromDOM } from '@lexical/html'
-import { $createParagraphNode, $createRangeSelection } from 'lexical'
+import { $createParagraphNode, $createRangeSelection, LexicalEditor } from 'lexical'
 import { handleEditorChange } from '../../Utils'
 import { SuperNotePreviewCharLimit } from '../../SuperEditor'
+import { $generateNodesFromDOM } from '../../Lexical/Utils/generateNodesFromDOM'
 
 /** Note that markdown conversion does not insert new lines. See: https://github.com/facebook/lexical/issues/2815 */
 export default function ImportPlugin({
   text,
   format,
   onChange,
+  customImportFunction,
 }: {
   text: string
   format: 'md' | 'html'
   onChange: (value: string, preview: string) => void
+  customImportFunction?: (editor: LexicalEditor, text: string) => void
 }): JSX.Element | null {
   const [editor] = useLexicalComposerContext()
 
@@ -24,19 +26,24 @@ export default function ImportPlugin({
       return
     }
 
+    if (customImportFunction) {
+      customImportFunction(editor, text)
+      return
+    }
+
     editor.update(() => {
       if (format === 'md') {
         $convertFromMarkdownString(text, [...TRANSFORMERS])
       } else {
         const parser = new DOMParser()
         const dom = parser.parseFromString(text, 'text/html')
-        const nodes = $generateNodesFromDOM(editor, dom)
+        const nodesToInsert = $generateNodesFromDOM(editor, dom)
         const selection = $createRangeSelection()
         const newLineNode = $createParagraphNode()
-        selection.insertNodes([newLineNode, ...nodes])
+        selection.insertNodes([newLineNode, ...nodesToInsert])
       }
     })
-  }, [editor, text, format])
+  }, [editor, text, format, customImportFunction])
 
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {