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

package/README.md

@@ -33,7 +33,6 @@ Restart your Strapi server after installation.
 - `Enter` adds the current tag.
 - The configured separator also adds the current tag.
 - Paste supports multiple tags (newline or configured separator).
-- `Backspace` on empty input removes the last tag.
 
 ## Data format
 

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.1",
+  "version": "1.0.2",
   "description": "Custom field plugin for Strapi 5 to manage tags (array of strings) stored as JSON array.",
   "keywords": [
     "strapi",