You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I wonder where should I run the custom callback when a custom node is pasted. What are the best practices to do it?
Some Background:
I created a custom Abbreviation node. It can be inserted via modal from the toolbar. When user creates new abbreviation I need to dispatch addAbbreviation redux action that updates the global state. It has to be tracked and stored somawhere outside Lexical because once created abbreviation can be re-used in many editors displayed across the application. The usage is stored in the database.
I run custom lexical commands in two places:
Abbreviation Plugin: tracks when node has been created & created in modal and dispatches redux action addAbbreviation
Abbreviation Component: tracks when node has been removed and dispatches redux action removeAbbreviation
Since the text wit abbreviations can be copy&paste (reused) between different editors i also need to run addAbbreviation when user paste the text into editor.
I assume I have extend Abbreviation Plugin, register command with PASTE_COMMAND, somehow verify if clipboard content has some abbreviation nodes (how to?) and then dispatch addAbbreviation action, right?
useEffect(()=>{if(!editor.hasNodes([AbbreviationNode])){thrownewError('AbbreviationPlugin: AbbreviationNode not registered on editor');}constinsertAbbreviationCommand=editor.registerCommand(INSERT_ABBREVIATION_COMMAND,(payload: Abbreviation)=>{editor.update(()=>{constabbreviationNode=$createAbbreviationNode({id: payload.id,description: payload.description,abbreviation: payload.abbreviation,});$insertNodes([abbreviationNode]);if($isRootOrShadowRoot(abbreviationNode.getParentOrThrow())){$wrapNodeInElement(abbreviationNode,$createParagraphNode).selectEnd();}// Run callback after adding abbreviation to editoronAddAbbreviation?.(payload);});returntrue;},COMMAND_PRIORITY_EDITOR);constpasteAbbreviationCommand=editor.registerCommand<InputEvent&ClipboardEvent>(PASTE_COMMAND,(event)=>{// do stuff },COMMAND_PRIORITY_EDITOR)return()=>{mergeRegister(pasteAbbreviationCommand,insertAbbreviationCommand);}},[editor]);
Or maybe I should use registerMutationListener for pasting?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I wonder where should I run the custom callback when a custom node is pasted. What are the best practices to do it?
Some Background:
I created a custom Abbreviation node. It can be inserted via modal from the toolbar. When user creates new abbreviation I need to dispatch
addAbbreviation
redux action that updates the global state. It has to be tracked and stored somawhere outside Lexical because once created abbreviation can be re-used in many editors displayed across the application. The usage is stored in the database.I run custom lexical commands in two places:
addAbbreviation
removeAbbreviation
Since the text wit abbreviations can be copy&paste (reused) between different editors i also need to run
addAbbreviation
when user paste the text into editor.I assume I have extend Abbreviation Plugin, register command with
PASTE_COMMAND
, somehow verify if clipboard content has some abbreviation nodes (how to?) and then dispatchaddAbbreviation
action, right?Or maybe I should use
registerMutationListener
for pasting?Beta Was this translation helpful? Give feedback.
All reactions