[BUG] Gap-text and gap-text-dropdown ignore markdown line breaks

[Rllyyy]

GapText.css and GapTextDropdown.css

.question-gap-text p,
.correction-gap-text p,
.question-gap-text div,
.correction-gap-text div,
.question-gap-text input,
.correction-gap-text input {
  white-space: pre-wrap;
- display: inline;
}

The next part somewhat relates to #201

function textWithBlanks(text: string): string {
  //rehype-raw allows the passing of html elements from the json file (when the users set a <p> text for example)
  //remarkGfm draws markdown tables
  const htmlString = ReactDOMServer.renderToString(
    <ReactMarkdown
      children={text}
      linkTarget='_blank'
      transformLinkUri={normalizeLinkUri}
      rehypePlugins={[rehypeRaw, rehypeKatex]}
      remarkPlugins={[remarkGfm, remarkMath]}
    />
  );

  //Split the html notes where the input should be inserted
  const htmlStringSplit = htmlString.split("[]");

  //Insert the input marker between the array elements but not at the end
  const res = htmlStringSplit.map((line, index) => {
    if (index < htmlStringSplit.length - 1) {
      return line.concat(
        ReactDOMServer.renderToString(<input className={"input-wrapper"} id={`input-wrapper-${index}`} />)
      );
    } else {
      return line;
    }
  });

  //Combine the array to one string again
  const joinedElements = res.join("");

  //Remove jsx specific html syntax
  const exportHTML = joinedElements
    .replaceAll("&lt;", "<")
    .replaceAll("&gt;", ">")
    .replaceAll("&quot;", '"')
    .replaceAll('data-reactroot=""', "");

  // Sanitize the result
  return DOMPurify.sanitize(exportHTML, {
    FORBID_TAGS: forbiddenTags,
    FORBID_ATTR: forbiddenAttributes,
  });
}

Todo:

• replace the render in the useLayoutEffect of gap-text and gap-text-dropdown with just attaching events
• replace the replaceAll with regex