eleven-solutions-common-website-unique-web 9.0.29 → 9.0.30

package/dist/components/admin/TemplateForm.js

@@ -8,11 +8,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState, useRef, useMemo } from "react";
 import { addTemplateApi } from "../api/template";
+import JoditEditor from "jodit-react";
 const TemplateForm = () => {
     const [name, setName] = useState("");
     const [content, setContent] = useState("");
+    const [placeholder, setPlaceholder] = React.useState("Default placeholder");
+    const editor = useRef(null);
+    const config = useMemo(() => ({
+        readonly: false, // Make the editor editable
+        placeholder: placeholder || "Start typing...", // Custom placeholder
+    }), [placeholder]);
     const validateForm = () => {
         if (!name || !content) {
             alert("Please fill in all required fields: Name and Content.");
@@ -41,6 +48,6 @@ const TemplateForm = () => {
         window.history.pushState({}, "", "/admin/template");
         window.dispatchEvent(new PopStateEvent("popstate"));
     };
-    return (_jsx("div", { className: "max-w-4xl p-6 mx-auto dark:bg-gray-800", children: _jsx("div", { children: _jsxs("form", { children: [_jsx("h1", { className: "text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4", children: "Add Template" }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { required: true, type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring", placeholder: "Enter Name" })] }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Content ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { required: true, type: "text", value: content, onChange: (e) => setContent(e.target.value), className: "w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring", placeholder: "Enter Content" })] }), _jsxs("div", { className: "flex space-x-4 mt-6 justify-end", children: [_jsx("button", { type: "submit", onClick: handleAddClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Add" }), _jsx("button", { type: "button", onClick: handleCancelClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Cancel" })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-4xl p-6 mx-auto dark:bg-gray-800", children: _jsx("div", { children: _jsxs("form", { children: [_jsx("h1", { className: "text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4", children: "Add Template" }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { required: true, type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring", placeholder: "Enter Name" })] }), _jsxs("div", { className: "mb-6 w-full", children: [_jsxs("label", { className: "text-gray-900 dark:text-gray-200 font-semibold", children: ["Content ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { required: true, type: "text", value: content, onChange: (e) => setContent(e.target.value), className: "w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring", placeholder: "Enter Content" })] }), _jsx(JoditEditor, { ref: editor, value: content, config: config, onBlur: (newContent) => setContent(newContent), onChange: (newContent) => { } }), _jsxs("div", { className: "flex space-x-4 mt-6 justify-end", children: [_jsx("button", { type: "submit", onClick: handleAddClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Add" }), _jsx("button", { type: "button", onClick: handleCancelClick, className: "px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600", children: "Cancel" })] })] }) }) }));
 };
 export default TemplateForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleven-solutions-common-website-unique-web",
-  "version": "9.0.29",
+  "version": "9.0.30",
   "main": "./dist/index.js",
   "scripts": {
     "build": "tsc",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@react-oauth/google": "^0.12.1",
     "@tabler/icons-react": "^3.21.0",
+    "jodit-react": "^4.1.2",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
     "universal-cookie": "^7.2.2"

package/src/components/admin/TemplateForm.tsx

@@ -1,9 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useMemo } from "react";
 import { addTemplateApi } from "../api/template";
+import JoditEditor from "jodit-react";
 
 const TemplateForm = () => {
   const [name, setName] = useState("");
   const [content, setContent] = useState("");
+  const [placeholder, setPlaceholder] = React.useState("Default placeholder");
+
+  const editor = useRef(null);
+  const config: Record<string, any> = useMemo(
+    () => ({
+      readonly: false, // Make the editor editable
+      placeholder: placeholder || "Start typing...", // Custom placeholder
+    }),
+    [placeholder]
+  );
 
   const validateForm = () => {
     if (!name || !content) {
@@ -69,6 +80,13 @@ const TemplateForm = () => {
               placeholder="Enter Content"
             />
           </div>
+          <JoditEditor
+            ref={editor}
+            value={content}
+            config={config}
+            onBlur={(newContent) => setContent(newContent)} // Update content on blur
+            onChange={(newContent) => {}}
+          />
 
           <div className="flex space-x-4 mt-6 justify-end">
             <button

package/src/components/api/template.ts

@@ -22,7 +22,6 @@ export const addTemplateApi = async (name: string, content: string) => {
     return response;
   } catch (error) {
     console.error(error);
-
     throw error;
   }
 };