Mobile, Desktop: Improve RTL support in the Markdown editor (#10810)

.eslintignore

@@ -800,6 +800,7 @@ packages/editor/CodeMirror/testUtil/loadLanguages.js
 packages/editor/CodeMirror/testUtil/pressReleaseKey.js
 packages/editor/CodeMirror/testUtil/typeText.js
 packages/editor/CodeMirror/theme.js
+packages/editor/CodeMirror/utils/biDirectionalTextExtension.js
 packages/editor/CodeMirror/utils/formatting/RegionSpec.js
 packages/editor/CodeMirror/utils/formatting/findInlineMatch.test.js
 packages/editor/CodeMirror/utils/formatting/findInlineMatch.js

.gitignore

@@ -779,6 +779,7 @@ packages/editor/CodeMirror/testUtil/loadLanguages.js
 packages/editor/CodeMirror/testUtil/pressReleaseKey.js
 packages/editor/CodeMirror/testUtil/typeText.js
 packages/editor/CodeMirror/theme.js
+packages/editor/CodeMirror/utils/biDirectionalTextExtension.js
 packages/editor/CodeMirror/utils/formatting/RegionSpec.js
 packages/editor/CodeMirror/utils/formatting/findInlineMatch.test.js
 packages/editor/CodeMirror/utils/formatting/findInlineMatch.js

packages/editor/CodeMirror/createEditor.ts

@@ -31,6 +31,7 @@ import getScrollFraction from './getScrollFraction';
 import CodeMirrorControl from './CodeMirrorControl';
 import insertLineAfter from './editorCommands/insertLineAfter';
 import handlePasteEvent from './utils/handlePasteEvent';
+import biDirectionalTextExtension from './utils/biDirectionalTextExtension';
 
 const createEditor = (
 	parentElement: HTMLElement, props: EditorProps,
@@ -282,6 +283,7 @@ const createEditor = (
 
 				// Apply styles to entire lines (block-display decorations)
 				decoratorExtension,
+				biDirectionalTextExtension,
 
 				// Adds additional CSS classes to tokens (the default CSS classes are
 				// auto-generated and thus unstable).

packages/editor/CodeMirror/utils/biDirectionalTextExtension.ts

@@ -0,0 +1,40 @@
+import { Extension, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
+
+const autoTextDirectionDecoration = Decoration.line({
+	attributes: { dir: 'auto' },
+});
+
+const biDirectionalTextExtension: Extension = [
+	EditorView.perLineTextDirection.of(true),
+	ViewPlugin.fromClass(class {
+		public decorations: DecorationSet;
+		public constructor(view: EditorView) {
+			this.decorations = this.buildDecorations(view);
+		}
+
+		public update(update: ViewUpdate) {
+			if (update.docChanged || update.viewportChanged) {
+				this.decorations = this.buildDecorations(update.view);
+			}
+		}
+
+		private buildDecorations(view: EditorView) {
+			const builder = new RangeSetBuilder<Decoration>();
+			for (const { from, to } of view.visibleRanges) {
+				const fromLine = view.state.doc.lineAt(from);
+				const toLine = view.state.doc.lineAt(to);
+
+				for (let i = fromLine.number; i <= toLine.number; i++) {
+					const line = view.state.doc.line(i);
+					if (line.text) {
+						builder.add(line.from, line.from, autoTextDirectionDecoration);
+					}
+				}
+			}
+			return builder.finish();
+		}
+	}, { decorations: v => v.decorations }),
+];
+
+export default biDirectionalTextExtension;