fix: add function

toptal · Jun 27, 2023 · 49e8fa8 · 49e8fa8
1 parent 73c23c5
commit 49e8fa8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/packages/picasso/src/LexicalEditor/LexicalEditor.tsx b/packages/picasso/src/LexicalEditor/LexicalEditor.tsx
@@ -13,7 +13,6 @@ import { HeadingNode } from '@lexical/rich-text'
 import { $generateHtmlFromNodes } from '@lexical/html'
 import { ListItemNode, ListNode } from '@lexical/list'
 import { $isRootTextContentEmpty } from '@lexical/text'
-import { TextNode } from 'lexical'
 
 import { createLexicalTheme } from './utils'
 import noop from '../utils/noop'
@@ -26,14 +25,41 @@ import ToolbarPlugin from '../LexicalEditorToolbarPlugin'
 import LexicalTextLengthPlugin from '../LexicalTextLengthPlugin'
 import LexicalListPlugin from '../LexicalListPlugin'
 import LexicalHeadingsReplacementPlugin from '../LexicalHeadingsReplacementPlugin'
-import { PicassoTextNode } from './nodes/TestNode'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'LexicalEditor',
 })
 
 const removeAttributesFromString = (htmlString: string) => {
-  return htmlString.replace(/\s(class|dir|value)="[^"]*"/g, '')
+  return htmlString.replace(/\s(class|dir|value|style)="[^"]*"/g, '')
+}
+
+// Courtesy of ChatGPT
+const removeTagsAndKeepContent = (html: string, tagsToRemove: string[]) => {
+  const parser = new DOMParser()
+  const htmlDoc = parser.parseFromString(html, 'text/html')
+
+  tagsToRemove.forEach(function (tag) {
+    const elements = htmlDoc.getElementsByTagName(tag)
+
+    for (let counter = elements.length - 1; counter >= 0; counter--) {
+      const parent = elements[counter].parentNode
+
+      if (parent) {
+        while (elements[counter].firstChild) {
+          if (elements[counter].firstChild) {
+            parent.insertBefore(
+              elements[counter].firstChild as Node,
+              elements[counter]
+            )
+          }
+        }
+        parent.removeChild(elements[counter])
+      }
+    }
+  })
+
+  return htmlDoc.body.innerHTML
 }
 
 export type Props = BaseProps & {
@@ -141,7 +167,7 @@ const LexicalEditor = forwardRef<HTMLDivElement, Props>(function LexicalEditor(
         ListNode,
         ListItemNode,
         HeadingNode,
-        PicassoTextNode,
+        //PicassoTextNode,
         // {
         //   replace: TextNode,
         //   with: (node: TextNode) => {
@@ -165,7 +191,13 @@ const LexicalEditor = forwardRef<HTMLDivElement, Props>(function LexicalEditor(
           ? ''
           : removeAttributesFromString($generateHtmlFromNodes(editor, null))
 
-        onChange(htmlValue)
+        const cleanedHtmlValue = removeTagsAndKeepContent(htmlValue, [
+          'b',
+          'i',
+          'span',
+        ])
+
+        onChange(cleanedHtmlValue)
       })
     },
     [onChange]

diff --git a/packages/picasso/src/LexicalHeadingsReplacementPlugin/LexicalHeadingsReplacementPlugin.ts b/packages/picasso/src/LexicalHeadingsReplacementPlugin/LexicalHeadingsReplacementPlugin.ts
@@ -3,8 +3,6 @@ import { HeadingNode } from '@lexical/rich-text'
 import { useEffect } from 'react'
 
 import { replaceHeadingNodes } from './utils'
-import { TextNode } from 'lexical'
-import { PicassoTextNode } from '../LexicalEditor/nodes/TestNode'
 
 const LexicalHeadingsReplacementPlugin = () => {
   const [editor] = useLexicalComposerContext()
@@ -13,12 +11,13 @@ const LexicalHeadingsReplacementPlugin = () => {
     return editor.registerNodeTransform(HeadingNode, replaceHeadingNodes)
   }, [editor])
 
-  useEffect(() => {
-    return editor.registerNodeTransform(TextNode, (node: TextNode) => {
-      console.log('@@@ replacing')
-      node.replace(new PicassoTextNode(node.getTextContent()))
-    })
-  }, [editor])
+  // useEffect(() => {
+  //   return editor.registerNodeTransform(TextNode, (node: TextNode) => {
+  //     console.log('@@@ replacing')
+  //     const newNode = PicassoTextNode.clone(node)
+  //     node.replace(newNode)
+  //   })
+  // }, [editor])
 
   return null
 }