@edifice.io/react 1.7.4-develop-pedago.20241211160712

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

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

package/dist/modules/comments/provider/CommentProvider.d.ts

@@ -0,0 +1,3 @@
+import { RootProps } from '../types';
+declare const CommentProvider: ({ comments: defaultComments, options: commentOptions, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+export default CommentProvider;

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

@@ -0,0 +1,85 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+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_COMMENT_LENGTH, DEFAULT_MAX_REPLY_LENGTH, DEFAULT_MAX_COMMENTS, DEFAULT_ADD_COMMENTS, DEFAULT_MAX_REPLIES } from "../constants.js";
+import { CommentContext } from "../context/Context.js";
+import { useComments } from "../hooks/useComments.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,
+    ...commentOptions
+  }, {
+    type
+  } = props, {
+    profilesQueries,
+    content,
+    title,
+    user,
+    emptyscreenPath,
+    defaultCommentsCount,
+    comments,
+    editCommentId,
+    setEditCommentId,
+    commentsCount,
+    t,
+    handleMoreComments,
+    handleChangeContent,
+    handleDeleteComment,
+    handleCreateComment,
+    handleModifyComment,
+    handleUpdateComment,
+    handleReset
+  } = useComments({
+    type,
+    defaultComments,
+    callbacks: type == "edit" ? props.callbacks : null,
+    options
+  }), values = useMemo(
+    () => ({
+      comments,
+      content,
+      profiles: profilesQueries.data,
+      editCommentId,
+      options,
+      type,
+      setEditCommentId,
+      handleCreateComment,
+      handleModifyComment,
+      handleUpdateComment,
+      handleDeleteComment,
+      handleReset,
+      handleChangeContent
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [comments, content, editCommentId, profilesQueries, options]
+  );
+  return /* @__PURE__ */ jsx(CommentContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
+    /* @__PURE__ */ jsx(CommentHeader, { title }),
+    /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
+      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") })
+      ] })
+    ] }),
+    !commentsCount && 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") })
+    ] })
+  ] }) });
+};
+export {
+  CommentProvider as default
+};

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

@@ -0,0 +1,102 @@
+import { UserProfile } from '@edifice.io/client';
+export interface CommentProps {
+    /**
+     * Comment Id
+     */
+    id: string;
+    /**
+     * Comment text
+     */
+    comment: string;
+    /**
+     * Author Id
+     */
+    authorId: string;
+    /**
+     * Name of the author of the comment
+     */
+    authorName: string;
+    /**
+     * Date when comment was created
+     */
+    createdAt: number;
+    /**
+     * Date when comment was updated
+     */
+    updatedAt?: number;
+}
+export interface CommentCallbacks {
+    /**
+     * Method to create a new comment
+     * Get the new comment in the callback function
+     */
+    post: (comment: string) => Promise<void>;
+    /**
+     * Method to update a comment
+     * Get the comment and commentId in the callback function
+     */
+    put: ({ comment, commentId, }: {
+        comment: string;
+        commentId: string;
+    }) => Promise<void>;
+    /**
+     * Method to delete a comment
+     * Get the commentId in the callback function
+     */
+    delete: (commentId: string) => Promise<void>;
+}
+interface BaseProps {
+    /**
+     * List of comments
+     */
+    comments: CommentProps[] | undefined;
+    /**
+     * Options to configure CommentProvider
+     */
+    options?: Partial<CommentOptions>;
+}
+interface EditRootProps extends BaseProps {
+    type: 'edit';
+    /**
+     * Callbacks to perform CRUD on comment
+     */
+    callbacks: CommentCallbacks;
+}
+interface ReadRootProps extends BaseProps {
+    type: 'read';
+}
+export type RootProps = EditRootProps | ReadRootProps;
+export type CommentOptions = {
+    /**
+     * Setting the text limit on a comment
+     */
+    maxCommentLength: number;
+    /**
+     * Setting the text limit on a response
+     */
+    maxReplyLength: number;
+    /**
+     * Limit for displaying comments in the list
+     */
+    maxComments: number;
+    /**
+     * Number of comments to load additionally in the limited list
+     */
+    additionalComments: number;
+    /**
+     * Limit on displaying replies to a comment
+     */
+    maxReplies: number;
+};
+export interface UserProfileResult {
+    /**
+     * If of a user
+     */
+    userId: string;
+    /**
+     * Profile of a user (Teacher, Student, ...)
+     */
+    profile: UserProfile[number];
+}
+export type CommentType = 'read' | 'edit';
+export {};

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

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

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

@@ -0,0 +1,135 @@
+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/BubbleMenuEditImage/index.d.ts

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

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

@@ -0,0 +1,45 @@
+import { WorkspaceVisibility } from '@edifice.io/client';
+import { Content, FocusPosition, JSONContent } from '@tiptap/react';
+export interface EditorRef {
+    /** Get the current content. */
+    getContent: (as: 'html' | 'json' | 'plain') => undefined | string | JSONContent;
+    /** Get speech synthetisis current state */
+    isSpeeching: () => boolean;
+    /** [De]activate speech synthetisis */
+    toogleSpeechSynthetisis: () => boolean;
+}
+/**
+ * Editor component properties
+ */
+export interface EditorProps {
+    /**
+     * (Optional) id of the HTML element.
+     * Useful with an external `<FormControl id=...><Label/>`.
+     */
+    id?: string;
+    /** Rich content to render. */
+    content: Content;
+    /**
+     * Rendering mode : `edit` to allow content modifications, or `read` (default)
+     * Switching to `edit` mode will also render the toolbar
+     * (unless `toolbar` property is `none`).
+     */
+    mode?: 'edit' | 'read';
+    /** Toolbar to display in `edit` mode. */
+    toolbar?: 'full' | 'none';
+    /** Display with or without a border */
+    variant?: 'outline' | 'ghost';
+    /** Set focus position to the editor */
+    focus?: FocusPosition;
+    /** Editor placeholder content */
+    placeholder?: string;
+    /** Visibility of the content created
+     *  this will impact where the uploaded files will be upload and the availability of the public media files  */
+    visibility?: WorkspaceVisibility;
+    /** Function to listen if content change */
+    onContentChange?: ({ editor }: {
+        editor: any;
+    }) => void;
+}
+declare const Editor: import('react').ForwardRefExoticComponent<EditorProps & import('react').RefAttributes<EditorRef>>;
+export default Editor;

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

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, Suspense, lazy } from "react";
+import { EditorContent } from "@tiptap/react";
+import clsx from "clsx";
+import { useEdificeClient } from "../../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useMathsStyles } from "../../hooks/useMathsStyles.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 { EditorContext } from "../../hooks/useEditorContext.js";
+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 LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.js";
+import MediaLibrary from "../../../multimedia/MediaLibrary/MediaLibrary.js";
+const MathsModal = /* @__PURE__ */ lazy(async () => await import("./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
+}, ref) => {
+  const editorId = useId(), {
+    appCode
+  } = useEdificeClient(), {
+    editor,
+    editable
+  } = useTipTapEditor(mode === "edit", content, focus, placeholder, onContentChange, visibility), {
+    ref: mediaLibraryModalRef,
+    ...mediaLibraryModalHandlers
+  } = useMediaLibraryEditor(editor), {
+    toggle: toggleMathsModal,
+    ...mathsModalHandlers
+  } = useMathsModal(editor), imageModal = useImageModal(editor, "media-library", visibility), linkToolbarHandlers = useLinkToolbar(editor, mediaLibraryModalRef), speechSynthetisis = useSpeechSynthetisis(editor);
+  if (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
+  })), !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 }),
+      /* @__PURE__ */ jsx(EditorContent, { id: id ?? editorId, editor, className: contentClass })
+    ] }),
+    /* @__PURE__ */ jsx(LinkToolbar, { editor, ...linkToolbarHandlers }),
+    /* @__PURE__ */ jsx(TableToolbar, { editor }),
+    editor && /* @__PURE__ */ jsx(BubbleMenuEditImage, { editor, onEditImage: imageModal.handleEdit, openEditImage: imageModal.isOpen, 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 })
+    ] })
+  ] });
+});
+export {
+  Editor as default
+};

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

@@ -0,0 +1,7 @@
+interface ModalProps {
+    isOpen: boolean;
+    onSuccess?: (formulaEditor: string) => void;
+    onCancel?: () => void;
+}
+declare const MathsModal: ({ isOpen, onSuccess, onCancel }: ModalProps) => import('react').ReactPortal;
+export default MathsModal;

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

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Mathematics from "@tiptap-pro/extension-mathematics";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import Modal from "../../../../components/Modal/Modal.js";
+import Button from "../../../../components/Button/Button.js";
+const MathsModal = ({
+  isOpen,
+  onSuccess,
+  onCancel
+}) => {
+  const FORMULA_PLACEHOLDER = "\\frac{-b + \\sqrt{b^2 - 4ac}}{2a}", [formulaEditor, setFormulaEditor] = useState(`$${FORMULA_PLACEHOLDER}$`), {
+    t
+  } = useTranslation(), editor = useEditor({
+    extensions: [StarterKit, Mathematics],
+    content: "",
+    editable: !1
+  });
+  useEffect(() => {
+    editor == null || editor.commands.setContent(formulaEditor), editor == null || editor.commands.enter();
+  }, [editor, formulaEditor]);
+  const handleChange = (event) => {
+    const newFormulaEditor = event.target.value.replaceAll(`
+`, "$<br/>$");
+    newFormulaEditor ? (editor == null || editor.commands.setContent(`$${newFormulaEditor}$`), setFormulaEditor(`$${newFormulaEditor}$`)) : (editor == null || editor.commands.setContent(""), setFormulaEditor("")), editor == null || editor.commands.enter();
+  }, handleOnCancel = () => {
+    onCancel == null || onCancel();
+  };
+  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "MathsModal", isOpen, onModalClose: handleOnCancel, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleOnCancel, children: t("tiptap.maths.title") }),
+    /* @__PURE__ */ jsxs(Modal.Subtitle, { children: [
+      t("tiptap.maths.subtitle.1"),
+      /* @__PURE__ */ jsx("a", { href: t("https://fr.wikibooks.org/wiki/LaTeX/%C3%89crire_des_math%C3%A9matiques"), target: "_blank", children: t("tiptap.maths.subtitle.2") })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
+      /* @__PURE__ */ jsx("textarea", { id: "formulaTextArea", name: "formula", rows: 4, cols: 50, onChange: handleChange, placeholder: `Exemple : ${FORMULA_PLACEHOLDER}`, className: "border rounded-3 w-100 px-16 py-12" }),
+      /* @__PURE__ */ jsx(EditorContent, { editor, className: "pt-24 pb-0 text-center fs-1" })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("tiptap.maths.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: () => onSuccess == null ? void 0 : onSuccess(formulaEditor), type: "button", variant: "filled", children: t("tiptap.maths.add") })
+    ] })
+  ] }), document.getElementById("portal"));
+};
+export {
+  MathsModal as default
+};

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

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

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

@@ -0,0 +1,22 @@
+import { ReactNode, RefAttributes } from 'react';
+import { DropdownMenuOptions, IconButtonProps } from '../../../../components';
+interface Props {
+    /**
+     * Props for the trigger
+     */
+    triggerProps: JSX.IntrinsicAttributes & Omit<IconButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>;
+    /**
+     * Menu icon
+     */
+    icon: ReactNode;
+    /**
+     * Menu label (for accessibility)
+     */
+    ariaLabel: string;
+    /**
+     * Options to display
+     */
+    options: DropdownMenuOptions[];
+}
+export declare const EditorToolbarDropdownMenu: ({ triggerProps, icon, ariaLabel, options, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+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(Dropdown.Item, { icon: option.icon, onClick: () => option.action(null), children: option.label }) }, index)) })
+] });
+export {
+  EditorToolbarDropdownMenu
+};

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

@@ -0,0 +1,14 @@
+import { RefAttributes } from 'react';
+import { IconButtonProps } from '../../../../components';
+interface Props {
+    /**
+     * Props for the trigger
+     */
+    triggerProps: JSX.IntrinsicAttributes & Omit<IconButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>;
+    /**
+     * Tracks refs on ColorPickers.
+     */
+    itemRefs: any;
+}
+export declare const EditorToolbarEmoji: ({ triggerProps, itemRefs }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

@@ -0,0 +1,14 @@
+import { RefAttributes } from 'react';
+import { IconButtonProps } from '../../../../components';
+interface Props {
+    /**
+     * Props for the trigger
+     */
+    triggerProps: JSX.IntrinsicAttributes & Omit<IconButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>;
+    /**
+     * Tracks refs on ColorPickers.
+     */
+    itemRefs: any;
+}
+export declare const EditorToolbarHighlightColor: ({ triggerProps, itemRefs, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};