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

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 { 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 { Icon } from "../../../../components/Icon/Icon.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(Icon, { name: "text-color" }), "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 '../../../..';
+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 { useEditorContext } from "../../hooks/useEditorContext.js";
+import { hasExtension } from "../../utils/has-extension.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import { Icon } from "../../../../components/Icon/Icon.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+const 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(Icon, { name: "text-size" }), "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 '../../../..';
+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 { useEditorContext } from "../../hooks/useEditorContext.js";
+import Tooltip from "../../../../components/Tooltip/Tooltip.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import { Icon } from "../../../../components/Icon/Icon.js";
+import Dropdown from "../../../../components/Dropdown/Dropdown.js";
+const 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(Icon, { name: "text-typo" }), "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: Function;
+}
+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,319 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import "@tiptap/react";
+import { hasExtension } from "../../utils/has-extension.js";
+import { hasMark } from "../../utils/has-mark.js";
+import { hasTextStyle } from "../../utils/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 { Icon } from "../../../../components/Icon/Icon.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(Icon, { name: "undo" }),
+          "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(Icon, { name: "redo" }),
+          "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(Icon, { name: "landscape" }),
+          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(Icon, { name: "record-video" }),
+          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(Icon, { name: "mic" }),
+          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(Icon, { name: "paperclip" }),
+          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(Icon, { name: "speech-to-text" }),
+          "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(Icon, { name: "text-bold" }),
+          "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(Icon, { name: "text-italic" }),
+          "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(Icon, { name: "text-underline" }),
+          "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(Icon, { name: "link" }),
+          "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(Icon, { name: "bullet-list" }), 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(Icon, { name: "align-left" }), 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/react').Node<import('@edifice.io/tiptap-extensions').AttachmentOptions, any>;
+export default AttachmentNodeView;

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

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

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

@@ -0,0 +1,2 @@
+declare const AudioNodeView: (Component: any) => import('@tiptap/react').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";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const AudioNodeView = (Component) => Audio.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  }
+}), AudioNodeView$1 = AudioNodeView;
+export {
+  AudioNodeView$1 as default
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+declare const LinkerNodeView: (Component: any) => import('@tiptap/react').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";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const LinkerNodeView = (Component) => Linker.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  }
+}), LinkerNodeView$1 = LinkerNodeView;
+export {
+  LinkerNodeView$1 as default
+};

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

@@ -0,0 +1,2 @@
+declare const VideoNodeView: (Component: any) => import('@tiptap/react').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";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+const VideoNodeView = (Component) => Video.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  }
+}), VideoNodeView$1 = VideoNodeView;
+export {
+  VideoNodeView$1 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;
+}
+export declare const AttachmentRenderer: (props: AttachmentProps) => false | import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+import Attachment from "../../../../components/Attachment/Attachment.js";
+import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { Grid } from "../../../../components/Grid/Grid.js";
+import IconButton from "../../../../components/Button/IconButton.js";
+import { Icon } from "../../../../components/Icon/Icon.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(Icon, { name: "download" }), variant: "ghost" }) }),
+      editable && /* @__PURE__ */ jsx(IconButton, { "aria-label": t("tiptap.attachments.delete"), color: "danger", type: "button", icon: /* @__PURE__ */ jsx(Icon, { name: "delete" }), variant: "ghost", onClick: () => handleDelete(index) })
+    ] }) }) }, index)) })
+  ] }) });
+};
+export {
+  AttachmentRenderer
+};