@edifice.io/react 2.6.9-develop-enabling.20261013152718 → 2.6.9-develop.20261013171251

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

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

@@ -1 +1,103 @@
-import Flex from"../../../../components/Flex/Flex.js";import{useEdificeClient}from"../../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";import MediaLibrary from"../../../multimedia/MediaLibrary/MediaLibrary.js";import LoadingScreen from"../../../../components/LoadingScreen/LoadingScreen.js";import{useMathsStyles}from"../../hooks/useMathsStyles.js";import BubbleMenuEditInformationPane from"../BubbleMenuEditInformationPane/BubbleMenuEditInformationPane.js";import{EditorContext}from"../../hooks/useEditorContext.js";import{useImageModal}from"../../hooks/useImageModal.js";import{useLinkToolbar}from"../../hooks/useLinkToolbar.js";import{useMathsModal}from"../../hooks/useMathsModal.js";import{useMediaLibraryEditor}from"../../hooks/useMediaLibraryEditor.js";import{useSpeechSynthetisis}from"../../hooks/useSpeechSynthetisis.js";import{useTipTapEditor}from"../../hooks/useTipTapEditor.js";import{useCantooEditor}from"../../hooks/useCantooEditor.js";import CantooAdaptTextBoxView from"./CantooAdaptTextBoxView.js";import{EditorToolbar}from"../EditorToolbar/EditorToolbar.js";import BubbleMenuEditImage from"../BubbleMenuEditImage/BubbleMenuEditImage.js";import TableToolbar from"../Toolbar/TableToolbar.js";import LinkToolbar from"../Toolbar/LinkToolbar.js";import clsx$1 from"clsx";import{Suspense,forwardRef,lazy,useId,useImperativeHandle}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{EditorContent}from"@tiptap/react";var MathsModal=lazy(async()=>await import(`../MathsModal/MathsModal.js`)),ImageEditor=lazy(async()=>await import(`../../../multimedia/ImageEditor/components/ImageEditor.js`)),Editor=forwardRef(({id,content,mode=`read`,toolbar=`full`,variant=`outline`,focus=`start`,placeholder=``,visibility=`protected`,onContentChange,cantooParam=`none`,extensions},ref)=>{let editorId=useId(),{appCode}=useEdificeClient(),{editor,editable}=useTipTapEditor(mode===`edit`,content,focus,placeholder,onContentChange,visibility,extensions),{ref:mediaLibraryModalRef,...mediaLibraryModalHandlers}=useMediaLibraryEditor(editor),{toggle:toggleMathsModal,...mathsModalHandlers}=useMathsModal(editor),imageModal=useImageModal(editor,`media-library`,visibility),linkToolbarHandlers=useLinkToolbar(editor,mediaLibraryModalRef),speechSynthetisis=useSpeechSynthetisis(editor);useMathsStyles(),useImperativeHandle(ref,()=>({getContent:as=>{switch(as){case`html`:return editor?.getHTML();case`json`:return editor?.getJSON();case`plain`:return editor?.getText();default:throw`[Editor] Unknown content format ${as}`}},toogleSpeechSynthetisis:speechSynthetisis.toggle,isSpeeching:()=>speechSynthetisis.isActivated,setFocus:position=>{editor&&editor.commands.focus(position)}}));let contooEditor=useCantooEditor(editor,cantooParam);if(!editor)return null;let borderClass=clsx$1(variant===`outline`&&`border rounded-3`),contentClass=clsx$1(variant===`outline`&&`py-12 px-16`);return jsxs(EditorContext.Provider,{value:{id:id??editorId,appCode,editor,editable},children:[jsxs(`div`,{className:borderClass,children:[toolbar!==`none`&&editable&&jsx(EditorToolbar,{mediaLibraryRef:mediaLibraryModalRef,toggleMathsModal,cantooEditor:contooEditor}),jsxs(Flex,{direction:`row`,children:[jsx(EditorContent,{"data-testid":`editor-content`,id:id??editorId,editor,className:contentClass,style:{flex:1}}),editable&&contooEditor.openPositionAdaptText.right&&jsx(CantooAdaptTextBoxView,{openPosition:contooEditor.openPositionAdaptText})]})]}),jsx(LinkToolbar,{editor,...linkToolbarHandlers}),jsx(TableToolbar,{editor}),editor&&jsxs(Fragment$1,{children:[jsx(BubbleMenuEditImage,{editor,onEditImage:imageModal.handleEdit,openEditImage:imageModal.isOpen,editable}),jsx(BubbleMenuEditInformationPane,{editor,editable})]}),jsxs(Suspense,{fallback:jsx(LoadingScreen,{}),children:[editable&&jsx(MediaLibrary,{appCode,visibility,multiple:!0,ref:mediaLibraryModalRef,...mediaLibraryModalHandlers}),editable&&mathsModalHandlers.isOpen&&jsx(MathsModal,{...mathsModalHandlers}),editable&&imageModal?.isOpen&&imageModal?.currentImage&&jsx(ImageEditor,{altText:imageModal?.currentImage.alt,legend:imageModal?.currentImage.title,image:imageModal?.currentImage.src,isOpen:imageModal.isOpen,onCancel:imageModal.handleCancel,onSave:imageModal.handleSave,onError:console.error}),editable&&contooEditor.openPositionAdaptText.bottom&&jsx(CantooAdaptTextBoxView,{openPosition:contooEditor.openPositionAdaptText})]})]})});export{Editor as default};
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, Suspense, lazy } from "react";
+import { EditorContent } from "@tiptap/react";
+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";
+import BubbleMenuEditInformationPane from "../BubbleMenuEditInformationPane/BubbleMenuEditInformationPane.js";
+import MediaLibrary from "../../../multimedia/MediaLibrary/MediaLibrary.js";
+import LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.js";
+const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/MathsModal.js")), ImageEditor = /* @__PURE__ */ lazy(async () => await import("../../../multimedia/ImageEditor/components/ImageEditor.js")), Editor = /* @__PURE__ */ forwardRef(({
+  id,
+  content,
+  mode = "read",
+  toolbar = "full",
+  variant = "outline",
+  focus = "start",
+  placeholder = "",
+  visibility = "protected",
+  onContentChange,
+  cantooParam = "none",
+  extensions
+}, ref) => {
+  const editorId = useId(), {
+    appCode
+  } = useEdificeClient(), {
+    editor,
+    editable
+  } = useTipTapEditor(mode === "edit", content, focus, placeholder, onContentChange, visibility, extensions), {
+    ref: mediaLibraryModalRef,
+    ...mediaLibraryModalHandlers
+  } = useMediaLibraryEditor(editor), {
+    toggle: toggleMathsModal,
+    ...mathsModalHandlers
+  } = useMathsModal(editor), imageModal = useImageModal(editor, "media-library", visibility), linkToolbarHandlers = useLinkToolbar(editor, mediaLibraryModalRef), speechSynthetisis = useSpeechSynthetisis(editor);
+  useMathsStyles(), useImperativeHandle(ref, () => ({
+    getContent: (as) => {
+      switch (as) {
+        case "html":
+          return editor == null ? void 0 : editor.getHTML();
+        case "json":
+          return editor == null ? void 0 : editor.getJSON();
+        case "plain":
+          return editor == null ? void 0 : editor.getText();
+        default:
+          throw `[Editor] Unknown content format ${as}`;
+      }
+    },
+    toogleSpeechSynthetisis: speechSynthetisis.toggle,
+    isSpeeching: () => speechSynthetisis.isActivated,
+    setFocus: (position) => {
+      editor && editor.commands.focus(position);
+    }
+  }));
+  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,
+    appCode,
+    editor,
+    editable
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { className: borderClass, children: [
+      toolbar !== "none" && editable && /* @__PURE__ */ jsx(EditorToolbar, { mediaLibraryRef: mediaLibraryModalRef, toggleMathsModal, cantooEditor: contooEditor }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "row", children: [
+        /* @__PURE__ */ jsx(EditorContent, { "data-testid": "editor-content", 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 }),
+    editor && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BubbleMenuEditImage, { editor, onEditImage: imageModal.handleEdit, openEditImage: imageModal.isOpen, editable }),
+      /* @__PURE__ */ jsx(BubbleMenuEditInformationPane, { editor, editable })
+    ] }),
+    /* @__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 && contooEditor.openPositionAdaptText.bottom && /* @__PURE__ */ jsx(CantooAdaptTextBoxView, { openPosition: contooEditor.openPositionAdaptText })
+    ] })
+  ] });
+});
+export {
+  Editor as default
+};

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

@@ -1 +1,56 @@
-import Image from"../../../../components/Image/Image.js";import{getThumbnail}from"@edifice.io/utilities";import clsx$1 from"clsx";import{useEffect,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var EditorPreview=({content,variant=`outline`,onDetailClick,onMediaClick,maxMediaDisplayed=3})=>{let{t}=useTranslation(),[summaryContent,setSummaryContent]=useState(``),[medias,setMedias]=useState([]),borderClass=clsx$1(variant===`outline`&&`border rounded-3 py-12 px-16`),hasMediaCallback=onDetailClick||onMediaClick;return useEffect(()=>{let contentHTML=content;if(contentHTML){let doc=new DOMParser().parseFromString(contentHTML,`text/html`),mediaElements=Array.from(doc.querySelectorAll(`img, video, iframe, audio, embed`));setMedias(mediaElements.filter(el=>el.tagName.toLowerCase()===`img`).map(el=>{let image=el;return image.src?{url:getThumbnail(image.src,0,300),alt:image.alt}:{url:``,alt:``}})),mediaElements.forEach(el=>el.parentNode?.removeChild(el)),setSummaryContent(doc.body.textContent||``)}},[content]),jsxs(`div`,{className:borderClass,"data-testid":`editor-preview`,onClick:onDetailClick,tabIndex:onDetailClick?-1:void 0,role:onDetailClick?`button`:void 0,children:[jsx(`div`,{className:`flex-fill text-truncate text-truncate-2 post-preview-content overflow-hidden`,style:{overflowWrap:`anywhere`},children:summaryContent}),jsx(`div`,{onClick:e=>{onMediaClick&&(e.stopPropagation(),onMediaClick())},tabIndex:hasMediaCallback?-1:void 0,role:hasMediaCallback?`button`:void 0,className:`d-flex align-items-center justify-content-center gap-24 px-32 pt-16`,children:medias.slice(0,maxMediaDisplayed).map((media,index)=>jsxs(`div`,{className:clsx$1(`position-relative col-12 col-md-4 `,{"d-none d-md-block":index>=1}),children:[jsx(Image,{alt:media.alt,objectFit:`cover`,ratio:`16`,className:`rounded`,loading:`lazy`,src:media.url,sizes:``}),(index===0||index===2)&&medias.length-(index+1)>0&&jsx(`div`,{className:clsx$1(`position-absolute top-0 bottom-0 start-0 end-0 d-flex justify-content-center align-items-center rounded text-light bg-dark bg-opacity-50`,{"d-flex d-md-none":index===0,"d-none d-md-flex":index===2}),children:t(`editor.preview.moreMedia`,{mediaCount:medias.length-(index+1)})})]},`${index}-${media.url}`))})]})};export{EditorPreview as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import clsx from "clsx";
+import { getThumbnail } from "@edifice.io/utilities";
+import { useTranslation } from "react-i18next";
+import Image from "../../../../components/Image/Image.js";
+const EditorPreview = ({
+  content,
+  variant = "outline",
+  onDetailClick,
+  onMediaClick,
+  maxMediaDisplayed = 3
+}) => {
+  const {
+    t
+  } = useTranslation(), [summaryContent, setSummaryContent] = useState(""), [medias, setMedias] = useState([]), borderClass = clsx(variant === "outline" && "border rounded-3 py-12 px-16"), hasMediaCallback = onDetailClick || onMediaClick, handleMediaClick = (e) => {
+    onMediaClick && (e.stopPropagation(), onMediaClick());
+  };
+  return useEffect(() => {
+    const contentHTML = content;
+    if (contentHTML) {
+      const doc = new DOMParser().parseFromString(contentHTML, "text/html"), mediaElements = Array.from(doc.querySelectorAll("img, video, iframe, audio, embed"));
+      setMedias(mediaElements.filter((el) => el.tagName.toLowerCase() === "img").map((el) => {
+        const image = el;
+        return image.src ? {
+          url: getThumbnail(image.src, 0, 300),
+          alt: image.alt
+        } : {
+          url: "",
+          alt: ""
+        };
+      })), mediaElements.forEach((el) => {
+        var _a;
+        return (_a = el.parentNode) == null ? void 0 : _a.removeChild(el);
+      }), setSummaryContent(doc.body.textContent || "");
+    }
+  }, [content]), /* @__PURE__ */ jsxs("div", { className: borderClass, "data-testid": "editor-preview", onClick: onDetailClick, tabIndex: onDetailClick ? -1 : void 0, role: onDetailClick ? "button" : void 0, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-fill text-truncate text-truncate-2 post-preview-content overflow-hidden", style: {
+      overflowWrap: "anywhere"
+    }, children: summaryContent }),
+    /* @__PURE__ */ jsx("div", { onClick: handleMediaClick, tabIndex: hasMediaCallback ? -1 : void 0, role: hasMediaCallback ? "button" : void 0, className: "d-flex align-items-center justify-content-center gap-24 px-32 pt-16", children: medias.slice(0, maxMediaDisplayed).map((media, index) => /* @__PURE__ */ jsxs("div", { className: clsx("position-relative col-12 col-md-4 ", {
+      "d-none d-md-block": index >= 1
+    }), children: [
+      /* @__PURE__ */ jsx(Image, { alt: media.alt, objectFit: "cover", ratio: "16", className: "rounded", loading: "lazy", src: media.url, sizes: "" }),
+      (index === 0 || index === 2) && medias.length - (index + 1) > 0 && /* @__PURE__ */ jsx("div", { className: clsx("position-absolute top-0 bottom-0 start-0 end-0 d-flex justify-content-center align-items-center rounded text-light bg-dark bg-opacity-50", {
+        "d-flex d-md-none": index === 0,
+        "d-none d-md-flex": index === 2
+      }), children: t("editor.preview.moreMedia", {
+        mediaCount: medias.length - (index + 1)
+      }) })
+    ] }, `${index}-${media.url}`)) })
+  ] });
+};
+export {
+  EditorPreview as default
+};

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

@@ -1 +1,24 @@
-import Skeleton from"../../../../components/Skeleton/Skeleton.js";import clsx$1 from"clsx";import{jsx,jsxs}from"react/jsx-runtime";var EditorPreview=({variant=`outline`})=>jsx(`div`,{className:clsx$1(variant===`outline`&&`border rounded-3`),"data-testid":`editor-preview`,children:jsxs(`div`,{className:clsx$1(`mt-16`,variant===`outline`&&`my-12 mx-16`),children:[jsx(Skeleton,{className:`editor-preview-skeleton-line col-12`}),jsx(Skeleton,{className:`editor-preview-skeleton-line col-12`}),jsxs(`div`,{className:`d-flex justify-content-center gap-24 px-32 pt-16`,children:[jsx(`div`,{style:{maxWidth:`150px`},className:`col-12 col-md-4`,children:jsx(`div`,{className:`ratio ratio-16x9`,children:jsx(Skeleton,{variant:`block`,tone:`strong`})})}),jsx(`div`,{style:{maxWidth:`150px`},className:`col-12 col-md-4`,children:jsx(`div`,{className:`ratio ratio-16x9`,children:jsx(Skeleton,{variant:`block`,tone:`strong`})})})]})]})});export{EditorPreview as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import TextSkeleton from "../../../../components/Skeleton/TextSkeleton.js";
+import Image from "../../../../components/Image/Image.js";
+const EditorPreview = ({
+  variant = "outline"
+}) => {
+  const borderClass = clsx(variant === "outline" && "border rounded-3"), contentClass = clsx("mt-16", variant === "outline" && "my-12 mx-16");
+  return /* @__PURE__ */ jsx("div", { className: borderClass, "data-testid": "editor-preview", children: /* @__PURE__ */ jsxs("div", { className: contentClass, children: [
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-12" }),
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-12" }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-center gap-24 px-32 pt-16", children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        maxWidth: "150px"
+      }, className: "col-12 col-md-4", children: /* @__PURE__ */ jsx(Image, { alt: "", objectFit: "cover", ratio: "16", className: "rounded placeholder", src: "", sizes: "" }) }),
+      /* @__PURE__ */ jsx("div", { style: {
+        maxWidth: "150px"
+      }, className: "col-12 col-md-4", children: /* @__PURE__ */ jsx(Image, { alt: "", objectFit: "cover", ratio: "16", className: "rounded placeholder", src: "", sizes: "" }) })
+    ] })
+  ] }) });
+};
+export {
+  EditorPreview as default
+};

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

@@ -1 +1,31 @@
-import Skeleton from"../../../../components/Skeleton/Skeleton.js";import clsx$1 from"clsx";import{jsx,jsxs}from"react/jsx-runtime";var EditorSkeleton=({mode=`read`,variant=`outline`})=>{let contentClass=clsx$1(`d-flex flex-column gap-16 position-relative flex-fill`,variant===`outline`&&`border rounded-3 py-12 px-16`);return mode===`edit`?jsxs(`div`,{className:contentClass,children:[jsxs(`div`,{className:`d-flex col-12 gap-8 py-8 px-16`,children:[jsx(Skeleton,{className:`editor-skeleton-button col-2 flex-shrink-1`}),jsx(Skeleton,{className:`editor-skeleton-button col-4`}),jsx(Skeleton,{className:`editor-skeleton-button col-4`}),jsx(Skeleton,{className:`editor-skeleton-button col-2`})]}),jsxs(`div`,{className:`d-flex flex-column gap-8 px-16`,children:[jsx(Skeleton,{className:`col-10`}),jsx(Skeleton,{className:`col-7`}),jsx(Skeleton,{className:`col-8`}),jsx(Skeleton,{className:`col-6`})]})]}):jsxs(`div`,{className:contentClass,children:[jsx(Skeleton,{className:`col-10`}),jsx(Skeleton,{className:`col-7`}),jsx(Skeleton,{className:`col-8`})]})};export{EditorSkeleton as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import ButtonSkeleton from "../../../../components/Skeleton/ButtonSkeleton.js";
+import TextSkeleton from "../../../../components/Skeleton/TextSkeleton.js";
+const EditorSkeleton = ({
+  mode = "read",
+  variant = "outline"
+}) => {
+  const contentClass = clsx("d-flex flex-column gap-16 position-relative flex-fill", variant === "outline" && "border rounded-3 py-12 px-16");
+  return mode === "edit" ? /* @__PURE__ */ jsxs("div", { className: contentClass, children: [
+    /* @__PURE__ */ jsxs("div", { className: "d-flex col-12 gap-8 py-8 px-16", children: [
+      /* @__PURE__ */ jsx(ButtonSkeleton, { className: "col-2 flex-shrink-1" }),
+      /* @__PURE__ */ jsx(ButtonSkeleton, { className: "col-4" }),
+      /* @__PURE__ */ jsx(ButtonSkeleton, { className: "col-4" }),
+      /* @__PURE__ */ jsx(ButtonSkeleton, { className: "col-2" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-8 px-16", children: [
+      /* @__PURE__ */ jsx(TextSkeleton, { className: "col-10" }),
+      /* @__PURE__ */ jsx(TextSkeleton, { className: "col-7" }),
+      /* @__PURE__ */ jsx(TextSkeleton, { className: "col-8" }),
+      /* @__PURE__ */ jsx(TextSkeleton, { className: "col-6" })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: contentClass, children: [
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-10" }),
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-7" }),
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-8" })
+  ] });
+};
+export {
+  EditorSkeleton as default
+};

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

@@ -1 +1,79 @@
-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 IconButton from"../../../../components/Button/IconButton.js";import Tooltip from"../../../../components/Tooltip/Tooltip.js";import Dropdown from"../../../../components/Dropdown/Dropdown.js";import{Fragment}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var EditorToolbarCantoo=({triggerProps,cantooEditor})=>{let{t}=useTranslation(),{speech2textIsAvailable,speech2textIsActive,text2speechIsActive,toggleSpeech2Text,toggleText2Speech,toogleSettings,cantooParam}=cantooEditor,cantooOptionsAdaptText=[{id:`right`,label:t(`tiptap.toolbar.cantoo.formatText.show.on.right`),icon:jsx(SvgIconDeleteColumnHighlight,{}),className:cantooEditor.openPositionAdaptText.right?`fw-bold`:``,action:()=>cantooEditor.handleCantooAdaptTextPosition(`right`)},{id:`bottom`,label:t(`tiptap.toolbar.cantoo.formatText.show.on.bottom`),icon: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:jsx(SvgIconWand,{}),action:()=>cantooEditor.handleCantooAdaptTextPosition(`bottom`)}]:[],...speech2textIsAvailable?[{id:`speech2text`,label:t(`tiptap.toolbar.cantoo.speech2text`),className:speech2textIsActive?`fw-bold`:``,icon:jsx(speech2textIsActive?SvgIconMicOff:SvgIconMic,{}),action:()=>toggleSpeech2Text()}]:[],{id:`text2speech`,label:t(`tiptap.toolbar.cantoo.text2speech`),className:text2speechIsActive?`fw-bold`:``,icon:jsx(text2speechIsActive?SvgIconTextToSpeechOff:SvgIconTextToSpeech,{}),action:()=>toggleText2Speech()},...cantooParam===`simplify`?[]:[{id:`settings`,label:t(`tiptap.toolbar.cantoo.settings`),icon:jsx(SvgIconSettings,{}),action:()=>toogleSettings()}]];return jsxs(Fragment$1,{children:[jsx(Tooltip,{message:t(`tiptap.toolbar.cantoo.choice`),placement:`top`,children:jsx(IconButton,{...triggerProps,type:`button`,variant:`ghost`,color:`tertiary`,icon:jsx(SvgIconCantoo,{}),className:speech2textIsActive||text2speechIsActive||cantooEditor.openPositionAdaptText.right||cantooEditor.openPositionAdaptText.bottom?`is-selected`:``,"aria-label":t(`tiptap.toolbar.cantoo.choice`),isLoading:!window.Cantoo})}),jsxs(Dropdown.Menu,{children:[cantooParam!=`simplify`&&jsxs(Fragment$1,{children:[jsx(Dropdown.MenuGroup,{label:t(`tiptap.toolbar.cantoo.formatText`),children:cantooOptionsAdaptText.map(option=>jsx(Fragment,{children:jsx(Dropdown.Item,{onClick:option.action,icon:option.icon,className:option.className,children:jsx(`span`,{children:option.label})})},option.id))}),jsx(Dropdown.Separator,{})]}),cantooOptions.map(option=>jsx(Fragment,{children:jsx(Dropdown.Item,{onClick:option.action,icon:option.icon,children:jsx(`span`,{className:option.className,children:option.label})})},option.id))]})]})};export{EditorToolbarCantoo};
+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.DropdownMenu.js

@@ -1 +1,17 @@
-import IconButton from"../../../../components/Button/IconButton.js";import Tooltip from"../../../../components/Tooltip/Tooltip.js";import Dropdown from"../../../../components/Dropdown/Dropdown.js";import{Fragment}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";var EditorToolbarDropdownMenu=({triggerProps,icon,ariaLabel,options})=>jsxs(Fragment$1,{children:[jsx(Tooltip,{message:ariaLabel,placement:`top`,children:jsx(IconButton,{...triggerProps,type:`button`,variant:`ghost`,color:`tertiary`,icon,"aria-label":ariaLabel})}),jsx(Dropdown.Menu,{children:options.map((option,index)=>jsx(Fragment,{children:option.type===`divider`?jsx(Dropdown.Separator,{}):jsx(`div`,{onMouseDown:e=>e.preventDefault(),children:jsx(Dropdown.Item,{icon:option.icon,onClick:()=>option.action(null),children:option.label})})},index))})]});export{EditorToolbarDropdownMenu};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+const EditorToolbarDropdownMenu = ({
+  triggerProps,
+  icon,
+  ariaLabel,
+  options
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Tooltip, { message: ariaLabel, placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon, "aria-label": ariaLabel }) }),
+  /* @__PURE__ */ jsx(Dropdown.Menu, { children: options.map((option, index) => /* @__PURE__ */ jsx(Fragment$1, { children: option.type === "divider" ? /* @__PURE__ */ jsx(Dropdown.Separator, {}) : /* @__PURE__ */ jsx("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx(Dropdown.Item, { icon: option.icon, onClick: () => option.action(null), children: option.label }) }) }, index)) })
+] });
+export {
+  EditorToolbarDropdownMenu
+};

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

@@ -1 +1,54 @@
-import SvgIconSmiley from"../../../icons/components/IconSmiley.js";import IconButton from"../../../../components/Button/IconButton.js";import Tooltip from"../../../../components/Tooltip/Tooltip.js";import Dropdown from"../../../../components/Dropdown/Dropdown.js";import{useEditorContext}from"../../hooks/useEditorContext.js";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import EmojiPicker,{Categories}from"emoji-picker-react";var EditorToolbarEmoji=({triggerProps,itemRefs})=>{let{t}=useTranslation(),{editor}=useEditorContext();return jsxs(Fragment,{children:[jsx(Tooltip,{message:t(`tiptap.toolbar.emojisPicker`),placement:`top`,children:jsx(IconButton,{...triggerProps,type:`button`,variant:`ghost`,color:`tertiary`,icon:jsx(SvgIconSmiley,{}),"aria-label":t(`tiptap.toolbar.emojisPicker`)})}),jsx(Dropdown.Menu,{children:jsx(`div`,{ref:el=>itemRefs.current[`emoji-picker`]=el,children:jsx(EmojiPicker,{height:400,width:316,onEmojiClick:emoji=>editor?.commands.insertContentAt(editor.view.state.selection,emoji.emoji),previewConfig:{showPreview:!1},searchDisabled:!0,categories:[{category:Categories.SUGGESTED,name:`${t(`tiptap.toolbar.emojis.recentlyUsed`)}`},{category:Categories.SMILEYS_PEOPLE,name:`${t(`tiptap.toolbar.emojis.people`)}`},{category:Categories.ANIMALS_NATURE,name:`${t(`tiptap.toolbar.emojis.animalsNature`)}`},{category:Categories.FOOD_DRINK,name:`${t(`tiptap.toolbar.emojis.foodDrink`)}`},{category:Categories.TRAVEL_PLACES,name:`${t(`tiptap.toolbar.emojis.travelPlaces`)}`},{category:Categories.ACTIVITIES,name:`${t(`tiptap.toolbar.emojis.activities`)}`},{category:Categories.OBJECTS,name:`${t(`tiptap.toolbar.emojis.objects`)}`},{category:Categories.SYMBOLS,name:`${t(`tiptap.toolbar.emojis.symbols`)}`},{category:Categories.FLAGS,name:`${t(`tiptap.toolbar.emojis.flags`)}`}]})})})]})};export{EditorToolbarEmoji};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import EmojiPicker, { Categories } from "emoji-picker-react";
+import { useTranslation } from "react-i18next";
+import SvgIconSmiley from "../../../icons/components/IconSmiley.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 EditorToolbarEmoji = ({
+  triggerProps,
+  itemRefs
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    editor
+  } = useEditorContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.emojisPicker"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconSmiley, {}), "aria-label": t("tiptap.toolbar.emojisPicker") }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx("div", { ref: (el) => itemRefs.current["emoji-picker"] = el, children: /* @__PURE__ */ jsx(EmojiPicker, { height: 400, width: 316, onEmojiClick: (emoji) => editor == null ? void 0 : editor.commands.insertContentAt(editor.view.state.selection, emoji.emoji), previewConfig: {
+      showPreview: !1
+    }, searchDisabled: !0, categories: [{
+      category: Categories.SUGGESTED,
+      name: `${t("tiptap.toolbar.emojis.recentlyUsed")}`
+    }, {
+      category: Categories.SMILEYS_PEOPLE,
+      name: `${t("tiptap.toolbar.emojis.people")}`
+    }, {
+      category: Categories.ANIMALS_NATURE,
+      name: `${t("tiptap.toolbar.emojis.animalsNature")}`
+    }, {
+      category: Categories.FOOD_DRINK,
+      name: `${t("tiptap.toolbar.emojis.foodDrink")}`
+    }, {
+      category: Categories.TRAVEL_PLACES,
+      name: `${t("tiptap.toolbar.emojis.travelPlaces")}`
+    }, {
+      category: Categories.ACTIVITIES,
+      name: `${t("tiptap.toolbar.emojis.activities")}`
+    }, {
+      category: Categories.OBJECTS,
+      name: `${t("tiptap.toolbar.emojis.objects")}`
+    }, {
+      category: Categories.SYMBOLS,
+      name: `${t("tiptap.toolbar.emojis.symbols")}`
+    }, {
+      category: Categories.FLAGS,
+      name: `${t("tiptap.toolbar.emojis.flags")}`
+    }] }) }) })
+  ] });
+};
+export {
+  EditorToolbarEmoji
+};

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

@@ -1 +1,47 @@
-import SvgIconTextHighlight from"../../../icons/components/IconTextHighlight.js";import IconButton from"../../../../components/Button/IconButton.js";import Tooltip from"../../../../components/Tooltip/Tooltip.js";import{DefaultPalette}from"../../../../components/ColorPicker/ColorPalette.js";import ColorPicker from"../../../../components/ColorPicker/ColorPicker.js";import{useDropdownContext}from"../../../../components/Dropdown/DropdownContext.js";import Dropdown from"../../../../components/Dropdown/Dropdown.js";import{useEditorContext}from"../../hooks/useEditorContext.js";import{useCallback,useEffect,useState}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var EditorToolbarHighlightColor=({triggerProps,itemRefs})=>{let{t}=useTranslation(),{editor}=useEditorContext(),{visible}=useDropdownContext(),[color,setColor]=useState(`#4A4A4A`),applyColor=useCallback(value=>{value===color||value===``?(setColor(``),editor?.chain().focus().unsetHighlight().run()):(setColor(value),editor?.chain().focus().setHighlight({color:value}).run())},[color,editor]);useEffect(()=>{setColor(editor?.getAttributes(`customHighlight`).color??``)},[editor,editor?.state]);let palettes=[{...DefaultPalette,reset:{value:`transparent`,description:t(`tiptap.toolbar.highlight.none`)}}];return jsxs(Fragment$1,{children:[jsx(Tooltip,{message:t(`tiptap.toolbar.highlight.back`),placement:`top`,children:jsx(IconButton,{...triggerProps,type:`button`,variant:`ghost`,color:`tertiary`,icon:jsx(SvgIconTextHighlight,{}),"aria-label":t(`tiptap.toolbar.highlight.back`),className:visible?`is-selected`:``})}),jsx(Dropdown.Menu,{children:jsx(ColorPicker,{ref:el=>itemRefs.current[`color-picker`]=el,palettes,model:color,onSuccess:item=>applyColor(item.value)})})]})};export{EditorToolbarHighlightColor};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconTextHighlight from "../../../icons/components/IconTextHighlight.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { DefaultPalette } from "../../../../components/ColorPicker/ColorPalette.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+import ColorPicker from "../../../../components/ColorPicker/ColorPicker.js";
+const EditorToolbarHighlightColor = ({
+  triggerProps,
+  itemRefs
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    editor
+  } = useEditorContext(), [color, setColor] = useState("#4A4A4A"), isActive = useMemo(
+    () => editor == null ? void 0 : editor.isActive("customHighlight", {
+      color: /^#([0-9a-f]{3}){1,2}$/i
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editor, editor == null ? void 0 : editor.state]
+  ), applyColor = useCallback((value) => {
+    value === color || value === "" ? (setColor(""), editor == null || editor.chain().focus().unsetHighlight().run()) : (setColor(value), editor == null || editor.chain().focus().setHighlight({
+      color: value
+    }).run());
+  }, [color, editor]);
+  useEffect(() => {
+    setColor((editor == null ? void 0 : editor.getAttributes("customHighlight").color) ?? "");
+  }, [editor, editor == null ? void 0 : editor.state]);
+  const palettes = [{
+    ...DefaultPalette,
+    reset: {
+      value: "transparent",
+      description: t("tiptap.toolbar.highlight.none")
+    }
+  }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.highlight.back"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconTextHighlight, {}), "aria-label": t("tiptap.toolbar.highlight.back"), className: isActive ? "selected" : "" }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx(ColorPicker, { ref: (el) => itemRefs.current["color-picker"] = el, palettes, model: color, onSuccess: (item) => applyColor(item.value) }) })
+  ] });
+};
+export {
+  EditorToolbarHighlightColor
+};

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

@@ -1 +1,18 @@
-import Dropdown from"../../../../components/Dropdown/Dropdown.js";import{Fragment}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var EditorToolbarPlusMenu=({options})=>{let{t}=useTranslation();return jsxs(Fragment$1,{children:[jsx(Dropdown.Trigger,{variant:`ghost`,label:t(`tiptap.toolbar.plus`),size:`md`,tabIndex:-1}),jsx(Dropdown.Menu,{children:options.map((option,index)=>jsx(Fragment,{children:option.type===`divider`?jsx(Dropdown.Separator,{}):jsx(`div`,{onMouseDown:e=>e.preventDefault(),children:jsx(Dropdown.Item,{icon:option.icon,onClick:()=>option.action(null),children:option.label})})},index))})]})};export{EditorToolbarPlusMenu};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { useTranslation } from "react-i18next";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+const EditorToolbarPlusMenu = ({
+  options
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", label: t("tiptap.toolbar.plus"), size: "md", tabIndex: -1 }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: options.map((option, index) => /* @__PURE__ */ jsx(Fragment$1, { children: option.type === "divider" ? /* @__PURE__ */ jsx(Dropdown.Separator, {}) : /* @__PURE__ */ jsx("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx(Dropdown.Item, { icon: option.icon, onClick: () => option.action(null), children: option.label }) }) }, index)) })
+  ] });
+};
+export {
+  EditorToolbarPlusMenu
+};

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

@@ -1 +1,50 @@
-import SvgIconTextColor from"../../../icons/components/IconTextColor.js";import IconButton from"../../../../components/Button/IconButton.js";import Tooltip from"../../../../components/Tooltip/Tooltip.js";import{AccessiblePalette,DefaultPalette}from"../../../../components/ColorPicker/ColorPalette.js";import ColorPicker from"../../../../components/ColorPicker/ColorPicker.js";import{useDropdownContext}from"../../../../components/Dropdown/DropdownContext.js";import Dropdown from"../../../../components/Dropdown/Dropdown.js";import{useEditorContext}from"../../hooks/useEditorContext.js";import{useCallback,useEffect,useState}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var EditorToolbarTextColor=({triggerProps,itemRefs})=>{let{t}=useTranslation(),{editor}=useEditorContext(),{visible}=useDropdownContext(),[color,setColor]=useState(`#4A4A4A`),applyColor=useCallback(value=>{value===color?(setColor(``),editor?.chain().focus().unsetColor().run()):(setColor(value),editor?.chain().focus().setColor(value).run())},[color,editor]);useEffect(()=>{let textStyle=editor?.getAttributes(`textStyle`);setColor(textStyle?.color??`#4A4A4A`)},[editor,editor?.state]);let palettes=[{...DefaultPalette,label:t(`tiptap.toolbar.color.text`)},{...AccessiblePalette,label:t(`tiptap.toolbar.color.a13y`),tooltip:{message:t(`tiptap.toolbar.color.a13y.hint`),placement:`right`}}];return jsxs(Fragment$1,{children:[jsx(Tooltip,{message:t(`tiptap.toolbar.color.text`),placement:`top`,children:jsx(IconButton,{...triggerProps,type:`button`,variant:`ghost`,color:`tertiary`,icon:jsx(SvgIconTextColor,{}),"aria-label":t(`tiptap.toolbar.color.text`),className:visible?`is-selected`:``})}),jsx(Dropdown.Menu,{children:jsx(ColorPicker,{ref:el=>itemRefs.current[`color-picker`]=el,model:color,palettes,onSuccess:item=>applyColor(item.value)})})]})};export{EditorToolbarTextColor};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconTextColor from "../../../icons/components/IconTextColor.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { DefaultPalette, AccessiblePalette } from "../../../../components/ColorPicker/ColorPalette.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+import ColorPicker from "../../../../components/ColorPicker/ColorPicker.js";
+const EditorToolbarTextColor = ({
+  triggerProps,
+  itemRefs
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    editor
+  } = useEditorContext(), [color, setColor] = useState("#4A4A4A"), isActive = useMemo(
+    () => editor == null ? void 0 : editor.isActive("textStyle", {
+      color: /^#([0-9a-f]{3}){1,2}$/i
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editor, editor == null ? void 0 : editor.state]
+  ), applyColor = useCallback((value) => {
+    value === color ? (setColor(""), editor == null || editor.chain().focus().unsetColor().run()) : (setColor(value), editor == null || editor.chain().focus().setColor(value).run());
+  }, [color, editor]);
+  useEffect(() => {
+    const textStyle = editor == null ? void 0 : editor.getAttributes("textStyle");
+    setColor((textStyle == null ? void 0 : textStyle.color) ?? "#4A4A4A");
+  }, [editor, editor == null ? void 0 : editor.state]);
+  const palettes = [{
+    ...DefaultPalette,
+    label: t("tiptap.toolbar.color.text")
+  }, {
+    ...AccessiblePalette,
+    label: t("tiptap.toolbar.color.a13y"),
+    tooltip: {
+      message: t("tiptap.toolbar.color.a13y.hint"),
+      placement: "right"
+    }
+  }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.color.text"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconTextColor, {}), "aria-label": t("tiptap.toolbar.color.text"), className: isActive ? "selected" : "" }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx(ColorPicker, { ref: (el) => itemRefs.current["color-picker"] = el, model: color, palettes, onSuccess: (item) => applyColor(item.value) }) })
+  ] });
+};
+export {
+  EditorToolbarTextColor
+};