feat(texteditor): add text alignment toggling buttons by habibayman · Pull Request #5677 · learningequality/studio

habibayman · 2026-01-30T15:15:01Z

Summary

This PR includes the addition of a toggle alignment (Left/Right) button.
From the motives of making the RTL editor experience better and give users the ability to seamlessly mix RTL & LTR text in the same editing block.

It includes support for all nodes & Marks we have:

For this to work with our backward compatible dual markdown conversion pipeline; I have altered the markdown serializer to wrap non-default direction nodes with HTML tags containing the align attribute set.

And of course, updated the unit tests accordingly.

References

Figma Design
currently this PR represents part of Update rich text editor to flexible, extensible rich text editing framework #5049
fixes [Rich Text Editor]: add a toggle text alignment (R/L) button #5385

Reviewer guidance

Try different combinations of nodes & marks and see if their alignment gets aligned correctly

[!HINT]
You can use the checklist I wrote in the description section

Check that the alignment button's icon reflects direction correctly
Does everything persists on save?

Note

Check the native behavior of the extension from the official TipTap documentation to see where its limitations -if any- exist.
https://tiptap.dev/docs/editor/extensions/functionality/textalign

learning-equality-bot · 2026-01-30T15:15:37Z

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

You ran pre-commit locally
All issue requirements are satisfied
The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

…toolbar

…gs with alignment dir

…g logic

…hildren by calling serializeChildren directly

…gnment extension

rtibblesbot

Good feature addition for RTL/LTR text alignment toggling. The serializer refactoring from mutation-based to return-based is a nice improvement. One bug in the overflow dropdown disabled logic.

CI passing.

Blocking:

Inverted :disabled logic on overflow align button (see inline)

Suggestions:

SVG icon dimension mismatch between align-left and align-right
Peer dependency version mismatch for @tiptap/extension-text-align

Nitpick:

Double space in image markdown output when no dimensions present

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Reviewed the pull request diff checking for:

Correctness: bugs, edge cases, undocumented behavior, resource leaks, hardcoded values
Design: unnecessary complexity, naming, readability, comment accuracy, redundant state
Architecture: duplicated concerns, minimal interfaces, composition over inheritance
Testing: behavior-based assertions, mocks only at hard boundaries, accurate coverage
Completeness: missing dependencies, unupdated usages, i18n, accessibility, security
Principles: DRY (same reason to change), SRP, Rule of Three (no premature abstraction)
Checked CI status and linked issue acceptance criteria
For UI changes: inspected screenshots for layout, visual completeness, and consistency

rtibblesbot · 2026-03-05T21:21:37Z

...contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue

+            class="dropdown-item"
+            :class="{ active: alignAction.isActive }"
+            role="menuitem"
+            :disabled="alignAction.isAvailable"


blocking: This is inverted. alignAction.isAvailable is true when the action IS available (not in a code block), so :disabled="alignAction.isAvailable" disables the button when it should be enabled, and vice versa.

Compare with line 262 which correctly uses :disabled="!canClearFormat" — note the negation.

Fix: :disabled="!alignAction.isAvailable"

rtibblesbot · 2026-03-05T21:21:37Z

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/assets/icon-alignRight.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">


suggestion: This SVG has width="8" height="8" while icon-alignLeft.svg has width="10" height="10". Both share the same viewBox="0 0 15 17" so they represent the same logical space but will render at different sizes. Should these match?

rtibblesbot · 2026-03-05T21:21:37Z

...ntcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js

+    return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName} =${width}x${height}${alignSuffix})`;
  }
-  return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName})`;
+  return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName}${alignSuffix ? ` ${alignSuffix}` : ''})`;


nitpick: When there are no dimensions but alignment exists, alignSuffix already starts with a space ( align=right), then ` ${alignSuffix}` adds another space, producing a double space like ![alt](file align=right). The regex still parses it correctly (\s+), but you could simplify to just ${alignSuffix} (without the extra template literal wrapping) since the leading space is already in the variable.

rtibblesbot · 2026-03-05T21:21:37Z

package.json

    "@tiptap/extension-link": "^3.13.0",
    "@tiptap/extension-subscript": "^3.13.0",
    "@tiptap/extension-superscript": "^3.13.0",
+    "@tiptap/extension-text-align": "^3.18.0",


suggestion: @tiptap/extension-text-align@3.18.0 declares a peer dependency of @tiptap/core: ^3.18.0, but the project has @tiptap/core@3.13.0. CI passes so it likely works today, but this gap (3.13 vs 3.18) could cause subtle issues if the extension uses newer core APIs. Consider either pinning to a text-align version compatible with 3.13 (e.g., @tiptap/extension-text-align@^3.13.0) or upgrading the other tiptap packages.

rtibblesbot · 2026-03-05T21:21:37Z

.../contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdownSerializer.js

            }
          }
-          break;
+          return parts.join('\n\n');


praise: Nice refactoring of the serializer from mutation-based (result +=) to a return-based approach. This makes each case self-contained and much easier to reason about, especially now that alignment wrapping needs to inspect the serialized children before deciding the output format.

rtibblesbot · 2026-03-05T21:21:37Z

...tion/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js

+          type: 'paragraph',
+          content: [{ type: 'text', text: 'n', marks: [{ type: 'subscript' }] }],
+        },
+      ];


praise: Thorough test coverage for text alignment serialization — covers right/left/center/no-attr cases, headings, inline marks inside aligned paragraphs, and mixed alignment documents. Good edge case thinking.

nucleogenesis · 2026-03-05T21:33:49Z

...entcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/SmallTextExtension.js

        default: 'small-text',
      },
+      textAlign: {
+        default: 'left',


question/suggestion: I wonder if this should be set based on the user's current language - when I load the page up in Arabic, the direction defaults to the left but I expected it to go to the right.

When I type Arabic into the box, it automatically aligns the text to the right and then when I insert things into it they all stay right-aligned, but the icon indicator is showing to the left:

But I could do all as described (ie, right/left aligning one paragraph between others that stay put).

(cc @radinamatic @marcellamaki)

I interpret this button (outlined here) as "Right to Left"

Looks that way to me too... Can you reverse the alignment manually to LTR for the paragraphs that are not in Arabic?

nucleogenesis self-requested a review February 6, 2026 20:59

nucleogenesis self-assigned this Feb 6, 2026

nucleogenesis removed their request for review February 6, 2026 20:59

habibayman added 6 commits March 5, 2026 01:04

build: add tiptap text align dependency

4aebc0e

feat(texteditor): add basic toggle alignmen functionality

e54e72d

fix(texteditor): toolbar overflow logic after adding alignment button

baac181

fix(texteditor): disable toggling alignment for code blocks

d6b9621

feat(texteditor): add toggling text alignment button to touchscreens …

c270ce4

…toolbar

fix(texteditor): adjust image extension to account for node alignment

f2aa6e6

habibayman force-pushed the feat/RTE-text-align branch from 00187e5 to f2aa6e6 Compare March 4, 2026 23:05

habibayman added 5 commits March 5, 2026 03:24

feat(texteditor): adjust markdown serializer to wrap nodes in html ta…

74341c4

…gs with alignment dir

test(texteditor): cover markdown serializer text alignemnt serializin…

22a5c2d

…g logic

fix(texteditor): listItem serializer short-circuiting its paragraph c…

38a9805

…hildren by calling serializeChildren directly

fix(texteditor): include align in images dual saving syntax

c3d1cbe

feat(texteditor): adjust small text displaying to account for textAli…

2dd5003

…gnment extension

habibayman marked this pull request as ready for review March 5, 2026 02:16

nucleogenesis requested a review from rtibblesbot March 5, 2026 21:17

rtibblesbot suggested changes Mar 5, 2026

View reviewed changes

nucleogenesis reviewed Mar 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(texteditor): add text alignment toggling buttons#5677

feat(texteditor): add text alignment toggling buttons#5677
habibayman wants to merge 11 commits intolearningequality:unstablefrom
habibayman:feat/RTE-text-align

habibayman commented Jan 30, 2026 •

edited

Loading

Uh oh!

learning-equality-bot bot commented Jan 30, 2026

Uh oh!

rtibblesbot left a comment

Uh oh!

rtibblesbot Mar 5, 2026

Uh oh!

rtibblesbot Mar 5, 2026

Uh oh!

rtibblesbot Mar 5, 2026

Uh oh!

rtibblesbot Mar 5, 2026

Uh oh!

rtibblesbot Mar 5, 2026

Uh oh!

rtibblesbot Mar 5, 2026

Uh oh!

nucleogenesis Mar 5, 2026

Uh oh!

marcellamaki Mar 5, 2026

Uh oh!

radinamatic Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		@@ -0,0 +1,3 @@
		<svg width="8" height="8" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">

Conversation

habibayman commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Reviewer guidance

Uh oh!

learning-equality-bot bot commented Jan 30, 2026

Uh oh!

rtibblesbot left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

habibayman commented Jan 30, 2026 •

edited

Loading