@edifice.io/react 2.0.0-develop-rc.14 → 2.0.0-develop-rc.16

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

@@ -0,0 +1,61 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { FloatingMenu } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import SvgIconEdit from "../../../icons/components/IconEdit.js";
+import SvgIconExternalLink from "../../../icons/components/IconExternalLink.js";
+import SvgIconUnlink from "../../../icons/components/IconUnlink.js";
+import { tippyOptions } from "./LinkToolbar.TippyOptions.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(SvgIconEdit, {}),
+      "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(SvgIconExternalLink, {}),
+      "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(SvgIconUnlink, { 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 }) }) });
+};
+export {
+  LinkToolbar 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,33 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconArrowDown from "../../../icons/components/IconArrowDown.js";
+import SvgIconArrowLeft from "../../../icons/components/IconArrowLeft.js";
+import SvgIconArrowRight from "../../../icons/components/IconArrowRight.js";
+import SvgIconArrowUp from "../../../icons/components/IconArrowUp.js";
+import SvgIconHighlightColumn from "../../../icons/components/IconHighlightColumn.js";
+import SvgIconHighlightRow from "../../../icons/components/IconHighlightRow.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.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(SvgIconArrowUp, {}), 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(SvgIconArrowDown, {}), 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(SvgIconArrowLeft, {}), 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(SvgIconArrowRight, {}), 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(SvgIconHighlightRow, {}), 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(SvgIconHighlightColumn, {}), 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 Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+import ColorPickerItem from "../../../../components/ColorPicker/ColorPickerItem.js";
+import ColorPicker from "../../../../components/ColorPicker/ColorPicker.js";
+import { DefaultPalette } from "../../../../components/ColorPicker/ColorPalette.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,31 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconDeleteColumnHighlight from "../../../icons/components/IconDeleteColumnHighlight.js";
+import SvgIconDeleteColumn from "../../../icons/components/IconDeleteColumn.js";
+import SvgIconDeleteRowHighlight from "../../../icons/components/IconDeleteRowHighlight.js";
+import SvgIconDeleteRow from "../../../icons/components/IconDeleteRow.js";
+import SvgIconDelete from "../../../icons/components/IconDelete.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.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(SvgIconDeleteRow, {}), 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(SvgIconDeleteColumn, {}), 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(SvgIconDeleteRowHighlight, {}), 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(SvgIconDeleteColumnHighlight, {}), 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(SvgIconDelete, {}), 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,89 @@
+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 SvgIconMergeCells from "../../../icons/components/IconMergeCells.js";
+import SvgIconSplitCells from "../../../icons/components/IconSplitCells.js";
+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";
+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(SvgIconSplitCells, {}) : /* @__PURE__ */ jsx(SvgIconMergeCells, {}),
+      "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 })
+    }
+  }] }) }) });
+};
+export {
+  TableToolbar 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 '../../../components';
+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,86 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconAlignCenter from "../../icons/components/IconAlignCenter.js";
+import SvgIconAlignJustify from "../../icons/components/IconAlignJustify.js";
+import SvgIconAlignLeft from "../../icons/components/IconAlignLeft.js";
+import SvgIconAlignRight from "../../icons/components/IconAlignRight.js";
+import SvgIconBulletList from "../../icons/components/IconBulletList.js";
+import SvgIconCode from "../../icons/components/IconCode.js";
+import SvgIconOrderedList from "../../icons/components/IconOrderedList.js";
+import SvgIconSquareRoot from "../../icons/components/IconSquareRoot.js";
+import SvgIconSubscript from "../../icons/components/IconSubscript.js";
+import SvgIconSuperscript from "../../icons/components/IconSuperscript.js";
+import SvgIconTable from "../../icons/components/IconTable.js";
+import SvgIconTextVanilla from "../../icons/components/IconTextVanilla.js";
+const useActionOptions = (editor, toggleMathsModal, mediaLibraryRef) => {
+  const {
+    t
+  } = useTranslation(), options = [{
+    icon: /* @__PURE__ */ jsx(SvgIconTextVanilla, {}),
+    label: t("tiptap.toolbar.removeFormat"),
+    action: () => editor == null ? void 0 : editor.chain().clearNodes().unsetAllMarks().run()
+  }, {
+    type: "divider"
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconTable, {}),
+    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(SvgIconSuperscript, {}),
+    label: t("tiptap.toolbar.superscript"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleSuperscript().run()
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconSubscript, {}),
+    label: t("tiptap.toolbar.subscript"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleSubscript().run()
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconSquareRoot, {}),
+    label: t("tiptap.toolbar.mathjax"),
+    action: () => {
+      toggleMathsModal();
+    }
+  }, {
+    type: "divider"
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconCode, {}),
+    label: t("tiptap.toolbar.embed.iframe"),
+    action: () => {
+      var _a;
+      return (_a = mediaLibraryRef.current) == null ? void 0 : _a.show("embedder");
+    }
+  }], listOptions = [{
+    icon: /* @__PURE__ */ jsx(SvgIconBulletList, {}),
+    label: t("tiptap.toolbar.ulist"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run()
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconOrderedList, {}),
+    label: t("tiptap.toolbar.olist"),
+    action: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run()
+  }], alignmentOptions = [{
+    icon: /* @__PURE__ */ jsx(SvgIconAlignLeft, {}),
+    label: t("tiptap.toolbar.text.left"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("left").run()
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconAlignCenter, {}),
+    label: t("tiptap.toolbar.text.center"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("center").run()
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconAlignRight, {}),
+    label: t("tiptap.toolbar.text.right"),
+    action: () => editor == null ? void 0 : editor.chain().focus().setTextAlign("right").run()
+  }, {
+    icon: /* @__PURE__ */ jsx(SvgIconAlignJustify, {}),
+    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, HTMLContent } 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: () => HTMLContent;
+    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/hyperlink";
+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
+};

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

@@ -0,0 +1,37 @@
+import { Editor } from '@tiptap/react';
+export declare const EditorContext: import('react').Context<{
+    /**
+     * Application code (example: "blog")
+     */
+    appCode: string;
+    /**
+     * TipTap editor instance
+     */
+    editor: Editor | null;
+    /**
+     * To know if TipTap editor is editable
+     */
+    editable: boolean;
+    /**
+     * Id of the editor's HTMLElement
+     */
+    id: string;
+}>;
+export declare function useEditorContext(): {
+    /**
+     * Application code (example: "blog")
+     */
+    appCode: string;
+    /**
+     * TipTap editor instance
+     */
+    editor: Editor | null;
+    /**
+     * To know if TipTap editor is editable
+     */
+    editable: boolean;
+    /**
+     * Id of the editor's HTMLElement
+     */
+    id: string;
+};

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+const EditorContext = /* @__PURE__ */ createContext(null);
+function useEditorContext() {
+  const context = useContext(EditorContext);
+  if (!context)
+    throw new Error("Editor compound components cannot be rendered outside the Editor component");
+  return context;
+}
+export {
+  EditorContext,
+  useEditorContext
+};

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

@@ -0,0 +1,31 @@
+import { WorkspaceVisibility } from '@edifice.io/ts-client';
+import { Editor } from '@tiptap/react';
+type EditedImage = {
+    src: string;
+    alt?: string;
+    title?: string;
+} | undefined;
+/**
+ * Custom hook to manage ImageModal success and cancelation in the current editor context.
+ * @returns {
+ * `isOpen`: truthy boolean when the modal should be visible,
+ * `currentImage`: the image being edited,
+ * `toggle`: an imperative function to toggle the `isOpen` value,
+ * `handleCancel`: Cancel event handler,
+ * `handleEdit`: Edit event handler,
+ * `handleSave`: Success event handler,
+ * }
+ */
+export declare const useImageModal: (editor: Editor | null, application?: string, visibility?: WorkspaceVisibility) => {
+    isOpen: boolean;
+    currentImage: EditedImage;
+    toggle: any;
+    handleCancel: () => void;
+    handleEdit: () => void;
+    handleSave: ({ blob, legend, altText: alt, }: {
+        blob: Blob;
+        legend: string;
+        altText: string;
+    }) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { useImageSelection } from "./useImageSelection.js";
+import useToggle from "../../../hooks/useToggle/useToggle.js";
+import useWorkspaceFile from "../../../hooks/useWorkspaceFile/useWorkspaceFile.js";
+const useImageModal = (editor, application, visibility) => {
+  const [currentImage, setCurrentImage] = useState(void 0), [isOpen, toggle] = useToggle(!1), {
+    createOrUpdate
+  } = useWorkspaceFile(), {
+    setAttributes,
+    getSelection
+  } = useImageSelection(editor);
+  return {
+    isOpen,
+    currentImage,
+    toggle,
+    handleCancel: () => {
+      toggle();
+    },
+    handleEdit: () => {
+      const selected = getSelection()[0];
+      selected && (setCurrentImage(selected), toggle());
+    },
+    handleSave: async ({
+      blob,
+      legend,
+      altText: alt
+    }) => {
+      const res = await createOrUpdate({
+        blob,
+        legend,
+        alt,
+        uri: currentImage == null ? void 0 : currentImage.src,
+        visibility,
+        application
+      });
+      toggle(), setAttributes({
+        url: typeof res == "object" ? res.src : res,
+        alt,
+        title: legend
+      });
+    }
+  };
+};
+export {
+  useImageModal
+};

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

@@ -0,0 +1,21 @@
+import { Editor } from '@tiptap/react';
+/**
+ * This hooks lets manipulate selected image node by
+ * - setting attributes
+ * - getting their attributes
+ *
+ * @param editor
+ * @returns
+ */
+export declare function useImageSelection(editor?: Editor | null | undefined): {
+    setAttributes: ({ url, alt, title, }: {
+        url: string;
+        alt?: string;
+        title?: string;
+    }) => void;
+    getSelection: () => {
+        src: string;
+        title: string;
+        alt: string;
+    }[];
+};