Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide markdown plugin node dependencies #2910

Merged
merged 7 commits into from
Aug 30, 2022
Merged

Conversation

trueadm
Copy link
Collaborator

@trueadm trueadm commented Aug 30, 2022

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
Copy link

vercel bot commented Aug 30, 2022

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)

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 30, 2022
@trueadm trueadm changed the title Provide a way of marking markdown plugin accept node dependencies Provide markdown plugin accept node dependencies Aug 30, 2022
@trueadm trueadm changed the title Provide markdown plugin accept node dependencies Provide markdown plugin node dependencies Aug 30, 2022
@fantactuka
Copy link
Contributor

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

@trueadm trueadm merged commit bf29e4c into main Aug 30, 2022
@trueadm trueadm deleted the markdown-plugin-deps branch August 30, 2022 17:03
@acywatson acywatson mentioned this pull request Sep 3, 2022
@patdx
Copy link

patdx commented Sep 6, 2022

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
Copy link

tmb commented Oct 18, 2022

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
Copy link
Collaborator

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 🤔

thegreatercurve pushed a commit that referenced this pull request Nov 25, 2022
* Provide a way of marking markdown plugin accept node depednencies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants