remark-mind-elixir 0.2.1 → 0.3.1

package/README.md

@@ -0,0 +1,207 @@
+# remark-mind-elixir
+
+A [remark](https://github.com/remarkjs/remark) plugin for embedding interactive [Mind Elixir](https://mind-elixir.com/) mind maps in Markdown.
+
+It lets you define mind maps using YAML inside `elixir-mind` fenced code blocks and transforms them into interactive Mind Elixir maps.
+
+## Features
+
+* 📝 Define mind maps directly in Markdown
+* 🌳 YAML-based mind map structure
+* ⚙️ Optional YAML configuration
+* ⚡ Automatic client-side rendering
+* 🌐 Optional CDN-based runtime
+* 🔌 Works with remark and the unified ecosystem
+* 🧩 Built on top of [ZikoJS](https://github.com/zikojs)
+
+## Installation
+
+```bash
+npm install remark-mind-elixir
+```
+
+## Usage
+
+```js
+import { remark } from 'remark'
+import remarkMindElixir from 'remark-mind-elixir'
+
+const markdown = `
+# My Mind Map
+
+\`\`\`elixir-mind
+root:
+  topic: JavaScript
+  children:
+    - topic: Browser
+    - topic: Node.js
+\`\`\`
+`
+
+const file = await remark()
+  .use(remarkMindElixir)
+  .process(markdown)
+
+console.log(String(file))
+```
+
+## Markdown Syntax
+
+Use an `elixir-mind` fenced code block:
+
+````markdown
+```elixir-mind
+root:
+  topic: JavaScript
+  children:
+    - topic: Browser
+    - topic: Node.js
+    - topic: Deno
+```
+````
+
+The YAML is converted into the data structure expected by Mind Elixir.
+
+## Configuration
+
+A configuration document can optionally be placed before the mind-map data.
+
+Separate the configuration and data using `---`:
+
+````markdown
+```elixir-mind
+---
+direction: right
+---
+root:
+  topic: JavaScript
+  children:
+    - topic: Browser
+    - topic: Node.js
+```
+````
+
+The first YAML document is interpreted as plugin configuration, while the second document contains the mind-map data.
+
+## Multiple Mind Maps
+
+A Markdown document can contain multiple `elixir-mind` blocks:
+
+````markdown
+# Frontend
+
+```elixir-mind
+root:
+  topic: Frontend
+  children:
+    - topic: HTML
+    - topic: CSS
+    - topic: JavaScript
+```
+
+# Backend
+
+```elixir-mind
+root:
+  topic: Backend
+  children:
+    - topic: Node.js
+    - topic: Python
+    - topic: Rust
+```
+````
+
+The client runtime is injected once when at least one mind map is present.
+
+## Options
+
+```js
+remarkMindElixir({
+  useCdn: true,
+})
+```
+
+### `useCdn`
+
+Controls whether the plugin injects the Mind Elixir browser runtime from a CDN.
+
+**Type:** `boolean`
+
+**Default:** `true`
+
+```js
+remarkMindElixir({
+  useCdn: false,
+})
+```
+
+When disabled, the plugin does not inject the CDN runtime. Your application must provide the client-side Mind Elixir runtime.
+
+## Client Runtime
+
+By default, the plugin injects the Mind Elixir runtime using `esm.sh`.
+
+The generated Markdown contains a container similar to:
+
+```html
+<div
+  data-elixir-mind
+  data-xmind-body="..."
+  data-xmind-config="..."
+></div>
+```
+
+The client runtime finds these containers and mounts a Mind Elixir map into each one.
+
+## How It Works
+
+```text
+Markdown
+   │
+   ▼
+remark
+   │
+   ▼
+remark-mind-elixir
+   │
+   ├── Find `elixir-mind` blocks
+   │
+   ├── Parse YAML
+   │
+   ├── Convert YAML to Mind Elixir data
+   │
+   └── Generate HTML container
+           │
+           ▼
+      Client runtime
+           │
+           ▼
+      Mind Elixir map
+```
+
+## Ecosystem
+
+`remark-mind-elixir` is designed to work with remark-compatible Markdown pipelines, including:
+
+* [Remark](https://github.com/remarkjs/remark)
+* [Unified](https://unifiedjs.com/)
+* [MDX](https://mdxjs.com/)
+* [Astro](https://astro.build/)
+* [Vite](https://vite.dev/)
+
+It is built on top of ZikoJS utilities while remaining a remark plugin rather than a ZikoJS-specific Markdown processor.
+
+## Related Projects
+
+* [ZikoJS](https://github.com/zikojs)
+* [Mind Elixir](https://github.com/SSShooter/mind-elixir-core)
+* [Remark](https://github.com/remarkjs/remark)
+* [Unified](https://unifiedjs.com/)
+
+<!-- ## Documentation -->
+
+<!-- See the [ZikoJS Remark Plugins documentation](https://remark.zikojs.org/) for guides, syntax references, and examples. -->
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-mind-elixir",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "",
   "keywords": [
     "remark",

package/src/client.js

@@ -1,7 +1,5 @@
 import { MindMap } from '@zikojs/mind-elixir/no-css'
 
-console.log('.... CLIENT ....')
-
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('[data-elixir-mind]').forEach((element) => {
         const raw = element.dataset.xmindBody

package/src/index.js

@@ -1,5 +1,5 @@
 import { visit } from 'unist-util-visit'
-import { parse } from 'yaml'
+import { parse, parseAllDocuments } from "yaml";
 
 import { yaml2MindElixirData } from '@zikojs/mind-elixir/utils'
 
@@ -12,25 +12,35 @@ const remarkElixirMind = ({
     visit(tree, 'code', (node, index, parent) => {
       if (node.lang !== 'elixir-mind') return
 
-      hasElixirMind = true
+      hasElixirMind = true;
+      let config = {}, body = null;
 
-      const body = yaml2MindElixirData(node.value.trim())
+      const documents = splitDocuments(node.value.trim());
+      if(documents.length === 1) body = yaml2MindElixirData(documents[0])
+      else {
+        config = parse(documents[0])
+        body = yaml2MindElixirData(documents[1])
+      }
 
       // parent creates circular references, so serialize a clean copy
-      const serialized = JSON.stringify(body, (key, value) => {
+      const serialized_body = JSON.stringify(body, (key, value) => {
         if (key === 'parent') return undefined
         return value
       })
 
+      const serialized_config = JSON.stringify(config)
+
       // Escape the JSON for use inside an HTML attribute
-      const encoded = escapeHtmlAttribute(serialized)
+      const encoded_body = escapeHtmlAttribute(serialized_body)
+      const encoded_config = escapeHtmlAttribute(serialized_config)
 
       parent.children[index] = {
         type: 'html',
         value: `
 <div
   data-elixir-mind
-  data-xmind-body="${encoded}"
+  data-xmind-body="${encoded_body}"
+  data-xmind-config="${encoded_config}"
 ></div>
 `
       }
@@ -45,24 +55,20 @@ const remarkElixirMind = ({
 @import url('https://esm.sh/mind-elixir/style')
 </style>
 
-<script type="module">
-import 'https://esm.sh/remark-mind-elixir/client'
+<script type="module" data-engine="zikojs, remark, mind-elixir">
 import { MindMap } from 'https://esm.sh/@zikojs/mind-elixir@latest/src/mind/main.js'
-
-document.querySelectorAll('[data-elixir-mind]').forEach((element) => {
-  const raw = element.dataset.xmindBody
-
-  if (!raw) return
-
-  const nodeData = JSON.parse(raw)
-
-  const map = MindMap({
-    height: '400px',
-    direction: 2
-  }, nodeData)
-
-  map.mount(element)
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-elixir-mind]').forEach((element) => {
+        const raw = element.dataset.xmindBody
+        // const config = element.dataset?.xmindConfig
+        if (!raw) return
+        const nodeData = JSON.parse(raw)
+        // const nodeConfig = JSON.parse(config)
+        const map = MindMap({}, nodeData)
+        map.mount(element)
+    })
 })
+
 </script>
 `
     })
@@ -77,4 +83,61 @@ function escapeHtmlAttribute(value) {
     .replace(/>/g, '&gt;')
 }
 
-export default remarkElixirMind
+export default remarkElixirMind
+
+const splitDocuments = (text) => {
+  const documents = []
+  let current = ''
+
+  let quote = null
+  let escaped = false
+
+  const lines = text.trim().split('\n')
+
+  for (const line of lines) {
+    const isSeparator = line.match(/^---[ \t]*$/)
+
+    if (isSeparator && !quote) {
+      if (current.trim()) {
+        documents.push(current.trim())
+      }
+      current = ''
+      continue
+    }
+
+    current += (current ? '\n' : '') + line
+
+    // Track JS string state
+    for (let i = 0; i < line.length; i++) {
+      const char = line[i]
+
+      if (escaped) {
+        escaped = false
+        continue
+      }
+
+      if (char === '\\') {
+        escaped = true
+        continue
+      }
+
+      if (quote) {
+        if (char === quote) {
+          quote = null
+        }
+      } else if (
+        char === "'" ||
+        char === '"' ||
+        char === '`'
+      ) {
+        quote = char
+      }
+    }
+  }
+
+  if (current.trim()) {
+    documents.push(current.trim())
+  }
+
+  return documents
+}