Provide markdown plugin node dependencies

[trueadm]

The markdown plugin should ensure that certain Lexical nodes are registered with the editor before attempting to apply a markdown transform. To do so, we can specify a list of dependencies for each transform, resulting in invariants if the node hasn't been registered.

This PR also introduces $getEditor to the public Lexical API, so the currently active editor is retrievable without having to pass around the editor binding.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 2:24PM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 2:24PM (UTC)

[fantactuka]

Should it instead run dependencies check on mount and throw as other plugins do? You can pass explicit list of markdown transformers if want to skip some for unregistered nodes

[patdx]

I've been experimenting with lexical and after upgrading to 0.4.0 I got this new error message and found my way here.

I checked the main document page for the markdown plugin and my setup seemed to match the guide so it was not immediately clear how to resolve the issue. However, I found that if I import and set the nodes on the initialConfig, like nodes: [HeadingNode, QuoteNode, CodeNode, ListNode, ListItemNode, LinkNode],, then it started working again. Does this fix seem correct?

import { CodeNode } from '@lexical/code';
import { LinkNode } from '@lexical/link';
import { ListItemNode, ListNode } from '@lexical/list';
import { TRANSFORMERS } from '@lexical/markdown';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
import ToolbarPlugin from './plugins/toolbar-plugin';

<LexicalComposer
  initialConfig={{
    namespace: 'MyEditor',
    theme: {},
    onError,
    nodes: [HeadingNode, QuoteNode, CodeNode, ListNode, ListItemNode, LinkNode],
  }}
>
  <ToolbarPlugin />
  <div
    data-comment="lexical-editor-shell"
    className="relative flex flex-1 flex-col border"
  >
    <RichTextPlugin
      contentEditable={
        <ContentEditable className="prose block max-w-none flex-1 cursor-text resize-y overflow-auto p-2 text-sm outline-none" />
      }
      placeholder={
        <div className="pointer-events-none absolute inset-2 touch-none">
          Enter some text...
        </div>
      }
    />
  </div>
  <LinkPlugin />
  <ListPlugin />
  <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</LexicalComposer>;

[tmb]

We're also experiencing this error. We solved it by pulling the required nodes out of TRANSFORMERS before instantiating the editor. That said, it would be nice if the Markdown plugin added the correct nodes to the editor before instantiating itself:

const transformerNodes = TRANSFORMERS.map((t) =>
    t.type === "element" || t.type === "text-match" ? t.dependencies : undefined
  )
    .filter((t): t is Klass<LexicalNode>[] => !!t)
    .flat();

[kevinansfield]

it would be nice if the Markdown plugin added the correct nodes to the editor before instantiating itself

+1 for this, I'd be interested to know how solvable it is. I looked at the possibility briefly but it seems initial editor state is loaded in the outer composer component so I assume the nodes will need to be known at that point, but plugin components are children of that composer so won't have been able to register their nodes yet 🤔