@tnotesjs/ui 0.1.0

package/src/components/Mindmap/MindmapOutlineNode.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import InlineRuns from './InlineRuns'
+
+import type { MindmapNode } from '@tnotesjs/mindmap-core'
+
+defineOptions({ name: 'MindmapOutlineNode' })
+
+defineProps<{
+  node: MindmapNode
+  version: number
+  root?: boolean
+}>()
+
+defineEmits<{
+  toggle: [id: string]
+}>()
+</script>
+
+<template>
+  <li class="mindmap-outline-node" :class="{ 'is-root': root, 'is-done': node.content.checked === true }">
+    <div class="mindmap-outline-row">
+      <button
+        v-if="node.children.length > 0"
+        type="button"
+        class="mindmap-outline-toggle"
+        :aria-label="node.collapsed ? '展开主题' : '折叠主题'"
+        :aria-expanded="!node.collapsed"
+        @click="$emit('toggle', node.id)"
+      >
+        {{ node.collapsed ? '›' : '⌄' }}
+      </button>
+      <span v-else class="mindmap-outline-leaf" aria-hidden="true">•</span>
+      <input
+        v-if="node.content.checked !== null && !root"
+        class="mindmap-outline-checkbox"
+        type="checkbox"
+        :checked="node.content.checked"
+        disabled
+        aria-label="只读待办状态"
+      />
+      <span class="mindmap-outline-label">
+        <InlineRuns :raw="node.content.image ? node.content.text : node.content.raw" />
+      </span>
+    </div>
+    <img
+      v-if="node.content.image"
+      class="mindmap-outline-image"
+      :src="node.content.image.src"
+      :alt="node.content.image.alt"
+      :style="node.content.image.width ? { width: `${node.content.image.width}px` } : undefined"
+    />
+    <ul v-if="node.children.length > 0 && !node.collapsed" class="mindmap-outline-children">
+      <MindmapOutlineNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :version="version"
+        @toggle="$emit('toggle', $event)"
+      />
+    </ul>
+  </li>
+</template>

package/src/components/Mindmap/MindmapViewIcon.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  view: 'mindmap' | 'outline' | 'source'
+}>()
+</script>
+
+<template>
+  <svg v-if="view === 'mindmap'" aria-hidden="true" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none" />
+    <path
+      d="M26 24h16M26 38h16M26 10h16M18 24H6h4m8 14c-6-2-2-14-8-14m8-14c-6 2-2 14-8 14"
+      fill="none"
+      stroke="#636cff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+    />
+  </svg>
+  <svg v-else-if="view === 'outline'" aria-hidden="true" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none" />
+    <path
+      d="M26 24h18m-30 0h4m0 14h26M6 38h4m8-28h26M6 10h4"
+      fill="none"
+      stroke="#636cff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+    />
+  </svg>
+  <svg v-else aria-hidden="true" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="m17 8 1.84 1.85c.773.778 1.16 1.167 1.16 1.65s-.387.872-1.16 1.65L17 15M7 8 5.16 9.85C4.387 10.628 4 11.017 4 11.5s.387.872 1.16 1.65L7 15m7.5-11-5 16"
+      fill="none"
+      stroke="#636cff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+defineProps<{ name: string; size?: number }>()
+</script>
+
+<template>
+  <svg
+    class="app-icon"
+    :width="size ?? 18"
+    :height="size ?? 18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <template v-if="name === 'menu'">
+      <path d="M4 6h16M4 12h16M4 18h16" />
+    </template>
+    <template v-else-if="name === 'new'">
+      <path d="M6 3h9l3 3v15H6zM14 3v4h4M12 10v7M8.5 13.5h7" />
+    </template>
+    <template v-else-if="name === 'folder' || name === 'openProject'">
+      <path d="M3 6h7l2 2h9v11H3z" />
+      <path v-if="name === 'openProject'" d="m10 15 2 2 4-4" />
+    </template>
+    <template v-else-if="name === 'save'">
+      <path d="M5 3h12l2 2v16H5zM8 3v6h8V3M8 15h8" />
+    </template>
+    <template v-else-if="name === 'download'">
+      <path d="M12 3v12m-4-4 4 4 4-4M4 19h16" />
+    </template>
+    <template v-else-if="name === 'undo'">
+      <path d="m9 7-5 5 5 5M4 12h9a6 6 0 0 1 6 6" />
+    </template>
+    <template v-else-if="name === 'redo'">
+      <path d="m15 7 5 5-5 5M20 12h-9a6 6 0 0 0-6 6" />
+    </template>
+    <template v-else-if="name === 'search'">
+      <circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" />
+    </template>
+    <template v-else-if="name === 'collapse'">
+      <path d="M5 5h6v6H5zM13 13h6v6h-6zM8 11v5h5M15 3v7m-3-3 3 3 3-3" />
+    </template>
+    <template v-else-if="name === 'focus'">
+      <path d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" />
+      <circle cx="12" cy="12" r="3" />
+    </template>
+    <template v-else-if="name === 'zoomIn' || name === 'zoomOut'">
+      <circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5M7.5 10.5h6" />
+      <path v-if="name === 'zoomIn'" d="M10.5 7.5v6" />
+    </template>
+    <template v-else-if="name === 'fit'">
+      <path d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5M8 8h8v8H8z" />
+    </template>
+    <template v-else-if="name === 'more'">
+      <circle cx="5" cy="12" r="1" fill="currentColor" /><circle cx="12" cy="12" r="1" fill="currentColor" /><circle cx="19" cy="12" r="1" fill="currentColor" />
+    </template>
+    <template v-else-if="name === 'image'">
+      <rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m4 17 5-5 3 3 2-2 6 6" />
+    </template>
+    <template v-else-if="name === 'highlight'">
+      <path d="m14.5 4.5 5 5-8.2 8.2-5.6.6.6-5.6zM12.5 6.5l5 5M4 21h16" />
+    </template>
+    <template v-else-if="name === 'link'">
+      <path d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.2 1.2M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.2-1.2" />
+    </template>
+    <template v-else-if="name === 'code'">
+      <path d="m8 5-5 7 5 7M16 5l5 7-5 7M14 3l-4 18" />
+    </template>
+    <template v-else-if="name === 'trash'">
+      <path d="M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14M10 11v6M14 11v6" />
+    </template>
+    <template v-else-if="name === 'copy'">
+      <rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+    </template>
+    <template v-else-if="name === 'check'">
+      <rect x="3" y="3" width="18" height="18" rx="3" /><path d="m7 12 3 3 7-7" />
+    </template>
+    <template v-else-if="name === 'removeLink'">
+      <path d="M9 15 7.5 16.5a5 5 0 0 1-7-7L3 7M15 9l1.5-1.5a5 5 0 0 1 7 7L21 17M3 3l18 18" />
+    </template>
+    <template v-else-if="name === 'edit'">
+      <path d="m4 20 4.2-1 10.6-10.6a2.1 2.1 0 0 0-3-3L5.2 16zM14.8 6.2l3 3" />
+    </template>
+    <template v-else-if="name === 'clearFormat'">
+      <path d="m4 17 7.5-11.5a2 2 0 0 1 2.8-.5l4.2 2.8a2 2 0 0 1 .5 2.8L12.2 21H7zM8.5 14.5l5.8 3.8M3 21h18" />
+    </template>
+    <template v-else-if="name === 'close'">
+      <path d="M5 5l14 14M19 5 5 19" />
+    </template>
+    <template v-else-if="name === 'outline'">
+      <circle cx="5" cy="6" r="1.2" fill="currentColor" /><circle cx="5" cy="12" r="1.2" fill="currentColor" /><circle cx="5" cy="18" r="1.2" fill="currentColor" /><path d="M9 6h11M9 12h8M9 18h10" />
+    </template>
+    <template v-else-if="name === 'mindmap'">
+      <circle cx="12" cy="5" r="2.5" /><circle cx="5" cy="18" r="2.5" /><circle cx="19" cy="18" r="2.5" /><path d="M12 7.5V12M5 15.5V12h14v3.5" />
+    </template>
+    <template v-else-if="name === 'source'">
+      <path d="m9 6-6 6 6 6M15 6l6 6-6 6M14 3l-4 18" />
+    </template>
+  </svg>
+</template>
+
+<style scoped>
+.app-icon { display: block; flex: none; }
+</style>

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

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { isApplePlatform, primaryShortcut } from './platform'
+
+const props = withDefaults(defineProps<{
+  position: { left: number; top: number }
+  multiple?: boolean
+  canInsertSibling?: boolean
+  canInsertParent?: boolean
+  canCut?: boolean
+  canDuplicate?: boolean
+  canDeleteOnly?: boolean
+  canDeleteTree?: boolean
+  canToggleSiblings?: boolean
+  canFocus?: boolean
+}>(), {
+  multiple: false,
+  canInsertSibling: true,
+  canInsertParent: true,
+  canCut: true,
+  canDuplicate: true,
+  canDeleteOnly: true,
+  canDeleteTree: true,
+  canToggleSiblings: true,
+  canFocus: true,
+})
+
+const emit = defineEmits<{
+  close: []
+  insertSibling: []
+  insertChild: []
+  insertParent: []
+  copy: []
+  cut: []
+  paste: []
+  duplicate: []
+  deleteOnly: []
+  deleteTree: []
+  toggleSiblings: []
+  focus: []
+}>()
+
+const menu = ref<HTMLElement>()
+const style = computed(() => {
+  const width = 310
+  const estimatedHeight = props.multiple ? 250 : 570
+  const viewportWidth = typeof window === 'undefined' ? 1440 : window.innerWidth
+  const viewportHeight = typeof window === 'undefined' ? 900 : window.innerHeight
+  return {
+    left: `${Math.max(8, Math.min(props.position.left, viewportWidth - width - 8))}px`,
+    top: `${Math.max(8, Math.min(props.position.top, viewportHeight - estimatedHeight - 8))}px`,
+  }
+})
+const shiftTab = computed(() => isApplePlatform() ? '⇧Tab' : 'Shift+Tab')
+
+type MenuAction =
+  | 'close'
+  | 'insertSibling'
+  | 'insertChild'
+  | 'insertParent'
+  | 'copy'
+  | 'cut'
+  | 'paste'
+  | 'duplicate'
+  | 'deleteOnly'
+  | 'deleteTree'
+  | 'toggleSiblings'
+  | 'focus'
+
+function act(event: MenuAction) {
+  // Vue 的 emit 类型不能从 keyof 精确缩窄，这里统一分发无参数菜单动作。
+  ;(emit as (name: string) => void)(event)
+  if (event !== 'close') emit('close')
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!menu.value?.contains(event.target as Node)) emit('close')
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') emit('close')
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onPointerDown)
+  document.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onPointerDown)
+  document.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<template>
+  <div ref="menu" class="canvas-context-menu" :style="style" role="menu" :aria-label="multiple ? '多主题右键菜单' : '主题右键菜单'" @contextmenu.prevent>
+      <template v-if="!multiple">
+        <button type="button" role="menuitem" :disabled="!canInsertSibling" @click="act('insertSibling')"><span>插入同级主题</span><kbd>Enter</kbd></button>
+        <button type="button" role="menuitem" @click="act('insertChild')"><span>插入下级主题</span><kbd>Tab</kbd></button>
+        <button type="button" role="menuitem" :disabled="!canInsertParent" @click="act('insertParent')"><span>插入上级主题</span><kbd>{{ shiftTab }}</kbd></button>
+        <span class="context-divider" />
+      </template>
+
+      <button type="button" role="menuitem" @click="act('copy')"><span>复制</span><kbd>{{ primaryShortcut('C') }}</kbd></button>
+      <button type="button" role="menuitem" :disabled="!canCut" @click="act('cut')"><span>剪切</span><kbd>{{ primaryShortcut('X') }}</kbd></button>
+
+      <template v-if="!multiple">
+        <button type="button" role="menuitem" @click="act('paste')"><span>粘贴</span><kbd>{{ primaryShortcut('V') }}</kbd></button>
+        <button type="button" role="menuitem" :disabled="!canDuplicate" @click="act('duplicate')"><span>创建副本</span><kbd>{{ primaryShortcut('D') }}</kbd></button>
+        <button type="button" role="menuitem" :disabled="!canDeleteOnly" @click="act('deleteOnly')"><span>仅删除当前主题</span></button>
+      </template>
+
+      <button type="button" role="menuitem" class="danger" :disabled="!canDeleteTree" @click="act('deleteTree')"><span>{{ multiple ? '删除所选主题及下级主题' : '删除当前主题及下级主题' }}</span><kbd>Delete</kbd></button>
+      <span class="context-divider" />
+      <button type="button" role="menuitem" :disabled="!canToggleSiblings" @click="act('toggleSiblings')"><span>展开/折叠同级主题</span><kbd>{{ primaryShortcut('.', { shift: true }) }}</kbd></button>
+      <button v-if="!multiple" type="button" role="menuitem" :disabled="!canFocus" @click="act('focus')"><span>进入此主题</span><kbd>{{ primaryShortcut(']') }}</kbd></button>
+    </div>
+</template>
+
+<style scoped>
+.canvas-context-menu {
+  position: fixed;
+  z-index: 150;
+  display: grid;
+  width: 310px;
+  max-height: calc(100vh - 16px);
+  overflow: auto;
+  padding: 7px;
+  border: 1px solid var(--mm-border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--mm-panel-bg) 96%, #3e424a 4%);
+  color: var(--mm-text);
+  box-shadow: 0 14px 42px rgb(0 0 0 / .28);
+}
+.canvas-context-menu button {
+  display: flex;
+  min-height: 39px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.canvas-context-menu button:hover:not(:disabled),
+.canvas-context-menu button:focus-visible { background: var(--mm-hover); outline: none; }
+.canvas-context-menu button:disabled { cursor: default; opacity: .38; }
+.canvas-context-menu button.danger { color: #e25a62; }
+.canvas-context-menu kbd { flex: none; color: var(--mm-text-dim); font: inherit; font-size: 12px; }
+.context-divider { height: 1px; margin: 6px 2px; background: var(--mm-border); }
+</style>

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import AppIcon from './AppIcon.vue'
+
+const props = withDefaults(defineProps<{
+  url: string
+  position: { left: number; top: number }
+  startEditing?: boolean
+}>(), { startEditing: false })
+const emit = defineEmits<{ save: [url: string]; remove: []; keep: []; leave: []; close: [] }>()
+const draft = ref(props.url)
+const editing = ref(props.startEditing)
+const input = ref<HTMLInputElement>()
+
+watch([() => props.url, () => props.startEditing], ([url, startEditing]) => {
+  draft.value = url
+  editing.value = startEditing
+})
+
+function submit() {
+  const value = draft.value.trim()
+  if (value) emit('save', value)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    submit()
+  } else if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+  }
+}
+
+function beginEdit() {
+  editing.value = true
+  nextTick(() => {
+    input.value?.focus()
+    input.value?.select()
+  })
+}
+
+function focusInput() { beginEdit() }
+defineExpose({ focusInput })
+</script>
+
+<template>
+  <div
+      class="link-popover"
+      :style="{ left: `${position.left}px`, top: `${position.top}px` }"
+      @mouseenter="emit('keep')"
+      @mouseleave="emit('leave')"
+    >
+      <input ref="input" v-model="draft" class="link-input" :class="{ readonly: !editing }" :readonly="!editing" aria-label="链接地址" @dblclick="beginEdit" @keydown="onKeydown" />
+      <button v-if="editing" type="button" class="link-action primary" title="更新链接 (Enter)" aria-label="更新链接" @click="submit">更新</button>
+      <button v-else type="button" class="icon-action" title="编辑链接地址" aria-label="编辑链接地址" @click="beginEdit"><AppIcon name="edit" :size="18" /></button>
+      <button type="button" class="icon-action" title="移除链接，保留文案" aria-label="移除链接" @click="emit('remove')"><AppIcon name="removeLink" :size="18" /></button>
+    </div>
+</template>
+
+<style scoped>
+.link-popover {
+  position: fixed;
+  z-index: 125;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: min(430px, calc(100vw - 24px));
+  padding: 7px;
+  border: 1px solid var(--mm-border);
+  border-radius: 9px;
+  background: var(--mm-panel-bg);
+  box-shadow: 0 10px 28px rgb(0 0 0 / .2);
+  transform: translateX(-50%);
+}
+.link-input { flex: 1; min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--mm-border); border-radius: 6px; outline: 0; background: var(--mm-canvas-bg); color: var(--mm-text); font-size: 13px; }
+.link-input:focus { border-color: var(--mm-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-accent) 20%, transparent); }
+.link-input.readonly { border-color: transparent; color: var(--mm-text-dim); cursor: default; }
+.link-action, .icon-action { height: 32px; border: 0; border-radius: 6px; cursor: pointer; }
+.link-action { padding: 0 11px; background: var(--mm-accent); color: white; }
+.icon-action { display: inline-flex; width: 32px; align-items: center; justify-content: center; background: transparent; color: var(--mm-text-dim); }
+.icon-action:hover { background: var(--mm-hover); color: var(--mm-text); }
+</style>

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+import type { MarkdownDiagnostic } from '@tnotesjs/mindmap-core'
+
+const props = withDefaults(defineProps<{ modelValue: string; diagnostics?: readonly MarkdownDiagnostic[] }>(), {
+  diagnostics: () => [],
+})
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  pasteImage: [blob: Blob, selectionStart: number, selectionEnd: number]
+}>()
+
+const draft = ref(props.modelValue)
+const textarea = ref<HTMLTextAreaElement>()
+let timer: ReturnType<typeof setTimeout> | null = null
+let typing = false
+
+watch(
+  () => props.modelValue,
+  (md) => {
+    // 正在输入时不打断用户，输入停顿后由其它视图变更回流
+    if (!typing) draft.value = md
+  },
+)
+
+function onInput(e: Event) {
+  const value = (e.target as HTMLTextAreaElement).value
+  draft.value = value
+  typing = true
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => {
+    typing = false
+    emit('update:modelValue', value)
+  }, 300)
+}
+
+function flushDraft() {
+  if (!typing) return
+  if (timer) clearTimeout(timer)
+  timer = null
+  typing = false
+  emit('update:modelValue', draft.value)
+}
+
+function goToDiagnostic(item: MarkdownDiagnostic) {
+  const input = textarea.value
+  if (!input) return
+  const lines = draft.value.split(/\r?\n/)
+  let offset = 0
+  for (let i = 0; i < item.line - 1; i++) offset += (lines[i]?.length ?? 0) + 1
+  const start = Math.min(draft.value.length, offset + Math.max(0, item.column - 1))
+  input.focus()
+  input.setSelectionRange(start, Math.min(draft.value.length, start + 1))
+}
+
+function selectAllFromHost(): void {
+  const input = textarea.value
+  if (!input) return
+  input.focus()
+  input.setSelectionRange(0, input.value.length)
+}
+
+defineExpose({ selectAllFromHost })
+
+function onPaste(e: ClipboardEvent) {
+  const image = [...(e.clipboardData?.items ?? [])]
+    .find((item) => item.kind === 'file' && item.type.startsWith('image/'))
+    ?.getAsFile()
+  if (!image) return
+  e.preventDefault()
+  const input = e.currentTarget as HTMLTextAreaElement
+  draft.value = input.value
+  flushDraft()
+  emit('pasteImage', image, input.selectionStart, input.selectionEnd)
+}
+
+onBeforeUnmount(() => {
+  flushDraft()
+})
+</script>
+
+<template>
+  <div class="markdown-view">
+    <div v-if="diagnostics.length > 0" class="source-diagnostics" role="alert">
+      <div class="diagnostic-title">源码格式不合法；修复前只能停留在源码视图</div>
+      <button
+        v-for="(item, index) in diagnostics"
+        :key="`${item.line}:${item.column}:${item.code}:${index}`"
+        class="diagnostic-item"
+        type="button"
+        @click="goToDiagnostic(item)"
+      >
+        第 {{ item.line }} 行，第 {{ item.column }} 列：{{ item.message }}
+      </button>
+    </div>
+    <textarea
+      ref="textarea"
+      class="md-textarea"
+      :value="draft"
+      spellcheck="false"
+      placeholder="# 根节点&#10;&#10;- 子节点&#10;  - 孙节点"
+      @input="onInput"
+      @paste="onPaste"
+    />
+  </div>
+</template>
+
+<style scoped>
+.markdown-view {
+  height: 100%;
+  background: var(--mm-panel-bg);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.source-diagnostics {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 34%;
+  overflow: auto;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgb(207 76 76 / 0.28);
+  background: rgb(207 76 76 / 0.08);
+}
+.diagnostic-title {
+  color: #b33b3b;
+  font-size: 13px;
+  font-weight: 650;
+}
+.diagnostic-item {
+  width: fit-content;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--mm-text);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.diagnostic-item:hover {
+  color: #b33b3b;
+  text-decoration: underline;
+}
+.md-textarea {
+  flex: 1;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 16px 20px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.7;
+  background: transparent;
+  color: var(--mm-text);
+  /* Nested under ProseMirror.virtual-cursor-enabled (caret-color: transparent). */
+  caret-color: var(--mm-accent, var(--mm-text, #3b82f6));
+  min-height: 0;
+}
+</style>