init

index.js

@@ -1,17 +1,47 @@
-const fs = require('fs');
-const path = require('path');
-
 module.exports = {
-  bundle: {
-    directory: 'modules',
-    modules: getBundleModuleNames()
+  extend: '@apostrophecms/widget-type',
+  options: {
+    label: 'Mermaid Widget'
+  },
+  init(self) {
+    self.addMermaidFieldType();
+  },
+  fields: {
+    add: {
+      mermaid: {
+        type: 'mermaidField',
+        label: 'Mermaid',
+        help: 'Enter your mermaid code here'
+      }
+    },
+    group: {
+      basics: {
+        label: 'Basics',
+        fields: [
+          'mermaid'
+        ]
+      }
+    }
+  },
+  methods(self) {
+    return {
+      addMermaidFieldType() {
+        self.apos.schema.addFieldType({
+          name: 'mermaidField',
+          convert: self.convertInput,
+          vueComponent: 'InputMermaid'
+        });
+      },
+      async convertInput(req, field, data, object) {
+        const input = data[field.name];
+        if ((data[field.name] == null) || (data[field.name] === '')) {
+          if (field.required) {
+            throw self.apos.error('notfound');
+          }
+        };
+        object[field.name] = self.apos.launder.string(input, field.def);
+      }
+    };
   }
 };
 
-function getBundleModuleNames() {
-  const source = path.join(__dirname, './modules/@apostrophecms');
-  return fs
-    .readdirSync(source, { withFileTypes: true })
-    .filter(dirent => dirent.isDirectory())
-    .map(dirent => `@apostrophecms/${dirent.name}`);
-}

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@apostrophecms/module-template",
+  "name": "mermaid-ecxtension",
   "version": "1.0.0",
-  "description": "A template for creating an ApostropheCMS 3 module.",
+  "description": "An extension to add the Mermaid diagram package to ApostropheCMS",
   "main": "index.js",
   "scripts": {
     "eslint": "eslint --ext .js,.vue .",
@@ -10,23 +10,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/apostrophecms/module-template.git"
+    "url": "git+https://github.com/BoDonkey/mermaid-extension.git"
   },
-  "homepage": "https://github.com/apostrophecms/module-template#readme",
-  "author": "Apostrophe Technologies",
+  "homepage": "https://github.com/BoDonkey/mermaid-extension#readme",
+  "author": "BoDonkey",
   "license": "MIT",
-  "devDependencies": {
-    "apostrophe": "github:apostrophecms/apostrophe",
-    "eslint": "^8.55.0",
-    "eslint-config-apostrophe": "^4.2.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.19.2",
-    "mocha": "^10.2.0",
-    "stylelint": "^15.11.0",
-    "stylelint-config-apostrophe": "^3.0.0",
-    "vue-eslint-parser": "^9.3.2"
+  "dependencies": {
+    "ace-builds": "^1.32.3",
+    "mermaid": "^10.6.1"
   }
 }

ui/apos/components/InputMermaid.vue

@@ -0,0 +1,97 @@
+<template>
+  <AposInputWrapper :modifiers="modifiers" :field="field" :error="effectiveError" :uid="uid"
+    :display-options="displayOptions">
+    <template #body>
+      <div>
+        <h2>Mermaid Diagram</h2>
+        <div id="preview-editor" ref="editor"></div> <!-- Use a ref for more control -->
+        <button @click="renderDiagram">Render Diagram</button>
+        <button @click="clearDiagram">Clear</button>
+        <div id="mermaidOutput"></div>
+      </div>
+    </template>
+  </AposInputWrapper>
+</template>
+
+<script>
+import mermaid from 'mermaid';
+import ace from 'ace-builds/src-noconflict/ace'
+import 'ace-builds/src-noconflict/mode-plain_text'
+import 'ace-builds/src-noconflict/theme-monokai'
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+export default {
+  mixins: [AposInputMixin],
+  name: 'InputMermaid',
+  props: {
+    value: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      editor: null,
+    };
+  },
+  mounted() {
+    this.editor = ace.edit(this.$refs.editor, {
+      minLines: 10,
+      fontSize: 14,
+      tabSize: 2
+    }); // Use ref
+    this.editor.session.setMode("ace/mode/plain_text");
+    this.editor.setTheme("ace/theme/monokai");
+
+     // Set the editor's value to the existing value from the database
+     if (this.value && this.value.data) {
+        this.editor.setValue(this.value.data);
+    }
+
+    // Update Apostrophe data on editor change
+    this.editor.getSession().on('change', () => {
+      this.update(this.editor.getValue());
+    });
+    mermaid.initialize({ startOnLoad: false });
+  },
+  methods: {
+    validate(value) {
+      if (this.field.required) {
+        if (!value) {
+          return 'required';
+        }
+      }
+      return false;
+    },
+    update(value) {
+      // Update the ApostropheCMS data
+      this.next = value;
+    },
+    async renderDiagram() {
+      const mermaidCode = this.editor.getValue();
+      const mermaidContainer = document.getElementById('mermaidOutput');
+
+      // Wrap the mermaid code in <pre class="mermaid">
+      mermaidContainer.innerHTML = `<pre class="mermaid vue-mermaid" style="background: #fff; width: 100%;">${mermaidCode}</pre>`;
+
+      // Reinitialize mermaid to process the new diagram
+      await mermaid.run({
+        querySelector: '.vue-mermaid'
+      });
+    },
+    clearDiagram() {
+      this.editor.setValue('');
+    }
+  }
+}
+</script>
+
+<style scoped>
+#preview-editor {
+  height: 250px;
+}
+
+button {
+  margin: 10px 10px 10px 0;
+}
+</style>

ui/src/index.js

@@ -0,0 +1,15 @@
+import mermaid from 'mermaid';
+export default () => {
+  mermaid.initialize({ startOnLoad: false });
+  apos.util.widgetPlayers.mermaid = {
+    selector: '[data-mermaid-widget]',
+    player: function (el) {
+      const target = el.querySelector('.mermaid');
+      setTimeout(async () => {
+        await mermaid.run({
+          nodes: document.querySelectorAll('.mermaid')
+        });
+      }, 100);
+    }
+  };
+};

ui/src/index.scss

@@ -0,0 +1,4 @@
+pre .mermaid {
+  all: initial;
+  display: block;
+}

views/widget.html

@@ -0,0 +1,5 @@
+<section data-mermaid-widget>
+<pre class="mermaid" style="background: #fff; width: 100%;">
+  {{ data.widget.mermaid }}
+</pre>
+</section>