From d325def307af4fb795317e64746612cfa69aee06 Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Mon, 5 Aug 2024 18:57:26 -0700
Subject: [PATCH] Refactor toolbar in superdoc to work with new SE toolbar, fix
 issue where we don't always have an active editor, update toolbar buttons on
 new editor focus

---
 .../src/components/toolbar/Toolbar.vue        | 24 ++++---------------
 .../src/components/toolbar/ToolbarItem.js     |  8 ++-----
 packages/superdoc/package.json                |  2 +-
 packages/superdoc/src/Superdoc.vue            | 16 +++++++++----
 .../components/SuperToolbar/SuperToolbar.vue  |  9 +++----
 packages/superdoc/src/dev/SuperdocDev.vue     | 13 ----------
 packages/superdoc/src/index.js                | 11 +++++----
 7 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/packages/super-editor/src/components/toolbar/Toolbar.vue b/packages/super-editor/src/components/toolbar/Toolbar.vue
index c09917a281..798c2c4584 100644
--- a/packages/super-editor/src/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/components/toolbar/Toolbar.vue
@@ -13,7 +13,7 @@ import { undoDepth, redoDepth } from 'prosemirror-history';
 const props = defineProps({
     editorInstance: {
         type: Object,
-        required: true,
+        required: false,
     },
     updateTransaction: {
         type: Object,
@@ -332,7 +332,8 @@ const alignment = makeToolbarItem({
     markName: 'textAlign',
     labelAttr: 'textAlign',
     getIcon(self) {
-      const attrs = self.editor.getAttributes('paragraph').textAlign;
+      let attrs = self.editor?.getAttributes('paragraph').textAlign;
+      if (!attrs) attrs = 'left';
       return `fa-align-${attrs}`;
     },
     onTextMarkSelection(self, mark) {
@@ -570,8 +571,8 @@ const toolbarItems = ref([
   alignment,
   bulletedList,
   numberedList,
-  indentRight,
   indentLeft,
+  indentRight,
   separator,
   search,
   overflow,
@@ -762,23 +763,6 @@ defineExpose({
 <template>
   <div class="toolbar">
 
-    <!-- TODO: delete this (examples of how to handle active state)-->
-    <div 
-      style="display: none;"
-      :class="{
-        'is-bold-active': editorInstance.isActive('bold'),
-        'is-italic-active': editorInstance.isActive('italic'),
-        'is-undeline-active': editorInstance.isActive('underline'),
-        'is-arial-font-active': editorInstance.isActive('textStyle', { fontFamily: 'Arial, sans-serif' }),
-        'is-purple-color-active': editorInstance.isActive('textStyle', { color: 'purple' }),
-        'is-orange-color-active': editorInstance.getAttributes('textStyle').color === 'orange',
-        'is-bullet-list-active': editorInstance.isActive('bulletList'),
-        'is-center-align': editorInstance.isActive({ textAlign: 'center' }),
-      }"
-      :data-current-color="editorInstance.getAttributes('textStyle').color"
-      :data-current-font-size="editorInstance.getAttributes('textStyle').fontSize">
-    </div>
-
     <div v-for="item, index in toolbarItems"
     :key="index"
     :class="{
diff --git a/packages/super-editor/src/components/toolbar/ToolbarItem.js b/packages/super-editor/src/components/toolbar/ToolbarItem.js
index f6e1773fb7..3319f79f38 100644
--- a/packages/super-editor/src/components/toolbar/ToolbarItem.js
+++ b/packages/super-editor/src/components/toolbar/ToolbarItem.js
@@ -11,10 +11,6 @@ export class ToolbarItem {
             throw new Error('Invalid toolbar item name - ' + options.name);
         }
 
-        if (!options.editor) {
-            throw new Error('Invalid toolbar item editor - ' + options.editor);
-        }
-
         this.type = options.type
         this.name = options.name
         this.editor = options.editor
@@ -94,11 +90,11 @@ export class ToolbarItem {
 
     // handlers
     _getActiveState() {
-        return this.editor.isActive(this.name)
+        return this.editor?.isActive(this.name)
     }
     _getAttr(attr) {
         if (!this.markName || !attr) return null;
-        return this.editor.getAttributes(this.markName)[attr];
+        return this.editor?.getAttributes(this.markName)[attr];
     }
     _getLabel() {
         return this._getAttr(this.labelAttr) || this.defaultLabel;
diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index fdbeee8eba..dd6a45bbcc 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "1.0.0-alpha.35",
+  "version": "1.0.0-alpha.36",
   "files": [
     "dist"
   ],
diff --git a/packages/superdoc/src/Superdoc.vue b/packages/superdoc/src/Superdoc.vue
index c32ba1b26a..0222a917ac 100644
--- a/packages/superdoc/src/Superdoc.vue
+++ b/packages/superdoc/src/Superdoc.vue
@@ -171,16 +171,22 @@ const onCreate = ({ editor }) => {
   console.debug('[Superdoc] Page styles (pixels)', editor.getPageStyles());
   proxy.$superdoc.broadcastLoaded();
 }
+
+const onFocus = ({ editor }) => {
+  proxy.$superdoc.activeEditor = editor;
+  proxy.$superdoc.addToolbar(proxy.$superdoc);
+}
 const onSelectionUpdate = ({ editor, transaction }) => {
-  const { selection } = editor.view.state;
-  const marks = selection.$head.marks();
-  proxy.$superdoc.toolbar.onTextSelectionChange(marks);
-  proxy.$superdoc.onSelectionUpdate({ editor, transaction });
+  // const { selection } = editor.view.state;
+  // const marks = selection.$head.marks();
+  // proxy.$superdoc.toolbar.onTextSelectionChange(marks);
+  // proxy.$superdoc.onSelectionUpdate({ editor, transaction });
 }
 
 const editorOptions = {
   onCreate,
-  onSelectionUpdate
+  // onSelectionUpdate,
+  onFocus
 }
 
 </script>
diff --git a/packages/superdoc/src/components/SuperToolbar/SuperToolbar.vue b/packages/superdoc/src/components/SuperToolbar/SuperToolbar.vue
index a59ca65837..041e0753fe 100644
--- a/packages/superdoc/src/components/SuperToolbar/SuperToolbar.vue
+++ b/packages/superdoc/src/components/SuperToolbar/SuperToolbar.vue
@@ -2,6 +2,7 @@
 import 'super-editor/style.css';
 import { getCurrentInstance, ref, onMounted } from 'vue';
 import { Toolbar } from 'super-editor';
+import { watch } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const toolbar = ref(null);
@@ -11,15 +12,11 @@ const handleToolbarCommand = (command) => {
   proxy.$superdoc.onToolbarCommand(command);
 }
 
-onMounted(() => {
-  // This sets $superdoc.toolbar to the Toolbar component from super-editor
-  proxy.$superdoc.setToolbar(toolbar.value);
-})
 </script>
 
 <template>
-  <div>
-    <Toolbar class="toolbar" @command="handleToolbarCommand" ref="toolbar"/>
+  <div ref="toolbar">
+    <Toolbar class="toolbar" :editorInstance="$superdoc.activeEditor" @command="handleToolbarCommand" />
   </div>
 </template>
 
diff --git a/packages/superdoc/src/dev/SuperdocDev.vue b/packages/superdoc/src/dev/SuperdocDev.vue
index c7029977c0..0ecb867ae6 100644
--- a/packages/superdoc/src/dev/SuperdocDev.vue
+++ b/packages/superdoc/src/dev/SuperdocDev.vue
@@ -53,19 +53,6 @@ const initializeApp = async () => {
     }
   }
   superdoc = new Superdoc(config);
-  superdoc.on('selection-update', ({ editor, transaction }) => {
-    console.debug('[Superdoc] Selection update', editor, transaction);
-    activeEditor = editor;
-  });
-}
-
-const handleToolbarCommand = (command) => {
-  console.debug('[SuperEditor dev] Toolbar command', command, activeEditor?.commands);
-  const commands = activeEditor?.commands;
-  if (!!commands && command in commands){
-    activeEditor?.commands[command]();
-  }
-}
 
 onMounted(() => {
   initializeApp();
diff --git a/packages/superdoc/src/index.js b/packages/superdoc/src/index.js
index c362b264ae..601c0590f3 100644
--- a/packages/superdoc/src/index.js
+++ b/packages/superdoc/src/index.js
@@ -62,16 +62,19 @@ class Superdoc extends EventEmitter {
     this.emit('selection-update', { editor, transaction });
   }
 
-  setToolbar(component) {
-    this.toolbar = component;
-  }
-
   addToolbar(instance) {
     if (!this.toolbarElement) return;
+
+    if (this.toolbar) {
+      console.debug('[superdoc] Unmounting existing toolbar');
+      this.toolbar.unmount();
+    }
+
     const el = document.getElementById(this.toolbarElement);
     if (!el) return;
     
     const app = createApp(SuperToolbar);
+    this.toolbar = app;
     app.config.globalProperties.$superdoc = instance;
     app.mount(el);
   }