fix(fullscreen): 🐛 use fixed position instead fullscreen API because …

…the append-to-body element is invisble in fullscreen mode #21 (comment)

src/components/ElementTiptap.vue

@@ -2,6 +2,7 @@
   <div
     v-if="editor"
     :style="editorSizeStyle"
+    :class="{ 'el-tiptap-editor--fullscreen': isFullscreen }"
     class="el-tiptap-editor"
   >
     <menu-bubble
@@ -41,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Model, Mixins } from 'vue-property-decorator';
+import { Component, Prop, Watch, Provide, ProvideReactive, Model, Mixins } from 'vue-property-decorator';
 import { Editor, EditorContent, Extension, EditorUpdateEvent } from 'tiptap';
 import { Placeholder } from 'tiptap-extensions';
 import { EditorProps } from 'prosemirror-view';
@@ -245,6 +246,12 @@ export default class ElTiptap extends Mixins(i18nMixin) {
     this.$emit(this.genEvent(EVENTS.UPDATE), output, options);
   }
 
+  // TODO: provide to fullscreen command button, need to be optimized
+  @ProvideReactive() isFullscreen = false;
+  @Provide() toggleFullscreen () {
+    this.isFullscreen = !this.isFullscreen;
+  }
+
   private genEvent (event: EVENTS) {
     return `on${capitalize(event)}`;
   }

src/components/MenuCommands/FullscreenCommandButton.vue

@@ -1,22 +1,15 @@
 <template>
   <command-button
-    :command="toggleFullScreen"
+    :command="toggleFullscreen"
     :tooltip="buttonTooltip"
     :icon="isFullscreen ? 'compress' : 'expand'"
     :is-active="isFullscreen"
   />
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
+import { Component, Inject, InjectReactive, Mixins } from 'vue-property-decorator';
 import i18nMixin from '@/mixins/i18nMixin';
-import {
-  fullscreenStatus,
-  requestFullscreen,
-  exitFullscreen,
-  onFullScreenEvent,
-  offFullScreenEvent,
-} from '@/utils/fullscreen';
 import CommandButton from './CommandButton.vue';
 
 @Component({
@@ -25,33 +18,13 @@ import CommandButton from './CommandButton.vue';
   },
 })
 export default class FullscreenCommandButton extends Mixins(i18nMixin) {
-  isFullscreen = false;
+  @Inject() readonly toggleFullscreen!: Function;
+  @InjectReactive() readonly isFullscreen!: boolean;
 
   private get buttonTooltip () {
     return this.isFullscreen
       ? this.t('editor.extensions.Fullscreen.tooltip.exit_fullscreen')
       : this.t('editor.extensions.Fullscreen.tooltip.fullscreen');
   }
-
-  private mounted () {
-    onFullScreenEvent(this.onFullscreenChange);
-  }
-
-  private beforeDestroy () {
-    offFullScreenEvent(this.onFullscreenChange);
-  }
-
-  onFullscreenChange () {
-    this.isFullscreen = fullscreenStatus();
-  }
-
-  toggleFullScreen () {
-    if (this.isFullscreen) {
-      exitFullscreen();
-    } else {
-      const editorEl = this.$el.closest('.el-tiptap-editor');
-      if (editorEl) requestFullscreen(editorEl);
-    }
-  }
 };
 </script>

src/styles/editor.scss

@@ -10,13 +10,20 @@
   position: relative;
   width: 100%;
 
-  &:fullscreen {
-    border-radius: 0;
+  &--fullscreen {
+    border-radius: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    position: fixed !important;
+    right: 0 !important;
+    top: 0 !important;
+    margin: 0 !important;
+    z-index: 500;
 
     #{$root}__menu-bar,
     #{$root}__content,
     #{$root}__footer {
-      border-radius: 0;
+      border-radius: 0 !important;
     }
   }