From 7e7888abd613f0f447b5d072a443a783b2089981 Mon Sep 17 00:00:00 2001 From: trendschau Date: Thu, 12 Sep 2024 15:57:26 +0200 Subject: [PATCH] V2.9.0 cleanup events in blox editor, fix unsafedcontent, add blox config renderer for plugins --- content/00-getting-started/index.yaml | 2 +- system/typemill/Assets.php | 144 +++++++---- system/typemill/Plugin.php | 10 + .../typemill/author/content/blox-editor.twig | 3 + system/typemill/author/js/vue-blox.js | 236 ++++++++++-------- system/typemill/author/js/vue-meta.js | 4 +- system/typemill/author/js/vue-posts.js | 14 +- system/typemill/author/js/vue-raw.js | 22 +- .../author/layouts/layoutContent.twig | 2 +- 9 files changed, 259 insertions(+), 178 deletions(-) diff --git a/content/00-getting-started/index.yaml b/content/00-getting-started/index.yaml index 8e1b6b4..d8898ce 100644 --- a/content/00-getting-started/index.yaml +++ b/content/00-getting-started/index.yaml @@ -7,7 +7,7 @@ meta: modified: '2024-05-17' created: '2024-04-25' time: 13-16-58 - hide: true + hide: false noindex: false contains: pages template: '' diff --git a/system/typemill/Assets.php b/system/typemill/Assets.php index 2421f44..d6a7f2b 100644 --- a/system/typemill/Assets.php +++ b/system/typemill/Assets.php @@ -11,19 +11,23 @@ class Assets { public $baseUrl; - public $JS; - public $CSS; - public $inlineJS; - public $inlineCSS; - public $editorJS; + public $JS; - public $editorCSS; + public $inlineJS; - public $editorInlineJS; + public $bloxConfigJS; + + public $bloxConfigInlineJS; + + public $editorJS; # deprecated + + public $editorCSS; # deprecated + + public $editorInlineJS; # deprecated public $svgSymbols; @@ -35,18 +39,20 @@ class Assets public function __construct($baseUrl) { - $this->baseUrl = $baseUrl; - $this->JS = array(); - $this->CSS = array(); - $this->inlineJS = array(); - $this->inlineCSS = array(); - $this->editorJS = array(); - $this->editorCSS = array(); - $this->editorInlineJS = array(); - $this->svgSymbols = array(); - $this->meta = array(); - $this->imageUrl = false; - $this->imageFolder = 'originalFolder'; + $this->baseUrl = $baseUrl; + $this->CSS = array(); + $this->inlineCSS = array(); + $this->JS = array(); + $this->inlineJS = array(); + $this->bloxConfigJS = array(); + $this->bloxConfigInlineJS = array(); + $this->editorJS = array(); # deprecated + $this->editorCSS = array(); # deprecated + $this->editorInlineJS = array(); # deprecated + $this->svgSymbols = array(); + $this->meta = array(); + $this->imageUrl = false; + $this->imageFolder = 'originalFolder'; } public function setUri($uri) @@ -89,6 +95,21 @@ class Assets $this->inlineJS[] = ''; } + public function addBloxConfigJS($JS) + { + $JSfile = $this->getFileUrl($JS); + + if($JSfile) + { + $this->bloxConfigJS[] = ''; + } + } + + public function addBloxConfigInlineJS($JS) + { + $this->bloxConfigInlineJS[] = ''; + } + public function activateVue() { $vueUrl = ''; @@ -125,42 +146,6 @@ class Assets $this->svgSymbols[] = $symbol; } - # add JS to enhance the blox-editor in author area - public function addEditorJS($JS) - { - $JSfile = $this->getFileUrl($JS); - - if($JSfile) - { - $this->editorJS[] = ''; - } - } - - public function addEditorInlineJS($JS) - { - $this->editorInlineJS[] = ''; - } - - public function addEditorCSS($CSS) - { - $CSSfile = $this->getFileUrl($CSS); - - if($CSSfile) - { - $this->editorCSS[] = ''; - } - } - - public function renderEditorJS() - { - return implode("\n", $this->editorJS) . implode("\n", $this->editorInlineJS); - } - - public function renderEditorCSS() - { - return implode("\n", $this->editorCSS); - } - public function renderCSS() { return implode("\n", $this->CSS) . implode("\n", $this->inlineCSS); @@ -171,6 +156,11 @@ class Assets return implode("\n", $this->JS) . implode("\n", $this->inlineJS); } + public function renderBloxConfigJS() + { + return implode("\n", $this->bloxConfigJS) . implode("\n", $this->bloxConfigInlineJS); + } + public function renderSvg() { return implode('', $this->svgSymbols); @@ -254,4 +244,48 @@ class Assets return $absImageUrl; } + + /****************** + * DEPRECATED * + * ****************/ + + # deprecated, not in use + public function addEditorJS($JS) + { + $JSfile = $this->getFileUrl($JS); + + if($JSfile) + { + $this->editorJS[] = ''; + } + } + + # deprecated, not in use + public function addEditorInlineJS($JS) + { + $this->editorInlineJS[] = ''; + } + + # deprecated, not in use + public function addEditorCSS($CSS) + { + $CSSfile = $this->getFileUrl($CSS); + + if($CSSfile) + { + $this->editorCSS[] = ''; + } + } + + # deprecated, not in use + public function renderEditorJS() + { + return implode("\n", $this->editorJS) . implode("\n", $this->editorInlineJS); + } + + # deprecated, not in use + public function renderEditorCSS() + { + return implode("\n", $this->editorCSS); + } } \ No newline at end of file diff --git a/system/typemill/Plugin.php b/system/typemill/Plugin.php index 018e3da..49cff29 100644 --- a/system/typemill/Plugin.php +++ b/system/typemill/Plugin.php @@ -211,6 +211,16 @@ abstract class Plugin implements EventSubscriberInterface $this->container->get('assets')->addInlineJS($JS); } + protected function addBloxConfigJS($JS) + { + $this->container->get('assets')->addBloxConfigJS($JS); + } + + protected function addBloxConfigInlineJS($JS) + { + $this->container->get('assets')->addBloxConfigInlineJS($JS); + } + protected function addSvgSymbol($symbol) { $this->container->get('assets')->addSvgSymbol($symbol); diff --git a/system/typemill/author/content/blox-editor.twig b/system/typemill/author/content/blox-editor.twig index 305164e..8aeb116 100644 --- a/system/typemill/author/content/blox-editor.twig +++ b/system/typemill/author/content/blox-editor.twig @@ -38,6 +38,9 @@ {% block javascript %} + + {{ assets.renderBloxConfigJS()|raw }} + diff --git a/system/typemill/author/js/vue-blox.js b/system/typemill/author/js/vue-blox.js index 433c7dc..d516e11 100644 --- a/system/typemill/author/js/vue-blox.js +++ b/system/typemill/author/js/vue-blox.js @@ -1,5 +1,5 @@ const bloxeditor = Vue.createApp({ - template: `
+ template: `
{ + eventBus.$on('content', (content) => { this.content = content; }); + eventBus.$on('showEditor', (value) => { + this.editorVisible = value; + }); + eventBus.$on('disableDrag', (value) => { + this.dragDisabled = value; + }); }, methods: { - showEditor() - { - this.showblox = true; - }, - hideEditor() - { - this.showblox = false; - }, checkMove(event) { if(event.draggedContext.index == 0 || event.draggedContext.futureIndex == 0) @@ -84,6 +78,9 @@ const bloxeditor = Vue.createApp({ { eventBus.$emit('item', response.data.item); } + this.$nextTick(function () { + eventBus.$emit('renderblox'); + }); }) .catch(function (error) { @@ -97,14 +94,6 @@ const bloxeditor = Vue.createApp({ } }); }, - freezeOn() - { - this.freeze = true; - }, - freezeOff() - { - this.freeze = false; - }, }, }) @@ -117,16 +106,32 @@ bloxeditor.component('content-block', {

Choose a content type

- +
-
+
@@ -134,10 +139,26 @@ bloxeditor.component('content-block', {
- +
- - + +
@@ -145,16 +166,16 @@ bloxeditor.component('content-block', { `, data: function () { return { - edit: false, - disabled: false, - componentType: false, - updatedmarkdown: false, - preview: false, - edit: false, - newblock: false, - formats: bloxFormats, - load: false, - unsafedcontent: false, + edit: false, + disabled: false, + newblock: false, + load: false, + + componentType: false, + updatedmarkdown: false, + formats: bloxFormats, + hasUnsafedContent: false, + countUpdates: 0 } }, mounted: function() @@ -163,74 +184,83 @@ bloxeditor.component('content-block', { eventBus.$on('closeComponents', this.closeEditor); - eventBus.$on('inlineFormat', content => { + eventBus.$on('inlineFormat', (content) => { this.updatedmarkdown = content; }); - eventBus.$on('lockcontent', content => { - this.unsafedcontent = true; - }); - - eventBus.$on('unlockcontent', content => { - this.unsafedcontent = false; + eventBus.$on('unsafedContent', (value) => { + this.hasUnsafedContent = value; }); }, methods: { openNewBlock() { - if(this.unsafedcontent) + if(this.hasUnsafedContent) { eventBus.$emit('publishermessage', 'Save or cancel your changes first.'); } else { - eventBus.$emit('closeComponents'); - eventBus.$emit('freeze'); + this.newblock = true; + this.edit = false; - this.newblock = true; - this.edit = false; + eventBus.$emit('closeComponents'); + eventBus.$emit('disableDrag', true); } }, closeNewBlock() { - eventBus.$emit('unlockcontent'); - eventBus.$emit('unfreeze'); - eventBus.$emit('publisherclear'); - - this.newblock = false; - }, - closeEditor() - { - eventBus.$emit('unlockcontent'); - eventBus.$emit('closeEditor'); - eventBus.$emit('unfreeze'); - eventBus.$emit('publisherclear'); - - this.edit = false; + this.newblock = false; this.newblock = false; this.componentType = false; this.updatedmarkdown = false; + + eventBus.$emit('publisherclear'); + eventBus.$emit('unsafedContent', false); + eventBus.$emit('disableDrag', false); + + this.$nextTick(function () { + eventBus.$emit('renderblox'); + }); + }, + closeEditor() + { + if(this.edit) + { + this.edit = false; + this.newblock = false; + this.componentType = false; + this.updatedmarkdown = false; + + eventBus.$emit('publisherclear'); + eventBus.$emit('unsafedContent', false); + eventBus.$emit('disableDrag', false); + + this.$nextTick(function () { + eventBus.$emit('renderblox'); + }); + } }, showEditor() { - if(this.unsafedcontent) + if(this.hasUnsafedContent) { eventBus.$emit('publishermessage', 'Save or cancel your changes first.'); } else { eventBus.$emit('closeComponents'); - eventBus.$emit('freeze'); + eventBus.$emit('disableDrag', true); - this.edit = true; - - this.componentType = this.determineBlockType(); - - this.updatedmarkdown = this.element.markdown; + this.edit = true; + this.componentType = this.determineBlockType(); + this.updatedmarkdown = this.element.markdown; } }, determineBlockType() { + this.countUpdates = 0; + if(this.index == 0) { return 'title-component'; @@ -254,20 +284,25 @@ bloxeditor.component('content-block', { }, updateMarkdownFunction(value) { - eventBus.$emit('lockcontent'); this.updatedmarkdown = value; + + if(this.countUpdates > 0) + { + eventBus.$emit('unsafedContent', true); + } + + this.countUpdates++; }, disableSort() { - console.info("we have to disable sort function"); + eventBus.$emit('disableDrag', true); }, deleteBlock() { eventBus.$emit('closeComponents'); - this.load = true; - - var self = this; + this.load = true; + var self = this; eventBus.$emit('publisherclear'); @@ -279,7 +314,7 @@ bloxeditor.component('content-block', { }) .then(function (response) { - eventBus.$emit('unlockcontent'); + eventBus.$emit('unsafedContent', false); self.load = false; self.$root.$data.content = response.data.content; if(response.data.navigation) @@ -329,9 +364,9 @@ bloxeditor.component('content-block', { return; } - var self = this; - - this.load = true; + var self = this; + this.load = true; + eventBus.$emit('publisherclear'); tmaxios.put('/api/v1/block',{ @@ -341,7 +376,7 @@ bloxeditor.component('content-block', { }) .then(function (response) { - eventBus.$emit('unlockcontent'); + eventBus.$emit('unsafedContent', false); self.load = false; self.$root.$data.content = response.data.content; if(response.data.navigation) @@ -397,7 +432,7 @@ bloxeditor.component('new-block',{ componentType: false, disabled: false, newblockmarkdown: '', - unsafedcontent: false, + hasUnsafedContent: false, } }, mounted: function() @@ -408,18 +443,14 @@ bloxeditor.component('new-block',{ this.newblockmarkdown = content; }); - eventBus.$on('lockcontent', content => { - this.unsafedcontent = true; - }); - - eventBus.$on('unlockcontent', content => { - this.unsafedcontent = false; + eventBus.$on('unsafedContent', (value) => { + this.hasUnsafedContent = value; }); }, methods: { setComponentType(event, componenttype) { - if(this.unsafedcontent) + if(this.hasUnsafedContent) { eventBus.$emit('publishermessage', 'Save or cancel your changes first.'); } @@ -431,21 +462,28 @@ bloxeditor.component('new-block',{ eventBus.$emit('closeComponents'); } - eventBus.$emit('freezeblocks'); + eventBus.$emit('disableDrag', true); this.componentType = componenttype; } }, closeComponent() { - this.componentType = false; - this.newblockmarkdown = ''; - eventBus.$emit('unlockcontent'); + this.componentType = false; + this.newblockmarkdown = ''; + eventBus.$emit('publisherclear'); + eventBus.$emit('unsafedContent', false); + eventBus.$emit('disableDrag', false); + + this.$nextTick(function () { + eventBus.$emit('renderblox', 0); + }); + }, updateMarkdownFunction(value) { - eventBus.$emit('lockcontent'); + eventBus.$emit('unsafedContent', true); this.newblockmarkdown = value; }, beforeSaveNew() @@ -480,9 +518,11 @@ bloxeditor.component('new-block',{ }) .then(function (response) { + eventBus.$emit('unsafedContent', false); self.$root.$data.content = response.data.content; self.closeComponent(); eventBus.$emit('closeComponents'); + if(response.data.navigation) { eventBus.$emit('navigation', response.data.navigation); diff --git a/system/typemill/author/js/vue-meta.js b/system/typemill/author/js/vue-meta.js index 4caa1ce..d4a25da 100644 --- a/system/typemill/author/js/vue-meta.js +++ b/system/typemill/author/js/vue-meta.js @@ -45,11 +45,11 @@ const app = Vue.createApp({ { if(this.currentTab == 'Content') { - eventBus.$emit("showEditor"); + eventBus.$emit("showEditor", true); } else { - eventBus.$emit("hideEditor"); + eventBus.$emit("showEditor", false); return 'tab-' + this.currentTab.toLowerCase() } } diff --git a/system/typemill/author/js/vue-posts.js b/system/typemill/author/js/vue-posts.js index ed80b72..536d791 100644 --- a/system/typemill/author/js/vue-posts.js +++ b/system/typemill/author/js/vue-posts.js @@ -44,8 +44,10 @@ const posts = Vue.createApp({ } }, mounted() { - eventBus.$on('showEditor', this.showPostlist ); - eventBus.$on('hideEditor', this.hidePostlist ); + /* fix this */ + eventBus.$on('showEditor', (value) => { + this.active = value; + }); eventBus.$on('item', item => { this.item = item; }); @@ -66,14 +68,6 @@ const posts = Vue.createApp({ } }, methods: { - showPostlist() - { - this.active = true; - }, - hidePostlist() - { - this.active = false; - }, createPost(evt) { eventBus.$emit('publisherclear'); diff --git a/system/typemill/author/js/vue-raw.js b/system/typemill/author/js/vue-raw.js index fe042ec..f92b244 100644 --- a/system/typemill/author/js/vue-raw.js +++ b/system/typemill/author/js/vue-raw.js @@ -48,25 +48,25 @@ const raweditor = Vue.createApp({ eventBus.$on('savedraft', this.saveDraft); eventBus.$on('publishdraft', this.publishDraft); - eventBus.$on('showEditor', this.showEditor ); - eventBus.$on('hideEditor', this.hideEditor ); + eventBus.$on('showEditor', (value) => { + this.showEditor(value); + }); eventBus.$on('content', content => { this.initializeContent(content); }); }, methods: { - showEditor() + showEditor(value) { - this.showraw = true; - this.$nextTick(() => { - this.resizeCodearea(); - }) + this.showraw = value; + if(value) + { + this.$nextTick(() => { + this.resizeCodearea(); + }) + } }, - hideEditor() - { - this.showraw = false; - }, initializeContent(contentArray) { let markdown = ''; diff --git a/system/typemill/author/layouts/layoutContent.twig b/system/typemill/author/layouts/layoutContent.twig index e0dc9bc..2cdd3a1 100644 --- a/system/typemill/author/layouts/layoutContent.twig +++ b/system/typemill/author/layouts/layoutContent.twig @@ -79,7 +79,7 @@ {% block javascript %}{% endblock %} - {{ assets.renderJS()|raw }} + {{ assets.renderJS()|raw }} \ No newline at end of file