Comments (5)
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.
Related Issues (20)
- block
- How cloud I understand Scope and What is the meaning of & operator between Scope and another Scope
- How to set editor content with html style
- Make v2 the default branch HOT 1
- register Blot unsucessfully
- [Question] Is it possible to define how a blot is serialized ? HOT 1
- How to add custom inline blot (or any blot whatsoever)? HOT 2
- Where can I find the old version commit? HOT 1
- Incorrect descendant typing (ts2769) HOT 1
- Adding a custom Blot HOT 1
- Remove Byte Order Mark (BOM) characters from Blot HOT 3
- Quill editor removes inline style margin-left on loading content
- the img tag is not closed HOT 1
- re-export classes from quill-delta and parchment
- How do we replicate the functionality inside a blot's `replace` function?
- Support ClassAttributor if prefix == ''
- Paste options for plain text content
- Inline Embed not working in 2.0 branch
- Is this condition of `uiNode` a typo? HOT 2
- registering a new blot does not add it to the allowed children of the scroll object
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parchment.