@markee/diagrams 0.1.0

package/src/helpers.ts

@@ -0,0 +1,75 @@
+export function encodeText(value: string) {
+  const bytes = new TextEncoder().encode(value)
+  let binary = ''
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte)
+  })
+  return btoa(binary)
+}
+
+export function decodeText(encoded: string) {
+  const binary = atob(encoded)
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
+  return new TextDecoder().decode(bytes)
+}
+
+export function escapeHtml(value: string) {
+  return value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+}
+
+export function toErrorMessage(err: unknown) {
+  if (err instanceof Error) return err.message
+  if (typeof err === 'string') return err
+  return 'Unknown error'
+}
+
+export function getStringFromMeta(meta: Record<string, any>, key: string) {
+  const rawValue = meta[key]
+  if (rawValue === undefined) return ''
+  if (typeof rawValue === 'string') return rawValue.trim()
+  if (typeof rawValue === 'number' || typeof rawValue === 'boolean') {
+    return String(rawValue)
+  }
+  return ''
+}
+
+export function getClassList(meta: Record<string, any>) {
+  const classAttr = getStringFromMeta(meta, 'class')
+  if (!classAttr) return []
+  return classAttr.split(/\s+/).filter(Boolean)
+}
+
+export function getBooleanFromMeta(
+  meta: Record<string, any>,
+  key: string,
+  defaultValue = false,
+) {
+  const rawValue = getStringFromMeta(meta, key)
+  if (!rawValue) return defaultValue
+
+  switch (rawValue.toLowerCase()) {
+    case key.toLowerCase():
+    case '1':
+    case 'true':
+    case 'yes':
+    case 'on':
+      return true
+    case '0':
+    case 'false':
+    case 'no':
+    case 'off':
+      return false
+    default:
+      return defaultValue
+  }
+}
+
+export function hasClass(meta: Record<string, any>, className: string) {
+  const classAttr = meta.class
+  if (typeof classAttr !== 'string') return false
+  return classAttr.split(/\s+/).includes(className)
+}

package/src/index.css

@@ -0,0 +1,73 @@
+@layer markee-extension {
+  markee-diagram {
+    display: block;
+    margin: 1.2rem 0;
+  }
+
+  a.glightbox > markee-diagram {
+    position: relative;
+  }
+
+  a.glightbox > markee-diagram::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .ginlined-content.diagram {
+    min-width: 100vw;
+    padding: 1rem 6rem;
+    text-align: center;
+  }
+
+  markee-diagram .markee-diagram-status,
+  markee-diagram .markee-diagram-error {
+    border: 1px solid var(--mk-color-border, #d9d9d9);
+    border-radius: 0.5rem;
+    background: var(--mk-color-background, #fafafa);
+    color: var(--mk-color-text, #333);
+    padding: 0.75rem 0.9rem;
+  }
+
+  markee-diagram .markee-diagram-status {
+    font-style: italic;
+  }
+
+  markee-diagram .markee-diagram-error {
+    border-left: 4px solid var(--mk-admonition-color-danger);
+  }
+
+  markee-diagram .markee-diagram-error pre {
+    margin: 0.6rem 0 0;
+    overflow: auto;
+    font-size: 0.875rem;
+    white-space: pre-wrap;
+  }
+
+  markee-diagram .markee-diagram-mermaid,
+  markee-diagram .markee-diagram-dbml {
+    overflow-x: auto;
+  }
+
+  markee-diagram .markee-diagram-mermaid > svg,
+  markee-diagram .markee-diagram-dbml > svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  markee-diagram .markee-diagram-dbml,
+  markee-diagram .markee-diagram-dbml * {
+    pointer-events: none !important;
+  }
+
+  [data-color-scheme='dark'] {
+    markee-diagram {
+      filter: invert(88%) hue-rotate(180deg);
+    }
+  }
+}

package/src/main.ts

@@ -0,0 +1,7 @@
+import { registerDiagramElement } from './element'
+import { registerDiagramsRemark } from './remark'
+
+import './index.css'
+
+registerDiagramElement()
+registerDiagramsRemark()

package/src/remark.ts

@@ -0,0 +1,75 @@
+import parseAttrs from 'attributes-parser'
+import { extend } from '@markee/runtime'
+import {
+  encodeText,
+  escapeHtml,
+  getBooleanFromMeta,
+  getClassList,
+  getStringFromMeta,
+  hasClass,
+} from './helpers'
+
+export function registerDiagramsRemark() {
+  extend.markdownPipeline.remark('markee-diagrams', function (this: any) {
+    return (tree: any) => {
+      const resolved = this.data().pluginConfig('lightbox') as
+        | boolean
+        | { enabled: boolean }
+        | undefined
+      const lightboxEnabled =
+        typeof resolved === 'boolean' ? resolved : (resolved?.enabled ?? true)
+
+      let fallbackId = 0
+
+      extend.markdownPipeline.visit(
+        tree,
+        'code',
+        (node: any, index: number | undefined, parent: any) => {
+          const lang = node.lang?.trim()?.toLowerCase()
+          if (!parent || index === undefined) return
+          if (lang !== 'mermaid' && lang !== 'dbml') return
+          if ((node.meta ?? '').trim().startsWith('kroki')) return
+
+          const source = encodeText(node.value ?? '')
+          const parsedMeta = parseAttrs(node.meta ?? '')
+          const fromNodeId = (node.data as any)?.hProperties?.id
+          const fromMetaId = getStringFromMeta(parsedMeta, 'id')
+          const hasLightboxDisableClass =
+            hasClass(parsedMeta, 'skip-lightbox') ||
+            hasClass(parsedMeta, 'off-glb')
+          const hasLightboxEnableClass =
+            hasClass(parsedMeta, 'force-lightbox') ||
+            hasClass(parsedMeta, 'on-glb')
+          let nodeLightboxEnabled = getBooleanFromMeta(
+            parsedMeta,
+            'lightbox',
+            lightboxEnabled,
+          )
+          if (hasLightboxDisableClass) {
+            nodeLightboxEnabled = false
+          } else if (hasLightboxEnableClass) {
+            nodeLightboxEnabled = true
+          }
+
+          const uniqueId =
+            (fromNodeId ? String(fromNodeId) : fromMetaId) ||
+            `markee-diagram-${fallbackId++}`
+          const extraClasses = getClassList(parsedMeta).filter(
+            (name) => name !== lang,
+          )
+          const className = [lang, 'diagram', ...extraClasses].join(' ')
+
+          const element = `<markee-diagram id="${escapeHtml(uniqueId)}" class="${escapeHtml(className)}" data-kind="${lang}" data-source="${source}"></markee-diagram>`
+          const inlineElement = `<markee-diagram class="${escapeHtml(className)}" data-kind="${lang}" data-source="${source}"></markee-diagram>`
+          const inlineContent = inlineElement.replaceAll("'", '&#39;')
+          const withLightbox = `<a class='glightbox' href='#' data-content='${inlineContent}' data-width='100vw' data-height='auto' data-draggable='false'>${element}</a>`
+
+          parent.children.splice(index, 1, {
+            type: 'html',
+            value: nodeLightboxEnabled ? withLightbox : element,
+          })
+        },
+      )
+    }
+  })
+}

package/src/runtime.ts

@@ -0,0 +1,40 @@
+type MermaidModule = typeof import('mermaid')
+
+export type DiagramRuntime = {
+  dbmlRun: (source: string, format: any) => string
+  select: (element: HTMLElement) => any
+}
+
+let mermaidPromise: Promise<MermaidModule['default']> | null = null
+let diagramRuntimePromise: Promise<DiagramRuntime> | null = null
+
+export function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import('mermaid').then((runtime) => {
+      runtime.default.initialize({ startOnLoad: false })
+      return runtime.default
+    })
+  }
+  return mermaidPromise
+}
+
+export function loadDiagramRuntime() {
+  if (!diagramRuntimePromise) {
+    diagramRuntimePromise = Promise.all([
+      import('@softwaretechnik/dbml-renderer'),
+      import('d3-selection'),
+      import('d3-graphviz'),
+    ]).then(([dbmlRenderer, d3Selection]) => {
+      const d3Module = d3Selection as any
+      const d3 = d3Module.select ? d3Module : d3Module.default
+      if (!d3 || typeof d3.select !== 'function') {
+        throw new Error('Could not load d3-selection runtime.')
+      }
+      return {
+        dbmlRun: dbmlRenderer.run as DiagramRuntime['dbmlRun'],
+        select: d3.select,
+      }
+    })
+  }
+  return diagramRuntimePromise
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["ES2022", "dom"],
+    "outDir": "dist",
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import { markee } from '@markee/vite'
+
+export default defineConfig({
+  plugins: [markee()],
+})