jvs-ppt-ui 0.0.6 → 0.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",

package/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import PptEditor from './components/PptEditor.vue'
-import type { DeckData, PptEditorApi } from './types'
+import type { DeckData, PptEditorApi, UploadResourceContext } from './types'
 
 const editorRef = ref<PptEditorApi | null>(null)
 
@@ -12,20 +12,42 @@ function handleSave(deck: DeckData) {
 function handleReady(api: PptEditorApi) {
   console.log('[JVS-PPT 独立运行模式] 编辑器初始化完成:', api)
 }
+
+/**
+ * 模拟资源上传函数
+ * 覆盖场景：导入 PPTX/JSON、上传图片、视频、音频、剪贴板粘贴、占位符上传、背景上传等
+ */
+async function handleCustomUpload(fileOrBlob: File | Blob, context: UploadResourceContext): Promise<string> {
+  console.log('[模拟自定义上传函数触发] 接收到待上传资源:', {
+    type: context.type,        // 资源类型: 'image' | 'video' | 'audio'
+    source: context.source,    // 触发来源: 'file-upload' | 'pptx-import' | 'json-import' | 'paste' | 'placeholder' | 'background'
+    filename: context.filename,
+    size: `${(fileOrBlob.size / 1024).toFixed(2)} KB`,
+    fileOrBlob
+  })
+
+  // 1. 模拟网络上传请求耗时
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  // 2. 实际业务生产代码范例：
+  // const formData = new FormData()
+  // formData.append('file', fileOrBlob, context.filename || `upload_${Date.now()}`)
+  // formData.append('type', context.type)
+  // const res = await fetch('/api/oss/upload', { method: 'POST', body: formData }).then(r => r.json())
+  // return res.data.url
+
+  // 3. 模拟环境：生成可正常渲染的地址作为模拟的服务器返回 URL
+  const mockServerUrl = URL.createObjectURL(fileOrBlob)
+  console.log(`[模拟上传成功] 已返回服务器文件地址:`, mockServerUrl)
+  return mockServerUrl
+}
 </script>
 
 <template>
-  <PptEditor
-    ref="editorRef"
-    :enable-mcp="true"
-    :enable-ai="true"
-    ai-api-url="/jvs-dam/api/ppt/ai-replace"
-    :enable-material="true"
-    material-tree-api-url="/jvs-dam/api/dam/material/tree"
-    material-page-api-url="/jvs-dam/api/dam/material/page"
-    material-api-url="/jvs-dam/api/dam/material/tree"
-    material-save-api-url="/jvs-dam/api/dam/material/save"
-    @save="handleSave"
-    @ready="handleReady"
-  />
+  <!-- :custom-upload="handleCustomUpload" -->
+  <PptEditor ref="editorRef" :custom-upload="handleCustomUpload" :enable-mcp="true" :enable-ai="true"
+    ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true"
+    material-tree-api-url="/jvs-dam/api/dam/material/tree" material-page-api-url="/jvs-dam/api/dam/material/page"
+    material-api-url="/jvs-dam/api/dam/material/tree" material-save-api-url="/jvs-dam/api/dam/material/save"
+    @save="handleSave" @ready="handleReady" />
 </template>

package/src/components/CanvasArea.vue

@@ -965,6 +965,18 @@ function getResizeCursor(handle: string, el: any) {
 // 拖拽期间全局图元尺寸缓存池：彻底消除拖动期间的 Forced Synchronous Layout（强制回流与 DOM 读取）
 const activeDragDimensions = new Map<string, { width: number; height: number }>()
 
+// 渲染期图元尺寸记忆化：模板对同一元素每渲染批会调 getElementWidthHeight 2-4 次，
+// 签名含全部输入（style 尺寸/排版项、内容长度+首尾采样、选中 RO 尺寸），命中则免重复 DOM 测量
+let elementDimCache = new WeakMap<object, { sig: string; dims: { width: number; height: number } }>()
+watch(activeIndex, () => {
+  elementDimCache = new WeakMap()
+})
+if (typeof document !== 'undefined' && (document as any).fonts?.ready) {
+  ;(document as any).fonts.ready.then(() => {
+    elementDimCache = new WeakMap()
+  }).catch(() => {})
+}
+
 const getOverlayWidth = (el: any) => {
   if (el.type === 'line') {
     return el.style?.width || (el.width !== undefined ? `${el.width}px` : '1px')
@@ -1197,8 +1209,11 @@ function observeSelectedElement() {
         const curW = curIsVertical && curEditableDom
           ? Math.max(curEditableDom.scrollWidth, dom.offsetWidth)
           : dom.offsetWidth
-        selectedElementWidth.value = `${curW}px`
-        selectedElementHeight.value = `${curH}px`
+        // 值相等守卫：避免 RO → 渲染 → RO 的无谓链路
+        const wStr = `${curW}px`
+        const hStr = `${curH}px`
+        if (selectedElementWidth.value !== wStr) selectedElementWidth.value = wStr
+        if (selectedElementHeight.value !== hStr) selectedElementHeight.value = hStr
       })
       selectedElementResizeObserver.observe(dom)
       if (editableDom && isVertical) {
@@ -1432,18 +1447,20 @@ function getCubeShadingPaths(el: any) {
 function fitToScreen() {
   if (!viewportContainerRef.value) return
 
-  viewportWidth.value = viewportContainerRef.value.clientWidth
-  viewportHeight.value = viewportContainerRef.value.clientHeight
+  const cw = viewportContainerRef.value.clientWidth
+  const ch = viewportContainerRef.value.clientHeight
 
   const padding = 60
-  const containerWidth = viewportWidth.value - padding
-  const containerHeight = viewportHeight.value - padding
+  const scale = Math.min((cw - padding) / logicalWidth.value, (ch - padding) / logicalHeight.value)
+  const targetZoom = Math.max(20, Math.min(200, Math.round(scale * 100)))
 
-  const scaleX = containerWidth / logicalWidth.value
-  const scaleY = containerHeight / logicalHeight.value
+  // 守卫：容器尺寸与目标 zoom 都与现状一致时直接返回，
+  // 吃掉 window resize 与 viewport RO 的双触发/RO 风暴（用户手动缩放不受影响：zoomRatio≠target 时照常重适配）
+  if (cw === viewportWidth.value && ch === viewportHeight.value && targetZoom === zoomRatio.value) return
 
-  const scale = Math.min(scaleX, scaleY)
-  zoomRatio.value = Math.max(20, Math.min(200, Math.round(scale * 100)))
+  viewportWidth.value = cw
+  viewportHeight.value = ch
+  zoomRatio.value = targetZoom
   centerSlideInViewport()
 }
 
@@ -3604,8 +3621,6 @@ function handleBorderMouseDown(e: MouseEvent, el: any) {
 }
 
 function handleElementDblClick(e: MouseEvent, el: any) {
-  // TODO(debug): 定位“双击元素却新建了文本框”的拦截层，问题定位后移除
-  console.info('[元素dblclick调试]', el?.id, el?.type)
   let target = el
   if (selectedElementIds.value.length > 0 && !selectedElementIds.value.includes(el.id)) {
     const activeSelectedEl = findSelectedElementUnderPoint(e.clientX, e.clientY)
@@ -4128,6 +4143,27 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   const isWPercent = wStr.endsWith('%')
   const isHPercent = hStr.endsWith('%')
 
+  // 纯数学快路径：非文本、非选中的元素，宽高都能从 style 纯算（%×基数 / px 字面量 / 无 width 归 200），
+  // 与下方 else 分支逐条等价，但零 DOM 读、零 offset* 强制布局
+  if (el.type !== 'text' && el.id !== selectedElementId.value && hStr && hStr !== 'auto' && (!wStr || !isNaN(parseFloat(wStr)))) {
+    const parentGroup = findParentGroup(el.id)
+    const baseDim = parentGroup ? getElementPixels(parentGroup) : { width: logicalWidth.value, height: logicalHeight.value }
+    const width = !wStr
+      ? 200
+      : (isWPercent ? (parseFloat(wStr) / 100) * baseDim.width : (parseFloat(wStr) || 200))
+    const height = isHPercent ? (parseFloat(hStr) / 100) * baseDim.height : (parseFloat(hStr) || 100)
+    return { width, height }
+  }
+
+  // 记忆化：同渲染批内模板会重复调用本函数，签名命中直接复用上次测量结果
+  const st = el.style || {}
+  const selW = el.id === selectedElementId.value ? selectedElementWidth.value : ''
+  const selH = el.id === selectedElementId.value ? selectedElementHeight.value : ''
+  const contentSig = typeof el.content === 'string' ? `${el.content.length}|${el.content.slice(0, 12)}|${el.content.slice(-12)}` : ''
+  const dimSig = `${el.type}|${wStr}|${hStr}|${el.width || 0}|${el.height || 0}|${contentSig}|${el.latex || ''}|${st.fontSize || ''}|${st.fontFamily || ''}|${st.fontWeight || ''}|${st.lineHeight || ''}|${st.letterSpacing || ''}|${st.writingMode || ''}|${st.whiteSpace || ''}|${st.padding || ''}|${el.autoFit?.type || ''}|${el.autoFit?.fontScale || 0}|${selW}|${selH}|${logicalWidth.value}|${logicalHeight.value}|${isDragging.value ? 1 : 0}|${isResizing.value ? 1 : 0}`
+  const dimCached = elementDimCache.get(el)
+  if (dimCached && dimCached.sig === dimSig) return dimCached.dims
+
   if (!isWPercent && !isHPercent && wStr && hStr && wStr !== 'auto' && hStr !== 'auto') {
     const w = parseFloat(wStr)
     const h = parseFloat(hStr)
@@ -4223,7 +4259,9 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
     }
   }
 
-  return { width, height }
+  const dims = { width, height }
+  elementDimCache.set(el, { sig: dimSig, dims })
+  return dims
 }
 
 // Helper to get element dimensions in logical canvas pixel space

package/src/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, defineAsyncComponent, watch } from 'vue'
 import Toolbar from './Toolbar.vue'
 import { useSlides } from '../composables/useSlides'
 import type JSZip from 'jszip'
@@ -13,12 +13,16 @@ import { parseColorString, extractTextAlignFromHtml, updateTextAlignInHtml, norm
 
 import { SHAPE_LIST as PPTX_SHAPE_LIST, SHAPE_PATH_FORMULAS as PPTX_SHAPE_PATH_FORMULAS } from '../utils/pptxShapes'
 import { inferElementTextType, type SlideTextType } from '../utils/textTypes'
-import { mockAIPptDsl } from '../utils/dslTemplate'
-import ShortcutsDialog from './ShortcutsDialog.vue'
+// 快捷键弹层异步化；mock DSL 模板(~77KB)改为触发时动态加载
+const ShortcutsDialog = defineAsyncComponent(() => import('./ShortcutsDialog.vue'))
 
 const { presentationTitle, exportSlides, importSlides, currentZipMeta, startPresentation, activeIndex, slides, notify, renderLatexToSvg, globalFontFamily, globalFontColor, globalThemeColor, themeSchemeFillMap, themeClrScheme, logicalWidth, logicalHeight, dslInputDialogVisible, aiPptDialogVisible, shortcutsDialogVisible, registerPPTParser, isMasterEditingView, enterMasterView, exitMasterView, zoomRatio, resetZoom, normalizeSlideBackground, getEffectiveMasterElementsForSlide, getEffectiveSlideBackground, uploadMediaResourcesInSlides, getCustomUploadHandler } = useSlides()
 import { sanitizeNbspInHtml, checkIsVertical } from '../composables/useSlides'
 
+// 快捷键弹层挂载闩锁：首次打开后保持挂载，异步 chunk 只加载一次
+const shortcutsOpened = ref(false)
+watch(shortcutsDialogVisible, v => { if (v) shortcutsOpened.value = true })
+
 function handleZoomCommand(command: string | number) {
   if (command === 'reset') {
     resetZoom()
@@ -73,9 +77,11 @@ const handleAIPPT = () => {
 }
 
 const handleLoadDsl = () => {
-  importSlides(JSON.parse(JSON.stringify(mockAIPptDsl)))
-  presentationTitle.value = 'AI-DSL 智能技术排版示例'
-  notify('成功导入 AI-DSL 演示幻灯片')
+  import('../utils/dslTemplate').then(m => {
+    importSlides(JSON.parse(JSON.stringify(m.mockAIPptDsl)))
+    presentationTitle.value = 'AI-DSL 智能技术排版示例'
+    notify('成功导入 AI-DSL 演示幻灯片')
+  })
 }
 
 const handleJVSPPTImport = () => {
@@ -4188,7 +4194,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             const borderGrad = el.border?.gradient || el.outline?.gradient
             const outlineGrad = borderGrad ? normalizeGradientConfig(borderGrad) : undefined
 
-            const pattern: string | undefined = el.fill?.type === 'image' ? el.fill.value.base64 : undefined
+            const fillVal = el.fill?.type === 'image' ? el.fill.value : null
+            const pattern: string | undefined = fillVal
+              ? (fillVal.blob || fillVal.base64 || fillVal.src || fillVal.url || (typeof fillVal === 'string' ? fillVal : undefined))
+              : undefined
 
             const fill = typeof el.fill === 'string'
               ? (el.fill.trim() === '' ? 'none' : el.fill)
@@ -4254,6 +4263,9 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             element.style.flipH = flipH
             element.style.flipV = flipV
             element.style.fill = fill
+            if (pattern) {
+              element.style.pattern = pattern
+            }
             element.style.borderColor = el.borderColor || (el.outline?.color || 'transparent')
             element.style.borderWidth = el.borderWidth !== undefined ? `${+(el.borderWidth * ratio).toFixed(2)}px` : (el.outline?.width !== undefined ? `${el.outline.width}px` : '0px')
             element.style.borderStyle = el.borderType || (el.outline?.style || 'solid')
@@ -7214,7 +7226,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 <template>
   <header class="app-header">
     <!-- Left side: Hamburger menu + Title input -->
-    <div style="display: flex; align-items: center; gap: 12px">
+    <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0;">
       <!-- 外部左侧前置插槽 (例如返回按钮、Logo) -->
       <slot name="left-prefix" v-bind="headerContext"></slot>
 
@@ -7223,7 +7235,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
         <el-popover ref="menuPopoverRef" placement="bottom-start" :width="320" trigger="click"
         popper-style="padding: 0; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0; background: #fff; overflow: hidden;">
         <template #reference>
-          <button class="btn-icon" style="padding: 4px; color: var(--text-primary)" data-tooltip="菜单">
+          <button class="btn-icon" style="padding: 4px; color: var(--text-primary); flex-shrink: 0;" data-tooltip="菜单">
             <svg class="icon" style="width: 18px; height: 18px" viewBox="0 0 24 24">
               <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
             </svg>
@@ -7366,17 +7378,18 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
           </div>
         </div>
       </el-popover>
-      <div class="presentation-title-container" style="display: flex; align-items: center; gap: 6px; margin-left: 8px;">
+      <div class="presentation-title-container" style="display: flex; align-items: center; gap: 6px; margin-left: 8px; flex-shrink: 0; min-width: 0; max-width: 280px;">
         <span v-if="!isEditingTitle" @click="startEditingTitle" class="presentation-title-text"
-          style="font-size: 15px; font-weight: 600; color: #0f172a; cursor: pointer; transition: color 0.15s ease;">
+          style="font-size: 15px; font-weight: 600; color: #0f172a; cursor: pointer; transition: color 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 240px;"
+          :title="presentationTitle || '未命名演示文稿'">
           {{ presentationTitle || '未命名演示文稿' }}
         </span>
         <input v-else ref="titleInputRef" class="presentation-title-input-edit" v-model="presentationTitle"
           @blur="stopEditingTitle" @keyup.enter="stopEditingTitle"
-          style="font-size: 15px; font-weight: 600; color: #0f172a; border: 1px solid #3b82f6; border-radius: 6px; padding: 4px 8px; outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); width: 240px;" />
+          style="font-size: 15px; font-weight: 600; color: #0f172a; border: 1px solid #3b82f6; border-radius: 6px; padding: 4px 8px; outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); width: 200px;" />
         <svg v-if="!isEditingTitle" @click="startEditingTitle" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-          style="width: 14px; height: 14px; color: #3b82f6; cursor: pointer; margin-left: 2px;">
+          style="width: 14px; height: 14px; color: #3b82f6; cursor: pointer; margin-left: 2px; flex-shrink: 0;">
           <path d="M12 20h9" />
           <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
         </svg>
@@ -7388,7 +7401,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Center Section: Integrated Top Toolbar -->
-    <div class="header-center-tools" :style="{ justifyContent: isMasterEditingView ? 'flex-start' : 'center' }" style="flex: 1; display: flex; align-items: center; overflow: visible; position: relative; z-index: 10; margin: 0 12px;">
+    <div class="header-center-tools" :style="{ justifyContent: isMasterEditingView ? 'flex-start' : 'center' }" style="flex: 1; display: flex; align-items: center; overflow: hidden; min-width: 0; position: relative; z-index: 10; margin: 0 8px;">
       <!-- 外部中间工具栏插槽 (默认呈现内置 Toolbar，支持前置/后置插槽扩展或整栏替换) -->
       <slot name="center" v-bind="headerContext">
         <slot name="toolbar" v-bind="headerContext">
@@ -7405,7 +7418,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Right side: Utility icons -->
-    <div style="display: flex; align-items: center; gap: 10px">
+    <div style="display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap;">
       <!-- 外部右侧前置插槽 -->
       <slot name="right-prefix" v-bind="headerContext"></slot>
 
@@ -7416,7 +7429,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
       <!-- Zoom Ratio Selector Dropdown -->
       <el-dropdown trigger="click" @command="handleZoomCommand">
         <div class="zoom-select-btn"
-          style="height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; background: #f1f5f9;">
+          style="height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; background: #f1f5f9; white-space: nowrap; flex-shrink: 0;">
           <span>{{ zoomRatio }}%</span>
           <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#64748b" stroke-width="2.5">
             <path d="M6 9l6 6 6-6" />
@@ -7438,7 +7451,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 
       <!-- Exit Master View Button (Placed right after Zoom Ratio Dropdown) -->
       <button v-if="isMasterEditingView" class="btn-exit-master" @click="exitMasterView()"
-        style="height: 32px; padding: 0 12px; border: 1px solid #fee2e2; border-radius: 6px; background: #fef2f2; color: #ef4444; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s ease;"
+        style="height: 32px; padding: 0 12px; border: 1px solid #fee2e2; border-radius: 6px; background: #fef2f2; color: #ef4444; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0;"
         title="退出母版" data-tooltip="退出母版">
         <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#ef4444" stroke-width="2.2"
           stroke-linecap="round" stroke-linejoin="round">
@@ -7449,8 +7462,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 
       <!-- Slide Master Mode Toggle Button -->
       <button v-if="!isMasterEditingView" class="btn-master-toggle" @click="enterMasterView()"
-        style="height: 32px; padding: 0 12px; border: none; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer;">
-        <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+        style="height: 32px; padding: 0 12px; border: none; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0;">
+        <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor" style="flex-shrink: 0;">
           <use xlink:href="#icon-muban"></use>
         </svg>
         <span>母版</span>
@@ -7459,7 +7472,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
       <!-- Presentation Mode Split Button -->
       <div v-if="!isMasterEditingView" class="presentation-split-btn">
         <button class="presentation-main-btn" @click="startFromBeginning" title="从头开始放映 (F5)">
-          <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+          <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor" style="flex-shrink: 0;">
             <use xlink:href="#icon-huandengpianfangying"></use>
           </svg>
           <span>幻灯片放映</span>
@@ -7507,7 +7520,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Shortcuts Dialog Modal -->
-    <ShortcutsDialog v-model:visible="shortcutsDialogVisible" />
+    <ShortcutsDialog v-if="shortcutsOpened" v-model:visible="shortcutsDialogVisible" />
   </header>
 
   <teleport to="body">
@@ -7740,6 +7753,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   color: #3b82f6;
   transition: all 0.15s ease;
   box-sizing: border-box;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .presentation-split-btn:hover {
@@ -7761,6 +7776,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   cursor: pointer;
   transition: background-color 0.15s ease;
   border-radius: 5px 0 0 5px;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .presentation-main-btn:hover {