Taiga UI family
- \n
- Or you can just use Angular's keydown.enter \n
<tui-editor [formControl]=\"control\" (keydown.enter)=\"method()\" />
-
|
how do we change default behaviour of enter keydown in editor? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
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 {
} |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
I need time to think, I'll answer later when I'm free |
Beta Was this translation helpful? Give feedback.
-
{
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;
},
},
},
};
},
},
<tui-editor [formControl]="control" (keydown.enter)="method()" /> |
Beta Was this translation helpful? Give feedback.
@mateen777