@type32/yaml-editor-form 0.1.6 → 0.2.2

package/README.md

@@ -1072,20 +1072,20 @@ This function captures the parent's `modelValue` ref and updates it directly, ma
 
 Even if your color field is deeply nested (`data.theme.colors.primary`), the slot works identically because slots are forwarded at every level.
 
-### Type Priority
+### Type Priority & Detection Order
 
-**Detection Order (NEW in v0.2.0):**
+**Detection Order:**
 
-Custom types with `detect` functions are now checked **before** default types:
+Custom types with `detect` functions are **always** checked **before** default types:
 
 1. **Custom types** (checked first) - Your custom types take priority
 2. **Default types** (checked second) - Built-in types as fallback
-3. First matching type wins
+3. **First matching type wins** - Detection stops at first match
 
-This means:
+This ensures:
 - ✅ Your `color` type will be detected before the default `string` type
 - ✅ Custom types override default detection behavior
-- ✅ More specific types should still have more specific detect functions
+- ✅ Custom types appear first in "Add Field" dropdowns
 
 **Example:**
 ```typescript
@@ -1099,6 +1099,48 @@ const customTypes = [{
 // Value '#FF0000' will match 'color' before 'string'
 ```
 
+**Important: Make Your Detect Functions Specific!**
+
+Since detection stops at the first match, make sure your `detect` functions are specific enough:
+
+```typescript
+// ❌ TOO BROAD - will match ALL strings
+{
+    type: 'email',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string'  // Too general!
+}
+
+// ✅ SPECIFIC - only matches email-like strings
+{
+    type: 'email',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^[^@]+@[^@]+\.[^@]+$/.test(v)
+}
+
+// ✅ SPECIFIC - only matches hex colors
+{
+    type: 'color',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^#[0-9A-Fa-f]{6}$/.test(v)
+}
+
+// ✅ SPECIFIC - only matches URLs
+{
+    type: 'url',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^https?:\/\//.test(v)
+}
+```
+
+**Troubleshooting Detection Issues:**
+
+If your custom type isn't being detected:
+1. Check that `detect` function is specific enough
+2. Ensure `detect` returns `true` for your value
+3. Remember: first matching type wins (order matters!)
+4. Test your detect function in isolation
+
 **Base Type Conversions:**
 
 When using `baseType`, conversion rules follow this logic:
@@ -1118,22 +1160,57 @@ When using `baseType`, conversion rules follow this logic:
 
 ### Writable Computed Support
 
-The editor is fully compatible with writable computed refs. All mutations create new object references instead of mutating in place:
+**✅ Fully Compatible** - The editor now fully supports writable computed refs through `defineModel` and nested components.
+
+All internal operations use **immutable updates** to ensure computed setters are properly triggered:
 
 ```typescript
-// ✅ Creates new object (triggers computed setter)
-data.value = { ...data.value, newField: 'value' }
+// ✅ All operations create new references (triggers computed setter)
+data.value = { ...data.value, newField: 'value' }           // Add field
+data.value = { ...data.value, [key]: newValue }             // Update field
+const { [key]: removed, ...rest } = data.value              // Remove field
+data.value = rest
 
-// ❌ Direct mutation (doesn't trigger computed setter)
-data.value.newField = 'value'  // Old approach - now fixed!
+// ✅ Array operations also use immutable patterns
+array.value = [...array.value, newItem]                     // Add item
+array.value = array.value.filter((_, i) => i !== index)    // Remove item
+const newArr = [...array.value]; newArr[i] = val            // Update item
+array.value = newArr
+```
+
+**✅ Works Through Multiple Component Layers:**
+
+The editor correctly handles writable computed passed through `defineModel` in nested components:
+
+```vue
+<!-- Parent Component -->
+<script setup lang="ts">
+const rawData = ref({ title: 'Article' })
+
+// Writable computed with validation
+const data = computed({
+    get: () => rawData.value,
+    set: (value) => {
+        console.log('Data updated:', value)
+        // Add validation, transformations, etc.
+        rawData.value = value
+    }
+})
+</script>
+
+<template>
+    <!-- Works! Passes through DataEditorForm → YamlFormEditor -->
+    <DataEditorForm v-model="data" />
+</template>
 ```
 
 **Use Cases for Writable Computed:**
-- Validation before saving
-- Transform data on save (e.g., serialize dates)
-- Sync with external state management (Pinia, Vuex)
-- Trigger side effects on changes (API calls, logging)
-- Implement undo/redo functionality
+- ✅ Validation before saving
+- ✅ Transform data on save (e.g., serialize dates)
+- ✅ Sync with external state management (Pinia, Vuex)
+- ✅ Trigger side effects on changes (API calls, logging)
+- ✅ Implement undo/redo functionality
+- ✅ Complex editor integrations (TipTap, Monaco, etc.)
 
 **Example with Pinia:**
 ```typescript
@@ -1145,6 +1222,20 @@ const data = computed({
 })
 ```
 
+**Example with TipTap Editor Integration:**
+```typescript
+const editorInstance = defineModel('editorInstance', { required: true })
+const $ef = useEditorFrontmatter(editorInstance)
+
+const data = computed({
+    get: () => $ef.getFrontmatter().data || {},
+    set: (newValue) => {
+        // Updates editor content directly
+        $ef.setFrontmatterProperties({ ...newValue })
+    }
+})
+```
+
 ### Performance Considerations
 
 **Reactivity:**

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@type32/yaml-editor-form",
   "configKey": "yamlEditorForm",
-  "version": "0.1.6",
+  "version": "0.2.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/YamlFormEditor.d.vue.ts

@@ -26,9 +26,9 @@ type __VLS_ModelProps = {
     modelValue: YamlFormData;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_19: string, __VLS_20: any;
+declare var __VLS_20: string, __VLS_21: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {

package/dist/runtime/components/YamlFormEditor.vue

@@ -34,18 +34,20 @@ const addFieldOptions = computed(() => {
 
 <template>
 	<ClientOnly>
-		<div class="space-y-4">
-			<div class="space-y-3">
-				<YamlFormField
-					v-for="(value, key) in data"
-					:key="String(key)"
-					v-model="data[key]"
-					:field-key="String(key)"
-					:readonly="readonly"
-					:field-types="fieldTypes"
-					:size="size"
-					@remove="removeField(String(key))"
-					@update:field-key="(newKey) => {
+		<div class="space-y-3">
+			<YamlFormField
+				v-for="(value, key) in data"
+				:key="String(key)"
+				:model-value="data[key]"
+				:field-key="String(key)"
+				:readonly="readonly"
+				:field-types="fieldTypes"
+				:size="size"
+				@update:model-value="(newValue) => {
+  data = { ...data, [key]: newValue };
+}"
+				@remove="removeField(String(key))"
+				@update:field-key="(newKey) => {
   if (newKey !== key && data) {
     const { [key]: value, ...rest } = data;
     data = {
@@ -54,13 +56,12 @@ const addFieldOptions = computed(() => {
     };
   }
 }"
-				>
-					<!-- Forward all slots to YamlFormField for custom field components -->
-					<template v-for="(_, name) in $slots" #[name]="slotProps">
-						<slot :name="name" v-bind="slotProps" />
-					</template>
-				</YamlFormField>
-			</div>
+			>
+				<!-- Forward all slots to YamlFormField for custom field components -->
+				<template v-for="(_, name) in $slots" #[name]="slotProps">
+					<slot :name="name" v-bind="slotProps" />
+				</template>
+			</YamlFormField>
 
 			<UDropdownMenu
 				v-if="!readonly"

package/dist/runtime/components/YamlFormEditor.vue.d.ts

@@ -26,9 +26,9 @@ type __VLS_ModelProps = {
     modelValue: YamlFormData;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_19: string, __VLS_20: any;
+declare var __VLS_20: string, __VLS_21: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {

package/dist/runtime/components/YamlFormField.vue

@@ -164,20 +164,20 @@ function convertType(newType) {
 function addArrayItem(itemType) {
   if (!Array.isArray(modelValue.value)) return;
   if (itemType) {
-    modelValue.value.push(getDefaultValue(itemType));
+    modelValue.value = [...modelValue.value, getDefaultValue(itemType)];
     return;
   }
   if (modelValue.value.length === 0) {
-    modelValue.value.push({});
+    modelValue.value = [...modelValue.value, {}];
     return;
   }
   const firstItem = modelValue.value[0];
   const detectedType = detectFieldType(firstItem);
-  modelValue.value.push(getDefaultValue(detectedType.type));
+  modelValue.value = [...modelValue.value, getDefaultValue(detectedType.type)];
 }
 function removeArrayItem(index) {
   if (!Array.isArray(modelValue.value)) return;
-  modelValue.value.splice(index, 1);
+  modelValue.value = modelValue.value.filter((_, i) => i !== index);
 }
 function addArrayItemFromTemplate() {
   if (!Array.isArray(modelValue.value)) return;
@@ -199,9 +199,9 @@ function addArrayItemFromTemplate() {
       const detectedType = detectFieldType(value);
       newObject[key] = getDefaultValue(detectedType.type);
     }
-    modelValue.value.push(newObject);
+    modelValue.value = [...modelValue.value, newObject];
   } else {
-    modelValue.value.push({});
+    modelValue.value = [...modelValue.value, {}];
   }
 }
 const hasObjectTemplate = computed(() => {
@@ -214,12 +214,16 @@ function addObjectField(fieldType = "string") {
   if (typeof modelValue.value !== "object" || Array.isArray(modelValue.value) || !modelValue.value || isDateObject(modelValue.value)) return;
   const obj = modelValue.value;
   const newKey = `field_${Object.keys(obj).length + 1}`;
-  obj[newKey] = getDefaultValue(fieldType);
+  modelValue.value = {
+    ...obj,
+    [newKey]: getDefaultValue(fieldType)
+  };
 }
 function removeObjectField(key) {
   if (typeof modelValue.value !== "object" || Array.isArray(modelValue.value) || !modelValue.value || isDateObject(modelValue.value)) return;
   const obj = modelValue.value;
-  delete obj[key];
+  const { [key]: removed, ...rest } = obj;
+  modelValue.value = rest;
 }
 const isOpen = ref(true);
 const isArrayItem = computed(() => {
@@ -344,7 +348,11 @@ const addArrayItemOptions = computed(() => {
                                 :depth="depth + 1"
                                 :field-types="fieldTypes"
                                 @update:model-value="(val) => {
-  if (Array.isArray(modelValue)) modelValue[index] = val;
+  if (Array.isArray(modelValue)) {
+    const newArray = [...modelValue];
+    newArray[index] = val;
+    modelValue = newArray;
+  }
 }"
                                 @remove="removeArrayItem(index)"
 								:size="size"
@@ -404,15 +412,20 @@ const addArrayItemOptions = computed(() => {
 							:size="size"
                             @update:model-value="(val) => {
   if (typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue)) {
-    modelValue[key] = val;
+    modelValue = {
+      ...modelValue,
+      [key]: val
+    };
   }
 }"
                             @remove="removeObjectField(String(key))"
                             @update:field-key="(newKey) => {
   if (newKey !== key && typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue) && value !== void 0) {
-    const obj = modelValue;
-    obj[newKey] = value;
-    delete obj[key];
+    const { [key]: oldValue, ...rest } = modelValue;
+    modelValue = {
+      ...rest,
+      [newKey]: oldValue
+    };
   }
 }"
                         />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@type32/yaml-editor-form",
-	"version": "0.1.6",
+	"version": "0.2.2",
 	"description": "YAML Editor Form Component for Nuxt.",
 	"repository": "https://github.com/CTRL-Neo-Studios/yaml-editor-form",
 	"license": "MIT",