nozer/quill-delta-to-html

Explicit align left

Closed this issue · 7 comments

adammeyer commented

I would like text-align:left styles to be added to align left text.

I thought this config would do the trick, but align left is still being ignored.

  inlineStyles: {
      align: {
        left: 'text-align:left',
        center: 'text-align:center',
        right: 'text-align:right'
      }
    }

Thanks for the help!

nozer commented

in HTML, text is aligned to left by default. That is why it is neither added by Quill's own editor nor by this library. And that is why I think it is unnecessary to add it and crowd the result with superfulous style info. Could you give an example for a case that you would need this? Maybe I am missing something.

adammeyer commented

The parent element has a text-align: center style.

To overcome this in the editor, I used the following code:

let AlignAttributor = Quill.import('attributors/style/align');
AlignAttributor.whitelist = ['left', 'right', 'center'];
Quill.register(AlignAttributor, true);

I agree, it most cases this is unnecessary. But in my case, I can't control the parent element styles. I hope there is a similar override available in this library.

nozer commented

So, you cannot wrap your html output with a div like this?

<div style="text-align:left">
...quill-delta-to-html-output-here...
</div>

Let me know if it is so; I will have to add a config option to allow rendering of text-align:left in style.

adammeyer commented

I need to use the parent styles if the user has not explicitly set a style for a selection via the quill editor. It's like a template. Template styles are used, unless a user overrides them in the quill editor. Some templates many align text left, some center. Text alignment should change with the template unless overridden by an inline style. Thanks!

nozer commented

Ah I see. Ok. I will add as soon as I can

nozer commented

Ok. Pushed the fix with tag v0.10.11.
You must have align:left in the op attributes for this to work.
Also, please note that you don't need to specify align property in inlineStyles. Because, inlineStyles is like a look up table where it answers the question like 'what style should be used when font is set to normal or indent is set to 2'. Since values of align are already an answer that we can use in style, you don't need to specify it. So, stick to font, size, indent, direction for inlineStyles.

Anyway, here is an example conversion operation with text-align:left

var ops = [
   {insert: "abc"}, 
   {attributes: {indent: 1, align: "left", list: "ordered"}, insert: "↵"}, 
   {insert: "def"}, 
   {attributes: {indent: 1, align: "right", list: "ordered"}, 
   insert: "↵"}
]
var converter = new QuillDeltaToHtmlConverter(ops, {
   inlineStyles: true
});
var html = converter.convert();
// <ol><li style="text-align:left">abc</li><li style="text-align:right">def</li></ol>
  • 👍1
adammeyer commented

@nozer thank you so much! Worked perfectly.

  • 👍1