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

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

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

@@ -0,0 +1,9 @@
+import { DropdownMenuOptions } from '../../../../components';
+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 '../../../../components';
+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 {};

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconTextSize from "../../../icons/components/IconTextSize.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { hasExtension } from "../../utilities/has-extension.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+const EditorToolbarTextSize = ({
+  triggerProps
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    editor
+  } = useEditorContext(), textOptions = [{
+    id: "title-1",
+    label: t("tiptap.toolbar.size.h1"),
+    className: "fs-2 fw-bold text-secondary",
+    action: () => editor == null ? void 0 : editor.chain().focus().setCustomHeading({
+      level: 1
+    }).run(),
+    visibility: hasExtension("customHeading", editor)
+  }, {
+    id: "title-2",
+    label: t("tiptap.toolbar.size.h2"),
+    className: "fs-3 fw-bold text-secondary",
+    action: () => editor == null ? void 0 : editor.chain().focus().setCustomHeading({
+      level: 2
+    }).run(),
+    visibility: hasExtension("customHeading", editor)
+  }, {
+    id: "divider",
+    type: "divider",
+    visibility: hasExtension("customHeading", editor) && hasExtension("fontSize", editor)
+  }, {
+    id: "big-text",
+    label: t("tiptap.toolbar.size.big"),
+    className: "fs-4",
+    action: () => editor == null ? void 0 : editor.chain().focus().setParagraph().setFontSize("18px").run(),
+    visibility: hasExtension("fontSize", editor)
+  }, {
+    id: "normal-text",
+    label: t("tiptap.toolbar.size.normal"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setParagraph().setFontSize("16px").run(),
+    visibility: hasExtension("fontSize", editor)
+  }, {
+    id: "small-text",
+    label: t("tiptap.toolbar.size.small"),
+    className: "fs-6",
+    action: () => editor == null ? void 0 : editor.chain().focus().setParagraph().setFontSize("14px").run(),
+    visibility: hasExtension("fontSize", editor)
+  }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.size.choice"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconTextSize, {}), "aria-label": t("tiptap.toolbar.size.choice") }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: textOptions.map((option) => /* @__PURE__ */ jsx(Fragment$1, { children: option.type === "divider" && option.visibility ? /* @__PURE__ */ jsx(Dropdown.Separator, {}) : option.visibility ? /* @__PURE__ */ jsx(Dropdown.Item, { onClick: option.action, children: /* @__PURE__ */ jsx("span", { className: option.className, children: option.label }) }) : null }, option.id)) })
+  ] });
+};
+export {
+  EditorToolbarTextSize
+};

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

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

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

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect, Fragment as Fragment$1 } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconTextTypo from "../../../icons/components/IconTextTypo.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 EditorToolbarTypography = ({
+  triggerProps
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    editor
+  } = useEditorContext(), [value, setValue] = useState("sans-serif");
+  useEffect(() => {
+    const textStyle = editor == null ? void 0 : editor.getAttributes("textStyle");
+    setValue((textStyle == null ? void 0 : textStyle.fontFamily) ?? "");
+  }, [editor, editor == null ? void 0 : editor.state]);
+  const options = [{
+    value: "",
+    label: t("tiptap.toolbar.typo.sans")
+  }, {
+    value: "Lora",
+    label: t("tiptap.toolbar.typo.serif"),
+    className: "ff-serif"
+  }, {
+    value: "IBM Plex Mono",
+    label: t("tiptap.toolbar.typo.mono"),
+    className: "ff-script"
+  }, {
+    value: "Ecriture A",
+    label: t("tiptap.toolbar.typo.cursive"),
+    className: "ff-cursive"
+  }, {
+    value: "OpenDyslexic",
+    label: t("tiptap.toolbar.typo.dyslexic"),
+    className: "ff-dyslexic"
+  }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.toolbar.typo.choice"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", variant: "ghost", color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconTextTypo, {}), "aria-label": t("tiptap.toolbar.typo.choice"), className: editor != null && editor.isActive("textStyle", {
+      color: /^#([0-9a-f]{3}){1,2}$/i
+    }) ? "selected" : "" }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Dropdown.RadioItem, { value: option.value, model: value, onChange: (value2) => {
+      typeof value2 == "string" && value2.length > 0 ? (editor == null || editor.chain().focus().setFontFamily(value2).run(), setValue(value2)) : (editor == null || editor.chain().focus().unsetFontFamily().run(), setValue(""));
+    }, children: /* @__PURE__ */ jsx("span", { className: option.className, children: option.label }) }) }, option.label)) })
+  ] });
+};
+export {
+  EditorToolbarTypography
+};

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

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { MediaLibraryRef } from '../../../multimedia';
+interface Props {
+    /** Ref to a MediaLibrary instance */
+    mediaLibraryRef: RefObject<MediaLibraryRef>;
+    /** API to open/close a Math modal. */
+    toggleMathsModal: () => void;
+}
+export declare const EditorToolbar: ({ mediaLibraryRef, toggleMathsModal }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,331 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import "@tiptap/react";
+import SvgIconAlignLeft from "../../../icons/components/IconAlignLeft.js";
+import SvgIconBulletList from "../../../icons/components/IconBulletList.js";
+import SvgIconLandscape from "../../../icons/components/IconLandscape.js";
+import SvgIconLink from "../../../icons/components/IconLink.js";
+import SvgIconMic from "../../../icons/components/IconMic.js";
+import SvgIconPaperclip from "../../../icons/components/IconPaperclip.js";
+import SvgIconRecordVideo from "../../../icons/components/IconRecordVideo.js";
+import SvgIconRedo from "../../../icons/components/IconRedo.js";
+import SvgIconSpeechToText from "../../../icons/components/IconSpeechToText.js";
+import SvgIconTextBold from "../../../icons/components/IconTextBold.js";
+import SvgIconTextItalic from "../../../icons/components/IconTextItalic.js";
+import SvgIconTextUnderline from "../../../icons/components/IconTextUnderline.js";
+import SvgIconUndo from "../../../icons/components/IconUndo.js";
+import { hasExtension } from "../../utilities/has-extension.js";
+import { hasMark } from "../../utilities/has-mark.js";
+import { hasTextStyle } from "../../utilities/has-text-style.js";
+import { EditorToolbarDropdownMenu } from "./EditorToolbar.DropdownMenu.js";
+import { EditorToolbarEmoji } from "./EditorToolbar.Emoji.js";
+import { EditorToolbarHighlightColor } from "./EditorToolbar.HighlightColor.js";
+import { EditorToolbarPlusMenu } from "./EditorToolbar.PlusMenu.js";
+import { EditorToolbarTextColor } from "./EditorToolbar.TextColor.js";
+import { EditorToolbarTextSize } from "./EditorToolbar.TextSize.js";
+import { EditorToolbarTypography } from "./EditorToolbar.Typography.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { useActionOptions } from "../../hooks/useActionOptions.js";
+import { useSpeechRecognition } from "../../hooks/useSpeechRecognition.js";
+import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
+const EditorToolbar = ({
+  mediaLibraryRef,
+  toggleMathsModal
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    id,
+    editor
+  } = useEditorContext(), [plusOptions, listOptions, alignmentOptions] = useActionOptions(editor, toggleMathsModal, mediaLibraryRef), {
+    isAvailable: canRecognizeSpeech,
+    isActive: speechRecognition,
+    toggle: toggleSpeechRecognition
+  } = useSpeechRecognition(editor), toolbarItems = useMemo(() => {
+    const showIf = (truthy) => truthy ? "show" : "hide", showLinkModal = () => {
+      var _a, _b;
+      const {
+        state
+      } = editor;
+      state.selection.empty ? (_a = mediaLibraryRef.current) == null || _a.show("hyperlink") : (_b = mediaLibraryRef.current) == null || _b.showLink({
+        link: {
+          text: state.selection.content().content.child(0).textContent,
+          target: "_blank"
+        },
+        multiNodeSelected: state.selection.content().content.childCount > 1
+      });
+    };
+    return [
+      //--------------- UNDO ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconUndo, {}),
+          "aria-label": t("editor.option.undo"),
+          onClick: () => editor == null ? void 0 : editor.chain().focus().undo().run(),
+          disabled: !(editor != null && editor.can().undo())
+        },
+        name: "undo",
+        tooltip: t("editor.option.undo"),
+        visibility: showIf(hasExtension("history", editor))
+      },
+      //--------------- REDO ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconRedo, {}),
+          "aria-label": t("editor.option.redo"),
+          onClick: () => editor == null ? void 0 : editor.chain().focus().redo().run(),
+          disabled: !(editor != null && editor.can().redo())
+        },
+        name: "redo",
+        tooltip: t("editor.option.redo"),
+        visibility: showIf(hasExtension("history", editor))
+      },
+      //-------------------------------------//
+      {
+        type: "divider",
+        name: "div-1"
+      },
+      //--------------- IMAGE ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconLandscape, {}),
+          className: "bg-green-200",
+          "aria-label": t("tiptap.toolbar.picture"),
+          onClick: () => {
+            var _a;
+            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("image");
+          }
+        },
+        name: "image",
+        tooltip: t("tiptap.toolbar.picture")
+      },
+      //--------------- VIDEO ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconRecordVideo, {}),
+          className: "bg-purple-200",
+          "aria-label": t("tiptap.toolbar.video"),
+          onClick: () => {
+            var _a;
+            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("video");
+          }
+        },
+        name: "video",
+        tooltip: t("tiptap.toolbar.video")
+      },
+      //--------------- AUDIO ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconMic, {}),
+          className: "bg-red-200",
+          "aria-label": t("tiptap.toolbar.audio"),
+          onClick: () => {
+            var _a;
+            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("audio");
+          }
+        },
+        name: "audio",
+        tooltip: t("tiptap.toolbar.audio")
+      },
+      //--------------- ATTACHMENT ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconPaperclip, {}),
+          className: "bg-yellow-200",
+          "aria-label": t("tiptap.toolbar.attachment"),
+          onClick: () => {
+            var _a;
+            return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("attachment");
+          }
+        },
+        name: "attachment",
+        tooltip: t("tiptap.toolbar.attachment")
+      },
+      {
+        type: "divider",
+        name: "div-2"
+      },
+      //--------------- SPEECH TO TEXT ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconSpeechToText, {}),
+          "aria-label": t("tiptap.toolbar.stt"),
+          className: speechRecognition ? "is-selected" : "",
+          onClick: () => toggleSpeechRecognition()
+        },
+        visibility: canRecognizeSpeech ? "show" : "hide",
+        name: "speechtotext",
+        tooltip: t("tiptap.toolbar.stt")
+      },
+      //------------------------------------//
+      {
+        type: "divider",
+        name: "div-speech",
+        visibility: canRecognizeSpeech ? "show" : "hide"
+      },
+      //--------------- TYPOGRAPHY ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarTypography, { triggerProps })
+        },
+        name: "text_typo",
+        visibility: showIf(hasExtension("fontFamily", editor)),
+        tooltip: t("tiptap.toolbar.typo.choice")
+      },
+      //--------------- TEXT SIZE ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarTextSize, { triggerProps })
+        },
+        name: "text_size",
+        visibility: showIf(hasExtension("fontSize", editor) || hasExtension("heading", editor)),
+        tooltip: t("tiptap.toolbar.size.choice")
+      },
+      //--------------- TEXT COLOR ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(EditorToolbarTextColor, { triggerProps, itemRefs })
+        },
+        overflow: !1,
+        name: "color",
+        visibility: hasTextStyle("color", editor) ? "show" : "hide",
+        tooltip: t("tiptap.toolbar.color.text")
+      },
+      //--------------- TEXT HIGHLIGHTING COLOR ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(EditorToolbarHighlightColor, { triggerProps, itemRefs })
+        },
+        name: "highlight",
+        visibility: showIf(hasMark("customHighlight", editor)),
+        tooltip: t("tiptap.toolbar.highlight.back")
+      },
+      //-------------------------------------//
+      {
+        type: "divider",
+        name: "div-3"
+      },
+      //--------------- BOLD ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconTextBold, {}),
+          "aria-label": t("tiptap.toolbar.bold"),
+          className: editor != null && editor.isActive("bold") ? "is-selected" : "",
+          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+          disabled: editor == null ? void 0 : editor.isActive("heading")
+        },
+        name: "bold",
+        visibility: showIf(hasMark("bold", editor)),
+        tooltip: t("tiptap.toolbar.bold")
+      },
+      //--------------- ITALIC ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconTextItalic, {}),
+          "aria-label": t("tiptap.toolbar.italic"),
+          className: editor != null && editor.isActive("italic") ? "is-selected" : "",
+          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run()
+        },
+        name: "italic",
+        visibility: showIf(hasMark("italic", editor)),
+        tooltip: t("tiptap.toolbar.italic")
+      },
+      //--------------- UNDERLINE ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconTextUnderline, {}),
+          "aria-label": t("tiptap.toolbar.underline"),
+          className: editor != null && editor.isActive("underline") ? "is-selected" : "",
+          onClick: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run()
+        },
+        name: "underline",
+        visibility: showIf(hasMark("underline", editor)),
+        tooltip: t("tiptap.toolbar.underline")
+      },
+      //-------------------------------------//
+      {
+        type: "divider",
+        name: "div-4"
+      },
+      //--------------- EMOJI ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(EditorToolbarEmoji, { triggerProps, itemRefs })
+        },
+        name: "emoji",
+        tooltip: t("tiptap.toolbar.emojisPicker")
+      },
+      //--------------- LINKER (internal / external) ---------------//
+      {
+        type: "icon",
+        props: {
+          icon: /* @__PURE__ */ jsx(SvgIconLink, {}),
+          "aria-label": t("tiptap.toolbar.linker"),
+          className: editor != null && editor.isActive("linker") ? "is-selected" : "",
+          onClick: () => showLinkModal()
+        },
+        name: "linker",
+        tooltip: t("tiptap.toolbar.linker")
+      },
+      //-----------------------------------//
+      {
+        type: "divider",
+        name: "div-5"
+      },
+      //--------------- LIST MENU ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarDropdownMenu, { triggerProps, icon: /* @__PURE__ */ jsx(SvgIconBulletList, {}), ariaLabel: t("tiptap.toolbar.listoptions"), options: listOptions })
+        },
+        name: "list",
+        visibility: showIf(hasExtension("starterKit", editor)),
+        tooltip: t("tiptap.toolbar.listoptions")
+      },
+      //--------------- TEXT ALIGNMENT ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: (triggerProps) => /* @__PURE__ */ jsx(EditorToolbarDropdownMenu, { triggerProps, icon: /* @__PURE__ */ jsx(SvgIconAlignLeft, {}), ariaLabel: t("tiptap.toolbar.align"), options: alignmentOptions })
+        },
+        name: "alignment",
+        visibility: showIf(hasExtension("textAlign", editor)),
+        tooltip: t("tiptap.toolbar.align")
+      },
+      //-------------------------------------//
+      {
+        type: "divider",
+        name: "div-6"
+      },
+      //--------------- MORE sub-menu ---------------//
+      {
+        type: "dropdown",
+        props: {
+          children: () => /* @__PURE__ */ jsx(EditorToolbarPlusMenu, { options: plusOptions })
+        },
+        name: "plus",
+        visibility: showIf(hasExtension("textAlign", editor))
+      }
+    ];
+  }, [alignmentOptions, canRecognizeSpeech, editor, listOptions, mediaLibraryRef, plusOptions, speechRecognition, t, toggleSpeechRecognition]);
+  return /* @__PURE__ */ jsx("div", { className: "sticky-top z-1 editor-toolbar rounded-3", children: /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems, variant: "no-shadow", className: "rounded-top-3", isBlock: !0, align: "left", ariaControls: id }) });
+};
+export {
+  EditorToolbar
+};

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

@@ -0,0 +1 @@
+export * from './EditorToolbar';

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

@@ -0,0 +1,2 @@
+declare const AttachmentNodeView: (Component: any) => import('@tiptap/core').Node<import('@edifice.io/tiptap-extensions/attachment').AttachmentOptions, any>;
+export default AttachmentNodeView;

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

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

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

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

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

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