What could be causing the minimal Angular setup with Lexical.dev to malfunction?

I recently tried to follow the guide on

It all seemed pretty clear.

import { createEditor } from 'lexical';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div contenteditable="true" #editable></div>
  `,
})
export class App implements AfterViewInit {
  private editor = createEditor();

  @ViewChild('editable') editable?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const el = this.editable?.nativeElement;
    if (el) {
      this.editor.setRootElement(el);
      console.log('set');
    } else console.log('nop');
  }
}

Stackblitz link

However, even after following the steps, I am not seeing any output or errors. What could be the issue here?

Answer №1

Upon investigation, it has been found that Lexical is a complex WYSIWYG tool that requires specific plugins to function effectively.

In order to enable basic text input, you must install a separate module:

import { registerPlainText } from '@lexical/plain-text';

Subsequently, modify your code as follows:

export class App implements AfterViewInit {
  editor: LexicalEditor = createEditor();

  @ViewChild('editable') editable?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    if (this.editable) {
      this.editor.setRootElement(this.editable.nativeElement);
      registerPlainText(this.editor);
    }
  }
}

https://stackblitz.com/edit/stackblitz-starters-z7qv1j?file=src%2Fmain.ts

It's worth noting that Lexical is maintained by Meta and examples are predominantly in ReactJs. While it is compatible with any UI framework, setting up a basic configuration can be laborious without using ReactJs.

Considering an alternative like Quill for Angular might be beneficial, as it offers easier customization and setup compared to Lexical.

However, it's important to acknowledge that the current wrapper around QuillJs V1 may have some issues, whereas V2 resolves many of these concerns and is nearing release after being halted for a period due to the original maintainer switching focus to private development.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the jQuery custom slide animation when there are no more items to display

I have designed a unique slider for users to view the work process https://i.sstatic.net/FLYne.png When a user clicks the button, the slider will move left or right depending on the button clicked. However, if the user clicks multiple times, the slider ma ...

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

Guide to incorporating jQuery into an ASP.NET webpage and styling GridView column layouts

After reading numerous articles and questions on formatting gridview rows using jQuery, I decided to give it a try for the first time in an ASP.NET page. Although I managed to write the following code, it seems to have no effect on the gridview. Can anyon ...

The performance of my Angular app is top-notch, but I'm having some trouble with ng

Issues with Loading Controllers in My App After deploying and running my app in a browser, I encountered an issue with loading controllers. While I can reach all the controllers/services successfully, one particular controller is not loading properly. To ...

Exploring React: Post-mount DOM Reading Techniques

Within my React component, I am facing the challenge of extracting data from the DOM to be utilized in different parts of my application. It is crucial to store this data in the component's state and also transmit it through Flux by triggering an acti ...

Use jQuery to select and emphasize the following menu option

Hey there! I'm currently working on adding a new feature to my website. I want the menu items to highlight in succession when clicked. For example, if I click on people, I want it to highlight and then move on to highlight the next item in the menu, w ...

Convert former function to use async and await system

I need to convert this function to async, but I am facing an issue where the users object obtained from mapping interactions is not returning data in the expected format. When I run the async function on the client side, my values are showing up as nil. Th ...

Encountered an error while attempting to upgrade to the latest @angular/cli version 1.0.0: Unexpected symbol "<" found in JSON at the beginning of the file

When I was using angular-cli 1.0.0 beta 23, my service was able to fetch a local JSON file for testing without any issues. However, after upgrading to angular/cli 1.0.0, I encountered the following problem: GET http://localhost:4200/json/inputInventory/ ...

Drawing a line beneath the mouse's center using JavaScript

Struggling with my JavaScript drawing tool, particularly the draw() function. The line is consistently off-center below the mouse cursor. How do I fix this issue? My aim is to have the line always follow the center of the mouse as it moves. Could someone c ...

What is the best way to showcase data from input fields within a bootstrap modal dialog?

After the user has entered their details and clicks submit, I would like to present the information in a Bootstrap modal with a confirmation button below. This serves as a preview of the data before it is saved to the database. Here's what I have so ...

Encountering a Node.js error while using ssh2: ECONNRESET read error

I have been attempting to utilize npm's ssh2 package to establish an SSH connection and remotely access a machine. The code functions properly for connections from Windows to Linux/MacOS, but encounters issues when connecting from Windows to Windows ( ...

What potential challenges could arise from granting access to all Controllers to all Data?

My AngularJS application with CRUD functionality relies on a WebSocket server for processing information. This eliminates the need for constant HTTP polling and allows updates to be automatically pushed to all users. When setting up my services, I quickly ...

How can login errors be displayed in a Django application?

When I try to log into my website using the custom login page, entering the correct account details allows me access. However, if I input the wrong information, the page just refreshes with the username and password fields empty. Is there a way to display ...

What is the best way to retrieve ID tags and other element values for a string element stored in an array?

Is there a way to use document.querySelector("#") on an input element (and check if it is checked) that is saved in a string and then retrieved by innerHTML? I'm having trouble figuring out how to access it. I am trying to loop through an array and l ...

Issue with importing aliases in Angular 7 production environment

Hello everyone! I have encountered an issue where using alias on import and building the project in production mode (--prod flag) results in the alias being undefined. Interestingly, this behavior does not occur in development mode. Any suggestions on how ...

The tooltip feature in jQuery is experiencing some stuttering issues

Sometimes, images can convey messages better than words. I encountered a strange issue with my self-made jQuery tooltip. I prefer not to use any libraries because my needs are simple and I don't want unnecessary bloat. When I move my mouse from righ ...

Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space. <div class="post-content"> <div class="slider-1-smart"> --- slider contents --- < ...

Use Vuejs to add the details of the selected item to an array and then dynamically update the array when items are checked or unchecked

My products json contains various details similar to the examples below. products.json products: [ { "id": "6", "name": "Cake-WhiteForest", "manufacturer": " ...

Ways to eliminate Typescript assert during the execution of npm run build?

How can I effectively remove Typescript asserts to ensure that a production build generated through the use of npm run build is free of assertions? Your assistance is appreciated ...

What could be causing my webGL page to fail loading the second time following a refresh?

My friend and I are working on a JavaScript page together. Initially, the page loads smoothly when opened in a tab, although it may be a bit slow. However, upon refreshing the tab, the WebGl canvas appears completely blank while the HTML elements are stil ...