strapi-plugin-tags-custom-field 1.0.0

package/dist/admin/TagsInput-CCehyU5Y.mjs

@@ -0,0 +1,336 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field, Flex, Box, Tag, TextInput, Typography } from "@strapi/design-system";
+import { Cross } from "@strapi/icons";
+import { useIntl } from "react-intl";
+const DEFAULT_SEPARATOR = ",";
+const DEFAULT_MAX_TAGS = 20;
+const DEFAULT_MAX_TAG_LENGTH = 40;
+const parseTagsValue = (value) => {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item).trim()).filter((item) => item.length > 0);
+  }
+  if (typeof value !== "string") {
+    return [];
+  }
+  const normalized = value.trim();
+  if (!normalized) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(normalized);
+    if (Array.isArray(parsed)) {
+      return parsed.map((item) => String(item).trim()).filter((item) => item.length > 0);
+    }
+  } catch {
+  }
+  return [normalized];
+};
+const serializeTagsValue = (tags) => tags;
+const normalizeCaseValue = (rawValue) => {
+  if (rawValue === "lowercase" || rawValue === "uppercase") {
+    return rawValue;
+  }
+  return "none";
+};
+const normalizeTag = (value, normalizeCase) => {
+  const cleanedValue = value.trim();
+  if (!cleanedValue) {
+    return "";
+  }
+  if (normalizeCase === "lowercase") {
+    return cleanedValue.toLowerCase();
+  }
+  if (normalizeCase === "uppercase") {
+    return cleanedValue.toUpperCase();
+  }
+  return cleanedValue;
+};
+const parseBoolean = (value, defaultValue = false) => {
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "string") {
+    return value.toLowerCase() === "true";
+  }
+  return defaultValue;
+};
+const parsePositiveInt = (value, fallbackValue) => {
+  const parsedValue = Number(value);
+  if (Number.isFinite(parsedValue) && parsedValue > 0) {
+    return Math.floor(parsedValue);
+  }
+  return fallbackValue;
+};
+const getSplitRegex = (separator) => {
+  const characters = Array.from(/* @__PURE__ */ new Set([separator, "\n", "\r"])).filter(
+    (character) => character.length > 0
+  );
+  const escapedCharacters = characters.map((character) => character.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("");
+  return new RegExp(`[${escapedCharacters}]+`);
+};
+const parseRawTags = (rawValue, separator, normalizeCase) => rawValue.split(getSplitRegex(separator)).map((tag) => normalizeTag(tag, normalizeCase)).filter((tag) => tag.length > 0);
+const hasSplitCharacters = (value, separator) => [separator, "\n", "\r"].some(
+  (character) => character.length > 0 && value.includes(character)
+);
+const TagsInput = React.forwardRef(
+  ({
+    attribute,
+    disabled = false,
+    error,
+    hint,
+    intlLabel,
+    name,
+    onChange,
+    placeholder,
+    required = false,
+    value
+  }, ref) => {
+    const { formatMessage } = useIntl();
+    const [tags, setTags] = React.useState(() => parseTagsValue(value));
+    const [draft, setDraft] = React.useState("");
+    const [localError, setLocalError] = React.useState();
+    React.useEffect(() => {
+      setTags(parseTagsValue(value));
+    }, [value]);
+    const fieldType = attribute?.type ?? "json";
+    const options = attribute?.options ?? {};
+    const separator = typeof options.separator === "string" && options.separator.trim().length > 0 ? options.separator.trim().charAt(0) : DEFAULT_SEPARATOR;
+    const maxTags = parsePositiveInt(options.maxTags, DEFAULT_MAX_TAGS);
+    const maxTagLength = parsePositiveInt(
+      options.maxTagLength,
+      DEFAULT_MAX_TAG_LENGTH
+    );
+    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({
+      id: "tags-input.hint",
+      defaultMessage: "Press Enter or type the separator to add tags. Paste multiple tags at once."
+    });
+    const shownError = error || localError;
+    const emitChange = React.useCallback(
+      (nextTags) => {
+        onChange({
+          target: {
+            name,
+            type: fieldType,
+            value: serializeTagsValue(nextTags)
+          }
+        });
+      },
+      [fieldType, name, onChange]
+    );
+    const addTags = React.useCallback(
+      (rawTags) => {
+        if (rawTags.length === 0) {
+          return false;
+        }
+        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()
+            );
+            if (duplicateIndex !== -1 && !allowDuplicates) {
+              setLocalError(
+                formatMessage({
+                  id: "tags-input.error.duplicate",
+                  defaultMessage: "Duplicate tags are not allowed."
+                })
+              );
+              continue;
+            }
+            nextTags.push(rawTag);
+            didChange = true;
+          }
+          if (didChange) {
+            setLocalError(void 0);
+            emitChange(nextTags);
+          }
+          return didChange ? nextTags : currentTags;
+        });
+        return didChange;
+      },
+      [allowDuplicates, emitChange, formatMessage, maxTagLength, maxTags]
+    );
+    const commitDraft = React.useCallback(() => {
+      const parsedTags = parseRawTags(draft, separator, normalizeCase);
+      const added = addTags(parsedTags);
+      if (added) {
+        setDraft("");
+      }
+    }, [addTags, draft, normalizeCase, separator]);
+    const removeTag = React.useCallback(
+      (index) => {
+        setTags((currentTags) => {
+          const nextTags = currentTags.filter((_, currentIndex) => currentIndex !== index);
+          emitChange(nextTags);
+          return nextTags;
+        });
+      },
+      [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");
+      if (!pastedText || !hasSplitCharacters(pastedText, separator)) {
+        return;
+      }
+      event.preventDefault();
+      const parsedTags = parseRawTags(pastedText, separator, normalizeCase);
+      addTags(parsedTags);
+    };
+    return /* @__PURE__ */ jsx(
+      Field.Root,
+      {
+        id: name,
+        name,
+        required,
+        hint: hintMessage,
+        error: shownError,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: label }),
+          tags.length > 0 ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              borderColor: "neutral150",
+              borderStyle: "solid",
+              borderWidth: "1px",
+              borderRadius: "4px",
+              padding: 2,
+              background: "neutral0",
+              children: /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 2, children: tags.map((tag, index) => /* @__PURE__ */ jsx(
+                Tag,
+                {
+                  icon: /* @__PURE__ */ jsx(Cross, {}),
+                  disabled,
+                  onClick: !disabled ? () => removeTag(index) : void 0,
+                  label: `Remove ${tag}`,
+                  children: tag
+                },
+                `${tag}-${index}`
+              )) })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              id: name,
+              ref,
+              disabled,
+              required: required && tags.length === 0,
+              value: draft,
+              onChange: (event) => {
+                const nextDraft = event.currentTarget.value;
+                if (nextDraft.length <= maxTagLength) {
+                  setDraft(nextDraft);
+                  if (localError) {
+                    setLocalError(void 0);
+                  }
+                } else {
+                  setLocalError(
+                    formatMessage(
+                      {
+                        id: "tags-input.error.max-length",
+                        defaultMessage: "Each tag must be at most {maxLength} characters."
+                      },
+                      { maxLength: maxTagLength }
+                    )
+                  );
+                }
+              },
+              onBlur: commitDraft,
+              onKeyDown,
+              onPaste,
+              placeholder: placeholder ?? formatMessage(
+                {
+                  id: "tags-input.placeholder",
+                  defaultMessage: "Type a tag and press Enter or {separator} to add it"
+                },
+                { separator }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 2, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage(
+              {
+                id: "tags-input.counter.tags",
+                defaultMessage: "{count}/{maxTags} tags"
+              },
+              { count: tags.length, maxTags }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                textColor: draft.length >= maxTagLength ? "danger600" : "neutral600",
+                children: formatMessage(
+                  {
+                    id: "tags-input.counter.characters",
+                    defaultMessage: "{count}/{maxLength} characters"
+                  },
+                  { count: draft.length, maxLength: maxTagLength }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Field.Hint, {}),
+          /* @__PURE__ */ jsx(Field.Error, {})
+        ] })
+      }
+    );
+  }
+);
+TagsInput.displayName = "TagsInput";
+export {
+  TagsInput
+};

package/dist/admin/en-BhiXf-Vq.mjs

@@ -0,0 +1,23 @@
+const en = {
+  "plugin.name": "Tags Input",
+  "field.tags.label": "Tags",
+  "field.tags.description": "Store tags as a JSON array",
+  "field.tags.options.behavior.section": "Tag behavior",
+  "field.tags.options.maxTags.label": "Maximum tags",
+  "field.tags.options.maxTags.description": "Maximum number of tags allowed",
+  "field.tags.options.maxTagLength.label": "Maximum tag length",
+  "field.tags.options.maxTagLength.description": "Maximum number of characters per tag",
+  "field.tags.options.allowDuplicates.label": "Allow duplicates",
+  "field.tags.options.allowDuplicates.description": "Allow repeated tags in the same value",
+  "field.tags.options.input.section": "Input parsing",
+  "field.tags.options.separator.label": "Separator",
+  "field.tags.options.separator.description": "Character used to split typed and pasted values",
+  "field.tags.options.normalizeCase.label": "Normalize case",
+  "field.tags.options.normalizeCase.description": "Transform tag casing before saving",
+  "field.tags.options.normalizeCase.none": "None",
+  "field.tags.options.normalizeCase.lowercase": "lowercase",
+  "field.tags.options.normalizeCase.uppercase": "UPPERCASE"
+};
+export {
+  en as default
+};

package/dist/admin/en-C_FVtF2u.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "plugin.name": "Tags Input",
+  "field.tags.label": "Tags",
+  "field.tags.description": "Store tags as a JSON array",
+  "field.tags.options.behavior.section": "Tag behavior",
+  "field.tags.options.maxTags.label": "Maximum tags",
+  "field.tags.options.maxTags.description": "Maximum number of tags allowed",
+  "field.tags.options.maxTagLength.label": "Maximum tag length",
+  "field.tags.options.maxTagLength.description": "Maximum number of characters per tag",
+  "field.tags.options.allowDuplicates.label": "Allow duplicates",
+  "field.tags.options.allowDuplicates.description": "Allow repeated tags in the same value",
+  "field.tags.options.input.section": "Input parsing",
+  "field.tags.options.separator.label": "Separator",
+  "field.tags.options.separator.description": "Character used to split typed and pasted values",
+  "field.tags.options.normalizeCase.label": "Normalize case",
+  "field.tags.options.normalizeCase.description": "Transform tag casing before saving",
+  "field.tags.options.normalizeCase.none": "None",
+  "field.tags.options.normalizeCase.lowercase": "lowercase",
+  "field.tags.options.normalizeCase.uppercase": "UPPERCASE"
+};
+exports.default = en;

package/dist/admin/index.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "tags-input";
+const PluginIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M7 8h10M7 12h7M7 16h10",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Z",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }
+      )
+    ]
+  }
+);
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "tags",
+      pluginId: PLUGIN_ID,
+      type: "json",
+      intlLabel: {
+        id: getTranslation("field.tags.label"),
+        defaultMessage: "Tags"
+      },
+      intlDescription: {
+        id: getTranslation("field.tags.description"),
+        defaultMessage: "Edit tags as an array of strings"
+      },
+      icon: PluginIcon,
+      components: {
+        Input: async () => Promise.resolve().then(() => require("./TagsInput-BGUydL2t.js")).then((module2) => ({
+          default: module2.TagsInput
+        }))
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: {
+              id: getTranslation("field.tags.options.behavior.section"),
+              defaultMessage: "Tag behavior"
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: getTranslation("field.tags.options.maxTags.label"),
+                  defaultMessage: "Maximum tags"
+                },
+                description: {
+                  id: getTranslation("field.tags.options.maxTags.description"),
+                  defaultMessage: "Maximum number of tags allowed"
+                },
+                name: "options.maxTags",
+                type: "number",
+                value: 20
+              },
+              {
+                intlLabel: {
+                  id: getTranslation("field.tags.options.maxTagLength.label"),
+                  defaultMessage: "Maximum tag length"
+                },
+                description: {
+                  id: getTranslation(
+                    "field.tags.options.maxTagLength.description"
+                  ),
+                  defaultMessage: "Maximum number of characters per tag"
+                },
+                name: "options.maxTagLength",
+                type: "number",
+                value: 40
+              },
+              {
+                intlLabel: {
+                  id: getTranslation("field.tags.options.allowDuplicates.label"),
+                  defaultMessage: "Allow duplicates"
+                },
+                description: {
+                  id: getTranslation(
+                    "field.tags.options.allowDuplicates.description"
+                  ),
+                  defaultMessage: "Allow repeated tags in the same value"
+                },
+                name: "options.allowDuplicates",
+                type: "checkbox",
+                value: false
+              }
+            ]
+          },
+          {
+            sectionTitle: {
+              id: getTranslation("field.tags.options.input.section"),
+              defaultMessage: "Input parsing"
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: getTranslation("field.tags.options.separator.label"),
+                  defaultMessage: "Separator"
+                },
+                description: {
+                  id: getTranslation("field.tags.options.separator.description"),
+                  defaultMessage: "Character used to split typed and pasted values"
+                },
+                name: "options.separator",
+                type: "text",
+                value: ","
+              },
+              {
+                intlLabel: {
+                  id: getTranslation("field.tags.options.normalizeCase.label"),
+                  defaultMessage: "Normalize case"
+                },
+                description: {
+                  id: getTranslation(
+                    "field.tags.options.normalizeCase.description"
+                  ),
+                  defaultMessage: "Transform tag casing before saving"
+                },
+                name: "options.normalizeCase",
+                type: "select",
+                value: "none",
+                options: [
+                  {
+                    key: "none",
+                    value: "none",
+                    metadatas: {
+                      intlLabel: {
+                        id: getTranslation(
+                          "field.tags.options.normalizeCase.none"
+                        ),
+                        defaultMessage: "None"
+                      }
+                    }
+                  },
+                  {
+                    key: "lowercase",
+                    value: "lowercase",
+                    metadatas: {
+                      intlLabel: {
+                        id: getTranslation(
+                          "field.tags.options.normalizeCase.lowercase"
+                        ),
+                        defaultMessage: "lowercase"
+                      }
+                    }
+                  },
+                  {
+                    key: "uppercase",
+                    value: "uppercase",
+                    metadatas: {
+                      intlLabel: {
+                        id: getTranslation(
+                          "field.tags.options.normalizeCase.uppercase"
+                        ),
+                        defaultMessage: "UPPERCASE"
+                      }
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    });
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      name: "Tags Input"
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-C_FVtF2u.js")) }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+exports.default = index;