Merge pull request #301 from codex-team/feat/inline-toolbar

feat: inline-toolbar

Author: Dobrunia

codex-ui/dev/pages/components/Editor.vue

@@ -28,8 +28,8 @@
         class: Header as any,
         config: {
           placeholder: 'Heading',
-          inlineToolbar: true,
         },
+        inlineToolbar: true,
       },
       list: {
         class: NestedList,
@@ -40,6 +40,7 @@
     placeholder="Write something or press / to select a tool"
     first-block-placeholder="Untitled"
     autofocus
+    :inlineToolbar="true"
   />
 </template>
 

codex-ui/src/vue/components/editor/Editor.vue

@@ -48,6 +48,13 @@ const props = defineProps<{
    * Should the editor be focused on load
    */
   autofocus?: boolean;
+
+  /**
+   * Common Inline Toolbar settings
+   * - if true (or not specified), the order from 'tool' property will be used (default)
+   * - if an array of tool names, this order will be used
+   */
+  inlineToolbar?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -62,6 +69,7 @@ const editorConfig = computed<EditorConfig>(() => {
     tools: props.tools,
     placeholder: props.placeholder,
     autofocus: props.autofocus,
+    inlineToolbar: props.inlineToolbar,
   };
 });
 

src/application/services/useNoteEditor.ts

@@ -68,13 +68,13 @@ export const useNoteEditor = function useNoteEditor(options: UseNoteEditorOption
    * Loaded tools classes by grouped by tool.name
    * Undefined when tools are not loaded yet
    */
-  let toolsClasses: Record<string, EditorjsConfigTool> | undefined = undefined;
+  let toolsUserConfig: Record<string, { class: EditorjsConfigTool; inlineToolbar: boolean }> | undefined = undefined;
 
   /**
-   * We can't make toolsClasses reactive since it contains excecutable js-classes, Vue can't handle that.
+   * We can't make toolsUserConfig reactive since it contains excecutable js-classes, Vue can't handle that.
    * So we store reactive flag to indicate that tools are loaded
    */
-  const toolsClassesLoaded = ref<boolean>(false);
+  const toolsUserConfigLoaded = ref<boolean>(false);
 
   /**
    * Combine note and user tools
@@ -114,8 +114,17 @@ export const useNoteEditor = function useNoteEditor(options: UseNoteEditorOption
      */
     const loadedToolsWithoutParagraph = loadedTools.filter(tool => tool.tool.name !== 'paragraph');
 
-    toolsClasses = Object.fromEntries(loadedToolsWithoutParagraph.map(toolClassAndInfo => [toolClassAndInfo.tool.name, toolClassAndInfo.class]));
-    toolsClassesLoaded.value = true;
+    toolsUserConfig = Object.fromEntries(
+      loadedToolsWithoutParagraph
+        .map(toolClassAndInfo => [
+          toolClassAndInfo.tool.name,
+          {
+            class: toolClassAndInfo.class,
+            inlineToolbar: true,
+          },
+        ])
+    );
+    toolsUserConfigLoaded.value = true;
 
     /**
      * Now all tools are loaded, we're ready to use the editor
@@ -148,8 +157,9 @@ export const useNoteEditor = function useNoteEditor(options: UseNoteEditorOption
       holderId: 'editorjs',
       data: options.noteContentResolver(),
       readOnly: toValue(options.canEdit) === false,
-      tools: toolsClassesLoaded.value ? toolsClasses : undefined,
+      tools: toolsUserConfigLoaded.value ? toolsUserConfig : undefined,
       placeholder: t('note.editor.placeholder'),
+      inlineToolbar: true,
     };
   });