Example for NodeViews with custom elements (WebComponents) and Angular 6

Show
1

Since Angular now officially supports custom elements I thought it’d be a good moment to figure out whether custom elements could improve the developer workflow when rendering and interacting with custom nodes within ProseMirror. Using web standards for this makes at least my implementations a lot cleaner.

I am putting this up here in case someone else is interested in experimenting with custom elements (you don’t really need Angular for that - there are plenty of alternatives - Angular ist just what I use)

Repo

To get started, check out the repo, run yarn && yarn start (or npm install && npm start).

Disclaimer: I did not test this repo in a browser other than Chrome. Firefox and Edge still need polyfills.

p.s.: This is not using any inline dom nodes (contentDOM)

1 Like
2

Hi…I am new to Angular 6 but would like to use Prosemirror in my web app. I am using Angular 6 with CLI. I tried to install using ng2-prosemirror but it failed due to a codemirror error. I have seen your example of a set up with custom element. I would like to learn how to implement a simple editor without any custom element…can you please give me a hand? Thanks in advance

3

Hi there,

I am basically following Marijn’s example setup from the website.

I’m using a directive to wrap the editor (see here).

This should be everything you need for a very simple editor.

Best Frederik

4

Thank you so much for your helpful reply. I am slowly learning. I have created editor.directive.ts and custom-view.ts in the working folder. In the html page of this folder, I have added: . but the editor is not showing up. Should I do anything else to link editor.directive.ts with html? I am sorry for my stupid question I am a very beginner in Angular…

5

Hi,

an example for how place the ProseMirror directive in your app here.

You need to make sure your directive is registered in your NgModule like here. The Angular docs explain this in more detail.

Best Frederik

6

Thank you very very much. I have got a working editor now. Truly appreciate your helps.

1 Like