feat(editor): binding extension (#201)

Co-authored-by: Baptiste Leproux <[email protected]>

Author: farnabaz

package.json

@@ -91,7 +91,7 @@
   },
   "resolutions": {
     "@nuxt/content": "https://pkg.pr.new/@nuxt/content@9b4b4f2",
-    "nuxt-component-meta": "https://pkg.pr.new/nuxt-component-meta@104",
+    "nuxt-component-meta": "https://pkg.pr.new/nuxt-component-meta@b65b98e",
     "@vueuse/core": "13.9.0"
   },
   "packageManager": "[email protected]",

pnpm-lock.yaml

@@ -29,6 +29,7 @@ import { InlineElement } from '../../utils/tiptap/extensions/inline-element'
 import { SpanStyle } from '../../utils/tiptap/extensions/span-style'
 import { compressTree } from '@nuxt/content/runtime'
 import TiptapSpanStylePopover from '../tiptap/TiptapSpanStylePopover.vue'
+import { Binding } from '../../utils/tiptap/extensions/binding'
 
 const props = defineProps({
   draftItem: {
@@ -203,6 +204,7 @@ const emojiItems: EditorEmojiMenuItem[] = gitHubEmojis.filter(
         Slot,
         CodeBlock,
         Emoji,
+        Binding,
       ]"
       :placeholder="$t('studio.tiptap.editor.placeholder')"
     >

src/app/src/components/content/ContentEditorTipTap.vue

@@ -101,6 +101,7 @@ function computeValue(formItem: FormItem): unknown {
       v-model="(model as string | number)"
       :placeholder="placeholder"
       :type="inputType"
+      size="xs"
       class="w-full"
     />
   </UFormField>

src/app/src/components/form/FormPanelInput.vue

@@ -47,6 +47,7 @@ function updateValue(key: string, value: string | number) {
       >
         <UInput
           v-model="(entry.value as string | number)"
+          size="xs"
           :placeholder="entry.placeholder"
           :type="entry.type"
           class="w-full"

src/app/src/components/form/input/FormInputObject.vue

@@ -21,7 +21,7 @@ const open = defineModel('open', { type: Boolean, default: undefined })
   >
     <div class="flex items-center justify-between gap-2 w-full">
       <div class="flex items-center gap-2">
-        <div class="flex items-center justify-center size-4 rounded bg-gray-100 dark:bg-gray-800 transition-colors duration-200 group-hover/collapsible:bg-gray-200 dark:group-hover/collapsible:bg-gray-700">
+        <div class="flex items-center justify-center size-3.5 rounded bg-gray-100 dark:bg-gray-800 transition-colors duration-200 group-hover/collapsible:bg-gray-200 dark:group-hover/collapsible:bg-gray-700">
           <UIcon
             name="i-lucide-chevron-right"
             class="size-2.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"

src/app/src/components/shared/Collapsible.vue

@@ -11,10 +11,11 @@ import { useI18n } from 'vue-i18n'
 const { context, gitProvider } = useStudio()
 const { preferences, updatePreference } = useStudioState()
 const { t } = useI18n()
-const fileInputRef = ref<HTMLInputElement>()
 
 // @ts-expect-error vue-tsc error in cli
 const toolbarRef = ref<HTMLElement>()
+const fileInputRef = ref<HTMLInputElement>()
+
 const pendingAction = ref<StudioAction<StudioItemActionId> | null>(null)
 const loadingAction = ref<StudioAction<StudioItemActionId> | null>(null)
 

src/app/src/components/shared/item/ItemActionsToolbar.vue

@@ -17,6 +17,10 @@ const props = defineProps({
     type: Function as PropType<(props: Record<string, unknown>) => void>,
     required: true,
   },
+  hideTitle: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { host } = useStudio()
@@ -119,11 +123,14 @@ function normalizePropsTree(tree: FormTree): FormTree {
 
 <template>
   <div
-    class="p-4 min-w-[400px] max-w-[500px] not-prose overflow-y-auto max-h-[400px] relative"
+    class="p-3 min-w-[400px] max-w-[500px] not-prose overflow-y-auto max-h-[400px] relative"
     @click.stop
   >
     <!-- Header -->
-    <div class="text-sm font-mono font-semibold text-highlighted mb-4">
+    <div
+      v-if="!hideTitle"
+      class="text-sm font-mono font-semibold text-highlighted mb-2"
+    >
       {{ titleCase(componentName).replace(/^U /, '') }} properties
     </div>
 
@@ -145,8 +152,8 @@ function normalizePropsTree(tree: FormTree): FormTree {
           <div class="w-2/3 flex items-center gap-2">
             <!-- Nested form overlay for arrays/objects -->
             <template v-if="nestedForm?.key === prop.key">
-              <div class="fixed inset-0 bg-default z-50 flex flex-col p-4 overflow-y-auto rounded-lg">
-                <div class="flex items-center justify-between mb-4">
+              <div class="fixed inset-0 bg-default z-50 flex flex-col p-3 overflow-y-auto rounded-lg">
+                <div class="flex items-center justify-between mb-2">
                   <span class="text-sm font-mono font-semibold text-highlighted">
                     {{ prop.title }}
                   </span>
@@ -202,6 +209,7 @@ function normalizePropsTree(tree: FormTree): FormTree {
               <USwitch
                 :model-value="Boolean(prop.value)"
                 :disabled="prop.disabled"
+                size="xs"
                 @update:model-value="updateProp(key, $event)"
               />
             </template>
@@ -213,7 +221,7 @@ function normalizePropsTree(tree: FormTree): FormTree {
                 :items="prop.options"
                 :disabled="prop.disabled"
                 class="w-full"
-                size="sm"
+                size="xs"
                 @update:model-value="updateProp(key, $event)"
               />
             </template>
@@ -226,7 +234,7 @@ function normalizePropsTree(tree: FormTree): FormTree {
                 :placeholder="getPlaceholder(prop)"
                 :disabled="prop.disabled"
                 class="w-full"
-                size="sm"
+                size="xs"
                 @update:model-value="updateProp(key, $event)"
               />
             </template>
@@ -238,7 +246,7 @@ function normalizePropsTree(tree: FormTree): FormTree {
                 :placeholder="getPlaceholder(prop)"
                 :disabled="prop.disabled"
                 class="w-full"
-                size="sm"
+                size="xs"
                 @update:model-value="updateProp(key, $event)"
               />
             </template>

src/app/src/components/tiptap/TiptapComponentProps.vue

@@ -126,7 +126,7 @@ function handleKeyDown(event: KeyboardEvent) {
           <UButton
             icon="i-lucide-corner-down-left"
             variant="ghost"
-            size="sm"
+            size="xs"
             :disabled="!url && !active"
             :title="$t('studio.tiptap.link.applyLink')"
             @click="setLink"
@@ -141,7 +141,7 @@ function handleKeyDown(event: KeyboardEvent) {
             icon="i-lucide-external-link"
             color="neutral"
             variant="ghost"
-            size="sm"
+            size="xs"
             :disabled="!url && !active"
             :title="$t('studio.tiptap.link.openInNewWindow')"
             @click="openLink"
@@ -151,7 +151,7 @@ function handleKeyDown(event: KeyboardEvent) {
             icon="i-lucide-trash"
             color="neutral"
             variant="ghost"
-            size="sm"
+            size="xs"
             :disabled="!url && !active"
             :title="$t('studio.tiptap.link.removeLink')"
             @click="removeLink"

src/app/src/components/tiptap/TiptapLinkPopover.vue

@@ -120,7 +120,7 @@ function handleKeyDown(event: KeyboardEvent) {
             <UButton
               icon="i-lucide-corner-down-left"
               variant="ghost"
-              size="sm"
+              size="xs"
               @click="applySpanStyle"
             />
           </UTooltip>
@@ -130,7 +130,7 @@ function handleKeyDown(event: KeyboardEvent) {
               icon="i-lucide-trash"
               color="neutral"
               variant="ghost"
-              size="sm"
+              size="xs"
               :disabled="!active"
               @click="removeSpanStyle"
             />