feat: focus extension

package.json

@@ -56,6 +56,7 @@
     "@semantic-release/git": "^10.0.1",
     "@tiptap/core": "^2.0.2",
     "@tiptap/extension-character-count": "^2.0.2",
+    "@tiptap/extension-focus": "^2.0.3",
     "@tiptap/extension-highlight": "^2.0.2",
     "@tiptap/extension-link": "^2.0.2",
     "@tiptap/extension-placeholder": "^2.0.2",

src/extensions.ts

@@ -3,6 +3,7 @@ import StarterKit from "@tiptap/starter-kit";
 import type { CharacterCountOptions } from "@tiptap/extension-character-count";
 import type { TextAlignOptions } from "@tiptap/extension-text-align";
 import type { PlaceholderOptions } from "@tiptap/extension-placeholder";
+import type { FocusOptions } from "@tiptap/extension-focus";
 import type { DeepPartial, Field } from "@directus/shared/types";
 import underline from "./extensions/underline";
 import textAlign from "./extensions/text-align";
@@ -13,13 +14,15 @@ import highlight from "./extensions/highlight";
 import typography from "./extensions/typography";
 import placeholder from "./extensions/placeholder";
 import link from "./extensions/link";
+import focus from "./extensions/focus";
 
 interface ExtensionsProps {
   extensions: string[] | null;
   placeholder: PlaceholderOptions["placeholder"];
   characterCountLimit: CharacterCountOptions["limit"];
   characterCountMode: CharacterCountOptions["mode"];
   textAlignTypes: TextAlignOptions["types"];
+  focusMode: FocusOptions["mode"];
 }
 
 type ExtensionGroup = "mark" | "node" | "editor";
@@ -45,6 +48,7 @@ export const localExtensions: IExtension<AnyExtension>[] = [
   textAlign,
   // editor
   placeholder,
+  focus,
   typography,
   characterCount,
 ];

src/extensions/focus.ts

@@ -0,0 +1,43 @@
+import type { IExtension } from "../extensions";
+import Focus, { type FocusOptions } from "@tiptap/extension-focus";
+
+const defaults: Partial<FocusOptions> = {
+  mode: "all",
+};
+
+const extension: IExtension<typeof Focus> = {
+  name: "focus",
+  title: "Focus",
+  package: "@tiptap/extension-focus",
+  group: "editor",
+  defaults,
+  options: [
+    {
+      field: "focusMode",
+      name: "Focus mode",
+      type: "string",
+      meta: {
+        interface: "select-dropdown",
+        width: "half",
+        note: "Apply the effect to 'all', the 'shallowest' or the 'deepest' node",
+        options: {
+          choices: [
+            { text: "all", value: "all" },
+            { text: "shallowest", value: "shallowest" },
+            { text: "deepest", value: "deepest" },
+          ],
+        },
+      },
+      schema: {
+        default_value: defaults.mode,
+      },
+    },
+  ],
+  load(props) {
+    return Focus.configure({
+      mode: props.focusMode ?? defaults.mode,
+    });
+  },
+};
+
+export default extension;

src/tiptap-editor.vue

@@ -533,12 +533,18 @@
       height: 0;
       pointer-events: none;
     }
+
+    .has-focus {
+      border-radius: 3px;
+      //box-shadow: 0 0 6px 2px var(--background-subdued);
+      box-shadow: var(--card-shadow);
+    }
   }
 }
 </style>
 
 <script setup lang="ts">
-import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
+import { BubbleMenu, Editor, EditorContent } from "@tiptap/vue-3";
 import { onBeforeUnmount, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { translateShortcut } from "./utils/translate-shortcut";
@@ -583,6 +589,8 @@ import characterCount from "./extensions/character-count";
 import type { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import placeholder from "./extensions/placeholder";
 import { useLink } from "./composables/link";
+import type { FocusOptions } from "@tiptap/extension-focus";
+import focus from "./extensions/focus";
 
 const { t } = useI18n({ messages });
 
@@ -597,6 +605,7 @@ interface Props {
   textAlignTypes: TextAlignOptions["types"];
   characterCountLimit: CharacterCountOptions["limit"];
   characterCountMode: CharacterCountOptions["mode"];
+  focusMode: FocusOptions["mode"];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -608,6 +617,7 @@ const props = withDefaults(defineProps<Props>(), {
   textAlignTypes: () => textAlign.defaults.types,
   characterCountLimit: () => characterCount.defaults.limit,
   characterCountMode: () => characterCount.defaults.mode,
+  focusMode: () => focus.defaults.mode,
 });
 
 const emit = defineEmits<{