slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.52k stars 3.38k forks source link

i can't use 2 attributes in one line #3836

Closed vadimt2 closed 1 year ago

vadimt2 commented 1 year ago

https://stackoverflow.com/questions/75559480/custom-attribute-is-deleted-on-setcontents-in-quill Steps for Reproduction

css/scss

.test {
    background-repeat: repeat-x;
    background-position: bottom;
    cursor: cell;
    text-decoration: underline;
    text-decoration-color: red;
}

Create BlockQuote

class CustomBlockQuote extends BlockQuote {
      static create(value: any) {
        const node = super.create(value);
        node.classList.add('test');
        return node;
      }
    }
    (CustomBlockQuote as any).blotName = 'custom-blockquote';
    (CustomBlockQuote as any).tagName = 'span';

    Quill.register(CustomBlockQuote, true);

this code is not working:

 this.quill.insertText(0, 'Quill1', {
      color: '#ffff00',
      'custom-blockquote': true,
    });

    this.quill.insertText(0, 'Quill2', {
      color: '#ffff00',
      'custom-blockquote': true,
    });

or this one is not working as well:

this.quill.setContents([
      { insert: 'Hello ' },
      { insert: 'World!', attributes: { 'custom-blockquote': true } },
      { insert: '\n' },
    ]);

if you do \n 2 new line, then it's working.

Expected behavior: in one line <p><span class="test>Quill1</span><span class="test>Quill2</span></p>

or <p>Hello <span class="test>World!</span></p>

Actual behavior: <p>Hello World!</p>

when you are using custom attribute in attributes it's not working at all as well. { insert: 'World!', attributes: { 'custom-blockquote': true } },

and if use let Inline = Quill.import('blots/inline'); it's not working at all.

Platforms: Angular 15 Include browser, operating system and respective versions Chrome

vadimt2 commented 1 year ago

I have found a solution.

   let Inline = Quill.import('blots/inline');

    class TestBlot extends Inline {
      static blotName = 'spell_error';
      static className = 'spell_error';
      static tagName = 'span';

      static formats(): boolean {
        return true;
      }
    }

    Quill.register(TestBlot, true);