Editor

import { Component } from '@angular/core';
import { WrEditor } from 'ngwr/editor';

@Component({ imports: [WrEditor] })
export class MyComponent {}

// "Hello, **world**" — one paragraph, two text nodes, one mark.
const value: WrEditorValue = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        { type: 'text', text: 'Hello, ' },
        { type: 'text', text: 'world', marks: [{ type: 'strong' }] },
      ],
    },
  ],
};

import { DOMSerializer, Node, type Schema } from 'prosemirror-model';

import type { WrEditorJson } from 'ngwr/editor';

// `schema` is your own, declaring the nodes and marks WrEditorJson lists.
export function toHtml(value: WrEditorJson, schema: Schema, document: Document): string {
  const doc = Node.fromJSON(schema, value);
  const host = document.createElement('div');
  host.append(DOMSerializer.fromSchema(schema).serializeFragment(doc.content, { document }));
  return host.innerHTML;
}

import { WR_EDITOR_TOOLBAR, type WrEditorTool } from 'ngwr/editor';

// The default toolbar without the two code tools.
readonly tools: readonly WrEditorTool[] = WR_EDITOR_TOOLBAR.filter(
  tool => tool !== 'code' && tool !== 'codeBlock'
);

<!-- No toolbar; the shortcuts still work. -->
<wr-editor ariaLabel="Notes" [toolbar]="false" [(value)]="notes" />

// Refused whole: the URL check never lets a javascript: link through.
protected readonly imported = signal<WrEditorValue>({
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'a script link',
          marks: [{ type: 'link', attrs: { href: 'javascript:alert(1)', title: null } }],
        },
      ],
    },
  ],
});

@defer (on viewport) {
  <wr-editor [formField]="form.body" />
} @placeholder {
  <div class="editor-placeholder" aria-hidden="true"></div>
}