@tnotesjs/ui 0.1.0

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

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  parseInlineSegments,
+  nextGraphemeOffset,
+  previousGraphemeOffset,
+  replaceInlineDisplayText,
+  replaceInlineRange,
+  richSelectionOffsets,
+  setRichSelection,
+  stripInline,
+} from '@tnotesjs/mindmap-core'
+import type { InlineLink, RichInlineEditorElement } from '@tnotesjs/mindmap-core'
+
+const props = withDefaults(defineProps<{
+  editorId: string
+  raw: string
+  active: boolean
+  done?: boolean
+  placeholder?: string
+  pasteMode?: 'single-line' | 'outline'
+}>(), {
+  done: false,
+  placeholder: '',
+  pasteMode: 'single-line',
+})
+
+interface DraftPayload {
+  raw: string
+  text: string
+}
+
+const emit = defineEmits<{
+  draftChange: [payload: DraftPayload]
+  commit: [payload: DraftPayload]
+  pasteImage: [blob: Blob]
+  pasteMultiline: [text: string]
+  linkEnter: [link: InlineLink, event: MouseEvent]
+  linkLeave: []
+  linkClick: [link: InlineLink, event: Event]
+}>()
+
+const rootRef = ref<RichInlineEditorElement>()
+const draftRaw = ref(props.raw)
+let sourceRaw = props.raw
+let dirty = false
+let composing = false
+let compositionBaseRaw = props.raw
+
+const text = computed(() => stripInline(draftRaw.value))
+
+function renderInlineDom() {
+  const root = rootRef.value
+  if (!root) return
+  const fragment = document.createDocumentFragment()
+  let plainOffset = 0
+  for (const segment of parseInlineSegments(draftRaw.value)) {
+    const run = document.createElement('span')
+    run.className = 'inline-run'
+    for (const format of ['bold', 'italic', 'underline', 'strike', 'highlight', 'code'] as const) {
+      if (segment.marks[format]) run.classList.add(format)
+    }
+    if (segment.link) {
+      run.classList.add('link')
+      run.dataset.linkUrl = segment.link.url
+      run.dataset.linkRawStart = String(segment.link.rawStart)
+      run.dataset.linkRawEnd = String(segment.link.rawEnd)
+      if (!props.active) {
+        run.setAttribute('role', 'link')
+        run.tabIndex = 0
+      }
+      run.addEventListener('mouseenter', (event) => {
+        if (!props.active) emit('linkEnter', segment.link!, event)
+      })
+      run.addEventListener('mouseleave', () => {
+        if (!props.active) emit('linkLeave')
+      })
+    }
+    run.dataset.plainStart = String(plainOffset)
+    plainOffset += segment.text.length
+    run.dataset.plainEnd = String(plainOffset)
+    run.textContent = segment.text
+    fragment.append(run)
+  }
+  root.replaceChildren(fragment)
+}
+
+function payload(): DraftPayload {
+  return { raw: draftRaw.value, text: stripInline(draftRaw.value) }
+}
+
+function renderDraft(nextRaw: string, selection?: { start: number; end?: number; direction?: 'forward' | 'backward' }) {
+  draftRaw.value = nextRaw
+  dirty = nextRaw !== sourceRaw
+  renderInlineDom()
+  emit('draftChange', payload())
+  if (selection) {
+    nextTick(() => {
+      const root = rootRef.value
+      if (!root || !props.active) return
+      root.focus()
+      setRichSelection(root, selection.start, selection.end ?? selection.start, selection.direction)
+    })
+  }
+}
+
+function replaceSelection(textToInsert: string) {
+  const root = rootRef.value
+  if (!root) return
+  const selection = richSelectionOffsets(root) ?? {
+    start: text.value.length,
+    end: text.value.length,
+    anchor: text.value.length,
+    focus: text.value.length,
+    direction: 'forward' as const,
+  }
+  const nextRaw = replaceInlineRange(draftRaw.value, selection.start, selection.end, textToInsert)
+  const caret = selection.start + textToInsert.length
+  renderDraft(nextRaw, { start: caret })
+}
+
+function emitCommit() {
+  if (!dirty) return
+  const current = payload()
+  dirty = false
+  sourceRaw = current.raw
+  emit('commit', current)
+}
+
+function onBeforeInput(event: InputEvent) {
+  if (composing || event.isComposing) return
+  const root = rootRef.value
+  if (!root) return
+  const selection = richSelectionOffsets(root) ?? {
+    start: text.value.length,
+    end: text.value.length,
+    anchor: text.value.length,
+    focus: text.value.length,
+    direction: 'forward' as const,
+  }
+
+  if (event.inputType === 'insertText' || event.inputType === 'insertReplacementText') {
+    if (event.data == null) return
+    event.preventDefault()
+    const nextRaw = replaceInlineRange(draftRaw.value, selection.start, selection.end, event.data)
+    renderDraft(nextRaw, { start: selection.start + event.data.length })
+    return
+  }
+
+  if (event.inputType === 'deleteContentBackward') {
+    event.preventDefault()
+    const start = selection.start === selection.end
+      ? previousGraphemeOffset(text.value, selection.start)
+      : selection.start
+    renderDraft(replaceInlineRange(draftRaw.value, start, selection.end, ''), { start })
+    return
+  }
+
+  if (event.inputType === 'deleteContentForward') {
+    event.preventDefault()
+    const end = selection.start === selection.end
+      ? nextGraphemeOffset(text.value, selection.end)
+      : selection.end
+    renderDraft(replaceInlineRange(draftRaw.value, selection.start, end, ''), { start: selection.start })
+    return
+  }
+
+  if (event.inputType === 'deleteByCut') {
+    event.preventDefault()
+    renderDraft(replaceInlineRange(draftRaw.value, selection.start, selection.end, ''), { start: selection.start })
+    return
+  }
+
+  if (
+    event.inputType === 'insertParagraph' ||
+    event.inputType === 'insertLineBreak' ||
+    event.inputType === 'historyUndo' ||
+    event.inputType === 'historyRedo'
+  ) {
+    event.preventDefault()
+  }
+}
+
+/** 浏览器拼写替换等未被 beforeinput 精确接管的输入，回退为纯文本最小差异。 */
+function onInput(event: InputEvent) {
+  if (composing || event.isComposing) return
+  const root = rootRef.value
+  if (!root) return
+  const nextText = (root.textContent ?? '').replace(/[\r\n]/g, '')
+  if (nextText === text.value) return
+  const selection = richSelectionOffsets(root)
+  renderDraft(replaceInlineDisplayText(draftRaw.value, nextText), selection ?? undefined)
+}
+
+function onCompositionStart() {
+  composing = true
+  compositionBaseRaw = draftRaw.value
+}
+
+function finishComposition() {
+  if (!composing) return
+  const root = rootRef.value
+  if (!root) return
+  const nextText = (root.textContent ?? '').replace(/[\r\n]/g, '')
+  const selection = richSelectionOffsets(root)
+  composing = false
+  renderDraft(replaceInlineDisplayText(compositionBaseRaw, nextText), selection ?? undefined)
+}
+
+function onCompositionEnd() {
+  finishComposition()
+}
+
+function onPaste(event: ClipboardEvent) {
+  event.preventDefault()
+  const image = [...(event.clipboardData?.items ?? [])]
+    .find((item) => item.kind === 'file' && item.type.startsWith('image/'))
+    ?.getAsFile()
+  if (image) {
+    emitCommit()
+    emit('pasteImage', image)
+    return
+  }
+  const plain = event.clipboardData?.getData('text/plain') ?? ''
+  if (props.pasteMode === 'outline' && /\r?\n/.test(plain)) {
+    emitCommit()
+    emit('pasteMultiline', plain)
+    return
+  }
+  replaceSelection(plain.replace(/\r?\n/g, ' '))
+}
+
+function onBlur() {
+  finishComposition()
+  emitCommit()
+}
+
+function onLinkClick(link: InlineLink, event: Event) {
+  if (props.active) return
+  emit('linkClick', link, event)
+}
+
+function linkFromTarget(target: EventTarget | null): { element: HTMLElement; link: InlineLink } | null {
+  const element = target instanceof HTMLElement ? target.closest<HTMLElement>('.inline-run.link') : null
+  const root = rootRef.value
+  if (!element || !root?.contains(element) || !element.dataset.linkUrl) return null
+  return {
+    element,
+    link: {
+      url: element.dataset.linkUrl,
+      rawStart: Number(element.dataset.linkRawStart ?? 0),
+      rawEnd: Number(element.dataset.linkRawEnd ?? 0),
+    },
+  }
+}
+
+function onMouseOver(event: MouseEvent) {
+  if (props.active) return
+  const found = linkFromTarget(event.target)
+  if (!found || (event.relatedTarget instanceof Node && found.element.contains(event.relatedTarget))) return
+  emit('linkEnter', found.link, event)
+}
+
+function onMouseOut(event: MouseEvent) {
+  if (props.active) return
+  const found = linkFromTarget(event.target)
+  if (!found || (event.relatedTarget instanceof Node && found.element.contains(event.relatedTarget))) return
+  emit('linkLeave')
+}
+
+function onClick(event: MouseEvent) {
+  const found = linkFromTarget(event.target)
+  if (found) onLinkClick(found.link, event)
+}
+
+function onRootKeydown(event: KeyboardEvent) {
+  if (props.active || event.key !== 'Enter') return
+  const found = linkFromTarget(event.target)
+  if (!found) return
+  event.preventDefault()
+  emit('linkClick', found.link, event)
+}
+
+function installCompatibilityApi(root: RichInlineEditorElement) {
+  Object.defineProperties(root, {
+    value: {
+      configurable: true,
+      get: () => stripInline(draftRaw.value),
+      set: (next: string) => {
+        renderDraft(replaceInlineDisplayText(draftRaw.value, String(next)))
+      },
+    },
+    rawValue: { configurable: true, get: () => draftRaw.value },
+    selectionStart: { configurable: true, get: () => richSelectionOffsets(root)?.start ?? 0 },
+    selectionEnd: { configurable: true, get: () => richSelectionOffsets(root)?.end ?? 0 },
+    isDirty: { configurable: true, get: () => dirty },
+    isComposing: { configurable: true, get: () => composing },
+  })
+  root.setSelectionRange = (start: number, end: number) => setRichSelection(root, start, end)
+  root.markCommitted = () => {
+    dirty = false
+    sourceRaw = draftRaw.value
+  }
+}
+
+onMounted(() => {
+  if (rootRef.value) {
+    installCompatibilityApi(rootRef.value)
+    renderInlineDom()
+  }
+})
+
+watch(
+  () => props.raw,
+  (raw) => {
+    sourceRaw = raw
+    dirty = false
+    if (composing) return
+    if (draftRaw.value !== raw) {
+      draftRaw.value = raw
+      renderInlineDom()
+    }
+  },
+)
+
+watch(
+  () => props.active,
+  (active) => {
+    if (!active) emitCommit()
+    if (!composing && !dirty) renderInlineDom()
+  },
+)
+
+onBeforeUnmount(emitCommit)
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="rich-inline-editor"
+    :class="{ active, done }"
+    :contenteditable="active ? 'true' : 'false'"
+    :data-id="editorId"
+    :data-empty="text.length === 0 ? 'true' : undefined"
+    :data-placeholder="placeholder"
+    :tabindex="active ? 0 : -1"
+    role="textbox"
+    aria-multiline="false"
+    spellcheck="false"
+    @beforeinput="onBeforeInput"
+    @input="onInput"
+    @compositionstart="onCompositionStart"
+    @compositionend="onCompositionEnd"
+    @paste="onPaste"
+    @blur="onBlur"
+    @mouseover="onMouseOver"
+    @mouseout="onMouseOut"
+    @click="onClick"
+    @keydown="onRootKeydown"
+  />
+</template>
+
+<style scoped>
+.rich-inline-editor {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  caret-color: var(--mm-accent, var(--mm-text, #3b82f6));
+}
+.rich-inline-editor[data-empty='true']::before {
+  content: attr(data-placeholder);
+  color: var(--mm-text-dim);
+  pointer-events: none;
+}
+.rich-inline-editor.active { cursor: text; }
+.rich-inline-editor :deep(.inline-run.bold) { font-weight: 700; }
+.rich-inline-editor :deep(.inline-run.italic) { font-style: italic; }
+.rich-inline-editor :deep(.inline-run.underline) { text-decoration-line: underline; text-underline-offset: 3px; }
+.rich-inline-editor :deep(.inline-run.strike) { text-decoration-line: line-through; }
+.rich-inline-editor :deep(.inline-run.underline.strike) { text-decoration-line: underline line-through; }
+.rich-inline-editor :deep(.inline-run.highlight:not(.code)) { padding: 0 1px; border-radius: 2px; background: #fff36a; color: #242424; }
+.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: .92em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.rich-inline-editor :deep(.inline-run.link) { color: var(--mm-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+.rich-inline-editor.done { color: var(--mm-text-dim); text-decoration: line-through; }
+</style>

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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import AppIcon from './AppIcon.vue'
+import type { InlineFormat } from '@tnotesjs/mindmap-core'
+import { altShortcut, primaryShortcut } from './platform'
+
+const props = withDefaults(
+  defineProps<{
+    mode: 'text' | 'nodes'
+    /** Viewport coords for `fixed` placement (outline / text selection). */
+    position?: { left: number; top: number }
+    /**
+     * `canvas-bottom`: pin to the mindmap canvas (absolute) so page scroll cannot
+     * leave a floating orphan over foreign content.
+     * `fixed`: follow `position` in viewport space (outline / text carets).
+     */
+    placement?: 'fixed' | 'canvas-bottom'
+    activeFormats?: Partial<Record<InlineFormat, boolean>>
+  }>(),
+  { placement: 'fixed' },
+)
+
+const emit = defineEmits<{
+  format: [format: InlineFormat]
+  task: []
+  image: []
+  link: []
+  copy: []
+  clear: []
+  delete: []
+}>()
+
+const formats: Array<{ id: InlineFormat; text: string; label: string }> = [
+  { id: 'bold', text: 'B', label: `加粗 (${primaryShortcut('B')})` },
+  { id: 'italic', text: 'I', label: `斜体 (${primaryShortcut('I')})` },
+  { id: 'underline', text: 'U', label: `下划线 (${primaryShortcut('U')})` },
+  { id: 'strike', text: 'S', label: `删除线 (${primaryShortcut('Enter')})` },
+  { id: 'highlight', text: '▰', label: '高亮' },
+]
+
+const toolbarRef = ref<HTMLElement | null>(null)
+const toolbarSize = ref({ width: 430, height: 46 })
+const VIEWPORT_MARGIN = 8
+const ANCHOR_GAP = 8
+
+const toolbarStyle = computed(() => {
+  if (props.placement === 'canvas-bottom') return undefined
+  const point = props.position
+  if (!point) return undefined
+  const viewportWidth = typeof window === 'undefined' ? 1024 : window.innerWidth
+  const viewportHeight = typeof window === 'undefined' ? 768 : window.innerHeight
+  const { width, height } = toolbarSize.value
+  const maxLeft = Math.max(VIEWPORT_MARGIN, viewportWidth - width - VIEWPORT_MARGIN)
+  const maxTop = Math.max(VIEWPORT_MARGIN, viewportHeight - height - VIEWPORT_MARGIN)
+  const left = Math.min(maxLeft, Math.max(VIEWPORT_MARGIN, point.left - width / 2))
+  const preferredTop = point.top - height - ANCHOR_GAP
+  const belowTop = point.top + ANCHOR_GAP
+  const top = Math.min(maxTop, Math.max(VIEWPORT_MARGIN, preferredTop < VIEWPORT_MARGIN ? belowTop : preferredTop))
+  return { left: `${left}px`, top: `${top}px` }
+})
+
+function measureToolbar() {
+  nextTick(() => {
+    const rect = toolbarRef.value?.getBoundingClientRect()
+    if (!rect || rect.width <= 0 || rect.height <= 0) return
+    toolbarSize.value = { width: rect.width, height: rect.height }
+  })
+}
+
+watch(
+  () => [props.mode, props.placement, props.position?.left, props.position?.top],
+  measureToolbar,
+)
+onMounted(() => {
+  measureToolbar()
+  window.addEventListener('resize', measureToolbar)
+})
+onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
+</script>
+
+<template>
+  <div
+    ref="toolbarRef"
+    class="selection-toolbar"
+    :class="{ 'is-canvas-anchored': placement === 'canvas-bottom' }"
+    :style="toolbarStyle"
+    role="toolbar"
+    :aria-label="mode === 'text' ? '文字格式工具栏' : '多主题工具栏'"
+    @pointerdown.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" />
+      <button type="button" class="tool-button" :data-tooltip="`添加/取消待办 (${primaryShortcut('L', { shift: true })})`" aria-label="添加或取消待办" @click="emit('task')">
+        <AppIcon name="check" :size="20" />
+      </button>
+      <template v-if="mode === 'text'">
+        <button type="button" class="tool-button" :data-tooltip="`添加图片 (${altShortcut('Enter')})`" aria-label="添加图片" @click="emit('image')"><AppIcon name="image" :size="20" /></button>
+        <button type="button" class="tool-button" :data-tooltip="`添加链接 (${primaryShortcut('K')})`" aria-label="添加链接" @click="emit('link')"><AppIcon name="link" :size="20" /></button>
+        <button type="button" class="tool-button code-button" :data-tooltip="`行内代码 (${primaryShortcut('E')})`" aria-label="行内代码" @click="emit('format', 'code')">&lt;/&gt;</button>
+      </template>
+      <button v-else type="button" class="tool-button" :data-tooltip="`复制 (${primaryShortcut('C')})`" aria-label="复制所选主题" @click="emit('copy')"><AppIcon name="copy" :size="20" /></button>
+      <span class="toolbar-divider" />
+      <button type="button" class="tool-button" :data-tooltip="`清除样式 (${primaryShortcut('\\')})`" aria-label="清除样式" @click="emit('clear')"><AppIcon name="clearFormat" :size="20" /></button>
+      <button type="button" class="tool-button danger" :data-tooltip="`删除 (${primaryShortcut('D', { shift: true })})`" aria-label="删除" @click="emit('delete')"><AppIcon name="trash" :size="20" /></button>
+    </div>
+</template>
+
+<style scoped>
+.selection-toolbar {
+  position: fixed;
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 46px;
+  padding: 5px 7px;
+  border: 1px solid color-mix(in srgb, var(--mm-border) 85%, transparent);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--mm-panel-bg) 94%, #545760 6%);
+  color: var(--mm-text);
+  box-shadow: 0 10px 30px rgb(0 0 0 / .24);
+}
+.selection-toolbar.is-canvas-anchored {
+  position: absolute;
+  left: 50%;
+  right: auto;
+  top: auto;
+  bottom: 18px;
+  transform: translateX(-50%);
+}
+.format-button, .tool-button {
+  position: relative;
+  display: inline-flex;
+  width: 34px;
+  height: 34px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 21px;
+}
+.format-button::after, .tool-button::after {
+  position: absolute;
+  z-index: 2;
+  bottom: calc(100% + 9px);
+  left: 50%;
+  width: max-content;
+  max-width: min(260px, calc(100vw - 16px));
+  padding: 7px 10px;
+  border-radius: 7px;
+  background: #f5f5f7;
+  color: #25262b;
+  box-shadow: 0 5px 18px rgb(0 0 0 / .22);
+  content: attr(data-tooltip);
+  font-family: system-ui, sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.2;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.format-button:hover::after, .tool-button:hover::after,
+.format-button:focus-visible::after, .tool-button:focus-visible::after { opacity: 1; }
+.format-button:hover, .tool-button:hover, .format-button.active { background: var(--mm-hover); color: var(--mm-accent); }
+.format-button.is-bold { font-weight: 800; }
+.format-button.is-italic { font-family: Georgia, serif; font-style: italic; }
+.format-button.is-underline { text-decoration: underline; text-underline-offset: 4px; }
+.format-button.is-strike { text-decoration: line-through; }
+.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; }
+.toolbar-divider { width: 1px; height: 25px; margin: 0 3px; background: var(--mm-border); }
+</style>

package/src/components/Mindmap/editor/canvasClipboard.ts

@@ -0,0 +1,6 @@
+/** @deprecated Import from `./mindmapClipboard` — kept so Vite stale graphs do not 404. */
+export {
+  pasteCanvasOutline,
+  readMindmapClipboard,
+  writeMindmapClipboard,
+} from './mindmapClipboard'

package/src/components/Mindmap/editor/imagePaste.ts

@@ -0,0 +1,32 @@
+/**
+ * 源码视图只支持“整节点图片”，不支持把图片嵌进普通文字。
+ * 空列表项会在原位变成图片；其它位置统一追加一个顶级图片节点，避免破坏树层级。
+ */
+export function insertImageIntoSource(
+  markdown: string,
+  selectionStart: number,
+  selectionEnd: number,
+  relativePath: string,
+  alt = '截图',
+): string {
+  const image = `![${alt.replace(/\]/g, '').trim() || '截图'}](${relativePath})`
+  const start = Math.max(0, Math.min(markdown.length, selectionStart))
+  const end = Math.max(start, Math.min(markdown.length, selectionEnd))
+  const lineStart = markdown.lastIndexOf('\n', start - 1) + 1
+  const nextBreak = markdown.indexOf('\n', end)
+  const lineEnd = nextBreak < 0 ? markdown.length : nextBreak
+  const line = markdown.slice(lineStart, lineEnd)
+  const list = /^(\s*[-*+]\s+)(.*)$/.exec(line)
+
+  if (list) {
+    const contentStart = lineStart + list[1].length
+    const contentEnd = lineEnd
+    const replacesWholeContent = start <= contentStart && end >= contentEnd
+    if (list[2].trim() === '' || replacesWholeContent) {
+      return `${markdown.slice(0, contentStart)}${image}${markdown.slice(contentEnd)}`
+    }
+  }
+
+  const body = markdown.trimEnd()
+  return `${body}${body ? '\n\n' : ''}- ${image}\n`
+}