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

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
+};

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

@@ -0,0 +1,3 @@
+import { WorkspaceElement } from '@edifice.io/ts-client';
+declare const ImageNodeView: (Component: any, uploadFile: (file: File) => Promise<WorkspaceElement | null>) => import('@tiptap/core').Node<import('@edifice.io/tiptap-extensions/image').CustomImageOptions, any>;
+export default ImageNodeView;

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

@@ -0,0 +1,12 @@
+import { Image } from "@edifice.io/tiptap-extensions/image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const ImageNodeView = (Component, uploadFile) => Image.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  }
+}).configure({
+  uploadFile
+});
+export {
+  ImageNodeView as default
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export { default as AudioNodeView } from './AudioNodeView';
+export { default as AttachmentNodeView } from './AttachmentNodeView';
+export { default as ImageNodeView } from './ImageNodeView';
+export { default as LinkerNodeView } from './LinkerNodeView';
+export { default as VideoNodeView } from './VideoNodeView';

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

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

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

@@ -0,0 +1,35 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import SvgIconDelete from "../../../icons/components/IconDelete.js";
+import SvgIconDownload from "../../../icons/components/IconDownload.js";
+import Attachment from "../../../../components/Attachment/Attachment.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { Grid } from "../../../../components/Grid/Grid.js";
+const AttachmentRenderer = (props) => {
+  const {
+    t
+  } = useTranslation(), {
+    node
+  } = props, {
+    editable
+  } = useEditorContext(), [attachmentArrayAttrs, setAttachmentArrayAttrs] = useState(node.attrs.links), handleDelete = (index) => {
+    setAttachmentArrayAttrs((oldAttachments) => oldAttachments.filter((_, i) => i !== index));
+  };
+  return attachmentArrayAttrs.length !== 0 && /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsxs("div", { style: {
+    backgroundColor: "#F2F2F2",
+    borderRadius: ".8rem",
+    padding: "1.2rem"
+  }, "data-drag-handle": !0, children: [
+    /* @__PURE__ */ jsx("p", { className: "m-12 mt-0", children: t("tiptap.attachments.bloc") }),
+    /* @__PURE__ */ jsx(Grid, { children: attachmentArrayAttrs == null ? void 0 : attachmentArrayAttrs.map((attachment, index) => /* @__PURE__ */ jsx(Grid.Col, { sm: "6", children: /* @__PURE__ */ jsx(Attachment, { name: attachment.name, options: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("a", { href: attachment.href, download: !0, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": t("tiptap.attachments.download"), color: "tertiary", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDownload, {}), variant: "ghost" }) }),
+      editable && /* @__PURE__ */ jsx(IconButton, { "aria-label": t("tiptap.attachments.delete"), color: "danger", type: "button", icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), variant: "ghost", onClick: () => handleDelete(index) })
+    ] }) }) }, index)) })
+  ] }) });
+};
+export {
+  AttachmentRenderer as default
+};

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;
+}
+declare const AudioRenderer: (props: AudioProps) => import("react/jsx-runtime").JSX.Element;
+export default AudioRenderer;

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 as default
+};

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;
+}
+declare const LinkerRenderer: ({ selected, ...props }: LinkerProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkerRenderer;

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 Badge from "../../../../components/Badge/Badge.js";
+import AppIcon from "../../../../components/AppIcon/AppIcon.js";
+import useEdificeIcons from "../../../../hooks/useEdificeIcons/useEdificeIcons.js";
+const LinkerRenderer = ({
+  selected,
+  ...props
+}) => {
+  const {
+    getIconCode
+  } = useEdificeIcons(), {
+    editor,
+    node
+  } = props, {
+    class: className,
+    "data-app-prefix": appPrefix,
+    title,
+    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: "chip"
+  }, 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 as default
+};

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

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

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

@@ -0,0 +1,73 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { odeServices } from "@edifice.io/ts-client";
+import { NodeViewWrapper } from "@tiptap/react";
+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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Image, { src: node.attrs.src, alt: node.attrs.alt, title: node.attrs.title, width: node.attrs.width, style: node.attrs.style, height: node.attrs.height, className: "custom-image", ref: resizableMedia }),
+      node.attrs.title && // Display legend (set in title attribute) if it exists
+      /* @__PURE__ */ jsx("em", { className: "custom-image-legend caption text-align-left", children: node.attrs.title })
+    ] }) : (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ jsx("video", { ref: resizableMedia, controls: node.attrs.controls === "true", 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 as default
+};

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

@@ -0,0 +1,4 @@
+export { default as AudioRenderer } from './AudioRenderer';
+export { default as AttachmentRenderer } from './AttachmentRenderer';
+export { default as LinkerRenderer } from './LinkerRenderer';
+export { default as MediaRenderer } 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;