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

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 { Editor } from '@tiptap/react';
+import { WorkspaceVisibility } from 'edifice-ts-client';
+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 "../../../core/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(), typeof res == "object" && setAttributes({
+        url: res.src,
+        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 | undefined;
+        title?: string | undefined;
+    }) => void;
+    getSelection: () => {
+        src: string;
+        title: string;
+        alt: string;
+    }[];
+};

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

@@ -0,0 +1,46 @@
+import { addTimestampToImageUrl } from "../../../utils/addTimestampToUrl.js";
+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,17 @@
+import { RefObject } from 'react';
+import { HyperlinkAttributes, LinkerAttributes } from '@edifice.io/tiptap-extensions';
+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 { Editor } from '@tiptap/react';
+import { WorkspaceElement } from 'edifice-ts-client';
+import { TabsItemProps } from '../../..';
+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 useWorkspaceFile from "../../../core/useWorkspaceFile/useWorkspaceFile.js";
+import { addTimestampToImageUrl } from "../../../utils/addTimestampToUrl.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>;
+};

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

@@ -0,0 +1,47 @@
+import { useRef, useEffect } from "react";
+const MIN_WIDTH = 80, useResizeMedia = (props, refResizable) => {
+  const aspectRatio = useRef(0), lastCursorX = useRef(-1), isVerticalResizeActive = useRef(!1), proseMirrorContainerWidth = useRef(0), limitWidthOrHeight = (width) => width < MIN_WIDTH;
+  useEffect(() => {
+    const proseMirrorContainerDiv = document.querySelector(".ProseMirror");
+    proseMirrorContainerDiv && (proseMirrorContainerWidth.current = proseMirrorContainerDiv == null ? void 0 : proseMirrorContainerDiv.clientWidth), refResizable && (aspectRatio.current = 1.5);
+  }, []);
+  const onVerticalResize = (directionOfMouseMove, diff) => {
+    var _a, _b;
+    if (!refResizable) {
+      console.error("Media ref is undefined|null", {
+        refResizable
+      });
+      return;
+    }
+    const currentMediaDimensions = {
+      width: (_a = refResizable.current) == null ? void 0 : _a.width,
+      height: (_b = refResizable.current) == null ? void 0 : _b.height
+    }, newMediaDimensions = {
+      width: -1,
+      height: -1
+    };
+    currentMediaDimensions.width && (directionOfMouseMove === "left" ? newMediaDimensions.width = currentMediaDimensions.width - Math.abs(diff) : newMediaDimensions.width = currentMediaDimensions.width + Math.abs(diff)), newMediaDimensions.width > proseMirrorContainerWidth.current && (newMediaDimensions.width = proseMirrorContainerWidth.current), diff !== 0 && limitWidthOrHeight(newMediaDimensions.width) && (newMediaDimensions.width = MIN_WIDTH), newMediaDimensions.height = newMediaDimensions.width / aspectRatio.current, setTimeout(() => {
+      props.updateAttributes(newMediaDimensions);
+    });
+  }, onVerticalMouseMove = (event) => {
+    if (!isVerticalResizeActive.current) return;
+    const {
+      clientX
+    } = event, diff = lastCursorX.current - clientX;
+    if (lastCursorX.current = clientX, diff === 0) return;
+    const directionOfMouseMove = diff > 0 ? "left" : "right";
+    onVerticalResize(directionOfMouseMove, Math.abs(diff));
+  }, startVerticalResize = (event) => {
+    isVerticalResizeActive.current = !0, lastCursorX.current = event.clientX, document.addEventListener("mousemove", onVerticalMouseMove), document.addEventListener("mouseup", stopVerticalResize);
+  }, stopVerticalResize = () => {
+    isVerticalResizeActive.current = !1, lastCursorX.current = -1, document.removeEventListener("mousemove", onVerticalMouseMove), document.removeEventListener("mouseup", stopVerticalResize);
+  };
+  return {
+    startVerticalResize,
+    stopVerticalResize,
+    isVerticalResizeActive
+  };
+};
+export {
+  useResizeMedia
+};

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

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+export declare const useSpeechRecognition: (editor: Editor | null) => {
+    isAvailable: boolean;
+    isActive: boolean;
+    toggle: () => void;
+};

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

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { odeServices } from "edifice-ts-client";
+const useSpeechRecognition = (editor) => {
+  const [isActive, setActive] = useState(!1), toggle = () => {
+    if (isActive)
+      editor == null || editor.commands.stopSpeechRecognition(), setActive(!1);
+    else {
+      odeServices.data().trackSpeechAndText("STT");
+      const started = (editor == null ? void 0 : editor.commands.startSpeechRecognition()) || !1;
+      setActive(started);
+    }
+  };
+  return {
+    isAvailable: !!(window.SpeechRecognition || window.webkitSpeechRecognition),
+    isActive,
+    toggle
+  };
+};
+export {
+  useSpeechRecognition
+};

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

@@ -0,0 +1,12 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Custom hook to manage speech synthetisis.
+ * @returns {
+ * `isActivated`: truthy boolean when speech synthetisis is activated,
+ * `toggle`: an imperative function to toggle the `isActivated` value,
+ * }
+ */
+export declare const useSpeechSynthetisis: (editor: Editor | null) => {
+    isActivated: boolean;
+    toggle: () => boolean;
+};

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

@@ -0,0 +1,20 @@
+import { useState, useCallback } from "react";
+import { odeServices } from "edifice-ts-client";
+const useSpeechSynthetisis = (editor) => {
+  const [isActivated, setActivated] = useState(!1), toggle = useCallback(() => {
+    if (isActivated)
+      return editor == null || editor.commands.stopSpeechSynthesis(), setActivated(!1), !1;
+    {
+      odeServices.data().trackSpeechAndText("TTS");
+      const speech = (editor == null ? void 0 : editor.commands.startSpeechSynthesis()) || !1;
+      return setActivated(speech), speech;
+    }
+  }, [editor == null ? void 0 : editor.commands, isActivated]);
+  return {
+    isActivated,
+    toggle
+  };
+};
+export {
+  useSpeechSynthetisis
+};

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

@@ -0,0 +1,15 @@
+import { Content, FocusPosition } from '@tiptap/react';
+/**
+ * Hook that creates a tiptap editor instance.
+ *
+ * @param editable truthy if the editor content should be editable
+ * @param content default rich content
+ * @param focus set focus position to the editor
+ * @param placeholder editor placeholder content
+ */
+export declare const useTipTapEditor: (editable: boolean, content: Content, focus?: FocusPosition, placeholder?: string, onContentChange?: (({ editor }: {
+    editor: any;
+}) => void) | undefined) => {
+    editor: import('@tiptap/react').Editor | null;
+    editable: boolean;
+};