strapi-plugin-tags-custom-field 1.0.0 → 1.0.2

package/README.md

@@ -1,103 +1,59 @@
-# strapi-plugin-tags-custom-field
+# strapi-plugin-tags-custom-field
 
-Strapi 5 plugin that adds a `tags` custom field to edit a list of tags (`array of strings`) and store it as a native JSON array.
+NPM package: https://www.npmjs.com/package/strapi-plugin-tags-custom-field
 
-## What this plugin does
+Custom field plugin for Strapi 5 to manage tags as a native JSON array (`string[]`).
 
-- Registers the `tags` custom field on the server (`type: json`).
-- Registers the custom field in the admin panel with a tags input component.
-- Saves tags as JSON array values (e.g. `["news","featured","tech"]`).
-- Uses Strapi Design System components for native admin look and feel.
-- Supports keyboard and clipboard workflows for faster data entry.
-
-## Requirements
-
-- Node.js 18+ (recommended: Node.js 20)
-- Strapi 5
-
-## Local plugin development
-
-```bash
-npm install
-npm run build
-npm run test:ts
-npm run verify
-```
-
-## Install from npm (recommended)
+## Installation
 
 ```bash
 npm install strapi-plugin-tags-custom-field
 ```
 
-Then restart your Strapi server and add the field in Content-Type Builder:
+Restart your Strapi server after installation.
 
-- Add a new field.
-- Open the Custom fields category.
-- Select `Tags`.
-- Configure the custom field options if needed (see below).
+## Usage in Strapi
 
-## Link locally during development
+1. Open Content-Type Builder.
+2. Add a new field.
+3. Open **Custom fields**.
+4. Select **Tags**.
+5. Configure field options if needed.
 
-1. In the plugin project:
+## Field options
 
-```bash
-npm install
-npm run watch:link
-```
+- `maxTags` (default: `20`): maximum number of tags.
+- `maxTagLength` (default: `40`): maximum characters per tag.
+- `allowDuplicates` (default: `false`): allow repeated tags.
+- `separator` (default: `,`): character used to split typed/pasted values.
+- `normalizeCase` (default: `none`): `none`, `lowercase`, or `UPPERCASE`.
 
-2. In the Strapi project (in another terminal):
+## Input behavior
 
-```bash
-npx yalc add --link strapi-plugin-tags-custom-field
-npm install
-npm run develop
-```
+- `Enter` adds the current tag.
+- The configured separator also adds the current tag.
+- Paste supports multiple tags (newline or configured separator).
 
-3. In the Strapi Content-Type Builder, add the `Tags` custom field.
+## Data format
 
-## Input behavior and UX
+The value is stored as native JSON array and returned as array by Strapi APIs.
 
-- Press `Enter` to add the current tag.
-- Press the configured separator (default: `,`) to add the current tag.
-- Paste multiple tags at once (separated by newline or the configured separator).
-- Press `Backspace` on an empty input to remove the last tag.
-- Each draft tag has a configurable character limit with a live counter in the UI.
+Example:
 
-## Custom field options (Content-Type Builder)
-
-- `maxTags` (number, default: `20`): maximum number of tags allowed.
-- `maxTagLength` (number, default: `40`): maximum number of characters per tag.
-- `allowDuplicates` (boolean, default: `false`): allows repeated tags.
-- `separator` (text, default: `,`): character used for splitting input/paste.
-- `normalizeCase` (select, default: `none`): `none`, `lowercase`, or `UPPERCASE`.
-
-## Database value format
-
-The value is stored as a native JSON array. Examples:
-
-- No tags: `[]`
-- With tags: `["javascript","strapi","cms"]`
-
-## Main structure
+```json
+{
+  "tags": ["javascript", "strapi", "cms"]
+}
+```
 
-- `server/src/register.ts`: backend custom field registration.
-- `admin/src/index.ts`: admin custom field registration.
-- `admin/src/components/TagsInput.tsx`: visual input with add/remove tag behavior.
+## Compatibility
 
-## Release checklist
+- Strapi: `v5`
+- Node.js: `>=18`
 
-1. Update version in `package.json`.
-2. Run:
+## Local development (plugin repo)
 
 ```bash
-npm ci
+npm install
 npm run release:check
-```
-
-3. Publish to npm:
-
-```bash
-npm publish
-```
-
+```

package/dist/admin/{TagsInput-BGUydL2t.js → TagsInput-BfjqO_MO.js}

@@ -96,10 +96,12 @@ const hasSplitCharacters = (value, separator) => [separator, "\n", "\r"].some(
 const TagsInput = React__namespace.forwardRef(
   ({
     attribute,
+    description,
     disabled = false,
     error,
     hint,
     intlLabel,
+    label,
     name,
     onChange,
     placeholder,
@@ -123,11 +125,22 @@ const TagsInput = React__namespace.forwardRef(
     );
     const allowDuplicates = parseBoolean(options.allowDuplicates, false);
     const normalizeCase = normalizeCaseValue(options.normalizeCase);
-    const label = intlLabel?.id || intlLabel?.defaultMessage ? formatMessage({
-      id: intlLabel?.id ?? `${name}.label`,
-      defaultMessage: intlLabel?.defaultMessage ?? "Tags"
-    }) : "Tags";
-    const hintMessage = hint ?? formatMessage({
+    const formatIntlMessage = React__namespace.useCallback(
+      (message) => {
+        if (!message?.id && !message?.defaultMessage) {
+          return void 0;
+        }
+        return formatMessage({
+          id: message.id ?? `${name}.label`,
+          defaultMessage: message.defaultMessage ?? "Tags"
+        });
+      },
+      [formatMessage, name]
+    );
+    const labelText = typeof label === "string" ? label : formatIntlMessage(label) ?? formatIntlMessage(intlLabel);
+    const labelMessage = labelText && labelText.trim().length > 0 ? labelText.trim() : "Tags";
+    const descriptionText = typeof description === "string" ? description : formatIntlMessage(description);
+    const hintMessage = descriptionText && descriptionText.trim().length > 0 ? descriptionText.trim() : hint ?? formatMessage({
       id: "tags-input.hint",
       defaultMessage: "Press Enter or type the separator to add tags. Paste multiple tags at once."
     });
@@ -149,58 +162,53 @@ const TagsInput = React__namespace.forwardRef(
         if (rawTags.length === 0) {
           return false;
         }
+        const nextTags = [...tags];
         let didChange = false;
-        setTags((currentTags) => {
-          const nextTags = [...currentTags];
-          for (const rawTag of rawTags) {
-            if (nextTags.length >= maxTags) {
-              setLocalError(
-                formatMessage(
-                  {
-                    id: "tags-input.error.max-tags",
-                    defaultMessage: "You can only add up to {maxTags} tags."
-                  },
-                  { maxTags }
-                )
-              );
-              break;
-            }
-            if (rawTag.length > maxTagLength) {
-              setLocalError(
-                formatMessage(
-                  {
-                    id: "tags-input.error.max-length",
-                    defaultMessage: "Each tag must be at most {maxLength} characters."
-                  },
-                  { maxLength: maxTagLength }
-                )
-              );
-              continue;
-            }
-            const duplicateIndex = nextTags.findIndex(
-              (tag) => tag.toLowerCase() === rawTag.toLowerCase()
+        let nextError;
+        for (const rawTag of rawTags) {
+          if (nextTags.length >= maxTags) {
+            nextError = formatMessage(
+              {
+                id: "tags-input.error.max-tags",
+                defaultMessage: "You can only add up to {maxTags} tags."
+              },
+              { maxTags }
             );
-            if (duplicateIndex !== -1 && !allowDuplicates) {
-              setLocalError(
-                formatMessage({
-                  id: "tags-input.error.duplicate",
-                  defaultMessage: "Duplicate tags are not allowed."
-                })
-              );
-              continue;
-            }
-            nextTags.push(rawTag);
-            didChange = true;
+            break;
           }
-          if (didChange) {
-            setLocalError(void 0);
-            emitChange(nextTags);
+          if (rawTag.length > maxTagLength) {
+            nextError = formatMessage(
+              {
+                id: "tags-input.error.max-length",
+                defaultMessage: "Each tag must be at most {maxLength} characters."
+              },
+              { maxLength: maxTagLength }
+            );
+            continue;
           }
-          return didChange ? nextTags : currentTags;
-        });
+          const duplicateIndex = nextTags.findIndex(
+            (tag) => tag.toLowerCase() === rawTag.toLowerCase()
+          );
+          if (duplicateIndex !== -1 && !allowDuplicates) {
+            nextError = formatMessage({
+              id: "tags-input.error.duplicate",
+              defaultMessage: "Duplicate tags are not allowed."
+            });
+            continue;
+          }
+          nextTags.push(rawTag);
+          didChange = true;
+        }
+        if (didChange) {
+          setTags(nextTags);
+          setLocalError(void 0);
+          emitChange(nextTags);
+        } else if (nextError) {
+          setLocalError(nextError);
+        }
         return didChange;
       },
-      [allowDuplicates, emitChange, formatMessage, maxTagLength, maxTags]
+      [allowDuplicates, emitChange, formatMessage, maxTagLength, maxTags, tags]
     );
     const commitDraft = React__namespace.useCallback(() => {
       const parsedTags = parseRawTags(draft, separator, normalizeCase);
@@ -219,26 +227,11 @@ const TagsInput = React__namespace.forwardRef(
       },
       [emitChange]
     );
-    const removeLastTag = React__namespace.useCallback(() => {
-      setTags((currentTags) => {
-        if (currentTags.length === 0) {
-          return currentTags;
-        }
-        const nextTags = currentTags.slice(0, currentTags.length - 1);
-        emitChange(nextTags);
-        setLocalError(void 0);
-        return nextTags;
-      });
-    }, [emitChange]);
     const onKeyDown = (event) => {
       if (event.key === "Enter" || event.key === separator) {
         event.preventDefault();
         commitDraft();
       }
-      if (event.key === "Backspace" && draft.length === 0 && !disabled) {
-        event.preventDefault();
-        removeLastTag();
-      }
     };
     const onPaste = (event) => {
       const pastedText = event.clipboardData.getData("text");
@@ -247,7 +240,10 @@ const TagsInput = React__namespace.forwardRef(
       }
       event.preventDefault();
       const parsedTags = parseRawTags(pastedText, separator, normalizeCase);
-      addTags(parsedTags);
+      const added = addTags(parsedTags);
+      if (added) {
+        setDraft("");
+      }
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Field.Root,
@@ -258,7 +254,7 @@ const TagsInput = React__namespace.forwardRef(
         hint: hintMessage,
         error: shownError,
         children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: labelMessage }),
           tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.Box,
             {

package/dist/admin/{TagsInput-CCehyU5Y.mjs → TagsInput-CzXiRuEv.mjs}

@@ -76,10 +76,12 @@ const hasSplitCharacters = (value, separator) => [separator, "\n", "\r"].some(
 const TagsInput = React.forwardRef(
   ({
     attribute,
+    description,
     disabled = false,
     error,
     hint,
     intlLabel,
+    label,
     name,
     onChange,
     placeholder,
@@ -103,11 +105,22 @@ const TagsInput = React.forwardRef(
     );
     const allowDuplicates = parseBoolean(options.allowDuplicates, false);
     const normalizeCase = normalizeCaseValue(options.normalizeCase);
-    const label = intlLabel?.id || intlLabel?.defaultMessage ? formatMessage({
-      id: intlLabel?.id ?? `${name}.label`,
-      defaultMessage: intlLabel?.defaultMessage ?? "Tags"
-    }) : "Tags";
-    const hintMessage = hint ?? formatMessage({
+    const formatIntlMessage = React.useCallback(
+      (message) => {
+        if (!message?.id && !message?.defaultMessage) {
+          return void 0;
+        }
+        return formatMessage({
+          id: message.id ?? `${name}.label`,
+          defaultMessage: message.defaultMessage ?? "Tags"
+        });
+      },
+      [formatMessage, name]
+    );
+    const labelText = typeof label === "string" ? label : formatIntlMessage(label) ?? formatIntlMessage(intlLabel);
+    const labelMessage = labelText && labelText.trim().length > 0 ? labelText.trim() : "Tags";
+    const descriptionText = typeof description === "string" ? description : formatIntlMessage(description);
+    const hintMessage = descriptionText && descriptionText.trim().length > 0 ? descriptionText.trim() : hint ?? formatMessage({
       id: "tags-input.hint",
       defaultMessage: "Press Enter or type the separator to add tags. Paste multiple tags at once."
     });
@@ -129,58 +142,53 @@ const TagsInput = React.forwardRef(
         if (rawTags.length === 0) {
           return false;
         }
+        const nextTags = [...tags];
         let didChange = false;
-        setTags((currentTags) => {
-          const nextTags = [...currentTags];
-          for (const rawTag of rawTags) {
-            if (nextTags.length >= maxTags) {
-              setLocalError(
-                formatMessage(
-                  {
-                    id: "tags-input.error.max-tags",
-                    defaultMessage: "You can only add up to {maxTags} tags."
-                  },
-                  { maxTags }
-                )
-              );
-              break;
-            }
-            if (rawTag.length > maxTagLength) {
-              setLocalError(
-                formatMessage(
-                  {
-                    id: "tags-input.error.max-length",
-                    defaultMessage: "Each tag must be at most {maxLength} characters."
-                  },
-                  { maxLength: maxTagLength }
-                )
-              );
-              continue;
-            }
-            const duplicateIndex = nextTags.findIndex(
-              (tag) => tag.toLowerCase() === rawTag.toLowerCase()
+        let nextError;
+        for (const rawTag of rawTags) {
+          if (nextTags.length >= maxTags) {
+            nextError = formatMessage(
+              {
+                id: "tags-input.error.max-tags",
+                defaultMessage: "You can only add up to {maxTags} tags."
+              },
+              { maxTags }
             );
-            if (duplicateIndex !== -1 && !allowDuplicates) {
-              setLocalError(
-                formatMessage({
-                  id: "tags-input.error.duplicate",
-                  defaultMessage: "Duplicate tags are not allowed."
-                })
-              );
-              continue;
-            }
-            nextTags.push(rawTag);
-            didChange = true;
+            break;
           }
-          if (didChange) {
-            setLocalError(void 0);
-            emitChange(nextTags);
+          if (rawTag.length > maxTagLength) {
+            nextError = formatMessage(
+              {
+                id: "tags-input.error.max-length",
+                defaultMessage: "Each tag must be at most {maxLength} characters."
+              },
+              { maxLength: maxTagLength }
+            );
+            continue;
           }
-          return didChange ? nextTags : currentTags;
-        });
+          const duplicateIndex = nextTags.findIndex(
+            (tag) => tag.toLowerCase() === rawTag.toLowerCase()
+          );
+          if (duplicateIndex !== -1 && !allowDuplicates) {
+            nextError = formatMessage({
+              id: "tags-input.error.duplicate",
+              defaultMessage: "Duplicate tags are not allowed."
+            });
+            continue;
+          }
+          nextTags.push(rawTag);
+          didChange = true;
+        }
+        if (didChange) {
+          setTags(nextTags);
+          setLocalError(void 0);
+          emitChange(nextTags);
+        } else if (nextError) {
+          setLocalError(nextError);
+        }
         return didChange;
       },
-      [allowDuplicates, emitChange, formatMessage, maxTagLength, maxTags]
+      [allowDuplicates, emitChange, formatMessage, maxTagLength, maxTags, tags]
     );
     const commitDraft = React.useCallback(() => {
       const parsedTags = parseRawTags(draft, separator, normalizeCase);
@@ -199,26 +207,11 @@ const TagsInput = React.forwardRef(
       },
       [emitChange]
     );
-    const removeLastTag = React.useCallback(() => {
-      setTags((currentTags) => {
-        if (currentTags.length === 0) {
-          return currentTags;
-        }
-        const nextTags = currentTags.slice(0, currentTags.length - 1);
-        emitChange(nextTags);
-        setLocalError(void 0);
-        return nextTags;
-      });
-    }, [emitChange]);
     const onKeyDown = (event) => {
       if (event.key === "Enter" || event.key === separator) {
         event.preventDefault();
         commitDraft();
       }
-      if (event.key === "Backspace" && draft.length === 0 && !disabled) {
-        event.preventDefault();
-        removeLastTag();
-      }
     };
     const onPaste = (event) => {
       const pastedText = event.clipboardData.getData("text");
@@ -227,7 +220,10 @@ const TagsInput = React.forwardRef(
       }
       event.preventDefault();
       const parsedTags = parseRawTags(pastedText, separator, normalizeCase);
-      addTags(parsedTags);
+      const added = addTags(parsedTags);
+      if (added) {
+        setDraft("");
+      }
     };
     return /* @__PURE__ */ jsx(
       Field.Root,
@@ -238,7 +234,7 @@ const TagsInput = React.forwardRef(
         hint: hintMessage,
         error: shownError,
         children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: label }),
+          /* @__PURE__ */ jsx(Field.Label, { children: labelMessage }),
           tags.length > 0 ? /* @__PURE__ */ jsx(
             Box,
             {

package/dist/admin/index.js

@@ -66,7 +66,7 @@ const index = {
       },
       icon: PluginIcon,
       components: {
-        Input: async () => Promise.resolve().then(() => require("./TagsInput-BGUydL2t.js")).then((module2) => ({
+        Input: async () => Promise.resolve().then(() => require("./TagsInput-BfjqO_MO.js")).then((module2) => ({
           default: module2.TagsInput
         }))
       },

package/dist/admin/index.mjs

@@ -64,7 +64,7 @@ const index = {
       },
       icon: PluginIcon,
       components: {
-        Input: async () => import("./TagsInput-CCehyU5Y.mjs").then((module) => ({
+        Input: async () => import("./TagsInput-CzXiRuEv.mjs").then((module) => ({
           default: module.TagsInput
         }))
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-tags-custom-field",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Custom field plugin for Strapi 5 to manage tags (array of strings) stored as JSON array.",
   "keywords": [
     "strapi",