@edifice.io/react 2.2.2 → 2.2.3

package/dist/modules/comments/context/Context.d.ts

@@ -1,18 +1,20 @@
 import { RightRole } from '@edifice.io/client';
 import { CommentOptions, CommentProps, CommentType, UserProfileResult } from '../types';
 export declare const CommentContext: import('react').Context<{
-    comments: CommentProps[] | undefined;
-    content: string;
+    displayedComments: CommentProps[] | undefined;
+    defaultComments: CommentProps[] | undefined;
     editCommentId: string | null;
+    replyToCommentId: string | null;
     profiles: (UserProfileResult | undefined)[];
     options: Partial<CommentOptions>;
     type: CommentType;
     userRights?: Record<RightRole, boolean>;
     setEditCommentId: (value: string | null) => void;
+    setReplyToCommentId: (value: string | null) => void;
     handleModifyComment: (commentId: string) => void;
-    handleChangeContent: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    handleCreateComment: (content: string) => void;
+    handleCreateComment: (content: string, replyTo?: string) => void;
     handleUpdateComment: (comment: string) => void;
     handleDeleteComment: (id: string) => void;
+    handleReplyToComment: (commentId: string) => void;
     handleReset: () => void;
 } | null>;

package/dist/modules/comments/hooks/useCommentReplies.d.ts

@@ -0,0 +1,12 @@
+import { CommentProps } from '../types';
+export declare const useCommentReplies: ({ parentComment, }: {
+    parentComment: CommentProps;
+}) => {
+    t: import('i18next').TFunction<"translation", undefined>;
+    profiles: (import('../types').UserProfileResult | undefined)[];
+    user: import('@edifice.io/client').IUserInfo | undefined;
+    showCommentForm: boolean;
+    displayedReplies: CommentProps[];
+    showMoreReplies: boolean;
+    handleMoreReplies: () => void;
+};

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

@@ -0,0 +1,36 @@
+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.d.ts

@@ -5,6 +5,7 @@ export declare const useComments: ({ defaultComments, options, type, callbacks,
     type: CommentType;
     callbacks: CommentCallbacks | null;
 }) => {
+    t: import('i18next').TFunction<"translation", undefined>;
     profilesQueries: {
         data: ({
             userId: string;
@@ -12,21 +13,20 @@ export declare const useComments: ({ defaultComments, options, type, callbacks,
         } | undefined)[];
         isLoading: boolean;
     };
-    content: string;
     title: string;
     user: import('@edifice.io/client').IUserInfo | undefined;
     emptyscreenPath: string;
-    defaultCommentsCount: number;
-    comments: CommentProps[];
+    displayedComments: CommentProps[];
+    showMoreComments: boolean;
     editCommentId: string | null;
     setEditCommentId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
-    commentsCount: number;
-    t: import('i18next').TFunction<"translation", undefined>;
+    replyToCommentId: string | null;
+    setReplyToCommentId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
     handleMoreComments: () => void;
-    handleChangeContent: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     handleDeleteComment: (id: string) => void;
-    handleCreateComment: (content: string) => void;
+    handleCreateComment: (content: string, replyTo?: string) => void;
     handleModifyComment: (commentId: string) => void;
     handleUpdateComment: (comment: string) => Promise<void>;
+    handleReplyToComment: (commentId: string) => void;
     handleReset: () => void;
 };

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

@@ -9,43 +9,45 @@ const useComments = ({
   type,
   callbacks
 }) => {
-  const [content, setContent] = useState(""), [editCommentId, setEditCommentId] = useState(null), [commentLimit, setCommentLimit] = useState(options.maxComments), {
+  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), comments = useMemo(
-    () => type === "edit" ? (defaultComments == null ? void 0 : defaultComments.sort((a, b) => b.createdAt - a.createdAt).slice(0, commentLimit)) ?? [] : (defaultComments == null ? void 0 : defaultComments.sort((a, b) => b.createdAt - a.createdAt)) ?? [],
+  } = 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]
-  ), commentsCount = (comments == null ? void 0 : comments.length) ?? 0, defaultCommentsCount = (defaultComments == null ? void 0 : defaultComments.length) ?? 0, title = defaultCommentsCount && defaultCommentsCount > 1 ? t("comment.several", {
-    number: defaultCommentsCount
+  ), 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: defaultCommentsCount
+    number: titleCommentsCount
   });
   return {
+    t,
     profilesQueries,
-    content,
     title,
     user,
     emptyscreenPath: illuPad,
-    defaultCommentsCount,
-    comments,
+    displayedComments,
+    showMoreComments,
     editCommentId,
     setEditCommentId,
-    commentsCount,
-    t,
+    replyToCommentId,
+    setReplyToCommentId,
     handleMoreComments: () => {
-      const newLimit = (comments == null ? void 0 : comments.length) + (options.additionalComments ?? 5);
-      newLimit !== comments.length && setCommentLimit(newLimit);
-    },
-    handleChangeContent: (event) => {
-      setContent(event.target.value);
+      const newLimit = displayedComments.length + (options.additionalComments ?? 5);
+      newLimit !== displayedComments.length && setCommentLimit(newLimit);
     },
     handleDeleteComment: (id) => {
       type === "edit" && (callbacks == null || callbacks.delete(id));
     },
-    handleCreateComment: (content2) => {
-      type === "edit" && (callbacks == null || callbacks.post(content2)), setContent("");
+    handleCreateComment: (content, replyTo) => {
+      type === "edit" && (callbacks == null || callbacks.post(content, replyTo)), replyTo && setReplyToCommentId(null);
     },
     handleModifyComment: (commentId) => {
       setEditCommentId(commentId);
@@ -56,8 +58,11 @@ const useComments = ({
         commentId: editCommentId
       })), setEditCommentId(null));
     },
+    handleReplyToComment: (commentId) => {
+      setReplyToCommentId(commentId);
+    },
     handleReset: () => {
-      setContent(""), editCommentId && setEditCommentId(null);
+      editCommentId && setEditCommentId(null);
     }
   };
 };

package/dist/modules/comments/hooks/useCommentsContext.d.ts

@@ -1,16 +1,18 @@
 export declare const useCommentsContext: () => {
-    comments: import('../types').CommentProps[] | undefined;
-    content: string;
+    displayedComments: import('../types').CommentProps[] | undefined;
+    defaultComments: import('../types').CommentProps[] | undefined;
     editCommentId: string | null;
+    replyToCommentId: string | null;
     profiles: (import('../types').UserProfileResult | undefined)[];
     options: Partial<import('../types').CommentOptions>;
     type: import('../types').CommentType;
     userRights?: Record<import('@edifice.io/client').RightRole, boolean>;
     setEditCommentId: (value: string | null) => void;
+    setReplyToCommentId: (value: string | null) => void;
     handleModifyComment: (commentId: string) => void;
-    handleChangeContent: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    handleCreateComment: (content: string) => void;
+    handleCreateComment: (content: string, replyTo?: string) => void;
     handleUpdateComment: (comment: string) => void;
     handleDeleteComment: (id: string) => void;
+    handleReplyToComment: (commentId: string) => void;
     handleReset: () => void;
 };

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

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { CommentForm } from "../components/CommentForm.js";
 import { CommentHeader } from "../components/CommentHeader.js";
 import { CommentList } from "../components/CommentList.js";
-import { DEFAULT_MAX_REPLIES, DEFAULT_ADD_COMMENTS, DEFAULT_MAX_COMMENTS, DEFAULT_MAX_REPLY_LENGTH, DEFAULT_MAX_COMMENT_LENGTH } from "../constants.js";
+import { 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 Button from "../../../components/Button/Button.js";
@@ -19,27 +19,28 @@ const CommentProvider = ({
     maxComments: DEFAULT_MAX_COMMENTS,
     additionalComments: DEFAULT_ADD_COMMENTS,
     maxReplies: DEFAULT_MAX_REPLIES,
+    additionalReplies: DEFAULT_ADD_REPLIES,
     ...commentOptions
   }, {
     type
   } = props, {
     profilesQueries,
-    content,
     title,
     user,
     emptyscreenPath,
-    defaultCommentsCount,
-    comments,
+    displayedComments,
+    showMoreComments,
     editCommentId,
     setEditCommentId,
-    commentsCount,
+    replyToCommentId,
+    setReplyToCommentId,
     t,
     handleMoreComments,
-    handleChangeContent,
     handleDeleteComment,
     handleCreateComment,
     handleModifyComment,
     handleUpdateComment,
+    handleReplyToComment,
     handleReset
   } = useComments({
     type,
@@ -48,23 +49,25 @@ const CommentProvider = ({
     options
   }), userRights = type === "edit" ? props.rights : void 0, values = useMemo(
     () => ({
-      comments,
-      content,
+      displayedComments,
+      defaultComments,
       profiles: profilesQueries.data,
       editCommentId,
+      replyToCommentId,
       options,
       type,
       userRights,
       setEditCommentId,
+      setReplyToCommentId,
       handleCreateComment,
       handleModifyComment,
       handleUpdateComment,
       handleDeleteComment,
-      handleReset,
-      handleChangeContent
+      handleReplyToComment,
+      handleReset
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [comments, content, editCommentId, profilesQueries, options]
+    [displayedComments, editCommentId, profilesQueries, options]
   );
   return /* @__PURE__ */ jsx(CommentContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
     /* @__PURE__ */ jsx(CommentHeader, { title }),
@@ -72,10 +75,10 @@ const CommentProvider = ({
       user && /* @__PURE__ */ jsx(CommentForm, { userId: user.userId }),
       profilesQueries.isLoading ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CommentList, {}),
-        commentsCount !== defaultCommentsCount && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", onClick: handleMoreComments, className: "my-16", children: t("comment.more") })
+        showMoreComments && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", onClick: handleMoreComments, className: "my-16", children: t("comment.more") })
       ] })
     ] }),
-    !commentsCount && type === "edit" && /* @__PURE__ */ jsxs("div", { className: "comments-emptyscreen", children: [
+    !displayedComments.length && type === "edit" && /* @__PURE__ */ jsxs("div", { className: "comments-emptyscreen", children: [
       /* @__PURE__ */ jsx("div", { className: "comments-emptyscreen-wrapper", children: /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: emptyscreenPath, size: 150 }) }),
       /* @__PURE__ */ jsx("p", { children: t("comment.emptyscreen") })
     ] })

package/dist/modules/comments/types.d.ts

@@ -24,13 +24,22 @@ export interface CommentProps {
      * Date when comment was updated
      */
     updatedAt?: number;
+    /**
+     * The comment parent ID.
+     */
+    replyTo?: string;
+    /**
+     * If the comment is deleted.
+     */
+    deleted?: boolean;
 }
 export interface CommentCallbacks {
     /**
      * Method to create a new comment
      * Get the new comment in the callback function
+     * If replyTo is provided, it is a reply to a comment
      */
-    post: (comment: string) => Promise<void>;
+    post: (comment: string, replyTo?: string) => Promise<void>;
     /**
      * Method to update a comment
      * Get the comment and commentId in the callback function
@@ -91,6 +100,10 @@ export type CommentOptions = {
      * Limit on displaying replies to a comment
      */
     maxReplies: number;
+    /**
+     * Number of replies to load additionally in the limited list
+     */
+    additionalReplies: number;
 };
 export interface UserProfileResult {
     /**

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

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+declare const BubbleMenuEditInformationPane: ({ editor, editable, }: {
+    editor: Editor;
+    editable: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default BubbleMenuEditInformationPane;

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

@@ -0,0 +1,136 @@
+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",
+        leftIcon: /* @__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",
+        leftIcon: /* @__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",
+        leftIcon: /* @__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",
+        leftIcon: /* @__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
+};

package/dist/modules/editor/components/BubbleMenuEditInformationPane/index.d.ts

@@ -0,0 +1 @@
+export { default as BubbleMenuEditInformationPane } from './BubbleMenuEditInformationPane';

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+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";
@@ -16,6 +16,7 @@ import { EditorToolbar } from "../EditorToolbar/EditorToolbar.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(({
@@ -70,7 +71,10 @@ const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/
     ] }),
     /* @__PURE__ */ jsx(LinkToolbar, { editor, ...linkToolbarHandlers }),
     /* @__PURE__ */ jsx(TableToolbar, { editor }),
-    editor && /* @__PURE__ */ jsx(BubbleMenuEditImage, { editor, onEditImage: imageModal.handleEdit, openEditImage: imageModal.isOpen, editable }),
+    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 }),

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

@@ -5,6 +5,7 @@ import "@tiptap/react";
 import "@tiptap/starter-kit";
 import SvgIconAlignLeft from "../../../icons/components/IconAlignLeft.js";
 import SvgIconBulletList from "../../../icons/components/IconBulletList.js";
+import SvgIconInfoRectangle from "../../../icons/components/IconInfoRectangle.js";
 import SvgIconLandscape from "../../../icons/components/IconLandscape.js";
 import SvgIconLink from "../../../icons/components/IconLink.js";
 import SvgIconMic from "../../../icons/components/IconMic.js";
@@ -213,6 +214,17 @@ const EditorToolbar = ({
         visibility: showIf(hasMark("customHighlight", editor)),
         tooltip: t("tiptap.toolbar.highlight.back")
       },
+      //--------------- INFORMATION PANE ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconInfoRectangle, {}),
+          "aria-label": t("tiptap.toolbar.information.pane"),
+          onClick: () => editor == null ? void 0 : editor.chain().focus().setInformationPane("info").run()
+        },
+        name: "information-pane",
+        tooltip: t("tiptap.toolbar.information.pane")
+      },
       //-------------------------------------//
       {
         type: "divider",

package/dist/modules/editor/components/NodeView/InformationPaneNodeView.d.ts

@@ -0,0 +1,2 @@
+declare const InformationPaneNodeView: (Component: any) => import('@tiptap/core').Node<any, any>;
+export default InformationPaneNodeView;

package/dist/modules/editor/components/NodeView/InformationPaneNodeView.js

@@ -0,0 +1,10 @@
+import { InformationPane } from "@edifice.io/tiptap-extensions/information-pane";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const InformationPaneNodeView = (Component) => InformationPane.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  }
+});
+export {
+  InformationPaneNodeView as default
+};

package/dist/modules/editor/components/NodeView/index.d.ts

@@ -3,3 +3,4 @@ export { default as AttachmentNodeView } from './AttachmentNodeView';
 export { default as ImageNodeView } from './ImageNodeView';
 export { default as LinkerNodeView } from './LinkerNodeView';
 export { default as VideoNodeView } from './VideoNodeView';
+export { default as InformationPaneNodeView } from './InformationPaneNodeView';

package/dist/modules/editor/components/Renderer/InformationPaneRenderer.d.ts

@@ -0,0 +1,3 @@
+import { MediaResizeProps } from '../../hooks';
+declare const InformationPaneRenderer: (props: MediaResizeProps) => import("react/jsx-runtime").JSX.Element;
+export default InformationPaneRenderer;

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import SvgIconAlertTriangle from "../../../icons/components/IconAlertTriangle.js";
+import SvgIconInfoCircle from "../../../icons/components/IconInfoCircle.js";
+import SvgIconQuestion from "../../../icons/components/IconQuestion.js";
+import SvgIconSuccessOutline from "../../../icons/components/IconSuccessOutline.js";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+const InformationPaneRenderer = (props) => {
+  const {
+    node
+  } = props, getIconByType = (type) => {
+    switch (type) {
+      case "warning":
+        return /* @__PURE__ */ jsx(SvgIconAlertTriangle, { color: "#F59700" });
+      case "success":
+        return /* @__PURE__ */ jsx(SvgIconSuccessOutline, { color: "#7DBF85" });
+      case "info":
+        return /* @__PURE__ */ jsx(SvgIconInfoCircle, { color: "#2A9CC8" });
+      case "question":
+        return /* @__PURE__ */ jsx(SvgIconQuestion, { color: "#823AA1" });
+      default:
+        return /* @__PURE__ */ jsx(SvgIconInfoCircle, { color: "#2A9CC8" });
+    }
+  };
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { node, className: "react-component", children: /* @__PURE__ */ jsxs("div", { className: `information-pane information-pane-${node.attrs.type}`, "data-information-pane": !0, "data-type": node.attrs.type, children: [
+    /* @__PURE__ */ jsx("span", { className: "information-pane-icon", children: getIconByType(node.attrs.type) }),
+    /* @__PURE__ */ jsx(NodeViewContent, { style: {
+      width: "100%"
+    } })
+  ] }) });
+};
+export {
+  InformationPaneRenderer as default
+};

package/dist/modules/editor/components/Renderer/index.d.ts

@@ -2,3 +2,4 @@ export { default as AudioRenderer } from './AudioRenderer';
 export { default as AttachmentRenderer } from './AttachmentRenderer';
 export { default as LinkerRenderer } from './LinkerRenderer';
 export { default as MediaRenderer } from './MediaRenderer';
+export { default as InformationPaneRenderer } from './InformationPaneRenderer';

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

@@ -32,10 +32,12 @@ import AudioNodeView from "../components/NodeView/AudioNodeView.js";
 import LinkerNodeView from "../components/NodeView/LinkerNodeView.js";
 import ImageNodeView from "../components/NodeView/ImageNodeView.js";
 import AttachmentNodeView from "../components/NodeView/AttachmentNodeView.js";
+import InformationPaneNodeView from "../components/NodeView/InformationPaneNodeView.js";
 import MediaRenderer from "../components/Renderer/MediaRenderer.js";
 import AudioRenderer from "../components/Renderer/AudioRenderer.js";
 import LinkerRenderer from "../components/Renderer/LinkerRenderer.js";
 import AttachmentRenderer from "../components/Renderer/AttachmentRenderer.js";
+import InformationPaneRenderer from "../components/Renderer/InformationPaneRenderer.js";
 const useTipTapEditor = (editable, content, focus, placeholder, onContentChange, visibility = "protected") => {
   const {
     currentLanguage
@@ -63,7 +65,7 @@ const useTipTapEditor = (editable, content, focus, placeholder, onContentChange,
       levels: [1, 2]
     }), Typography, FontSize, SpeechRecognition, SpeechSynthesis.configure({
       lang: (currentLanguage == null ? void 0 : currentLanguage.length) === 2 ? `${currentLanguage}-${currentLanguage.toUpperCase()}` : "fr-FR"
-    }), Iframe, Hyperlink, FontFamily, Mathematics, Alert, VideoNodeView(MediaRenderer), AudioNodeView(AudioRenderer), LinkerNodeView(LinkerRenderer), ImageNodeView(MediaRenderer, uploadFile), AttachmentNodeView(AttachmentRenderer)],
+    }), Iframe, Hyperlink, FontFamily, Mathematics, Alert, VideoNodeView(MediaRenderer), AudioNodeView(AudioRenderer), LinkerNodeView(LinkerRenderer), ImageNodeView(MediaRenderer, uploadFile), AttachmentNodeView(AttachmentRenderer), InformationPaneNodeView(InformationPaneRenderer)],
     content,
     // If the onContentChange callback is provided, we call it on every content change.
     ...onContentChange ? {

package/dist/modules/icons/components/IconInfoRectangle.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+declare const SvgIconInfoRectangle: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => import("react/jsx-runtime").JSX.Element;
+export default SvgIconInfoRectangle;