@capytale/meta-player 0.8.3 → 0.9.1

package/src/features/pedago/SharedNotesEditor.tsx

@@ -1,144 +1,144 @@
-import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import {
-  selectSharedNotesContent,
-  selectMode,
-  setCanSaveSharedNotes,
-  setIsMPDirty,
-  setLexicalSharedNotesState,
-  selectWorkflow,
-  selectSharedNotesType,
-  setSharedNotesType,
-} from "../activityData/activityDataSlice";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import settings from "../../settings";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { useToast } from "../toast";
-
-const SharedNotesEditor: React.FC = forwardRef((_props, ref) => {
-  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
-  const dispatch = useAppDispatch();
-  const toast = useToast();
-  const mode = useAppSelector(selectMode);
-  const workflow = useAppSelector(selectWorkflow);
-  const isEditable =
-    mode === "create" ||
-    (mode === "assignment" && workflow === "current") ||
-    mode === "review";
-  const initialEditorState = useAppSelector(selectSharedNotesContent);
-  const initialStateOnChangeDone = useRef<boolean>(false);
-  const sharedNotesType = useAppSelector(selectSharedNotesType);
-
-  const [helpDialogVisible, setHelpDialogVisible] = useState(false);
-
-  useImperativeHandle(ref, () => {
-    return {
-      save: async () => {
-        const state = await getState();
-        dispatch(setLexicalSharedNotesState(state.json));
-      },
-    };
-  });
-
-  return (
-    <>
-      {sharedNotesType === "none" && (
-        <>
-          <p>Pas de notes partagées.</p>
-          {mode === "create" && (
-            <Button
-              label="Créer des notes partagées"
-              onClick={() => dispatch(setSharedNotesType("rich"))}
-            />
-          )}
-          <div style={{ textAlign: "start", padding: "16px" }}>
-            <h3>Que sont les notes partagées ?</h3>
-            <p>
-              Les notes partagées permettent aux élèves de communiquer avec leur
-              enseignant. L'enseignant donne le contenu initial des notes
-              partagées, et les élèves peuvent le modifier, notamment pour
-              répondre à des questions, expliciter une démarche ou faire des
-              remarques sur leur travail. L'enseignant peut également modifier
-              les notes partagées pour répondre aux élèves.
-            </p>
-            <p>
-              Les notes partagées peuvent contenir du texte, des images, des
-              liens, etc., tout comme les consignes. La différence principale
-              avec les consignes est que les élèves peuvent modifier le contenu
-              des notes partagées. Elles sont un outil de communication
-              supplémentaire entre l'enseignant et les élèves.
-            </p>
-          </div>
-          <Button
-            severity="secondary"
-            size="small"
-            icon={"pi pi-question-circle"}
-            onClick={() => {
-              setHelpDialogVisible(true);
-            }}
-            outlined
-            label="En savoir plus"
-            style={{ marginBottom: "16px" }}
-          />
-          <Dialog
-            id="metaPlayerHelpDialog"
-            header="Documentation"
-            visible={helpDialogVisible}
-            onHide={() => setHelpDialogVisible(false)}
-            maximizable={true}
-          >
-            <iframe
-              src={
-                "https://capytale2.ac-paris.fr/wiki/doku.php?id=notes_partagees"
-              }
-              style={{ width: "100%", height: "100%" }}
-              title="Documentation"
-            />
-          </Dialog>
-        </>
-      )}
-      {sharedNotesType === "rich" && (
-        <Editor
-          placeholderText={
-            mode === "create"
-              ? "Écrivez le contenu initial des notes partagées ici..."
-              : "Les notes partagées sont vides, vous pouvez les remplir ici..."
-          }
-          htmlInitialContent={initialEditorState ? undefined : ""}
-          initialEditorState={initialEditorState || undefined}
-          jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
-          onChange={(editorState) => {
-            dispatch(setLexicalSharedNotesState(editorState));
-            if (initialStateOnChangeDone.current) {
-              dispatch(setIsMPDirty(true));
-            } else {
-              initialStateOnChangeDone.current = true;
-            }
-          }}
-          onJsonSizeLimitExceeded={() => {
-            dispatch(setCanSaveSharedNotes(false));
-            toast.show({
-              summary: "Erreur",
-              detail: `Le contenu des notes partagées 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(setCanSaveSharedNotes(true));
-            toast.show({
-              summary: "Succès",
-              detail: `Le contenu des notes partagées ne dépasse plus la taille limite.`,
-              severity: "success",
-              life: 4000,
-            });
-          }}
-          isEditable={isEditable}
-        />
-      )}
-    </>
-  );
-});
-
-export default SharedNotesEditor;
+import { useCapytaleRichTextEditor } from "@capytale/capytale-rich-text-editor";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  selectSharedNotesContent,
+  selectMode,
+  setCanSaveSharedNotes,
+  setIsMPDirty,
+  setLexicalSharedNotesState,
+  selectWorkflow,
+  selectSharedNotesType,
+  setSharedNotesType,
+} from "../activityData/activityDataSlice";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import settings from "../../settings";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useToast } from "../toast";
+
+const SharedNotesEditor: React.FC = forwardRef((_props, ref) => {
+  const [Editor, getState, _canSave] = useCapytaleRichTextEditor();
+  const dispatch = useAppDispatch();
+  const toast = useToast();
+  const mode = useAppSelector(selectMode);
+  const workflow = useAppSelector(selectWorkflow);
+  const isEditable =
+    mode === "create" ||
+    (mode === "assignment" && workflow === "current") ||
+    mode === "review";
+  const initialEditorState = useAppSelector(selectSharedNotesContent);
+  const initialStateOnChangeDone = useRef<boolean>(false);
+  const sharedNotesType = useAppSelector(selectSharedNotesType);
+
+  const [helpDialogVisible, setHelpDialogVisible] = useState(false);
+
+  useImperativeHandle(ref, () => {
+    return {
+      save: async () => {
+        const state = await getState();
+        dispatch(setLexicalSharedNotesState(state.json));
+      },
+    };
+  });
+
+  return (
+    <>
+      {sharedNotesType === "none" && (
+        <>
+          <p>Pas de notes partagées.</p>
+          {mode === "create" && (
+            <Button
+              label="Créer des notes partagées"
+              onClick={() => dispatch(setSharedNotesType("rich"))}
+            />
+          )}
+          <div style={{ textAlign: "start", padding: "16px" }}>
+            <h3>Que sont les notes partagées ?</h3>
+            <p>
+              Les notes partagées permettent aux élèves de communiquer avec leur
+              enseignant. L'enseignant donne le contenu initial des notes
+              partagées, et les élèves peuvent le modifier, notamment pour
+              répondre à des questions, expliciter une démarche ou faire des
+              remarques sur leur travail. L'enseignant peut également modifier
+              les notes partagées pour répondre aux élèves.
+            </p>
+            <p>
+              Les notes partagées peuvent contenir du texte, des images, des
+              liens, etc., tout comme les consignes. La différence principale
+              avec les consignes est que les élèves peuvent modifier le contenu
+              des notes partagées. Elles sont un outil de communication
+              supplémentaire entre l'enseignant et les élèves.
+            </p>
+          </div>
+          <Button
+            severity="secondary"
+            size="small"
+            icon={"pi pi-question-circle"}
+            onClick={() => {
+              setHelpDialogVisible(true);
+            }}
+            outlined
+            label="En savoir plus"
+            style={{ marginBottom: "16px" }}
+          />
+          <Dialog
+            id="metaPlayerHelpDialog"
+            header="Documentation"
+            visible={helpDialogVisible}
+            onHide={() => setHelpDialogVisible(false)}
+            maximizable={true}
+          >
+            <iframe
+              src={
+                "https://capytale2.ac-paris.fr/wiki/doku.php?id=notes_partagees"
+              }
+              style={{ width: "100%", height: "100%" }}
+              title="Documentation"
+            />
+          </Dialog>
+        </>
+      )}
+      {sharedNotesType === "rich" && (
+        <Editor
+          placeholderText={
+            mode === "create"
+              ? "Écrivez le contenu initial des notes partagées ici..."
+              : "Les notes partagées sont vides, vous pouvez les remplir ici..."
+          }
+          htmlInitialContent={initialEditorState ? undefined : ""}
+          initialEditorState={initialEditorState || undefined}
+          jsonSizeLimit={settings.STATEMENT_MAX_SIZE}
+          onChange={(editorState) => {
+            dispatch(setLexicalSharedNotesState(editorState));
+            if (initialStateOnChangeDone.current) {
+              dispatch(setIsMPDirty(true));
+            } else {
+              initialStateOnChangeDone.current = true;
+            }
+          }}
+          onJsonSizeLimitExceeded={() => {
+            dispatch(setCanSaveSharedNotes(false));
+            toast.show({
+              summary: "Erreur",
+              detail: `Le contenu des notes partagées 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(setCanSaveSharedNotes(true));
+            toast.show({
+              summary: "Succès",
+              detail: `Le contenu des notes partagées ne dépasse plus la taille limite.`,
+              severity: "success",
+              life: 4000,
+            });
+          }}
+          isEditable={isEditable}
+        />
+      )}
+    </>
+  );
+});
+
+export default SharedNotesEditor;

package/src/features/pedago/hooks.ts

@@ -0,0 +1,99 @@
+import { useMemo } from "react";
+import { useAppSelector } from "../../app/hooks";
+import {
+  selectHasGradingOrComments,
+  selectShowPedagoByDefault,
+  selectInstructions,
+  selectInstructionsType,
+  selectMode,
+} from "../activityData/activityDataSlice";
+import {
+  selectIsGradingVisible,
+  selectIsPedagoVisible,
+  selectOrientation,
+} from "../layout/layoutSlice";
+
+export const usePedagoOptions = () => {
+  const mode = useAppSelector(selectMode);
+  const isHorizontal = useAppSelector(selectOrientation) === "horizontal";
+  const isPedagoVisible = useAppSelector(selectIsPedagoVisible);
+  const isGradingVisible = useAppSelector(selectIsGradingVisible);
+  const showPedagoByDefault = useAppSelector(selectShowPedagoByDefault);
+  const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
+  const instructionsType = useAppSelector(selectInstructionsType);
+  const instructions = useAppSelector(selectInstructions);
+  const hasNonEmptyInstructions = useMemo(() => {
+    if (instructionsType === "none" || !instructions) {
+      return false;
+    }
+    if (instructions.format === "html") {
+      if (typeof instructions.value !== "string") {
+        console.warn("HTML instructions value is not a string");
+        return true;
+      }
+      return (
+        instructions.value.trim() !== "" &&
+        instructions.value.trim() !== "<p></p>"
+      );
+    } else if (instructions.format === "markdown") {
+      if (typeof instructions.value !== "string") {
+        console.warn("Markdown instructions value is not a string");
+        return true;
+      }
+      return instructions.value.trim() !== "";
+    } else if (instructions.format === "lexical") {
+      if (typeof instructions.value !== "string") {
+        console.warn("Lexical instructions value is not a string");
+        return true;
+      }
+      try {
+        const parsedInstructions = JSON.parse(instructions.value);
+        if (
+          !parsedInstructions.root ||
+          !parsedInstructions.root.children ||
+          parsedInstructions.root.children.length === 0
+        ) {
+          return false;
+        }
+        if (parsedInstructions.root.children.length > 1) {
+          return true;
+        }
+        const singleNode = parsedInstructions.root.children[0];
+        if (singleNode.type !== "paragraph") {
+          return true;
+        }
+        return singleNode.children && singleNode.children.length > 0;
+      } catch (error) {
+        console.warn("Lexical instructions value is not valid JSON");
+        return true;
+      }
+    }
+    return false;
+  }, [instructionsType, instructions]);
+
+  const hasPedago =
+    mode === "review"
+      ? true
+      : mode === "detached"
+        ? false
+        : mode === "create"
+          ? true
+          : hasNonEmptyInstructions || hasGradingOrComments;
+
+  const showPedago =
+    isPedagoVisible ?? (mode === "create" ? showPedagoByDefault : hasPedago);
+
+  const showInstructions = mode === "create" ? true : hasNonEmptyInstructions;
+  const hasGrading = mode === "review" || hasGradingOrComments;
+  const showGrading = hasGrading && isGradingVisible;
+
+  return {
+    hasPedago,
+    showPedago,
+    isHorizontal,
+    hasNonEmptyInstructions,
+    showInstructions,
+    hasGrading,
+    showGrading,
+  };
+};