feat(fullscreen): add useWindow

examples/tiptap.ts

@@ -104,6 +104,8 @@ export const vuetifyProTipTap = createVuetifyProTipTap({
         }
       ]
     }),
-    Fullscreen
+    Fullscreen.configure({
+      useWindow: true
+    })
   ]
 })

package.json

@@ -86,6 +86,7 @@
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.throttle": "^4.1.7",
     "@vitejs/plugin-vue": "^4.3.4",
+    "@vueuse/core": "^10.4.1",
     "@yikoyu/eslint-config-prettier": "^1.3.1",
     "commitizen": "^4.3.0",
     "conventional-changelog-conventionalcommits": "^6.1.0",

src/extensions/components/FullscreenActionButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, unref } from 'vue'
+import { computed, unref, watch } from 'vue'
+import { useFullscreen } from '@vueuse/core'
 
 import { getIcon } from '@/constants/icons'
 import { useContext } from '@/hooks'
@@ -9,17 +10,27 @@ import { ButtonViewReturnComponentProps } from '@/type'
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   color: undefined,
-  isActive: undefined
+  isActive: undefined,
+  useWindow: false
 })
 const { t } = useLocale()
 const { state, toggleFullscreen } = useContext()
+const { isFullscreen, enter, exit } = useFullscreen()
 
 interface Props {
   disabled?: boolean
   color?: string
   isActive?: ButtonViewReturnComponentProps['isActive']
+  useWindow?: boolean
 }
 
+watch(isFullscreen, val => {
+  // Press esc to exit full screen
+  if (!val && state.isFullscreen && props.useWindow) {
+    onAction()
+  }
+})
+
 const text = computed(() => {
   const tooltip = state.isFullscreen ? 'editor.fullscreen.tooltip.exit' : 'editor.fullscreen.tooltip.fullscreen'
   if (!tooltip) return undefined
@@ -31,13 +42,15 @@ const icon = computed(() => {
   return getIcon(_icon)
 })
 
-function onAction() {
+function onAction(_useWindow: boolean = false) {
   toggleFullscreen()
 
   if (state.isFullscreen) {
     document.documentElement.classList.add('overflow-y-hidden')
+    _useWindow && enter()
   } else {
     document.documentElement.classList.remove('overflow-y-hidden')
+    _useWindow && exit()
   }
 }
 </script>
@@ -53,7 +66,7 @@ function onAction() {
     :class="{
       'v-btn--active': isActive?.()
     }"
-    @click="onAction"
+    @click="onAction(useWindow)"
   >
     <VIcon :icon="icon" />
 

src/extensions/fullscreen.ts

@@ -5,17 +5,21 @@ import FullscreenActionButton from './components/FullscreenActionButton.vue'
 import type { ButtonView, GeneralOptions } from '@/type'
 
 export interface FullscreenOptions extends GeneralOptions {
-  button: ButtonView
+  button: ButtonView<FullscreenOptions>
+  useWindow: boolean
 }
 
 export const Fullscreen = /* @__PURE__*/ Extension.create<FullscreenOptions>({
   name: 'fullscreen',
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }) => ({
+      useWindow: false,
+      button: ({ editor, extension, t }) => ({
         component: FullscreenActionButton,
-        componentProps: {}
+        componentProps: {
+          useWindow: extension.options.useWindow ?? false
+        }
       })
     }
   }