Verified Commit 62a7d55c authored by Aral Balkan's avatar Aral Balkan

Text composer: clear & post buttons only enabled if there’s content

parent 97d3be92
......@@ -9,8 +9,8 @@
<div class='compose-tools buttons'>
<button @click='editorContent=""' ref='clearButton' class='button'>Clear</button>
<button ref='postButton' class='button is-primary' @click='post'>Post</button>
<button @click='editorContent=""' ref='clearButton' class='button' :disabled='!editorHasContentToSubmit'>Clear</button>
<button ref='postButton' class='button is-primary' @click='post' :disabled='!editorHasContentToSubmit'>Post</button>
......@@ -29,6 +29,7 @@ export default {
data () {
return {
editorContent: this.content || '<p><br></p>',
editorHasContentToSubmit: false,
editorOption: {
placeholder: 'What’s on your mind?',
theme: 'snow',
......@@ -53,8 +54,24 @@ export default {
editorChange ( { quill, html, text } ) {
this.$emit('composerChange', quill, html, text)
// The composer has content to post if:
// 1. There is text content that’s not whitespace (we don’t allow posts
// that only have HTML tags or whitespace), OR
// 2. There is an image in the post (a post with just an image is valid).
// (We will most likely have to expand this list in the future.)
const textContentWithoutWhitespace = text.replace(/\s/g,'')
const htmlHasImage = html.indexOf('<img') !== -1
this.editorHasContentToSubmit = textContentWithoutWhitespace !== '' || htmlHasImage
// The HTML should never be an empty string (which can happen if you select all the text in the editor and delete it or if you press the “Clear” button). Quill doesn’t handle this well (the caret gets put above and to the left of the editor and the generated HTML is corrupted). To avoid this, we’re setting it to the basic template Quill expects for an empty editor.
if (html == '') { this.editorContent = '<p><br></p>'}
if (html === '') {
this.editorContent = '<p><br></p>'
post () {
this.$emit('post', this.editorContent)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment