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
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.
