sibiraj-s / ngx-editor

🖋️ Rich Text Editor for angular using ProseMirror
https://sibiraj-s.github.io/ngx-editor/
MIT License
424 stars 183 forks source link

[Bug]: Default nodes in Schema removes margin-left from paragraph #544

Closed DywiTom closed 2 weeks ago

DywiTom commented 2 weeks ago

What happened?

Hello!

When i use the toolbar feature "indent" it adds margin-left to the paragraph, but after setting the content again it looses the styles. I use the default nodes, marks.

import { Editor, Toolbar, marks, nodes } from "ngx-editor";
import { Schema } from "prosemirror-model";

...

  readonly schema = new Schema({nodes: nodes,marks: marks });
  editor: Editor = new Editor({ schema: this.schema });
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
    ['code', 'blockquote'],
    ['ordered_list', 'bullet_list'],
    [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
    ['link', 'image'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
    ['horizontal_rule', 'format_clear', 'indent', 'outdent'],
    ['undo', 'redo']
  ];

..

  newsGroup = new FormGroup({
    title: new FormControl<string>(this.data.title, [Validators.required, Validators.maxLength(255)]),
    content: new FormControl<string>(this.data.content, Validators.required)
  });

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

  test() {
    console.log(this.newsGroup.controls.content.value); 
    // Value is <p style="margin-left:40px" data-indent="1">Test</p>

    this.newsGroup.controls.content.setValue(this.newsGroup.controls.content.value);
    // OR this.editor.setContent(this.newsGroup.controls.content.value);
  }

Version

latest

Angular Version

v17

What browsers are you seeing the problem on?

Chrome

Link to reproduce

No response

Relevant log output

No response

Willing to submit a PR?

None

sibiraj-s commented 2 weeks ago

Should be fixed in v17.5.1