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

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

@@ -0,0 +1,7 @@
+import { Editor } from '@tiptap/react';
+interface AudioProps {
+    editor: Editor;
+    [x: string]: any;
+}
+export declare const AudioRenderer: (props: AudioProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { NodeViewWrapper } from "@tiptap/react";
+const AudioRenderer = (props) => {
+  const {
+    node
+  } = props;
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx("div", { className: "audio-wrapper", children: /* @__PURE__ */ jsx("audio", { src: node.attrs.src, controls: !0, "data-document-id": node.attrs.src, children: /* @__PURE__ */ jsx("track", { kind: "captions" }) }) }) });
+};
+export {
+  AudioRenderer
+};

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

@@ -0,0 +1,9 @@
+import { Node } from '@tiptap/pm/model';
+import { Editor } from '@tiptap/react';
+interface LinkerProps {
+    selected: boolean;
+    editor: Editor;
+    node: Node;
+}
+export declare const LinkerRenderer: ({ selected, ...props }: LinkerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper } from "@tiptap/react";
+import clsx from "clsx";
+import useOdeIcons from "../../../../core/useOdeIcons/useOdeIcons.js";
+import Badge from "../../../../components/Badge/Badge.js";
+import { AppIcon } from "../../../../components/AppIcon/AppIcon.js";
+const LinkerRenderer = ({
+  selected,
+  ...props
+}) => {
+  const {
+    getIconCode
+  } = useOdeIcons(), {
+    editor,
+    node
+  } = props, {
+    class: className,
+    title,
+    "data-app-prefix": appPrefix,
+    href,
+    target
+  } = node.attrs, classes = clsx("align-middle badge-linker c-pointer mx-4 my-2", className, selected && "bg-secondary-200"), appCode = getIconCode(appPrefix);
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", contentEditable: !1, children: /* @__PURE__ */ jsxs(Badge, { variant: {
+    type: "link"
+  }, className: classes, onClick: (event) => {
+    editor && !editor.isEditable && (event.preventDefault, window.open(href ?? "about:blank", target ?? "_self"));
+  }, "data-drag-handle": !0, children: [
+    /* @__PURE__ */ jsx(AppIcon, { size: "24", app: appCode }),
+    /* @__PURE__ */ jsx("span", { className: "ms-8 text-truncate", children: title || node.textContent })
+  ] }) });
+};
+export {
+  LinkerRenderer
+};

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

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

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

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { odeServices } from "edifice-ts-client";
+import { useTranslation } from "react-i18next";
+import useBrowserInfo from "../../../../hooks/useBrowserInfo/useBrowserInfo.js";
+import { useResizeMedia } from "../../hooks/useResizeMedia.js";
+import Image from "../../../../components/Image/Image.js";
+const MediaRenderer = (props) => {
+  const {
+    node
+  } = props, {
+    t
+  } = useTranslation(), {
+    browser,
+    device
+  } = useBrowserInfo(navigator.userAgent), resizableMedia = useRef(null), {
+    startVerticalResize,
+    stopVerticalResize,
+    isVerticalResizeActive
+  } = useResizeMedia(props, resizableMedia), alignContent = (textalign) => {
+    switch (textalign) {
+      case "center":
+      case "justify":
+        return {
+          marginLeft: "auto",
+          marginRight: "auto",
+          width: "fit-content"
+        };
+      case "left":
+        return {
+          marginRight: "auto",
+          width: "fit-content"
+        };
+      case "right":
+        return {
+          marginLeft: "auto",
+          width: "fit-content"
+        };
+      default:
+        return {};
+    }
+  }, onVideoPlay = () => {
+    if (resizableMedia.current instanceof HTMLVideoElement) {
+      const videoElement = resizableMedia.current, videoId = videoElement.dataset.documentId, isCaptation = (videoElement.dataset.documentIsCaptation || "false") == "true";
+      videoId && odeServices.data().trackVideoRead(videoId, isCaptation, window.location.hostname, `${browser.name} ${browser.version}`, device.type);
+    }
+  };
+  return useEffect(() => {
+    if (!resizableMedia.current) return;
+    const element = resizableMedia.current;
+    return element.addEventListener("play", onVideoPlay), () => {
+      element.removeEventListener("play", onVideoPlay);
+    };
+  }, []), /* @__PURE__ */ jsx(NodeViewWrapper, { style: alignContent(node.attrs.textAlign), children: /* @__PURE__ */ jsxs("div", { className: "media-node-view", children: [
+    /* @__PURE__ */ jsx("div", { "data-drag-handle": !0, children: node.type.name === "custom-image" ? /* @__PURE__ */ jsx(Image, { ...node.attrs, className: "custom-image", ref: resizableMedia }) : (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ jsx("video", { ref: resizableMedia, controls: node.attrs.controls, src: node.attrs.src, width: node.attrs.width, height: node.attrs.height, "data-video-resolution": `${node.attrs.width}x${node.attrs.height}`, "data-document-id": node.attrs.documentId, "data-document-is-captation": node.attrs.isCaptation, children: /* @__PURE__ */ jsx("source", { src: node.attrs.src }) })
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: `vertical-resize-handle ${isVerticalResizeActive ? "vertical-resize-active" : ""}`, title: t("tiptap.media.resize"), onMouseDown: (e) => {
+      e.stopPropagation(), startVerticalResize(e);
+    }, onMouseUp: (e) => {
+      e.stopPropagation(), stopVerticalResize();
+    } })
+  ] }) });
+};
+export {
+  MediaRenderer
+};

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

@@ -0,0 +1,4 @@
+export * from './AttachmentRenderer';
+export * from './AudioRenderer';
+export * from './LinkerRenderer';
+export * from './MediaRenderer';

package/dist/modules/editor/components/Toolbar/LinkToolbar.TippyOptions.d.ts

@@ -0,0 +1,2 @@
+import { FloatingMenuProps } from '@tiptap/react';
+export declare const tippyOptions: FloatingMenuProps['tippyOptions'];

package/dist/modules/editor/components/Toolbar/LinkToolbar.TippyOptions.js

@@ -0,0 +1,8 @@
+const tippyOptions = {
+  placement: "bottom",
+  offset: [0, 10],
+  zIndex: 999
+};
+export {
+  tippyOptions
+};

package/dist/modules/editor/components/Toolbar/LinkToolbar.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from '@tiptap/react';
+interface LinkToolbarProps {
+    /**
+     * editor instance
+     */
+    editor: Editor | null;
+    /** Handle Edit event */
+    onEdit: (attrs: any) => void;
+    /** Handle Open event */
+    onOpen: (attrs: any) => void;
+    /** Handle Unlink event */
+    onUnlink: (attrs: any) => void;
+}
+declare const LinkToolbar: ({ editor, onEdit, onOpen, onUnlink, }: LinkToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkToolbar;

package/dist/modules/editor/components/Toolbar/LinkToolbar.js

@@ -0,0 +1,59 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { FloatingMenu } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import { tippyOptions } from "./LinkToolbar.TippyOptions.js";
+import { Icon } from "../../../../components/Icon/Icon.js";
+import Toolbar from "../../../../components/Toolbar/Toolbar.js";
+const LinkToolbar = ({
+  editor,
+  onEdit,
+  onOpen,
+  onUnlink
+}) => {
+  const {
+    t
+  } = useTranslation(), [linkAttrs, setLinkAttrs] = useState(), LinkToolbarItems = useMemo(() => [{
+    type: "icon",
+    name: "edit",
+    props: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "edit" }),
+      "aria-label": t("tiptap.link.toolbar.edit"),
+      onClick: () => onEdit == null ? void 0 : onEdit(linkAttrs)
+    },
+    tooltip: {
+      message: t("tiptap.link.toolbar.tooltip.edit"),
+      position: "bottom"
+    }
+  }, {
+    type: "icon",
+    name: "open",
+    props: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "external-link" }),
+      "aria-label": t("tiptap.link.toolbar.open"),
+      onClick: () => onOpen == null ? void 0 : onOpen(linkAttrs)
+    },
+    tooltip: {
+      message: t("tiptap.link.toolbar.tooltip.open"),
+      position: "bottom"
+    }
+  }, {
+    type: "icon",
+    name: "unlink",
+    props: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "unlink", className: "text-danger" }),
+      "aria-label": t("tiptap.link.toolbar.unlink"),
+      onClick: () => onUnlink == null ? void 0 : onUnlink(linkAttrs)
+    },
+    tooltip: {
+      message: t("tiptap.link.toolbar.tooltip.unlink"),
+      position: "bottom"
+    }
+  }], [onEdit, onOpen, onUnlink, t, linkAttrs]);
+  return useEffect(() => {
+    editor != null && editor.isActive("linker") ? setLinkAttrs(editor.getAttributes("linker")) : editor != null && editor.isActive("hyperlink") ? setLinkAttrs(editor.getAttributes("hyperlink")) : setLinkAttrs(void 0);
+  }, [editor == null ? void 0 : editor.state]), /* @__PURE__ */ jsx(Fragment, { children: editor && /* @__PURE__ */ jsx(FloatingMenu, { editor, tippyOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && ((editor == null ? void 0 : editor.isActive("linker")) || (editor == null ? void 0 : editor.isActive("hyperlink"))) || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: LinkToolbarItems }) }) });
+}, LinkToolbar$1 = LinkToolbar;
+export {
+  LinkToolbar$1 as default
+};

package/dist/modules/editor/components/Toolbar/TableToolbar.AddMenu.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/react';
+interface Props {
+    /**
+     * editor instance
+     */
+    editor: Editor | null;
+}
+export declare const TableToolbarAddMenu: ({ editor }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/editor/components/Toolbar/TableToolbar.AddMenu.js

@@ -0,0 +1,28 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+import { Icon } from "../../../../components/Icon/Icon.js";
+const TableToolbarAddMenu = ({
+  editor
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.table.toolbar.tooltip.add"), placement: "top", children: /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", label: t("tiptap.table.toolbar.add") }) }),
+    /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" }), onClick: () => editor == null ? void 0 : editor.chain().focus().addRowBefore().run(), children: t("tiptap.table.toolbar.line.above") }, "add-above"),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "arrow-down" }), onClick: () => editor == null ? void 0 : editor.chain().focus().addRowAfter().run(), children: t("tiptap.table.toolbar.line.below") }, "add-below"),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "arrow-left" }), onClick: () => editor == null ? void 0 : editor.chain().focus().addColumnBefore().run(), children: t("tiptap.table.toolbar.col.left") }, "add-left"),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "arrow-right" }), onClick: () => editor == null ? void 0 : editor.chain().focus().addColumnAfter().run(), children: t("tiptap.table.toolbar.col.right") }, "add-right"),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "highlight-row" }), onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeaderRow().run(), children: t("tiptap.table.toolbar.line.head") }, "header-row"),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "highlight-column" }), onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeaderColumn().run(), children: t("tiptap.table.toolbar.col.head") }, "header-col")
+    ] })
+  ] });
+};
+export {
+  TableToolbarAddMenu
+};

package/dist/modules/editor/components/Toolbar/TableToolbar.CellColor.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from '@tiptap/react';
+interface Props {
+    /**
+     * editor instance
+     */
+    editor: Editor | null;
+    /**
+     * Tracks refs on ColorPickers.
+     */
+    itemRefs: any;
+}
+export declare const TableToolbarCellColor: ({ editor, itemRefs }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/editor/components/Toolbar/TableToolbar.CellColor.js

@@ -0,0 +1,45 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ColorPickerItem from "../../../../components/ColorPicker/ColorPickerItem.js";
+import { DefaultPalette } from "../../../../components/ColorPicker/ColorPalette.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+import ColorPicker from "../../../../components/ColorPicker/ColorPicker.js";
+const TableToolbarCellColor = ({
+  editor,
+  itemRefs
+}) => {
+  const {
+    t
+  } = useTranslation(), [color, setColor] = useState("transparent"), applyColor = useCallback((value) => {
+    editor == null || editor.chain().focus().setCellAttribute(
+      "backgroundColor",
+      // reset color is transparent here => remove bkg color
+      value === "transparent" ? "" : value
+    ).run(), setColor(value);
+  }, [editor, setColor]);
+  useEffect(() => {
+    setColor((editor == null ? void 0 : editor.getAttributes("tableCell").backgroundColor) ?? "transparent");
+  }, [editor, editor == null ? void 0 : editor.state]);
+  const palettes = [{
+    ...DefaultPalette,
+    label: t("tiptap.table.toolbar.cell.color"),
+    reset: {
+      value: "transparent",
+      description: t("tiptap.table.toolbar.cell.none"),
+      isReset: !0
+    }
+  }];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.table.toolbar.cell.bk"), placement: "top", children: /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", "aria-label": t("tiptap.table.toolbar.cell.bk"), icon: /* @__PURE__ */ jsx(ColorPickerItem, { model: {
+      value: color,
+      description: "",
+      isReset: !color || color.length === 0 || color === "transparent"
+    } }) }) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { children: /* @__PURE__ */ jsx(ColorPicker, { ref: (el) => itemRefs.current["color-picker"] = el, model: color, palettes, onSuccess: (item) => applyColor(item.value) }) })
+  ] });
+};
+export {
+  TableToolbarCellColor
+};

package/dist/modules/editor/components/Toolbar/TableToolbar.DelMenu.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/react';
+interface Props {
+    /**
+     * editor instance
+     */
+    editor: Editor | null;
+}
+export declare const TableToolbarDelMenu: ({ editor }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modules/editor/components/Toolbar/TableToolbar.DelMenu.js

@@ -0,0 +1,27 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+import { Icon } from "../../../../components/Icon/Icon.js";
+const TableToolbarDelMenu = ({
+  editor
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.table.toolbar.tooltip.del"), placement: "top", children: /* @__PURE__ */ jsx(Dropdown.Trigger, { variant: "ghost", label: t("tiptap.table.toolbar.del") }) }),
+    /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-row" }), onClick: () => editor == null ? void 0 : editor.chain().focus().deleteRow().run(), children: t("tiptap.table.toolbar.del.line") }, "del-row"),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-column" }), onClick: () => editor == null ? void 0 : editor.chain().focus().deleteColumn().run(), children: t("tiptap.table.toolbar.del.col") }, "del-col"),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-row-highlight" }), onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeaderRow().run(), children: t("tiptap.table.toolbar.del.line.head") }, "del-header-row"),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete-column-highlight" }), onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeaderColumn().run(), children: t("tiptap.table.toolbar.del.col.head") }, "del-header-col"),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(Icon, { name: "delete" }), onClick: () => editor == null ? void 0 : editor.chain().focus().deleteTable().run(), children: t("tiptap.table.toolbar.del.array") }, "del-table")
+    ] })
+  ] });
+};
+export {
+  TableToolbarDelMenu
+};

package/dist/modules/editor/components/Toolbar/TableToolbar.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/react';
+interface TableToolbarProps {
+    /**
+     * editor instance
+     */
+    editor: Editor | null;
+}
+declare const TableToolbar: ({ editor }: TableToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default TableToolbar;

package/dist/modules/editor/components/Toolbar/TableToolbar.js

@@ -0,0 +1,88 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { findParentNodeClosestToPos, FloatingMenu } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import { TableToolbarAddMenu } from "./TableToolbar.AddMenu.js";
+import { TableToolbarCellColor } from "./TableToolbar.CellColor.js";
+import { TableToolbarDelMenu } from "./TableToolbar.DelMenu.js";
+import Toolbar from "../../../../components/Toolbar/Toolbar.js";
+import { Icon } from "../../../../components/Icon/Icon.js";
+const TableToolbar = ({
+  editor
+}) => {
+  const {
+    t
+  } = useTranslation(), [isSpan, setSpan] = useState(void 0), 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",
+      offset: [0, 0],
+      zIndex: 999,
+      // popperOptions: {modifiers: [ /*see popper v2 modifiers*/ ]},
+      // Try to get the bounding rect of the table.
+      getReferenceClientRect: () => {
+        const parentDiv = editor != null && editor.isActive("table") ? findParentNodeClosestToPos(editor.state.selection.$anchor, (node) => node.type.name === "table") : null;
+        if (parentDiv) {
+          const parentDomNode = editor == null ? void 0 : editor.view.nodeDOM(parentDiv.pos), tableDomNode = (parentDomNode == null ? void 0 : parentDomNode.querySelector("table")) || parentDomNode;
+          if (tableDomNode)
+            return adjustRect(tableDomNode.getBoundingClientRect());
+        }
+        return new DOMRect(0, 0, 100, 100);
+      }
+    };
+  }, [editor]);
+  return useEffect(() => {
+    const cellAttr = editor == null ? void 0 : editor.getAttributes("tableCell"), headAttr = editor == null ? void 0 : editor.getAttributes("tableHeader");
+    if (typeof cellAttr < "u" || typeof headAttr < "u") {
+      const newSpan = (cellAttr == null ? void 0 : cellAttr.colspan) > 1 || (cellAttr == null ? void 0 : cellAttr.rowspan) > 1 || (headAttr == null ? void 0 : headAttr.colspan) > 1 || (headAttr == null ? void 0 : headAttr.rowspan) > 1;
+      newSpan !== isSpan && setSpan(newSpan);
+    } else
+      isSpan && setSpan(void 0);
+  }, [editor, editor == null ? void 0 : editor.state, isSpan]), /* @__PURE__ */ jsx(Fragment, { children: editor && /* @__PURE__ */ jsx(FloatingMenu, { editor, tippyOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && editor.isActive("table") || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: [{
+    type: "dropdown",
+    name: "bkg-col",
+    // isEnable:
+    //   typeof editor?.getAttributes("tableCell") !== "undefined",
+    props: {
+      children: (triggerProps, itemRefs) => /* @__PURE__ */ jsx(TableToolbarCellColor, { editor, itemRefs })
+    }
+  }, {
+    type: "icon",
+    name: "mergeorsplit",
+    // isEnable: typeof isSpan !== "undefined",
+    props: {
+      icon: isSpan ? /* @__PURE__ */ jsx(Icon, { name: "split-cells" }) : /* @__PURE__ */ jsx(Icon, { name: "merge-cells" }),
+      "aria-label": t(isSpan ? "tiptap.table.toolbar.split" : "tiptap.table.toolbar.merge"),
+      onClick: () => editor == null ? void 0 : editor.chain().focus().mergeOrSplit().run()
+    },
+    tooltip: t(isSpan ? "tiptap.table.toolbar.split" : "tiptap.table.toolbar.merge")
+  }, {
+    type: "divider",
+    name: "add-d0"
+  }, {
+    type: "dropdown",
+    name: "add",
+    props: {
+      children: () => /* @__PURE__ */ jsx(TableToolbarAddMenu, { editor })
+    }
+  }, {
+    type: "divider",
+    name: "add-d1"
+  }, {
+    type: "dropdown",
+    name: "del",
+    props: {
+      children: () => /* @__PURE__ */ jsx(TableToolbarDelMenu, { editor })
+    }
+  }] }) }) });
+}, TableToolbar$1 = TableToolbar;
+export {
+  TableToolbar$1 as default
+};

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

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

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

@@ -0,0 +1,6 @@
+export * from './Editor';
+export * from './EditorToolbar';
+export * from './BubbleMenuEditImage';
+export * from './NodeView';
+export * from './Renderer';
+export * from './Toolbar';

package/dist/modules/editor/hooks/index.d.ts

@@ -0,0 +1,12 @@
+export * from './useActionOptions';
+export * from './useCommentEditor';
+export * from './useEditorContext';
+export * from './useImageModal';
+export * from './useImageSelection';
+export * from './useLinkToolbar';
+export * from './useMathsModal';
+export * from './useMediaLibraryEditor';
+export * from './useResizeMedia';
+export * from './useSpeechRecognition';
+export * from './useSpeechSynthetisis';
+export * from './useTipTapEditor';

package/dist/modules/editor/hooks/useActionOptions.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+import { Editor } from '@tiptap/react';
+import { DropdownMenuOptions } from '../../..';
+import { MediaLibraryRef } from '../../multimedia';
+export declare const useActionOptions: (editor: Editor | null, toggleMathsModal: Function, mediaLibraryRef: RefObject<MediaLibraryRef>) => DropdownMenuOptions[][];

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

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/Icon/Icon.js";
+const useActionOptions = (editor, toggleMathsModal, mediaLibraryRef) => {
+  const {
+    t
+  } = useTranslation(), options = [{
+    icon: /* @__PURE__ */ jsx(Icon, { name: "text-vanilla" }),
+    label: t("tiptap.toolbar.removeFormat"),
+    action: () => editor == null ? void 0 : editor.chain().clearNodes().unsetAllMarks().run()
+  }, {
+    type: "divider"
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "table" }),
+    label: t("tiptap.toolbar.table"),
+    action: () => editor == null ? void 0 : editor.chain().focus().insertTable({
+      rows: 3,
+      cols: 3,
+      withHeaderRow: !0
+    }).run()
+  }, {
+    type: "divider"
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "superscript" }),
+    label: t("tiptap.toolbar.superscript"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleSuperscript().run()
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "subscript" }),
+    label: t("tiptap.toolbar.subscript"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleSubscript().run()
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "square-root" }),
+    label: t("tiptap.toolbar.mathjax"),
+    action: () => {
+      toggleMathsModal();
+    }
+  }, {
+    type: "divider"
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "code" }),
+    label: t("tiptap.toolbar.embed.iframe"),
+    action: () => {
+      var _a;
+      return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("embedder");
+    }
+  }], listOptions = [{
+    icon: /* @__PURE__ */ jsx(Icon, { name: "bullet-list" }),
+    label: t("tiptap.toolbar.ulist"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run()
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "ordered-list" }),
+    label: t("tiptap.toolbar.olist"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run()
+  }], alignmentOptions = [{
+    icon: /* @__PURE__ */ jsx(Icon, { name: "align-left" }),
+    label: t("tiptap.toolbar.text.left"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("left").run()
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "align-center" }),
+    label: t("tiptap.toolbar.text.center"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("center").run()
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "align-right" }),
+    label: t("tiptap.toolbar.text.right"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("right").run()
+  }, {
+    icon: /* @__PURE__ */ jsx(Icon, { name: "align-justify" }),
+    label: t("tiptap.toolbar.text.justify"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("justify").run()
+  }];
+  return [options, listOptions, alignmentOptions];
+};
+export {
+  useActionOptions
+};

package/dist/modules/editor/hooks/useCommentEditor.d.ts

@@ -0,0 +1,13 @@
+import { Content } from '@tiptap/react';
+/**
+ * Hook that creates a tiptap editor instance with plugins for editing comments.
+ *
+ * @param editable truthy if the editor content should be editable
+ * @param content default rich content
+ */
+export declare const useCommentEditor: (editable: boolean, content: Content, maxLength?: number) => {
+    editor: import('@tiptap/react').Editor | null;
+    commentLength: number;
+    getComment: () => string;
+    resetComment: () => void;
+};

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

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import { Hyperlink } from "@edifice.io/tiptap-extensions";
+import CharacterCount from "@tiptap/extension-character-count";
+import { useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+const useCommentEditor = (editable, content, maxLength = 800) => {
+  const [commentLength, setCommentLength] = useState(0), editor = useEditor({
+    editable,
+    extensions: [StarterKit, Hyperlink, CharacterCount.configure({
+      limit: maxLength
+    })],
+    content
+  });
+  return useEffect(() => {
+    editor == null || editor.commands.setContent(content);
+  }, [content, editor]), useEffect(() => {
+    editor == null || editor.setEditable(editable);
+  }, [editable, editor]), useEffect(() => {
+    function setCounter() {
+      const length = (editor == null ? void 0 : editor.storage.characterCount.characters()) ?? 0;
+      setCommentLength(length);
+    }
+    return editor == null || editor.on("update", setCounter), () => {
+      editor == null || editor.off("update", setCounter);
+    };
+  }, [editor]), {
+    editor,
+    commentLength,
+    getComment: () => editor == null ? void 0 : editor.getHTML(),
+    resetComment: () => {
+      setCommentLength(0), editor == null || editor.commands.setContent(content);
+    }
+  };
+};
+export {
+  useCommentEditor
+};