Feat: Strapi 5 support (#19)

* Feat: Strapi 5 support

* Update readme

Author: cp-sumi-k

.babelrc

@@ -1 +1,3 @@
-node_modules
+node_modules
+dist
+.yarn

.gitignore

@@ -2,6 +2,8 @@
 
 <h1><strong>Tagsinput plugin for strapi with suggestions</strong></h1>
 
+<h3>🚀🚀🚀<strong>Use version <a href="https://github.com/canopas/strapi-plugin-tagsinput/releases/tag/2.0.0">2.0.0</a> for Strapi 5 support<strong>🚀🚀🚀<h3>
+
 This plugin is used to add tagsinput in your strapi admin panel.
 Read more about it at [tagsinput guidence](https://blog.canopas.com/the-simple-guidance-how-to-add-tagsinput-customfield-plugin-in-strapi-b5d2b5af7c3b).
 

README.md

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react",
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*.js", "./src/**/*.jsx"]
+}

admin/jsconfig.json

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import pluginId from "../pluginId";
+
+/**
+ * @type {import('react').FC<{ setPlugin: (id: string) => void }>}
+ */
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+export { Initializer };

admin/src/components/Initializer.jsx

@@ -2,17 +2,10 @@ import TagsInput from "react-tagsinput";
 import Autosuggest from "react-autosuggest";
 import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-import "../styles/global.css";
 import axios from "axios";
-
-import {
-  Flex,
-  Field,
-  FieldHint,
-  FieldError,
-  FieldLabel,
-} from "@strapi/design-system";
+import { Flex, Field } from "@strapi/design-system";
 import { useIntl } from "react-intl";
+import { css } from "./styles/global.ts";
 
 const Tags = ({
   attribute,
@@ -35,6 +28,8 @@ const Tags = ({
     }
   });
   const [suggestions, setSuggestions] = useState([]);
+  const apiUrl = attribute?.options ? attribute.options["apiUrl"] : "";
+  const attrName = apiUrl.slice(apiUrl.lastIndexOf('=') + 1);
   let inputEle = useRef(null);
 
   useEffect(() => {
@@ -71,11 +66,11 @@ const Tags = ({
   };
 
   const getSuggestions = async () => {
-    if (!attribute.options || !attribute.options["apiUrl"]) {
+    if (!apiUrl) {
       return [];
     }
     try {
-      const res = await axios.get(attribute.options["apiUrl"]);
+      const res = await axios.get(apiUrl);
       setSuggestions(res.data);
     } catch (err) {
       console.log(err);
@@ -100,19 +95,21 @@ const Tags = ({
     }
 
     if (inputLength > 0) {
-      s = s.map((state) => {
-        const suggestionName = state.attributes
-          ? state.attributes.name.toLowerCase()
-          : state.name.toLowerCase();
-
-        if (suggestionName.slice(0, inputLength) === inputValue) {
-          return {
-            id: state.id,
-            name: suggestionName,
-          };
-        }
-        return null
-      }).filter((ele) => ele !== null || ele != undefined);
+      s = s
+        .map((state) => {
+          const suggestionName = state.attributes
+            ? state.attributes[attrName].toLowerCase()
+            : state[attrName].toLowerCase();
+
+          if (suggestionName.slice(0, inputLength) === inputValue) {
+            return {
+              id: state.id,
+              name: suggestionName,
+            };
+          }
+          return null;
+        })
+        .filter((ele) => ele !== null || ele != undefined);
     }
 
     return (
@@ -133,36 +130,42 @@ const Tags = ({
   };
 
   return (
-    <Field
-      name={name}
-      id={name}
-      // GenericInput calls formatMessage and returns a string for the error
-      error={error}
-      hint={description && formatMessage(description)}
-      required={required}
-    >
-      <Flex
-        direction="column"
-        alignItems="stretch"
-        gap={1}
-        style={{
-          position: `relative`,
-        }}
-        ref={inputEle}
+    <>
+      <style>{css}</style>
+      <Field.Root
+        name={name}
+        id={name}
+        // GenericInput calls formatMessage and returns a string for the error
+        error={error}
+        hint={description && formatMessage({ id: description })}
+        required={required}
       >
-        <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
-        <Flex direction="column">
-          <TagsInput
-            value={tags}
-            onChange={handleTagsChange}
-            onlyUnique={true}
-            renderInput={autocompleteRenderInput}
-          />
+        <Flex
+          direction="column"
+          alignItems="stretch"
+          gap={1}
+          style={{
+            position: `relative`,
+          }}
+          ref={inputEle}
+        >
+          <Field.Label action={labelAction}>
+            {intlLabel && formatMessage({ id: intlLabel })}
+          </Field.Label>
+          <Flex direction="column">
+            <TagsInput
+              classList={["test"]}
+              value={tags}
+              onChange={handleTagsChange}
+              onlyUnique={true}
+              renderInput={autocompleteRenderInput}
+            />
+          </Flex>
+          <Field.Hint />
+          <Field.Error />
         </Flex>
-        <FieldHint />
-        <FieldError />
-      </Flex>
-    </Field>
+      </Field.Root>
+    </>
   );
 };
 

admin/src/components/Initializer/index.js

@@ -1,3 +1,4 @@
+export const css = `
 :root {
   --primary: rgb(151, 54, 232);
   --secondary: rgb(255, 255, 255);
@@ -84,7 +85,16 @@
   padding: 10px 20px;
 }
 
+.react-autosuggest__suggestion > span {
+  font-size: 13px;
+  font-weight: 400;
+}
+
 .react-autosuggest__suggestion--highlighted,
 .react-autosuggest__suggestion--focused {
   background-color: #ccc;
 }
+`
+
+
+

admin/src/components/Input/index.js admin/src/components/Input.jsxadmin/src/components/Input/index.js renamed to admin/src/components/Input.jsx

@@ -0,0 +1,15 @@
+import { Page } from '@strapi/strapi/admin';
+import { Routes, Route } from 'react-router-dom';
+
+import { HomePage } from './HomePage';
+
+const App = () => {
+  return (
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path="*" element={<Page.Error />} />
+    </Routes>
+  );
+};
+
+export { App };