How to create a new plugin (a tool) for Plate rich-text editor

63 Views Asked by At

I want to create a few custom plugins (basically new tools) in Plate rich-text editor. I tried to connect the plugin I had created and the tool. But I couldn't properly get it done. I have created a sample plugin and a respective element. In this case a columns plugin like below

enter image description here

I added that columns plugin to createPlugins() list where all plugins are added and all plugins are passed to the Plate component.

I can render my plugin if I use that element as initialValue. But connecting that to a tool and adding this element on the columns button click is not clear.

columnsPlugin.tsx

import { createPluginFactory } from '@udecode/plate-common';

import { ColumnsElement } from '@/components/plate-ui/columns-element';

export const ELEMENT_COLUMN = 'column';

export const createColumnsPlugin = createPluginFactory({
  key: ELEMENT_COLUMN,
  isElement: true,
  component: ColumnsElement,
});

columns-element.tsx

import { cn, withRef } from '@udecode/cn';
import { PlateElement } from '@udecode/plate-common';
import { useFocused, useSelected } from 'slate-react';

import './column.scss';

export const ColumnsElement = withRef<typeof PlateElement>(
  ({ className, nodeProps, ...props }, ref) => {
    const { children } = props;

    const selected = useSelected();
    const focused = useFocused();

    return (
      <PlateElement ref={ref} {...props}>
        <div
          className={cn(
            'columns-wrapper',
            selected && focused && 'ring-2 ring-ring ring-offset-2',
            className
          )}
          contentEditable={false}
        >
          <div className="column-block">{children}</div>
          <div className="column-block"></div>
        </div>
      </PlateElement>
    );
  }
);

I'm using fixed-toolbar-buttons.tsx as the toolbar that they provide with their template and used it below. I added a custom button for add columns. But doesn't work

      <MarkToolbarButton tooltip="" nodeType={ELEMENT_COLUMN}>
        <Icons.borderAll />
      </MarkToolbarButton>

The guide from their documentation is not clear to me. Please help me to create plugins.

0

There are 0 best solutions below