@edifice.io/react 2.4.0-develop-pedago.20251029104249 → 2.4.0-develop-pedago.20251104152516

package/dist/components/TextArea/TextArea.d.ts

@@ -25,6 +25,10 @@ export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<'textare
      * Optional class for styling purpose
      */
     className?: string;
+    /**
+     * Show count of characters
+     */
+    showCounter?: boolean;
 }
 /**
  * TextArea Form Component

package/dist/components/TextArea/TextArea.js

@@ -1,5 +1,5 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
 import clsx from "clsx";
 import { useFormControl } from "../Form/FormContext.js";
 const TextArea = /* @__PURE__ */ forwardRef(({
@@ -8,14 +8,16 @@ const TextArea = /* @__PURE__ */ forwardRef(({
   size = "md",
   height = "md",
   className,
+  showCounter,
   ...restProps
 }, ref) => {
+  var _a;
   const {
     id,
     isRequired,
     isReadOnly,
     status
-  } = useFormControl(), classes = clsx({
+  } = useFormControl(), [currentLength, setCurrentLength] = useState(((_a = restProps.value) == null ? void 0 : _a.toString().length) || 0), classes = clsx({
     "form-control": !isReadOnly,
     "form-control-lg": size === "lg",
     "form-control-sm": size === "sm",
@@ -27,7 +29,20 @@ const TextArea = /* @__PURE__ */ forwardRef(({
     "form-control-plaintext": isReadOnly,
     "no-validation-icon": noValidationIcon
   }, className);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, onChange: (e) => {
+      var _a2;
+      setCurrentLength(e.target.value.length), (_a2 = restProps.onChange) == null || _a2.call(restProps, e);
+    }, ...restProps }),
+    showCounter && !status && /* @__PURE__ */ jsxs("span", { className: clsx("caption text-end float-end mt-n32 py-2 px-12 ", {
+      "text-danger": currentLength === restProps.maxLength,
+      "text-gray-700": currentLength !== restProps.maxLength
+    }), children: [
+      currentLength,
+      " / ",
+      restProps.maxLength
+    ] })
+  ] });
 });
 export {
   TextArea as default

package/dist/modules/editor/components/Renderer/MediaRenderer.js

@@ -66,7 +66,7 @@ const MediaRenderer = (props) => {
         case "iframe":
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "iframe-node-view" }),
-            /* @__PURE__ */ jsx("iframe", { ref: resizableMedia, src: node.attrs.src, width, height, allowFullScreen: node.attrs.allowfullscreen ?? !0, style: node.attrs.style })
+            /* @__PURE__ */ jsx("iframe", { ref: resizableMedia, src: node.attrs.src, width, height, allowFullScreen: node.attrs.allowfullscreen ?? !0 })
           ] });
         default:
           return null;

package/dist/modules/modals/ResourceModal/ResourceModal.js

@@ -4,7 +4,6 @@ import { odeServices } from "@edifice.io/client";
 import { createPortal } from "react-dom";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TextareaCounter } from "../../../components/TextArea/TextareaCounter.js";
 import ImagePicker from "../../multimedia/ImagePicker/ImagePicker.js";
 import { useThumb } from "./hooks/useThumb.js";
 import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
@@ -67,7 +66,9 @@ const DEFAULT_INPUT_MAX_LENGTH = 60, DEFAULT_TEXTAREA_MAX_LENGTH = 400, Resource
   } = useThumb({
     isUpdating,
     selectedResource: isUpdating ? resource : void 0
-  }), watchedDescription = watch("description"), onSubmit = async function(formData) {
+  });
+  watch("description");
+  const onSubmit = async function(formData) {
     var _a2, _b2;
     try {
       const data = {
@@ -132,15 +133,14 @@ const DEFAULT_INPUT_MAX_LENGTH = 60, DEFAULT_TEXTAREA_MAX_LENGTH = 400, Resource
                   value: /[^ ]/,
                   message: "invalid title"
                 }
-              }), placeholder: ((_e = customT.placeholder) == null ? void 0 : _e.title) ?? t("explorer.resource.editModal.title.placeholder"), size: "md", "aria-required": !0, maxLength: inputMaxLength })
+              }), placeholder: ((_e = customT.placeholder) == null ? void 0 : _e.title) ?? t("explorer.resource.editModal.title.placeholder"), size: "md", "aria-required": !0, maxLength: inputMaxLength, showCounter: !0 })
             ] }),
             /* @__PURE__ */ jsxs(FormControl, { id: "description", isOptional: !0, children: [
               /* @__PURE__ */ jsx(Label, { children: customT.description ?? t("description") }),
               /* @__PURE__ */ jsx(TextArea, { defaultValue: (resource == null ? void 0 : resource.description) || "", ...register("description", {
                 required: !1,
                 maxLength: textareaMaxLength
-              }), placeholder: ((_f = customT.placeholder) == null ? void 0 : _f.description) ?? t("explorer.resource.editModal.description.placeholder"), size: "md", maxLength: textareaMaxLength }),
-              watchedDescription && /* @__PURE__ */ jsx(TextareaCounter, { content: watchedDescription, maxLength: textareaMaxLength })
+              }), placeholder: ((_f = customT.placeholder) == null ? void 0 : _f.description) ?? t("explorer.resource.editModal.description.placeholder"), size: "md", maxLength: textareaMaxLength, showCounter: !0 })
             ] })
           ] })
         ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.4.0-develop-pedago.20251029104249",
+  "version": "2.4.0-develop-pedago.20251104152516",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -131,9 +131,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.4.0-develop-pedago.20251029104249",
-    "@edifice.io/tiptap-extensions": "2.4.0-develop-pedago.20251029104249",
-    "@edifice.io/utilities": "2.4.0-develop-pedago.20251029104249"
+    "@edifice.io/tiptap-extensions": "2.4.0-develop-pedago.20251104152516",
+    "@edifice.io/bootstrap": "2.4.0-develop-pedago.20251104152516",
+    "@edifice.io/utilities": "2.4.0-develop-pedago.20251104152516"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -164,8 +164,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/config": "2.4.0-develop-pedago.20251029104249",
-    "@edifice.io/client": "2.4.0-develop-pedago.20251029104249"
+    "@edifice.io/client": "2.4.0-develop-pedago.20251104152516",
+    "@edifice.io/config": "2.4.0-develop-pedago.20251104152516"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",

package/dist/components/TextArea/TextareaCounter.js

@@ -1,8 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const TextareaCounter = ({
-  content,
-  maxLength
-}) => /* @__PURE__ */ jsx("p", { className: "small text-gray-700 p-2 text-end", children: content ? `${content.length} / ${maxLength}` : "" });
-export {
-  TextareaCounter
-};