the big refactoring for better modularity

package.json

@@ -72,6 +72,7 @@
         "@types/lodash": "^4.14.195",
         "@types/node": "^20.11.17",
         "@types/uuid": "^9.0.2",
+        "@types/validator": "^13.12.0",
         "lodash": "^4.17.21",
         "typescript": "^5.3.3",
         "uuid": "^9.0.0",

src/display/extensions.ts

@@ -1,4 +1,4 @@
 import extensions from "../../shared/extensions";
-import RelationBlock from "../interface/nodes/relation-block";
+import RelationBlock from "../interface/tools/relation-block/node-extension";
 
 export default [...extensions, RelationBlock];

src/interface/components/Toolbar.vue

@@ -1,11 +1,5 @@
 <template>
     <div class="toolbar">
-        <relation-block-menu
-            v-if="m2aField"
-            :editor="editor"
-            :single-line-mode="singleLineMode"
-        />
-
         <v-menu
             v-if="formatTools.length"
             show-arrow
@@ -64,34 +58,23 @@
             :icon="tool.icon"
             :display="tool.display"
             :shortcut="tool.shortcut"
-            :action="() => toolAction(tool)"
-            :active="tool.active?.(editor)"
+            :action="() => tool.action?.(editor)"
+            :active="editor.isFocused && tool.active?.(editor)"
             :disabled="tool.disabled?.(editor) || (singleLineMode && tool.disabledInSingleLineMode)"
             :editor="editor"
         />
-
-        <v-dialog v-model="showDialog">
-            <component
-                :is="dialog!.component"
-                :get="dialog!.get"
-                @set="dialog!.set"
-                @unset="dialog!.unset"
-                @close-dialog="dialog = null"
-            ></component>
-        </v-dialog>
     </div>
 </template>
 
 
 
 <script setup lang="ts">
-    import { ref, computed, inject } from 'vue';
+    import { ref, computed } from 'vue';
     import ToolButton from './ToolButton.vue';
-    import RelationBlockMenu from './RelationBlockMenu.vue';
     import { translateShortcut } from '../directus-core/utils/translate-shortcut';
     import { useI18n } from "vue-i18n";
     import { useI18nFallback } from '../composables/use-i18n-fallback'
-    import type { Tool, Dialog } from '../types';
+    import type { Tool } from '../types';
     import type { Editor } from '@tiptap/vue-3';
 
 
@@ -111,10 +94,6 @@
     const { t, $t } = useI18nFallback(useI18n());
 
 
-    // Inject
-    const m2aField = inject('m2aField');
-
-
     // Split up tools to types
     const buttonTools = ref<Tool[]>([]);
     const formatTools = ref<Tool[]>([]);
@@ -141,15 +120,6 @@
 
         return t('tools.paragraph');
     });
-
-
-    // Dialog
-    const dialog = ref<Dialog | null>(null);
-    const showDialog = computed(() => dialog.value !== null)
-
-
-    // Action (click) method
-    const toolAction = (tool: Tool) => tool.action?.(props.editor, { dialog });
 </script>
 
 
@@ -167,6 +137,9 @@
 
         --toolbar-item-m: 1px;
         --toolbar-dropdown-p: 2px;
+
+        display: flex;
+        flex-wrap: wrap;
     }
 
     .toolbar-dropdown-button :deep(.button) {

src/interface/interface.vue

@@ -17,7 +17,7 @@
     >
         <toolbar
             v-if="tools.length"
-            :tools="selectedTools(tools)"
+            :tools="selectedTools(tools, !!m2aField)"
             :editor="editor"
             :display-format="displayFormat"
             :single-line-mode="singleLineMode"
@@ -44,7 +44,7 @@
     import Placeholder from '@tiptap/extension-placeholder'
     import Dropcursor from '@tiptap/extension-dropcursor'
     import Gapcursor from '@tiptap/extension-gapcursor'
-    import RelationBlock from "./nodes/relation-block"
+    import RelationBlock from "./tools/relation-block/node-extension"
     import { toolsExtensions, interfaceOptionsDefault, selectedTools } from './tools'
     import { useSyncRelationNodes } from "./composables/use-sync-relation-nodes"
     import { useRelationReference } from './composables/use-relation-reference'
@@ -152,10 +152,7 @@
     provide('fullscreen', fullscreen);
 
 
-    // Provide
-    provide('m2aField', toRef(props, 'm2aField'));
-
-
+    // Errors
     const errors = ref<string[]>([]);
 
 

src/interface/lib/define-tool.ts

@@ -0,0 +1,3 @@
+import type { Tool } from "../types";
+
+export const defineTool = (tool: Tool) => tool;

src/interface/lib/index.ts

@@ -0,0 +1,2 @@
+export * from "./define-tool";
+export * from "./extend-mark-range-if-unselected";

src/interface/tools/blockquote.ts

@@ -1,11 +1,11 @@
 // https://tiptap.dev/api/nodes/blockquote
 
 import Blockquote from "@tiptap/extension-blockquote";
+import { defineTool } from "../lib";
 import customMessages from "../i18n/custom-messages";
 import type { Editor } from "@tiptap/core";
-import type { Tool } from "../types";
 
-export default {
+export default defineTool({
     key: "blockquote",
     name: customMessages.tools.blockquote,
     icon: "format_quote",
@@ -15,4 +15,4 @@ export default {
     disabled: (editor: Editor) =>
         !editor.can().chain().focus().toggleBlockquote().run(),
     active: (editor: Editor) => editor.isActive("blockquote"),
-} as Tool;
+});

src/interface/tools/bold.ts

@@ -2,11 +2,10 @@
 
 import Bold from "@tiptap/extension-bold";
 import customMessages from "../i18n/custom-messages";
-import { extendMarkRangeIfUnselected } from "./utils";
+import { defineTool, extendMarkRangeIfUnselected } from "../lib";
 import type { Editor } from "@tiptap/core";
-import type { Tool } from "../types";
 
-export default {
+export default defineTool({
     key: "bold",
     name: customMessages.tools.bold,
     icon: "format_bold",
@@ -17,4 +16,4 @@ export default {
     disabled: (editor: Editor) =>
         !editor.can().chain().focus().toggleBold().run(),
     active: (editor: Editor) => editor.isActive("bold"),
-} as Tool;
+});

src/interface/tools/bullet-list.ts

@@ -2,11 +2,11 @@
 
 import BulletList from "@tiptap/extension-bullet-list";
 import ListItem from "@tiptap/extension-list-item";
+import { defineTool } from "../lib";
 import customMessages from "../i18n/custom-messages";
 import type { Editor } from "@tiptap/core";
-import type { Tool } from "../types";
 
-export default {
+export default defineTool({
     key: "bulletList",
     name: customMessages.tools.bullet_list,
     icon: "format_list_bulleted",
@@ -16,4 +16,4 @@ export default {
     disabled: (editor: Editor) =>
         !editor.can().chain().focus().toggleBulletList().run(),
     active: (editor: Editor) => editor.isActive("bulletList"),
-} as Tool;
+});

src/interface/tools/code-block.ts

@@ -1,11 +1,11 @@
 // https://tiptap.dev/api/nodes/code-block
 
 import CodeBlock from "@tiptap/extension-code-block";
+import { defineTool } from "../lib";
 import customMessages from "../i18n/custom-messages";
 import type { Editor } from "@tiptap/core";
-import type { Tool } from "../types";
 
-export default {
+export default defineTool({
     key: "codeBlock",
     name: customMessages.tools.code_block,
     extension: [CodeBlock],
@@ -15,4 +15,4 @@ export default {
     disabled: (editor: Editor) =>
         !editor.can().chain().focus().toggleCodeBlock().run(),
     active: (editor: Editor) => editor.isActive("codeBlock"),
-} as Tool;
+});

src/interface/tools/code.ts

@@ -1,12 +1,11 @@
 // https://tiptap.dev/api/marks/code
 
 import Code from "@tiptap/extension-code";
+import { defineTool, extendMarkRangeIfUnselected } from "../lib";
 import customMessages from "../i18n/custom-messages";
-import { extendMarkRangeIfUnselected } from "./utils";
 import type { Editor } from "@tiptap/core";
-import type { Tool } from "../types";
 
-export default {
+export default defineTool({
     key: "code",
     name: customMessages.tools.code,
     icon: "code",
@@ -17,4 +16,4 @@ export default {
     disabled: (editor: Editor) =>
         !editor.can().chain().focus().toggleCode().run(),
     active: (editor: Editor) => editor.isActive("code"),
-} as Tool;
+});