Add automatic text direction detection + Right to Left Capbilities - #3448
Add automatic text direction detection + Right to Left Capbilities#3448Karlee Wong (KarleeWong) wants to merge 9 commits into
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Karlee Wong (@KarleeWong) please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
| onPluginEvent(event: PluginEvent) { | ||
| if ( | ||
| this.editor && | ||
| (event.eventType === 'compositionEnd' || |
There was a problem hiding this comment.
Could this be part of AutoFormatPlugin? we just need to create an option called auto direction to enable and disabled this feature.
| (event.eventType === 'compositionEnd' || | ||
| (event.eventType === 'input' && event.rawEvent.inputType === 'insertText')) | ||
| ) { | ||
| this.editor.formatContentModel(model => setModelDirection(model, 'auto'), { |
There was a problem hiding this comment.
We already have the setDirection function, can we modify setDirection to get the changes you did in setModelDirection. What do you think?
| (event.eventType === 'compositionEnd' || | ||
| (event.eventType === 'input' && event.rawEvent.inputType === 'insertText')) | ||
| ) { | ||
| this.editor.formatContentModel(model => setModelDirection(model, 'auto'), { |
There was a problem hiding this comment.
Need to be careful when we call formatContentModel. Try only call it when we are sure we want to modify the model. So better check the input before we call this API. Because >99.9% cases we don't need to change the direction.
| return 'ltr'; | ||
| } | ||
| } | ||
| import { findListItemsInSameThread } from '../list/findListItemsInSameThread'; |
There was a problem hiding this comment.
It seems the EndOfLine character is different so it is hard to tell what is changed.
| block.style.direction; | ||
|
|
||
| if (expectedDirection && currentDirection !== expectedDirection) { | ||
| editor.formatContentModel(model => setModelDirection(model, 'auto'), { |
There was a problem hiding this comment.
I think we can use the setDirection api from roosterjs-content-model-api package.
There was a problem hiding this comment.
Updated in 6bc76b6. AutoFormatPlugin now calls setDirection(editor, 'auto') after the cheap DOM direction check confirms a change is needed.
| return; | ||
| } | ||
|
|
||
| const selection = editor.getDOMSelection(); |
There was a problem hiding this comment.
We already have the selection on line 299, why not reuse it here?
There was a problem hiding this comment.
Updated in 6bc76b6. The regular insertText path now passes the existing selection.range into handleAutoDirection, so it only calls getDOMSelection once.
| selection.type === 'range' && | ||
| selection.range.collapsed | ||
| ) { | ||
| this.handleAutoDirection(editor, rawEvent.data); |
There was a problem hiding this comment.
Can we handle auto direct and other keyboard events together?
There was a problem hiding this comment.
Updated in 6bc76b6. Auto direction is now handled in the same input-data switch as the existing keyboard features; compositionEnd remains a separate event path for IME input.
Jiuqing Song (JiuqingSong)
left a comment
There was a problem hiding this comment.
Please fix tests
Summary
Adds opt-in automatic text direction detection based on the first strong directional character in the active block.
Changes
setModelDirectionto:setModelDirectionfor model-level use.AutoDirectionPlugin.insertTextinput.compositionEndfor IME keyboards.roosterjs-content-model-plugins.Behavior
שלום Englishuses RTL.Hello שלוםuses LTR.123 مرحباuses RTL because leading numbers and punctuation are ignored.AutoDirectionPluginis registered.Video
Recording.2026-08-25.115834.mp4