Switch default enter behavior of editor.

[mateen777]

how do we change default behaviour of enter keydown in editor?

[splincode]

You can customize your extensions. Is this what we are talking about?

@Component({
    // ...
    providers: [
        {
            provide: TUI_EDITOR_EXTENSIONS,
            useValue: [
                import('@taiga-ui/editor').then(() =>
                    Extension.create({
                        name: 'customEnter',
                        addKeyboardShortcuts() {
                            return {
                                Enter: ({editor}) => {
                                    if (editor.isActive('summary')) {
                                        editor.commands.selectNodeForward();
                                        editor?.commands.focus(
                                            (editor?.state.selection.anchor ?? 0) + 1,
                                        );

                                        if (globalThis.document) {
                                            editor.view
                                                .nodeDOM(editor.state.selection.anchor)
                                                ?.parentElement?.closest('details')
                                                ?.querySelector(
                                                    '[data-type="details-content"]',
                                                )
                                                ?.prepend(document.createElement('p'));
                                        }

                                        return false;
                                    }

                                    return this.editor
                                        .chain()
                                        .createParagraphNear()
                                        .run();
                                },
                            };
                        },
                    }),
                ),
            ],
        },
    ],
})
export class Example {
}

[mateen777]

thanks for reply basically i want to track ENTER keydown on enter i want to call component function and clear all content of editor like Chat Application

[splincode]

I need time to think, I'll answer later when I'm free

[splincode]

@mateen777

1. You can use ProseMirror options: https://taiga-family.github.io/editor/options#editor-props

{
            provide: TUI_EDITOR_OPTIONS,
            deps: [TuiAlertService],
            useFactory(alerts: TuiAlertService): TuiEditorOptions {
                return {
                    ...TUI_EDITOR_DEFAULT_OPTIONS,
                    editorProps: {
                        handleDOMEvents: {
                            keydown: (_, event: KeyboardEvent) => {
                                if (event.key === 'Enter' && !event.shiftKey) {
                                    alerts
                                        .open('Enter <strong>pressed</strong>')
                                        .subscribe();
                                }

                                return true;
                            },
                        },
                    },
                };
            },
        },

2. Or you can just use Angular's keydown.enter

<tui-editor [formControl]="control" (keydown.enter)="method()" />