Block elements get replaced when wrapping them in a custom multiline container blot with block scope about parchment HOT 5 CLOSED

I got it to work with just a little tweak to my copy of the ListItem class; changing the line of the replaceWith method (https://github.com/quilljs/quill/blob/develop/formats/list.js#L29 in the original file)

if (name === this.parent.statics.blotName) {

in the following way:

var QuillBlock = Quill.import('blots/block');
var Parchment = Quill.import('parchment');


class ListItem extends QuillBlock
{
    static formats(domNode) {
        return domNode.tagName === this.tagName ? undefined : super.formats(domNode);
    }

    format(name, value) {
        if (name === Quill.import('formats/list').blotName && !value) {
            this.replaceWith(Parchment.create(this.statics.scope));
        }
        else {
            super.format(name, value);
        }
    }

    remove() {
        if (this.prev == null && this.next == null) {
            this.parent.remove();
        }
        else {
            super.remove();
        }
    }

    replaceWith(name, value) {
        const newParent = Parchment.query(name);
        const currentParent = this.parent;

        currentParent.isolate(this.offset(currentParent), this.length());

        if (
            name === this.parent.statics.blotName
            || (
                null !== newParent
                && newParent.allowedChildren.some(function (child) {
                    return (
                        child.prototype.statics.scope === Parchment.Scope.BLOCK_BLOT
                        && currentParent instanceof child
                    );
                })
            )
        ) {
            this.parent.replaceWith(name, value);
            return this;
        }
        else {
            this.parent.unwrap();
            return super.replaceWith(name, value);
        }
    }
}

ListItem.blotName = 'list-item';
ListItem.tagName = 'LI';

Quill.register('formats/list/item', ListItem, true);

allows my collapsible text container to retain the List as long as I have it added to the allowedChildren (which I had done already as my very first attempt to make it work anyway). It also only works if the new parent is a Block element so it's still valid html.

I guess with that the issue can be closed, and it turned out to be a Quill formats thing, not Parchment. Sorry about that.

from parchment.

All BlockBlots are ContainerBlots so the check would always pass if that were changed. This is a bit of an advanced topic so docs are still forthcoming but I'd take a look at how Quill implements Lists as an example of how you might achieve what you are going for.

from parchment.

Yeah, I downloaded the non-minified version of Quill and did some more testing and realized it's not that easy after all. In the end I was able to trace one half of the problem to the replace-Method of my Collapsible-Blot. Instead of the original line I got from the List-Blot..

let item = Parchment.create(this.statics.defaultChild);

..I had to use this to retain the inner formatting of the children:

let item;

if (this.statics.allowedChildren.indexOf(target.constructor) < 0) {
	item = target.clone();
}
else {
	item = Parchment.create(this.statics.defaultChild);
}

That worked for most formats, except for the List (and probably Code, but I didn't test that because that is not a format we allow anyway). To fix that, I ultimately altered an If in the replaceWith Method of the ListItem (in the compiled code for now, but I will fork the List and replace the format with my own version).

https://github.com/quilljs/quill/blob/develop/formats/list.js#L29 had to be changed to this to work for me (from my Test in the compiled version of the code):

var newParent = Registry.query(name);
if (name === this.parent.statics.blotName || newParent.__proto__.name === _container.default.name) {

That allowed me to do something like this:

But making the example for the screenshot above I just found a bug I introduced by doing that; I cannot remove a bullet point of an empty list item line using Backspace anymore. Back to debugging.

from parchment.

Not sure I followed everything but thanks for sharing.

from parchment.

Hi, @mbv-og

May you please share me how to use your customized ListItem in your high level code? , i.e., how to use/insert some ListItem into the quill editor?

There are only insertText and insertEmbed APIs available from Quill. All the quill examples available are about customizing embed blot.

Here is my question posted at Quill forum: How to customize a sentenceBlot/paragraphBlot and insert it into Quill?

Basically, I don't know how to use the customized blot based on block in quill editor.

thanks for your help.

-John

from parchment.