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

[carlos19960601]

Description

I Follow the doc and create a basic editor. Calling htmlReact.serialize causes a error: Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":1}

import {
  Plate,
  PlateContent,
  usePlateEditor,
} from "@udecode/plate-common/react";

import { HtmlReactPlugin } from "@udecode/plate-html/react";

const PlateEditor = () => {
  const editor = usePlateEditor({
    plugins: [HtmlReactPlugin],
  });
  return (
    <Plate
      editor={editor}
      onChange={({ value }) => {
        const html = editor.api.htmlReact.serialize({
          nodes: editor.children,
        });
        console.log(value, html);
      }}
    >
      <PlateContent placeholder="Type..." />
    </Plate>
  );
};

Reproduction URL

No response

Reproduction steps

just basic editor with HtmlReactPlugin

Plate version

38.0.4

Slate React version

0.110.1

Screenshots

No response

Logs

No response

Browsers

Chrome

Funding

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

[mrhirapra]

I'm also facing this problem. I'm find many ways but still not any solution 😞

[FrederikHandberg]

same here...

[VanThuan76]

I have same issue but I saw the issue which can solved #2804

[syedaAnusha]

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}
    </>
  );
};