search

udecode / plate

A rich-text editor powered by AI
https://platejs.org
Other
12k stars 733 forks source link

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. #3531

Closed kjhuanhao closed 2 months ago

kjhuanhao commented 2 months ago

Description

This error occurs when I try to add a plugin

Reproduction URL

No response

Reproduction steps

Plugins code:

import { createPlatePlugin } from "@udecode/plate-common/react";
import { withProps } from "@udecode/cn";
import {
  createPlateEditor,
  Plate,
  ParagraphPlugin,
  PlateElement,
  PlateLeaf,
} from "@udecode/plate-common/react";
import { HeadingPlugin } from "@udecode/plate-heading/react";
import { BlockquotePlugin } from "@udecode/plate-block-quote/react";
import {
  ListPlugin,
  BulletedListPlugin,
  NumberedListPlugin,
  ListItemPlugin,
} from "@udecode/plate-list/react";
import { ImagePlugin } from "@udecode/plate-media/react";
import { CaptionPlugin } from "@udecode/plate-caption/react";
import {
  MentionPlugin,
  MentionInputPlugin,
} from "@udecode/plate-mention/react";
import {
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
} from "@udecode/plate-basic-marks/react";
// import { AlignPlugin } from "@udecode/plate-alsignment";
import { IndentPlugin } from "@udecode/plate-indent/react";
import { IndentListPlugin } from "@udecode/plate-indent-list/react";
// import { LineHeightPlugin } from "@udecode/plate-line-height";
import { AutoformatPlugin } from "@udecode/plate-autoformat/react";
import { BlockSelectionPlugin } from "@udecode/plate-selection/react";
import { DndPlugin } from "@udecode/plate-dnd";
import { ExitBreakPlugin, SoftBreakPlugin } from "@udecode/plate-break/react";
import { NodeIdPlugin } from "@udecode/plate-node-id";
import { ResetNodePlugin } from "@udecode/plate-reset-node/react";
import { DeletePlugin } from "@udecode/plate-select";
import { MarkdownPlugin } from "@udecode/plate-markdown";
import { HEADING_KEYS } from "@udecode/plate-heading";

import { BlockquoteElement } from "@/components/plate-ui/blockquote-element";
import { ImageElement } from "@/components/plate-ui/image-element";
import { HeadingElement } from "@/components/plate-ui/heading-element";
import { ListElement } from "@/components/plate-ui/list-element";
import { MentionElement } from "@/components/plate-ui/mention-element";
import { MentionInputElement } from "@/components/plate-ui/mention-input-element";
import { ParagraphElement } from "@/components/plate-ui/paragraph-element";

import { withPlaceholders } from "@/components/plate-ui/placeholder";
import { withDraggables } from "@/components/plate-ui/with-draggables";

export const plugin = createPlateEditor({
  plugins: [
    ParagraphPlugin,
    HeadingPlugin,
    BlockquotePlugin,
    ListPlugin,
    ImagePlugin,
    CaptionPlugin.configure({
      options: { plugins: [ImagePlugin] },
    }),
    MentionPlugin,
    BoldPlugin,
    ItalicPlugin,
    UnderlinePlugin,
    // AlignPlugin.configure({
    //   inject: { targetPlugins: ["p", "h1", "h2", "h3"] },
    // }),
    // IndentPlugin.configure({
    //   inject: { targetPlugins: ["p", "h1", "h2", "h3"] },
    // }),
    // IndentListPlugin.configure({
    //   inject: { targetPlugins: ["p", "h1", "h2", "h3"] },
    // }),
    // // LineHeightPlugin.configure({
    // //   inject: {
    // //     nodeProps: {
    // //       defaultNodeValue: 1.5,
    // //       validNodeValues: [1, 1.2, 1.5, 2, 3],
    // //     },
    // //     targetPlugins: ['p', 'h1', 'h2', 'h3'],
    // //   },
    // // }),
    // AutoformatPlugin.configure({
    //   options: {
    //     enableUndoOnDelete: true,
    //     rules: [
    //       // Usage: https://platejs.org/docs/autoformat
    //     ],
    //   },
    // }),
    // BlockSelectionPlugin,
    // DndPlugin.configure({
    //   options: { enableScroller: true },
    // }),
    // ExitBreakPlugin.configure({
    //   options: {
    //     rules: [
    //       {
    //         hotkey: "mod+enter",
    //       },
    //       {
    //         before: true,
    //         hotkey: "mod+shift+enter",
    //       },
    //       {
    //         hotkey: "enter",
    //         level: 1,
    //         query: {
    //           allow: ["h1", "h2", "h3"],
    //           end: true,
    //           start: true,
    //         },
    //         relative: true,
    //       },
    //     ],
    //   },
    // }),
    // NodeIdPlugin,
    // ResetNodePlugin.configure({
    //   options: {
    //     rules: [
    //       // Usage: https://platejs.org/docs/reset-node
    //     ],
    //   },
    // }),
    // DeletePlugin,
    // SoftBreakPlugin.configure({
    //   options: {
    //     rules: [
    //       { hotkey: "shift+enter" },
    //       {
    //         hotkey: "enter",
    //         query: {
    //           allow: ["code_block", "blockquote", "td", "th"],
    //         },
    //       },
    //     ],
    //   },
    // }),
    // MarkdownPlugin,
  ],
  override: {
    components: withDraggables(
      withPlaceholders({
        [BlockquotePlugin.key]: BlockquoteElement,
        [ImagePlugin.key]: ImageElement,
        [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" }),
        [BulletedListPlugin.key]: withProps(ListElement, { variant: "ul" }),
        [NumberedListPlugin.key]: withProps(ListElement, { variant: "ol" }),
        [ListItemPlugin.key]: withProps(PlateElement, { as: "li" }),
        [MentionPlugin.key]: MentionElement,
        [MentionInputPlugin.key]: MentionInputElement,
        [ParagraphPlugin.key]: ParagraphElement,
        [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
        [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
        [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
      })
    ),
  },
});

My editor component

"use client";
import {
  usePlateEditor,
  Plate,
  PlateContent,
} from "@udecode/plate-common/react";
import { Editor } from "@/components/plate-ui/editor";
import { FixedToolbar } from "@/components/plate-ui/fixed-toolbar";
import { FixedToolbarButtons } from "@/components/plate-ui/fixed-toolbar-buttons";
import { FloatingToolbar } from "@/components/plate-ui/floating-toolbar";
import { FloatingToolbarButtons } from "@/components/plate-ui/floating-toolbar-buttons";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { plugin } from "@/lib/platejsPlugin";

interface WeEditorProps {
  className?: string;
}

const WeEditor: React.FC<WeEditorProps> = ({ className }) => {
  const editor = usePlateEditor();
  return (
    <DndProvider backend={HTML5Backend}>
      <Plate editor={plugin}>
        <FixedToolbar>
          <FixedToolbarButtons />
        </FixedToolbar>

        <Editor />
        {/* 
        <FloatingToolbar>
          <FloatingToolbarButtons />
        </FloatingToolbar> */}
      </Plate>
    </DndProvider>
  );
};

export default WeEditor;



### Plate version

^38.0.1

### Slate React version

"^0.110.1"

### Screenshots

_No response_

### Logs

_No response_

### Browsers

_No response_

<!-- POLAR PLEDGE BADGE START -->
## Funding
* You can sponsor this specific effort via a [Polar.sh](https://polar.sh) pledge below
* We receive the pledge once the issue is completed & verified

<a href="https://polar.sh/udecode/plate/issues/3531">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://polar.sh/api/github/udecode/plate/issues/3531/pledge.svg?darkmode=1">
  <img alt="Fund with Polar" src="https://polar.sh/api/github/udecode/plate/issues/3531/pledge.svg">
</picture>
</a>
<!-- POLAR PLEDGE BADGE END -->
kjhuanhao commented 2 months ago

When I tried to delete it, it worked fine again, a little weird

     <FixedToolbar>
          <FixedToolbarButtons />
        </FixedToolbar>