Skip to main content

Function: LexicalPlanComposer()

LexicalPlanComposer(__namedParameters): Element

The equivalent of LexicalComposer for a plan. Make sure that your plan argument is stable (e.g. using module scope or useMemo) so that you are not re-creating the editor on every render!

Parameters​

• __namedParameters: LexicalPlanComposerProps

Returns​

Element

Examples​

const plan = definePlan({
  name: "[root]",
  dependencies: [RichTextPlan, HistoryPlan, EmojiPlan]
});
function MyEditor({ children }) {
  return (<LexicalPlanComposer plan={plan}>{children}</LexicalPlanComposer>);
}
function MyEditor({ emojiBaseUrl, children }) {
  const plan = useMemo(() => {
    return definePlan({
      name: "[root]",
      dependencies: [
        RichTextPlan,
        HistoryPlan,
        configPlan(EmojiPlan, { emojiBaseUrl }),
      ],
    });
  }, [emojiBaseUrl]);
  return (<LexicalPlanComposer plan={plan}>{children}</LexicalPlanComposer>);
}
function MyBrokenEditor({ emojiBaseUrl }) {
  // This argument is not stable, the editor is re-created every render and
  // all state is lost!
  const plan = definePlan({
    name: "[root]",
    dependencies: [RichTextPlan, HistoryPlan, EmojiPlan]
  });
  return (<LexicalPlanComposer plan={plan}>{children}</LexicalPlanComposer>);
}

Defined in​

LexicalPlanComposer.tsx:68