remark-mind-elixir 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-mind-elixir",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "keywords": [
     "remark",
@@ -24,15 +24,17 @@
       "types": "./src/index.d.ts"
     },
     "./client": {
-      "import": "./src/index.js",
-      "types": "./src/index.d.ts"
+      "import": "./src/client.js"
+    },
+    "./style": {
+      "import": "./src/style.css"
     }
   },
   "license": "MIT",
   "author": "zakaria elalaoui",
   "type": "module",
   "dependencies": {
-    "@zikojs/mind-elixir": "^0.6.1",
+    "@zikojs/mind-elixir": "^0.6.2",
     "hast-util-from-html-isomorphic": "^2.0.0",
     "mind-elixir": "6.0.0-next.4",
     "unist-util-visit": "^5.1.0",

package/src/client.js

@@ -0,0 +1,17 @@
+import { MindMap } from '@zikojs/mind-elixir/no-css'
+
+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)
+    })
+})

package/src/index.js

@@ -1,36 +1,46 @@
 import { visit } from 'unist-util-visit'
-import { parse } from 'yaml'
+import { parse, parseAllDocuments } from "yaml";
 
 import { yaml2MindElixirData } from '@zikojs/mind-elixir/utils'
 
 const remarkElixirMind = ({
   useCdn = true,
-} = {}) => {
+} = {}) => () => {
   return function transformer(tree) {
     let hasElixirMind = false
 
     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,23 +55,20 @@ const remarkElixirMind = ({
 @import url('https://esm.sh/mind-elixir/style')
 </style>
 
-<script type="module">
+<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>
 `
     })
@@ -76,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
+}

package/src/style.css

@@ -0,0 +1 @@
+@import 'mind-elixir/style.css';