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

package/dist/modules/comments/components/DeleteModal.js

@@ -1 +1,25 @@
-import Button from"../../../components/Button/Button.js";import Modal from"../../../components/Modal/Modal.js";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var DeleteModal=({isOpen,onCancel,onSuccess})=>{let{t}=useTranslation();return jsxs(Modal,{size:`sm`,isOpen,onModalClose:onCancel,id:`delete-comment-modal`,children:[jsx(Modal.Header,{onModalClose:onCancel,children:t(`comment.delete.modal.title`)}),jsx(Modal.Body,{children:jsx(`p`,{children:t(`comment.delete.modal.body`)})}),jsxs(Modal.Footer,{children:[jsx(Button,{color:`tertiary`,onClick:onCancel,type:`button`,variant:`ghost`,children:t(`cancel`)}),jsx(Button,{color:`danger`,onClick:onSuccess,type:`button`,variant:`filled`,children:t(`comment.delete.modal.delete`)})]})]})};export{DeleteModal,DeleteModal as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Modal from "../../../components/Modal/Modal.js";
+import Button from "../../../components/Button/Button.js";
+const DeleteModal = ({
+  isOpen,
+  onCancel,
+  onSuccess
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsxs(Modal, { size: "sm", isOpen, onModalClose: onCancel, id: "delete-comment-modal", children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("comment.delete.modal.title") }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx("p", { children: t("comment.delete.modal.body") }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "danger", onClick: onSuccess, type: "button", variant: "filled", children: t("comment.delete.modal.delete") })
+    ] })
+  ] });
+};
+export {
+  DeleteModal,
+  DeleteModal as default
+};

package/dist/modules/comments/components/TextCounter.js

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

package/dist/modules/comments/constants.js

@@ -0,0 +1,10 @@
+const DEFAULT_MAX_COMMENT_LENGTH = 200, DEFAULT_MAX_REPLY_LENGTH = 200, DEFAULT_MAX_COMMENTS = 4, DEFAULT_ADD_COMMENTS = 5, DEFAULT_MAX_REPLIES = 5, DEFAULT_ADD_REPLIES = 5, DEFAULT_ALLOW_REPLIES = !0;
+export {
+  DEFAULT_ADD_COMMENTS,
+  DEFAULT_ADD_REPLIES,
+  DEFAULT_ALLOW_REPLIES,
+  DEFAULT_MAX_COMMENTS,
+  DEFAULT_MAX_COMMENT_LENGTH,
+  DEFAULT_MAX_REPLIES,
+  DEFAULT_MAX_REPLY_LENGTH
+};

package/dist/modules/comments/context/Context.js

@@ -1 +1,5 @@
-import{createContext}from"react";var CommentContext=createContext(null);export{CommentContext};
+import { createContext } from "react";
+const CommentContext = /* @__PURE__ */ createContext(null);
+export {
+  CommentContext
+};

package/dist/modules/comments/hooks/useAutosizeTextarea.js

@@ -1 +1,19 @@
-import{useEffect,useRef}from"react";var useAutosizeTextarea=autoFocus=>{let ref=useRef(null),resizeTextarea=()=>{if(ref.current){ref.current.style.height=`auto`;let scrollHeight=ref.current.scrollHeight;ref.current.style.height=`${scrollHeight}px`}};return useEffect(()=>{resizeTextarea(),autoFocus&&ref.current?.focus()}),[ref,event=>{event.currentTarget.setSelectionRange(event.currentTarget.value.length+1,event.currentTarget.value.length+1)},resizeTextarea]};export{useAutosizeTextarea};
+import { useRef, useEffect } from "react";
+const useAutosizeTextarea = (autoFocus) => {
+  const ref = useRef(null), resizeTextarea = () => {
+    if (ref.current) {
+      ref.current.style.height = "auto";
+      const scrollHeight = ref.current.scrollHeight;
+      ref.current.style.height = `${scrollHeight}px`;
+    }
+  };
+  return useEffect(() => {
+    var _a;
+    resizeTextarea(), autoFocus && ((_a = ref.current) == null || _a.focus());
+  }), [ref, (event) => {
+    event.currentTarget.setSelectionRange(event.currentTarget.value.length + 1, event.currentTarget.value.length + 1);
+  }, resizeTextarea];
+};
+export {
+  useAutosizeTextarea
+};

package/dist/modules/comments/hooks/useCommentReplies.js

@@ -1 +1,36 @@
-import{useEdificeClient}from"../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";import{useCommentsContext}from"./useCommentsContext.js";import{useState}from"react";import{useTranslation}from"react-i18next";var useCommentReplies=({parentComment})=>{let{profiles,options,replyToCommentId,defaultComments}=useCommentsContext(),{maxReplies,additionalReplies}=options,[repliesLimit,setRepliesLimit]=useState(maxReplies),{user}=useEdificeClient(),{t}=useTranslation(),showCommentForm=replyToCommentId===parentComment.id&&!parentComment.deleted,defaultReplies=defaultComments?.filter(comment=>comment.replyTo===parentComment.id&&!comment.deleted)??[],displayedReplies=defaultReplies?.sort((a,b)=>a.createdAt-b.createdAt).slice(0,repliesLimit)??[];return{t,profiles,user,showCommentForm,displayedReplies,showMoreReplies:displayedReplies.length<defaultReplies.length,handleMoreReplies:()=>{let newLimit=displayedReplies.length+(additionalReplies??2);newLimit!==displayedReplies.length&&setRepliesLimit(newLimit)}}};export{useCommentReplies};
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useCommentsContext } from "./useCommentsContext.js";
+const useCommentReplies = ({
+  parentComment
+}) => {
+  const {
+    profiles,
+    options,
+    replyToCommentId,
+    defaultComments
+  } = useCommentsContext(), {
+    maxReplies,
+    additionalReplies
+  } = options, [repliesLimit, setRepliesLimit] = useState(maxReplies), {
+    user
+  } = useEdificeClient(), {
+    t
+  } = useTranslation(), showCommentForm = replyToCommentId === parentComment.id && !parentComment.deleted, defaultReplies = (defaultComments == null ? void 0 : defaultComments.filter((comment) => comment.replyTo === parentComment.id && !comment.deleted)) ?? [], displayedReplies = (defaultReplies == null ? void 0 : defaultReplies.sort((a, b) => a.createdAt - b.createdAt).slice(0, repliesLimit)) ?? [], showMoreReplies = displayedReplies.length < defaultReplies.length;
+  return {
+    t,
+    profiles,
+    user,
+    showCommentForm,
+    displayedReplies,
+    showMoreReplies,
+    handleMoreReplies: () => {
+      const newLimit = displayedReplies.length + (additionalReplies ?? 2);
+      newLimit !== displayedReplies.length && setRepliesLimit(newLimit);
+    }
+  };
+};
+export {
+  useCommentReplies
+};

package/dist/modules/comments/hooks/useComments.js

@@ -1 +1,71 @@
-import{useEdificeClient}from"../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";import{useProfileQueries}from"./useProfileQueries.js";import{useMemo,useState}from"react";import{useTranslation}from"react-i18next";import illuPad from"@edifice.io/bootstrap/dist/images/emptyscreen/illu-pad.svg";var useComments=({defaultComments,options,type,callbacks})=>{let[editCommentId,setEditCommentId]=useState(null),[replyToCommentId,setReplyToCommentId]=useState(null),[commentLimit,setCommentLimit]=useState(options.maxComments),{t}=useTranslation(),{user}=useEdificeClient(),profilesQueries=useProfileQueries(Array.from(new Set(defaultComments?.map(comment=>comment.authorId)))),idsOfDeletedCommentWithNoReply=useMemo(()=>defaultComments?.filter(comment=>comment.deleted&&!defaultComments.some(c=>c.replyTo===comment.id)).map(comment=>comment.id)??[],[defaultComments]),displayedComments=useMemo(()=>{let result=defaultComments?.filter(comment=>!comment.replyTo&&!idsOfDeletedCommentWithNoReply.includes(comment.id))?.sort((a,b)=>b.createdAt-a.createdAt)??[];return type===`edit`?result.slice(0,commentLimit)??[]:result},[commentLimit,defaultComments]),showMoreComments=displayedComments?.length<(defaultComments?.filter(comment=>!comment.replyTo&&!idsOfDeletedCommentWithNoReply.includes(comment.id))?.length??0),titleCommentsCount=defaultComments?.filter(comment=>!comment.deleted)?.length??0;return{t,profilesQueries,title:t(titleCommentsCount>1?`comment.several`:`comment.little`,{number:titleCommentsCount}),user,emptyscreenPath:illuPad,displayedComments,showMoreComments,editCommentId,setEditCommentId,replyToCommentId,setReplyToCommentId,handleMoreComments:()=>{let newLimit=displayedComments.length+(options.additionalComments??5);newLimit!==displayedComments.length&&setCommentLimit(newLimit)},handleDeleteComment:id=>{type===`edit`&&callbacks?.delete(id)},handleCreateComment:(content,replyTo)=>{type===`edit`&&callbacks?.post(content,replyTo),replyTo&&setReplyToCommentId(null)},handleModifyComment:commentId=>{setEditCommentId(commentId)},handleUpdateComment:async comment=>{editCommentId&&(type===`edit`&&callbacks?.put({comment,commentId:editCommentId}),setEditCommentId(null))},handleReplyToComment:commentId=>{setReplyToCommentId(commentId)},handleReset:()=>{editCommentId&&setEditCommentId(null)}}};export{useComments};
+import { useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useProfileQueries } from "./useProfileQueries.js";
+import illuPad from "@edifice.io/bootstrap/dist/images/emptyscreen/illu-pad.svg";
+const useComments = ({
+  defaultComments,
+  options,
+  type,
+  callbacks
+}) => {
+  var _a, _b;
+  const [editCommentId, setEditCommentId] = useState(null), [replyToCommentId, setReplyToCommentId] = useState(null), [commentLimit, setCommentLimit] = useState(options.maxComments), {
+    t
+  } = useTranslation(), {
+    user
+  } = useEdificeClient(), usersIds = Array.from(new Set(defaultComments == null ? void 0 : defaultComments.map((comment) => comment.authorId))), profilesQueries = useProfileQueries(usersIds), idsOfDeletedCommentWithNoReply = useMemo(() => (defaultComments == null ? void 0 : defaultComments.filter((comment) => comment.deleted && !defaultComments.some((c) => c.replyTo === comment.id)).map((comment) => comment.id)) ?? [], [defaultComments]), displayedComments = useMemo(
+    () => {
+      var _a2;
+      const result = ((_a2 = defaultComments == null ? void 0 : defaultComments.filter((comment) => !comment.replyTo && !idsOfDeletedCommentWithNoReply.includes(comment.id))) == null ? void 0 : _a2.sort((a, b) => b.createdAt - a.createdAt)) ?? [];
+      return type === "edit" ? result.slice(0, commentLimit) ?? [] : result;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [commentLimit, defaultComments]
+  ), showMoreComments = (displayedComments == null ? void 0 : displayedComments.length) < (((_a = defaultComments == null ? void 0 : defaultComments.filter((comment) => !comment.replyTo && !idsOfDeletedCommentWithNoReply.includes(comment.id))) == null ? void 0 : _a.length) ?? 0), titleCommentsCount = ((_b = defaultComments == null ? void 0 : defaultComments.filter((comment) => !comment.deleted)) == null ? void 0 : _b.length) ?? 0, title = titleCommentsCount > 1 ? t("comment.several", {
+    number: titleCommentsCount
+  }) : t("comment.little", {
+    number: titleCommentsCount
+  });
+  return {
+    t,
+    profilesQueries,
+    title,
+    user,
+    emptyscreenPath: illuPad,
+    displayedComments,
+    showMoreComments,
+    editCommentId,
+    setEditCommentId,
+    replyToCommentId,
+    setReplyToCommentId,
+    handleMoreComments: () => {
+      const newLimit = displayedComments.length + (options.additionalComments ?? 5);
+      newLimit !== displayedComments.length && setCommentLimit(newLimit);
+    },
+    handleDeleteComment: (id) => {
+      type === "edit" && (callbacks == null || callbacks.delete(id));
+    },
+    handleCreateComment: (content, replyTo) => {
+      type === "edit" && (callbacks == null || callbacks.post(content, replyTo)), replyTo && setReplyToCommentId(null);
+    },
+    handleModifyComment: (commentId) => {
+      setEditCommentId(commentId);
+    },
+    handleUpdateComment: async (comment) => {
+      editCommentId && (type === "edit" && (callbacks == null || callbacks.put({
+        comment,
+        commentId: editCommentId
+      })), setEditCommentId(null));
+    },
+    handleReplyToComment: (commentId) => {
+      setReplyToCommentId(commentId);
+    },
+    handleReset: () => {
+      editCommentId && setEditCommentId(null);
+    }
+  };
+};
+export {
+  useComments
+};

package/dist/modules/comments/hooks/useCommentsContext.js

@@ -1 +1,11 @@
-import{CommentContext}from"../context/Context.js";import{useContext}from"react";var useCommentsContext=()=>{let context=useContext(CommentContext);if(!context)throw Error(`Cannot be rendered outside the Card component`);return context};export{useCommentsContext};
+import { useContext } from "react";
+import { CommentContext } from "../context/Context.js";
+const useCommentsContext = () => {
+  const context = useContext(CommentContext);
+  if (!context)
+    throw new Error("Cannot be rendered outside the Card component");
+  return context;
+};
+export {
+  useCommentsContext
+};

package/dist/modules/comments/hooks/useProfileQueries.js

@@ -1 +1,27 @@
-import{odeServices}from"@edifice.io/client";import{useQueries}from"@tanstack/react-query";var useProfileQueries=usersIds=>useQueries({queries:usersIds.map(userId=>({queryKey:[`post`,userId],queryFn:async()=>({userId,profile:(await odeServices.session().getUserProfile({params:{id:userId}}))[0]}),staleTime:1/0,enabled:!!userId})),combine:results=>({data:results.map(result=>result.data),isLoading:results.some(result=>result.isLoading)})});export{useProfileQueries};
+import { odeServices } from "@edifice.io/client";
+import { useQueries } from "@tanstack/react-query";
+const useProfileQueries = (usersIds) => useQueries({
+  queries: usersIds.map((userId) => ({
+    queryKey: ["post", userId],
+    queryFn: async () => {
+      const data = await odeServices.session().getUserProfile({
+        params: {
+          id: userId
+        }
+      });
+      return {
+        userId,
+        profile: data[0]
+      };
+    },
+    staleTime: 1 / 0,
+    enabled: !!userId
+  })),
+  combine: (results2) => ({
+    data: results2.map((result) => result.data),
+    isLoading: results2.some((result) => result.isLoading)
+  })
+});
+export {
+  useProfileQueries
+};

package/dist/modules/comments/provider/CommentProvider.js

@@ -1 +1,90 @@
-import Button from"../../../components/Button/Button.js";import Heading from"../../../components/Heading/Heading.js";import EmptyScreen from"../../../components/EmptyScreen/EmptyScreen.js";import{CommentContext}from"../context/Context.js";import{CommentForm}from"../components/CommentForm.js";import{CommentList}from"../components/CommentList.js";import{useComments}from"../hooks/useComments.js";import{useMemo}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";var CommentProvider=({comments:defaultComments,options:commentOptions,...props})=>{let options={maxCommentLength:200,maxReplyLength:200,maxComments:4,additionalComments:5,maxReplies:5,additionalReplies:5,allowReplies:!0,...commentOptions},{type}=props,{profilesQueries,title,user,emptyscreenPath,displayedComments,showMoreComments,editCommentId,setEditCommentId,replyToCommentId,setReplyToCommentId,t,handleMoreComments,handleDeleteComment,handleCreateComment,handleModifyComment,handleUpdateComment,handleReplyToComment,handleReset}=useComments({type,defaultComments,callbacks:type==`edit`?props.callbacks:null,options}),userRights=type===`edit`?props.rights:void 0,values=useMemo(()=>({displayedComments,defaultComments,profiles:profilesQueries.data,editCommentId,replyToCommentId,options,type,userRights,setEditCommentId,setReplyToCommentId,handleCreateComment,handleModifyComment,handleUpdateComment,handleDeleteComment,handleReplyToComment,handleReset}),[displayedComments,editCommentId,profilesQueries,options]);return jsx(CommentContext.Provider,{value:values,children:jsxs(`div`,{className:`my-24`,children:[jsx(Heading,{"data-testid":`comments-info-count-text`,level:`h3`,headingStyle:`h3`,className:displayedComments.length===0?`d-print-none`:``,children:title}),jsxs(`div`,{className:`my-24`,children:[user&&jsx(CommentForm,{userId:user.userId}),!profilesQueries.isLoading&&jsxs(Fragment$1,{children:[jsx(CommentList,{}),showMoreComments&&jsx(Button,{variant:`ghost`,color:`tertiary`,onClick:handleMoreComments,className:`my-16`,children:t(`comment.more`)})]})]}),!displayedComments.length&&type===`edit`&&jsxs(`div`,{className:`comments-emptyscreen d-print-none`,children:[jsx(`div`,{className:`comments-emptyscreen-wrapper`,children:jsx(EmptyScreen,{imageSrc:emptyscreenPath,size:150})}),jsx(`p`,{children:t(`comment.emptyscreen`)})]})]})})};export{CommentProvider as default};
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { CommentForm } from "../components/CommentForm.js";
+import { CommentList } from "../components/CommentList.js";
+import { DEFAULT_ALLOW_REPLIES, DEFAULT_ADD_REPLIES, DEFAULT_MAX_REPLIES, DEFAULT_ADD_COMMENTS, DEFAULT_MAX_COMMENTS, DEFAULT_MAX_REPLY_LENGTH, DEFAULT_MAX_COMMENT_LENGTH } from "../constants.js";
+import { CommentContext } from "../context/Context.js";
+import { useComments } from "../hooks/useComments.js";
+import Heading from "../../../components/Heading/Heading.js";
+import Button from "../../../components/Button/Button.js";
+import EmptyScreen from "../../../components/EmptyScreen/EmptyScreen.js";
+const CommentProvider = ({
+  comments: defaultComments,
+  options: commentOptions,
+  ...props
+}) => {
+  const options = {
+    maxCommentLength: DEFAULT_MAX_COMMENT_LENGTH,
+    maxReplyLength: DEFAULT_MAX_REPLY_LENGTH,
+    maxComments: DEFAULT_MAX_COMMENTS,
+    additionalComments: DEFAULT_ADD_COMMENTS,
+    maxReplies: DEFAULT_MAX_REPLIES,
+    additionalReplies: DEFAULT_ADD_REPLIES,
+    allowReplies: DEFAULT_ALLOW_REPLIES,
+    ...commentOptions
+  }, {
+    type
+  } = props, {
+    profilesQueries,
+    title,
+    user,
+    emptyscreenPath,
+    displayedComments,
+    showMoreComments,
+    editCommentId,
+    setEditCommentId,
+    replyToCommentId,
+    setReplyToCommentId,
+    t,
+    handleMoreComments,
+    handleDeleteComment,
+    handleCreateComment,
+    handleModifyComment,
+    handleUpdateComment,
+    handleReplyToComment,
+    handleReset
+  } = useComments({
+    type,
+    defaultComments,
+    callbacks: type == "edit" ? props.callbacks : null,
+    options
+  }), userRights = type === "edit" ? props.rights : void 0, values = useMemo(
+    () => ({
+      displayedComments,
+      defaultComments,
+      profiles: profilesQueries.data,
+      editCommentId,
+      replyToCommentId,
+      options,
+      type,
+      userRights,
+      setEditCommentId,
+      setReplyToCommentId,
+      handleCreateComment,
+      handleModifyComment,
+      handleUpdateComment,
+      handleDeleteComment,
+      handleReplyToComment,
+      handleReset
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [displayedComments, editCommentId, profilesQueries, options]
+  );
+  return /* @__PURE__ */ jsx(CommentContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
+    /* @__PURE__ */ jsx(Heading, { "data-testid": "comments-info-count-text", level: "h3", headingStyle: "h3", className: displayedComments.length === 0 ? "d-print-none" : "", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
+      user && /* @__PURE__ */ jsx(CommentForm, { userId: user.userId }),
+      !profilesQueries.isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CommentList, {}),
+        showMoreComments && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", onClick: handleMoreComments, className: "my-16", children: t("comment.more") })
+      ] })
+    ] }),
+    !displayedComments.length && type === "edit" && /* @__PURE__ */ jsxs("div", { className: "comments-emptyscreen d-print-none", children: [
+      /* @__PURE__ */ jsx("div", { className: "comments-emptyscreen-wrapper", children: /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: emptyscreenPath, size: 150 }) }),
+      /* @__PURE__ */ jsx("p", { children: t("comment.emptyscreen") })
+    ] })
+  ] }) });
+};
+export {
+  CommentProvider as default
+};

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

@@ -1 +1,135 @@
-import SvgIconImageSizeLarge from"../../../icons/components/IconImageSizeLarge.js";import SvgIconImageSizeMedium from"../../../icons/components/IconImageSizeMedium.js";import SvgIconImageSizeSmall from"../../../icons/components/IconImageSizeSmall.js";import SvgIconWand from"../../../icons/components/IconWand.js";import Toolbar from"../../../../components/Toolbar/Toolbar.js";import{useMemo}from"react";import{jsx}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import{BubbleMenu}from"@tiptap/react";var BubbleMenuEditImage=({editor,onEditImage,openEditImage,editable})=>{let{t}=useTranslation(),{selection}=editor.view.state,selectedNode=editor.view.state.doc.nodeAt(selection.anchor),handleButtonClick=buttonSize=>{editor.chain().focus().setAttributes({width:buttonSize.width,height:buttonSize.height,size:buttonSize.size}).run()},ImageSizeItems=useMemo(()=>[{type:`button`,name:`edit`,props:{size:`sm`,color:`secondary`,leftIcon:jsx(SvgIconWand,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.image.edit`),children:t(`tiptap.bubblemenu.edit`),onClick:onEditImage},tooltip:{message:t(`tiptap.tooltip.bubblemenu.image.edit`),position:`top`}},{type:`divider`,name:`div-4`},{type:`icon`,name:`small`,props:{icon:jsx(SvgIconImageSizeSmall,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.image.small`),color:`tertiary`,className:selectedNode?.attrs?.size===`small`&&selectedNode?.attrs?.width===250?`is-selected`:``,onClick:()=>handleButtonClick({size:`small`,width:250,height:`auto`})},tooltip:{message:t(`tiptap.tooltip.bubblemenu.image.small`),position:`top`}},{type:`icon`,name:`medium`,props:{icon:jsx(SvgIconImageSizeMedium,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.image.medium`),color:`tertiary`,className:selectedNode?.attrs?.size===`medium`&&selectedNode?.attrs?.width===350?`is-selected`:``,onClick:()=>handleButtonClick({size:`medium`,width:350,height:`auto`})},tooltip:{message:t(`tiptap.tooltip.bubblemenu.image.medium`),position:`top`}},{type:`icon`,name:`large`,props:{icon:jsx(SvgIconImageSizeLarge,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.image.big`),color:`tertiary`,className:selectedNode?.attrs?.size===`large`&&selectedNode?.attrs?.width===500?`is-selected`:``,onClick:()=>handleButtonClick({size:`large`,width:500,height:`auto`})},tooltip:{message:t(`tiptap.tooltip.bubblemenu.image.big`),position:`top`}}],[t,selectedNode]),tippyOptions=useMemo(()=>{function adjustRect(rect){let yOffset=0;if(window.visualViewport){let bottomScreen=window.innerHeight||document.documentElement.clientHeight;rect.bottom>=bottomScreen&&(yOffset+=rect.bottom-bottomScreen-rect.height)}return new DOMRect(rect.x,rect.y-yOffset,rect.width,rect.height)}return{placement:`bottom-start`,offset:[0,0],zIndex:999,duration:100,getReferenceClientRect:()=>{let parentDiv=editor?.isActive(`custom-image`)?editor.state.selection.$anchor:null;if(parentDiv){let parentDomNode=editor?.view.nodeDOM(parentDiv.pos);if(parentDomNode){let childDomNode=parentDomNode.firstChild;return adjustRect(childDomNode.getBoundingClientRect())}}return new DOMRect(0,0,100,100)}}},[editor]);return jsx(BubbleMenu,{className:openEditImage?`d-none`:``,shouldShow:({editor})=>editor.isActive(`custom-image`)&&!openEditImage,editor,tippyOptions,children:editable&&jsx(Toolbar,{className:`p-8`,items:ImageSizeItems})})};export{BubbleMenuEditImage as default};
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BubbleMenu } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
+import SvgIconImageSizeLarge from "../../../icons/components/IconImageSizeLarge.js";
+import SvgIconImageSizeMedium from "../../../icons/components/IconImageSizeMedium.js";
+import SvgIconImageSizeSmall from "../../../icons/components/IconImageSizeSmall.js";
+import SvgIconWand from "../../../icons/components/IconWand.js";
+const BubbleMenuEditImage = ({
+  editor,
+  onEditImage,
+  openEditImage,
+  editable
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    selection
+  } = editor.view.state, selectedNode = editor.view.state.doc.nodeAt(selection.anchor), handleButtonClick = (buttonSize) => {
+    editor.chain().focus().setAttributes({
+      width: buttonSize.width,
+      height: buttonSize.height,
+      size: buttonSize.size
+    }).run();
+  }, ImageSizeItems = useMemo(() => {
+    var _a, _b, _c, _d, _e, _f;
+    return [{
+      type: "button",
+      name: "edit",
+      props: {
+        size: "lg",
+        color: "secondary",
+        leftIcon: /* @__PURE__ */ jsx(SvgIconWand, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.image.edit"),
+        children: t("tiptap.bubblemenu.edit"),
+        onClick: onEditImage
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.image.edit"),
+        position: "top"
+      }
+    }, {
+      type: "divider",
+      name: "div-4"
+    }, {
+      type: "icon",
+      name: "small",
+      props: {
+        icon: /* @__PURE__ */ jsx(SvgIconImageSizeSmall, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.image.small"),
+        color: "tertiary",
+        className: ((_a = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _a.size) === "small" && ((_b = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _b.width) === 250 ? "is-selected" : "",
+        onClick: () => handleButtonClick({
+          size: "small",
+          width: 250,
+          height: "auto"
+        })
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.image.small"),
+        position: "top"
+      }
+    }, {
+      type: "icon",
+      name: "medium",
+      props: {
+        icon: /* @__PURE__ */ jsx(SvgIconImageSizeMedium, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.image.medium"),
+        color: "tertiary",
+        className: ((_c = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _c.size) === "medium" && ((_d = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _d.width) === 350 ? "is-selected" : "",
+        onClick: () => handleButtonClick({
+          size: "medium",
+          width: 350,
+          height: "auto"
+        })
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.image.medium"),
+        position: "top"
+      }
+    }, {
+      type: "icon",
+      name: "large",
+      props: {
+        icon: /* @__PURE__ */ jsx(SvgIconImageSizeLarge, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.image.big"),
+        color: "tertiary",
+        className: ((_e = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _e.size) === "large" && ((_f = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _f.width) === 500 ? "is-selected" : "",
+        onClick: () => handleButtonClick({
+          size: "large",
+          width: 500,
+          height: "auto"
+        })
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.image.big"),
+        position: "top"
+      }
+    }];
+  }, [t, selectedNode]), tippyOptions = useMemo(() => {
+    function adjustRect(rect) {
+      let yOffset = 0;
+      if (window.visualViewport) {
+        const bottomScreen = window.innerHeight || document.documentElement.clientHeight;
+        rect.bottom >= bottomScreen && (yOffset += rect.bottom - bottomScreen - rect.height);
+      }
+      return new DOMRect(rect.x, rect.y - yOffset, rect.width, rect.height);
+    }
+    return {
+      placement: "bottom-start",
+      offset: [0, 0],
+      zIndex: 999,
+      duration: 100,
+      // Try to get the bounding rect of the table.
+      getReferenceClientRect: () => {
+        const parentDiv = editor != null && editor.isActive("custom-image") ? editor.state.selection.$anchor : null;
+        if (parentDiv) {
+          const parentDomNode = editor == null ? void 0 : editor.view.nodeDOM(parentDiv.pos);
+          if (parentDomNode) {
+            const childDomNode = parentDomNode.firstChild;
+            return adjustRect(childDomNode.getBoundingClientRect());
+          }
+        }
+        return new DOMRect(0, 0, 100, 100);
+      }
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsx(BubbleMenu, { className: openEditImage ? "d-none" : "", shouldShow: ({
+    editor: editor2
+  }) => editor2.isActive("custom-image") && !openEditImage, editor, tippyOptions, children: editable && /* @__PURE__ */ jsx(Toolbar, { className: "p-8", items: ImageSizeItems }) });
+};
+export {
+  BubbleMenuEditImage as default
+};

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

@@ -1 +1,136 @@
-import SvgIconAlertTriangle from"../../../icons/components/IconAlertTriangle.js";import SvgIconDelete from"../../../icons/components/IconDelete.js";import SvgIconInfoCircle from"../../../icons/components/IconInfoCircle.js";import SvgIconQuestion from"../../../icons/components/IconQuestion.js";import SvgIconSuccessOutline from"../../../icons/components/IconSuccessOutline.js";import Toolbar from"../../../../components/Toolbar/Toolbar.js";import{useMemo}from"react";import{jsx}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import{BubbleMenu}from"@tiptap/react";var BubbleMenuEditInformationPane=({editor,editable})=>{let{t}=useTranslation(),{selection}=editor.view.state,selectedNode=selection.$from.node(1),InformationPaneTypeItems=useMemo(()=>[{type:`icon`,name:`info`,props:{size:`lg`,icon:jsx(SvgIconInfoCircle,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.information.pane.info`),className:selectedNode?.attrs?.type===`info`?`is-selected`:``,onClick:()=>editor.chain().focus().updateAttributes(`information-pane`,{type:`info`}).run()},tooltip:{message:t(`tiptap.tooltip.bubblemenu.information.pane.info`),position:`top`}},{type:`icon`,name:`success`,props:{size:`lg`,icon:jsx(SvgIconSuccessOutline,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.information.pane.success`),className:selectedNode?.attrs?.type===`success`?`is-selected`:``,onClick:()=>editor.chain().focus().updateAttributes(`information-pane`,{type:`success`}).run()},tooltip:{message:t(`tiptap.tooltip.bubblemenu.information.pane.success`),position:`top`}},{type:`icon`,name:`warning`,props:{size:`lg`,icon:jsx(SvgIconAlertTriangle,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.information.pane.warning`),className:selectedNode?.attrs?.type===`warning`?`is-selected`:``,onClick:()=>editor.chain().focus().updateAttributes(`information-pane`,{type:`warning`}).run()},tooltip:{message:t(`tiptap.tooltip.bubblemenu.information.pane.warning`),position:`top`}},{type:`icon`,name:`question`,props:{size:`lg`,icon:jsx(SvgIconQuestion,{}),"aria-label":t(`tiptap.tooltip.bubblemenu.information.pane.question`),className:selectedNode?.attrs?.type===`question`?`is-selected`:``,onClick:()=>editor.chain().focus().updateAttributes(`information-pane`,{type:`question`}).run()},tooltip:{message:t(`tiptap.tooltip.bubblemenu.information.pane.question`),position:`top`}},{type:`divider`,name:`div-4`},{type:`button`,name:`delete`,props:{size:`sm`,leftIcon:jsx(SvgIconDelete,{}),"aria-label":t(`tiptap.bubblemenu.delete`),children:t(`tiptap.bubblemenu.delete`),onClick:()=>editor.chain().focus().deleteNode(`information-pane`).run()},tooltip:{message:t(`tiptap.bubblemenu.delete`),position:`top`}}],[t,selectedNode]);return jsx(BubbleMenu,{shouldShow:({editor})=>editor.isActive(`information-pane`),editor,tippyOptions:useMemo(()=>({placement:`bottom`,offset:[0,0],zIndex:999,duration:100,getReferenceClientRect:()=>{let{state}=editor,{$anchor}=state.selection,informationPanePos=null;for(let depth=$anchor.depth;depth>=0;depth--)if($anchor.node(depth).type.name===`information-pane`){informationPanePos=$anchor.before(depth);break}if(informationPanePos!==null){let domNode=editor.view.nodeDOM(informationPanePos);for(;domNode&&domNode instanceof HTMLElement&&!domNode.classList.contains(`information-pane`);)domNode=domNode.children[0];if(domNode instanceof HTMLElement)return domNode.getBoundingClientRect()}return new DOMRect(0,0,0,0)}}),[editor]),children:editable&&jsx(Toolbar,{className:`p-8`,items:InformationPaneTypeItems})})};export{BubbleMenuEditInformationPane as default};
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BubbleMenu } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
+import SvgIconAlertTriangle from "../../../icons/components/IconAlertTriangle.js";
+import SvgIconDelete from "../../../icons/components/IconDelete.js";
+import SvgIconInfoCircle from "../../../icons/components/IconInfoCircle.js";
+import SvgIconQuestion from "../../../icons/components/IconQuestion.js";
+import SvgIconSuccessOutline from "../../../icons/components/IconSuccessOutline.js";
+const BubbleMenuEditInformationPane = ({
+  editor,
+  editable
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    selection
+  } = editor.view.state, selectedNode = selection.$from.node(1), InformationPaneTypeItems = useMemo(() => {
+    var _a, _b, _c, _d;
+    return [{
+      type: "icon",
+      name: "info",
+      props: {
+        size: "lg",
+        icon: /* @__PURE__ */ jsx(SvgIconInfoCircle, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.info"),
+        className: ((_a = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _a.type) === "info" ? "is-selected" : "",
+        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+          type: "info"
+        }).run()
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.information.pane.info"),
+        position: "top"
+      }
+    }, {
+      type: "icon",
+      name: "success",
+      props: {
+        size: "lg",
+        icon: /* @__PURE__ */ jsx(SvgIconSuccessOutline, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.success"),
+        className: ((_b = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _b.type) === "success" ? "is-selected" : "",
+        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+          type: "success"
+        }).run()
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.information.pane.success"),
+        position: "top"
+      }
+    }, {
+      type: "icon",
+      name: "warning",
+      props: {
+        size: "lg",
+        icon: /* @__PURE__ */ jsx(SvgIconAlertTriangle, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.warning"),
+        className: ((_c = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _c.type) === "warning" ? "is-selected" : "",
+        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+          type: "warning"
+        }).run()
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.information.pane.warning"),
+        position: "top"
+      }
+    }, {
+      type: "icon",
+      name: "question",
+      props: {
+        size: "lg",
+        icon: /* @__PURE__ */ jsx(SvgIconQuestion, {}),
+        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.question"),
+        className: ((_d = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _d.type) === "question" ? "is-selected" : "",
+        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+          type: "question"
+        }).run()
+      },
+      tooltip: {
+        message: t("tiptap.tooltip.bubblemenu.information.pane.question"),
+        position: "top"
+      }
+    }, {
+      type: "divider",
+      name: "div-4"
+    }, {
+      type: "button",
+      name: "delete",
+      props: {
+        size: "lg",
+        leftIcon: /* @__PURE__ */ jsx(SvgIconDelete, {}),
+        "aria-label": t("tiptap.bubblemenu.delete"),
+        children: t("tiptap.bubblemenu.delete"),
+        onClick: () => editor.chain().focus().deleteNode("information-pane").run()
+      },
+      tooltip: {
+        message: t("tiptap.bubblemenu.delete"),
+        position: "top"
+      }
+    }];
+  }, [t, selectedNode]), tippyOptions = useMemo(() => ({
+    placement: "bottom",
+    offset: [0, 0],
+    zIndex: 999,
+    duration: 100,
+    getReferenceClientRect: () => {
+      const {
+        state
+      } = editor, {
+        $anchor
+      } = state.selection;
+      let informationPanePos = null;
+      for (let depth = $anchor.depth; depth >= 0; depth--)
+        if ($anchor.node(depth).type.name === "information-pane") {
+          informationPanePos = $anchor.before(depth);
+          break;
+        }
+      if (informationPanePos !== null) {
+        let domNode = editor.view.nodeDOM(informationPanePos);
+        for (; domNode && domNode instanceof HTMLElement && !domNode.classList.contains("information-pane"); )
+          domNode = domNode.children[0];
+        if (domNode instanceof HTMLElement)
+          return domNode.getBoundingClientRect();
+      }
+      return new DOMRect(0, 0, 0, 0);
+    }
+  }), [editor]);
+  return /* @__PURE__ */ jsx(BubbleMenu, { shouldShow: ({
+    editor: editor2
+  }) => editor2.isActive("information-pane"), editor, tippyOptions, children: editable && /* @__PURE__ */ jsx(Toolbar, { className: "p-8", items: InformationPaneTypeItems }) });
+};
+export {
+  BubbleMenuEditInformationPane as default
+};