[CODE] Upgrade react to v18.2

[Rllyyy]

No description provided.

[Rllyyy]

Issues:

• ReactDom.render is deprecated (GapText/GapTextDropdown)
• Module Progress animation is not triggering with StrictMode
  • Fix the issue by removing react-move
• MUI: Too many re-renders. The layout is unstable.TextareaAutosize limits the number of renders to prevent an infinite loop. (Question Editor)
• React-Modal: Cannot register modal instance that's already open (only in StrictMode) -> Remove conditionally rendered modal
• Upgrade framer-motion from 6.2.4 to latest version and fix @ts-ignore at for AnimatePresence in Modules

[Rllyyy]

At this point is sank hours/days into trying to get the gapText component to work without ReactDom.render but every solution just comes with a range of new problems (rerenders, unfocused, breaking dom elements).

GapText and GapTextDropdown both use ReactMarkdown to first create the html for the question and then insert inputs or dropdowns into the defined positions with ReactDom.render(). Unfortunately React 18 removes support for this. The previous option allowed to usage of markdown

Option 1:
React Markdown supports the components property. The problem is that on an input change the component rerenders and looses focus of the input. Another problem is the order of the values inside the state. The components prop also must include every possible html element (p, span, h1-h6, td, ...). One option to deal with rerenders is to use uncontrolled components. But in the future this could be a problem because i want to remove the forward ref and control all question type from the question component instead. If there a now controlled (Multiple Choice and Multiple Response) and uncontrolled (Gap Text and Gap Text Dropdown) elements this would be confusing and maybe problematic.

<ReactMarkdown
  {/*...*/}
  components={{
        p: ({ node, ...props }) => (
          <p>
            {/*Function to insert input element*/}
          </p>
        ),
    }}

Option 2:
Create remark or rehype plugIn that converts [] into . But then the value of this input must be saved to a ref.

Option 3:
Use a portal for each gap element. No idea how that would work :(

Option 4:
Attach the values/functions with useEffect or useLayoutEffect