lexical-angular
For documentation and more information about Lexical, be sure to visit the Lexical website.
Lexical official documentation
Angular playground
Getting started with Angular
Requires Angular 13.0.0 or higher.
Install lexical
and lexical-angular
pnpm i lexical lexical-angular # or npm or yarn
Below is an example of a basic plain text editor using lexical and lexical-angular.
import { FormControl } from '@angular/forms';
import { LexicalComposerConfig } from 'lexical-angular';
import { EditorState } from 'lexical';
@Component({
selector: 'lxc-text-editor',
template: `
<div
lexicalComposer
[lexicalInitialConfig]="editorConfig"
[lexicalAutofocus]="true"
(lexicalChangeEvent)="log($event)"
>
<div class="editor-container" lexicalPlainText>
<div lexicalContentEditable class="editor-input"></div>
<div *lexicalPlaceholder class="editor-placeholder">
Enter some plain text...
</div>
</div>
</div>
`,
})
export class PlainTextEditorComponent {
readonly editorConfig: LexicalComposerConfig = {
onError: e => throw e,
theme: {
ltr: 'ltr',
rtl: 'rtl',
placeholder: 'editor-placeholder',
paragraph: 'editor-paragraph',
},
readOnly: false,
nodes: [],
};
log(event: EditorState): void {
console.log(event);
}
}