Custom button supporting <small> tag

[jaroslawwroblewski]

I saw plugins and schema in the documentation (https://sibiraj-s.github.io/ngx-editor/en/introduction/) but I don't really understand how to add my own button to the toolbar. If can't be done, maybe a div with a class?

[sibiraj-s]

Yeah. I do agree few parts of the docs needs improvement. May be you can follow this example from code mirror?

https://sibiraj-s.github.io/ngx-editor/en/examples/codemirror/

It also has stackblitz for code reference, It has both custom node implementation as well as custom button in toolbar.

[jaroslawwroblewski]

@sibiraj-s I see that the schema is responsible for custom html tags, but how to add the "small" button to the toolbar now?

import { nodes as basicNodes, marks } from 'ngx-editor';
import { Schema, NodeSpec, MarkSpec, DOMOutputSpec } from 'prosemirror-model';
import OrderedMap from 'orderedmap';

const codeMirror: NodeSpec = {
  parseDOM: [{ tag: 'small' }],
  toDOM(): DOMOutputSpec {
    return ['small', 0];
  },
};

const nodes = Object.assign({}, basicNodes, {
  code_mirror: codeMirror,
});

const schema = new Schema({
  nodes: nodes as unknown as OrderedMap<NodeSpec>,
  marks: marks as unknown as OrderedMap<MarkSpec>,
});

export default schema;

Angular ts:

export class WysiwygEditorComponent implements OnInit, OnDestroy {
  @Input() value!: string;
  @Output() valueChanged = new EventEmitter<string>();
  editor!: Editor;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
  ];

  ngOnInit(): void {
    this.editor = new Editor({
      schema: schema as any,
    });
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

Angular html:

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"></ngx-editor-menu>
  <ngx-editor [editor]="editor" [ngModel]="value" (ngModelChange)="valueChanged.emit($event)" [disabled]="false" [placeholder]="'Opis...'"></ngx-editor>
</div>

[sibiraj-s]

See https://sibiraj-s.github.io/ngx-editor/en/menu/#custom-menu. You should find the example for this in the codemirror demo as well

[akib1997]

I was looking kind of feature.