@tnotesjs/ui 0.3.3 → 0.4.1

package/README.md

@@ -100,35 +100,3 @@ console.log('a')
 | `enableCopy`         | `true`    |
 | `enableFullscreen`   | `true`    |
 | `enableCenterToggle` | `true`    |
-
-### `MindmapEditor`（`@tnotesjs/ui/mindmap-editor`）
-
-思维导图编辑器的**唯一实现**。`@tnotesjs/ui/mindmap` 那个块（`Mindmap.vue`）是给 SSG / Desk 笔记
-内嵌用的「预览 + 可选编辑」；本入口导出它内部复用的编辑器组件，供自带页面外壳的宿主直接组装。
-当前宿主：`apps/mindmap-web`、`apps/mindmap-vscode`。
-
-| 导出                                                                          | 说明                                           |
-| ----------------------------------------------------------------------------- | ---------------------------------------------- |
-| `MindmapView`                                                                 | 脑图画布（含选区工具条 / 右键菜单 / 链接浮层） |
-| `OutlineView`                                                                 | 大纲视图（拖拽、行内富文本、折叠）             |
-| `MarkdownView`                                                                | 源码视图（防抖回流 + 诊断定位）                |
-| `SearchBar`                                                                   | 三视图共用的搜索条                             |
-| `FocusBreadcrumbs`                                                            | 进入主题后的面包屑（与主 barrel 同源）         |
-| `AppIcon` / `IconButton` / `CollapseMenu`                                     | 外壳按钮与图标                                 |
-| `CanvasContextMenu` / `LinkPopover` / `RichInlineEditor` / `SelectionToolbar` | 上面几个组件的组成件，供未来宿主自行组装       |
-| `insertImageIntoSource`                                                       | 源码视图的整节点图片插入                       |
-| `pasteCanvasOutline` / `readMindmapClipboard` / `writeMindmapClipboard`       | 脑图剪贴板（含无权限时的进程内回退）           |
-| `resolveAfterDropLevel` / `DropLevel`                                         | 大纲拖拽落点解析                               |
-| `primaryShortcut` / `altShortcut` / `isApplePlatform`                         | 平台快捷键文案                                 |
-
-**浮层挂载点（`teleportTo`）**：`MindmapView`（并透传给 `CanvasContextMenu` / `LinkPopover`）接受
-`teleportTo?: string`。默认 `undefined` = 就地渲染——浮层是 `position: fixed`，嵌在笔记里的宿主
-（Desk / SSG）teleport 到 `body` 会脱离笔记的层叠上下文。整页宿主传 `'body'`。
-
-**宿主职责（不属于本包）**：`MindmapSession` 的归属与生命周期、`--mm-*` 主题变量
-（`--mm-canvas-bg` / `--mm-panel-bg` / `--mm-border` / `--mm-text` / `--mm-text-dim` / `--mm-hover` /
-`--mm-selected-bg` / `--mm-accent` / `--mm-edit-bg`）、落盘、图片写入、宿主快捷键到组件
-`defineExpose` 钩子的桥接（`OutlineView` 的 `locateNode` / `selectAllFromHost` / `undoFromHost` /
-`redoFromHost`，`MarkdownView` 的 `selectAllFromHost` / `flushDraft`）。
-
-改公共交互只改这里一处，三个宿主同时生效。

package/dist/components/Mindmap/markdown.d.ts

@@ -1,8 +1,13 @@
 interface MindmapFenceOptions {
     title?: string;
     initialExpandLevel?: number;
+    /** Pane height in px (`h=480` in the fence info). */
+    height?: number;
 }
-/** Parse the canonical `mindmap [title] 2` fence metadata. */
+declare const MINDMAP_MIN_HEIGHT = 200;
+declare const MINDMAP_MAX_HEIGHT = 1600;
+declare function clampMindmapHeight(value: number): number;
+/** Parse the canonical `mindmap [title] 2 h=480` fence metadata. */
 declare function parseMindmapFence(openLine: string): MindmapFenceOptions | null;
 interface NormalizeMindmapOptions {
     title?: string;
@@ -11,4 +16,4 @@ interface NormalizeMindmapOptions {
 /** Ensure canonical mindmap Markdown has exactly one H1 root title. */
 declare function normalizeMindmapMarkdown(source: string, options?: NormalizeMindmapOptions): string;
 
-export { type MindmapFenceOptions, type NormalizeMindmapOptions, normalizeMindmapMarkdown, parseMindmapFence };
+export { MINDMAP_MAX_HEIGHT, MINDMAP_MIN_HEIGHT, type MindmapFenceOptions, type NormalizeMindmapOptions, clampMindmapHeight, normalizeMindmapMarkdown, parseMindmapFence };

package/dist/components/Mindmap/markdown.js

@@ -1,4 +1,9 @@
 // src/components/Mindmap/markdown.ts
+var MINDMAP_MIN_HEIGHT = 200;
+var MINDMAP_MAX_HEIGHT = 1600;
+function clampMindmapHeight(value) {
+  return Math.round(Math.min(MINDMAP_MAX_HEIGHT, Math.max(MINDMAP_MIN_HEIGHT, value)));
+}
 function cleanHeadingText(value) {
   return value.trim().replace(/\s+#+\s*$/, "").trim();
 }
@@ -13,9 +18,15 @@ function parseMindmapFence(openLine) {
     options.title = cleanHeadingText(titleMatch[1]) || void 0;
     rest = `${rest.slice(0, titleMatch.index)} ${rest.slice((titleMatch.index ?? 0) + titleMatch[0].length)}`.trim();
   }
-  if (rest && !/^\d+$/.test(rest)) return null;
-  if (rest) {
-    options.initialExpandLevel = Math.max(1, Number(rest));
+  for (const token of rest.split(/\s+/).filter(Boolean)) {
+    const height = token.match(/^h=(\d+)$/);
+    if (height) {
+      options.height = clampMindmapHeight(Number(height[1]));
+    } else if (/^\d+$/.test(token) && options.initialExpandLevel === void 0) {
+      options.initialExpandLevel = Math.max(1, Number(token));
+    } else {
+      return null;
+    }
   }
   return options;
 }
@@ -41,6 +52,9 @@ ${body.join("\n")}
 `;
 }
 export {
+  MINDMAP_MAX_HEIGHT,
+  MINDMAP_MIN_HEIGHT,
+  clampMindmapHeight,
   normalizeMindmapMarkdown,
   parseMindmapFence
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -60,11 +60,6 @@
       "types": "./src/entries/excalidraw-editor.ts",
       "import": "./src/entries/excalidraw-editor.ts",
       "default": "./src/entries/excalidraw-editor.ts"
-    },
-    "./mindmap-editor": {
-      "types": "./src/entries/mindmap-editor.ts",
-      "import": "./src/entries/mindmap-editor.ts",
-      "default": "./src/entries/mindmap-editor.ts"
     }
   },
   "files": [
@@ -88,7 +83,7 @@
     "react-dom": "18.3.1",
     "sass": "^1.90.0",
     "shiki": "4.4.2",
-    "@tnotesjs/mindmap-core": "^0.2.2"
+    "@tnotesjs/mindmap-core": "^0.2.4"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -111,7 +106,8 @@
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
   },
   "repository": {
     "type": "git",
@@ -136,4 +132,4 @@
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix"
   }
-}
+}

package/src/components/Footprints/Footprints.vue

@@ -186,6 +186,9 @@ watch(
 <style scoped lang="scss">
 .tn-footprints {
   margin: 1rem 0;
+  padding: 12px 16px;
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
   color: var(--tn-c-text);
 }
 
@@ -312,6 +315,7 @@ watch(
 .tn-footprints__modal-img {
   max-width: min(92vw, 960px);
   max-height: 88vh;
+  border-radius: 4px;
   object-fit: contain;
 }
 

package/src/components/ImagePreview/ImagePreview.vue

@@ -225,6 +225,7 @@ onBeforeUnmount(() => {
 .tn-image-preview > img {
   max-width: 90vw;
   max-height: 90vh;
+  border-radius: 4px;
   user-select: none;
   cursor: grab;
   transition: transform 100ms ease-out;

package/src/components/Mermaid/Mermaid.vue

@@ -502,8 +502,7 @@ watch(
 .tn-mermaid {
   position: relative;
   margin: 1rem 0;
-  /* Rest: no frame. Border appears with the action menu (hover / menu focus / copy feedback). */
-  border: 1px solid transparent;
+  border: 1px solid var(--tn-c-divider);
   border-radius: 8px;
   background: var(--tn-c-bg);
   overflow: hidden;

package/src/components/Mindmap/Mindmap.vue

@@ -82,6 +82,8 @@ const props = withDefaults(
     editable?: boolean
     /** Show expand-level control on the chrome (Desk). */
     expandLevelControl?: boolean
+    /** Pane height in px; omit for the default 440px canvas. */
+    height?: number
     /** Explicit dark mode; omit to auto-detect html.dark / data-theme=dark. */
     isDark?: boolean
     /**
@@ -101,6 +103,7 @@ const props = withDefaults(
     initialExpandLevel: 3,
     editable: false,
     expandLevelControl: false,
+    height: undefined,
     isDark: undefined,
     resolveImageSrc: undefined,
     writeAsset: undefined
@@ -161,6 +164,9 @@ function decodeContent(value: string): string {
   }
 }
 
+const paneStyle = computed(() =>
+  props.height ? { '--mindmap-pane-height': `${props.height}px` } : undefined
+)
 const rawContent = computed(() => props.source || decodeContent(props.content || ''))
 const normalizedContent = computed(() => normalizeMindmapMarkdown(rawContent.value))
 
@@ -508,9 +514,14 @@ function zoomToFit(): void {
   viewer?.zoomToFit()
 }
 
-function activateCanvas(): void {
+/** 画布上的浮层自己管焦点；被抢走会让节点编辑提前提交，工具栏点了也不生效 */
+const CANVAS_OVERLAY_SELECTOR =
+  '.selection-toolbar, .mm-edit-input, .link-popover, .canvas-context-menu'
+
+function activateCanvas(event: PointerEvent): void {
   isCanvasActive.value = true
   if (!props.editable) return
+  if (event.target instanceof Element && event.target.closest(CANVAS_OVERLAY_SELECTOR)) return
   const editorEl = canvasHost.value?.querySelector<HTMLElement>('.mm-editor')
   editorEl?.focus({ preventScroll: true })
 }
@@ -729,6 +740,7 @@ onBeforeUnmount(() => {
   <section
     ref="previewRoot"
     class="mindmap-preview"
+    :style="paneStyle"
     :class="{
       'is-dark': dark,
       'is-fullscreen': isFullscreen,
@@ -1039,7 +1051,7 @@ onBeforeUnmount(() => {
 .mindmap-canvas-host {
   position: relative;
   width: 100%;
-  height: 440px;
+  height: var(--mindmap-pane-height, 440px);
   overflow: hidden;
   /*
    * No background of its own: the canvas is cleared to transparent, and the
@@ -1051,7 +1063,7 @@ onBeforeUnmount(() => {
   touch-action: none;
   user-select: none;
 
-  /* CanvasEditor overlay + chrome tokens (aligned with mindmap-web). */
+  /* CanvasEditor overlay + chrome tokens. */
   --mm-canvas-bg: var(--tn-c-bg);
   --mm-panel-bg: var(--tn-c-bg-soft, var(--tn-c-bg));
   --mm-text: var(--tn-c-text);
@@ -1091,7 +1103,7 @@ onBeforeUnmount(() => {
   pointer-events: none;
 }
 
-/* Marquee box — required for box-select feedback (aligned with mindmap-web). */
+/* Marquee box — required for box-select feedback. */
 .mindmap-canvas-host:deep(.mm-selection-box) {
   position: absolute;
   z-index: 8;
@@ -1169,16 +1181,17 @@ onBeforeUnmount(() => {
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.highlight:not(.code)) {
   padding: 0 1px;
   border-radius: 2px;
-  background: #fff36a;
-  color: #242424;
+  background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
 }
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.code) {
   padding: 0 4px;
+  border: 1px solid var(--tn-c-inline-code-border);
   border-radius: 4px;
-  background: color-mix(in srgb, var(--mm-canvas-bg) 82%, var(--mm-text) 18%);
-  color: var(--tn-c-danger, #e85d5d);
+  background: var(--tn-c-inline-code-bg);
+  color: inherit;
   font-family: var(--tn-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 0.92em;
+  font-size: 1em;
+  font-weight: 400;
 }
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.link) {
   color: var(--mm-accent);
@@ -1213,13 +1226,13 @@ onBeforeUnmount(() => {
 }
 
 .mindmap-outline {
-  max-height: 560px;
+  max-height: var(--mindmap-pane-height, 560px);
   padding: 18px 22px 22px;
   overflow: auto;
 }
 
 .mindmap-outline.is-editable {
-  height: 440px;
+  height: var(--mindmap-pane-height, 440px);
   max-height: none;
   padding: 0;
   overflow: hidden;
@@ -1228,7 +1241,7 @@ onBeforeUnmount(() => {
 }
 
 .mindmap-source-wrap.is-editable {
-  height: 440px;
+  height: var(--mindmap-pane-height, 440px);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -1315,7 +1328,7 @@ onBeforeUnmount(() => {
   max-width: min(100%, 560px);
   max-height: 360px;
   margin: 5px 0 12px 25px;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 .mindmap-outline :deep(.is-bold) {
   font-weight: 700;
@@ -1332,15 +1345,17 @@ onBeforeUnmount(() => {
 .mindmap-outline :deep(.is-highlight) {
   padding: 0 2px;
   border-radius: 2px;
-  background: #ffe56b;
-  color: #252525;
+  background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
 }
 .mindmap-outline :deep(.is-code) {
-  padding: 1px 5px;
+  padding: 0 4px;
+  border: 1px solid var(--tn-c-inline-code-border);
   border-radius: 4px;
-  background: var(--tn-c-bg-soft);
-  color: var(--tn-c-danger);
+  background: var(--tn-c-inline-code-bg);
+  color: inherit;
   font-family: var(--tn-font-mono);
+  font-size: 1em;
+  font-weight: 400;
 }
 .mindmap-outline :deep(.is-link) {
   color: var(--tn-c-brand);
@@ -1349,7 +1364,7 @@ onBeforeUnmount(() => {
 }
 
 .mindmap-source {
-  max-height: 560px;
+  max-height: var(--mindmap-pane-height, 560px);
   margin: 0;
   padding: 18px 22px;
   overflow: auto;
@@ -1431,7 +1446,7 @@ onBeforeUnmount(() => {
 
 @media (max-width: 768px) {
   .mindmap-canvas-host {
-    height: 360px;
+    height: var(--mindmap-pane-height, 360px);
   }
   .mindmap-preview-actions {
     top: 6px;

package/src/components/Mindmap/editor/MindmapView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { CanvasEditor, serializeSubtree } from '@tnotesjs/mindmap-core'
 import type {
   CanvasContextRequest,
+  CanvasEditState,
   CanvasLinkHover,
+  CanvasLinkRequest,
   InlineFormat,
   MindmapNode,
   MindmapSession
@@ -33,6 +35,27 @@ const emit = defineEmits<{
 const host = ref<HTMLElement>()
 let editor: CanvasEditor | null = null
 const selectedCount = ref(0)
+/** 选中的不全是图片节点；图片说明是纯文本，不出格式按钮 */
+const selectionFormattable = ref(true)
+/** 内联编辑态：编辑框里有文字选区时，弹出与大纲视图同一套文字格式工具栏 */
+const editState = ref<CanvasEditState | null>(null)
+const selectionLink = ref<CanvasLinkRequest | null>(null)
+const textSelection = computed(() => {
+  const state = editState.value
+  return state && !state.image ? state.selection : null
+})
+const textFormats = computed<Partial<Record<InlineFormat, boolean>>>(() => {
+  const state = editState.value
+  const selection = textSelection.value
+  if (!state || !selection) return {}
+  const formats: InlineFormat[] = ['bold', 'italic', 'underline', 'strike', 'highlight', 'code']
+  return Object.fromEntries(
+    formats.map((format) => [
+      format,
+      props.session.inlineFormatActive(state.nodeId, selection.start, selection.end, format)
+    ])
+  )
+})
 const linkEditor = ref<CanvasLinkHover | null>(null)
 const contextMenu = ref<CanvasContextRequest | null>(null)
 let linkCloseTimer: ReturnType<typeof setTimeout> | null = null
@@ -87,6 +110,41 @@ function applyNodeFormat(format: InlineFormat) {
   props.session.formatSelectedNodes(format)
 }
 
+function formatEditing(format: InlineFormat) {
+  editor?.formatEditing(format)
+}
+
+function clearEditingFormats() {
+  editor?.clearEditingFormats()
+}
+
+function linkEditing() {
+  editor?.linkEditing()
+}
+
+function toggleEditingTask() {
+  editor?.commitEditing()
+  props.session.toggleTaskSelectedNodes()
+}
+
+function removeEditingNode() {
+  editor?.commitEditing()
+  props.session.removeSelectedNodes()
+}
+
+function saveSelectionLink(url: string) {
+  const request = selectionLink.value
+  selectionLink.value = null
+  if (!request) return
+  props.session.setNodeInlineLink(request.nodeId, request.start, request.end, url.trim() || null)
+}
+
+function removeSelectionLink() {
+  const request = selectionLink.value
+  selectionLink.value = null
+  if (request) props.session.setNodeInlineLink(request.nodeId, request.start, request.end, null)
+}
+
 function selectedMarkdown() {
   return selectedRoots()
     .map((node) => serializeSubtree(node))
@@ -167,6 +225,14 @@ onMounted(() => {
     onSelectionPositionChange: (_position, count) => {
       // Canvas toolbar is absolutely anchored; only the selection count gates visibility.
       selectedCount.value = count
+      selectionFormattable.value = !props.session.selectedNodes.every((node) => node.content.image)
+    },
+    onEditStateChange: (state) => {
+      editState.value = state
+    },
+    onRequestLink: (request) => {
+      linkEditor.value = null
+      selectionLink.value = request
     },
     onLinkHover: onCanvasLinkHover,
     onContextMenu: (request) => {
@@ -204,9 +270,22 @@ onBeforeUnmount(() => {
   <div class="mindmap-view-root">
     <div ref="host" class="mindmap-view-host" />
     <SelectionToolbar
-      v-if="selectedCount > 0"
+      v-if="textSelection && !selectionLink"
+      mode="text"
+      :position="textSelection.position"
+      :active-formats="textFormats"
+      :can-insert-image="false"
+      @format="formatEditing"
+      @task="toggleEditingTask"
+      @link="linkEditing"
+      @clear="clearEditingFormats"
+      @delete="removeEditingNode"
+    />
+    <SelectionToolbar
+      v-else-if="selectedCount > 0 && !editState"
       mode="nodes"
       placement="canvas-bottom"
+      :formattable="selectionFormattable"
       @format="applyNodeFormat"
       @task="props.session.toggleTaskSelectedNodes()"
       @copy="copySelected"
@@ -224,6 +303,16 @@ onBeforeUnmount(() => {
       @leave="closeLinkPopoverSoon"
       @close="linkEditor = null"
     />
+    <LinkPopover
+      v-if="selectionLink"
+      :url="selectionLink.url"
+      :position="selectionLink.position"
+      :teleport-to="teleportTo"
+      start-editing
+      @save="saveSelectionLink"
+      @remove="removeSelectionLink"
+      @close="selectionLink = null"
+    />
     <CanvasContextMenu
       v-if="contextMenu"
       :position="contextMenu.position"

package/src/components/Mindmap/editor/OutlineView.vue

@@ -361,7 +361,7 @@ function selectionPosition(input: RichInlineEditorElement): { left: number; top:
 function syncTextSelection(nodeId: string, input: RichInlineEditorElement) {
   const start = input.selectionStart ?? 0
   const end = input.selectionEnd ?? 0
-  if (start === end) {
+  if (start === end || props.session.document.find(nodeId)?.content.image) {
     if (textSelection.value?.nodeId === nodeId) textSelection.value = null
     return
   }
@@ -713,6 +713,8 @@ function applyInputFormatShortcut(
   input: RichInlineEditorElement,
   format: InlineFormat
 ) {
+  // 图片节点的文字是图片说明：纯文本，不接受行内格式
+  if (node.content.image) return
   const caretStart = input.selectionStart ?? 0
   const caretEnd = input.selectionEnd ?? 0
   if (input.value.length === 0) return
@@ -741,6 +743,8 @@ function applyInputFormatShortcut(
 }
 
 function applyInputClearFormats(node: MindmapNode, input: RichInlineEditorElement) {
+  // 图片节点的文字是图片说明：纯文本，不接受行内格式
+  if (node.content.image) return
   const caretStart = input.selectionStart ?? 0
   const caretEnd = input.selectionEnd ?? 0
   if (input.value.length === 0) return
@@ -2341,7 +2345,7 @@ function onDragUp() {
   position: relative;
   max-width: 100%;
   line-height: 0;
-  border-radius: 6px;
+  border-radius: 4px;
   overflow: hidden;
   background: color-mix(in srgb, var(--mm-text-dim) 12%, transparent);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--mm-text-dim) 25%, transparent);

package/src/components/Mindmap/editor/RichInlineEditor.vue

@@ -416,16 +416,17 @@ onBeforeUnmount(emitCommit)
 .rich-inline-editor :deep(.inline-run.highlight:not(.code)) {
   padding: 0 1px;
   border-radius: 2px;
-  background: #fff36a;
-  color: #242424;
+  background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
 }
 .rich-inline-editor :deep(.inline-run.code) {
-  padding: 2px 6px;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--mm-text) 18%, transparent);
-  color: #f08a6e;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.92em;
+  padding: 0 4px;
+  border: 1px solid var(--tn-c-inline-code-border, #e7e9e8);
+  border-radius: 4px;
+  background: var(--tn-c-inline-code-bg, rgba(0, 0, 0, 0.06));
+  color: inherit;
+  font-family: var(--tn-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 1em;
+  font-weight: 400;
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
 }

package/src/components/Mindmap/editor/SelectionToolbar.vue

@@ -16,8 +16,18 @@ const props = withDefaults(
      */
     placement?: 'fixed' | 'canvas-bottom'
     activeFormats?: Partial<Record<InlineFormat, boolean>>
+    /** 宿主没有插入图片入口时隐藏（脑图编辑框） */
+    canInsertImage?: boolean
+    /** 选中的全是图片节点时为 false：图片说明是纯文本，不出格式按钮 */
+    formattable?: boolean
   }>(),
-  { placement: 'fixed', position: undefined, activeFormats: undefined }
+  {
+    placement: 'fixed',
+    position: undefined,
+    activeFormats: undefined,
+    canInsertImage: true,
+    formattable: true
+  }
 )
 
 const emit = defineEmits<{
@@ -90,21 +100,24 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
     role="toolbar"
     :aria-label="mode === 'text' ? '文字格式工具栏' : '多主题工具栏'"
     @pointerdown.prevent
+    @mousedown.prevent
   >
-    <button
-      v-for="item in formats"
-      :key="item.id"
-      type="button"
-      class="format-button"
-      :class="[{ active: activeFormats?.[item.id] }, `is-${item.id}`]"
-      :data-tooltip="item.label"
-      :aria-label="item.label"
-      @click="emit('format', item.id)"
-    >
-      <AppIcon v-if="item.id === 'highlight'" name="highlight" :size="21" />
-      <template v-else>{{ item.text }}</template>
-    </button>
-    <span class="toolbar-divider" />
+    <template v-if="formattable">
+      <button
+        v-for="item in formats"
+        :key="item.id"
+        type="button"
+        class="format-button"
+        :class="[{ active: activeFormats?.[item.id] }, `is-${item.id}`]"
+        :data-tooltip="item.label"
+        :aria-label="item.label"
+        @click="emit('format', item.id)"
+      >
+        <AppIcon v-if="item.id === 'highlight'" name="highlight" :size="21" />
+        <template v-else>{{ item.text }}</template>
+      </button>
+      <span class="toolbar-divider" />
+    </template>
     <button
       type="button"
       class="tool-button"
@@ -116,6 +129,7 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
     </button>
     <template v-if="mode === 'text'">
       <button
+        v-if="canInsertImage"
         type="button"
         class="tool-button"
         :data-tooltip="`添加图片 (${altShortcut('Enter')})`"
@@ -135,12 +149,12 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
       </button>
       <button
         type="button"
-        class="tool-button code-button"
+        class="tool-button"
         :data-tooltip="`行内代码 (${primaryShortcut('E')})`"
         aria-label="行内代码"
         @click="emit('format', 'code')"
       >
-        &lt;/&gt;
+        <AppIcon name="code" :size="20" />
       </button>
     </template>
     <button
@@ -155,6 +169,7 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
     </button>
     <span class="toolbar-divider" />
     <button
+      v-if="formattable"
       type="button"
       class="tool-button"
       :data-tooltip="`清除样式 (${primaryShortcut('\\')})`"
@@ -217,7 +232,13 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
 .tool-button::after {
   position: absolute;
   z-index: 2;
+  /* 宿主可能有全局 [data-tooltip]::after（例如 Desk 往下弹），这里把方向和显隐都定死 */
+  top: auto;
   bottom: calc(100% + 9px);
+  min-width: 0;
+  border: 0;
+  visibility: visible;
+  transition: none;
   left: 50%;
   width: max-content;
   max-width: min(260px, calc(100vw - 16px));
@@ -266,11 +287,6 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
 .format-button.is-highlight {
   color: #d3c900;
 }
-.tool-button.code-button {
-  font-family: ui-monospace, monospace;
-  font-size: 15px;
-  font-weight: 700;
-}
 .tool-button.danger {
   color: #e14f5b;
 }