@slidev/client 0.48.9 → 0.49.0-beta.2

package/internals/DragControl.vue

@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import { clamp } from '@antfu/utils'
+import type { Pausable } from '@vueuse/core'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, inject, ref, watchEffect } from 'vue'
+import type { DragElementState } from '../composables/useDragElements'
+import { useSlideBounds } from '../composables/useSlideBounds'
+import { injectionSlideScale } from '../constants'
+import { slideHeight, slideWidth } from '../env'
+import { magicKeys } from '../state'
+
+const { data } = defineProps<{ data: DragElementState }>()
+const { id, zoom, autoHeight, x0, y0, width, height, rotate } = data
+
+const slideScale = inject(injectionSlideScale, ref(1))
+const scale = computed(() => slideScale.value * zoom.value)
+const { left: slideLeft, top: slideTop } = useSlideBounds()
+
+const ctrlSize = 10
+const minSize = 40
+const minRemain = 10
+
+const rotateRad = computed(() => rotate.value * Math.PI / 180)
+const rotateSin = computed(() => Math.sin(rotateRad.value))
+const rotateCos = computed(() => Math.cos(rotateRad.value))
+
+const boundingWidth = computed(() => width.value * rotateCos.value + height.value * rotateSin.value)
+const boundingHeight = computed(() => width.value * rotateSin.value + height.value * rotateCos.value)
+
+const boundingLeft = computed(() => x0.value - boundingWidth.value / 2)
+const boundingTop = computed(() => y0.value - boundingHeight.value / 2)
+const boundingRight = computed(() => x0.value + boundingWidth.value / 2)
+const boundingBottom = computed(() => y0.value + boundingHeight.value / 2)
+
+let currentDrag: {
+  x0: number
+  y0: number
+  width: number
+  height: number
+  rotate: number
+  dx0: number
+  dy0: number
+  ltx: number
+  lty: number
+  rtx: number
+  rty: number
+  lbx: number
+  lby: number
+  rbx: number
+  rby: number
+} | null = null
+
+function onPointerdown(ev: PointerEvent) {
+  if (ev.buttons !== 1)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+  const el = ev.target as HTMLElement
+  const elBounds = el.getBoundingClientRect()
+
+  const cross1x = width.value * rotateCos.value - height.value * rotateSin.value
+  const cross1y = width.value * rotateSin.value + height.value * rotateCos.value
+  const cross2x = width.value * rotateCos.value + height.value * rotateSin.value
+  const cross2y = -width.value * rotateSin.value + height.value * rotateCos.value
+
+  currentDrag = {
+    x0: x0.value,
+    y0: y0.value,
+    width: width.value,
+    height: height.value,
+    rotate: rotate.value,
+    dx0: ev.clientX - (elBounds.left + elBounds.right) / 2,
+    dy0: ev.clientY - (elBounds.top + elBounds.bottom) / 2,
+    ltx: x0.value - cross1x / 2,
+    lty: y0.value - cross1y / 2,
+    rtx: x0.value + cross2x / 2,
+    rty: y0.value - cross2y / 2,
+    lbx: x0.value - cross2x / 2,
+    lby: y0.value + cross2y / 2,
+    rbx: x0.value + cross1x / 2,
+    rby: y0.value + cross1y / 2,
+  };
+
+  (ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId)
+}
+
+function onPointermove(ev: PointerEvent) {
+  if (!currentDrag || ev.buttons !== 1)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+
+  const x = (ev.clientX - slideLeft.value - currentDrag.dx0) / scale.value
+  const y = (ev.clientY - slideTop.value - currentDrag.dy0) / scale.value
+
+  x0.value = clamp(x, -boundingWidth.value / 2 + minRemain, slideWidth.value + boundingWidth.value / 2 - minRemain)
+  y0.value = clamp(y, -boundingHeight.value / 2 + minRemain, slideHeight.value + boundingHeight.value / 2 - minRemain)
+}
+
+function onPointerup(ev: PointerEvent) {
+  if (!currentDrag)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+
+  currentDrag = null
+}
+
+const ctrlClasses = `absolute border border-gray bg-gray dark:border-gray-500 dark:bg-gray-800 bg-opacity-30 `
+
+function getCornerProps(isLeft: boolean, isTop: boolean) {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      let x = (ev.clientX - slideLeft.value) / scale.value
+      let y = (ev.clientY - slideTop.value) / scale.value
+
+      const { ltx, lty, rtx, rty, lbx, lby, rbx, rby } = currentDrag
+
+      const ratio = currentDrag.width / currentDrag.height
+      const wMin = Math.max(minSize, minSize * ratio)
+      function getSize(w1: number, h1: number) {
+        if (ev.shiftKey) {
+          const w = Math.max(w1, h1 * ratio, wMin)
+          const h = w / ratio
+          return { w, h }
+        }
+        else {
+          return { w: Math.max(w1, minSize), h: Math.max(h1, minSize) }
+        }
+      }
+
+      if (isLeft) {
+        if (isTop) {
+          const w1 = (rbx - x) * rotateCos.value + (rby - y) * rotateSin.value
+          const h1 = -(rbx - x) * rotateSin.value + (rby - y) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = rbx - w * rotateCos.value + h * rotateSin.value
+          y = rby - w * rotateSin.value - h * rotateCos.value
+        }
+        else {
+          const w1 = (rtx - x) * rotateCos.value - (y - rty) * rotateSin.value
+          const h1 = (rtx - x) * rotateSin.value + (y - rty) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = rtx - w * rotateCos.value - h * rotateSin.value
+          y = rty - w * rotateSin.value + h * rotateCos.value
+        }
+      }
+      else {
+        if (isTop) {
+          const w1 = (x - lbx) * rotateCos.value - (lby - y) * rotateSin.value
+          const h1 = (x - lbx) * rotateSin.value + (lby - y) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = lbx + w * rotateCos.value + h * rotateSin.value
+          y = lby + w * rotateSin.value - h * rotateCos.value
+        }
+        else {
+          const w1 = (x - ltx) * rotateCos.value + (y - lty) * rotateSin.value
+          const h1 = -(x - ltx) * rotateSin.value + (y - lty) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = ltx + w * rotateCos.value - h * rotateSin.value
+          y = lty + w * rotateSin.value + h * rotateCos.value
+        }
+      }
+
+      if (isLeft) {
+        if (isTop) {
+          x0.value = (x + rbx) / 2
+          y0.value = (y + rby) / 2
+          width.value = (rbx - x) * rotateCos.value + (rby - y) * rotateSin.value
+          height.value = -(rbx - x) * rotateSin.value + (rby - y) * rotateCos.value
+        }
+        else {
+          x0.value = (x + rtx) / 2
+          y0.value = (y + rty) / 2
+          width.value = (rtx - x) * rotateCos.value - (y - rty) * rotateSin.value
+          height.value = (rtx - x) * rotateSin.value + (y - rty) * rotateCos.value
+        }
+      }
+      else {
+        if (isTop) {
+          x0.value = (x + lbx) / 2
+          y0.value = (y + lby) / 2
+          width.value = (x - lbx) * rotateCos.value - (lby - y) * rotateSin.value
+          height.value = (x - lbx) * rotateSin.value + (lby - y) * rotateCos.value
+        }
+        else {
+          x0.value = (x + ltx) / 2
+          y0.value = (y + lty) / 2
+          width.value = (x - ltx) * rotateCos.value + (y - lty) * rotateSin.value
+          height.value = -(x - ltx) * rotateSin.value + (y - lty) * rotateCos.value
+        }
+      }
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: isLeft ? '0' : undefined,
+      right: isLeft ? undefined : '0',
+      top: isTop ? '0' : undefined,
+      bottom: isTop ? undefined : '0',
+      cursor: +isLeft + +isTop === 1 ? 'nesw-resize' : 'nwse-resize',
+    },
+    class: ctrlClasses,
+  }
+}
+
+function getBorderProps(dir: 'l' | 'r' | 't' | 'b') {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      const x = (ev.clientX - slideLeft.value) / scale.value
+      const y = (ev.clientY - slideTop.value) / scale.value
+
+      const { ltx, lty, rtx, rty, lbx, lby, rbx, rby } = currentDrag
+
+      if (dir === 'l') {
+        const rx = (rtx + rbx) / 2
+        const ry = (rty + rby) / 2
+        width.value = Math.max((rx - x) * rotateCos.value + (ry - y) * rotateSin.value, minSize)
+        x0.value = rx - width.value * rotateCos.value / 2
+        y0.value = ry - width.value * rotateSin.value / 2
+      }
+      else if (dir === 'r') {
+        const lx = (ltx + lbx) / 2
+        const ly = (lty + lby) / 2
+        width.value = Math.max((x - lx) * rotateCos.value + (y - ly) * rotateSin.value, minSize)
+        x0.value = lx + width.value * rotateCos.value / 2
+        y0.value = ly + width.value * rotateSin.value / 2
+      }
+      else if (dir === 't') {
+        const bx = (lbx + rbx) / 2
+        const by = (lby + rby) / 2
+        height.value = Math.max((by - y) * rotateCos.value - (bx - x) * rotateSin.value, minSize)
+        x0.value = bx + height.value * rotateSin.value / 2
+        y0.value = by - height.value * rotateCos.value / 2
+      }
+      else if (dir === 'b') {
+        const tx = (ltx + rtx) / 2
+        const ty = (lty + rty) / 2
+        height.value = Math.max((y - ty) * rotateCos.value - (x - tx) * rotateSin.value, minSize)
+        x0.value = tx - height.value * rotateSin.value / 2
+        y0.value = ty + height.value * rotateCos.value / 2
+      }
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: dir === 'l' ? '0' : dir === 'r' ? `100%` : `50%`,
+      top: dir === 't' ? '0' : dir === 'b' ? `100%` : `50%`,
+      cursor: 'lr'.includes(dir) ? 'ew-resize' : 'ns-resize',
+      borderRadius: '50%',
+    },
+    class: ctrlClasses,
+  }
+}
+
+function getRotateProps() {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      const x = (ev.clientX - slideLeft.value - currentDrag.dx0) / scale.value - ctrlSize / 4
+      const y = (ev.clientY - slideTop.value - currentDrag.dy0) / scale.value - ctrlSize / 4
+
+      let angle = Math.atan2(y - y0.value, x - x0.value) * 180 / Math.PI + 90
+
+      const commonAngles = [0, 90, 180, 270, 360]
+      for (const a of commonAngles) {
+        if (Math.abs(angle - a) < 5) {
+          angle = a % 360
+          break
+        }
+      }
+
+      rotate.value = angle
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: '50%',
+      top: '-20px',
+      cursor: 'grab',
+      borderRadius: '50%',
+    },
+    class: ctrlClasses,
+  }
+}
+
+const moveInterval = 20
+const intervalFnOptions = {
+  immediate: false,
+  immediateCallback: false,
+}
+const moveLeft = useIntervalFn(() => {
+  if (boundingRight.value <= minRemain)
+    return
+  x0.value--
+}, moveInterval, intervalFnOptions)
+const moveRight = useIntervalFn(() => {
+  if (boundingLeft.value >= slideWidth.value - minRemain)
+    return
+  x0.value++
+}, moveInterval, intervalFnOptions)
+const moveUp = useIntervalFn(() => {
+  if (boundingBottom.value <= minRemain)
+    return
+  y0.value--
+}, moveInterval, intervalFnOptions)
+const moveDown = useIntervalFn(() => {
+  if (boundingTop.value >= slideHeight.value - minRemain)
+    return
+  y0.value++
+}, moveInterval, intervalFnOptions)
+
+watchEffect(() => {
+  function shortcut(key: string, fn: Pausable) {
+    if (magicKeys[key].value)
+      fn.resume()
+    else fn.pause()
+  }
+  shortcut('left', moveLeft)
+  shortcut('right', moveRight)
+  shortcut('up', moveUp)
+  shortcut('down', moveDown)
+})
+</script>
+
+<template>
+  <div
+    v-if="Number.isFinite(x0)"
+    id="drag-control-container"
+    :data-drag-id="id"
+    :style="{
+      position: 'absolute',
+      zIndex: 100,
+      left: `${zoom * (x0 - width / 2)}px`,
+      top: `${zoom * (y0 - height / 2)}px`,
+      width: `${zoom * width}px`,
+      height: `${zoom * height}px`,
+      transformOrigin: 'center center',
+      transform: `rotate(${rotate}deg)`,
+    }"
+    @pointerdown="onPointerdown"
+    @pointermove="onPointermove"
+    @pointerup="onPointerup"
+  >
+    <div class="absolute inset-0 z-100 b b-dark dark:b-gray-400">
+      <template v-if="!autoHeight">
+        <div v-bind="getCornerProps(true, true)" />
+        <div v-bind="getCornerProps(true, false)" />
+        <div v-bind="getCornerProps(false, true)" />
+        <div v-bind="getCornerProps(false, false)" />
+      </template>
+      <div v-bind="getBorderProps('l')" />
+      <div v-bind="getBorderProps('r')" />
+      <template v-if="!autoHeight">
+        <div v-bind="getBorderProps('t')" />
+        <div v-bind="getBorderProps('b')" />
+      </template>
+      <div v-bind="getRotateProps()" />
+      <div
+        class="absolute -top-15px w-0 b b-dashed b-dark dark:b-gray-400"
+        :style="{
+          left: 'calc(50% - 1px)',
+          height: autoHeight ? '14px' : '10px',
+        }"
+      />
+    </div>
+  </div>
+</template>

package/internals/NavControls.vue

@@ -5,7 +5,6 @@ import { downloadPDF } from '../utils'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
-import { getSlidePath } from '../logic/slides'
 import { useDrawings } from '../composables/useDrawings'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
@@ -21,7 +20,6 @@ const props = defineProps({
 })
 
 const {
-  currentRoute,
   currentSlideNo,
   hasNext,
   hasPrev,
@@ -31,6 +29,8 @@ const {
   next,
   prev,
   total,
+  enterPresenter,
+  exitPresenter,
 } = useNav()
 const {
   brush,
@@ -40,11 +40,6 @@ const {
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
-const presenterPassword = computed(() => currentRoute.value.query.password)
-const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
-const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
-
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
   if (root.value && activeElement.value && root.value.contains(activeElement.value))
@@ -124,12 +119,12 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
 
       <template v-if="!isEmbedded">
-        <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
+        <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
           <carbon:presentation-file />
-        </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        </IconButton>
+        <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
           <carbon:user-speaker />
-        </RouterLink>
+        </IconButton>
 
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"

package/internals/SlideContainer.vue

@@ -2,7 +2,7 @@
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
-import { injectionSlideScale } from '../constants'
+import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { useNav } from '../composables/useNav'
 
 const props = defineProps({
@@ -23,11 +23,12 @@ const props = defineProps({
 
 const { clicksDirection, isPrintMode } = useNav()
 
-const root = ref<HTMLDivElement>()
-const element = useElementSize(root)
+const root = ref<HTMLDivElement | null>(null)
+const rootSize = useElementSize(root)
+const slideElement = ref<HTMLElement | null>(null)
 
-const width = computed(() => props.width ? props.width : element.width.value)
-const height = computed(() => props.width ? props.width / slideAspect.value : element.height.value)
+const width = computed(() => props.width ? props.width : rootSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : rootSize.height.value)
 
 if (props.width) {
   watchEffect(() => {
@@ -42,7 +43,7 @@ const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
   if (props.scale && !isPrintMode.value)
-    return props.scale
+    return +props.scale
   if (screenAspect.value < slideAspect.value)
     return width.value / slideWidth.value
   return height.value * slideAspect.value / slideWidth.value
@@ -69,12 +70,13 @@ if (props.isMain) {
   `))
 }
 
-provideLocal(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale)
+provideLocal(injectionSlideElement, slideElement)
 </script>
 
 <template>
   <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
-    <div id="slide-content" class="slidev-slide-content" :style="style">
+    <div id="slide-content" ref="slideElement" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

package/internals/SlideWrapper.vue

@@ -4,6 +4,7 @@ import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { getSlideClass } from '../utils'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -67,16 +68,24 @@ const SlideComponent = defineAsyncComponent({
 </script>
 
 <template>
-  <component
-    :is="SlideComponent"
-    :style="style"
-    :data-slidev-no="props.route.no"
-    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
-  />
+  <div :class="getSlideClass(route)">
+    <component
+      :is="SlideComponent"
+      :style="style"
+      :data-slidev-no="props.route.no"
+      :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+    />
+  </div>
 </template>
 
 <style scoped>
 .disable-view-transition:deep(*) {
   view-transition-name: none !important;
 }
+
+.slidev-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
 </style>

package/internals/SlidesShow.vue

@@ -2,13 +2,14 @@
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
 import { useNav } from '../composables/useNav'
-import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../logic/hmr'
 import { createFixedClicks } from '../composables/useClicks'
+import { activeDragElement } from '../state'
 import { CLICKS_MAX } from '../constants'
 import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
+import DragControl from './DragControl.vue'
 
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'
@@ -65,21 +66,19 @@ function onAfterLeave() {
     tag="div"
     @after-leave="onAfterLeave"
   >
-    <div
+    <SlideWrapper
+      :is="route.component!"
       v-for="route of loadedRoutes"
       v-show="route === currentSlideRoute"
       :key="route.no"
-    >
-      <SlideWrapper
-        :is="route.component!"
-        :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
-        :class="getSlideClass(route)"
-        :route="route"
-        :render-context="renderContext"
-      />
-    </div>
+      :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
+      :route="route"
+      :render-context="renderContext"
+    />
   </component>
 
+  <DragControl v-if="activeDragElement" :data="activeDragElement" />
+
   <div id="twoslash-container" />
 
   <!-- Global Top -->
@@ -95,10 +94,4 @@ function onAfterLeave() {
 #slideshow {
   height: 100%;
 }
-
-#slideshow > div {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-}
 </style>

package/logic/contextMenu.ts

@@ -0,0 +1,34 @@
+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'
+
+export const currentContextMenu = shallowRef<null | {
+  x: number
+  y: number
+  items: ComputedRef<ContextMenuItem[]>
+}>(null)
+
+export function openContextMenu(x: number, y: number) {
+  currentContextMenu.value = {
+    x,
+    y,
+    items: setupContextMenu(),
+  }
+}
+
+export function closeContextMenu() {
+  currentContextMenu.value = null
+}
+
+export function onContextMenu(ev: MouseEvent) {
+  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+    return
+  if (ev.shiftKey || ev.defaultPrevented)
+    return
+
+  openContextMenu(ev.pageX, ev.pageY)
+  ev.preventDefault()
+  ev.stopPropagation()
+}

package/logic/utils.ts

@@ -32,24 +32,6 @@ export function makeId(length = 5) {
   return result.join('')
 }
 
-/**
- *   '+3' => '+3'
- *   '-3' => '-3'
- *    '3' => 3
- *      3 => 3
- */
-export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolean, value: number] {
-  let n = +at
-  if (Number.isNaN(n)) {
-    console.warn('[slidev] Invalid click position:', at)
-    n = 0
-  }
-  return [
-    typeof at === 'string' && '+-'.includes(at[0]),
-    n,
-  ]
-}
-
 export function updateCodeHighlightRange(
   rangeStr: string,
   linesCount: number,