Decorators disappearing on page refresh

[sernaferna]

Very, very, close to having mastered extensions, but I'm seeing an issue where my decorators are disappearing from the editor if the browser gets refreshed. The steps are something like:

1. Open React app, and navigate to page where I've got an editor
2. Page has some markdown that it pre-loads into the Editor, and everything shows up properly (including decorators)
3. Refresh the browser
4. Everything is still normal, except the decorators are gone
5. Refresh multiple times, they're still gone
6. Navigate away from the page to another page in my React app, then navigate back
7. The decorators show up again. (Until I hit Refresh.)

There are ways to force them to show up again; e.g. if I edit the markdown and then switch back to the editor everything will show up normally again.

Edit: When I say the decorators disappear, I mean all of them. 🙂 If there are multiple decorators in the editor and I refresh they're all gone, and when I, for example, edit the markup for one of them, they all come back.

Is this something others have seen? Is something being cached somewhere (or not cached somewhere), or is there something else I need to be handling?

For reference, here's a paired down bit of code to show the interaction between my Node and my decorator implementation:

export class MyNode extends DecoratorNode<ReactNode> {
  createDOM() {
    const container = document.createElement('sup');
    return container;
  }

  decorate(editor: LexicalEditor, config: EditorConfig) {
    return <MyEditor editor={editor} attr1={this.__attr1} attr2={this.__attr2} />;
  }
}

export const MyEditor = ({ editor, attr1, attr2}: IMyEditor) => {
  useEffect(() => {
    // this (or something similar) seems to be required to force the decorator to show up in the editor
    const unregister = editor.registerCommand<MouseEvent>(
      CLICK_COMMAND,
      () => {
        return true;
      },
      COMMAND_PRIORITY_LOW
    );

    return () => {
      unregister();
    };
  }, [editor]);

  return (
    <span>{attr1} {attr2}</span>
  );
};