fix: uniform client features enablement

packages/client/composables/useDragElements.ts

@@ -7,6 +7,7 @@ import { injectionCurrentPage, injectionFrontmatter, injectionRenderContext, inj
 import { makeId } from '../logic/utils'
 import { activeDragElement } from '../state'
 import { directiveInject } from '../utils'
+import { isTrusted } from '../env'
 import { useSlideBounds } from './useSlideBounds'
 import { useDynamicSlideInfo } from './useSlideInfo'
 
@@ -21,7 +22,7 @@ export type DragElementsUpdater = (id: string, posStr: string, type: DragElement
 const map: Record<number, DragElementsUpdater> = {}
 
 export function useDragElementsUpdater(no: number) {
-  if (!(__DEV__ && __SLIDEV_FEATURE_EDITOR__))
+  if (!(__SLIDEV_FEATURE_EDITOR__ && isTrusted.value))
     return () => {}
 
   if (map[no])

packages/client/composables/useFeatures.ts

@@ -0,0 +1,20 @@
+import { createSharedComposable } from '@vueuse/core'
+import { computed, reactive } from 'vue'
+import { configs, isTrusted } from '../env'
+import { useNav } from './useNav'
+
+export const useFeatures = createSharedComposable(() => {
+  const { isPresenter, isEmbedded } = useNav()
+
+  const showDrawings = computed(() => __SLIDEV_FEATURE_DRAWINGS__ && !isEmbedded.value && isTrusted.value)
+  const allowToDraw = computed(() => __SLIDEV_FEATURE_DRAWINGS__ && !isEmbedded.value && isTrusted.value && (!configs.drawings.presenterOnly || isPresenter.value))
+  const allowToEdit = computed(() => __SLIDEV_FEATURE_EDITOR__ && isTrusted.value)
+  const enterPresenter = computed(() => __SLIDEV_FEATURE_PRESENTER__ && !isPresenter.value && isTrusted.value)
+
+  return reactive({
+    showDrawings,
+    allowToDraw,
+    allowToEdit,
+    enterPresenter,
+  })
+})

packages/client/composables/useNav.ts

@@ -10,7 +10,6 @@ import { getCurrentTransition } from '../logic/transition'
 import { getSlide, getSlidePath } from '../logic/slides'
 import { CLICKS_MAX } from '../constants'
 import { skipTransition } from '../logic/hmr'
-import { configs } from '../env'
 import { useRouteQuery } from '../logic/route'
 import { useTocTree } from './useTocTree'
 import { createClicksContextBase } from './useClicks'
@@ -76,7 +75,6 @@ export interface SlidevContextNavState {
   isPlaying: ComputedRef<boolean>
   isPresenter: ComputedRef<boolean>
   isNotesViewer: ComputedRef<boolean>
-  isPresenterAvailable: ComputedRef<boolean>
   hasPrimarySlide: ComputedRef<boolean>
   currentSlideNo: ComputedRef<number>
   currentSlideRoute: ComputedRef<SlideRoute>
@@ -285,7 +283,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   const isPlaying = computed(() => currentRoute.value.name === 'play')
   const isPresenter = computed(() => currentRoute.value.name === 'presenter')
   const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
-  const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || query.value.get('password') === configs.remote))
   const hasPrimarySlide = logicOr(isPlaying, isPresenter)
 
   const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
@@ -355,7 +352,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     isPlaying,
     isPresenter,
     isNotesViewer,
-    isPresenterAvailable,
     hasPrimarySlide,
     currentSlideNo,
     currentSlideRoute,

packages/client/env.ts

@@ -1,11 +1,10 @@
 import { computed, ref } from 'vue'
 import { objectMap } from '@antfu/utils'
+import { useRouteQuery } from './logic/route'
 import configs from '#slidev/configs'
 
 export { configs }
 
-export const mode = __DEV__ ? 'dev' : 'build'
-
 export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
 export const slideWidth = ref(configs.canvasWidth ?? 980)
 
@@ -20,3 +19,6 @@ export const themeVars = computed(() => {
 export const slidesTitle = configs.slidesTitle
 
 export const pathPrefix = import.meta.env.BASE_URL + (__SLIDEV_HASH_ROUTE__ ? '#/' : '')
+
+const password = useRouteQuery<string>('password')
+export const isTrusted = computed(() => !configs.remote || password.value === configs.remote)

packages/client/internals/Controls.vue

@@ -2,16 +2,16 @@
 import { shallowRef } from 'vue'
 import { showInfoDialog, showRecordingDialog } from '../state'
 import { configs } from '../env'
-import { useNav } from '../composables/useNav'
+import { useFeatures } from '../composables/useFeatures'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 import ContextMenu from './ContextMenu.vue'
 
-const { isEmbedded } = useNav()
-const drawingEnabled = __SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded.value
+const features = useFeatures()
+
 const DrawingControls = shallowRef<any>()
-if (drawingEnabled)
+if (__SLIDEV_FEATURE_DRAWINGS__ && features.allowToDraw)
   import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 
 const WebCamera = shallowRef<any>()
@@ -23,7 +23,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <DrawingControls v-if="drawingEnabled && DrawingControls" />
+  <DrawingControls v-if="DrawingControls" />
   <QuickOverview />
   <Goto />
   <WebCamera v-if="WebCamera" />

packages/client/internals/NavControls.vue

@@ -6,6 +6,7 @@ import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, sh
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useFeatures } from '../composables/useFeatures'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
@@ -25,7 +26,6 @@ const {
   hasPrev,
   isEmbedded,
   isPresenter,
-  isPresenterAvailable,
   next,
   prev,
   total,
@@ -36,6 +36,7 @@ const {
   brush,
   drawingEnabled,
 } = useDrawings()
+const features = useFeatures()
 
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
@@ -102,7 +103,7 @@ if (__SLIDEV_FEATURE_RECORD__)
         </IconButton>
       </template>
 
-      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
+      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && features.allowToDraw">
         <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
@@ -118,12 +119,12 @@ if (__SLIDEV_FEATURE_RECORD__)
         <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
           <carbon:presentation-file />
         </IconButton>
-        <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
+        <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && features.enterPresenter" title="Presenter Mode" @click="enterPresenter">
           <carbon:user-speaker />
         </IconButton>
 
         <IconButton
-          v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
+          v-if="__SLIDEV_FEATURE_EDITOR__ && features.allowToEdit"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
           class="lt-md:hidden"
           @click="showEditor = !showEditor"

packages/client/internals/PrintSlideClick.vue

@@ -44,15 +44,7 @@ provideLocal(injectionSlidevContext, reactive({
       :class="getSlideClass(route)"
       :route="route"
     />
-    <template
-      v-if="
-        (__SLIDEV_FEATURE_DRAWINGS__
-          || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-          && DrawingPreview
-      "
-    >
-      <DrawingPreview :page="route.no" />
-    </template>
+    <DrawingPreview v-if="DrawingPreview" :page="route.no" />
 
     <GlobalTop />
   </div>

packages/client/internals/SlidesShow.vue

@@ -82,9 +82,7 @@ function onAfterLeave() {
   <!-- Global Top -->
   <GlobalTop />
 
-  <template v-if="(__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__) && DrawingLayer">
-    <DrawingLayer />
-  </template>
+  <DrawingLayer v-if="DrawingLayer" />
 </template>
 
 <style scoped>

packages/client/logic/contextMenu.ts

@@ -2,7 +2,6 @@ import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
 import { shallowRef } from 'vue'
 import setupContextMenu from '../setup/context-menu'
-import { configs, mode } from '../env'
 import { useNav } from '../composables/useNav'
 
 export const currentContextMenu = shallowRef<null | {
@@ -24,8 +23,9 @@ export function closeContextMenu() {
 }
 
 export function onContextMenu(ev: MouseEvent) {
-  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+  if (!__SLIDEV_FEATURE_CONTEXT_MENU__)
     return
+
   if (ev.shiftKey || ev.defaultPrevented)
     return
 

packages/client/pages/play.vue

@@ -11,10 +11,12 @@ import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useFeatures } from '../composables/useFeatures'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
+const features = useFeatures()
 
 const root = ref<HTMLDivElement>()
 function onClick(e: MouseEvent) {
@@ -36,7 +38,7 @@ registerShortcuts()
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()
-if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
+if (__SLIDEV_FEATURE_EDITOR__ && features.allowToEdit)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 </script>
 

packages/client/pages/presenter.vue

@@ -18,12 +18,12 @@ import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import Goto from '../internals/Goto.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
-import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useFeatures } from '../composables/useFeatures'
 
 const main = ref<HTMLDivElement>()
 
@@ -42,6 +42,7 @@ const {
   total,
 } = useNav()
 const { isDrawing } = useDrawings()
+const features = useFeatures()
 
 useHead({ title: `Presenter - ${slidesTitle}` })
 
@@ -73,9 +74,13 @@ watch(
 )
 
 const SideEditor = shallowRef<any>()
-if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
+if (__SLIDEV_FEATURE_EDITOR__ && features.allowToEdit)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
+const DrawingControls = shallowRef<any>()
+if (__SLIDEV_FEATURE_DRAWINGS__ && features.allowToDraw)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
+
 // sync presenter cursor
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
@@ -189,7 +194,7 @@ onMounted(() => {
           {{ timer }}
         </div>
       </div>
-      <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
+      <DrawingControls v-if="DrawingControls" />
     </div>
     <div class="progress-bar">
       <div

packages/client/setup/context-menu.ts

@@ -5,6 +5,7 @@ import type { ContextMenuItem } from '@slidev/types'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 import { fullscreen, showEditor, toggleOverview } from '../state'
+import { useFeatures } from '../composables/useFeatures'
 import setups from '#slidev/setups/context-menu'
 
 import IconArrowLeft from '~icons/carbon/arrow-left'
@@ -37,10 +38,9 @@ export default () => {
     isPresenter,
     enterPresenter,
     exitPresenter,
-    isEmbedded,
-    isPresenterAvailable,
   } = useNav()
   const { drawingEnabled } = useDrawings()
+  const features = useFeatures()
   const {
     isFullscreen,
     toggle: toggleFullscreen,
@@ -78,12 +78,12 @@ export default () => {
         disabled: currentPage.value >= total.value,
       },
       'separator',
-      {
+      __SLIDEV_FEATURE_EDITOR__ && features.allowToEdit && {
         icon: IconTextNotationToggle,
         label: showEditor.value ? 'Hide editor' : 'Show editor',
         action: () => (showEditor.value = !showEditor.value),
       },
-      {
+      __SLIDEV_FEATURE_DRAWINGS__ && (features.allowToDraw || drawingEnabled.value) && {
         icon: IconPen,
         label: drawingEnabled.value ? 'Hide drawing toolbar' : 'Show drawing toolbar',
         action: () => (drawingEnabled.value = !drawingEnabled.value),
@@ -93,17 +93,17 @@ export default () => {
         label: 'Show slide overview',
         action: toggleOverview,
       },
-      isPresenter.value && {
+      __SLIDEV_FEATURE_PRESENTER__ && isPresenter.value && {
         icon: IconPresentationFile,
         label: 'Exit Presenter Mode',
         action: exitPresenter,
       },
-      __SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable.value && {
+      __SLIDEV_FEATURE_PRESENTER__ && features.enterPresenter && {
         icon: IconUserSpeaker,
         label: 'Enter Presenter Mode',
         action: enterPresenter,
       },
-      !isEmbedded.value && {
+      {
         icon: isFullscreen.value ? IconMinimize : IconMaximize,
         label: isFullscreen.value ? 'Close fullscreen' : 'Enter fullscreen',
         action: toggleFullscreen,

packages/client/state/drawings.ts

@@ -1,7 +1,8 @@
 import serverDrawingState from 'server-reactive:drawings?diff'
+import { configs } from '../env'
 import { createSyncState } from './syncState'
 
 export type DrawingsState = Record<number, string | undefined>
 
-const { init, onPatch, patch, state } = createSyncState<DrawingsState>(serverDrawingState, {}, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+const { init, onPatch, patch, state } = createSyncState<DrawingsState>(serverDrawingState, {}, !!configs.drawings.persist)
 export { init as initDrawingState, onPatch, patch, state as drawingState }

packages/slidev/node/vite/extendConfig.ts

@@ -236,7 +236,9 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
 
 export function getDefine(options: ResolvedSlidevOptions): Record<string, string> {
   return {
+    __MODE__: JSON.stringify(options.mode),
     __DEV__: options.mode === 'dev' ? 'true' : 'false',
+    __SLIDEV_CONFIG__: JSON.stringify(options.data.config),
     __SLIDEV_CLIENT_ROOT__: JSON.stringify(toAtFS(options.clientRoot)),
     __SLIDEV_HASH_ROUTE__: JSON.stringify(options.data.config.routerMode === 'hash'),
     __SLIDEV_FEATURE_DRAWINGS__: JSON.stringify(options.data.config.drawings.enabled === true || options.data.config.drawings.enabled === options.mode),
@@ -245,6 +247,7 @@ export function getDefine(options: ResolvedSlidevOptions): Record<string, string
     __SLIDEV_FEATURE_RECORD__: JSON.stringify(options.data.config.record === true || options.data.config.record === options.mode),
     __SLIDEV_FEATURE_PRESENTER__: JSON.stringify(options.data.config.presenter === true || options.data.config.presenter === options.mode),
     __SLIDEV_FEATURE_PRINT__: JSON.stringify(options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download))),
+    __SLIDEV_FEATURE_CONTEXT_MENU__: JSON.stringify(options.data.config.contextMenu === undefined || options.data.config.contextMenu === true || options.data.config.contextMenu === options.mode),
     __SLIDEV_HAS_SERVER__: options.mode !== 'build' ? 'true' : 'false',
   }
 }