Refactor BlockquoteExtension and withEvents plugins to Plate

packages/slate-editor/src/hyperscript.ts

@@ -45,7 +45,6 @@ import {
 } from 'slate-hyperscript';
 import { withReact } from 'slate-react';
 
-import { BlockquoteExtension, createBlockquote } from '#extensions/blockquote';
 import { createCoverage } from '#extensions/coverage';
 import { createDivider } from '#extensions/divider';
 import { createEmbed, type EmbedNode } from '#extensions/embed';
@@ -72,6 +71,7 @@ import {
 import { createVideoBookmark } from '#extensions/video';
 import { createWebBookmark } from '#extensions/web-bookmark';
 import { createEditor } from '#modules/editor';
+import { BlockquotePlugin, createBlockquote } from '#plugins/blockquote';
 
 type HElement<T extends ElementNode> = Omit<T, 'type' | 'children'>;
 

packages/slate-editor/src/lib/extendElementAttributes.ts

@@ -0,0 +1,22 @@
+import { isElement, type SlateEditor, type TElement } from '@udecode/plate-common';
+import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+
+export function extendElementAttributes(
+    editor: SlateEditor,
+    element: TElement,
+    attributes: PlateRenderElementProps['attributes'],
+) {
+    return {
+        'data-slate-block': detectBlockType(editor, element),
+        'data-slate-type': element.type,
+        'data-slate-value': JSON.stringify(element),
+        ...attributes,
+    };
+}
+
+function detectBlockType(editor: SlateEditor, element: TElement): string | undefined {
+    if (!isElement(element) || editor.isInline(element)) {
+        return undefined;
+    }
+    return editor.isRichBlock(element) ? 'rich' : 'regular';
+}

packages/slate-editor/src/lib/index.ts

@@ -13,6 +13,7 @@ export { encodeSlateFragment } from './encodeSlateFragment';
 export { ensureChildInView } from './ensureChildInView';
 export { ensureElementInView } from './ensureElementInView';
 export { ensureRangeInView } from './ensureRangeInView';
+export { extendElementAttributes } from './extendElementAttributes';
 export { formatBytes } from './formatBytes';
 export { getScrollParent } from './getScrollParent';
 export { humanFriendlyEmailUrl } from './humanFriendlyEmailUrl';

packages/slate-editor/src/modules/editor/Editor.tsx

@@ -11,8 +11,7 @@ import {
     QUOTE_NODE_TYPE,
 } from '@prezly/slate-types';
 import { noop } from '@technically/lodash';
-import { Plate } from '@udecode/plate-common/react';
-import { isEditorFocused } from '@udecode/slate-react';
+import { isEditorFocused, Plate } from '@udecode/plate-common/react';
 import classNames from 'classnames';
 import React, {
     forwardRef,
@@ -48,6 +47,7 @@ import { RichFormattingMenu, toggleBlock } from '#modules/rich-formatting-menu';
 
 import styles from './Editor.module.scss';
 import { getEnabledExtensions } from './getEnabledExtensions';
+import { getEnabledPlugins } from './getEnabledPlugins';
 import { InitialNormalization } from './InitialNormalization';
 import {
     createOnCut,
@@ -74,7 +74,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
         blurOnOutsideClick = false,
         onKeyDown = noop,
         placeholder,
-        plugins,
+        plugins = [],
         popperMenuOptions = {},
         readOnly,
         style,
@@ -149,7 +149,6 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
                     withAllowedBlocks,
                     withAttachments,
                     withAutoformat,
-                    withBlockquotes,
                     withButtonBlocks,
                     withCallouts,
                     withCoverage,
@@ -184,7 +183,6 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
             withAllowedBlocks,
             withAttachments,
             withAutoformat,
-            withBlockquotes,
             withButtonBlocks,
             withCallouts,
             withCoverage,
@@ -213,16 +211,20 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
         ],
     );
 
+    const enabledPlugins = useMemo(
+        () => [...Array.from(getEnabledPlugins({ events, withBlockquotes })), ...plugins],
+        [events, withBlockquotes],
+    );
+
     const [getInitialValue, setInitialValue] = useGetSet(() =>
         EditorCommands.roughlyNormalizeValue(externalInitialValue),
     );
 
     const { editor, onKeyDownList } = useCreateEditor({
-        events,
         extensions,
         initialValue: getInitialValue(),
         onKeyDown,
-        plugins,
+        plugins: enabledPlugins,
     });
 
     useEffect(() => {

packages/slate-editor/src/modules/editor/createEditor.ts

@@ -6,7 +6,6 @@ import {
     withUserFriendlyDeleteBehavior,
 } from '@prezly/slate-commons';
 import type { Extension } from '@prezly/slate-commons';
-import type { WithOverrides } from '@prezly/slate-commons';
 import { isNotUndefined } from '@technically/is-not-undefined';
 import { flow } from '@technically/lodash';
 import type { SlateEditor } from '@udecode/plate-common';
@@ -24,11 +23,7 @@ import {
     withSerialization,
 } from './plugins';
 
-export function createEditor(
-    baseEditor: SlateEditor,
-    getExtensions: () => Extension[],
-    plugins: WithOverrides[] = [],
-) {
+export function createEditor(baseEditor: SlateEditor, getExtensions: () => Extension[]) {
     const overrides = getExtensions()
         .map(({ withOverrides }) => withOverrides)
         .filter(isNotUndefined);
@@ -48,6 +43,5 @@ export function createEditor(
         withElementsEqualityCheck(getExtensions),
         withSerialization(getExtensions),
         ...overrides,
-        ...plugins,
     ])(baseEditor);
 }

packages/slate-editor/src/modules/editor/getEnabledExtensions.ts

@@ -6,7 +6,6 @@ import { Node } from 'slate';
 
 import { AllowedBlocksExtension } from '#extensions/allowed-blocks';
 // import { AutoformatExtension } from '#extensions/autoformat';
-import { BlockquoteExtension } from '#extensions/blockquote';
 import { ButtonBlockExtension } from '#extensions/button-block';
 import { CalloutExtension } from '#extensions/callout';
 import { CoverageExtension } from '#extensions/coverage';
@@ -68,7 +67,6 @@ type Parameters = {
     | 'withAllowedBlocks'
     | 'withAttachments'
     | 'withAutoformat'
-    | 'withBlockquotes'
     | 'withButtonBlocks'
     | 'withCallouts'
     | 'withCoverage'
@@ -104,7 +102,6 @@ export function* getEnabledExtensions(parameters: Parameters): Generator<Extensi
         withAllowedBlocks,
         withAttachments,
         // withAutoformat,
-        withBlockquotes,
         withButtonBlocks,
         withCallouts,
         withCoverage,
@@ -154,10 +151,6 @@ export function* getEnabledExtensions(parameters: Parameters): Generator<Extensi
             EventsEditor.dispatchEvent(editor, 'empty-paragraph-inserted', { trigger: 'hotkey' }),
     });
 
-    if (withBlockquotes) {
-        yield BlockquoteExtension();
-    }
-
     if (withButtonBlocks) {
         const config = withButtonBlocks === true ? {} : withButtonBlocks;
         yield ButtonBlockExtension(config);

packages/slate-editor/src/modules/editor/getEnabledPlugins.ts

@@ -0,0 +1,21 @@
+import type { Events } from '@prezly/events';
+import type { PlatePlugin } from '@udecode/plate-common/react';
+
+import { EventsPlugin, type EditorEventMap } from '#modules/events';
+import { BlockquotePlugin } from '#plugins/blockquote';
+
+import type { EditorProps } from './types';
+
+type Parameters = {
+    events: Events<EditorEventMap>;
+} & Pick<Required<EditorProps>, 'withBlockquotes'>;
+
+export function* getEnabledPlugins(parameters: Parameters): Generator<PlatePlugin> {
+    const { events, withBlockquotes } = parameters;
+
+    yield EventsPlugin(events);
+
+    if (withBlockquotes) {
+        yield BlockquotePlugin;
+    }
+}

packages/slate-editor/src/modules/editor/test-utils.ts

@@ -1,18 +1,12 @@
-import { Events } from '@prezly/events';
 import { Alignment } from '@prezly/slate-types';
 import { noop } from '@technically/lodash';
 import type { SlateEditor } from '@udecode/plate-common';
 
-import type { EditorEventMap } from '#modules/events';
-import { withEvents } from '#modules/events';
-import { hierarchySchema, withNodesHierarchy } from '#modules/nodes-hierarchy';
 import { coverage, createDelayedResolve, oembedInfo } from '#modules/tests';
 
 import { createEditor as createBaseEditor } from './createEditor';
 import { getEnabledExtensions } from './getEnabledExtensions';
 
-const events = new Events<EditorEventMap>();
-
 export function getAllExtensions() {
     const fetchOembed = createDelayedResolve(oembedInfo);
     return Array.from(
@@ -25,7 +19,6 @@ export function getAllExtensions() {
             },
             withAttachments: true,
             withAutoformat: true,
-            withBlockquotes: true,
             withButtonBlocks: true,
             withCallouts: true,
             withCoverage: {
@@ -108,8 +101,5 @@ export function getAllExtensions() {
 }
 
 export function createEditor(input: JSX.Element) {
-    return createBaseEditor(input as unknown as SlateEditor, getAllExtensions, [
-        withEvents(events),
-        withNodesHierarchy(hierarchySchema),
-    ]);
+    return createBaseEditor(input as unknown as SlateEditor, getAllExtensions);
 }

packages/slate-editor/src/modules/editor/types.ts

@@ -1,7 +1,8 @@
 import type { Events } from '@prezly/events';
 import type { Decorate, EditorCommands } from '@prezly/slate-commons';
 import type { Alignment } from '@prezly/slate-types';
-import type { SlateEditor, TElement } from '@udecode/plate-common';
+import type { TElement } from '@udecode/plate-common';
+import type { PlatePlugin } from '@udecode/plate-common/react';
 import type { CSSProperties, KeyboardEvent, ReactNode } from 'react';
 import type { Element, Node } from 'slate';
 import type { Transforms } from 'slate';
@@ -98,7 +99,7 @@ export interface EditorProps {
      * [WARNING] this prop is read by EditorV4 only once, when mounting.
      * Any changes to it will be ignored.
      */
-    plugins?: (<T extends SlateEditor>(editor: T) => T)[];
+    plugins?: PlatePlugin[];
     popperMenuOptions?: PopperOptionsContextType;
     readOnly?: boolean;
     style?: CSSProperties;