refactor: note editor relationships (#1821)

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -16,6 +16,7 @@ import {
   Platform,
   EditorLineHeight,
   EditorFontSize,
+  NoteType,
 } from '@standardnotes/snjs'
 import { debounce, isDesktopApplication, isIOS } from '@/Utils'
 import { EditorEventSource } from '../../Types/EditorEventSource'
@@ -88,6 +89,9 @@ type State = {
   lineHeight?: EditorLineHeight
   fontSize?: EditorFontSize
   updateSavingIndicator?: boolean
+
+  editorFeatureIdentifier?: string
+  noteType?: NoteType
 }
 
 const PlaintextFontSizeMapping: Record<EditorFontSize, string> = {
@@ -151,6 +155,8 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       rightResizerWidth: 0,
       rightResizerOffset: 0,
       shouldStickyHeader: false,
+      editorFeatureIdentifier: this.controller.item.editorIdentifier,
+      noteType: this.controller.item.noteType,
     }
 
     this.editorContentRef = createRef<HTMLDivElement>()
@@ -249,7 +255,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
     }
   }
 
-  private onNoteInnerChange(note: SNNote, source: PayloadEmitSource): void {
+  onNoteInnerChange(note: SNNote, source: PayloadEmitSource): void {
     if (note.uuid !== this.note.uuid) {
       throw Error('Editor received changes for non-current note')
     }
@@ -288,6 +294,15 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       })
     }
 
+    if (note.editorIdentifier !== this.state.editorFeatureIdentifier || note.noteType !== this.state.noteType) {
+      this.setState({
+        editorFeatureIdentifier: note.editorIdentifier,
+        noteType: note.noteType,
+      })
+
+      void this.reloadEditorComponent()
+    }
+
     this.reloadSpellcheck().catch(console.error)
 
     const isTemplateNoteInsertedToBeInteractableWithEditor = source === PayloadEmitSource.LocalInserted && note.dirty
@@ -476,18 +491,19 @@ class NoteView extends PureComponent<NoteViewProps, State> {
     }
   }
 
-  private async reloadEditorComponent() {
+  async reloadEditorComponent() {
     if (this.state.showProtectedWarning) {
       this.destroyCurrentEditorComponent()
       return
     }
 
     const newEditor = this.application.componentManager.editorForNote(this.note)
+
     /** Editors cannot interact with template notes so the note must be inserted */
     if (newEditor && this.controller.isTemplateNote) {
       await this.controller.insertTemplatedNote()
-      this.associateComponentWithCurrentNote(newEditor).catch(console.error)
     }
+
     const currentComponentViewer = this.state.editorComponentViewer
 
     if (currentComponentViewer?.componentUuid !== newEditor?.uuid) {
@@ -800,25 +816,17 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
   toggleStackComponent = async (component: SNComponent) => {
     if (!component.isExplicitlyEnabledForItem(this.note.uuid)) {
-      await this.associateComponentWithCurrentNote(component)
+      await this.application.mutator.runTransactionalMutation(
+        transactionForAssociateComponentWithCurrentNote(component, this.note),
+      )
     } else {
-      await this.disassociateComponentWithCurrentNote(component)
+      await this.application.mutator.runTransactionalMutation(
+        transactionForDisassociateComponentWithCurrentNote(component, this.note),
+      )
     }
     this.application.sync.sync().catch(console.error)
   }
 
-  async disassociateComponentWithCurrentNote(component: SNComponent) {
-    return this.application.mutator.runTransactionalMutation(
-      transactionForDisassociateComponentWithCurrentNote(component, this.note),
-    )
-  }
-
-  async associateComponentWithCurrentNote(component: SNComponent) {
-    return this.application.mutator.runTransactionalMutation(
-      transactionForAssociateComponentWithCurrentNote(component, this.note),
-    )
-  }
-
   registerKeyboardShortcuts() {
     this.removeTrashKeyObserver = this.application.io.addKeyObserver({
       key: KeyboardKey.Backspace,