mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 04:48:53 +00:00
fix(editor): support markdown transform when using IME (#12778)
Fix #12284 Close [BS-3517](https://linear.app/affine-design/issue/BS-3517/微软新注音输入法无法使用markdown语法) This PR refactor the markdown transform during inputting, including: - Transfrom markdown syntax input in `inlineEditor.slots.inputting`, where we can detect the space character inputed by IME like Microsoft Bopomofo, but `keydown` event can't. - Remove `markdown-input.ts` which was used in `KeymapExtension` of paragraph, and refactor with `InlineMarkdownExtension` - Adjust existing `InlineMarkdownExtension` since the space is included in text. - Add two `InlineMarkdownExtension` for paragraph and list to impl Heading1-6, number, bullet, to-do list conversion. Other changes: - Improve type hint for parameter of `store.addBlock` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Added markdown shortcuts for creating code blocks and dividers in the rich text editor. - Introduced enhanced paragraph markdown support for headings and blockquotes with inline markdown patterns. - Integrated new list markdown extension supporting numbered, bulleted, and todo lists with checked states. - **Improvements** - Updated markdown formatting patterns to require trailing spaces for links, LaTeX, and inline styles, improving detection accuracy. - Markdown transformations now respond to input events instead of keydown for smoother editing experience. - Added focus management after markdown transformations to maintain seamless editing flow. - **Bug Fixes** - Removed unnecessary prevention of default behavior on space and shift-space key presses in list and paragraph editors. - **Refactor** - Enhanced event handling and typing for editor input events, improving reliability and maintainability. - Refined internal prefix text extraction logic for markdown processing. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -165,8 +165,9 @@ export class InlineEditor<
|
||||
inlineRangeSync: new Subject<Range | null>(),
|
||||
/**
|
||||
* Corresponding to the `compositionUpdate` and `beforeInput` events, and triggered only when the `inlineRange` is not null.
|
||||
* The parameter is the `event.data`.
|
||||
*/
|
||||
inputting: new Subject<void>(),
|
||||
inputting: new Subject<string>(),
|
||||
/**
|
||||
* Triggered only when the `inlineRange` is not null.
|
||||
*/
|
||||
|
||||
@@ -119,7 +119,7 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
|
||||
this.editor as never
|
||||
);
|
||||
|
||||
this.editor.slots.inputting.next();
|
||||
this.editor.slots.inputting.next(event.data ?? '');
|
||||
};
|
||||
|
||||
private readonly _onClick = (event: MouseEvent) => {
|
||||
@@ -181,10 +181,10 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
|
||||
});
|
||||
}
|
||||
|
||||
this.editor.slots.inputting.next();
|
||||
this.editor.slots.inputting.next(event.data ?? '');
|
||||
};
|
||||
|
||||
private readonly _onCompositionStart = () => {
|
||||
private readonly _onCompositionStart = (event: CompositionEvent) => {
|
||||
this._isComposing = true;
|
||||
if (!this.editor.rootElement) return;
|
||||
// embeds is not editable and it will break IME
|
||||
@@ -201,9 +201,11 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
|
||||
} else {
|
||||
this._compositionInlineRange = null;
|
||||
}
|
||||
|
||||
this.editor.slots.inputting.next(event.data ?? '');
|
||||
};
|
||||
|
||||
private readonly _onCompositionUpdate = () => {
|
||||
private readonly _onCompositionUpdate = (event: CompositionEvent) => {
|
||||
if (!this.editor.rootElement || !this.editor.rootElement.isConnected) {
|
||||
return;
|
||||
}
|
||||
@@ -216,7 +218,7 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
|
||||
)
|
||||
return;
|
||||
|
||||
this.editor.slots.inputting.next();
|
||||
this.editor.slots.inputting.next(event.data ?? '');
|
||||
};
|
||||
|
||||
private readonly _onKeyDown = (event: KeyboardEvent) => {
|
||||
@@ -359,13 +361,9 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
|
||||
'compositionupdate',
|
||||
this._onCompositionUpdate
|
||||
);
|
||||
this.editor.disposables.addFromEvent(
|
||||
eventSource,
|
||||
'compositionend',
|
||||
(event: CompositionEvent) => {
|
||||
this._onCompositionEnd(event).catch(console.error);
|
||||
}
|
||||
);
|
||||
this.editor.disposables.addFromEvent(eventSource, 'compositionend', e => {
|
||||
this._onCompositionEnd(e).catch(console.error);
|
||||
});
|
||||
this.editor.disposables.addFromEvent(
|
||||
eventSource,
|
||||
'keydown',
|
||||
|
||||
Reference in New Issue
Block a user