Refactor toolbar in superdoc to work with new SE toolbar, allow for editor instance to be null

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="{

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;

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"
   ],

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>

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>
 

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();

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);
   }