metanorma-document 0.2.9 → 0.2.12

data/frontend/src/components/blocks/SourcecodeBlock.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :id="block.attrs?.id" class="mn-sourcecode">
+    <div v-if="language" class="code-language-badge">{{ language }}</div>
+    <pre class="code-block"><code>{{ code }}</code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MirrorBlockNode } from '@/stores/documentStore'
+
+const props = defineProps<{ block: MirrorBlockNode }>()
+
+const language = computed(() => props.block.attrs?.language || '')
+const code = computed(() => props.block.attrs?.text || extractText(props.block.content || []))
+
+function extractText(content: any[]): string {
+  return content.map(node => {
+    if (node.type === 'text') return node.text || ''
+    if (node.content) return extractText(node.content)
+    return ''
+  }).join('')
+}
+</script>
+
+<style scoped>
+.mn-sourcecode { margin: 1.5rem 0; border-radius: 8px; overflow: hidden; position: relative; }
+.code-language-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  font-family: ui-monospace, monospace;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--ebook-bg-secondary);
+  color: var(--ebook-text-muted);
+  border-bottom: 1px solid var(--ebook-border);
+  border-radius: 8px 8px 0 0;
+}
+.code-block {
+  font-family: ui-monospace, monospace;
+  font-size: 0.875rem;
+  background: var(--chrome-bg-hover, #f1f5f9);
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  border: 1px solid var(--ebook-border);
+  border-radius: 8px;
+  margin: 0;
+}
+.code-block code { font-family: inherit; }
+</style>

data/frontend/src/components/blocks/TableBlock.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :id="block.attrs?.id" class="mb-4">
+    <div v-if="block.attrs?.title" class="text-sm font-semibold muted-text mb-1">
+      {{ block.attrs.title }}
+    </div>
+    <div class="table-scroll-wrapper">
+      <table class="w-full border-collapse text-sm">
+        <thead v-for="(section, si) in (block.content || []).filter((s): s is MirrorBlockNode => s.type === 'table_head')" :key="'h'+si">
+          <tr v-for="(row, ri) in section.content!.filter((r): r is MirrorBlockNode => 'content' in r)" :key="ri" class="border-b-2 border-ebook-border">
+            <th v-for="(cell, ci) in row.content!.filter((c): c is MirrorBlockNode => 'content' in c)" :key="ci"
+                class="px-3 py-2 text-left font-semibold ebook-text border border-ebook-border"
+                :colspan="cell.attrs?.colspan"
+                :rowspan="cell.attrs?.rowspan">
+              <MirrorRenderer :blocks="cell.content || []" />
+            </th>
+          </tr>
+        </thead>
+        <tbody v-for="(section, si) in (block.content || []).filter((s): s is MirrorBlockNode => s.type === 'table_body')" :key="'b'+si">
+          <tr v-for="(row, ri) in section.content!.filter((r): r is MirrorBlockNode => 'content' in r)" :key="ri" class="table-row border-b border-ebook-border">
+            <td v-for="(cell, ci) in row.content!.filter((c): c is MirrorBlockNode => 'content' in c)" :key="ci"
+                class="px-3 py-2 ebook-text border border-ebook-border"
+                :colspan="cell.attrs?.colspan"
+                :rowspan="cell.attrs?.rowspan">
+              <MirrorRenderer :blocks="cell.content || []" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MirrorBlockNode } from '@/stores/documentStore'
+import MirrorRenderer from '@/components/MirrorRenderer.vue'
+
+defineProps<{ block: MirrorBlockNode }>()
+</script>
+
+<style scoped>
+.ebook-text { color: var(--ebook-text); }
+.muted-text { color: var(--ebook-text-muted); }
+.border-ebook-border { border-color: var(--ebook-border); }
+.table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; border: 1px solid var(--ebook-border); }
+.table-scroll-wrapper table { min-width: 400px; }
+.table-scroll-wrapper thead th { position: sticky; top: 0; background: var(--ebook-bg-secondary); z-index: 1; }
+.table-row:nth-child(even) { background: color-mix(in srgb, var(--ebook-text) 3%, var(--ebook-bg)); }
+</style>

data/frontend/src/components/blocks/index.ts

@@ -0,0 +1,36 @@
+import type { Component } from 'vue'
+import ParagraphBlock from './ParagraphBlock.vue'
+import AdmonitionBlock from './AdmonitionBlock.vue'
+import TableBlock from './TableBlock.vue'
+import FigureBlock from './FigureBlock.vue'
+import SourcecodeBlock from './SourcecodeBlock.vue'
+import NoteBlock from './NoteBlock.vue'
+import ExampleBlock from './ExampleBlock.vue'
+import ListBlocks from './ListBlocks.vue'
+import QuoteBlock from './QuoteBlock.vue'
+import ReviewBlock from './ReviewBlock.vue'
+import FootnotesBlock from './FootnotesBlock.vue'
+import FallbackBlock from './FallbackBlock.vue'
+
+const BLOCK_COMPONENTS: Record<string, Component> = {
+  paragraph: ParagraphBlock,
+  admonition: AdmonitionBlock,
+  table: TableBlock,
+  figure: FigureBlock,
+  image: FigureBlock,
+  sourcecode: SourcecodeBlock,
+  note: NoteBlock,
+  example: ExampleBlock,
+  bullet_list: ListBlocks,
+  ordered_list: ListBlocks,
+  dl: ListBlocks,
+  quote: QuoteBlock,
+  review: ReviewBlock,
+  footnotes: FootnotesBlock,
+  formula: SourcecodeBlock,
+  floating_title: ParagraphBlock,
+}
+
+export function getBlockComponent(type: string): Component {
+  return BLOCK_COMPONENTS[type] ?? FallbackBlock
+}

data/frontend/src/stores/__tests__/documentStore.fixture.test.ts

@@ -0,0 +1,272 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useDocumentStore } from '../documentStore'
+import fixture from '@test/fixtures/iso-document.json'
+
+describe('useDocumentStore with real mirror data', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('processMetanormaData with fixture', () => {
+    it('sets mirrorDocument from fixture data', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.mirrorDocument).not.toBeNull()
+      expect(store.mirrorDocument?.type).toBe('doc')
+      expect(store.mirrorDocument?.content).toBeDefined()
+      expect(store.mirrorDocument!.content!.length).toBeGreaterThan(0)
+    })
+
+    it('extracts TOC from toc.sections', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.sections.length).toBe(5)
+      expect(store.sections[0].id).toBe('foreword')
+      expect(store.sections[0].title).toBe('Foreword')
+      expect(store.sections[0].type).toBe('foreword')
+    })
+
+    it('extracts nested TOC children', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const terms = store.sections.find(s => s.id === 'terms')
+      expect(terms).toBeDefined()
+      expect(terms!.children.length).toBe(1)
+      expect(terms!.children[0].id).toBe('term-rice')
+      expect(terms!.children[0].title).toBe('rice')
+    })
+
+    it('extracts numbering from toc', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.getNumbering('scope')).toBe('1')
+      expect(store.getNumbering('normrefs')).toBe('2')
+      expect(store.getNumbering('terms')).toBe('3')
+      expect(store.getNumbering('term-rice')).toBe('3.1')
+      expect(store.getNumbering('test-methods')).toBe('4')
+    })
+
+    it('extracts title from meta', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.title).toBe('ISO 17301-1:2016 — Cereals and pulses')
+    })
+
+    it('extracts flavor from meta', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.flavor).toBe('iso')
+    })
+
+    it('extracts docType from meta', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.docType).toBe('international-standard')
+    })
+
+    it('returns empty numbering for unknown id', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.getNumbering('nonexistent')).toBe('')
+    })
+
+    it('extracts schema version', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      expect(store.documentMeta?.schemaVersion).toBe('v2.1.5')
+    })
+  })
+
+  describe('document content structure validation', () => {
+    it('contains all expected top-level sections', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const types = content.map(n => n.type)
+      expect(types).toContain('foreword')
+      expect(types).toContain('clause')
+      expect(types).toContain('references')
+      expect(types).toContain('terms')
+      expect(types).toContain('footnotes')
+    })
+
+    it('clause sections have attrs with id and title', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const clause = content.find(n => n.type === 'clause' && (n as any).attrs?.id === 'scope')
+      expect(clause).toBeDefined()
+      expect((clause as any).attrs.title).toBe('Scope')
+    })
+
+    it('paragraphs contain text nodes with marks', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      // Find scope clause, first paragraph
+      const scope = content.find(n => (n as any).attrs?.id === 'scope') as any
+      expect(scope).toBeDefined()
+      const para = scope.content.find((n: any) => n.type === 'paragraph')
+      expect(para).toBeDefined()
+      const strongNode = para.content.find((n: any) => n.marks?.some((m: any) => m.type === 'strong'))
+      expect(strongNode).toBeDefined()
+      expect(strongNode.text).toBe('the test methods')
+    })
+
+    it('contains bullet lists with list_items', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const scope = content.find(n => (n as any).attrs?.id === 'scope') as any
+      const list = scope.content.find((n: any) => n.type === 'bullet_list')
+      expect(list).toBeDefined()
+      expect(list.content.length).toBe(3)
+      expect(list.content[0].type).toBe('list_item')
+    })
+
+    it('contains tables with head and body', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const table = testMethods.content.find((n: any) => n.type === 'table')
+      expect(table).toBeDefined()
+      expect(table.content.some((n: any) => n.type === 'table_head')).toBe(true)
+      expect(table.content.some((n: any) => n.type === 'table_body')).toBe(true)
+    })
+
+    it('contains admonition blocks', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const admonition = testMethods.content.find((n: any) => n.type === 'admonition')
+      expect(admonition).toBeDefined()
+      expect(admonition.attrs.type).toBe('warning')
+    })
+
+    it('contains sourcecode with language', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const code = testMethods.content.find((n: any) => n.type === 'sourcecode')
+      expect(code).toBeDefined()
+      expect(code.attrs.language).toBe('python')
+      expect(code.attrs.text).toContain('moisture_content')
+    })
+
+    it('contains figure with image', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const figure = testMethods.content.find((n: any) => n.type === 'figure')
+      expect(figure).toBeDefined()
+      expect(figure.attrs.title).toContain('Grain structure')
+      const image = figure.content.find((n: any) => n.type === 'image')
+      expect(image).toBeDefined()
+      expect(image.attrs.src).toBe('grain.png')
+    })
+
+    it('contains ordered list', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const ol = testMethods.content.find((n: any) => n.type === 'ordered_list')
+      expect(ol).toBeDefined()
+      expect(ol.content.length).toBe(3)
+    })
+
+    it('contains quote block', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const quote = testMethods.content.find((n: any) => n.type === 'quote')
+      expect(quote).toBeDefined()
+    })
+
+    it('contains formula block', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const testMethods = content.find(n => (n as any).attrs?.id === 'test-methods') as any
+      const formula = testMethods.content.find((n: any) => n.type === 'formula')
+      expect(formula).toBeDefined()
+      expect(formula.attrs.text).toContain('m =')
+    })
+
+    it('contains nested clause (term)', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const terms = content.find(n => (n as any).attrs?.id === 'terms') as any
+      const nestedClause = terms.content.find((n: any) => n.type === 'clause')
+      expect(nestedClause).toBeDefined()
+      expect(nestedClause.attrs.id).toBe('term-rice')
+      // Should contain example and note children
+      const childTypes = nestedClause.content.map((n: any) => n.type)
+      expect(childTypes).toContain('example')
+      expect(childTypes).toContain('note')
+    })
+
+    it('contains footnotes section', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData(fixture)
+      const content = store.mirrorDocument!.content!
+      const footnotes = content.find(n => n.type === 'footnotes')
+      expect(footnotes).toBeDefined()
+    })
+  })
+
+  describe('fallback behavior (no toc.sections)', () => {
+    it('extracts TOC from content when toc.sections absent', () => {
+      const store = useDocumentStore()
+      const data = {
+        type: 'doc',
+        content: [
+          { type: 'clause', attrs: { id: 's1', title: 'Scope' }, content: [] },
+          { type: 'paragraph', content: [{ type: 'text', text: 'hello' }] },
+          { type: 'terms', attrs: { id: 't1', title: 'Terms' }, content: [] },
+        ],
+      }
+      store.processMetanormaData(data)
+      expect(store.sections.length).toBe(2)
+      expect(store.sections[0].id).toBe('s1')
+      expect(store.sections[1].id).toBe('t1')
+    })
+
+    it('extracts title from meta fallback', () => {
+      const store = useDocumentStore()
+      const data = {
+        type: 'doc',
+        meta: { title: 'From Meta' },
+        attrs: { title: 'From Attrs' },
+        content: [],
+      }
+      store.processMetanormaData(data)
+      expect(store.title).toBe('From Meta')
+    })
+
+    it('falls back to attrs title', () => {
+      const store = useDocumentStore()
+      const data = {
+        type: 'doc',
+        attrs: { title: 'From Attrs' },
+        content: [],
+      }
+      store.processMetanormaData(data)
+      expect(store.title).toBe('From Attrs')
+    })
+
+    it('uses default title when none provided', () => {
+      const store = useDocumentStore()
+      const data = { type: 'doc', content: [] }
+      store.processMetanormaData(data)
+      expect(store.title).toBe('Metanorma Document')
+    })
+  })
+})

data/frontend/src/stores/__tests__/documentStore.test.ts

@@ -0,0 +1,143 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useDocumentStore } from '../documentStore'
+
+describe('useDocumentStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('defaults', () => {
+    it('has null document before loading', () => {
+      const store = useDocumentStore()
+      expect(store.mirrorDocument).toBeNull()
+      expect(store.documentMeta).toBeNull()
+      expect(store.title).toBe('Metanorma Document')
+      expect(store.flavor).toBe('')
+      expect(store.sections).toEqual([])
+      expect(store.numbering).toEqual({})
+    })
+  })
+
+  describe('processMetanormaData', () => {
+    it('processes a doc with attrs', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData({
+        type: 'doc',
+        attrs: { title: 'ISO 9001', flavor: 'iso' },
+        content: [
+          {
+            type: 'clause',
+            attrs: { id: 'scope', title: 'Scope', number: '1' },
+            content: [],
+          },
+          {
+            type: 'clause',
+            attrs: { id: 'defs', title: 'Definitions', number: '3' },
+            content: [],
+          },
+        ],
+      })
+
+      expect(store.mirrorDocument).not.toBeNull()
+      expect(store.title).toBe('ISO 9001')
+      expect(store.flavor).toBe('iso')
+      expect(store.sections).toHaveLength(2)
+      expect(store.sections[0]).toEqual({
+        id: 'scope',
+        title: 'Scope',
+        type: 'clause',
+        children: [],
+      })
+    })
+
+    it('processes nested sections for TOC', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData({
+        type: 'doc',
+        attrs: { title: 'Test' },
+        content: [
+          {
+            type: 'clause',
+            attrs: { id: 's1', title: 'Section 1' },
+            content: [
+              {
+                type: 'clause',
+                attrs: { id: 's1-1', title: 'Subsection 1.1' },
+                content: [],
+              },
+            ],
+          },
+        ],
+      })
+
+      expect(store.sections).toHaveLength(1)
+      expect(store.sections[0].children).toHaveLength(1)
+      expect(store.sections[0].children[0].id).toBe('s1-1')
+    })
+
+    it('ignores non-section blocks in TOC extraction', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData({
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Hello' }] },
+          { type: 'clause', attrs: { id: 'scope', title: 'Scope' }, content: [] },
+          { type: 'bullet_list', content: [] },
+        ],
+      })
+
+      expect(store.sections).toHaveLength(1)
+      expect(store.sections[0].type).toBe('clause')
+    })
+
+    it('uses toc data when provided', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData({
+        type: 'doc',
+        attrs: { title: 'Has TOC' },
+        content: [],
+        toc: {
+          sections: [
+            { id: 's1', title: 'Section 1', type: 'clause', children: [] },
+          ],
+          numbering: { s1: '1' },
+        },
+      })
+
+      expect(store.sections).toHaveLength(1)
+      expect(store.numbering).toEqual({ s1: '1' })
+    })
+
+    it('uses meta fields when present', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData({
+        type: 'doc',
+        attrs: {},
+        content: [],
+        meta: { title: 'Meta Title', flavor: 'iec' },
+      })
+
+      expect(store.title).toBe('Meta Title')
+      expect(store.flavor).toBe('iec')
+    })
+  })
+
+  describe('getNumbering', () => {
+    it('returns numbering for known id', () => {
+      const store = useDocumentStore()
+      store.processMetanormaData({
+        type: 'doc',
+        content: [],
+        toc: { sections: [], numbering: { scope: '1' } },
+      })
+
+      expect(store.getNumbering('scope')).toBe('1')
+    })
+
+    it('returns empty string for unknown id', () => {
+      const store = useDocumentStore()
+      expect(store.getNumbering('unknown')).toBe('')
+    })
+  })
+})