Soft Break Plugin Is Not Working.

[tarequl143]

I am trying to use softBreak in my custom BlockQuote Element. But its not working. I have tried a lot but its not working. But in a very old version I have a complete wiki and there its working. But when I am trying to create the wiki again with updated package softBreak, ExitBreak and ResetNode is not working. Can you please help me. Here I have added my code.

Main Editor

import { createPlateEditor, Plate } from "@udecode/plate";
import { useMemo, useRef } from "react";
import { editableProps } from "./editableProps";
import { usePlugins } from "./hooks/usePlugins";
import { EditorMain, EditorWrapper } from "./styles";
import BallonToolbar from "./toolbar/BallonToolbar";

const Editor: React.FC = () => {
  // Editor
  const editor = useMemo(() => createPlateEditor(), []);

  // Baloon Toolobar Ref
  const ballonToolberRef: any = useRef();

  // Use Plugins
  const plugins = usePlugins();

  // Console
  // console.log("Main Editor ==========>");

return (
    <EditorWrapper>
      <EditorMain id="main-editor">
        <Plate
          editor={editor}
          enabled
          editableProps={editableProps}
          plugins={plugins}
          initialValue={[
            {
              type: "p",
              children: [
                {
                  text: "",
                },
              ],
            },
          ]}
          onChange={(value) => {
            console.log("Value ====>", value);
          }}
        >
          <BallonToolbar toolbarRef={ballonToolberRef} />
        </Plate>
      </EditorMain>
    </EditorWrapper>
  );
};

export default Editor;

============================================================================================

Plugins

import {
  createBlockquotePlugin,
  createBoldPlugin,
  createCodePlugin,
  createHighlightPlugin,
  createItalicPlugin,
  createPlugins,
  createSoftBreakPlugin,
  createStrikethroughPlugin,
  createSubscriptPlugin,
  createSuperscriptPlugin,
  createUnderlinePlugin,
} from "@udecode/plate";
import { useMemo } from "react";
import { createHintPlugin } from "../elements/Hint/createHintPlugin";
import { softBreakPlugin } from "../softBreak/softBreakPlugin";

export const usePlugins = () => {
  const plugins = useMemo(() => {
    const allPlugins = createPlugins([
      createBoldPlugin(),
      createCodePlugin(),
      createItalicPlugin(),
      createHighlightPlugin(),
      createUnderlinePlugin(),
      createStrikethroughPlugin(),
      createSubscriptPlugin(),
      createSuperscriptPlugin(),
      createBlockquotePlugin(),
      createHintPlugin(),
      createSoftBreakPlugin(softBreakPlugin),
    ]);
    return allPlugins;
  }, []);
  return plugins;
};

============================================================================================

Soft Break Rules

import { PlatePlugin, SoftBreakPlugin } from "@udecode/plate";
import { CUSTOM_ELEMENT_BLOCKQUOTE } from "../elements/Blockquote/types";
import { CUSTOM_ELEMENT_HINT } from "../elements/Hint/types";

export const softBreakPlugin: Partial<PlatePlugin<SoftBreakPlugin>> = {
  options: {
    rules: [
      { hotkey: "shift+enter" },
      {
        hotkey: "enter",
        query: {
          allow: [CUSTOM_ELEMENT_BLOCKQUOTE, CUSTOM_ELEMENT_HINT],
        },
      },
    ],
  },
};

============================================================================================

Editable Props

import {
  RenderElementFn,
  RenderLeafFn,
  TEditableProps,
  Value,
} from "@udecode/plate";
import { ElementRenderer } from "./renderer/ElementRenderer";
import { LeafRenderer } from "./renderer/LeafRenderer";

export const editableProps: TEditableProps = {
  spellCheck: false,
  autoFocus: false,
  readOnly: false,
  placeholder: "Click here to start writing..",
  renderLeaf: LeafRenderer as RenderLeafFn<Value>,
  renderElement: ElementRenderer as RenderElementFn<Value>,
};

============================================================================================

Baloon Toolbar

import {
  BlockToolbarButton,
  getPluginType,
  MarkToolbarButton,
  MARK_BOLD,
  MARK_CODE,
  MARK_HIGHLIGHT,
  MARK_ITALIC,
  MARK_STRIKETHROUGH,
  MARK_SUBSCRIPT,
  MARK_SUPERSCRIPT,
  MARK_UNDERLINE,
  usePlateEditorRef,
  usePlateSelection,
} from "@udecode/plate";
import { TextBolder } from "phosphor-react";
import { useEffect } from "react";
import { CUSTOM_ELEMENT_BLOCKQUOTE } from "../elements/Blockquote/types";
import { CUSTOM_ELEMENT_HINT } from "../elements/Hint/types";
import { BaloonToolbar, BaloonToolbarContent } from "./ToolbarStyles";
import { BaloonToolbarProps } from "./types";
import { toggleBallonToolbar } from "./utils";

const BallonToolbar = (props: BaloonToolbarProps) => {
  // Props Destructuring
  const { isLink, toolbarRef } = props;

  // Get Editor Ref
  const editor = usePlateEditorRef()!;
  const selection = usePlateSelection()!;

  // Baloon Toolbar Toggle
  useEffect(() => {
    toggleBallonToolbar(editor, toolbarRef);
  });

  // Console
  // console.log("Editor Baloon", editor);

  return (
    <BaloonToolbar ref={toolbarRef}>
      <BaloonToolbarContent>
        <MarkToolbarButton
          type={getPluginType(editor, MARK_BOLD)}
          icon={<TextBolder size={24} weight="bold" />}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_ITALIC)}
          icon={<TextBolder size={24} weight="regular" />}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_UNDERLINE)}
          icon={<TextBolder size={24} weight="regular" />}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_STRIKETHROUGH)}
          icon={<TextBolder size={24} weight="regular" />}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_HIGHLIGHT)}
          icon={<TextBolder size={24} weight="regular" />}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_CODE)}
          icon={<TextBolder size={24} weight="regular" />}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_SUPERSCRIPT)}
          icon={<TextBolder size={24} weight="regular" />}
          clear={getPluginType(editor, MARK_SUBSCRIPT)}
        />
        <MarkToolbarButton
          type={getPluginType(editor, MARK_SUBSCRIPT)}
          icon={<TextBolder size={24} weight="regular" />}
          clear={getPluginType(editor, MARK_SUPERSCRIPT)}
        />
        <BlockToolbarButton
          type={getPluginType(editor, CUSTOM_ELEMENT_BLOCKQUOTE)}
          icon={"Quote"}
        />
        <BlockToolbarButton
          type={getPluginType(editor, CUSTOM_ELEMENT_HINT)}
          icon={"Hint"}
        />
      </BaloonToolbarContent>
    </BaloonToolbar>
  );
};

export default BallonToolbar;

============================================================================================

Custom Blockquote Element

import { createPluginFactory, onKeyDownToggleElement } from "@udecode/plate";
import BlockquoteElement from "./BlockquoteElement";

import { CUSTOM_ELEMENT_BLOCKQUOTE } from "./types";

export const createBlockquotePlugin = createPluginFactory({
  key: CUSTOM_ELEMENT_BLOCKQUOTE,
  isElement: true,
  component: BlockquoteElement,
  handlers: {
    onKeyDown: onKeyDownToggleElement,
  },
});

============================================================================================

Custom Hint Element

import { createPluginFactory, onKeyDownToggleElement } from "@udecode/plate";
import HintElement from "./HintElement";
import { CUSTOM_ELEMENT_HINT } from "./types";

export const createHintPlugin = createPluginFactory({
  key: CUSTOM_ELEMENT_HINT,
  isElement: true,
  component: HintElement,
  handlers: {
    onKeyDown: onKeyDownToggleElement,
  },
});

[tarequl143]

When I am passing editor props my custom plugin is not working. why?

[zbeyens]

You need to pass plugins to createPlateEditor

[tarequl143]

Really Silly Mistake. Thanks for your help. Also about softBreak is not working. I think you can close that issue. My softBreak was not working for the same reason I missed plugins to pass.