CODEWITHSUNDEEP
javascripttypescriptquill
Acorn
Acorn

Reputation: 1187

Quill Wrap Blot value with a child Blot

I want to default all text to using a font-style of Arial and a font-size of 12px.

If I set those as the default for the toolbar, the toolbar UI does not change to a color to indicate that is what you are on (For example, if I place my cursor in some text that is styled to be 15px and Geneva, the UI for the font and size picker will be blue. But if I default the UI to 15 and Geneva, then whenever i place my cursor in some text styled that way, it will just switch to it, but the UI will not have that highlight color).

To get around this, I just opt to not set a default. Which works great, except when I am reading in some legacy values from the database. These legacy values would look something like this,

<p> This is legacy text </p>

And should be defaulted to a font-style of Arial and a size of 12px.

So, ideally, I'd like Quill to convert it into:

<p>
  <span class="ql-font-arial" style="font-size: 12px;">This is legacy text.</span>
</p>

But I cannot get Quill to accept a child node when creating the blot. If I append a child, it gets optimized out because that child will have no content. If I add a child and return a child node, the parent node is never acknowledged by Quill and does not appear in the styling (and puts everything on the same line because it's just one giant optimized span tag now.)

Is there any way to get the blot to use format itself to have a child and stick the data into the child? This is what I'm using right now to capture

tags and keep any alignment formatting they might have. But I can't figure out how to have it default it's data to be wrapped in a child <span> tag. 

const BlockBlot = Quill.import('blots/block');

export class PBlot extends BlockBlot {
  static create(data: { alignment: string }) {
    let node: Element = document.createElement('P');
    if (data && data.alignment) {
      node.setAttribute('class', `ql-align-${data.alignment.toLowerCase()}`);
    }
    let sNode = document.createElement('SPAN');
    node.appendChild(sNode);
    //return sNode;
    return node;
  }

  static formats(node: Element) {
    return { alignment: node.getAttribute('align') || undefined };
  }
}
PBlot.tagName = 'P';
PBlot.blotName = 'block';

Upvotes: 1

Views: 1767

Answers (1)

Mira
Mira

Reputation: 21

Try using a const BlockEmbed = Quill.import('blots/block/embed'); instead. Changing tagName to <div> might work as well.

Upvotes: 1

Related Questions