Indentation lost when rendering content with ng-bind-html

[jziggas]

Go to http://jsbin.com/minojiwaxa/edit?html,js,output and create some bullets with nested indents. The rendered output loses indentation because of the CSS specificity of QuillJS. The way it handles indentation is by adding classes like <li class="ql-indent-1">blah</li> where the style looks like:

...
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
...

Of course, adding .ql-editor to the wrapping element fixes this but then you have to deal with styles of .ql-editor:

.ql-editor {
  box-sizing: border-box;
  cursor: text;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

[jziggas]

I'm working around this issue with more specific CSS specificity by doing something like:

<span ng-bind-html="myContent" class="rendered-quill-content ql-editor"></span>

.rendered-quill-content.ql-editor {
    box-sizing: initial;
    cursor: initial;
    line-height: initial;
    height: initial;
    outline: initial;
    overflow-y: initial;
    padding: initial;
    tab-size: initial;
    -moz-tab-size: initial;
    text-align: initial;
    white-space: initial;
    word-wrap: initial;
}

Since this is definitely Angular+QuillJS related but maybe not necessarily ng-quill related directly, it might be worth at least mentioning this inconvenience in the readme if no other enhancement to ng-quill is made.

[KillerCodeMonkey]

the default approach is to add .ql-editor as class, because that is what you want to achieve with a wysiwyg or rich-text editor. The user should see how it will look like on the page later. So with the class .ql-editor you get correct layout.

This is not even an Angular + QuillJS issue. It is a Quill issue at least. But i think this is the wanted behavior of a rich-text editor ;).

Thanks for the other workarounds ;)

[jziggas]

the default approach is to add .ql-editor as class, because that is what you want to achieve with a wysiwyg or rich-text editor

No no, this class is needed just to see the rendered content. Not just to view it from within the editor.

The user should see how it will look like on the page later.

No the user will not correctly see how it looks on a page later, outside of an editor, unless you add the ql-editor class to <span ng-bind-html="content" class="ql-editor"></span>

I don't think that's expected behavior because you're relying on third party CSS styles outside of using the third party component. Does that make sense?

[KillerCodeMonkey]

so like i said. If you are using a rich-text, wysiwyg editor you should present the user the text, like it is visible on the page later... so the name wysiwyg = what you see is what you get ^^.

I worked at several companies which are using different kinds of wysiwyg editors... and everywhere the same - customers are complaining about... "meeeehh, the text does not look like i want it to. There is another list-dot, mehhh mehh" ^^.

And i think you will rely on thirdparty css because you are do it, because you are using this editor. And if the thirdparty compnent is well written --> it will not have any side effects on you page in general. So i would use the quilljs css in first place.

If you really want to change/customize the styling, like changing colors, indentions, fonts you have to do it everytime on your own.

So nothing special here

[jziggas]

But what you see in the editor is one thing and what you get outside the editor is another thing unless you do this one special thing. There is no documentation about rendering the content outside the editor so this is more like a side effect or a gotcha than anything else.

The third party stylesheet can already be included in an app but if you are not aware of this special case then nothing will work the way you expect until you figure it out through trial and error, and that's a bad experience!

We can agree to disagree here. If just one person comes across this issue and saves a headache reading this then I've done my job :)

[KillerCodeMonkey]

hehe, thank you for clearing this out for others wondering about it :).

[jziggas]

For reference, same problem being discussed in Quill Issue #979.

[chubbard]

I happen to agree with @jziggas here. If I try and take the content from the quill editor and put it into another element outside of the editor the styling isn't maintained. If I add the ql-editor class it shows the content, but I have to accept the ql-editor styles which blow out the element's height and it doesn't work correctly. I feel like this IS a real problem, and something should be added either to quilljs or ng-quill to fix it. Also some of the styles are stripped by angular like style="color: rgb(1,0,0)".