@edifice.io/react 2.0.5-develop-pedago.20250212100405 → 2.0.5-develop-pedago.20250212101448

package/dist/editor.js

@@ -1,17 +1,18 @@
-import { Editor, EditorContent, useEditor } from "@tiptap/react";
+import { EditorContent, Editor, useEditor } from "@tiptap/react";
 import { default as default2 } from "@tiptap/starter-kit";
-import { default as default3 } from "./modules/editor/components/BubbleMenuEditImage/BubbleMenuEditImage.js";
-import { default as default4 } from "./modules/editor/components/NodeView/AudioNodeView.js";
-import { default as default5 } from "./modules/editor/components/NodeView/AttachmentNodeView.js";
-import { default as default6 } from "./modules/editor/components/NodeView/ImageNodeView.js";
-import { default as default7 } from "./modules/editor/components/NodeView/LinkerNodeView.js";
-import { default as default8 } from "./modules/editor/components/NodeView/VideoNodeView.js";
-import { default as default9 } from "./modules/editor/components/Renderer/AudioRenderer.js";
-import { default as default10 } from "./modules/editor/components/Renderer/AttachmentRenderer.js";
-import { default as default11 } from "./modules/editor/components/Renderer/LinkerRenderer.js";
-import { default as default12 } from "./modules/editor/components/Renderer/MediaRenderer.js";
-import { default as default13 } from "./modules/editor/components/Toolbar/TableToolbar.js";
-import { default as default14 } from "./modules/editor/components/Toolbar/LinkToolbar.js";
+import { default as default3 } from "./modules/editor/components/Editor/Editor.js";
+import { default as default4 } from "./modules/editor/components/BubbleMenuEditImage/BubbleMenuEditImage.js";
+import { default as default5 } from "./modules/editor/components/NodeView/AudioNodeView.js";
+import { default as default6 } from "./modules/editor/components/NodeView/AttachmentNodeView.js";
+import { default as default7 } from "./modules/editor/components/NodeView/ImageNodeView.js";
+import { default as default8 } from "./modules/editor/components/NodeView/LinkerNodeView.js";
+import { default as default9 } from "./modules/editor/components/NodeView/VideoNodeView.js";
+import { default as default10 } from "./modules/editor/components/Renderer/AudioRenderer.js";
+import { default as default11 } from "./modules/editor/components/Renderer/AttachmentRenderer.js";
+import { default as default12 } from "./modules/editor/components/Renderer/LinkerRenderer.js";
+import { default as default13 } from "./modules/editor/components/Renderer/MediaRenderer.js";
+import { default as default14 } from "./modules/editor/components/Toolbar/TableToolbar.js";
+import { default as default15 } from "./modules/editor/components/Toolbar/LinkToolbar.js";
 import { EditorToolbar } from "./modules/editor/components/EditorToolbar/EditorToolbar.js";
 import { useActionOptions } from "./modules/editor/hooks/useActionOptions.js";
 import { useCommentEditor } from "./modules/editor/hooks/useCommentEditor.js";
@@ -26,23 +27,24 @@ import { useSpeechRecognition } from "./modules/editor/hooks/useSpeechRecognitio
 import { useSpeechSynthetisis } from "./modules/editor/hooks/useSpeechSynthetisis.js";
 import { useTipTapEditor } from "./modules/editor/hooks/useTipTapEditor.js";
 export {
-  default5 as AttachmentNodeView,
-  default10 as AttachmentRenderer,
-  default4 as AudioNodeView,
-  default9 as AudioRenderer,
-  default3 as BubbleMenuEditImage,
-  Editor,
+  default6 as AttachmentNodeView,
+  default11 as AttachmentRenderer,
+  default5 as AudioNodeView,
+  default10 as AudioRenderer,
+  default4 as BubbleMenuEditImage,
+  default3 as Editor,
   EditorContent,
   EditorContext,
   EditorToolbar,
-  default6 as ImageNodeView,
-  default14 as LinkToolbar,
-  default7 as LinkerNodeView,
-  default11 as LinkerRenderer,
-  default12 as MediaRenderer,
+  default7 as ImageNodeView,
+  default15 as LinkToolbar,
+  default8 as LinkerNodeView,
+  default12 as LinkerRenderer,
+  default13 as MediaRenderer,
   default2 as StarterKit,
-  default13 as TableToolbar,
-  default8 as VideoNodeView,
+  default14 as TableToolbar,
+  Editor as TipTapEditor,
+  default9 as VideoNodeView,
   useActionOptions,
   useCommentEditor,
   useEditor,

package/dist/modules/editor/components/Editor/Editor.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, Suspense, lazy } from "react";
+import { EditorContent } from "@tiptap/react";
+import clsx from "clsx";
+import "@tiptap/starter-kit";
+import { useEdificeClient } from "../../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useMathsStyles } from "../../hooks/useMathsStyles.js";
+import { useTipTapEditor } from "../../hooks/useTipTapEditor.js";
+import { useMediaLibraryEditor } from "../../hooks/useMediaLibraryEditor.js";
+import { useMathsModal } from "../../hooks/useMathsModal.js";
+import { useImageModal } from "../../hooks/useImageModal.js";
+import { useLinkToolbar } from "../../hooks/useLinkToolbar.js";
+import { useSpeechSynthetisis } from "../../hooks/useSpeechSynthetisis.js";
+import { EditorContext } from "../../hooks/useEditorContext.js";
+import { EditorToolbar } from "../EditorToolbar/EditorToolbar.js";
+import LinkToolbar from "../Toolbar/LinkToolbar.js";
+import TableToolbar from "../Toolbar/TableToolbar.js";
+import BubbleMenuEditImage from "../BubbleMenuEditImage/BubbleMenuEditImage.js";
+import MediaLibrary from "../../../multimedia/MediaLibrary/MediaLibrary.js";
+import LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.js";
+const MathsModal = /* @__PURE__ */ lazy(async () => await import("../MathsModal/MathsModal.js")), ImageEditor = /* @__PURE__ */ lazy(async () => await import("../../../multimedia/ImageEditor/components/ImageEditor.js")), Editor = /* @__PURE__ */ forwardRef(({
+  id,
+  content,
+  mode = "read",
+  toolbar = "full",
+  variant = "outline",
+  focus = "start",
+  placeholder = "",
+  visibility = "protected",
+  onContentChange
+}, ref) => {
+  const editorId = useId(), {
+    appCode
+  } = useEdificeClient(), {
+    editor,
+    editable
+  } = useTipTapEditor(mode === "edit", content, focus, placeholder, onContentChange, visibility), {
+    ref: mediaLibraryModalRef,
+    ...mediaLibraryModalHandlers
+  } = useMediaLibraryEditor(editor), {
+    toggle: toggleMathsModal,
+    ...mathsModalHandlers
+  } = useMathsModal(editor), imageModal = useImageModal(editor, "media-library", visibility), linkToolbarHandlers = useLinkToolbar(editor, mediaLibraryModalRef), speechSynthetisis = useSpeechSynthetisis(editor);
+  if (useMathsStyles(), useImperativeHandle(ref, () => ({
+    getContent: (as) => {
+      switch (as) {
+        case "html":
+          return editor == null ? void 0 : editor.getHTML();
+        case "json":
+          return editor == null ? void 0 : editor.getJSON();
+        case "plain":
+          return editor == null ? void 0 : editor.getText();
+        default:
+          throw `[Editor] Unknown content format ${as}`;
+      }
+    },
+    toogleSpeechSynthetisis: speechSynthetisis.toggle,
+    isSpeeching: () => speechSynthetisis.isActivated
+  })), !editor) return null;
+  const borderClass = clsx(variant === "outline" && "border rounded-3"), contentClass = clsx(variant === "outline" && "py-12 px-16");
+  return /* @__PURE__ */ jsxs(EditorContext.Provider, { value: {
+    id: id ?? editorId,
+    appCode,
+    editor,
+    editable
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { className: borderClass, children: [
+      toolbar !== "none" && editable && /* @__PURE__ */ jsx(EditorToolbar, { mediaLibraryRef: mediaLibraryModalRef, toggleMathsModal }),
+      /* @__PURE__ */ jsx(EditorContent, { id: id ?? editorId, editor, className: contentClass })
+    ] }),
+    /* @__PURE__ */ jsx(LinkToolbar, { editor, ...linkToolbarHandlers }),
+    /* @__PURE__ */ jsx(TableToolbar, { editor }),
+    editor && /* @__PURE__ */ jsx(BubbleMenuEditImage, { editor, onEditImage: imageModal.handleEdit, openEditImage: imageModal.isOpen, editable }),
+    /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, {}), children: [
+      editable && /* @__PURE__ */ jsx(MediaLibrary, { appCode, visibility, multiple: !0, ref: mediaLibraryModalRef, ...mediaLibraryModalHandlers }),
+      editable && mathsModalHandlers.isOpen && /* @__PURE__ */ jsx(MathsModal, { ...mathsModalHandlers }),
+      editable && (imageModal == null ? void 0 : imageModal.isOpen) && (imageModal == null ? void 0 : imageModal.currentImage) && /* @__PURE__ */ jsx(ImageEditor, { altText: imageModal == null ? void 0 : imageModal.currentImage.alt, legend: imageModal == null ? void 0 : imageModal.currentImage.title, image: imageModal == null ? void 0 : imageModal.currentImage.src, isOpen: imageModal.isOpen, onCancel: imageModal.handleCancel, onSave: imageModal.handleSave, onError: console.error })
+    ] })
+  ] });
+});
+export {
+  Editor as default
+};

package/dist/modules/editor/components/MathsModal/MathsModal.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Mathematics from "@tiptap-pro/extension-mathematics";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useTranslation } from "react-i18next";
+import Modal from "../../../../components/Modal/Modal.js";
+import Button from "../../../../components/Button/Button.js";
+const MathsModal = ({
+  isOpen,
+  onSuccess,
+  onCancel
+}) => {
+  const FORMULA_PLACEHOLDER = "\\frac{-b + \\sqrt{b^2 - 4ac}}{2a}", [formulaEditor, setFormulaEditor] = useState(`$${FORMULA_PLACEHOLDER}$`), {
+    t
+  } = useTranslation(), editor = useEditor({
+    extensions: [StarterKit, Mathematics],
+    content: "",
+    editable: !1
+  });
+  useEffect(() => {
+    editor == null || editor.commands.setContent(formulaEditor), editor == null || editor.commands.enter();
+  }, [editor, formulaEditor]);
+  const handleChange = (event) => {
+    const newFormulaEditor = event.target.value.replaceAll(`
+`, "$<br/>$");
+    newFormulaEditor ? (editor == null || editor.commands.setContent(`$${newFormulaEditor}$`), setFormulaEditor(`$${newFormulaEditor}$`)) : (editor == null || editor.commands.setContent(""), setFormulaEditor("")), editor == null || editor.commands.enter();
+  }, handleOnCancel = () => {
+    onCancel == null || onCancel();
+  };
+  return /* @__PURE__ */ jsxs(Modal, { id: "MathsModal", isOpen, onModalClose: handleOnCancel, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleOnCancel, children: t("tiptap.maths.title") }),
+    /* @__PURE__ */ jsxs(Modal.Subtitle, { children: [
+      t("tiptap.maths.subtitle.1"),
+      /* @__PURE__ */ jsx("a", { href: t("https://fr.wikibooks.org/wiki/LaTeX/%C3%89crire_des_math%C3%A9matiques"), target: "_blank", children: t("tiptap.maths.subtitle.2") })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
+      /* @__PURE__ */ jsx("textarea", { id: "formulaTextArea", name: "formula", rows: 4, cols: 50, onChange: handleChange, placeholder: `Exemple : ${FORMULA_PLACEHOLDER}`, className: "border rounded-3 w-100 px-16 py-12" }),
+      /* @__PURE__ */ jsx(EditorContent, { editor, className: "pt-24 pb-0 text-center fs-1" })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("tiptap.maths.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: () => onSuccess == null ? void 0 : onSuccess(formulaEditor), type: "button", variant: "filled", children: t("tiptap.maths.add") })
+    ] })
+  ] });
+};
+export {
+  MathsModal as default
+};

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/index.d.ts

@@ -1,5 +1,5 @@
 import { default as StarterKit } from '@tiptap/starter-kit';
-export { EditorContent, type Content, useEditor, Editor } from '@tiptap/react';
+export { EditorContent, type Content, useEditor, Editor as TipTapEditor } from '@tiptap/react';
 export { StarterKit };
 export * from './components';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.0.5-develop-pedago.20250212100405",
+  "version": "2.0.5-develop-pedago.20250212101448",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.0.5-develop-pedago.20250212100405",
-    "@edifice.io/utilities": "2.0.5-develop-pedago.20250212100405",
-    "@edifice.io/tiptap-extensions": "2.0.5-develop-pedago.20250212100405"
+    "@edifice.io/bootstrap": "2.0.5-develop-pedago.20250212101448",
+    "@edifice.io/tiptap-extensions": "2.0.5-develop-pedago.20250212101448",
+    "@edifice.io/utilities": "2.0.5-develop-pedago.20250212101448"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -148,8 +148,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.0.5-develop-pedago.20250212100405",
-    "@edifice.io/config": "2.0.5-develop-pedago.20250212100405"
+    "@edifice.io/config": "2.0.5-develop-pedago.20250212101448",
+    "@edifice.io/client": "2.0.5-develop-pedago.20250212101448"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",