@capytale/meta-player 0.9.11 → 0.10.0

package/src/features/pedago/InstructionsEditor.tsx

@@ -1,102 +1,104 @@
-import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import {
-  selectInstructions,
-  selectInstructionsType,
-  selectMode,
-  setCanSaveInstructions,
-  setInstructionsType,
-  setIsMPDirty,
-  setLexicalInstructionsState,
-} from "../activityData/activityDataSlice";
-import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
-import settings from "../../settings";
-import { Button } from "primereact/button";
-import { useToast } from "../toast";
-
-const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
-  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
-  const dispatch = useAppDispatch();
-  const toast = useToast();
-  const mode = useAppSelector(selectMode);
-  const isEditable = mode === "create";
-  const initialInstructions = useAppSelector(selectInstructions);
-  const htmlInitialContent = useMemo(() => {
-    return initialInstructions?.format === "lexical"
-      ? undefined
-      : initialInstructions?.htmlValue === null
-        ? undefined
-        : (initialInstructions?.htmlValue as string) || ""; // HTML content in value
-  }, [initialInstructions]);
-  const initialEditorState = useMemo(() => {
-    return initialInstructions?.format === "lexical"
-      ? initialInstructions?.value
-      : undefined;
-  }, [initialInstructions]);
-  const initialStateOnChangeDone = useRef<boolean>(false);
-  const instructionsType = useAppSelector(selectInstructionsType);
-
-  useImperativeHandle(ref, () => {
-    return {
-      save: async () => {
-        const state = await getState();
-        dispatch(setLexicalInstructionsState(state.json));
-      },
-    };
-  });
-
-  return (
-    <>
-      <>
-        {instructionsType === "none" && (
-          <>
-            <p>Pas de consigne.</p>
-            {mode === "create" && (
-              <Button
-                label="Créer une consigne"
-                onClick={() => dispatch(setInstructionsType("rich"))}
-              />
-            )}
-          </>
-        )}
-        {instructionsType === "rich" && (
-          <Editor
-            placeholderText="Écrivez la consigne ici..."
-            htmlInitialContent={htmlInitialContent}
-            initialEditorState={initialEditorState}
-            jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
-            onChange={(editorState) => {
-              dispatch(setLexicalInstructionsState(editorState));
-              if (initialStateOnChangeDone.current) {
-                dispatch(setIsMPDirty(true));
-              } else {
-                initialStateOnChangeDone.current = true;
-              }
-            }}
-            onJsonSizeLimitExceeded={() => {
-              dispatch(setCanSaveInstructions(false));
-              toast.show({
-                summary: "Erreur",
-                detail: `Le contenu de la consigne est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
-                severity: "error",
-                life: 10000,
-              });
-            }}
-            onJsonSizeLimitMet={() => {
-              dispatch(setCanSaveInstructions(true));
-              toast.show({
-                summary: "Succès",
-                detail: `Le contenu de la consigne ne dépasse plus la taille limite.`,
-                severity: "success",
-                life: 4000,
-              });
-            }}
-            isEditable={isEditable}
-          />
-        )}
-      </>
-    </>
-  );
-});
-
-export default InstructionsEditor;
+import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectInstructions,
+  selectInstructionsType,
+  selectMode,
+  setCanSaveInstructions,
+  setInstructionsType,
+  setIsMPDirty,
+  setLexicalInstructionsState,
+} from "../activityData/activityDataSlice";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import settings from "../../settings";
+import { Button } from "primereact/button";
+import { useToast } from "../toast";
+import { useZustandStore } from "../../zustandStore";
+
+const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
+  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
+  const dispatch = useAppDispatch();
+  const toast = useToast();
+  const mode = useAppSelector(selectMode);
+  const isPreviewing = useZustandStore((state) => state.isPreviewing);
+  const isEditable = mode === "create" && !isPreviewing;
+  const initialInstructions = useAppSelector(selectInstructions);
+  const htmlInitialContent = useMemo(() => {
+    return initialInstructions?.format === "lexical"
+      ? undefined
+      : initialInstructions?.htmlValue === null
+        ? undefined
+        : (initialInstructions?.htmlValue as string) || ""; // HTML content in value
+  }, [initialInstructions]);
+  const initialEditorState = useMemo(() => {
+    return initialInstructions?.format === "lexical"
+      ? initialInstructions?.value
+      : undefined;
+  }, [initialInstructions]);
+  const initialStateOnChangeDone = useRef<boolean>(false);
+  const instructionsType = useAppSelector(selectInstructionsType);
+
+  useImperativeHandle(ref, () => {
+    return {
+      save: async () => {
+        const state = await getState();
+        dispatch(setLexicalInstructionsState(state.json));
+      },
+    };
+  });
+
+  return (
+    <>
+      <>
+        {instructionsType === "none" && (
+          <>
+            <p>Pas de consigne.</p>
+            {isEditable && (
+              <Button
+                label="Créer une consigne"
+                onClick={() => dispatch(setInstructionsType("rich"))}
+              />
+            )}
+          </>
+        )}
+        {instructionsType === "rich" && (
+          <Editor
+            placeholderText="Écrivez la consigne ici..."
+            htmlInitialContent={htmlInitialContent}
+            initialEditorState={initialEditorState}
+            jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
+            onChange={(editorState) => {
+              dispatch(setLexicalInstructionsState(editorState));
+              if (initialStateOnChangeDone.current) {
+                dispatch(setIsMPDirty(true));
+              } else {
+                initialStateOnChangeDone.current = true;
+              }
+            }}
+            onJsonSizeLimitExceeded={() => {
+              dispatch(setCanSaveInstructions(false));
+              toast.show({
+                summary: "Erreur",
+                detail: `Le contenu de la consigne est trop volumineux. Veuillez le réduire avant de l'enregistrer.\nPeut-être avez-vous inséré une image trop volumineuse ?`,
+                severity: "error",
+                life: 10000,
+              });
+            }}
+            onJsonSizeLimitMet={() => {
+              dispatch(setCanSaveInstructions(true));
+              toast.show({
+                summary: "Succès",
+                detail: `Le contenu de la consigne ne dépasse plus la taille limite.`,
+                severity: "success",
+                life: 4000,
+              });
+            }}
+            isEditable={isEditable}
+          />
+        )}
+      </>
+    </>
+  );
+});
+
+export default InstructionsEditor;

package/src/features/pedago/PdfEditor.tsx

@@ -1,91 +1,91 @@
-import { FC, useEffect, useMemo } from "react";
-import { useDropzone } from "react-dropzone";
-import styles from "./style.module.scss";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import {
-  selectMode,
-  selectPdfInstructions,
-  setPdfInstructions,
-} from "../activityData/activityDataSlice";
-import { Button } from "primereact/button";
-
-export const PdfEditor: FC = () => {
-  const dispatch = useAppDispatch();
-  const {
-    getRootProps,
-    getInputProps,
-    isFocused,
-    isDragAccept,
-    isDragReject,
-    acceptedFiles,
-  } = useDropzone({
-    accept: {
-      "application/pdf": [".pdf"],
-    },
-  });
-  useEffect(() => {
-    if (acceptedFiles.length) {
-      dispatch(setPdfInstructions(acceptedFiles[0]));
-    }
-  }, [acceptedFiles]);
-  const mode = useAppSelector(selectMode);
-  const pdfInstructions = useAppSelector(selectPdfInstructions);
-  const pdfData = useMemo(
-    () => (pdfInstructions ? URL.createObjectURL(pdfInstructions) : null),
-    [pdfInstructions],
-  );
-  return (
-    <>
-      {pdfData && (
-        <div
-          style={{
-            width: "100%",
-            height: "100%",
-            position: "relative",
-            overflow: "hidden",
-          }}
-        >
-          <object
-            data={pdfData + "#?navpanes=0"}
-            type="application/pdf"
-            width="100%"
-            height="100%"
-          >
-            <p>
-              Votre navigateur ne supporte pas les PDFs, vous pouvez{" "}
-              <a href={pdfData}>télécharger le fichier</a> à la place.
-            </p>
-          </object>
-          <div className="meta-player-content-cover"></div>
-          {mode === "create" && (
-            <Button
-              label="Supprimer le PDF"
-              severity="danger"
-              icon="pi pi-trash"
-              className={styles.deleteButton}
-              onClick={() => dispatch(setPdfInstructions(null))}
-              style={{ position: "absolute", bottom: "20px", right: "20px" }}
-            />
-          )}
-        </div>
-      )}
-      {!pdfData && (
-        <div className={styles.dropzone} {...getRootProps()}>
-          <div
-            className={styles.dropzoneRectangle}
-            data-is-focused={isFocused}
-            data-is-drag-accept={isDragAccept}
-            data-is-drag-reject={isDragReject}
-          >
-            <input {...getInputProps()} />
-            <p>Déposez un PDF ici ou cliquez pour sélectionner un fichier...</p>
-            <i
-              className="pi pi-file-arrow-up"
-              style={{ fontSize: "2.5rem" }}
-            ></i>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
+import { FC, useEffect, useMemo } from "react";
+import { useDropzone } from "react-dropzone";
+import styles from "./style.module.scss";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectMode,
+  selectPdfInstructions,
+  setPdfInstructions,
+} from "../activityData/activityDataSlice";
+import { Button } from "primereact/button";
+
+export const PdfEditor: FC = () => {
+  const dispatch = useAppDispatch();
+  const {
+    getRootProps,
+    getInputProps,
+    isFocused,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles,
+  } = useDropzone({
+    accept: {
+      "application/pdf": [".pdf"],
+    },
+  });
+  useEffect(() => {
+    if (acceptedFiles.length) {
+      dispatch(setPdfInstructions(acceptedFiles[0]));
+    }
+  }, [acceptedFiles]);
+  const mode = useAppSelector(selectMode);
+  const pdfInstructions = useAppSelector(selectPdfInstructions);
+  const pdfData = useMemo(
+    () => (pdfInstructions ? URL.createObjectURL(pdfInstructions) : null),
+    [pdfInstructions],
+  );
+  return (
+    <>
+      {pdfData && (
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            position: "relative",
+            overflow: "hidden",
+          }}
+        >
+          <object
+            data={pdfData + "#?navpanes=0"}
+            type="application/pdf"
+            width="100%"
+            height="100%"
+          >
+            <p>
+              Votre navigateur ne supporte pas les PDFs, vous pouvez{" "}
+              <a href={pdfData}>télécharger le fichier</a> à la place.
+            </p>
+          </object>
+          <div className="meta-player-content-cover"></div>
+          {mode === "create" && (
+            <Button
+              label="Supprimer le PDF"
+              severity="danger"
+              icon="pi pi-trash"
+              className={styles.deleteButton}
+              onClick={() => dispatch(setPdfInstructions(null))}
+              style={{ position: "absolute", bottom: "20px", right: "20px" }}
+            />
+          )}
+        </div>
+      )}
+      {!pdfData && (
+        <div className={styles.dropzone} {...getRootProps()}>
+          <div
+            className={styles.dropzoneRectangle}
+            data-is-focused={isFocused}
+            data-is-drag-accept={isDragAccept}
+            data-is-drag-reject={isDragReject}
+          >
+            <input {...getInputProps()} />
+            <p>Déposez un PDF ici ou cliquez pour sélectionner un fichier...</p>
+            <i
+              className="pi pi-file-arrow-up"
+              style={{ fontSize: "2.5rem" }}
+            ></i>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};