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

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/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;
+    }[];
+};

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

@@ -0,0 +1,46 @@
+import { addTimestampToImageUrl } from "@edifice.io/utilities";
+function useImageSelection(editor) {
+  return {
+    setAttributes: ({
+      url,
+      alt,
+      title
+    }) => {
+      (editor == null ? void 0 : editor.chain().updateAttributes("custom-image", {
+        src: addTimestampToImageUrl(url),
+        alt,
+        title
+      }).run()) || editor == null || editor.chain().updateAttributes("image", {
+        src: addTimestampToImageUrl(url),
+        alt,
+        title
+      }).run();
+    },
+    getSelection: () => {
+      const datas = [];
+      if (!editor)
+        return datas;
+      const {
+        $from,
+        $to
+      } = editor.state.selection;
+      return editor.state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+        if (node.isAtom && (node.type.name === "image" || node.type.name === "custom-image")) {
+          const {
+            src,
+            title,
+            alt
+          } = node.attrs;
+          datas.push({
+            src,
+            title,
+            alt
+          });
+        }
+      }), datas;
+    }
+  };
+}
+export {
+  useImageSelection
+};

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

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { HyperlinkAttributes } from '@edifice.io/tiptap-extensions/hyperlink';
+import { LinkerAttributes } from '@edifice.io/tiptap-extensions/linker';
+import { Editor } from '@tiptap/react';
+import { MediaLibraryRef } from '../../multimedia';
+/**
+ * Custom hook to handle LinkToolbar events.
+ * @returns {
+ * `onOpen`: Opens a link ,
+ * `onEdit`: Edit a link,
+ * `onUnlink`: Removes a link,
+ * }
+ */
+export declare const useLinkToolbar: (editor: Editor | null, mediaLibraryRef: RefObject<MediaLibraryRef>) => {
+    onEdit: (attrs: LinkerAttributes | HyperlinkAttributes) => void;
+    onOpen: (attrs: LinkerAttributes) => void;
+    onUnlink: () => void;
+};

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

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+const useLinkToolbar = (editor, mediaLibraryRef) => ({
+  onEdit: useCallback((attrs) => {
+    var _a, _b;
+    editor != null && editor.isActive("hyperlink") && editor.commands.extendMarkRange("hyperlink");
+    const attrsLinker = attrs;
+    if (attrsLinker["data-id"] || attrsLinker["data-app-prefix"])
+      (_a = mediaLibraryRef.current) == null || _a.showLink({
+        target: attrs.target,
+        resourceId: attrsLinker["data-id"],
+        appPrefix: attrsLinker["data-app-prefix"]
+      });
+    else {
+      const {
+        href,
+        target
+      } = attrs;
+      (_b = mediaLibraryRef.current) == null || _b.showLink({
+        link: {
+          url: href || "",
+          target: target || void 0,
+          text: editor != null && editor.state.selection.empty ? "" : editor == null ? void 0 : editor.state.selection.content().content.child(0).textContent
+        }
+      });
+    }
+  }, [editor, mediaLibraryRef]),
+  onOpen: (attrs) => {
+    window.open(attrs.href || "about:blank", "_blank");
+  },
+  onUnlink: () => {
+    var _a, _b, _c, _d;
+    (_b = editor == null ? void 0 : (_a = editor.commands).unsetLinker) == null || _b.call(_a), (_d = editor == null ? void 0 : (_c = editor.commands).unsetLink) == null || _d.call(_c);
+  }
+});
+export {
+  useLinkToolbar
+};

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

@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Custom hook to manage MathsModal events in an editor.
+ * @param editor an instance
+ * @returns {
+ * `isOpen`: truthy boolean when MathsModal sholud be visible,
+ * `toggle`: an imperative function to toggle the `isOpen` value,
+ * `onCancel`: Cancel event handler,
+ * `onSuccess`: Success event handler (adds a formula to the editor content),
+ * }
+ */
+export declare const useMathsModal: (editor: Editor | null) => {
+    isOpen: boolean;
+    toggle: any;
+    onCancel: () => void;
+    onSuccess: (formulaEditor: string) => void;
+};

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

@@ -0,0 +1,17 @@
+import useToggle from "../../../hooks/useToggle/useToggle.js";
+const useMathsModal = (editor) => {
+  const [isOpen, toggle] = useToggle(!1);
+  return {
+    isOpen,
+    toggle,
+    onCancel: () => {
+      toggle();
+    },
+    onSuccess: (formulaEditor) => {
+      editor == null || editor.commands.insertContentAt(editor.view.state.selection, formulaEditor), editor == null || editor.commands.enter(), toggle();
+    }
+  };
+};
+export {
+  useMathsModal
+};

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

@@ -0,0 +1 @@
+export declare const useMathsStyles: () => void;

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

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+const useMathsStyles = () => {
+  useEffect(() => {
+    const katexURL = "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css";
+    let hasKatexLink = !1;
+    const links = document.head.getElementsByTagName("link");
+    for (const link of links)
+      if (link.href === katexURL) {
+        hasKatexLink = !0;
+        return;
+      }
+    if (!hasKatexLink) {
+      const link = document.createElement("link");
+      link.href = katexURL, link.rel = "stylesheet", link.type = "text/css", document.head.appendChild(link);
+    }
+  }, []);
+};
+export {
+  useMathsStyles
+};

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

@@ -0,0 +1,19 @@
+import { WorkspaceElement } from '@edifice.io/client';
+import { Editor } from '@tiptap/react';
+import { TabsItemProps } from '../../../components';
+import { MediaLibraryRef, MediaLibraryResult } from '../../multimedia';
+/**
+ * Custom hook to manage MediaLibrary events in an editor.
+ * @param editor an instance
+ * @returns {
+ * `ref`: a reference to a MediaLibrary instance,
+ * `onCancel`: Cancel event handler,
+ * `onSuccess`: Success event handler (adds a formula to the editor content),
+ * }
+ */
+export declare const useMediaLibraryEditor: (editor: Editor | null) => {
+    ref: import('react').RefObject<MediaLibraryRef>;
+    onCancel: (uploads?: WorkspaceElement[]) => Promise<void>;
+    onSuccess: (result: MediaLibraryResult) => void;
+    onTabChange: (_tab: TabsItemProps, uploads?: WorkspaceElement[]) => Promise<void>;
+};

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

@@ -0,0 +1,152 @@
+import { useCallback, useRef } from "react";
+import { addTimestampToImageUrl } from "@edifice.io/utilities";
+import useWorkspaceFile from "../../../hooks/useWorkspaceFile/useWorkspaceFile.js";
+const useMediaLibraryEditor = (editor) => {
+  const {
+    remove
+  } = useWorkspaceFile(), appendResult = useCallback((type, result) => {
+    if (!(!type || !editor))
+      switch (type) {
+        case "image": {
+          const images = result, imagesSize = images.length - 1;
+          images.forEach((image, index) => {
+            const url = `/workspace/${image.public ? "pub/" : ""}document/${image._id}`;
+            editor == null || editor.chain().focus().setNewImage({
+              /**
+               * WB-3053: addTimestampToImageUrl to update correctly image in tiptap-image-extension
+               */
+              src: addTimestampToImageUrl(url),
+              alt: image.alt,
+              title: image.title
+            }).run(), index < imagesSize && (editor == null || editor.commands.setTextSelection(editor.state.selection.to));
+          });
+          break;
+        }
+        case "audio": {
+          const sounds = Array.isArray(result) ? result : [result], {
+            from
+          } = editor.state.selection;
+          sounds.reverse().forEach((sound) => {
+            editor == null || editor.commands.setAudio(sound._id || "", `/workspace/${sound.public ? "pub/" : ""}document/${sound._id}`), editor == null || editor.commands.setTextSelection(from);
+          });
+          break;
+        }
+        case "video": {
+          if (typeof result == "string")
+            editor == null || editor.commands.insertContentAt(editor.view.state.selection, result);
+          else {
+            const videos = result, {
+              from
+            } = editor.state.selection;
+            videos.reverse().forEach((video) => {
+              editor == null || editor.commands.setVideo(video._id || "", `/workspace/${video.public ? "pub/" : ""}document/${video._id}`, !0), editor == null || editor.commands.setTextSelection(from);
+            });
+          }
+          break;
+        }
+        case "attachment": {
+          let innerHtml = "";
+          for (let i = 0; i < result.length; i++) {
+            const link = result[i];
+            innerHtml += `<a href="/workspace/${link.public ? "pub/" : ""}document/${link._id}">${link.name}
+            </a>`;
+          }
+          const richContent = `<div class="attachments">
+            ${innerHtml}
+          </div>`;
+          editor == null || editor.commands.insertContentAt(editor.view.state.selection, richContent), editor == null || editor.commands.enter();
+          break;
+        }
+        case "hyperlink": {
+          const resourceTabResult = result;
+          if (editor != null && editor.isActive("linker") && editor.commands.unsetLinker(), editor != null && editor.isActive("hyperlink") && editor.commands.toggleMark("hyperlink"), editor == null || editor.commands.focus(), editor.state.selection.empty && Array.isArray(resourceTabResult.resources))
+            resourceTabResult.resources.forEach((link) => {
+              editor == null || editor.commands.setLinker({
+                href: link.path,
+                "data-app-prefix": link.application,
+                "data-id": link.assetId,
+                target: resourceTabResult.target ?? null,
+                title: link.name
+              }), resourceTabResult && resourceTabResult.resources && resourceTabResult.resources.length > 1 && editor.commands.enter();
+            });
+          else {
+            const insertAndSelectText = (name) => {
+              if (!name) return;
+              const from = editor.state.selection.head, to = from + name.length;
+              editor == null || editor.chain().insertContent(name).setTextSelection({
+                from,
+                to
+              }).run();
+            };
+            if (Array.isArray(resourceTabResult.resources))
+              resourceTabResult.resources.forEach((link) => {
+                var _a;
+                editor.state.selection.empty && insertAndSelectText(link.name), editor == null || editor.commands.setLink({
+                  href: link.path,
+                  target: resourceTabResult.target ?? null
+                });
+                const newPosition = editor.state.selection.head;
+                editor.commands.setTextSelection({
+                  from: newPosition,
+                  to: newPosition
+                }), resourceTabResult != null && resourceTabResult.resources && ((_a = resourceTabResult == null ? void 0 : resourceTabResult.resources) == null ? void 0 : _a.length) > 1 && editor.commands.enter();
+              });
+            else {
+              const {
+                url,
+                target,
+                text
+              } = result;
+              if (editor.state.selection.empty)
+                insertAndSelectText(text);
+              else {
+                const {
+                  selection
+                } = editor.view.state, {
+                  from,
+                  to
+                } = selection;
+                text && selection.content().content.child(0).textContent !== text && editor.chain().focus().insertContentAt({
+                  from,
+                  to
+                }, text).setTextSelection({
+                  from,
+                  to: from + text.length
+                }).run();
+              }
+              editor == null || editor.commands.setLink({
+                href: url,
+                title: "",
+                target
+              });
+            }
+          }
+          break;
+        }
+        case "embedder": {
+          editor == null || editor.commands.insertContentAt(editor.view.state.selection, result), editor == null || editor.commands.enter();
+          break;
+        }
+        default:
+          return `<div>[useMediaLibraryEditor/onSuccess] Le contenu de type "${type}" n'est pas convertissable pour l'instant !</div>`;
+      }
+  }, [editor]), mediaLibraryRef = useRef(null);
+  return {
+    ref: mediaLibraryRef,
+    onCancel: async (uploads) => {
+      var _a, _b;
+      (_a = mediaLibraryRef.current) != null && _a.type && uploads && uploads.length > 0 && await remove(uploads), (_b = mediaLibraryRef.current) == null || _b.hide();
+    },
+    onSuccess: (result) => {
+      var _a, _b;
+      (_a = mediaLibraryRef.current) != null && _a.type && (appendResult(mediaLibraryRef.current.type, result), (_b = mediaLibraryRef.current) == null || _b.hide());
+    },
+    onTabChange: async (_tab, uploads) => {
+      var _a;
+      (_a = mediaLibraryRef.current) != null && _a.type && uploads && uploads.length > 0 && await remove(uploads);
+    }
+  };
+};
+export {
+  useMediaLibraryEditor
+};

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

@@ -0,0 +1,10 @@
+import { Editor } from '@tiptap/react';
+export interface MediaResizeProps {
+    editor: Editor;
+    [x: string]: any;
+}
+export declare const useResizeMedia: (props: MediaResizeProps, refResizable: React.RefObject<HTMLImageElement | HTMLVideoElement>) => {
+    startVerticalResize: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    stopVerticalResize: () => void;
+    isVerticalResizeActive: import('react').MutableRefObject<boolean>;
+};