@tunghtml/strapi-plugin-composite-field 1.2.3 → 1.2.4

package/README.md

@@ -11,10 +11,10 @@ A Strapi v5 plugin that creates composite display fields by combining multiple t
 - 🔗 **Multiple Fields**: Combine any text/string/enum fields
 - 🔄 **Generate Button**: Click icon to generate composite value
 - ⚡ **Auto-Generate**: Automatically update when source fields change
-- 🔒 **Editable Control**: Make field read-only or editable
 - 📝 **Easy Config**: Textarea input (one field per line)
 - ⚙️ **Custom Separator**: Configure separator (default: " - ")
-- ✨ **Auto Spacing**: Automatically adds spaces around separator
+- ✨ **Smart Spacing**: Automatically handles spacing for separators
+- 🎯 **Manual Edit Protection**: Preserves manual edits until source fields change
 - 🎨 **Clean UI**: Matches Strapi admin design system
 
 ## Installation
@@ -28,7 +28,7 @@ Then add the plugin to your `config/plugins.js`:
 ```javascript
 module.exports = {
   // ...
-  "composite-field": {
+  'composite-field': {
     enabled: true,
   },
 };
@@ -128,18 +128,28 @@ Result: Tung Le
 
 | Option         | Type     | Default | Description                                      |
 | -------------- | -------- | ------- | ------------------------------------------------ |
-| `editable`     | checkbox | `true`  | Allow manual editing of the composite field      |
 | `autoGenerate` | checkbox | `false` | Automatically generate when source fields change |
 
 ## Advanced Usage
 
 ### Auto-Generate Mode
 
-Enable **Auto-generate** in Advanced settings to automatically update the composite field when any source field changes. This is useful for fields that should always reflect the current values.
+Enable **Auto-generate** in Advanced settings to automatically update the composite field when any source field changes.
 
-### Read-Only Mode
+**Smart Manual Edit Protection**: When auto-generate is enabled, the plugin intelligently handles manual edits:
 
-Disable **Editable** in Advanced settings to make the composite field read-only. Users can only generate values using the button or auto-generate, but cannot manually edit the field.
+- If you manually edit the composite field, it will preserve your changes
+- When any source field changes, auto-generation resumes with the new values
+- This prevents accidental overwrites while maintaining automatic updates
+
+### Space-Only Separator
+
+When using a space `" "` as the separator, the plugin automatically uses a single space without adding extra spaces around it. For other separators like `-` or `|`, spaces are added around them for better readability.
+
+Examples:
+
+- Separator: `" "` → Result: `John Doe`
+- Separator: `-` → Result: `John - Doe`
 
 ### Enum Field Support
 
@@ -163,6 +173,28 @@ Result: Panel Discussion - John Doe
 - Relation fields are not supported (use simple fields only)
 - Auto-generate uses a 300ms debounce to avoid excessive updates
 
+## Changelog
+
+### v1.2.4 (2026-02-05)
+
+**🎯 Improvements:**
+
+- **Smart Manual Edit Protection**: Auto-generate now respects manual edits and only resumes when source fields change
+- **Improved Separator Logic**: Space-only separators now use single space without extra padding
+- **Removed Editable Option**: Simplified configuration by removing the unnecessary editable toggle
+
+**🐛 Bug Fixes:**
+
+- Fixed auto-generate overwriting manual edits immediately
+- Fixed excessive spacing when using space as separator
+- Improved change detection for more reliable auto-generation
+
+**🔧 Technical:**
+
+- Added `isManuallyEdited` state tracking
+- Enhanced `watchedValues` change detection
+- Optimized re-render performance
+
 ## Requirements
 
 - Strapi v5.0.0 or higher

package/admin/src/components/CompositeInput.jsx

@@ -25,18 +25,21 @@ const CompositeInput = (props) => {
   const { values } = form;
 
   const [localValue, setLocalValue] = React.useState(value || '');
+  const [isManuallyEdited, setIsManuallyEdited] = React.useState(false);
 
   const lastGeneratedVal = React.useRef(value || '');
+  const lastWatchedValues = React.useRef([]);
 
   React.useEffect(() => {
     const validValue = value || '';
     setLocalValue(validValue);
     lastGeneratedVal.current = validValue;
+    // Reset manual edit flag when value changes from outside (e.g., form reset)
+    setIsManuallyEdited(false);
   }, [value]);
 
   const fieldsConfig = attribute?.options?.fields || '';
   const separator = attribute?.options?.separator || ' - ';
-  const editable = attribute?.options?.editable !== false;
   const autoGenerate = attribute?.options?.autoGenerate === true;
 
   // Parse fields
@@ -54,6 +57,8 @@ const CompositeInput = (props) => {
     const newValue = e.target.value;
     setLocalValue(newValue);
     lastGeneratedVal.current = newValue;
+    // Mark as manually edited when user types
+    setIsManuallyEdited(true);
     if (onChange) {
       onChange({ target: { name, value: newValue, type: 'text' } });
     }
@@ -131,13 +136,22 @@ const CompositeInput = (props) => {
       }
     });
 
-    // Ensure separator has spaces around it
+    // Handle separator logic - if separator is just a space, don't add extra spaces
     const cleanSeparator = separator.trim();
-    const result = generatedParts.join(` ${cleanSeparator} `).trim();
+    let result;
+    if (cleanSeparator === '') {
+      // If separator is just spaces, use single space
+      result = generatedParts.join(' ').trim();
+    } else {
+      // For other separators, add spaces around them
+      result = generatedParts.join(` ${cleanSeparator} `).trim();
+    }
 
     if (result !== lastGeneratedVal.current) {
       setLocalValue(result);
       lastGeneratedVal.current = result;
+      // Reset manual edit flag when auto-generating
+      setIsManuallyEdited(false);
 
       if (onChange) {
         onChange({ target: { name, value: result, type: 'text' } });
@@ -161,12 +175,29 @@ const CompositeInput = (props) => {
   React.useEffect(() => {
     if (!autoGenerate || fields.length === 0) return;
 
-    const timeoutId = setTimeout(() => {
-      handleGenerate();
-    }, 300); // Debounce
-
-    return () => clearTimeout(timeoutId);
-  }, [autoGenerate, fields, handleGenerate, watchedValues, name]);
+    // Check if watched values actually changed
+    const currentWatchedValues = JSON.stringify(watchedValues);
+    const lastWatchedValuesStr = JSON.stringify(lastWatchedValues.current);
+
+    // Only auto-generate if:
+    // 1. Values actually changed
+    // 2. User hasn't manually edited the field
+    if (currentWatchedValues !== lastWatchedValuesStr) {
+      lastWatchedValues.current = watchedValues;
+
+      if (!isManuallyEdited) {
+        const timeoutId = setTimeout(() => {
+          handleGenerate();
+        }, 300); // Debounce
+
+        return () => clearTimeout(timeoutId);
+      } else {
+        // If manually edited, reset the flag when source fields change
+        // This allows auto-generation to resume after source field changes
+        setIsManuallyEdited(false);
+      }
+    }
+  }, [autoGenerate, fields, handleGenerate, watchedValues, isManuallyEdited]);
 
   if (!props) {
     return null;
@@ -192,7 +223,7 @@ const CompositeInput = (props) => {
             type="text"
             value={localValue}
             onChange={handleChange}
-            disabled={disabled || !editable}
+            disabled={disabled}
             placeholder={
               autoGenerate
                 ? 'Auto-generated from fields'
@@ -242,7 +273,6 @@ const CompositeInput = (props) => {
             <Typography variant="pi" textColor="neutral600">
               Combines: {fields.join(', ')}
               {autoGenerate && ' (auto-generated)'}
-              {!editable && ' (read-only)'}
             </Typography>
           </Field.Hint>
         )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunghtml/strapi-plugin-composite-field",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A Strapi v5 plugin to create composite display fields by combining multiple text, string, and enum fields with auto-generate support",
   "keywords": [
     "strapi",

package/strapi-admin.js

@@ -1,83 +1,83 @@
-import React from "react";
+import React from 'react';
 
 const CompositeIcon = () =>
   React.createElement(
-    "div",
+    'div',
     {
       style: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "32px",
-        height: "24px",
-        borderRadius: "4px",
-        border: "1px solid #b8e1ff",
-        background: "#eafbff",
-        fontSize: "14px",
-        fontWeight: "600",
-        color: "#0c75af",
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '32px',
+        height: '24px',
+        borderRadius: '4px',
+        border: '1px solid #b8e1ff',
+        background: '#eafbff',
+        fontSize: '14px',
+        fontWeight: '600',
+        color: '#0c75af',
       },
     },
-    "Aa"
+    'Aa'
   );
 
 export default {
   register(app) {
     app.customFields.register({
-      name: "composite",
-      pluginId: "composite-field",
-      type: "string",
+      name: 'composite',
+      pluginId: 'composite-field',
+      type: 'string',
       icon: CompositeIcon,
       intlLabel: {
-        id: "composite-field.label",
-        defaultMessage: "Composite",
+        id: 'composite-field.label',
+        defaultMessage: 'Composite',
       },
       intlDescription: {
-        id: "composite-field.description",
-        defaultMessage: "Combine multiple fields into one display value",
+        id: 'composite-field.description',
+        defaultMessage: 'Combine multiple fields into one display value',
       },
       components: {
-        Input: async () => import("./admin/src/components/CompositeInput"),
+        Input: async () => import('./admin/src/components/CompositeInput'),
       },
       options: {
         base: [
           {
             sectionTitle: {
-              id: "composite-field.section.title",
-              defaultMessage: "Settings",
+              id: 'composite-field.section.title',
+              defaultMessage: 'Settings',
             },
             items: [
               {
-                name: "options.fields",
-                type: "textarea",
+                name: 'options.fields',
+                type: 'textarea',
                 intlLabel: {
-                  id: "composite-field.fields.label",
-                  defaultMessage: "Fields to combine",
+                  id: 'composite-field.fields.label',
+                  defaultMessage: 'Fields to combine',
                 },
                 description: {
-                  id: "composite-field.fields.description",
+                  id: 'composite-field.fields.description',
                   defaultMessage:
-                    "Enter field names (one per line). Only text/string fields are supported.",
+                    'Enter field names (one per line). Only text/string fields are supported.',
                 },
                 placeholder: {
-                  id: "composite-field.fields.placeholder",
-                  defaultMessage: "salutation\nfirstName\nlastName\nemail",
+                  id: 'composite-field.fields.placeholder',
+                  defaultMessage: 'salutation\nfirstName\nlastName\nemail',
                 },
               },
               {
-                name: "options.separator",
-                type: "text",
+                name: 'options.separator',
+                type: 'text',
                 intlLabel: {
-                  id: "composite-field.separator.label",
-                  defaultMessage: "Separator",
+                  id: 'composite-field.separator.label',
+                  defaultMessage: 'Separator',
                 },
                 description: {
-                  id: "composite-field.separator.description",
+                  id: 'composite-field.separator.description',
                   defaultMessage: 'Separator between fields (default: " - ")',
                 },
                 placeholder: {
-                  id: "composite-field.separator.placeholder",
-                  defaultMessage: " - ",
+                  id: 'composite-field.separator.placeholder',
+                  defaultMessage: ' - ',
                 },
               },
             ],
@@ -86,34 +86,21 @@ export default {
         advanced: [
           {
             sectionTitle: {
-              id: "composite-field.advanced.title",
-              defaultMessage: "Settings",
+              id: 'composite-field.advanced.title',
+              defaultMessage: 'Settings',
             },
             items: [
               {
-                name: "options.editable",
-                type: "checkbox",
+                name: 'options.autoGenerate',
+                type: 'checkbox',
                 intlLabel: {
-                  id: "composite-field.editable.label",
-                  defaultMessage: "Editable",
+                  id: 'composite-field.autoGenerate.label',
+                  defaultMessage: 'Auto-generate',
                 },
                 description: {
-                  id: "composite-field.editable.description",
+                  id: 'composite-field.autoGenerate.description',
                   defaultMessage:
-                    "Allow manual editing of the composite field value",
-                },
-              },
-              {
-                name: "options.autoGenerate",
-                type: "checkbox",
-                intlLabel: {
-                  id: "composite-field.autoGenerate.label",
-                  defaultMessage: "Auto-generate",
-                },
-                description: {
-                  id: "composite-field.autoGenerate.description",
-                  defaultMessage:
-                    "Automatically generate value when source fields change",
+                    'Automatically generate value when source fields change',
                 },
               },
             ],