@edifice.io/react 2.1.1-develop-integration.20250210202453 → 2.1.1-develop-integration.20250213121025

package/dist/editor.js

@@ -25,6 +25,7 @@ import { useResizeMedia } from "./modules/editor/hooks/useResizeMedia.js";
 import { useSpeechRecognition } from "./modules/editor/hooks/useSpeechRecognition.js";
 import { useSpeechSynthetisis } from "./modules/editor/hooks/useSpeechSynthetisis.js";
 import { useTipTapEditor } from "./modules/editor/hooks/useTipTapEditor.js";
+import { useCantooEditor } from "./modules/editor/hooks/useCantooEditor.js";
 export {
   default5 as AttachmentNodeView,
   default10 as AttachmentRenderer,
@@ -43,6 +44,7 @@ export {
   default13 as TableToolbar,
   default8 as VideoNodeView,
   useActionOptions,
+  useCantooEditor,
   useCommentEditor,
   useEditor,
   useEditorContext,

package/dist/modules/editor/components/Editor/CantooModal.d.ts

@@ -1,7 +1,2 @@
-interface ModalProps {
-    isOpen: boolean;
-    onSuccess?: (formulaEditor: string) => void;
-    onCancel?: () => void;
-}
-declare const CantooModal: ({ isOpen, onCancel }: ModalProps) => import('react').ReactPortal;
+declare const CantooModal: () => import("react/jsx-runtime").JSX.Element;
 export default CantooModal;

package/dist/modules/editor/components/Editor/CantooModal.js

@@ -1,27 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import { useTranslation } from "react-i18next";
-import Modal from "../../../../components/Modal/Modal.js";
-import Button from "../../../../components/Button/Button.js";
+import { jsx } from "react/jsx-runtime";
 import { useEditorContext } from "../../hooks/useEditorContext.js";
-const CantooModal = ({
-  isOpen,
-  onCancel
-}) => {
+const CantooModal = () => {
   const {
-    t
-  } = useTranslation(), handleOnClose = () => {
-    onCancel == null || onCancel();
-  }, {
     editor
   } = useEditorContext(), Cantoo = window.Cantoo, editorHTML = editor == null ? void 0 : editor.getHTML(), cantooHTML = Cantoo == null ? void 0 : Cantoo.formatText(editorHTML);
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "CantooModal", isOpen, onModalClose: handleOnClose, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleOnClose, children: t("tiptap.cantoo.formatText") }),
-    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: {
-      __html: cantooHTML
-    } }) }),
-    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("tiptap.cantoo.close") }) })
-  ] }), document.getElementById("portal"));
+  return /* @__PURE__ */ jsx("div", { className: "card p-24 mt-8", children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: {
+    __html: cantooHTML
+  } }) });
 };
 export {
   CantooModal as default

package/dist/modules/editor/components/Editor/Editor.js

@@ -78,7 +78,7 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
       editable && /* @__PURE__ */ jsx(MediaLibrary, { appCode, visibility, multiple: !0, ref: mediaLibraryModalRef, ...mediaLibraryModalHandlers }),
       editable && mathsModalHandlers.isOpen && /* @__PURE__ */ jsx(MathsModal, { ...mathsModalHandlers }),
       editable && (imageModal == null ? void 0 : imageModal.isOpen) && (imageModal == null ? void 0 : imageModal.currentImage) && /* @__PURE__ */ jsx(ImageEditor, { altText: imageModal == null ? void 0 : imageModal.currentImage.alt, legend: imageModal == null ? void 0 : imageModal.currentImage.title, image: imageModal == null ? void 0 : imageModal.currentImage.src, isOpen: imageModal.isOpen, onCancel: imageModal.handleCancel, onSave: imageModal.handleSave, onError: console.error }),
-      editable && cantooModalHandlers.isOpen && /* @__PURE__ */ jsx(CantooModal, { ...cantooModalHandlers })
+      editable && cantooModalHandlers.isOpen && /* @__PURE__ */ jsx(CantooModal, {})
     ] })
   ] });
 });

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.Cantoo.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconCantoo from "../../../icons/components/IconCantoo.js";
+import SvgIconMicOff from "../../../icons/components/IconMicOff.js";
+import SvgIconMic from "../../../icons/components/IconMic.js";
+import SvgIconTextToSpeechOff from "../../../icons/components/IconTextToSpeechOff.js";
+import SvgIconTextToSpeech from "../../../icons/components/IconTextToSpeech.js";
+import SvgIconWand from "../../../icons/components/IconWand.js";
+import { useCantooEditor } from "../../hooks/useCantooEditor.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+const EditorToolbarCantoo = ({
+  triggerProps,
+  openModal
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    editor
+  } = useEditorContext(), {
+    speech2textIsActive,
+    text2speechIsActive,
+    toggleSpeech2Text,
+    toggleText2Speech,
+    formatText
+  } = useCantooEditor(editor), cantooOptions = [{
+    id: "speech2text",
+    label: t("tiptap.toolbar.cantoo.speech2text"),
+    className: speech2textIsActive ? "fw-bold" : "",
+    icon: speech2textIsActive ? /* @__PURE__ */ jsx(SvgIconMicOff, {}) : /* @__PURE__ */ jsx(SvgIconMic, {}),
+    action: () => toggleSpeech2Text()
+  }, {
+    id: "text2speech",
+    label: t("tiptap.toolbar.cantoo.text2speech"),
+    className: text2speechIsActive ? "fw-bold" : "",
+    icon: text2speechIsActive ? /* @__PURE__ */ jsx(SvgIconTextToSpeechOff, {}) : /* @__PURE__ */ jsx(SvgIconTextToSpeech, {}),
+    action: () => toggleText2Speech()
+  }, {
+    id: "formatText",
+    label: t("tiptap.toolbar.cantoo.formatText"),
+    icon: /* @__PURE__ */ jsx(SvgIconWand, {}),
+    action: () => formatText(openModal)
+  }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.cantoo.choice"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconCantoo, {}), className: speech2textIsActive || text2speechIsActive ? "is-selected" : "", "aria-label": t("tiptap.toolbar.cantoo.choice") }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: cantooOptions.map((option) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Dropdown.Item, { onClick: option.action, icon: option.icon, children: /* @__PURE__ */ jsx("span", { className: option.className, children: option.label }) }) }, option.id)) })
+  ] });
+};
+export {
+  EditorToolbarCantoo
+};

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.d.ts

@@ -5,6 +5,8 @@ interface Props {
     mediaLibraryRef: RefObject<MediaLibraryRef>;
     /** API to open/close a Math modal. */
     toggleMathsModal: () => void;
+    /** API to open/close a Cantoo modal. */
+    toggleCantooModal: () => void;
 }
-export declare const EditorToolbar: ({ mediaLibraryRef, toggleMathsModal }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorToolbar: ({ mediaLibraryRef, toggleMathsModal, toggleCantooModal, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.js

@@ -25,20 +25,25 @@ import { EditorToolbarPlusMenu } from "./EditorToolbar.PlusMenu.js";
 import { EditorToolbarTextColor } from "./EditorToolbar.TextColor.js";
 import { EditorToolbarTextSize } from "./EditorToolbar.TextSize.js";
 import { EditorToolbarTypography } from "./EditorToolbar.Typography.js";
-import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { EditorToolbarCantoo } from "./EditorToolbar.Cantoo.js";
+import { useCantooEditor } from "../../hooks/useCantooEditor.js";
 import { useActionOptions } from "../../hooks/useActionOptions.js";
 import { useSpeechRecognition } from "../../hooks/useSpeechRecognition.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
 import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
 const EditorToolbar = ({
   mediaLibraryRef,
-  toggleMathsModal
+  toggleMathsModal,
+  toggleCantooModal
 }) => {
   const {
     t
   } = useTranslation(), {
     id,
     editor
-  } = useEditorContext(), [plusOptions, listOptions, alignmentOptions] = useActionOptions(editor, toggleMathsModal, mediaLibraryRef), {
+  } = useEditorContext(), {
+    isAvailable: canUseCantoo
+  } = useCantooEditor(editor), [plusOptions, listOptions, alignmentOptions] = useActionOptions(editor, toggleMathsModal, mediaLibraryRef), {
     isAvailable: canRecognizeSpeech,
     isActive: speechRecognition,
     toggle: toggleSpeechRecognition
@@ -165,6 +170,16 @@ const EditorToolbar = ({
         name: "speechtotext",
         tooltip: t("tiptap.toolbar.stt")
       },
+      //------------- CANTOO ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarCantoo, { triggerProps, openModal: toggleCantooModal })
+        },
+        name: "cantoo",
+        visibility: canUseCantoo ? "show" : "hide",
+        tooltip: t("tiptap.toolbar.cantoo.choice")
+      },
       //------------------------------------//
       {
         type: "divider",

package/dist/modules/editor/hooks/index.d.ts

@@ -10,3 +10,4 @@ export * from './useResizeMedia';
 export * from './useSpeechRecognition';
 export * from './useSpeechSynthetisis';
 export * from './useTipTapEditor';
+export * from './useCantooEditor';

package/dist/modules/editor/hooks/useCantooEditor.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import useHasWorkflow from "../../../hooks/useHasWorkflow/useHasWorkflow.js";
+const useCantooEditor = (editor) => {
+  const isAvailable = useHasWorkflow("org.entcore.portal.controllers.PortalController|optionalFeatureCantoo"), [speech2textIsActive, setSpeech2textActive] = useState(!1), [text2speechIsActive, setText2speechActive] = useState(!1), Cantoo = window.Cantoo;
+  return {
+    isAvailable,
+    speech2textIsActive,
+    text2speechIsActive,
+    toggleSpeech2Text: async () => {
+      if (speech2textIsActive) {
+        setSpeech2textActive(!1);
+        try {
+          await Cantoo.speech2text.stop();
+        } catch (e) {
+          console.warn("Error while trying to stop Cantoo (speech2text)", e);
+        }
+      } else
+        try {
+          if (setSpeech2textActive(!0), await Cantoo.speech2text.isAvailableOnDevice())
+            if (await Cantoo.speech2text.requestPermission())
+              await Cantoo.speech2text.start((data) => {
+                editor == null || editor.chain().focus().insertContent(data.join(" ")).run();
+              }, window.navigator.language);
+            else
+              throw new Error("Permission denied");
+          else
+            throw new Error("Cantoo not available");
+        } catch (e) {
+          console.warn("Error while trying to use Cantoo (speech2text)", e), setSpeech2textActive(!1);
+        }
+    },
+    toggleText2Speech: () => {
+      if (text2speechIsActive)
+        setText2speechActive(!1), window.speechSynthesis.cancel();
+      else
+        try {
+          setText2speechActive(!0), Cantoo.text2speech.readText(editor == null ? void 0 : editor.getText()), Cantoo.text2speech.utter.onend = () => {
+            setText2speechActive(!1);
+          };
+        } catch (e) {
+          console.warn("Error while trying to use Cantoo (text2speech)", e), setText2speechActive(!1);
+        }
+    },
+    formatText: (openModal) => {
+      openModal();
+    }
+  };
+};
+export {
+  useCantooEditor
+};

package/dist/modules/icons/components/IconCantoo.js

@@ -3,9 +3,20 @@ const SvgIconCantoo = ({
   title,
   titleId,
   ...props
-}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 16 16", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
+}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 88 104", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
   title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
-  /* @__PURE__ */ jsx("path", { fill: "#000", d: "M8 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M15 4v2h-4.455l.445 10H8.988l-.222-5H7.234l-.222 5H5.01l.445-10H1V4z" })
+  /* @__PURE__ */ jsx("ellipse", { cx: 44.305, cy: 15.281, fill: "url(#icon-cantoo_svg__a)", rx: 14.472, ry: 14.367, transform: "rotate(-.145 44.305 15.281)" }),
+  /* @__PURE__ */ jsx("path", { fill: "url(#icon-cantoo_svg__b)", fillRule: "evenodd", d: "m44.529 39.653-28.126-8.41c-6.42-1.785-13.121 1.8-14.968 8.008C-.414 45.46 3.294 51.94 9.713 53.724l17.54 5.245-16.845 28.892c-2.73 5.401.023 11.938 6.147 14.601 6.125 2.662 13.301.442 16.03-4.96l11.88-20.374 11.974 20.3c2.757 5.387 9.945 7.57 16.055 4.877 6.111-2.694 8.83-9.244 6.074-14.632l-16.953-28.74 17.478-5.384c6.41-1.818 10.084-8.316 8.206-14.514-1.879-6.199-8.598-9.75-15.009-7.932z", clipRule: "evenodd" }),
+  /* @__PURE__ */ jsxs("defs", { children: [
+    /* @__PURE__ */ jsxs("linearGradient", { id: "icon-cantoo_svg__a", x1: 28.13, x2: 60.619, y1: -6.867, y2: 27.927, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx("stop", { stopColor: "#0B4EFC" }),
+      /* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#30B3E8" })
+    ] }),
+    /* @__PURE__ */ jsxs("linearGradient", { id: "icon-cantoo_svg__b", x1: -4.227, x2: 76.299, y1: 11.105, y2: 112.656, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx("stop", { stopColor: "#0B4EFC" }),
+      /* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#30B3E8" })
+    ] })
+  ] })
 ] });
 export {
   SvgIconCantoo as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.1.1-develop-integration.20250210202453",
+  "version": "2.1.1-develop-integration.20250213121025",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.1.1-develop-integration.20250210202453",
-    "@edifice.io/tiptap-extensions": "2.1.1-develop-integration.20250210202453",
-    "@edifice.io/utilities": "2.1.1-develop-integration.20250210202453"
+    "@edifice.io/bootstrap": "2.1.1-develop-integration.20250213121025",
+    "@edifice.io/tiptap-extensions": "2.1.1-develop-integration.20250213121025",
+    "@edifice.io/utilities": "2.1.1-develop-integration.20250213121025"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -129,6 +129,9 @@
     "@svgr/cli": "^8.1.0",
     "@tanstack/query-core": "5.62.7",
     "@tanstack/react-query": "5.62.7",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.9.1",
     "@types/pako": "^2.0.3",
     "@types/react": "^18.2.33",
@@ -148,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.1.1-develop-integration.20250210202453",
-    "@edifice.io/config": "2.1.1-develop-integration.20250210202453"
+    "@edifice.io/client": "2.1.1-develop-integration.20250213121025",
+    "@edifice.io/config": "2.1.1-develop-integration.20250213121025"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",