fix: Preserve whitespace in rich text nodes on parse (#455)

* Preserve whitespace in rich text nodes on parse

* Preserve whitespace when parsing plain text from DOM

* Amend existing test

* preserveWhitespace: "full", because we do not want to misrepresent newlines

* Move page doc helpers out of library code, and revert preserveWhitespace

We do not use 'preserveWhitespace: full' here to allow us to format HTML in fixtures without breaking tests - see  in ./cypress/helpers/editor.ts

Author: jonathonherbert

demo/helpers.ts

@@ -1,3 +1,4 @@
+import type { DOMParser, DOMSerializer, Node } from "prosemirror-model";
 import type { EditorState, Transaction } from "prosemirror-state";
 import { Plugin } from "prosemirror-state";
 import type { DemoSetMedia } from "../src/elements/demo-image/DemoImageElement";
@@ -218,3 +219,16 @@ export const getImageFromMediaPayload = (
     mediaId: mediaPayload.mediaId,
   };
 };
+
+export const docToHtml = (serializer: DOMSerializer, doc: Node) => {
+  const dom = serializer.serializeFragment(doc.content);
+  const e = document.createElement("div");
+  e.appendChild(dom);
+  return e.innerHTML;
+};
+
+export const htmlToDoc = (parser: DOMParser, html: string) => {
+  const dom = document.createElement("div");
+  dom.innerHTML = html;
+  return parser.parse(dom, { preserveWhitespace: true });
+};

demo/index.ts

@@ -32,11 +32,7 @@ import { richlinkElement } from "../src/elements/rich-link/RichlinkForm";
 import { createStandardElement } from "../src/elements/standard/StandardForm";
 import { tableElement } from "../src/elements/table/TableForm";
 import { createTweetElement } from "../src/elements/tweet/TweetForm";
-import {
-  createParsers,
-  docToHtml,
-  htmlToDoc,
-} from "../src/plugin/helpers/prosemirror";
+import { createParsers } from "../src/plugin/helpers/prosemirror";
 import {
   testDecorationPlugin,
   testInnerEditorEventPropagationPlugin,
@@ -45,7 +41,9 @@ import {
 import { CollabServer, EditorConnection } from "./collab/CollabServer";
 import { createSelectionCollabPlugin } from "./collab/SelectionPlugin";
 import {
+  docToHtml,
   getImageFromMediaPayload,
+  htmlToDoc,
   onCropCartoon,
   onCropImage,
   onDemoCropImage,

src/plugin/__tests__/element.spec.ts

@@ -949,6 +949,21 @@ describe("buildElementPlugin", () => {
           expect(node?.textContent).toBe("");
         });
 
+        it("should retain whitespace in rich text", () => {
+          const { getNodeFromElementData, view } = createEditorWithElements({
+            testElement,
+          });
+
+          const fieldText = "<p>   </p>";
+
+          const node = getNodeFromElementData(
+            { elementName: "testElement", values: { field1: fieldText } },
+            view.state.schema
+          );
+
+          expect(node?.textContent).toBe("   ");
+        });
+
         it("should retain HTML chars in plain text", () => {
           const { getNodeFromElementData, view } = createEditorWithElements({
             testElement,

src/plugin/__tests__/nodeSpec.spec.ts

@@ -147,7 +147,7 @@ describe("nodeSpec generation", () => {
         expect(field1NodeSpec).toHaveProperty("content", "text*");
         expect(field1NodeSpec?.parseDOM?.[0]).toMatchObject({
           tag: "div",
-          preserveWhitespace: false,
+          preserveWhitespace: "full",
         });
       });
     });

src/plugin/helpers/prosemirror.ts

@@ -324,19 +324,6 @@ const createParsers = <S extends Schema>(schema: S) => {
   return { parser, serializer };
 };
 
-const docToHtml = (serializer: DOMSerializer, doc: Node) => {
-  const dom = serializer.serializeFragment(doc.content);
-  const e = document.createElement("div");
-  e.appendChild(dom);
-  return e.innerHTML;
-};
-
-const htmlToDoc = (parser: DOMParser, html: string) => {
-  const dom = document.createElement("div");
-  dom.innerHTML = html;
-  return parser.parse(dom);
-};
-
 // Select all text within a node, as opposed to AllSelection
 const selectAllText = (
   state: EditorState,
@@ -386,7 +373,5 @@ export {
   defaultPredicate,
   createUpdateDecorations,
   createParsers,
-  docToHtml,
-  htmlToDoc,
   selectAllText,
 };

src/plugin/nodeSpec.ts

@@ -112,7 +112,7 @@ export const getNodeSpecForField = (
             {
               tag: "div",
               getAttrs: createGetAttrsForTextNode(nodeName),
-              preserveWhitespace: field.isCode ? "full" : false,
+              preserveWhitespace: "full",
             },
           ],
           code: field.isCode,
@@ -518,9 +518,10 @@ const createContentNodeFromRichText = <S extends Schema>(
   const parser = DOMParser.fromSchema(schema);
   const element = document.createElement("div");
   element.innerHTML = fieldValue;
+
   return parser.parse(element, {
     topNode,
-    preserveWhitespace: false,
+    preserveWhitespace: "full",
   });
 };