feat: include a custom display rendering content as text

package.json

@@ -6,18 +6,34 @@
   "keywords": [
     "directus",
     "directus-extension",
+    "directus-custom-bundle",
     "directus-custom-interface",
+    "directus-custom-display",
     "tiptap"
   ],
   "homepage": "https://github.com/gbicou/directus-extension-tiptap",
   "author": "Benjamin VIELLARD <[email protected]>",
   "license": "MIT",
   "repository": "github:gbicou/directus-extension-tiptap",
   "directus:extension": {
-    "type": "interface",
-    "path": "dist/index.js",
-    "source": "src/index.ts",
-    "host": "^9.23.4"
+    "host": "^9.23.4",
+    "type": "bundle",
+    "path": {
+      "app": "dist/app.js",
+      "api": "dist/api.js"
+    },
+    "entries": [
+      {
+        "type": "interface",
+        "name": "directus-extension-tiptap-interface",
+        "source": "src/interface.ts"
+      },
+      {
+        "type": "display",
+        "name": "directus-extension-tiptap-display",
+        "source": "src/display.ts"
+      }
+    ]
   },
   "files": [
     "dist"

src/display.ts

@@ -0,0 +1,12 @@
+import { defineDisplay } from "@directus/extensions-sdk";
+import TiptapDisplay from "./tiptap-display.vue";
+
+export default defineDisplay({
+  id: "tiptap",
+  name: "TipTap",
+  icon: "text_fields",
+  description: "Tip Tap content",
+  component: TiptapDisplay,
+  options: null,
+  types: ["json", "text"],
+});

src/index.ts → src/interface.ts

@@ -10,4 +10,5 @@ export default defineInterface({
   types: ["json", "text"],
   group: "standard",
   options: null,
+  recommendedDisplays: ["tiptap"],
 });

src/tiptap-display.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>{{ text }}</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { TypeType, ValueType } from "./types";
+import { generateText } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+
+const props = withDefaults(
+  defineProps<{
+    value: ValueType | null;
+    type: TypeType;
+  }>(),
+  { value: null }
+);
+
+const text = computed(() => {
+  if (props.type === "json") {
+    return generateText(props.value, [StarterKit, Underline]);
+  }
+  return props.value;
+});
+</script>

src/tiptap-editor.vue

@@ -219,28 +219,27 @@
 </style>
 
 <script setup lang="ts">
-import { Editor, EditorContent, HTMLContent, JSONContent } from "@tiptap/vue-3";
+import { Editor, EditorContent } from "@tiptap/vue-3";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 import { onBeforeUnmount, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { translateShortcut } from "./utils/translate-shortcut";
+import type { TypeType, ValueType } from "./types";
 
 const { t } = useI18n();
 
-type ValueType = "json" | "text";
-
 const props = withDefaults(
   defineProps<{
-    value: JSONContent | HTMLContent | null;
-    type: ValueType;
+    value: ValueType | null;
+    type: TypeType;
     disabled: boolean;
   }>(),
   { value: null, disabled: false }
 );
 
 const emit = defineEmits<{
-  (e: "input", value: JSONContent | HTMLContent): void;
+  (e: "input", value: ValueType): void;
 }>();
 
 const editor = new Editor({

src/types.ts

@@ -0,0 +1,4 @@
+import type { HTMLContent, JSONContent } from "@tiptap/vue-3";
+
+export type TypeType = "json" | "text";
+export type ValueType = JSONContent | HTMLContent;