feat(editor): add themed callouts and desktop command boundary

frontend/src/features/editor/VisualMarkdownEditor.spec.ts

@@ -13,6 +13,8 @@ import { useThemeStore } from '@/stores/theme'
 import { codeBlockConfig } from '@milkdown/kit/component/code-block'
 import { EditorView as CodeMirror } from '@codemirror/view'
 import { renderMarkdown } from '@/utils/markdown'
+import { useEditorStore } from '@/stores/editor'
+import { executeEditorCommand } from '@/services/editorCommandService'
 
 type EditorComponent = { getEditor: () => Editor | undefined }
 
@@ -51,6 +53,45 @@ afterEach(() => {
 })
 
 describe('VisualMarkdownEditor formatting toolbars', () => {
+  it('renders and folds callouts without losing portable Markdown on serialization', async () => {
+    const source = '> [!WARNING]- 注意\n>\n> **正文**\n>\n> > [!TIP] 内层\n> > 内容'
+    const wrapper = mount(VisualMarkdownEditor, { props: { initialContent: source }, attachTo: document.body })
+    mounted.push(wrapper)
+    const editor = await waitForEditor(wrapper)
+    expect(wrapper.findAll('.markdown-callout')).toHaveLength(2)
+    expect(wrapper.get('.markdown-callout').attributes('data-collapsed')).toBe('true')
+    await wrapper.get('.callout-title').trigger('click')
+    expect(wrapper.get('.markdown-callout').attributes('data-collapsed')).toBe('false')
+    const markdown = editor.action(getMarkdown())
+    expect(markdown.trim()).toBe(source)
+  })
+  it('dispatches native-ready commands through editor transactions and rejects invalid parameters', async () => {
+    useEditorStore().currentFilePath = 'test.md'
+    const wrapper = mount(VisualMarkdownEditor, { props: { initialContent: 'text' }, attachTo: document.body })
+    mounted.push(wrapper)
+    const editor = await waitForEditor(wrapper)
+    expect(await executeEditorCommand('editor.heading', 8)).toEqual({ ok: false, reason: 'invalid-params' })
+    expect(await executeEditorCommand('editor.heading', 2)).toEqual({ ok: true })
+    expect(editor.action(getMarkdown())).toContain('## text')
+    expect(await executeEditorCommand('editor.callout', { type: 'tip', body: '**test**' })).toEqual({ ok: true })
+    expect(wrapper.find('.markdown-callout').exists()).toBe(true)
+    useEditorStore().saveStatus = 'conflict'
+    expect(await executeEditorCommand('editor.bold')).toEqual({ ok: false, reason: 'unavailable' })
+  })
+  it('keeps code examples as ordinary quotes and renders newly typed markers', async () => {
+    const wrapper = mount(VisualMarkdownEditor, { props: { initialContent: '> `[!NOTE]`\n\n> text' }, attachTo: document.body })
+    mounted.push(wrapper)
+    const editor = await waitForEditor(wrapper)
+    expect(wrapper.find('.markdown-callout').exists()).toBe(false)
+    editor.action(ctx => {
+      const view = ctx.get(editorViewCtx)
+      let position = 0
+      view.state.doc.descendants((node, pos) => { if (node.isText && node.text === 'text') position = pos })
+      view.dispatch(view.state.tr.insertText('[!TIP]', position, position + 4))
+    })
+    expect(wrapper.find('.markdown-callout').exists()).toBe(true)
+    expect(editor.action(getMarkdown())).toContain('[!TIP]')
+  })
   it('renders the supported format matrix and preserves inline code', async () => {
     const source = ['# H1','## H2','### H3','#### H4','##### H5','###### H6',
       '正文 **粗体** *斜体* ~~删除~~ `s` 与 ``a`b``', '> 引用', '- 项目\n  - 子项', '1. 第一\n2. 第二',

frontend/src/features/editor/VisualMarkdownEditor.vue

@@ -28,7 +28,9 @@ import {
   wrapInHeadingCommand,
   wrapInOrderedListCommand,
 } from '@milkdown/kit/preset/commonmark'
-import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
+import { commandsCtx, editorViewCtx, parserCtx } from '@milkdown/kit/core'
+import { Slice } from '@milkdown/kit/prose/model'
+import { registerEditorCommands, type CommandHandler, type EditorCommandId } from '@/services/editorCommandService'
 import { TextSelection } from '@milkdown/kit/prose/state'
 import { callCommand } from '@milkdown/kit/utils'
 import AppIcon from '@/components/common/AppIcon.vue'
@@ -37,6 +39,8 @@ import { useSettingsStore } from '@/stores/settings'
 import { useThemeStore } from '@/stores/theme'
 import { applyMarkdownFontSize, fontSizeMarkdownPlugin } from './fontSizeMarkdown'
 import { inlineCodeInputPlugin } from './inlineCodeInput'
+import { calloutPlugin, configureCalloutSerialization } from './calloutPlugin'
+import { calloutTypes } from '@/utils/callouts'
 import { t } from '@/i18n'
 import '@milkdown/crepe/theme/common/style.css'
 import '@milkdown/crepe/theme/frame.css'
@@ -67,6 +71,61 @@ const fontSizeInput = ref(16)
 let crepe: Crepe | null = null
 let disposeLanguagePicker: (() => void) | undefined
 let disposeCodeLabels: (() => void) | undefined
+let disposeCommands: (() => void) | undefined
+let disposed = false
+
+function insertMarkdown(source: string) {
+  crepe?.editor.action(ctx => {
+    const doc = ctx.get(parserCtx)(source)
+    if (!doc) throw new Error('Invalid Markdown')
+    const view = ctx.get(editorViewCtx)
+    view.dispatch(view.state.tr.replaceSelection(new Slice(doc.content, 0, 0)).scrollIntoView())
+    view.focus()
+  })
+}
+
+function insertCallout(event: Event) {
+  const select = event.target as HTMLSelectElement
+  if (select.value) insertMarkdown(`> [!${select.value.toUpperCase()}]\n> ${t('提示内容', 'Callout content')}`)
+  select.value = ''
+}
+
+function installCommands() {
+  const targetPath = editorStore.currentFilePath
+  const handlers: Partial<Record<EditorCommandId, CommandHandler>> = {}
+  const toolbar: ToolbarCommand[] = ['bold', 'italic', 'ordered-list', 'bullet-list', 'inline-code', 'code-block', 'inline-math', 'math-block']
+  for (const command of toolbar) handlers[`editor.${command}`] = () => { runCommand(command); return { ok: true } }
+  handlers['editor.paragraph'] = () => { crepe!.editor.action(callCommand(turnIntoTextCommand.key)); return { ok: true } }
+  handlers['editor.heading'] = params => {
+    if (!Number.isInteger(params) || Number(params) < 1 || Number(params) > 6) return { ok: false, reason: 'invalid-params' }
+    crepe!.editor.action(callCommand(wrapInHeadingCommand.key, Number(params)))
+    return { ok: true }
+  }
+  handlers['editor.font-size'] = params => {
+    if (typeof params !== 'number' || !Number.isFinite(params) || params < 8 || params > 96) return { ok: false, reason: 'invalid-params' }
+    fontSizeInput.value = params
+    applyFontSizeValue()
+    return { ok: true }
+  }
+  handlers['editor.insert-markdown'] = params => {
+    if (typeof params !== 'string' || !params.trim() || params.length > 100000) return { ok: false, reason: 'invalid-params' }
+    insertMarkdown(params)
+    return { ok: true }
+  }
+  handlers['editor.callout'] = params => {
+    if (!params || typeof params !== 'object') return { ok: false, reason: 'invalid-params' }
+    const { type, title = '', body = '', fold = '' } = params as Record<string, unknown>
+    if (typeof type !== 'string' || !/^[\w-]{1,64}$/.test(type) || typeof title !== 'string' || /[\r\n]/.test(title)
+      || typeof body !== 'string' || !['', '+', '-'].includes(String(fold)) || title.length + body.length > 100000) return { ok: false, reason: 'invalid-params' }
+    insertMarkdown(`> [!${type}]${fold} ${title}\n${body.split(/\r?\n/).map(line => `> ${line}`).join('\n')}`)
+    return { ok: true }
+  }
+  disposeCommands = registerEditorCommands({
+    available: () => !loading.value && !!crepe && editorStore.mode === 'wysiwyg' && editorStore.saveStatus !== 'conflict'
+      && !!targetPath && targetPath === editorStore.currentFilePath && crepe.editor.action(ctx => ctx.get(editorViewCtx).editable),
+    handlers,
+  })
+}
 const diagramPreviews = new Map<string, { source: string; apply: (value: HTMLElement) => void }>()
 function renderDiagram(source: string, apply: (value: HTMLElement) => void) {
   for (const [id, entry] of diagramPreviews) {
@@ -251,6 +310,8 @@ onMounted(async () => {
   })))
   crepe.editor.use(fontSizeMarkdownPlugin)
   crepe.editor.use(inlineCodeInputPlugin)
+  crepe.editor.use(calloutPlugin)
+  crepe.editor.config(configureCalloutSerialization)
   crepe.on((listener) => {
     listener.markdownUpdated((_ctx, markdown, previousMarkdown) => {
       // 忽略编辑器初始化/回显事件，防止无内容变化时触发自动保存循环。
@@ -265,6 +326,7 @@ onMounted(async () => {
   if (editorRoot.value) disposeCodeLabels = installCodeBlockLabels(editorRoot.value)
   applyProofingPreferences()
   loading.value = false
+  if (!disposed) installCommands()
 })
 
 watch([() => settingsStore.spellCheck, () => settingsStore.language], applyProofingPreferences)
@@ -282,7 +344,7 @@ watch(() => editorStore.headingRequest, request => {
   })
 })
 
-onBeforeUnmount(() => { diagramPreviews.clear(); disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() })
+onBeforeUnmount(() => { disposed = true; disposeCommands?.(); diagramPreviews.clear(); disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() })
 
 defineExpose({ getEditor: () => crepe?.editor })
 </script>
@@ -324,6 +386,12 @@ defineExpose({ getEditor: () => crepe?.editor })
       <button type="button" :title="t('行内公式', 'Inline formula')" :aria-label="t('行内公式', 'Inline formula')" @pointerdown.prevent="runCommand('inline-math')"><span class="math-glyph">ƒx</span></button>
       <button type="button" :title="t('公式块', 'Formula block')" :aria-label="t('公式块', 'Formula block')" @pointerdown.prevent="runCommand('math-block')"><span class="math-glyph">∑</span></button>
       <button type="button" :title="t('插入链接', 'Insert link')" :aria-label="t('插入链接', 'Insert link')" @pointerdown.prevent="applyLink"><AppIcon :icon="Link" :size="17" /></button>
+      <label class="toolbar-select">
+        <select :aria-label="t('插入警告框', 'Insert callout')" @change="insertCallout">
+          <option value="">{{ t('提示框', 'Callout') }}</option>
+          <option v-for="(_, type) in calloutTypes" :key="type" :value="type">{{ type }}</option>
+        </select>
+      </label>
     </div>
     <div v-if="loading" class="editor-loading">{{ t('正在加载编辑器…', 'Loading editor…') }}</div>
     <div class="milkdown-host" :class="{ loading }">

frontend/src/features/editor/calloutPlugin.ts

@@ -0,0 +1,89 @@
+import { $prose } from '@milkdown/kit/utils'
+import { Plugin } from '@milkdown/kit/prose/state'
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view'
+import { parseCallout } from '@/utils/callouts'
+import '@/styles/callouts.css'
+import { remarkStringifyOptionsCtx, type Editor } from '@milkdown/kit/core'
+
+export const configureCalloutSerialization: Parameters<Editor['config']>[0] = ctx => {
+  ctx.update(remarkStringifyOptionsCtx, options => ({
+    ...options,
+    handlers: { ...options.handlers, blockquote(node, _parent, state, info) {
+      const exit = state.enter('blockquote')
+      const tracker = state.createTracker(info)
+      tracker.move('> ')
+      tracker.shift(2)
+      const result = state.indentLines(state.containerFlow(node, tracker.current()), (line, _index, blank) => `>${blank ? '' : ' '}${line}`)
+      exit()
+      // Only remove escaping from a leading callout marker, never body literals.
+      return result.replace(/^(> )\\\[!([\w-]+)\\?\]/, '$1[!$2]')
+    } },
+  }))
+}
+
+// Keep native blockquotes in the document: typing, undo and Markdown serialization
+// remain Milkdown transactions; the view never rewrites a user's callout source.
+export const calloutPlugin = $prose(() => new Plugin({
+  props: {
+    decorations(state) {
+      const decorations: Decoration[] = []
+      state.doc.descendants((node, position) => {
+        if (node.type.name !== 'blockquote' || node.firstChild?.type.name !== 'paragraph' || node.firstChild.firstChild?.marks.length) return
+        const callout = parseCallout(node.firstChild.textBetween(0, node.firstChild.content.size, '\n', '\n'))
+        if (!callout) return
+        const from = position + 2
+        const to = from + callout.markerLength
+        const editing = state.selection.from <= to && state.selection.to >= from
+        decorations.push(Decoration.inline(from, to, { class: editing ? 'callout-marker-editing' : 'callout-marker' }))
+      })
+      return DecorationSet.create(state.doc, decorations)
+    },
+    nodeViews: {
+      blockquote(initialNode) {
+        const dom = document.createElement('blockquote')
+        const header = document.createElement('button')
+        header.type = 'button'
+        header.className = 'callout-title'
+        header.contentEditable = 'false'
+        const contentDOM = document.createElement('div')
+        contentDOM.className = 'callout-body'
+        dom.append(header, contentDOM)
+        let signature = ''
+        let foldable = false
+        const update = (node: typeof initialNode) => {
+          if (node.type.name !== 'blockquote') return false
+          const callout = node.firstChild?.type.name === 'paragraph' && !node.firstChild.firstChild?.marks.length
+            ? parseCallout(node.firstChild.textBetween(0, node.firstChild.content.size, '\n', '\n')) : null
+          dom.className = callout ? 'markdown-callout' : ''
+          header.hidden = !callout
+          foldable = !!callout?.fold
+          header.disabled = !foldable
+          if (callout) {
+            dom.dataset.callout = callout.type
+            const next = `${callout.name}:${callout.fold}`
+            if (signature !== next) dom.dataset.collapsed = String(callout.fold === '-')
+            signature = next
+            header.textContent = `${foldable ? (dom.dataset.collapsed === 'true' ? '▸ ' : '▾ ') : ''}${callout.title}`
+            if (foldable) header.setAttribute('aria-expanded', String(dom.dataset.collapsed !== 'true'))
+            else header.removeAttribute('aria-expanded')
+          } else {
+            delete dom.dataset.callout
+            delete dom.dataset.collapsed
+            signature = ''
+          }
+          return true
+        }
+        let current = initialNode
+        header.onclick = () => {
+          if (!foldable) return
+          dom.dataset.collapsed = String(dom.dataset.collapsed !== 'true')
+          update(current)
+        }
+        update(initialNode)
+        return { dom, contentDOM, update(node) { current = node; return update(node) },
+          stopEvent: event => header.contains(event.target as Node),
+          ignoreMutation: mutation => mutation.type !== 'selection' && !contentDOM.contains(mutation.target) }
+      },
+    },
+  },
+}))

frontend/src/features/themes/CommunityThemePreview.spec.ts

@@ -4,6 +4,7 @@ import { mount } from '@vue/test-utils'
 // Vitest disables CSS by default, including CSS raw imports. Load the real files here.
 vi.mock('@/styles/features.css?raw', async () => ({ default: (await import('node:fs')).readFileSync(process.cwd() + '/src/styles/features.css', 'utf8') }))
 vi.mock('@/styles/tokens.css?raw', async () => ({ default: (await import('node:fs')).readFileSync(process.cwd() + '/src/styles/tokens.css', 'utf8') }))
+vi.mock('@/styles/callouts.css?raw', async () => ({ default: (await import('node:fs')).readFileSync(process.cwd() + '/src/styles/callouts.css', 'utf8') }))
 import CommunityThemePreview from './CommunityThemePreview.vue'
 import { mockCommunityThemes } from '@/services/themePackageService'
 const themes = [...['light','dark','sepia'].map(theme_id => ({theme_id,name:theme_id,builtin:true})), ...mockCommunityThemes.map(t => ({...t,builtin:false}))]
@@ -15,6 +16,10 @@ it.each(themes)('previews shared component states safely for $theme_id', theme =
     const doc = new DOMParser().parseFromString(iframe.attributes('srcdoc')!, 'text/html')
     expect(doc.documentElement.dataset.theme).toBe(theme.theme_id)
     expect(doc.querySelector('script')).toBeNull()
+    expect(doc.querySelectorAll('.specimen-callouts > aside.markdown-callout')).toHaveLength(14)
+    expect(doc.querySelector('.specimen-callouts > details[open]')).not.toBeNull()
+    expect(doc.querySelector('.specimen-callouts > details:not([open])')).not.toBeNull()
+    expect(doc.querySelector('style')!.textContent).toContain('.callout-title:focus-visible')
     expect(doc.querySelector('meta[http-equiv="Content-Security-Policy"]')?.getAttribute('content')).toContain("default-src 'none'")
     for (const selector of ['input.input','input:disabled','textarea.textarea','select.select','.ui-disclosure[open]','.ui-disclosure:not([open])','.button-primary:disabled','.badge.success','.error-banner','.specimen-markdown code','.specimen-markdown table','.specimen-chart','.specimen-long']) expect(doc.querySelector(selector), selector).not.toBeNull()
     expect(doc.querySelector('style')!.textContent).toContain('.button-primary:hover')

frontend/src/features/themes/CommunityThemePreview.vue

@@ -5,6 +5,8 @@ import { t } from '@/i18n'
 import { getCommunityThemePreviewCss, mockCommunityThemes } from '@/services/themePackageService'
 import tokensCss from '@/styles/tokens.css?raw'
 import featuresCss from '@/styles/features.css?raw'
+import calloutsCss from '@/styles/callouts.css?raw'
+import { calloutTypes } from '@/utils/callouts'
 import specimenHtml from './themeSpecimen.html?raw'
 
 const props = defineProps<{ themeId: string; name?: string; css?: string }>()
@@ -20,7 +22,7 @@ const previewDocument = computed(() => {
   policy.content = "default-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src data:; base-uri 'none'; form-action 'none'"
   doc.head.append(policy)
   const style = doc.createElement('style')
-  style.textContent = `${tokensCss}\n${featuresCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nhtml { height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body { height:auto !important; min-height:100%; overflow:visible !important; margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
+  style.textContent = `${tokensCss}\n${featuresCss}\n${calloutsCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nhtml { height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body { height:auto !important; min-height:100%; overflow:visible !important; margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
 
   doc.head.append(style)
   const article = doc.createElement('article')
@@ -33,6 +35,22 @@ const previewDocument = computed(() => {
   const button = doc.createElement('button'); button.className = 'button-primary'; button.textContent = t('示例按钮', 'Example button')
   journal.append(text)
   const specimen = doc.createElement('template'); specimen.innerHTML = specimenHtml
+  const callouts = doc.createElement('section'); callouts.className = 'specimen-callouts'
+  const caption = doc.createElement('h2'); caption.textContent = t('警告框与提示框', 'Alerts and callouts'); callouts.append(caption)
+  for (const type of Object.keys(calloutTypes)) {
+    const block = doc.createElement('aside'); block.className = 'markdown-callout'; block.dataset.callout = type
+    const title = doc.createElement('div'); title.className = 'callout-title'; title.textContent = type
+    const body = doc.createElement('div'); body.className = 'callout-body'; body.textContent = t('提示正文：检查文字、边框与主题配色。', 'Callout body: check text, borders and theme colors.')
+    block.append(title, body); callouts.append(block)
+  }
+  for (const open of [false, true]) {
+    const details = doc.createElement('details'); details.className = 'markdown-callout'; details.dataset.callout = 'warning'; details.open = open
+    const summary = doc.createElement('summary'); summary.className = 'callout-title'; summary.textContent = t('可折叠警告框', 'Collapsible callout')
+    const body = doc.createElement('div'); body.className = 'callout-body'
+    const nested = doc.createElement('aside'); nested.className = 'markdown-callout'; nested.dataset.callout = 'tip'; nested.textContent = t('嵌套提示内容', 'Nested callout content')
+    body.append(nested); details.append(summary, body); callouts.append(details)
+  }
+  specimen.content.append(callouts)
   article.append(header, journal, button, specimen.content); doc.body.append(article)
   return '<!doctype html>' + doc.documentElement.outerHTML
 })

frontend/src/features/themes/ThemesView.spec.ts

@@ -96,7 +96,7 @@ it.each(mockCommunityThemes)('previews uninstalled $theme_id using its actual CS
 
 it('offers and applies the paper theme update without discarding the active theme', async () => {
   const store = useThemeStore()
-  const old = await inspectThemePackage(paperPackage.replace('version: 1.6.2', 'version: 1.6.1'))
+  const old = await inspectThemePackage(paperPackage.replace('version: 1.7.0', 'version: 1.6.1'))
   await store.installThemeFromInspection(old.manifest, old.css)
   store.applyTheme('paper-moments')
   wrapper = mount(ThemesView, { global: { stubs: { MarkdownContent: true } } })
@@ -105,6 +105,6 @@ it('offers and applies the paper theme update without discarding the active them
   const card = wrapper.findAll('article.theme-card').find(item => item.text().includes('Paper Moments'))!
   await card.findAll('button').find(button => button.text() === '更新')!.trigger('click')
   await flushPromises()
-  expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.6.2')
+  expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.7.0')
   expect(document.getElementById('theme-style-paper-moments')!.textContent).toContain('.surface-nested')
 })