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

Bug: Pasting into an inline custom node seems to fail #6121

Open
s0rta opened this issue May 16, 2024 · 0 comments
Open

Bug: Pasting into an inline custom node seems to fail #6121

s0rta opened this issue May 16, 2024 · 0 comments

Comments

@s0rta
Copy link

s0rta commented May 16, 2024

Currently, the check to paste inside a lexical node uses the predicate INTERNAL_$isBlock to find an ancestor for a check to see if you're pasting into a code block, but if there isn't a block in the ancestors, the call fails cause it checks for '__language in firstBlock.

Lexical version: 0.12.6 - 14.6 (tested)

Steps To Reproduce

This simple custom Element node causes this problem, I can't get a paste event to not error without flipping isInline to true

import { EditorConfig, ElementNode } from 'lexical';
import { styles } from './formula.styles';
import { SerializedFormulaNode } from './formula.types';
import { $createFormulaNode } from './formula.utils';

export default class FormulaNode extends ElementNode {
  static getType(): string {
    return 'formula';
  }

  static clone(node: FormulaNode): FormulaNode {
    return new FormulaNode(node.__key);
  }

  createDOM(config: EditorConfig): HTMLElement {
    const dom = document.createElement('p');
    dom.setAttribute('type', 'formula');
    dom.spellcheck = false;
    dom.style.cssText = styles.toString();
    return dom;
  }

  updateDOM(prevNode: FormulaNode, dom: HTMLElement): boolean {
    return false;
  }

  exportJSON(): SerializedFormulaNode {
    return {
      ...super.exportJSON(),
      type: 'formula',

      version: 1,
    };
  }

  isInline() {
    return true;
  }

  static importJSON(serializedNode: SerializedFormulaNode): FormulaNode {
    const node = $createFormulaNode();
    return node;
  }
}

Link to code example:
CodeSandbox isn't loading but when I get home I'll put one together

The current behavior

text-editor.comp.tsx:67 TypeError: Cannot use 'in' operator to search for '__language' in null
    at RangeSelection.insertNodes (Lexical.dev.mjs:6273:1)
    at RangeSelection.insertRawText (Lexical.dev.mjs:5863:1)
    at $insertDataTransferForPlainText (LexicalClipboard.dev.mjs:90:1)
    at editor.update.tag (LexicalPlainText.dev.mjs:76:1)
    at processNestedUpdates (Lexical.dev.mjs:7928:1)
    at beginUpdate (Lexical.dev.mjs:7979:1)
    at updateEditor (Lexical.dev.mjs:8054:1)
    at LexicalEditor.update (Lexical.dev.mjs:9587:1)
    at triggerCommandListeners (Lexical.dev.mjs:7851:1)
    at dispatchCommand (Lexical.dev.mjs:1258:1)

The expected behavior

The code in the copy buffer should be pasted

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant