@edifice.io/react 2.2.5 → 2.2.6

package/dist/index.js

@@ -18,70 +18,71 @@ import { default as default18 } from "./components/Combobox/Combobox.js";
 import { default as default19 } from "./components/Dropdown/Dropdown.js";
 import { default as default20 } from "./components/Dropzone/Dropzone.js";
 import { default as default21 } from "./components/EmptyScreen/EmptyScreen.js";
-import { default as default22 } from "./components/Form/FormText.js";
-import { default as default23 } from "./components/Form/FormControl.js";
-import { default as default24 } from "./components/Heading/Heading.js";
-import { default as default25 } from "./components/Image/Image.js";
-import { default as default26 } from "./components/Input/Input.js";
-import { default as default27 } from "./components/Label/Label.js";
-import { default as default28 } from "./components/Loading/Loading.js";
-import { default as default29 } from "./components/LoadingScreen/LoadingScreen.js";
-import { default as default30 } from "./components/Logo/Logo.js";
-import { default as default31 } from "./components/Modal/Modal.js";
-import { default as default32 } from "./components/PreventPropagation/PreventPropagation.js";
-import { default as default33 } from "./components/Radio/Radio.js";
-import { default as default34 } from "./components/SearchBar/SearchBar.js";
-import { default as default35 } from "./components/Select/Select.js";
-import { default as default36 } from "./components/StackedGroup/StackedGroup.js";
-import { default as default37 } from "./components/Switch/Switch.js";
-import { default as default38 } from "./components/Table/components/Table.js";
-import { default as default39 } from "./components/TextArea/TextArea.js";
-import { default as default40 } from "./components/Tooltip/Tooltip.js";
+import { default as default22 } from "./components/Flex/Flex.js";
+import { default as default23 } from "./components/Form/FormText.js";
+import { default as default24 } from "./components/Form/FormControl.js";
+import { default as default25 } from "./components/Heading/Heading.js";
+import { default as default26 } from "./components/Image/Image.js";
+import { default as default27 } from "./components/Input/Input.js";
+import { default as default28 } from "./components/Label/Label.js";
+import { default as default29 } from "./components/Loading/Loading.js";
+import { default as default30 } from "./components/LoadingScreen/LoadingScreen.js";
+import { default as default31 } from "./components/Logo/Logo.js";
+import { default as default32 } from "./components/Modal/Modal.js";
+import { default as default33 } from "./components/PreventPropagation/PreventPropagation.js";
+import { default as default34 } from "./components/Radio/Radio.js";
+import { default as default35 } from "./components/SearchBar/SearchBar.js";
+import { default as default36 } from "./components/Select/Select.js";
+import { default as default37 } from "./components/StackedGroup/StackedGroup.js";
+import { default as default38 } from "./components/Switch/Switch.js";
+import { default as default39 } from "./components/Table/components/Table.js";
+import { default as default40 } from "./components/TextArea/TextArea.js";
+import { default as default41 } from "./components/Tooltip/Tooltip.js";
 import { DndTree } from "./components/Tree/components/DndTree.js";
-import { default as default41 } from "./components/Tree/components/SortableTree.js";
-import { default as default42 } from "./components/Tree/components/Tree.js";
-import { default as default43 } from "./components/TreeView/TreeView.js";
-import { default as default44 } from "./components/VisuallyHidden/VisuallyHidden.js";
-import { default as default45 } from "./hooks/useBookmark/useBookmark.js";
-import { default as default46 } from "./hooks/useBreakpoint/useBreakpoint.js";
-import { default as default47 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
-import { default as default48 } from "./hooks/useCantoo/useCantoo.js";
-import { default as default49 } from "./hooks/useClickOutside/useClickOutside.js";
-import { default as default50 } from "./hooks/useConversation/useConversation.js";
-import { default as default51 } from "./hooks/useDate/useDate.js";
-import { default as default52 } from "./hooks/useDebounce/useDebounce.js";
-import { default as default53 } from "./hooks/useDirectory/useDirectory.js";
-import { default as default54 } from "./hooks/useDropdown/useDropdown.js";
-import { default as default55 } from "./hooks/useDropzone/useDropzone.js";
-import { default as default56 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
-import { default as default57 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
-import { default as default58 } from "./hooks/useHover/useHover.js";
-import { default as default59 } from "./hooks/useHttpErrorToast/useHttpErrorToast.js";
-import { default as default60 } from "./hooks/useImage/useImage.js";
-import { default as default61 } from "./hooks/useIsAdml/useIsAdml.js";
-import { default as default62 } from "./hooks/useKeyPress/useKeyPress.js";
-import { default as default63 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
-import { default as default64 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
-import { default as default65 } from "./hooks/useScrollToTop/useScrollToTop.js";
-import { default as default66 } from "./hooks/useTitle/useTitle.js";
-import { default as default67 } from "./hooks/useToast/useToast.js";
-import { default as default68 } from "./hooks/useToggle/useToggle.js";
-import { default as default69 } from "./hooks/useTrapFocus/useTrapFocus.js";
-import { default as default70 } from "./hooks/useTrashedResource/useTrashedResource.js";
-import { default as default71 } from "./hooks/useUpload/useUpload.js";
-import { default as default72 } from "./hooks/useUploadFiles/useUploadFiles.js";
-import { default as default73 } from "./hooks/useUser/useUser.js";
-import { default as default74 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
-import { default as default75 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
-import { default as default76 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
-import { default as default77 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
-import { default as default78 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
-import { default as default79 } from "./modules/modals/PublishModal/PublishModal.js";
-import { default as default80 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
-import { default as default81 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
-import { default as default82 } from "./modules/modals/ShareModal/ShareModal.js";
-import { default as default83 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
-import { default as default84 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
+import { default as default42 } from "./components/Tree/components/SortableTree.js";
+import { default as default43 } from "./components/Tree/components/Tree.js";
+import { default as default44 } from "./components/TreeView/TreeView.js";
+import { default as default45 } from "./components/VisuallyHidden/VisuallyHidden.js";
+import { default as default46 } from "./hooks/useBookmark/useBookmark.js";
+import { default as default47 } from "./hooks/useBreakpoint/useBreakpoint.js";
+import { default as default48 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
+import { default as default49 } from "./hooks/useCantoo/useCantoo.js";
+import { default as default50 } from "./hooks/useClickOutside/useClickOutside.js";
+import { default as default51 } from "./hooks/useConversation/useConversation.js";
+import { default as default52 } from "./hooks/useDate/useDate.js";
+import { default as default53 } from "./hooks/useDebounce/useDebounce.js";
+import { default as default54 } from "./hooks/useDirectory/useDirectory.js";
+import { default as default55 } from "./hooks/useDropdown/useDropdown.js";
+import { default as default56 } from "./hooks/useDropzone/useDropzone.js";
+import { default as default57 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
+import { default as default58 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
+import { default as default59 } from "./hooks/useHover/useHover.js";
+import { default as default60 } from "./hooks/useHttpErrorToast/useHttpErrorToast.js";
+import { default as default61 } from "./hooks/useImage/useImage.js";
+import { default as default62 } from "./hooks/useIsAdml/useIsAdml.js";
+import { default as default63 } from "./hooks/useKeyPress/useKeyPress.js";
+import { default as default64 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
+import { default as default65 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
+import { default as default66 } from "./hooks/useScrollToTop/useScrollToTop.js";
+import { default as default67 } from "./hooks/useTitle/useTitle.js";
+import { default as default68 } from "./hooks/useToast/useToast.js";
+import { default as default69 } from "./hooks/useToggle/useToggle.js";
+import { default as default70 } from "./hooks/useTrapFocus/useTrapFocus.js";
+import { default as default71 } from "./hooks/useTrashedResource/useTrashedResource.js";
+import { default as default72 } from "./hooks/useUpload/useUpload.js";
+import { default as default73 } from "./hooks/useUploadFiles/useUploadFiles.js";
+import { default as default74 } from "./hooks/useUser/useUser.js";
+import { default as default75 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
+import { default as default76 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
+import { default as default77 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
+import { default as default78 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
+import { default as default79 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
+import { default as default80 } from "./modules/modals/PublishModal/PublishModal.js";
+import { default as default81 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
+import { default as default82 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
+import { default as default83 } from "./modules/modals/ShareModal/ShareModal.js";
+import { default as default84 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
+import { default as default85 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
 import { AccessiblePalette, DefaultPalette } from "./components/ColorPicker/ColorPalette.js";
 import { DropzoneContext, useDropzoneContext } from "./components/Dropzone/DropzoneContext.js";
 import { Column, Grid } from "./components/Grid/Grid.js";
@@ -118,7 +119,7 @@ export {
   default7 as Avatar,
   default8 as AvatarGroup,
   default9 as Badge,
-  default80 as BlogPublic,
+  default81 as BlogPublic,
   default10 as Breadcrumb,
   default11 as Button,
   default14 as Card,
@@ -137,49 +138,50 @@ export {
   EdificeThemeContext,
   EdificeThemeProvider,
   default21 as EmptyScreen,
-  default23 as FormControl,
-  default22 as FormText,
+  default22 as Flex,
+  default24 as FormControl,
+  default23 as FormText,
   Grid,
-  default24 as Heading,
+  default25 as Heading,
   default12 as IconButton,
-  default25 as Image,
-  default26 as Input,
-  default27 as Label,
+  default26 as Image,
+  default27 as Input,
+  default28 as Label,
   Layout,
   List,
-  default28 as Loading,
-  default29 as LoadingScreen,
-  default30 as Logo,
+  default29 as Loading,
+  default30 as LoadingScreen,
+  default31 as Logo,
   Menu,
   MockedProvider,
-  default31 as Modal,
-  default78 as OnboardingModal,
+  default32 as Modal,
+  default79 as OnboardingModal,
   Popover,
   PopoverBody,
   PopoverFooter,
   PopoverHeader,
-  default32 as PreventPropagation,
-  default79 as PublishModal,
-  default33 as Radio,
+  default33 as PreventPropagation,
+  default80 as PublishModal,
+  default34 as Radio,
   ResourceModal,
-  default34 as SearchBar,
+  default35 as SearchBar,
   default13 as SearchButton,
-  default35 as Select,
-  default83 as ShareBlog,
-  default82 as ShareModal,
-  default41 as SortableTree,
-  default36 as StackedGroup,
-  default37 as Switch,
-  default38 as Table,
+  default36 as Select,
+  default84 as ShareBlog,
+  default83 as ShareModal,
+  default42 as SortableTree,
+  default37 as StackedGroup,
+  default38 as Switch,
+  default39 as Table,
   Tabs,
-  default39 as TextArea,
+  default40 as TextArea,
   Toolbar,
-  default40 as Tooltip,
-  default42 as Tree,
+  default41 as Tooltip,
+  default43 as Tree,
   TreeNode,
   TreeNodeFolderWrapper,
-  default43 as TreeView,
-  default44 as VisuallyHidden,
+  default44 as TreeView,
+  default45 as VisuallyHidden,
   addNode,
   arrayUnique,
   buildTree,
@@ -207,46 +209,46 @@ export {
   setRef,
   updateNode,
   updateParentIds,
-  default45 as useBookmark,
-  default46 as useBreakpoint,
-  default47 as useBrowserInfo,
-  default48 as useCantoo,
+  default46 as useBookmark,
+  default47 as useBreakpoint,
+  default48 as useBrowserInfo,
+  default49 as useCantoo,
   useCheckable,
-  default49 as useClickOutside,
-  default50 as useConversation,
-  default51 as useDate,
-  default52 as useDebounce,
-  default53 as useDirectory,
-  default54 as useDropdown,
-  default55 as useDropzone,
+  default50 as useClickOutside,
+  default51 as useConversation,
+  default52 as useDate,
+  default53 as useDebounce,
+  default54 as useDirectory,
+  default55 as useDropdown,
+  default56 as useDropzone,
   useDropzoneContext,
   useEdificeClient,
-  default56 as useEdificeIcons,
+  default57 as useEdificeIcons,
   useEdificeTheme,
-  default57 as useHasWorkflow,
-  default58 as useHover,
-  default59 as useHttpErrorToast,
-  default60 as useImage,
-  default61 as useIsAdml,
-  default62 as useKeyPress,
-  default63 as useLibraryUrl,
-  default64 as useMediaLibrary,
-  default65 as useScrollToTop,
-  default84 as useShareMutation,
-  default66 as useTitle,
-  default67 as useToast,
-  default68 as useToggle,
-  default69 as useTrapFocus,
-  default70 as useTrashedResource,
+  default58 as useHasWorkflow,
+  default59 as useHover,
+  default60 as useHttpErrorToast,
+  default61 as useImage,
+  default62 as useIsAdml,
+  default63 as useKeyPress,
+  default64 as useLibraryUrl,
+  default65 as useMediaLibrary,
+  default66 as useScrollToTop,
+  default85 as useShareMutation,
+  default67 as useTitle,
+  default68 as useToast,
+  default69 as useToggle,
+  default70 as useTrapFocus,
+  default71 as useTrashedResource,
   useTreeSortable,
   useTreeView,
-  default81 as useUpdateMutation,
-  default71 as useUpload,
-  default72 as useUploadFiles,
-  default73 as useUser,
-  default74 as useWorkspaceFile,
-  default75 as useWorkspaceSearch,
-  default76 as useXitiTrackPageLoad,
-  default77 as useZendeskGuide,
+  default82 as useUpdateMutation,
+  default72 as useUpload,
+  default73 as useUploadFiles,
+  default74 as useUser,
+  default75 as useWorkspaceFile,
+  default76 as useWorkspaceSearch,
+  default77 as useXitiTrackPageLoad,
+  default78 as useZendeskGuide,
   wrapTreeNode
 };

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

@@ -0,0 +1,7 @@
+declare const CantooAdaptTextBoxView: ({ openPosition, }: {
+    openPosition?: {
+        right: boolean;
+        bottom: boolean;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default CantooAdaptTextBoxView;

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

@@ -0,0 +1,33 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+const CantooAdaptTextBoxView = ({
+  openPosition
+}) => {
+  const {
+    editor
+  } = useEditorContext(), containerRef = useRef(null), Cantoo = window.Cantoo, editorHTML = editor == null ? void 0 : editor.getHTML(), cantooHTML = (Cantoo == null ? void 0 : Cantoo.formatText(editorHTML)) || editorHTML;
+  return useEffect(() => {
+    var _a;
+    openPosition != null && openPosition.bottom && ((_a = containerRef.current) == null || _a.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    }));
+  }, []), /* @__PURE__ */ jsxs(Fragment, { children: [
+    (openPosition == null ? void 0 : openPosition.right) && /* @__PURE__ */ jsx("div", { style: {
+      width: "1px",
+      backgroundColor: "#e0e0e0",
+      margin: "0 3px"
+    } }),
+    /* @__PURE__ */ jsx("div", { style: {
+      flex: 1,
+      marginTop: openPosition != null && openPosition.bottom ? "16px" : "0px"
+    }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: `${openPosition != null && openPosition.bottom ? "card" : ""} py-12 px-16`, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: {
+      __html: cantooHTML
+    } }) }) })
+  ] });
+};
+export {
+  CantooAdaptTextBoxView as default
+};

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

@@ -40,6 +40,7 @@ export interface EditorProps {
     onContentChange?: ({ editor }: {
         editor: any;
     }) => void;
+    cantooParam?: 'simplify' | 'none';
 }
 declare const Editor: import('react').ForwardRefExoticComponent<EditorProps & import('react').RefAttributes<EditorRef>>;
 export default Editor;

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

@@ -5,14 +5,17 @@ import clsx from "clsx";
 import "@tiptap/starter-kit";
 import { useEdificeClient } from "../../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
 import { useMathsStyles } from "../../hooks/useMathsStyles.js";
+import CantooAdaptTextBoxView from "./CantooAdaptTextBoxView.js";
 import { useTipTapEditor } from "../../hooks/useTipTapEditor.js";
 import { useMediaLibraryEditor } from "../../hooks/useMediaLibraryEditor.js";
 import { useMathsModal } from "../../hooks/useMathsModal.js";
 import { useImageModal } from "../../hooks/useImageModal.js";
 import { useLinkToolbar } from "../../hooks/useLinkToolbar.js";
 import { useSpeechSynthetisis } from "../../hooks/useSpeechSynthetisis.js";
+import { useCantooEditor } from "../../hooks/useCantooEditor.js";
 import { EditorContext } from "../../hooks/useEditorContext.js";
 import { EditorToolbar } from "../EditorToolbar/EditorToolbar.js";
+import Flex from "../../../../components/Flex/Flex.js";
 import LinkToolbar from "../Toolbar/LinkToolbar.js";
 import TableToolbar from "../Toolbar/TableToolbar.js";
 import BubbleMenuEditImage from "../BubbleMenuEditImage/BubbleMenuEditImage.js";
@@ -28,7 +31,8 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
   focus = "start",
   placeholder = "",
   visibility = "protected",
-  onContentChange
+  onContentChange,
+  cantooParam = "none"
 }, ref) => {
   const editorId = useId(), {
     appCode
@@ -42,7 +46,7 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
     toggle: toggleMathsModal,
     ...mathsModalHandlers
   } = useMathsModal(editor), imageModal = useImageModal(editor, "media-library", visibility), linkToolbarHandlers = useLinkToolbar(editor, mediaLibraryModalRef), speechSynthetisis = useSpeechSynthetisis(editor);
-  if (useMathsStyles(), useImperativeHandle(ref, () => ({
+  useMathsStyles(), useImperativeHandle(ref, () => ({
     getContent: (as) => {
       switch (as) {
         case "html":
@@ -57,7 +61,9 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
     },
     toogleSpeechSynthetisis: speechSynthetisis.toggle,
     isSpeeching: () => speechSynthetisis.isActivated
-  })), !editor) return null;
+  }));
+  const contooEditor = useCantooEditor(editor, cantooParam);
+  if (!editor) return null;
   const borderClass = clsx(variant === "outline" && "border rounded-3"), contentClass = clsx(variant === "outline" && "py-12 px-16");
   return /* @__PURE__ */ jsxs(EditorContext.Provider, { value: {
     id: id ?? editorId,
@@ -66,8 +72,13 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
     editable
   }, children: [
     /* @__PURE__ */ jsxs("div", { className: borderClass, children: [
-      toolbar !== "none" && editable && /* @__PURE__ */ jsx(EditorToolbar, { mediaLibraryRef: mediaLibraryModalRef, toggleMathsModal }),
-      /* @__PURE__ */ jsx(EditorContent, { id: id ?? editorId, editor, className: contentClass })
+      toolbar !== "none" && editable && /* @__PURE__ */ jsx(EditorToolbar, { mediaLibraryRef: mediaLibraryModalRef, toggleMathsModal, cantooEditor: contooEditor }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "row", children: [
+        /* @__PURE__ */ jsx(EditorContent, { id: id ?? editorId, editor, className: contentClass, style: {
+          flex: 1
+        } }),
+        editable && contooEditor.openPositionAdaptText.right && /* @__PURE__ */ jsx(CantooAdaptTextBoxView, { openPosition: contooEditor.openPositionAdaptText })
+      ] })
     ] }),
     /* @__PURE__ */ jsx(LinkToolbar, { editor, ...linkToolbarHandlers }),
     /* @__PURE__ */ jsx(TableToolbar, { editor }),
@@ -78,7 +89,8 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
     /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, {}), children: [
       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 && (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 && contooEditor.openPositionAdaptText.bottom && /* @__PURE__ */ jsx(CantooAdaptTextBoxView, { openPosition: contooEditor.openPositionAdaptText })
     ] })
   ] });
 });

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

@@ -0,0 +1,9 @@
+import { RefAttributes } from 'react';
+import { IconButtonProps } from '../../../../components';
+import { CantooEditor } from '../../hooks';
+interface Props {
+    triggerProps: JSX.IntrinsicAttributes & Omit<IconButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>;
+    cantooEditor: CantooEditor;
+}
+export declare const EditorToolbarCantoo: ({ triggerProps, cantooEditor }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,79 @@
+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 SvgIconDeleteColumnHighlight from "../../../icons/components/IconDeleteColumnHighlight.js";
+import SvgIconDeleteRowHighlight from "../../../icons/components/IconDeleteRowHighlight.js";
+import SvgIconMicOff from "../../../icons/components/IconMicOff.js";
+import SvgIconMic from "../../../icons/components/IconMic.js";
+import SvgIconSettings from "../../../icons/components/IconSettings.js";
+import SvgIconTextToSpeechOff from "../../../icons/components/IconTextToSpeechOff.js";
+import SvgIconTextToSpeech from "../../../icons/components/IconTextToSpeech.js";
+import SvgIconWand from "../../../icons/components/IconWand.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,
+  cantooEditor
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    speech2textIsAvailable,
+    speech2textIsActive,
+    text2speechIsActive,
+    toggleSpeech2Text,
+    toggleText2Speech,
+    toogleSettings,
+    cantooParam
+  } = cantooEditor, cantooOptionsAdaptText = [{
+    id: "right",
+    label: t("tiptap.toolbar.cantoo.formatText.show.on.right"),
+    icon: /* @__PURE__ */ jsx(SvgIconDeleteColumnHighlight, {}),
+    className: cantooEditor.openPositionAdaptText.right ? "fw-bold" : "",
+    action: () => cantooEditor.handleCantooAdaptTextPosition("right")
+  }, {
+    id: "bottom",
+    label: t("tiptap.toolbar.cantoo.formatText.show.on.bottom"),
+    icon: /* @__PURE__ */ jsx(SvgIconDeleteRowHighlight, {}),
+    className: cantooEditor.openPositionAdaptText.bottom ? "fw-bold" : "",
+    action: () => cantooEditor.handleCantooAdaptTextPosition("bottom")
+  }], cantooOptions = [...cantooParam === "simplify" ? [{
+    id: "formatText",
+    label: t("tiptap.toolbar.cantoo.formatText"),
+    className: cantooEditor.openPositionAdaptText.bottom ? "fw-bold" : "",
+    icon: /* @__PURE__ */ jsx(SvgIconWand, {}),
+    action: () => cantooEditor.handleCantooAdaptTextPosition("bottom")
+  }] : [], ...speech2textIsAvailable ? [{
+    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()
+  }, ...cantooParam === "simplify" ? [] : [{
+    id: "settings",
+    label: t("tiptap.toolbar.cantoo.settings"),
+    icon: /* @__PURE__ */ jsx(SvgIconSettings, {}),
+    action: () => toogleSettings()
+  }]];
+  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 || cantooEditor.openPositionAdaptText.right || cantooEditor.openPositionAdaptText.bottom ? "is-selected" : "", "aria-label": t("tiptap.toolbar.cantoo.choice"), isLoading: !window.Cantoo }) }),
+    /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+      cantooParam != "simplify" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Dropdown.MenuGroup, { label: t("tiptap.toolbar.cantoo.formatText"), children: cantooOptionsAdaptText.map((option) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Dropdown.Item, { onClick: option.action, icon: option.icon, className: option.className, children: /* @__PURE__ */ jsx("span", { children: option.label }) }) }, option.id)) }),
+        /* @__PURE__ */ jsx(Dropdown.Separator, {})
+      ] }),
+      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

@@ -1,10 +1,13 @@
 import { RefObject } from 'react';
+import { CantooEditor } from '../..';
 import { MediaLibraryRef } from '../../../multimedia';
 interface Props {
     /** Ref to a MediaLibrary instance */
     mediaLibraryRef: RefObject<MediaLibraryRef>;
     /** API to open/close a Math modal. */
     toggleMathsModal: () => void;
+    /** Ref to a Cantoo editor instance */
+    cantooEditor: CantooEditor;
 }
-export declare const EditorToolbar: ({ mediaLibraryRef, toggleMathsModal }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorToolbar: ({ mediaLibraryRef, toggleMathsModal, cantooEditor, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -27,13 +27,15 @@ 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 { 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,
+  cantooEditor
 }) => {
   const {
     t
@@ -167,11 +169,21 @@ const EditorToolbar = ({
         name: "speechtotext",
         tooltip: t("tiptap.toolbar.stt")
       },
+      //------------- CANTOO ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarCantoo, { triggerProps, cantooEditor })
+        },
+        name: "cantoo",
+        visibility: cantooEditor.isAvailable ? "show" : "hide",
+        tooltip: t("tiptap.toolbar.cantoo.choice")
+      },
       //------------------------------------//
       {
         type: "divider",
         name: "div-speech",
-        visibility: canRecognizeSpeech ? "show" : "hide"
+        visibility: canRecognizeSpeech || cantooEditor.isAvailable ? "show" : "hide"
       },
       //--------------- TYPOGRAPHY ---------------//
       {

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.d.ts

@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/react';
+export interface CantooEditor {
+    cantooParam: string;
+    isAvailable: boolean;
+    speech2textIsAvailable: boolean;
+    speech2textIsActive: boolean;
+    text2speechIsActive: boolean;
+    toggleSpeech2Text: () => void;
+    toggleText2Speech: () => void;
+    toogleSettings: () => void;
+    openPositionAdaptText: {
+        right: boolean;
+        bottom: boolean;
+    };
+    handleCantooAdaptTextPosition: (position: string) => void;
+}
+export declare const useCantooEditor: (editor: Editor | null, cantooParam: string) => CantooEditor;