`serializeHtml` throws `Invalid hook call` error #2804

bfaulk96 · 2023-12-13T18:40:52Z

Description

When calling serializeHtml (from @udecode/plate-serializer-html), React throws an invalid hook error:

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Steps to Reproduce

I have a component, CustomPlateEditor. In this component, I have:

<DndProvider backend={HTML5Backend}>
  <Plate editorRef={editorRef} initialValue={initialValue ?? defaultInitialValue} onChange={onChange} plugins={PLATE_PLUGINS}>
    <FixedToolbar>
      <FixedToolbarButtons/>
    </FixedToolbar>
    <Editor focusRing={false} id='PlateEditor' />
    <FloatingToolbar>
      <FloatingToolbarButtons/>
    </FloatingToolbar>
  </Plate>
</DndProvider>

My editorRef is passed down from a parent component, which contains the following code:

export const SomeOtherComponent = () => {
  const editorRef = useRef<PlateEditor | null>(null);
  const [editorValue, setEditorValue] = useState<TElement[]>(defaultInitialValue);
  const [editorHtmlValue, setEditorHtmlValue] = useState('');

  const onEditorChange = (value: TElement[]) => {
    setEditorValue(value);
    if (!editorRef.current) return;

    const html = serializeHtml(editorRef.current, {
      nodes: editorRef.current.children,
      dndWrapper: (props) => <DndProvider backend={HTML5Backend} {...props} />
    });
    setEditorHtmlValue(html);
  };

  // Other logic here

  return <>
    {/* Other stuff here */}
    <CustomPlateEditor editorRef={editorRef} initialValue={editorValue} onChange={onEditorChange} />
  </>
}

When making any sort of change inside my Plate editor, I end up getting the invalid hook error, which I've narrowed down to only happening due to the nodes: editorRef.current.children part of the serializeHtml function. I've tried various other approaches including creating a temporary editor and passing in the editor value, but I get the same React hook error. I've checked that I don't have different versions of React running, so it seems to be an issue within @udecode/plate-serializer-html

Sandbox

I will make a code sandbox within a couple of days and update this issue.

Expected Behavior

I would expect that, with the given code I have in my app, making any change to the Plate rich text editor would result in a raw html string being set for my editorHtmlValue state value.

Environment

slate: [email protected]
slate-react: [email protected]
browser: chrome
PlateJS: @udecode/[email protected]

Funding

You can sponsor this specific effort via a Polar.sh pledge below
We receive the pledge once the issue is completed & verified

The text was updated successfully, but these errors were encountered:

ningdev1 · 2024-01-20T08:30:44Z

Is there any update?

mkmrcodes · 2024-01-23T21:17:46Z

Same error. Here is the screenshot.

zbeyens · 2024-01-24T10:21:08Z

No ETA until consulting request.

leonardorb · 2024-01-29T05:42:11Z

I'm having the same issue.

juzjus10 · 2024-01-29T06:56:10Z

Having the issue too

andshonia · 2024-02-06T07:46:12Z

@zbeyens Any solution?

andshonia · 2024-02-06T12:13:56Z

After thorough debugging over several hours, it was determined that the issue arose from the inclusion of the createBlockSelectionPlugin with specific options, notably:

createBlockSelectionPlugin({ options: { sizes: { top: 0, bottom: 0, }, }, })

The solution involved filtering the array of plugins to exclude the blockSelection plugin:

const excludedSelectionPlugin = plugins?.filter(plugin => plugin?.key !== 'blockSelection');

Subsequently, the modified array excludedSelectionPlugin was passed to the createPlateEditor function:

serializeHtml(createPlateEditor({ plugins: excludedSelectionPlugin }), { nodes: textEditor, data, dndWrapper: props => <DndProvider backend={HTML5Backend} {...props} />, })

This adjustment successfully resolved the encountered issue.

Hope you will figure out the original issue which was caused by 'createBlockSelectionPlugin';

seanbruce · 2024-02-07T01:09:24Z

@andshonia Thank you. Your solution works in my case.

shobhit5186 · 2024-02-13T06:28:05Z

I have the same issue but the workaround is not working for me. It appears that other plugins might also have bug which is causing invalid hook call.
Issue happens inside the serializeHtml() call.

zy-zero · 2024-02-23T07:41:45Z

Here have the error message call serializeHtml function. how can I do to resolve this error?

holycrypto · 2024-03-16T03:35:48Z

Invalid hook call. Hooks can only be called inside of the body of a function component.

artur1214 · 2024-04-05T10:58:12Z

After thorough debugging over several hours, it was determined that the issue arose from the inclusion of the createBlockSelectionPlugin with specific options, notably:

createBlockSelectionPlugin({ options: { sizes: { top: 0, bottom: 0, }, }, })

The solution involved filtering the array of plugins to exclude the blockSelection plugin:

const excludedSelectionPlugin = plugins?.filter(plugin => plugin?.key !== 'blockSelection');

Subsequently, the modified array excludedSelectionPlugin was passed to the createPlateEditor function:

serializeHtml(createPlateEditor({ plugins: excludedSelectionPlugin }), { nodes: textEditor, data, dndWrapper: props => <DndProvider backend={HTML5Backend} {...props} />, })

This adjustment successfully resolved the encountered issue.

Hope you will figure out the original issue which was caused by 'createBlockSelectionPlugin';

I find out, that your solution is not working for me, and made some debugging. now I can See, that createTogglePlugin also causes this bug.

ankuragrwl · 2024-04-15T18:36:11Z

I was also facing the same issue:

Workaround (that worked for me):
createPlateEditor({ plugins: plugins?.filter( (plugin) => plugin?.key !== 'toggle' && plugin?.key !== 'blockSelection' ), })

Lenghak · 2024-05-05T08:06:14Z

By filter out the toggle and blockSelection, the html serialization is now working for me. Furthermore, I do suggest adding context={window} on DndWrapper according to this comment: Multiple DndProviders inside a pure component can lead to Cannot have two HTML5 backends at the same time #3257, if anyone faces cannot have two HTML5Backend problem from DnDWrapper.

ajshovon · 2024-06-12T04:35:29Z

for me filtering toggle and blockSelection did not work. i needed to filter p also

const filteredPlugins = plugins?.filter((plugin) => plugin?.key !== 'toggle' && plugin?.key !== 'blockSelection' && plugin?.key !== 'p');

Latest v34

ajshovon · 2024-06-12T06:43:33Z

for me filtering toggle and blockSelection did not work. i needed to filter p also

const filteredPlugins = plugins?.filter((plugin) => plugin?.key !== 'toggle' && plugin?.key !== 'blockSelection' && plugin?.key !== 'p');

Latest v34

I removed the p filtering now it works without it!!!!

But i am facing another problem, i am desearilizing a html and showing it in the editor, but if there is any text, (p tag), the editor get reset if i type something

bagus2x · 2024-09-22T21:50:41Z

By creating a temporary editor and replacing serializeHtml with htmlReact, this solution worked for me

<Plate
    editor={editor}
    onChange={() => {
      const tmp = createPlateEditor({
        plugins: [HtmlReactPlugin],
      })
      const html= tmp.api.htmlReact.serialize({ nodes: editor.children })
      console.log(html)
    }}
  >
    <FixedToolbar>
      <FixedToolbarButtons />
    </FixedToolbar>
    <Editor />
    <FloatingToolbar>
      <FloatingToolbarButtons />
    </FloatingToolbar>
    <CommentsPopover />
</Plate>

leonfortgenss · 2024-09-23T14:07:40Z

By creating a temporary editor and replacing serializeHtml with htmlReact, this solution worked for me

<Plate
    editor={editor}
    onChange={() => {
      const tmp = createPlateEditor({
        plugins: [HtmlReactPlugin],
      })
      const html= tmp.api.htmlReact.serialize({ nodes: editor.children })
      console.log(html)
    }}
  >
    <FixedToolbar>
      <FixedToolbarButtons />
    </FixedToolbar>
    <Editor />
    <FloatingToolbar>
      <FloatingToolbarButtons />
    </FloatingToolbar>
    <CommentsPopover />
</Plate>

This worked for me! Lifesaver took me 2 days and your comment saved me.

zbeyens · 2024-09-23T14:15:14Z

You're omitting the components so this would serialize to default div and span without any styles. The workaround to above errors is to pass your own context-free components this way:

const tmp = createPlateEditor({
  plugins: [HtmlReactPlugin],
  override: {
    components: {
      p: HtmlParagraphElement,
      // ...
    }
  }
})

thiszhangjin · 2024-09-24T08:05:51Z

I solved it by blocking the BlockSelectionPlugin
// BlockSelectionPlugin,

Lenghak · 2024-09-24T14:04:57Z

Doing like this doesn't it mean opting out the BlockSelectionPlugin feature on your editor? IMO, we only wanted to filter out the selection when the html serialization is needed.

zbeyens · 2024-09-24T14:13:34Z

We'll work on read-only components compatible with this serializer, that will also be useful for read-only editors.

syedaAnusha · 2024-11-03T16:41:37Z

Put editor.api.htmlReact.serialize({nodes:editor.children}) in a separate function. as it can't be use inside Plate's onChange handler.
Just a quick code for better understanding!, Hope this will help!

// PLATE COMPONENTS
import { Editor } from "@/components/plate-ui/Editor";
import { FixedToolbar } from "@/components/plate-ui/FixedToolbar";
import { FixedToolbarButtons } from "@/components/plate-ui/fixed-toolbar-buttons";
import { TooltipProvider } from "@/components/plate-ui/Tooltip";
import { useCreateEditor } from "@/hooks/useCreateEditor";
import { useEffect, useRef, useState } from "react";
import { Plate } from "@udecode/plate-common/react";

export const EditorComponent = () => {
  const [content, setContent] = useState<any>("");
  const [_html, setHTML] = useState<any>("");
  const [isClicked, setIsClicked] = useState<boolean>(false);
  const containerRef = useRef(null);
  const editor = useCreateEditor();

  useEffect(() => {
    console.log("CONTENT", content);
  }, [content, _html]);
  const converToHtml = () => {
    const html = editor.api.htmlReact.serialize({
      nodes: content,
      stripDataAttributes: false,
      stripWhitespace: false,
      // preserveClassNames: ["slate-h1", "slate-h2", "slate-h3"],
    });
    setHTML(html);
    console.log("Serialized HTML:", html);
    setIsClicked(true);
    console.log("HTML", _html);
  };

  return (
    <>
      <Plate
        editor={editor}
        onChange={({ value }) => {
          setContent(value);
        }}
      >
        <FixedToolbar className="sticky">
          <FixedToolbarButtons />
        </FixedToolbar>
        <TooltipProvider>
          <Editor ref={containerRef} className="h-auto" />
        </TooltipProvider>
      </Plate>
      <button
        className="border bg-purple-900 text-white text-2xl rounded-md p-2"
        onClick={converToHtml}
      >
        convert to HTML
      </button>

      {isClicked ? (
        <div
          className="w-full border border-black h-[100vh]"
          dangerouslySetInnerHTML={{ __html: _html }}
        />
      ) : null}
    </>
  );
};

pirmax · 2024-11-12T12:03:38Z

Could a kind soul give me some additional information on this useEditorRef must be used inside a Plate or PlateController problem?

I would like to revive the topic: I would like to render the HTML in relation to what was written, and if possible without a temporary editor (which is not, in my opinion, a viable solution).

zbeyens · 2024-11-12T12:11:32Z

Copy/paste incompatible components (that use React context). For example block-selection.tsx -> block-selection-html.tsx
Remove React context and state logic from those components
Create an editor using those components
editorHtml.api.htmlReact.serialize should work

This requires some effort. We'll abstract this as soon as we can.

syedaAnusha · 2024-11-12T12:19:15Z

@pirmax

Well, you can try to wrap up your editor component with Hoc.
Like:
const Editor = withHoc(Plate controller, ()=>{...your code})
Hopes, it will not throw an error.

ericaig · 2024-11-12T14:41:49Z

You're omitting the components so this would serialize to default div and span without any styles. The workaround to above errors is to pass your own context-free components this way:
const tmp = createPlateEditor({
  plugins: [HtmlReactPlugin],
  override: {
    components: {
      p: HtmlParagraphElement,
      // ...
    }
  }
})

I'm doing it like this as well, but I get plain divs with none of the applied styles:

<div>Playground</div><div class="slate-p">A rich-text editor with AI capabilities. Try the AI commands or use Cmd+J to open the AI menu.</div>

      const tmpEditor = createPlateEditor({
        plugins: [HtmlReactPlugin],
        override: {
          components: editorComponents,
        },
      })

      const html = tmpEditor.api.htmlReact.serialize({
        nodes: editor.children,
        convertNewLinesToHtmlBr: true,
        stripWhitespace: false,
        dndWrapper: (props) => (
          <DndProvider backend={HTML5Backend} {...props} />
        ),
      });

export const editorComponents = {
  // [AIPlugin.key]: AILeaf,
  [BlockquotePlugin.key]: BlockquoteElement,
  [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
  [CodeBlockPlugin.key]: CodeBlockElement,
  [CodeLinePlugin.key]: CodeLineElement,
  [CodePlugin.key]: CodeLeaf,
  [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
  [ColumnItemPlugin.key]: ColumnElement,
  [ColumnPlugin.key]: ColumnGroupElement,
  [CommentsPlugin.key]: CommentLeaf,
  [DatePlugin.key]: DateElement,
  [EmojiInputPlugin.key]: EmojiInputElement,
  [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: "h1" }),
  [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: "h2" }),
  [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: "h3" }),
  [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: "h4" }),
  [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: "h5" }),
  [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: "h6" }),
  [HighlightPlugin.key]: HighlightLeaf,
  [HorizontalRulePlugin.key]: HrElement,
  [ImagePlugin.key]: ImageElement,
  [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
  [KbdPlugin.key]: KbdLeaf,
  [LinkPlugin.key]: LinkElement,
  [MediaEmbedPlugin.key]: MediaEmbedElement,
  [MentionInputPlugin.key]: MentionInputElement,
  [MentionPlugin.key]: MentionElement,
  [ParagraphPlugin.key]: ParagraphElement,
  [SlashInputPlugin.key]: SlashInputElement,
  [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
  [SubscriptPlugin.key]: withProps(PlateLeaf, { as: "sub" }),
  [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: "sup" }),
  [TableCellHeaderPlugin.key]: TableCellHeaderElement,
  [TableCellPlugin.key]: TableCellElement,
  [TablePlugin.key]: TableElement,
  [TableRowPlugin.key]: TableRowElement,
  [TocPlugin.key]: TocElement,
  [TogglePlugin.key]: ToggleElement,
  [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
};

Divanny · 2024-11-14T15:27:40Z

You're omitting the components so this would serialize to default div and span without any styles. The workaround to above errors is to pass your own context-free components this way:
const tmp = createPlateEditor({
  plugins: [HtmlReactPlugin],
  override: {
    components: {
      p: HtmlParagraphElement,
      // ...
    }
  }
})

I'm doing it like this as well, but I get plain divs with none of the applied styles:

<div>Playground</div><div class="slate-p">A rich-text editor with AI capabilities. Try the AI commands or use Cmd+J to open the AI menu.</div>

      const tmpEditor = createPlateEditor({
        plugins: [HtmlReactPlugin],
        override: {
          components: editorComponents,
        },
      })

      const html = tmpEditor.api.htmlReact.serialize({
        nodes: editor.children,
        convertNewLinesToHtmlBr: true,
        stripWhitespace: false,
        dndWrapper: (props) => (
          <DndProvider backend={HTML5Backend} {...props} />
        ),
      });

export const editorComponents = {
  // [AIPlugin.key]: AILeaf,
  [BlockquotePlugin.key]: BlockquoteElement,
  [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
  [CodeBlockPlugin.key]: CodeBlockElement,
  [CodeLinePlugin.key]: CodeLineElement,
  [CodePlugin.key]: CodeLeaf,
  [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
  [ColumnItemPlugin.key]: ColumnElement,
  [ColumnPlugin.key]: ColumnGroupElement,
  [CommentsPlugin.key]: CommentLeaf,
  [DatePlugin.key]: DateElement,
  [EmojiInputPlugin.key]: EmojiInputElement,
  [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: "h1" }),
  [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: "h2" }),
  [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: "h3" }),
  [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: "h4" }),
  [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: "h5" }),
  [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: "h6" }),
  [HighlightPlugin.key]: HighlightLeaf,
  [HorizontalRulePlugin.key]: HrElement,
  [ImagePlugin.key]: ImageElement,
  [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
  [KbdPlugin.key]: KbdLeaf,
  [LinkPlugin.key]: LinkElement,
  [MediaEmbedPlugin.key]: MediaEmbedElement,
  [MentionInputPlugin.key]: MentionInputElement,
  [MentionPlugin.key]: MentionElement,
  [ParagraphPlugin.key]: ParagraphElement,
  [SlashInputPlugin.key]: SlashInputElement,
  [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
  [SubscriptPlugin.key]: withProps(PlateLeaf, { as: "sub" }),
  [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: "sup" }),
  [TableCellHeaderPlugin.key]: TableCellHeaderElement,
  [TableCellPlugin.key]: TableCellElement,
  [TablePlugin.key]: TableElement,
  [TableRowPlugin.key]: TableRowElement,
  [TocPlugin.key]: TocElement,
  [TogglePlugin.key]: ToggleElement,
  [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
};

You got a solution? I have same problem.

bfaulk96 added the bug Something isn't working label Dec 13, 2023

zbeyens added the has workaround label Feb 7, 2024

zbeyens added the plugin:serialize-html label May 2, 2024

zbeyens mentioned this issue Oct 30, 2024

HTMLReact Serializer does not work #3687

Closed

This was referenced Nov 2, 2024

HtmlReactPlugin serialize error: Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":1} #3553

Open

serializeHtml throws Invalid hook call error udecode/plate-playground-template#13

Open

zbeyens mentioned this issue Nov 12, 2024

Trying to render Plate to HTML to display the blog post #3757

Closed

zbeyens mentioned this issue Nov 12, 2024

get error when use serializeHtml with createBlockSelectionPlugin #2710

Closed

zbeyens pinned this issue Nov 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`serializeHtml` throws `Invalid hook call` error #2804

`serializeHtml` throws `Invalid hook call` error #2804

bfaulk96 commented Dec 13, 2023 •

edited

Loading

ningdev1 commented Jan 20, 2024

mkmrcodes commented Jan 23, 2024

zbeyens commented Jan 24, 2024

leonardorb commented Jan 29, 2024

juzjus10 commented Jan 29, 2024

andshonia commented Feb 6, 2024

andshonia commented Feb 6, 2024

seanbruce commented Feb 7, 2024

shobhit5186 commented Feb 13, 2024

zy-zero commented Feb 23, 2024

holycrypto commented Mar 16, 2024

artur1214 commented Apr 5, 2024

ankuragrwl commented Apr 15, 2024

Lenghak commented May 5, 2024

ajshovon commented Jun 12, 2024

ajshovon commented Jun 12, 2024

bagus2x commented Sep 22, 2024

leonfortgenss commented Sep 23, 2024 •

edited

Loading

zbeyens commented Sep 23, 2024 •

edited

Loading

thiszhangjin commented Sep 24, 2024

Lenghak commented Sep 24, 2024

zbeyens commented Sep 24, 2024

syedaAnusha commented Nov 3, 2024

pirmax commented Nov 12, 2024

zbeyens commented Nov 12, 2024

syedaAnusha commented Nov 12, 2024

ericaig commented Nov 12, 2024

Divanny commented Nov 14, 2024

serializeHtml throws Invalid hook call error #2804

serializeHtml throws Invalid hook call error #2804

Comments

bfaulk96 commented Dec 13, 2023 • edited Loading

Description

Steps to Reproduce

Sandbox

Expected Behavior

Environment

Funding

ningdev1 commented Jan 20, 2024

mkmrcodes commented Jan 23, 2024

zbeyens commented Jan 24, 2024

leonardorb commented Jan 29, 2024

juzjus10 commented Jan 29, 2024

andshonia commented Feb 6, 2024

andshonia commented Feb 6, 2024

seanbruce commented Feb 7, 2024

shobhit5186 commented Feb 13, 2024

zy-zero commented Feb 23, 2024

holycrypto commented Mar 16, 2024

artur1214 commented Apr 5, 2024

ankuragrwl commented Apr 15, 2024

Lenghak commented May 5, 2024

ajshovon commented Jun 12, 2024

ajshovon commented Jun 12, 2024

bagus2x commented Sep 22, 2024

leonfortgenss commented Sep 23, 2024 • edited Loading

zbeyens commented Sep 23, 2024 • edited Loading

thiszhangjin commented Sep 24, 2024

Lenghak commented Sep 24, 2024

zbeyens commented Sep 24, 2024

syedaAnusha commented Nov 3, 2024

pirmax commented Nov 12, 2024

zbeyens commented Nov 12, 2024

syedaAnusha commented Nov 12, 2024

ericaig commented Nov 12, 2024

Divanny commented Nov 14, 2024

`serializeHtml` throws `Invalid hook call` error #2804

`serializeHtml` throws `Invalid hook call` error #2804

bfaulk96 commented Dec 13, 2023 •

edited

Loading

leonfortgenss commented Sep 23, 2024 •

edited

Loading

zbeyens commented Sep 23, 2024 •

edited

Loading