@tnotesjs/ui 0.1.0 → 0.1.2

package/src/markdown/image.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatImageAttrs,
+  formatImageWidthAttr,
+  normalizeImageAlign,
+  normalizeImageWidth,
+  parseImageAttrs,
+  parseImageWidthAttr,
+  pasteDisplayWidthPx,
+  serializeImageMarkdown
+} from './image'
+
+describe('image markdown helpers', () => {
+  it('accepts w and width, with or without a percent sign', () => {
+    expect(parseImageWidthAttr(' {w=50%} ')).toEqual({ width: '50%', rest: '' })
+    expect(parseImageWidthAttr('{width=33}')).toEqual({ width: '33%', rest: '' })
+    expect(parseImageWidthAttr('not-an-attr')).toEqual({
+      width: '',
+      rest: 'not-an-attr'
+    })
+  })
+
+  it('folds pasted bitmap width by device pixel ratio', () => {
+    expect(pasteDisplayWidthPx(800, 2)).toBe('400px')
+    expect(pasteDisplayWidthPx(400, 1)).toBe('400px')
+    expect(pasteDisplayWidthPx(20, 2)).toBe('')
+    expect(pasteDisplayWidthPx(0, 2)).toBe('')
+  })
+
+  it('accepts pixel widths from drag-resize', () => {
+    expect(parseImageWidthAttr('{w=400px}')).toEqual({ width: '400px', rest: '' })
+    expect(normalizeImageWidth('400px')).toBe('400px')
+    expect(normalizeImageWidth('8px')).toBe('')
+  })
+
+  it('parses alignment beside width in one brace group', () => {
+    expect(parseImageAttrs('{w=50% align=center}')).toEqual({
+      width: '50%',
+      align: 'center',
+      rest: ''
+    })
+    expect(parseImageAttrs('{align=right}')).toEqual({
+      width: '',
+      align: 'right',
+      rest: ''
+    })
+    expect(parseImageAttrs('{w=400px,align=center}')).toEqual({
+      width: '400px',
+      align: 'center',
+      rest: ''
+    })
+    expect(normalizeImageAlign('middle')).toBe('center')
+    expect(formatImageAttrs({ width: '400px', align: 'center' })).toBe(
+      '{w=400px align=center}'
+    )
+    expect(formatImageAttrs({ align: 'left' })).toBe('')
+  })
+
+  it('rejects empty, zero, and over-wide values', () => {
+    expect(normalizeImageWidth('')).toBe('')
+    expect(normalizeImageWidth('0%')).toBe('')
+    expect(normalizeImageWidth('120%')).toBe('')
+    expect(normalizeImageWidth('auto')).toBe('')
+  })
+
+  it('serializes caption as alt and omits natural width', () => {
+    expect(
+      serializeImageMarkdown({
+        alt: '知识库资源示意',
+        src: '../assets/pixel.svg',
+        width: '50%'
+      })
+    ).toBe('![知识库资源示意](../assets/pixel.svg) {w=50%}')
+    expect(serializeImageMarkdown({ alt: '', src: '../assets/pixel.svg' })).toBe(
+      '![](../assets/pixel.svg)'
+    )
+    expect(formatImageWidthAttr('100')).toBe('{w=100%}')
+    expect(
+      serializeImageMarkdown({
+        alt: '',
+        src: '../assets/shot.png',
+        width: '400px',
+        align: 'right'
+      })
+    ).toBe('![](../assets/shot.png) {w=400px align=right}')
+  })
+})

package/src/markdown/image.ts

@@ -0,0 +1,115 @@
+/** Shared image caption, width, and alignment helpers for SSG and Desk. */
+
+const ATTR_BLOCK = /^\s*\{([^}]*)\}\s*$/i
+
+export type ImageAlign = 'left' | 'center' | 'right'
+
+export interface ImageMarkdown {
+  alt: string
+  src: string
+  title?: string
+  /** Normalized CSS size, e.g. `50%` or `400px`. Empty means natural width. */
+  width?: string
+  /** Omitted or `left` is the default and is not written to markdown. */
+  align?: ImageAlign
+}
+
+export interface ImageAttrs {
+  width: string
+  align: ImageAlign
+  rest: string
+}
+
+export function normalizeImageAlign(raw: string): ImageAlign {
+  const value = raw.trim().toLowerCase()
+  if (value === 'center' || value === 'middle') return 'center'
+  if (value === 'right') return 'right'
+  return 'left'
+}
+
+export function parseImageAttrs(text: string): ImageAttrs {
+  const match = text.match(ATTR_BLOCK)
+  if (!match) return { width: '', align: 'left', rest: text }
+  const body = match[1].trim()
+  if (!body) return { width: '', align: 'left', rest: '' }
+  if (!/(?:^|[\s,])(?:w|width|align|a)\s*=/i.test(` ${body}`)) {
+    return { width: '', align: 'left', rest: text }
+  }
+  let width = ''
+  let align: ImageAlign = 'left'
+  for (const part of body.split(/[\s,]+/).filter(Boolean)) {
+    const eq = part.indexOf('=')
+    if (eq < 0) continue
+    const key = part.slice(0, eq).trim().toLowerCase()
+    const value = part.slice(eq + 1).trim()
+    if (key === 'w' || key === 'width') width = normalizeImageWidth(value)
+    else if (key === 'align' || key === 'a') align = normalizeImageAlign(value)
+  }
+  return { width, align, rest: '' }
+}
+
+export function parseImageWidthAttr(text: string): {
+  width: string
+  rest: string
+} {
+  const parsed = parseImageAttrs(text)
+  return { width: parsed.width, rest: parsed.rest }
+}
+
+export function normalizeImageWidth(raw: string): string {
+  const value = raw.trim()
+  if (!value) return ''
+  const pixels = value.match(/^(\d+(?:\.\d+)?)px$/i)
+  if (pixels) {
+    const amount = Number(pixels[1])
+    if (!Number.isFinite(amount) || amount < 16) return ''
+    return `${Math.round(amount)}px`
+  }
+  const percent = value.match(/^(\d+(?:\.\d+)?)%?$/)
+  if (!percent) return ''
+  const amount = Number(percent[1])
+  if (!Number.isFinite(amount) || amount <= 0 || amount > 100) return ''
+  const normalized = Number.isInteger(amount)
+    ? String(amount)
+    : String(Math.round(amount * 100) / 100)
+  return `${normalized}%`
+}
+
+/** Logical CSS px for a pasted bitmap, folding device pixel ratio (4K/retina). */
+export function pasteDisplayWidthPx(
+  naturalWidth: number,
+  devicePixelRatio = 1
+): string {
+  if (!Number.isFinite(naturalWidth) || naturalWidth <= 0) return ''
+  const dpr =
+    Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
+  return normalizeImageWidth(`${Math.round(naturalWidth / dpr)}px`)
+}
+
+export function formatImageWidthAttr(width: string): string {
+  return formatImageAttrs({ width, align: 'left' })
+}
+
+export function formatImageAttrs(attrs: {
+  width?: string
+  align?: ImageAlign | string
+}): string {
+  const width = normalizeImageWidth(attrs.width ?? '')
+  const align = normalizeImageAlign(attrs.align ?? '')
+  const parts: string[] = []
+  if (width) parts.push(`w=${width}`)
+  if (align !== 'left') parts.push(`align=${align}`)
+  return parts.length > 0 ? `{${parts.join(' ')}}` : ''
+}
+
+export function serializeImageMarkdown(image: ImageMarkdown): string {
+  const alt = image.alt.replaceAll('[', '').replaceAll(']', '')
+  const title = image.title?.trim()
+    ? ` "${image.title.replaceAll('"', '')}"`
+    : ''
+  const suffix = formatImageAttrs({
+    width: image.width ?? '',
+    align: image.align ?? 'left'
+  })
+  return `![${alt}](${image.src}${title})${suffix ? ` ${suffix}` : ''}`
+}

package/src/styles/code.css

@@ -0,0 +1,184 @@
+.tn-code-block {
+  margin: 1rem 0;
+  border: 1px solid var(--tn-c-divider);
+  border-radius: 8px;
+  background: var(--tn-c-bg-soft);
+  color: var(--tn-c-text);
+  overflow: hidden;
+}
+.tn-code-block__header,
+.tn-code-fullscreen > header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 38px;
+  min-height: 38px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--tn-c-divider);
+  font: 13px/24px var(--tn-font-sans);
+}
+.tn-code-block__title,
+.tn-code-fullscreen > header > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tn-code-block__language {
+  color: var(--tn-c-text-2);
+}
+.tn-code-block button,
+.tn-code-group__tabs button,
+.tn-code-fullscreen button {
+  color: var(--tn-c-text);
+  font: inherit;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.tn-code-block button.tn-code-block__icon-btn {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  padding: 4px 8px;
+}
+.tn-code-block__icon-btn svg {
+  display: block;
+  flex: none;
+  width: 12px;
+  height: 16px;
+}
+.tn-code-block button:hover,
+.tn-code-group__tabs button:hover,
+.tn-code-fullscreen button:hover {
+  background: var(--tn-c-hover);
+}
+.tn-code-block button:focus-visible,
+.tn-code-group button:focus-visible,
+.tn-code-fullscreen button:focus-visible {
+  outline: 2px solid var(--tn-c-brand);
+  outline-offset: -2px;
+}
+.tn-code-block pre {
+  background: transparent;
+  margin: 0;
+  padding: 8px 0;
+  max-height: 480px;
+  overflow: auto;
+  font: 14px/24px var(--tn-font-mono);
+  tab-size: 2;
+}
+.tn-code-block code {
+  font: inherit;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+.tn-code-highlight .line {
+  display: inline-block;
+  min-width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.tn-code-block.has-line-numbers .line::before {
+  content: attr(data-line);
+  display: inline-block;
+  width: 3ch;
+  padding-right: 16px;
+  text-align: right;
+  color: var(--tn-c-text-2);
+  user-select: none;
+}
+.tn-code-highlight {
+  color: var(--shiki-light);
+  background-color: var(--tn-c-bg-soft);
+}
+.tn-code-highlight span:not(.line) {
+  color: var(--shiki-light);
+  background-color: transparent;
+}
+html.dark:not([data-theme="light"]) .tn-code-highlight,
+html[data-theme="dark"] .tn-code-highlight {
+  color: var(--shiki-dark);
+  background-color: var(--tn-c-bg-soft);
+}
+html.dark:not([data-theme="light"]) .tn-code-highlight span:not(.line),
+html[data-theme="dark"] .tn-code-highlight span:not(.line) {
+  color: var(--shiki-dark);
+  background-color: transparent;
+}
+.tn-code-highlight .line.highlighted {
+  background-color: var(--tn-c-highlight);
+}
+.tn-code-block__plain {
+  padding: 16px !important;
+}
+.tn-code-block__error {
+  color: var(--tn-c-danger);
+  padding: 8px 12px;
+  font-size: 13px;
+}
+.tn-code-group {
+  position: relative;
+  margin: 1rem 0;
+}
+.tn-code-group__tabs {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  gap: 4px;
+  height: 38px;
+  max-width: calc(100% - 148px);
+  padding: 0 8px;
+  border-bottom: 0;
+}
+.tn-code-group__tabs button {
+  flex: none;
+  border-radius: 4px;
+  border-bottom: 2px solid transparent;
+  padding: 4px 10px;
+}
+.tn-code-group__tabs button[aria-selected="true"] {
+  color: var(--tn-c-brand);
+  border-bottom-color: var(--tn-c-brand);
+}
+.tn-code-group .tn-code-block__title {
+  visibility: hidden;
+}
+.tn-code-group__panel > .tn-code-block {
+  margin: 0;
+}
+.tn-code-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: var(--tn-c-bg);
+  color: var(--tn-c-text);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.tn-code-fullscreen > header {
+  position: sticky;
+  top: 0;
+  background: var(--tn-c-bg);
+  z-index: 1;
+}
+.tn-code-fullscreen > .tn-code-block {
+  margin: 16px;
+}
+.tn-code-fullscreen .tn-code-block pre {
+  max-height: none;
+}

package/src/styles/prose.css

@@ -0,0 +1,211 @@
+/* Host-neutral typography; editing hit areas belong to the host. */
+:is(.tn-prose, .vp-doc) {
+  color: var(--tn-c-text);
+  font-family: var(--tn-font-sans);
+  font-size: var(--tn-prose-size);
+  font-optical-sizing: auto;
+  font-synthesis: style;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+:is(.tn-prose, .vp-doc) :where(p) {
+  margin: 16px 0;
+  line-height: var(--tn-prose-line-height);
+}
+:is(.tn-prose, .vp-doc) :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--tn-font-sans);
+  font-weight: var(--tn-heading-weight);
+  margin: 16px 0;
+  border: 0;
+  padding: 0;
+  scroll-margin-top: 80px;
+}
+:is(.tn-prose, .vp-doc) :where(h1) {
+  font-size: var(--tn-heading-1-size);
+  line-height: var(--tn-heading-1-line);
+}
+:is(.tn-prose, .vp-doc) :where(h2) {
+  font-size: var(--tn-heading-2-size);
+  line-height: var(--tn-heading-2-line);
+}
+:is(.tn-prose, .vp-doc) :where(h3) {
+  font-size: var(--tn-heading-3-size);
+  line-height: var(--tn-heading-3-line);
+}
+:is(.tn-prose, .vp-doc) :where(h4) {
+  font-size: var(--tn-heading-4-size);
+  line-height: var(--tn-heading-4-line);
+}
+:is(.tn-prose, .vp-doc) :where(h5) {
+  font-size: var(--tn-heading-5-size);
+  line-height: var(--tn-heading-5-line);
+}
+:is(.tn-prose, .vp-doc) :where(h6) {
+  font-size: var(--tn-heading-6-size);
+  line-height: var(--tn-heading-6-line);
+}
+:is(.tn-prose, .vp-doc) :where(a) {
+  color: var(--tn-c-brand);
+  text-decoration: none;
+  font-weight: 500;
+}
+:is(.tn-prose, .vp-doc) :where(a:hover) {
+  color: var(--tn-c-brand-hover);
+  text-decoration: underline;
+}
+:is(.tn-prose, .vp-doc) :where(ul, ol) {
+  padding-left: 1.5rem;
+  margin: 16px 0;
+}
+:is(.tn-prose, .vp-doc) :where(li) {
+  line-height: var(--tn-prose-line-height);
+}
+:is(.tn-prose, .vp-doc) :where(li::marker) {
+  color: var(--tn-c-text);
+}
+:is(.tn-prose, .vp-doc) :where(li > ul, li > ol) {
+  margin: 0;
+}
+:is(.tn-prose, .vp-doc) :where(:not(pre) > code) {
+  color: var(--tn-c-brand);
+  background: var(--tn-c-default-soft);
+  border-radius: 4px;
+  font: 0.875em var(--tn-font-mono);
+  padding: 3px 6px;
+}
+:is(.tn-prose, .vp-doc) :where(blockquote) {
+  margin: 16px 0;
+  border-left: 2px solid var(--tn-c-divider);
+  padding: 0 0 0 16px;
+  color: var(--tn-c-text-2);
+}
+:is(.tn-prose, .vp-doc) :where(table) {
+  border-collapse: collapse;
+  margin: 16px 0;
+}
+:is(.tn-prose, .vp-doc) :where(th, td) {
+  border: 1px solid var(--tn-c-divider);
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 24px;
+}
+:is(.tn-prose, .vp-doc) :where(th) {
+  font-weight: 600;
+  background: var(--tn-c-bg-soft);
+}
+:is(.tn-prose, .vp-doc) :where(td p, th p) {
+  margin: 0;
+  line-height: 24px;
+}
+:is(.tn-prose, .vp-doc) :where(hr) {
+  margin: 16px 0;
+  border: 0;
+  border-top: 1px solid var(--tn-c-text-2);
+}
+:is(.tn-prose, .vp-doc) :where(img) {
+  max-width: 100%;
+  height: auto;
+}
+:is(.tn-prose, .vp-doc) :where(figure.tn-image) {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin: 16px 0;
+  text-align: center;
+}
+:is(.tn-prose, .vp-doc) :where(figure.tn-image.tn-image--center) {
+  margin-left: auto;
+  margin-right: auto;
+}
+:is(.tn-prose, .vp-doc) :where(figure.tn-image.tn-image--right) {
+  margin-left: auto;
+}
+:is(.tn-prose, .vp-doc) :where(figure.tn-image > img) {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+:is(.tn-prose, .vp-doc) :where(figure.tn-image > figcaption) {
+  margin: 8px 0 0;
+  color: var(--tn-c-text-2);
+  font-size: 13px;
+  line-height: 20px;
+  text-align: center;
+}
+
+/* Callouts — same soft-tint cards as Desk visual (no left accent bar). */
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block) {
+  box-sizing: border-box;
+  margin: 16px 0;
+  padding: 12px 16px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--tn-c-text);
+  font-size: inherit;
+  line-height: 1.5;
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block.tip) {
+  background-color: var(--tn-c-highlight);
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block.info),
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block.note),
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block.details) {
+  background-color: var(--tn-c-hover);
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block.warning) {
+  background-color: var(--tn-c-warning-soft);
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block.danger) {
+  background-color: var(--tn-c-danger-soft);
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block-title) {
+  margin: 0 0 2px;
+  font-size: inherit;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--tn-c-text);
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block > p:not(.tn-custom-block-title)) {
+  margin: 0;
+  padding: 4px 0;
+  font-size: 1em;
+  line-height: 1.5;
+}
+:is(.tn-prose, .vp-doc) :where(.tn-custom-block > :last-child) {
+  margin-bottom: 0;
+}
+:is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  font-weight: 600;
+  line-height: 1.5;
+}
+:is(.tn-prose, .vp-doc) :where(details.tn-custom-block:not([open]) > summary) {
+  margin-bottom: 0;
+}
+:is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary::-webkit-details-marker) {
+  display: none;
+}
+:is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary::before) {
+  content: "";
+  flex: none;
+  box-sizing: border-box;
+  width: 0.42em;
+  height: 0.42em;
+  margin-top: 0.05em;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  color: var(--tn-c-text-2);
+  transform: rotate(-45deg);
+  transform-origin: 50% 50%;
+  transition: transform 120ms ease;
+}
+:is(.tn-prose, .vp-doc) :where(details.tn-custom-block[open] > summary::before) {
+  margin-top: -0.05em;
+  transform: rotate(45deg);
+}