@docsector/docsector-reader 2.3.0 → 3.1.0

package/src/components/DPageSection.vue

@@ -1,20 +1,11 @@
 <script setup>
 import { computed } from 'vue'
 import { useStore } from 'vuex'
-import MarkdownIt from 'markdown-it'
-import attrs from 'markdown-it-attrs'
 import { useI18n } from "vue-i18n"
 
-import DH2 from './DH2.vue'
-import DH3 from './DH3.vue'
-import DH4 from './DH4.vue'
-import DH5 from './DH5.vue'
-import DH6 from './DH6.vue'
-import DPageSourceCode from './DPageSourceCode.vue'
-import DMermaidDiagram from './DMermaidDiagram.vue'
-import DPageBlockquote from './DPageBlockquote.vue'
-import DQuickLinks from './DQuickLinks.vue'
+import DPageTokens from './DPageTokens.vue'
 import { pageValueI18nPath } from '../i18n/path'
+import { tokenizePageSectionSource } from './page-section-tokens'
 
 defineProps({
   id: {
@@ -26,210 +17,6 @@ defineProps({
 const store = useStore()
 const { t } = useI18n()
 
-const ALERT_MESSAGE_TYPES = new Set([
-  'note',
-  'tip',
-  'important',
-  'warning',
-  'caution'
-])
-
-const parseAlertMarker = (rawContent = '') => {
-  const match = String(rawContent).trim().match(/^\[!\s*([A-Za-z]+)\s*\]\s*(.*)$/s)
-  if (!match) {
-    return null
-  }
-
-  const type = match[1].toLowerCase()
-  if (!ALERT_MESSAGE_TYPES.has(type)) {
-    return null
-  }
-
-  return {
-    type,
-    content: (match[2] || '').trim()
-  }
-}
-
-const QUICK_LINKS_MARKER_PREFIX = '@@DOCSECTOR_QUICK_LINKS_'
-
-const parseTagAttributes = (raw = '') => {
-  const attrs = {}
-  const pattern = /(\w+)\s*=\s*"([^"]*)"|(\w+)\s*=\s*'([^']*)'/g
-
-  let match = pattern.exec(raw)
-  while (match !== null) {
-    const key = match[1] || match[3]
-    const value = match[2] || match[4] || ''
-    attrs[key] = value
-    match = pattern.exec(raw)
-  }
-
-  return attrs
-}
-
-const extractQuickLinksBlocks = (source = '') => {
-  const map = new Map()
-  let index = 0
-
-  const blockPattern = /<d-quick-links\b([^>]*)>([\s\S]*?)<\/d-quick-links>/gi
-  const replaced = String(source).replace(blockPattern, (_, blockAttrsRaw, inner) => {
-    const blockAttrs = parseTagAttributes(blockAttrsRaw)
-    const items = []
-    const itemPattern = /<d-quick-link\b([^>]*)\/?\s*>/gi
-
-    let itemMatch = itemPattern.exec(inner)
-    while (itemMatch !== null) {
-      const attrs = parseTagAttributes(itemMatch[1])
-      const title = attrs.title || ''
-      const description = attrs.description || ''
-      const to = attrs.to || ''
-      const href = attrs.href || ''
-
-      if (title && description && (to || href)) {
-        items.push({
-          icon: attrs.icon || 'link',
-          title,
-          description,
-          to,
-          href
-        })
-      }
-
-      itemMatch = itemPattern.exec(inner)
-    }
-
-    const marker = `${QUICK_LINKS_MARKER_PREFIX}${index}@@`
-    index++
-
-    map.set(marker, {
-      title: blockAttrs.title || '',
-      items
-    })
-
-    return `\n${marker}\n`
-  })
-
-  return {
-    source: replaced,
-    quickLinksMap: map
-  }
-}
-
-const parseFenceAttributes = (raw = '') => {
-  const parsed = {}
-  const pattern = /([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s;]+))/g
-
-  let match = pattern.exec(String(raw))
-  while (match !== null) {
-    const key = match[1]
-    const value = match[2] || match[3] || match[4] || ''
-    parsed[key] = value
-    match = pattern.exec(String(raw))
-  }
-
-  return parsed
-}
-
-const parseTokenAttributes = (element) => {
-  const parsed = {}
-
-  ;(element.attrs || []).forEach(([key, value]) => {
-    parsed[key] = value || ''
-  })
-
-  return parsed
-}
-
-const parseFenceLanguage = (raw = '') => {
-  const cleaned = String(raw)
-    .replace(/:[^;]*;/g, ' ')
-    .replace(/[\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s;]+)/g, ' ')
-    .replace(/[;:]/g, ' ')
-    .trim()
-
-  return cleaned.split(/\s+/)[0] || ''
-}
-
-const parseFenceMeta = (element) => {
-  const rawInfo = String(element.info || '')
-  const meta = {
-    ...parseFenceAttributes(rawInfo),
-    ...parseTokenAttributes(element)
-  }
-
-  return {
-    ...meta,
-    language: parseFenceLanguage(rawInfo) || meta.language || 'html'
-  }
-}
-
-const parseBreadcrumb = (raw = '') => {
-  const value = String(raw).trim()
-
-  if (!value) {
-    return []
-  }
-
-  const separator = value.includes('>') ? '>' : '/'
-
-  return value
-    .split(separator)
-    .map((segment) => segment.trim())
-    .filter(Boolean)
-}
-
-const createSourceCodeTab = (element, meta) => ({
-  label: meta.tab || meta.filename || meta.language || 'Code',
-  language: meta.language || 'html',
-  text: element.content,
-  filename: meta.filename || '',
-  breadcrumbs: parseBreadcrumb(meta.breadcrumb)
-})
-
-const pushSourceCodeToken = (tokens, element) => {
-  const meta = parseFenceMeta(element)
-
-  if (meta.language === 'mermaid') {
-    tokens.push({
-      tag: 'mermaid',
-      content: element.content
-    })
-    return
-  }
-
-  const tab = createSourceCodeTab(element, meta)
-
-  if (meta.group) {
-    const previous = tokens[tokens.length - 1]
-
-    if (previous?.tag === 'code' && previous.group === meta.group && Array.isArray(previous.tabs)) {
-      previous.tabs.push(tab)
-      return
-    }
-
-    tokens.push({
-      tag: 'code',
-      group: meta.group,
-      content: tab.text,
-      info: tab.language,
-      filename: tab.filename,
-      breadcrumbs: tab.breadcrumbs,
-      tabs: [tab]
-    })
-    return
-  }
-
-  tokens.push({
-    tag: 'code',
-    content: tab.text,
-    info: tab.language,
-    filename: tab.filename,
-    breadcrumbs: tab.breadcrumbs,
-    tabs: []
-  })
-}
-
 const tokenized = computed(() => {
   const absolute = store.state.i18n.absolute
 
@@ -237,368 +24,16 @@ const tokenized = computed(() => {
     return []
   }
 
-  const source = t(pageValueI18nPath(absolute, 'source'))
-  const normalizedSource = String(source)
-    .replace(/&#123;/g, '{')
-    .replace(/&#125;/g, '}')
-    .replace(/&amp;/g, '&')
-
-  const { source: sourceWithQuickLinks, quickLinksMap } = extractQuickLinksBlocks(normalizedSource)
-
-  const Markdown = new MarkdownIt({
-    // Home remote README may contain raw HTML blocks (badges, centered headers, etc.)
-    html: true
-  })
-  Markdown.use(attrs, {
-    leftDelimiter: ':',
-    rightDelimiter: ';',
-    allowedAttributes: ['filename', 'group', 'tab', 'breadcrumb']
-  })
-
-  // Keep inline rendering aligned with block parsing so raw HTML inline
-  // fragments (e.g. <b>, <a>) are rendered instead of escaped.
-  const MarkdownInline = new MarkdownIt({
-    html: true
-  })
-
-  const markdownEnv = {}
-
-  const parsed = Markdown.parse(sourceWithQuickLinks, markdownEnv)
-
-  // @ map
-  const tokens = []
-  let level = 0
-  let tag = ''
-  const children = []
-
-  const blockquote = {
-    depth: 0,
-    content: '',
-    alertType: '',
-    firstInline: true
-  }
-
-  const resetBlockquote = () => {
-    blockquote.content = ''
-    blockquote.alertType = ''
-    blockquote.firstInline = true
-  }
-
-  const flushBlockquote = () => {
-    const content = blockquote.content
-      .replace(/<p>\s*<\/p>/g, '')
-      .trim()
-
-    tokens.push({
-      tag: 'blockquote',
-      content,
-      alertType: blockquote.alertType
-    })
-
-    resetBlockquote()
-  }
-
-  const appendBlockquoteTag = (element, open) => {
-    if (!element.tag || element.tag === 'blockquote') {
-      return
-    }
-
-    blockquote.content += open
-      ? `<${element.tag}>`
-      : `</${element.tag}>`
-  }
-
-  parsed.forEach((element) => {
-    if (element.type === 'blockquote_open') {
-      if (blockquote.depth === 0) {
-        resetBlockquote()
-      }
-
-      blockquote.depth++
-      return
-    }
-
-    if (element.type === 'blockquote_close' && blockquote.depth > 0) {
-      blockquote.depth--
-
-      if (blockquote.depth === 0) {
-        flushBlockquote()
-      }
-
-      return
-    }
-
-    if (blockquote.depth > 0) {
-      if (element.type === 'inline') {
-        const rawInline = element.content
-
-        if (blockquote.firstInline) {
-          blockquote.firstInline = false
-
-          const alert = parseAlertMarker(rawInline)
-          if (alert !== null) {
-            blockquote.alertType = alert.type
-
-            if (alert.content !== '') {
-              blockquote.content += MarkdownInline.renderInline(alert.content, markdownEnv)
-            }
-
-            return
-          }
-        }
-
-        blockquote.content += MarkdownInline.renderInline(rawInline, markdownEnv)
-        return
-      }
-
-      if (element.type === 'fence') {
-        const language = parseFenceLanguage(element.info)
-        const escaped = String(element.content)
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-
-        const languageClass = language ? ` class="language-${language}"` : ''
-        blockquote.content += `<pre><code${languageClass}>${escaped}</code></pre>`
-        return
-      }
-
-      if (element.type.endsWith('_open')) {
-        appendBlockquoteTag(element, true)
-        return
-      }
-
-      if (element.type.endsWith('_close')) {
-        appendBlockquoteTag(element, false)
-        return
-      }
-
-      return
-    }
-
-    switch (element.type) {
-      case 'bullet_list_open':
-      case 'ordered_list_open':
-      case 'table_open':
-        level++
-    }
-
-    // Render
-    if (element.type === 'inline') {
-      element.content = MarkdownInline.renderInline(element.content, markdownEnv)
-    }
-
-    if (level === 0) {
-      // Prepare
-      switch (element.type) {
-        case 'heading_open':
-        case 'paragraph_open':
-        case 'list_item_open':
-          tag = element.tag
-      }
-
-      // Push
-      switch (element.type) {
-        case 'inline':
-          if (quickLinksMap.has(element.content.trim())) {
-            const data = quickLinksMap.get(element.content.trim())
-
-            tokens.push({
-              tag: 'quick-links',
-              title: data.title,
-              items: data.items
-            })
-            break
-          }
-
-          tokens.push({
-            tag,
-            map: element.map,
-            content: element.content,
-            info: element.info,
-            children
-          })
-
-          break
-        case 'fence': {
-          pushSourceCodeToken(tokens, element)
-          break
-        }
-        case 'html_block':
-          tokens.push({
-            tag: 'html',
-            content: element.content
-          })
-          break
-      }
-    } else if (level === 1) {
-      const parent = tokens[tokens.length - 1]
-
-      switch (element.type) {
-        case 'bullet_list_open':
-          tokens.push({
-            tag: 'ul',
-            content: ''
-          })
-          break
-        case 'ordered_list_open':
-          tokens.push({
-            tag: 'ol',
-            content: ''
-          })
-          break
-        case 'table_open':
-          tokens.push({
-            tag: 'table',
-            content: ''
-          })
-          break
-
-        case 'list_item_open':
-          parent.content += '<li>'
-          break
-
-        case 'thead_open':
-          parent.content += '<thead>'
-          break
-        case 'tbody_open':
-          parent.content += '<tbody>'
-          break
-        case 'tr_open':
-          parent.content += '<tr>'
-          break
-        case 'th_open':
-          parent.content += '<th>'
-          break
-        case 'td_open':
-          parent.content += '<td>'
-          break
-
-        case 'inline':
-          parent.content += element.content
-          break
-        case 'html_inline':
-        case 'html_block':
-          parent.content += element.content
-          break
-
-        case 'list_item_close':
-          parent.content += '</li>'
-          break
-
-        case 'thead_close':
-          parent.content += '</thead>'
-          break
-        case 'tbody_close':
-          parent.content += '</tbody>'
-          break
-        case 'tr_close':
-          parent.content += '</tr>'
-          break
-        case 'th_close':
-          parent.content += '</th>'
-          break
-        case 'td_close':
-          parent.content += '</td>'
-          break
-      }
-    }
-
-    switch (element.type) {
-      case 'bullet_list_close':
-      case 'ordered_list_close':
-      case 'table_close':
-        level--
-    }
-  })
-
-  return tokens
+  return tokenizePageSectionSource(t(pageValueI18nPath(absolute, 'source')))
 })
 </script>
 
 <template>
 <section>
-  <template v-for="(token, index) in tokenized" :key="index">
-    <d-h2
-      v-if="token.tag === 'h2'"
-      :id="id + token.map[0]"
-      :value="token.content"
-    />
-    <d-h3
-      v-else-if="token.tag === 'h3'"
-      :id="id + token.map[0]"
-      :value="token.content"
-    />
-    <d-h4
-      v-else-if="token.tag === 'h4'"
-      :id="id + token.map[0]"
-      :value="token.content"
-    />
-    <d-h5
-      v-else-if="token.tag === 'h5'"
-      :id="id + token.map[0]"
-      :value="token.content"
-    />
-    <d-h6
-      v-else-if="token.tag === 'h6'"
-      :id="id + token.map[0]"
-      :value="token.content"
-    />
-
-    <ul
-      v-else-if="token.tag === 'ul'"
-      v-html="token.content"
-    ></ul>
-    <ol
-      v-else-if="token.tag === 'ol'"
-      v-html="token.content"
-    ></ol>
-
-    <div
-      v-else-if="token.tag === 'table'"
-      class="d-table-wrapper"
-    >
-      <table v-html="token.content"></table>
-    </div>
-
-    <div
-      v-else-if="token.tag === 'html'"
-      v-html="token.content"
-    ></div>
-
-    <p
-      v-else-if="token.tag === 'p'"
-      v-html="token.content"
-    ></p>
-
-    <d-page-blockquote
-      v-else-if="token.tag === 'blockquote'"
-      :message="token.alertType"
-    >
-      <div v-html="token.content"></div>
-    </d-page-blockquote>
-
-    <d-page-source-code
-      v-else-if="token.tag === 'code'"
-      :index="id + index"
-      :text="token.content"
-      :language="token.info"
-      :filename="token.filename"
-      :breadcrumbs="token.breadcrumbs"
-      :tabs="token.tabs"
-    />
-
-    <d-mermaid-diagram
-      v-else-if="token.tag === 'mermaid'"
-      :content="token.content"
-    />
-
-    <d-quick-links
-      v-else-if="token.tag === 'quick-links'"
-      :title="token.title"
-      :items="token.items"
-    />
-  </template>
+  <d-page-tokens
+    :id="id"
+    :tokens="tokenized"
+  />
 </section>
 </template>
 

package/src/components/DPageSourceCode.vue

@@ -471,7 +471,7 @@ function printToLetter(number) {
       user-select: none
 
       button
-        padding: 5px 8px 4px
+        padding: 7px 8px 6px
         position: relative
 
     .filename