CODEWITHSUNDEEP
javascriptquill
gizmo
gizmo

Reputation: 201

Quill Editor - get total number of lines / dynamically set editor height

I need to get a number of lines of text entered into editor by user, because initial height of the editor is small, but after user enters some text and it wraps into a new line, I need to increase the height of the editor.

I managed to get the number only if user presses enter, because then Quill adds a new <p> tag. Otherwise, if he just types text and it breaks into a new line, I can't find a way to get the total number of text lines. Here is an example:

var quill = new Quill('#editor-container', {
  theme: 'snow'
});

quill.root.style['max-height'] = '81px';
quill.root.style['border-bottom'] = '1px solid grey';

trackHeight = () => { 
  let length = quill.getLength();
  let lines = quill.getLines(0, length);
    if (lines.length < 2) {
      quill.root.style['min-height'] = '101px';
    }
    if (lines.length > 2) {
      quill.root.style['min-height'] = '120px';
    }
    if (lines.length > 3) {
      quill.root.style['min-height'] = '140px';
    }        
    if (lines.length > 4) {
      quill.root.style['min-height'] = '160px';
    }                      
};   

quill.on('text-change', this.trackHeight);

You can just copy/paste code above into a quill playground.

Note that if you press enter, size increases, but if you just type until text wraps into a separate line, editor height remains the same, because lines.length property doesn't increase.

Any advice here?

Upvotes: 1

Views: 4537

Answers (3)

ASANIAN
ASANIAN

Reputation: 400

Just set overflow to visible and it will handle automatically.

.ql-editor {
  overflow-y: visible !important;
}

Upvotes: 0

Daniyel.Me
Daniyel.Me

Reputation: 446

You can simply do:

const numberOfLines = this.quill.getLines().length;

Upvotes: 1

gizmo
gizmo

Reputation: 201

Solution:

var quill = new Quill('#editor-container', {
  theme: 'snow'
});

quill.root.style['max-height'] = '81px';
quill.root.style['border-bottom'] = '1px solid grey';

trackHeight = () => { 
  let length = quill.getLength();
  let scrollHeight = quill.root.scrollHeight;
    quill.root.style['min-height'] = Math.min(scrollHeight, 500) + 'px';
    if(length < 50) {
      quill.root.style['min-height'] = '41px';
    }                
};   

quill.root.style['min-height'] = '41px';

quill.on('text-change', this.trackHeight);

Upvotes: 1

Related Questions