fix: mixed alignment across paragraphs

Author: harbournick

packages/super-editor/src/editors/v1/extensions/text-align/text-align.js

@@ -41,34 +41,61 @@ export const TextAlign = Extension.create({
        */
       setTextAlign:
         (alignment) =>
-        ({ commands, state }) => {
+        ({ commands, state, tr, dispatch }) => {
           const containsAlignment = this.options.alignments.includes(alignment);
           if (!containsAlignment) return false;
-          const $from = state?.selection?.$from;
-          let paragraphNode = null;
-          let paragraphDepth = -1;
-
-          if ($from) {
-            for (let depth = $from.depth; depth >= 0; depth--) {
-              const nodeAtDepth = $from.node(depth);
-              if (nodeAtDepth?.type?.name === 'paragraph') {
-                paragraphNode = nodeAtDepth;
-                paragraphDepth = depth;
-                break;
-              }
-            }
+
+          if (!state?.doc || !state?.selection || !tr) {
+            const paragraphProperties = getSelectionParagraphProperties(this.editor, state);
+            const storedAlignment = mapDisplayAlignmentToStoredJustification(
+              alignment,
+              paragraphProperties?.rightToLeft,
+            );
+            return commands.updateAttributes('paragraph', { 'paragraphProperties.justification': storedAlignment });
           }
 
-          let paragraphProperties = paragraphNode?.attrs?.paragraphProperties ?? {};
+          const visitedPositions = new Set();
+          let touched = false;
 
-          if (this.editor && $from && paragraphNode && paragraphDepth > 0) {
-            const paragraphStartPos = $from.before(paragraphDepth);
-            const paragraphPos = state.doc.resolve(paragraphStartPos);
-            paragraphProperties = calculateResolvedParagraphProperties(this.editor, paragraphNode, paragraphPos);
-          }
+          const updateParagraph = (node, pos) => {
+            if (node.type.name !== 'paragraph') return true;
+            if (visitedPositions.has(pos)) return false;
+            visitedPositions.add(pos);
+
+            const paragraphProperties = this.editor
+              ? calculateResolvedParagraphProperties(this.editor, node, state.doc.resolve(pos))
+              : (node.attrs?.paragraphProperties ?? {});
+            const storedAlignment = mapDisplayAlignmentToStoredJustification(
+              alignment,
+              paragraphProperties?.rightToLeft,
+            );
+            const existingParagraphProperties = node.attrs?.paragraphProperties ?? {};
+
+            if (existingParagraphProperties.justification === storedAlignment) return false;
+
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              paragraphProperties: {
+                ...existingParagraphProperties,
+                justification: storedAlignment,
+              },
+            });
+            touched = true;
+            return false;
+          };
 
-          const storedAlignment = mapDisplayAlignmentToStoredJustification(alignment, paragraphProperties?.rightToLeft);
-          return commands.updateAttributes('paragraph', { 'paragraphProperties.justification': storedAlignment });
+          state.selection.ranges.forEach((range) => {
+            if (range.$from.pos === range.$to.pos) {
+              const paragraph = getParagraphAtSelection(range.$from);
+              if (paragraph) updateParagraph(paragraph.node, paragraph.pos);
+              return;
+            }
+
+            state.doc.nodesBetween(range.$from.pos, range.$to.pos, updateParagraph);
+          });
+
+          if (touched && dispatch) dispatch(tr);
+          return true;
         },
 
       /**
@@ -94,3 +121,21 @@ export const TextAlign = Extension.create({
     };
   },
 });
+
+function getSelectionParagraphProperties(editor, state) {
+  const paragraph = getParagraphAtSelection(state?.selection?.$from);
+  if (!paragraph) return {};
+  if (!editor || !state?.doc) return paragraph.node?.attrs?.paragraphProperties ?? {};
+  return calculateResolvedParagraphProperties(editor, paragraph.node, state.doc.resolve(paragraph.pos));
+}
+
+function getParagraphAtSelection($pos) {
+  if (!$pos) return null;
+  for (let depth = $pos.depth; depth >= 0; depth--) {
+    const node = $pos.node(depth);
+    if (node?.type?.name === 'paragraph') {
+      return { node, pos: depth > 0 ? $pos.before(depth) : 0 };
+    }
+  }
+  return null;
+}

packages/super-editor/src/editors/v1/extensions/text-align/text-align.test.js

@@ -144,6 +144,52 @@ describe('TextAlign extension', () => {
     });
   });
 
+  it('maps alignment per paragraph for mixed LTR/RTL selections', () => {
+    const ltrParagraph = {
+      type: { name: 'paragraph' },
+      attrs: { paragraphProperties: { rightToLeft: false, justification: 'center' } },
+    };
+    const rtlParagraph = {
+      type: { name: 'paragraph' },
+      attrs: { paragraphProperties: { rightToLeft: true, justification: 'center' } },
+    };
+    const state = {
+      doc: {
+        resolve: vi.fn((pos) => ({ pos })),
+        nodesBetween: vi.fn((_from, _to, callback) => {
+          callback(ltrParagraph, 1);
+          callback(rtlParagraph, 10);
+        }),
+      },
+      selection: {
+        ranges: [
+          {
+            $from: { pos: 1 },
+            $to: { pos: 20 },
+          },
+        ],
+      },
+    };
+    const tr = { setNodeMarkup: vi.fn() };
+    const dispatch = vi.fn();
+
+    const result = commands.setTextAlign('left')({
+      commands: { updateAttributes: vi.fn(() => true) },
+      state,
+      tr,
+      dispatch,
+    });
+
+    expect(result).toBe(true);
+    expect(tr.setNodeMarkup).toHaveBeenNthCalledWith(1, 1, undefined, {
+      paragraphProperties: { rightToLeft: false, justification: 'left' },
+    });
+    expect(tr.setNodeMarkup).toHaveBeenNthCalledWith(2, 10, undefined, {
+      paragraphProperties: { rightToLeft: true, justification: 'right' },
+    });
+    expect(dispatch).toHaveBeenCalledWith(tr);
+  });
+
   it('returns false for unsupported alignment values', () => {
     const updateAttributes = vi.fn(() => true);