Multiple functions chart and specific editor

src/frontend/apps/impress/src/features/docs/doc-editor/components/FunctionEditor/config/editorConfig.ts

@@ -0,0 +1,90 @@
+import { loader } from '@monaco-editor/react';
+import type { editor } from 'monaco-editor';
+
+export const initializeMonaco = async () => {
+  const monaco = await loader.init();
+
+  // Register LaTeX language
+  monaco.languages.register({ id: 'latex' });
+  monaco.languages.setMonarchTokensProvider('latex', {
+    tokenizer: {
+      root: [
+        // Commands
+        [/\\[a-zA-Z]+/, 'keyword'],
+        // Math delimiters
+        [/\$.*?\$/, 'string'],
+        [/\\\(.*?\\\)/, 'string'],
+        [/\\\[.*?\\\]/, 'string'],
+        // Comments
+        [/%.*$/, 'comment'],
+        // Brackets
+        [/[{}[\]]/, 'delimiter.bracket'],
+        // Numbers
+        [/\d+/, 'number'],
+      ],
+    },
+  });
+
+  // Register Mermaid language
+  monaco.languages.register({ id: 'mermaid' });
+  monaco.languages.setMonarchTokensProvider('mermaid', {
+    tokenizer: {
+      root: [
+        // Graph types
+        [
+          /^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|gantt|pie|erDiagram|journey)\s/,
+          'keyword',
+        ],
+        // Direction
+        [/^(TD|BT|RL|LR)\s/, 'keyword'],
+        // Node definitions
+        [/[A-Za-z0-9_]+\[.*?\]/, 'string'],
+        [/[A-Za-z0-9_]+\(.*?\)/, 'string'],
+        [/[A-Za-z0-9_]+{.*?}/, 'string'],
+        [/[A-Za-z0-9_]+>.*?</, 'string'],
+        [/[A-Za-z0-9_]+\[.*?\]>.*?</, 'string'],
+        // Arrows
+        [/-->|==>|-.->|==>|--o|--x|--|==|===|----|====/, 'operator'],
+        // Comments
+        [/%%/, 'comment'],
+        [/%%[^%]*/, 'comment'],
+        // Numbers
+        [/\d+/, 'number'],
+        // Brackets
+        [/[{}[\]]/, 'delimiter.bracket'],
+        // Strings
+        [/"[^"]*"/, 'string'],
+        // Keywords
+        [
+          /^(subgraph|end|class|state|note|participant|actor|as|title|dateFormat|axisFormat|section|task|milestone|entity|relationship|journey|section|task|milestone)\b/,
+          'keyword',
+        ],
+      ],
+    },
+  });
+};
+
+export const getEditorOptions = (
+  language: string = 'latex',
+): editor.IStandaloneEditorConstructionOptions => ({
+  minimap: { enabled: false },
+  scrollBeyondLastLine: false,
+  lineNumbers: 'off' as const,
+  folding: false,
+  lineDecorationsWidth: 0,
+  lineNumbersMinChars: 0,
+  glyphMargin: false,
+  contextmenu: false,
+  scrollbar: {
+    vertical: 'hidden',
+    horizontal: 'hidden'
+  },
+  fontSize: 14,
+  fontFamily: 'monospace',
+  wordWrap: 'on',
+  wrappingStrategy: 'advanced',
+  wrappingIndent: 'same',
+  language,
+  renderLineHighlight: "none",
+  overviewRulerLanes: 0,
+});

src/frontend/apps/impress/src/features/docs/doc-editor/components/FunctionEditor/hooks/useClickOutside.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+export const useClickOutside = (onClickOutside: () => void) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        onClickOutside();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClickOutside]);
+
+  return ref;
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/FunctionEditor/hooks/useEditorDimensions.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+import type { EditorDimensions } from '../types';
+
+export const useEditorDimensions = (
+  parentRef?: React.RefObject<HTMLDivElement | null>,
+) => {
+  const [dimensions, setDimensions] = useState<EditorDimensions>({
+    height: 0,
+    width: 0,
+  });
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (parentRef?.current) {
+        const rect = parentRef.current.getBoundingClientRect();
+        setDimensions({
+          height: rect.height,
+          width: rect.width,
+        });
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener('resize', updateDimensions);
+    return () => {
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, [parentRef]);
+
+  return dimensions;
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/FunctionEditor/index.tsx

@@ -0,0 +1,113 @@
+import Editor from '@monaco-editor/react';
+import { Button } from '@openfun/cunningham-react';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from '@/components';
+
+import { getEditorOptions, initializeMonaco } from './config/editorConfig';
+import { useClickOutside } from './hooks/useClickOutside';
+import { useEditorDimensions } from './hooks/useEditorDimensions';
+import { containerStyles, editorContainerStyles, functionEditorsStyle, inputStyle, rightButtonsContainer, leftButtonsContainer, functionEditorsContainer, divContainer } from './styles/editorStyles';
+import type { FunctionEditorProps } from './types';
+import { winterCGFetchIntegration } from '@sentry/nextjs';
+import { Icon } from '@/components';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+const defaultNewFunction = '\\cos(3*x)';
+
+const formatNum = (nV : number) => {
+  let res = Math.round(nV);
+  return res < 2 ? 2 : res;
+}
+
+export const FunctionEditor = ({
+  functions,
+  min,
+  max,
+  num,
+  onChange,
+  onClickOutside,
+  parentRef
+}: FunctionEditorProps) => {
+  const { t } = useTranslation();
+  const { height: parentHeight, width: parentWidth } = useEditorDimensions(parentRef);
+  const editorRef = useClickOutside(onClickOutside);
+  const [localFunctions, setLocalFunctions] = useState(functions);
+  const [localMin, setLocalMin] = useState(min);
+  const [localMax, setLocalMax] = useState(max);
+  const [localNum, setLocalNum] = useState(num);
+
+  useEffect(() => {
+    setLocalFunctions(functions);
+    setLocalMin(min);
+    setLocalMax(max);
+    setLocalNum(num);
+  }, [min, max, num, functions]);
+
+  useEffect(() => {
+    void initializeMonaco();
+  }, []);
+
+  const containerWidth = `${parentWidth}px`;
+  const containerMargin = `${parentHeight}px 0 0 -16px`;
+
+  let functionEditors = localFunctions.map((fun,i) =>
+    <Box style={editorContainerStyles}>
+      <div style={functionEditorsStyle}>
+        <p style={{display : 'inline-block', width : '15%', verticalAlign : 'top', textAlign : 'center'}}><div dangerouslySetInnerHTML={{__html: katex.renderToString(`f_{${i+1}}(x)=`)}}></div></p>
+        <div style={{width : '85%', display : 'inline-block', verticalAlign : 'top', marginBottom : '5px'}}>
+        <Editor
+          language={'latex'}
+          height="1.5em"
+          value={fun}
+          onChange={(val) => setLocalFunctions(localFunctions.map((x,j)=>i==j ? (val || '') : x))}
+          options={getEditorOptions()}
+          theme="vs-light"
+
+        />
+        </div>
+      </div>
+    </Box>
+  )
+
+  return (
+    <Box
+      ref={editorRef}
+      $position="absolute"
+      $zIndex={1000}
+      $margin={containerMargin}
+      $padding="1rem"
+      $background="white"
+      style={{
+        ...containerStyles,
+        width: containerWidth,
+      }}
+    >
+      <div style={divContainer}>
+        <div style={leftButtonsContainer}>
+
+          <Button style={{background : 'none'}} onClick={() => { setLocalFunctions(prev => [...prev, defaultNewFunction]); }}><Icon iconName="add" $size="30px" $color="black" /></Button>
+          <br></br>
+          <Button style={{background : 'none'}} onClick={() => { setLocalFunctions(prev => (prev.length > 1) ? prev.slice(0, -1) : prev); }}><Icon iconName="remove" $size="30px" $color="black" /></Button>
+        </div>
+        <div style={functionEditorsContainer}>
+          {functionEditors}
+          <br />
+          <p style={{width : '32%', display : 'inline-block', marginLeft : '0%'}}><div dangerouslySetInnerHTML={{__html: katex.renderToString(`x_{\\text{min}}`)}}></div></p>
+          <p style={{width : '32%', display : 'inline-block', marginLeft : '2%'}}><div dangerouslySetInnerHTML={{__html: katex.renderToString(`x_{\\text{max}}`)}}></div></p>
+          <p style={{width : '32%', display : 'inline-block', marginLeft : '2%'}}><div dangerouslySetInnerHTML={{__html: katex.renderToString(`n_{\\text{points}}`)}}></div></p>
+          <input type='number' style={{padding : '5px', width : '32%', borderRadius: '5px', border : "1px solid grey"}} value={localMin} onChange={(e) => setLocalMin(Number(e.target.value)) }/>
+          <input type='number' style={{width : '32%', marginLeft : '2%', padding : '5px', borderRadius: '5px', border : "1px solid grey"}} value={localMax} onChange={(e) => setLocalMax(Number(e.target.value)) }/>
+          <input type='number' style={{width : '32%', marginLeft : '2%', padding : '5px', borderRadius: '5px', border : "1px solid grey"}} value={localNum} onChange={(e) => setLocalNum(formatNum(Number(e.target.value))) }/>
+        </div>
+
+        <div style={rightButtonsContainer}>
+          <Button style={{display : 'inline-block', verticalAlign : 'top'}} onClick={() => onChange(localFunctions, localMin, localMax, localNum)}>{t('Validate')}</Button>
+        </div>
+      </div>
+
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/FunctionEditor/styles/editorStyles.ts

@@ -0,0 +1,56 @@
+import { VerticalAlign } from "docx";
+
+export const containerStyles = {
+  position: 'absolute',
+  zIndex: 1000,
+  padding: '1rem',
+  background: 'white',
+  border: '1px solid #e0e0e0',
+  borderRadius: '4px',
+  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  boxSizing: 'border-box',
+} as const;
+
+export const editorContainerStyles = {
+  width: '100%',
+  marginRight: '1rem',
+  position : 'relative',
+} as const;
+
+export const functionEditorsStyle = {
+  position : 'relative',
+  width : '100%',
+  display : 'block',
+  VerticalAlign : 'center',
+} as const;
+
+export const divContainer = {
+  width : '100%',
+  alignItems : 'top',
+} as const;
+
+export const functionEditorsContainer = {
+  width : '70%',
+  display : 'inline-block',
+} as const;
+
+export const leftButtonsContainer = {
+  width : '10%',
+  display : 'inline-block',
+  verticalAlign : 'top',
+  textAlign : 'center',
+} as const;
+
+export const rightButtonsContainer = {
+  width : '20%',
+  display : 'inline-block',
+  verticalAlign : 'top',
+  textAlign : 'center',
+} as const;
+
+export const inputStyle = {
+  borderRadius : '5px',
+} as const

src/frontend/apps/impress/src/features/docs/doc-editor/components/FunctionEditor/types/index.ts

@@ -0,0 +1,14 @@
+export interface FunctionEditorProps {
+  functions: string[];
+  min: number;
+  max: number;
+  num: number;
+  onChange: (fun: string[], min : number, max : number, num : number) => void;
+  onClickOutside: () => void;
+  parentRef?: React.RefObject<HTMLDivElement | null>;
+}
+
+export interface EditorDimensions {
+  height: number;
+  width: number;
+}