question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: can't limit nodes/commands that nested editors accept

See original GitHub issue

Currently it doesn’t seem possible to restrict the kind of content that can be placed inside nested editors.

I can work around this by disabling toolbar buttons based on whether the active editor includes a command in it’s _commands set: !activeEditor._commands.has(MY_CUSTOM_COMMAND) but that doesn’t seem ideal.

Lexical version: 0.3.11 but also verified against Playground from main (e.g. https://lexical-playground-git-041-fbopensource.vercel.app/)

Steps To Reproduce

  1. Open the Playground
  2. Insert a Sticky or a Image with a Caption
  3. Within the nested editor, insert an Image, bold some text etc…

The current behavior

Currently, following the above steps will result in bold text or an image inside in the Sticky, despite the StickyPlugin being configured to accept PlainText:

        <LexicalNestedComposer
          initialEditor={caption}
          initialTheme={StickyEditorTheme}>
          {isCollabActive ? (
            <CollaborationPlugin
              id={caption.getKey()}
              providerFactory={createWebsocketProvider}
              shouldBootstrap={true}
            />
          ) : (
            <HistoryPlugin externalHistoryState={historyState} />
          )}
          <PlainTextPlugin
            contentEditable={
              <ContentEditable className="StickyNode__contentEditable" />
            }
            placeholder={
              <Placeholder className="StickyNode__placeholder">
                What's up?
              </Placeholder>
            }
            // TODO Remove after it's inherited from the parent (LexicalComposer)
            initialEditorState={null}
          />
        </LexicalNestedComposer>

A similar thing happens with commands. When a command is defined by a plugin that isn’t registered on the nested editor, the triggerCommandListeners function iterates the active editors, recognises that there’s no listener registered for the command on the nested editor, but then sends the command to the parent editor which just inserts the node within the nested editor anyway.

The expected behavior

I’d expect:

  1. Nested editors to only accept Nodes that are configured on the Nested editor
  2. Commands issued to a nested editor that isn’t configured to accept them should not result in the command executing and inserting nodes into the nested editor.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
trueadmcommented, Sep 6, 2022

This was actually fixes last night https://github.com/facebook/lexical/pull/2947!

0reactions
jagregorycommented, Sep 11, 2022

Ok that makes sense.

When __DEV__ is true the above behaviour occurs, when __DEV__ is false a slightly different error occurs:

Error: registeredNode: Type image not found
    at getRegisteredNodeOrThrow (LexicalUtils.ts:89:37)
    at $applyTransforms (LexicalUpdates.ts:114:26)
    at $applyAllTransforms (LexicalUpdates.ts:215:11)
    at beginUpdate (LexicalUpdates.ts:814:9)
    at updateEditor (LexicalUpdates.ts:913:5)
    at LexicalEditor.update (LexicalEditor.ts:797:5)
    at triggerCommandListeners (LexicalUpdates.ts:648:12)
    at dispatchCommand (LexicalUtils.ts:1110:10)
    at LexicalEditor.dispatchCommand (LexicalEditor.ts:687:12)
    at onClick (index.tsx:245:18)

Is that expected behaviour?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Node's nested node_modules approach is basically ... - GitHub
Node needs an alternative approach to endless, recursively nested node_modules folders on Windows. Most Windows tools, utilities and shells ...
Read more >
Top 10 Most Common Node.js Developer Mistakes - Toptal
In this article, we will take a look at ten common mistakes that developers new to Node.js often make, and how they can...
Read more >
Node npm windows file paths are too long to install packages
The problem with deeply nested folders on Windows has been mostly solved starting with npm version 3.x . According to npm:.
Read more >
Node.js v19.3.0 Documentation
Bugs or behavior changes may surprise users when Experimental API modifications occur. To avoid surprises, use of an Experimental feature may need a...
Read more >
Troubleshooting common RethinkDB problems
I get a “ReqlResourceLimitError: Array over size limit 100000” when trying to order a table. Ordering without an index requires the server to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found