Ind.ie is now Small Technology Foundation.
Commit 9b24abcb authored by Aral Balkan's avatar Aral Balkan

Add vue-quill-editor to compose panel

parent 305dc056
......@@ -22,7 +22,7 @@ module.exports = {
plugins: [
'~plugins/buefy',
'~plugins/sweet-modal'
'~plugins/vue-quill-editor'
],
axios: {
......
......@@ -2762,6 +2762,11 @@
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
},
"deep-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
"integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
},
"deep-extend": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
......@@ -4022,6 +4027,11 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
"integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8="
},
"fast-diff": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
},
"fast-json-stable-stringify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
......@@ -8032,6 +8042,11 @@
"no-case": "2.3.2"
}
},
"parchment": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.3.tgz",
"integrity": "sha512-41Y+F8FejGa+URCuDTlS1zzzlYCwoZFTWpVwiQWDL82LFAAlIIiAo3JGJSLMiSPDeM3avFUivdXN3iY/i4mBXg=="
},
"parse-asn1": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz",
......@@ -10831,6 +10846,36 @@
"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
},
"quill": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.5.tgz",
"integrity": "sha512-08P1DqKz4OZPJSlwSiZQxQ1a0F56+KEz6MttlpDNE42+WpjGuOyvsEQepScpdeyilHWrQwh61M5C1KelP8I8IA==",
"requires": {
"clone": "2.1.1",
"deep-equal": "1.0.1",
"eventemitter3": "2.0.3",
"extend": "3.0.1",
"parchment": "1.1.3",
"quill-delta": "3.6.2"
},
"dependencies": {
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
}
}
},
"quill-delta": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.2.tgz",
"integrity": "sha512-grWEQq9woEidPDogtDNxQKmy2LFf9zBC0EU/YTSw6TwKmMjtihTxdnPtPRfrqazB2MSJ7YdCWxmsJ7aQKRSEgg==",
"requires": {
"deep-equal": "1.0.1",
"extend": "3.0.1",
"fast-diff": "1.1.2"
}
},
"radix-router": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/radix-router/-/radix-router-3.0.1.tgz",
......@@ -13530,6 +13575,15 @@
"object-assign": "4.1.1"
}
},
"vue-quill-editor": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.5.tgz",
"integrity": "sha512-aPQkzcmL96U27YKDehqh54qgNbmf2PORuIH2NCSCQgoGuqZ1iAkLwMOfNRFbd3U8Ag8anuzLAiFbC1BFXr9xEg==",
"requires": {
"object-assign": "4.1.1",
"quill": "1.3.5"
}
},
"vue-router": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
......
......@@ -127,7 +127,15 @@
<b-tabs position="is-centered" class="block card-content">
<b-tab-item label="Text">
<section>
<textarea placeholder='What’s on your mind?' class='composeText' style='width: 100%; height: 20vmax;'></textarea>
<!-- Vue Quill Editor -->
<!-- Being added as a div due to SSR requirement
(see https://github.com/surmon-china/vue-quill-editor#ssr) -->
<div
class='quill-editor'
v-model='content'
v-quill:myQuillEditor='editorOption'
>
</div>
<button ref="postButton" @click="closeComposePanel" class='button is-medium is-primary'>Post</button>
</section>
</b-tab-item>
......@@ -168,11 +176,25 @@ export default {
'Aral Balkan (@aral@mastodon.ar.al)'
],
searchTerm: '',
selectedMockSearchResult: null
selectedMockSearchResult: null,
editorContent: '<em>What’s on your mind?</em>',
editorOption: {
placeholder: 'What’s on your mind?',
theme: 'snow',
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['image', 'blockquote', 'code-block']
]
}
}
}
},
mounted () {
console.log(`Index component mounted. Quill instance is: ${this.myQuillEditor}`)
},
methods: {
openComposePanel: function (event) {
this.isComposePanelModalActive = true
......@@ -305,13 +327,14 @@ header {
right: 2vmax;
}
.composeText {
font-size: 2vmax;
}
.button.is-medium {
font-size: 2vmax;
font-size: 1.5vmax;
float: right;
}
.quill-editor {
height: 30vh;
margin-bottom: 1vh;
}
</style>
import Vue from 'vue'
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'
const SweetModalPlugin = {
install (Vue, options) {
Vue.component('SweetModal', SweetModal)
Vue.component('SweetModalTab', SweetModalTab)
}
}
Vue.use(SweetModalPlugin)
import Vue from 'vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/dist/ssr')
Vue.use(VueQuillEditor)
}
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