Merge pull request #412 from Harbour-Enterprises/artem-HAR-9336

HAR-9336 - fix toolbar state updates

Author: harbournick

packages/super-editor/src/components/toolbar/super-toolbar.js

@@ -198,7 +198,7 @@ export class SuperToolbar extends EventEmitter {
     this.config = { ...this.config, ...config };
     this.toolbarItems = [];
     this.overflowItems = [];
-    this.documentMode = 'editing';
+    this.documentMode = config.documentMode || 'editing';
     this.isDev = config.isDev || false;
     this.superdoc = config.superdoc;
     this.role = config.role || 'editor';

packages/superdoc/src/SuperDoc.vue

@@ -131,7 +131,7 @@ const onEditorCreate = ({ editor }) => {
   const { documentId } = editor.options;
   const doc = getDocument(documentId);
   doc.setEditor(editor);
-  proxy.$superdoc.activeEditor = editor;
+  proxy.$superdoc.setActiveEditor(editor);
   proxy.$superdoc.broadcastEditorCreate(editor);
   proxy.$superdoc.log('[SuperDoc] Editor created', proxy.$superdoc.activeEditor);
   proxy.$superdoc.log('[SuperDoc] Page styles (pixels)', editor.getPageStyles());

packages/superdoc/src/core/SuperDoc.js

@@ -187,7 +187,6 @@ export class SuperDoc extends EventEmitter {
 
     // If a toolbar element is provided, render a toolbar
     this.addToolbar(this);
-  
   }
 
   get requiredNumberOfEditors() {
@@ -354,11 +353,13 @@ export class SuperDoc extends EventEmitter {
       role: this.config.role,
       pagination: this.config.pagination,
       icons: this.config.toolbarIcons,
+      documentMode: this.config.documentMode,
       superdoc: this,
     };
 
     this.toolbar = new SuperToolbar(config);
     this.toolbar.on('superdoc-command', this.onToolbarCommand.bind(this));
+    this.once('editorCreate', () => this.toolbar.updateToolbarState()); 
   }
 
   addCommentsList(element) {
@@ -402,26 +403,38 @@ export class SuperDoc extends EventEmitter {
     if (this.config.role !== 'editor') return this.#setModeSuggesting();
     if (this.superdocStore.documents.length > 0) {
       const firstEditor = this.superdocStore.documents[0]?.getEditor();
-      if (firstEditor) {
-        this.setActiveEditor(firstEditor);
-        this.toolbar.activeEditor = firstEditor;
-      }
+      if (firstEditor) this.setActiveEditor(firstEditor);
     }
 
     this.superdocStore.documents.forEach((doc) => {
       doc.restoreComments();
       const editor = doc.getEditor();
       if (editor) editor.setDocumentMode('editing');
     });
+
+    if (this.toolbar) {
+      this.toolbar.documentMode = 'editing';
+      this.toolbar.updateToolbarState();
+    }   
   }
 
   #setModeSuggesting() {
     if (!['editor', 'suggester'].includes(this.config.role)) return this.#setModeViewing();
+    if (this.superdocStore.documents.length > 0) {
+      const firstEditor = this.superdocStore.documents[0]?.getEditor();
+      if (firstEditor) this.setActiveEditor(firstEditor);
+    }
+
     this.superdocStore.documents.forEach((doc) => {
       doc.restoreComments();
       const editor = doc.getEditor();
       if (editor) editor.setDocumentMode('suggesting');
     });
+
+    if (this.toolbar) {
+      this.toolbar.documentMode = 'suggesting';
+      this.toolbar.updateToolbarState();
+    }
   }
 
   #setModeViewing() {
@@ -431,6 +444,11 @@ export class SuperDoc extends EventEmitter {
       const editor = doc.getEditor();
       if (editor) editor.setDocumentMode('viewing');
     });
+    
+    if (this.toolbar) {
+      this.toolbar.documentMode = 'viewing';
+      this.toolbar.updateToolbarState();
+    }
   }
 
   /**