Error: Internal Error: do not use legacy react-dom/server APIs #3186
Replies: 3 comments 2 replies
-
Does it happen in <31.4.4? |
Beta Was this translation helpful? Give feedback.
-
Which version of ReactJS you are using? |
Beta Was this translation helpful? Give feedback.
-
It's seems like the fact we have used
Options I see
I would suggest to make use of |
Beta Was this translation helpful? Give feedback.
-
I've struggling for a almost a day trying to figure out why i am getting this issue, tried updating
serializeHtml
to the latest version. Still getting the same issue.I commented out serializeHtml and just console.log the function on change, did not experience the issue.
here is a look at my set-up:
`'use client';
import { Editor } from '@/packages/editor/plate-ui/editor';
import { FixedToolbar } from '@/packages/editor/plate-ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/packages/editor/plate-ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/packages/editor/plate-ui/floating-toolbar';
import { FloatingToolbarButtons } from '@/packages/editor/plate-ui/floating-toolbar-buttons';
import { HeadingElement } from '@/packages/editor/plate-ui/heading-element';
import { ListElement } from '@/packages/editor/plate-ui/list-element';
import { ParagraphElement } from '@/packages/editor/plate-ui/paragraph-element';
import { TableCellElement, TableCellHeaderElement } from '@/packages/editor/plate-ui/table-cell-element';
import { TableElement } from '@/packages/editor/plate-ui/table-element';
import { TableRowElement } from '@/packages/editor/plate-ui/table-row-element';
import { withProps } from '@udecode/cn';
import { MARK_BOLD, MARK_ITALIC, createBoldPlugin, createItalicPlugin } from '@udecode/plate-basic-marks';
import { Plate, PlateEditor, PlateElement, PlateLeaf, createPlateEditor, createPlugins, deserializeHtml } from '@udecode/plate-common';
import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, createHeadingPlugin } from '@udecode/plate-heading';
import { ELEMENT_LI, ELEMENT_OL, ELEMENT_UL, createListPlugin } from '@udecode/plate-list';
import { ELEMENT_PARAGRAPH, createParagraphPlugin } from '@udecode/plate-paragraph';
import { serializeHtml } from '@udecode/plate-serializer-html';
import { ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TR, createTablePlugin } from '@udecode/plate-table';
import { useMemo, useRef } from 'react';
import { useDebouncedCallback } from 'use-debounce';
const plugins = createPlugins(
[
createParagraphPlugin(),
createHeadingPlugin(),
createListPlugin(),
createTablePlugin(),
createBoldPlugin(),
createItalicPlugin(),
// createAutoformatPlugin({
// options: {
// rules: [
// // Usage: https://platejs.org/docs/autoformat
// ],
// enableUndoOnDelete: true,
// },
// }),
// createDndPlugin({
// options: { enableScroller: true },
// }),
// createExitBreakPlugin({
// options: {
// rules: [
// {
// hotkey: 'mod+enter',
// },
// {
// hotkey: 'mod+shift+enter',
// before: true,
// },
// {
// hotkey: 'enter',
// query: {
// start: true,
// end: true,
// // allow: KEYS_HEADING,
// },
// relative: true,
// level: 1,
// },
// ],
// },
// }),
// createNodeIdPlugin(),
// createResetNodePlugin({
// options: {
// rules: [
// // Usage: https://platejs.org/docs/reset-node
// ],
// },
// }),
// createSelectOnBackspacePlugin({
// options: {
// query: {
// allow: [
// // ELEMENT_IMAGE, ELEMENT_HR
// ],
// },
// },
// }),
// createDeletePlugin(),
// createSoftBreakPlugin({
// options: {
// rules: [
// { hotkey: 'shift+enter' },
// {
// hotkey: 'enter',
// query: {
// allow: [
// // ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD
// ],
// },
// },
// ],
// },
// }),
// createTabbablePlugin(),
// createTrailingBlockPlugin({
// options: { type: ELEMENT_PARAGRAPH },
// }),
],
{
components: {
[ELEMENT_H1]: withProps(HeadingElement, { variant: 'h1' }),
[ELEMENT_H2]: withProps(HeadingElement, { variant: 'h2' }),
[ELEMENT_H3]: withProps(HeadingElement, { variant: 'h3' }),
[ELEMENT_H4]: withProps(HeadingElement, { variant: 'h4' }),
[ELEMENT_H5]: withProps(HeadingElement, { variant: 'h5' }),
[ELEMENT_H6]: withProps(HeadingElement, { variant: 'h6' }),
[ELEMENT_UL]: withProps(ListElement, { variant: 'ul' }),
[ELEMENT_OL]: withProps(ListElement, { variant: 'ol' }),
[ELEMENT_LI]: withProps(PlateElement, { as: 'li' }),
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_TABLE]: TableElement,
[ELEMENT_TR]: TableRowElement,
[ELEMENT_TD]: TableCellElement,
[ELEMENT_TH]: TableCellHeaderElement,
[MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }),
[MARK_ITALIC]: withProps(PlateLeaf, { as: 'em' }),
},
},
);
type Props = {
htmlValue: string;
onChanged: (content: string) => void;
};
export function PlateEditor({ htmlValue, onChanged }: Props) {
const editorRef = useRef(null);
const initialValue = useMemo(() => {
const tmpEditor = createPlateEditor({ plugins });
}, [htmlValue]);
const debouncedCallback = useDebouncedCallback((newValue) => {
console.log('new value :', newValue)
const html = serializeHtml(editorRef.current!, {
nodes: newValue,
});
}, 1000);
return (
<Plate
editorRef={editorRef}
plugins={plugins}
initialValue={initialValue as any}
onChange={(newValue) => debouncedCallback(newValue)}
>
);
}
`
Beta Was this translation helpful? Give feedback.
All reactions