@edifice.io/react 2.0.0-develop-rc.3

package/dist/modules/audience/hooks/useReactions.d.ts

@@ -0,0 +1,15 @@
+import { ReactionType } from 'edifice-ts-client';
+/**
+ * This hook implements some logic and provides functions to easily call "audience" backend endpoints.
+ * @param module application code, e.g. "blog"
+ * @param resourceType type of resource, e.g. "post"
+ * @returns functions to easily call "audience" backend endpoints
+ */
+export default function useReactions(module: string, resourceType: string): {
+    availableReactions: ("REACTION_1" | "REACTION_2" | "REACTION_3" | "REACTION_4")[];
+    loadReactionDetails: (resourceId: string, page: number, size?: number) => Promise<import('edifice-ts-client').ReactionDetailsData | undefined>;
+    loadReactionSummaries: (resourceIds: string[]) => Promise<{
+        [resourceId: string]: import('edifice-ts-client').ReactionSummaryData | undefined;
+    }>;
+    applyReaction: (resourceId: string, newReaction: ReactionType, oldReaction: ReactionType | null) => Promise<"-" | "+" | "=">;
+};

package/dist/modules/audience/hooks/useReactions.js

@@ -0,0 +1,35 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { odeServices, ERROR_CODE } from "edifice-ts-client";
+function useReactions(module, resourceType) {
+  const {
+    reactions
+  } = useRef(odeServices.audience(module, resourceType)).current, [availableReactions, setAvailableReactions] = useState([]);
+  async function loadAvailableReactions() {
+    const results = await reactions.loadAvailableReactions();
+    results && setAvailableReactions(results);
+  }
+  async function loadReactionSummaries(resourceIds) {
+    return await reactions.loadReactionSummaries(resourceIds);
+  }
+  const loadReactionDetails = async (resourceId, page, size = 30) => await reactions.loadReactionDetails(resourceId, page, size), applyReaction = useCallback(
+    async (resourceId, newReaction, oldReaction) => {
+      if (newReaction !== oldReaction && availableReactions.indexOf(newReaction) < 0)
+        return Promise.reject(ERROR_CODE.MALFORMED_DATA);
+      let result = "+";
+      return oldReaction ? newReaction === oldReaction ? (await reactions.deleteReaction(resourceId), result = "-") : (await reactions.updateReaction(resourceId, newReaction), result = "=") : await reactions.createReaction(resourceId, newReaction), odeServices.http().isResponseError() ? Promise.reject(ERROR_CODE.UNKNOWN) : result;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [availableReactions]
+  );
+  return useEffect(() => {
+    loadAvailableReactions();
+  }, []), {
+    availableReactions,
+    loadReactionDetails,
+    loadReactionSummaries,
+    applyReaction
+  };
+}
+export {
+  useReactions as default
+};

package/dist/modules/audience/hooks/useViews.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This hook provides functions to easily call "audience" backend endpoints.
+ * @param module application code, e.g. "blog"
+ * @param resourceType type of resource, e.g. "post"
+ * @returns functions to easily call "audience" backend endpoints.
+ */
+export default function useViews(module: string, resourceType: string): {
+    getViewsCounter: (resourceIds: string[]) => Promise<import('edifice-ts-client').ViewsCounters>;
+    getViewsDetail: (resourceId: string) => Promise<import('edifice-ts-client').ViewsDetails | undefined>;
+    triggerView: (resourceId: string) => Promise<void>;
+};

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

@@ -0,0 +1,12 @@
+export { default as ViewsCounter } from './ViewsCounter';
+export * from './ViewsCounter';
+export { default as ViewsModal } from './ViewsModal';
+export * from './ViewsModal';
+export { default as ReactionSummary } from './ReactionSummary';
+export * from './ReactionSummary';
+export { default as ReactionChoice } from './ReactionChoice';
+export * from './ReactionChoice';
+export { default as ReactionModal } from './ReactionModal';
+export * from './ReactionModal';
+export { default as useReactions } from './hooks/useReactions';
+export { default as useReactionIcons } from './hooks/useReactionIcons';

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,132 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BubbleMenu } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../../components/Icon/Icon.js";
+import Toolbar from "../../../../components/Toolbar/Toolbar.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(Icon, { name: "wand" }),
+        "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(Icon, { name: "image-size-small" }),
+        "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(Icon, { name: "image-size-medium" }),
+        "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(Icon, { name: "image-size-large" }),
+        "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 }) });
+}, BubbleMenuEditImage$1 = BubbleMenuEditImage;
+export {
+  BubbleMenuEditImage$1 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 { Content, FocusPosition, JSONContent } from '@tiptap/react';
+import { WorkspaceVisibility } from 'edifice-ts-client';
+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,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, Suspense, lazy } from "react";
+import "@edifice.io/tiptap-extensions";
+import { EditorContent } from "@tiptap/react";
+import clsx from "clsx";
+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 MediaLibrary from "../../../multimedia/MediaLibrary/MediaLibrary.js";
+import { useOdeClient } from "../../../../core/OdeClientProvider/OdeClientProvider.js";
+import LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.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
+  } = useOdeClient(), {
+    editor,
+    editable
+  } = useTipTapEditor(mode === "edit", content, focus, placeholder, onContentChange), {
+    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 })
+    ] })
+  ] });
+}), Editor$1 = Editor;
+export {
+  Editor$1 as default
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+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 '../../../..';
+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 IconButton from "../../../../components/Button/IconButton.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.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 '../../../..';
+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 { useEditorContext } from "../../hooks/useEditorContext.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import { Icon } from "../../../../components/Icon/Icon.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(Icon, { name: "smiley" }), "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 '../../../..';
+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 {};

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

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

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

@@ -0,0 +1,9 @@
+import { DropdownMenuOptions } from '../../../..';
+interface Props {
+    /**
+     * Options to display
+     */
+    options: DropdownMenuOptions[];
+}
+export declare const EditorToolbarPlusMenu: ({ options }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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