diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue index 50fce6e29b6a877e6e719d2a2cc598909649bb70..64beee4c21175e7874a103627c3a63aee43c4d97 100644 --- a/app/assets/javascripts/content_editor/components/content_editor.vue +++ b/app/assets/javascripts/content_editor/components/content_editor.vue @@ -127,6 +127,7 @@ export default { focused: false, isLoading: false, latestMarkdown: null, + isShowingFullscreen: false, }; }, computed: { @@ -200,6 +201,23 @@ export default { // Add event listener for custom resize event document.addEventListener('mousedown', this.handleManualResize); + + this.zen = document.querySelector('.zen-backdrop'); + + this.observer = new MutationObserver(() => { + if (this.zen && this.zen.classList.contains('fullscreen')) { + this.isShowingFullscreen = true; + } else { + this.isShowingFullscreen = false; + } + }); + + if (this.zen) { + this.observer.observe(this.zen, { + attributes: true, + attributeFilter: ['class'], + }); + } }, beforeDestroy() { markdownEditorEventHub.$off(CONTENT_EDITOR_PASTE, this.pasteContent); @@ -328,48 +346,51 @@ export default { @keydown="$emit('keydown', $event)" /> -
- +
+ + + +
+ {{ placeholder }} +
+ + + + + + + + +
+
- - -
- {{ placeholder }} + + +
- - - - - - - - -
-
- - -
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue index da165935dcd260f5333a9e4741c6ef043f301ee0..1c0e913875a74c008252cebc23adf24c524f4871 100644 --- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue +++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue @@ -1,5 +1,5 @@