Browse Source

feat: live preview of custom css in editor

pull/2097/head
NGPixel 4 years ago
parent
commit
09114524ff
1 changed files with 18 additions and 1 deletions
  1. 19
      client/components/editor.vue

19
client/components/editor.vue

@ -179,6 +179,7 @@ export default {
welcomeMode() { return this.mode === `create` && this.path === `home` },
currentPageTitle: sync('page/title'),
checkoutDateActive: sync('editor/checkoutDateActive'),
currentStyling: get('page/scriptCss'),
isDirty () {
return _.some([
this.initContentParsed !== this.$store.get('editor/content'),
@ -198,6 +199,9 @@ export default {
this.dialogProps = true
}, 500)
}
},
currentStyling(newValue) {
this.injectCustomCss(newValue)
}
},
created() {
@ -524,7 +528,20 @@ export default {
tags: this.$store.get('page/tags'),
title: this.$store.get('page/title')
}
}
},
injectCustomCss: _.debounce(css => {
const oldStyl = document.querySelector('#editor-script-css')
if (oldStyl) {
document.head.removeChild(oldStyl)
}
if (!_.isEmpty(css)) {
const styl = document.createElement('style')
styl.type = 'text/css'
styl.id = 'editor-script-css'
document.head.appendChild(styl)
styl.appendChild(document.createTextNode(css))
}
}, 1000)
},
apollo: {
isConflict: {

Loading…
Cancel
Save