<div id="ql-comment-editor" class="ui loading inverted attached segment"></div> <div id="ql-toolbar-container" class="ui inverted attached segment"> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats"> <button class="ql-header" value="1"></button> <button class="ql-header" value="2"></button> <button class="ql-blockquote"></button> <button class="ql-code-block"></button> </span> <span class="ql-formats"> <button class="ql-list" value="ordered"></button> <button class="ql-list" value="bullet"></button> </span> <span class="ql-formats"> <button class="ql-link"></button> <button class="ql-image"></button> <button class="ql-video"></button> </span> <span class="ql-formats"> <button class="ql-clean"></button> </span> </div> <div class="ui inverted attached segment"> <button id="postBtn" class="ui blue disabled inverted button"> Type something... </button> </div> <div id='blogger_search_result' class='ui floating info message'> </div> <script type="module"> window.addEventListener('load', async () => { const postBtn = document.getElementById('postBtn'); const editor = document.getElementById('ql-comment-editor'); const editorText = document.querySelector('ql-comment-editor > div'); // setting up Quill Editor await initFunctions(['Quill']); const quill = new Quill('#ql-comment-editor', { modules: { syntax: false, toolbar: '#ql-toolbar-container' }, placeholder: 'Make it something good bruh...', theme: "snow" }); quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => { let ops = [] delta.ops.forEach(op => { if (op.insert && typeof op.insert === 'string') { ops.push({ insert: op.insert }) } }) delta.ops = ops; return delta; }) const limit = 10000; const minlimit = 100; quill.on('text-change', function (delta, old, source) { if (source == 'user') { if (quill.getLength() > limit) { quill.deleteText(limit, quill.getLength()); } else if (quill.getLength() < minlimit) { postBtn.innerText = "Type something..."; postBtn.classList.add('disabled'); } else if (quill.getLength() > minlimit && quill.getLength() < limit) { postBtn.classList.remove('disabled'); postBtn.innerText = "Post"; } } }); let editorForm = editorText; while (!editorForm) { setTimeout(() => { editorForm = editorText; }, 300); } editorForm.classList.add('ui', 'inverted', 'attached', 'segment'); document.querySelector('#ql-comment-editor').classList.remove('loading'); function getContent() { return editorText.innerHTML; } function getText() { return quill.getText(); } }, false); </script>