[Fix] Whitespace fix for editing text (#26)

* remove clean whitespace from core atom, fix story * add changeset * prep for deploy * fix type error * fix type import
saasquatch · Nov 8, 2024 · ca29df3 · ca29df3
1 parent 15d7cad
commit ca29df3
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 222 deletions.
diff --git a/.changeset/twenty-walls-cough.md b/.changeset/twenty-walls-cough.md
@@ -0,0 +1,5 @@
+---
+"@raisins/react": patch
+---
+
+bump prosemirror package versions and remove global whitespace cleanup to prevent issues editing text nodes
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -67,11 +67,12 @@
     "jsonpointer": "^5.0.0",
     "optics-ts": "^2.2.0",
     "penpal": "^6.2.2",
-    "prosemirror-commands": "^1.1.11",
-    "prosemirror-keymap": "^1.1.4",
-    "prosemirror-schema-basic": "^1.1.2",
-    "prosemirror-state": "^1.3.4",
-    "prosemirror-view": "^1.20.2",
+    "prosemirror-commands": "^1.6.2",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.23.0",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.35.0",
     "snabbdom": "^3.6.2",
     "style-to-object": "^0.3.0",
     "throttle-debounce": "^5.0.0",
@@ -90,11 +91,11 @@
     "@testing-library/react": "^14.1.2",
     "@types/css-tree": "^1.0.6",
     "@types/jest": "^29.1.0",
-    "@types/prosemirror-commands": "^1.0.4",
-    "@types/prosemirror-keymap": "^1.0.4",
-    "@types/prosemirror-schema-basic": "^1.0.2",
-    "@types/prosemirror-state": "^1.2.7",
-    "@types/prosemirror-view": "^1.19.1",
+    "@types/prosemirror-commands": "^1.3.0",
+    "@types/prosemirror-keymap": "^1.2.0",
+    "@types/prosemirror-schema-basic": "^1.2.0",
+    "@types/prosemirror-state": "^1.4.0",
+    "@types/prosemirror-view": "^1.24.0",
     "@types/react": "18",
     "@types/react-dom": "^18.3.0",
     "@types/resize-observer-browser": "^0.1.7",

diff --git a/packages/react/src/core/CoreAtoms.tsx b/packages/react/src/core/CoreAtoms.tsx
@@ -61,7 +61,7 @@ export const CoreMolecule = molecule((getMol, getScope) => {
       if (ref.current?.html === html) {
         return ref.current.node;
       }
-      const parsedHtml = htmlParser(html, { cleanWhitespace: true });
+      const parsedHtml = htmlParser(html, { cleanWhitespace: false });
 
       return parsedHtml;
     },

diff --git a/packages/react/src/index.stories.tsx b/packages/react/src/index.stories.tsx
@@ -42,7 +42,6 @@ import { useHotkeys } from './hotkeys/useHotkeys';
 import { NodeMolecule } from './node';
 import { LayersController } from './node/slots/SlotChildrenController.stories';
 import { SelectedNodeRichTextEditor } from './rich-text/SelectedNodeRichTextEditor';
-import { StyleEditorController } from './stylesheets/StyleEditor';
 
 const meta: Meta = {
   title: 'Editor',
@@ -364,7 +363,6 @@ export function EditorView() {
 
         <div style={Edits}>
           <PackageEditor />
-          <StyleEditorController />
         </div>
       </div>
     </>

diff --git a/packages/react/src/rich-text/prosemirror/default-schema/DefaultProseSchema.ts b/packages/react/src/rich-text/prosemirror/default-schema/DefaultProseSchema.ts
@@ -41,7 +41,7 @@ const defaultMarkSpecs = DefaultTextMarks.filter((m) => m !== 'a').reduce(
               const link = dom as HTMLElement;
               const fromDom = component?.attributes?.reduce((attrs, attr) => {
                 return { ...attrs, [attr.name]: link.getAttribute(attr.name) };
-              }, {} as Record<string, string | null>);
+              }, {} as Record<string, string | null>) || {};
               return fromDom;
             },
           },

diff --git a/packages/react/src/rich-text/prosemirror/default-schema/DefaultProseSchemaHotkeysPlugin.ts b/packages/react/src/rich-text/prosemirror/default-schema/DefaultProseSchemaHotkeysPlugin.ts
@@ -1,6 +1,5 @@
 import {
   chainCommands,
-  Command,
   createParagraphNear,
   liftEmptyBlock,
   newlineInCode,
@@ -9,7 +8,7 @@ import {
 } from 'prosemirror-commands';
 import {} from 'prosemirror-transform';
 import { keymap } from 'prosemirror-keymap';
-import { EditorState, Plugin, Transaction } from 'prosemirror-state';
+import { Command, EditorState, Plugin, Transaction } from 'prosemirror-state';
 import { DefaultProseSchema } from './DefaultProseSchema';
 
 const cmd = (state: EditorState, dispatch?: (tr: Transaction) => void) => {