From 0e34a6f4ebf1d976829e09cc19050291003307ea Mon Sep 17 00:00:00 2001
From: Robert Means <robert@robertmeans.net>
Date: Sun, 7 Jan 2024 10:16:06 -0500
Subject: [PATCH] init

---
 index.js                            | 56 +++++++++++++----
 package.json                        | 26 +++-----
 test/example.js                     | 44 -------------
 test/package.json                   |  9 ---
 ui/apos/components/InputMermaid.vue | 97 +++++++++++++++++++++++++++++
 ui/src/index.js                     | 15 +++++
 ui/src/index.scss                   |  4 ++
 views/widget.html                   |  5 ++
 8 files changed, 172 insertions(+), 84 deletions(-)
 delete mode 100644 test/example.js
 delete mode 100644 test/package.json
 create mode 100644 ui/apos/components/InputMermaid.vue
 create mode 100644 ui/src/index.js
 create mode 100644 ui/src/index.scss
 create mode 100644 views/widget.html

diff --git a/index.js b/index.js
index 688e3e0..6a00d1f 100644
--- a/index.js
+++ b/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}`);
-}
diff --git a/package.json b/package.json
index f4f02a3..74d6385 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/test/example.js b/test/example.js
deleted file mode 100644
index c48856c..0000000
--- a/test/example.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const assert = require('assert').strict;
-const t = require('apostrophe/test-lib/util.js');
-
-const getAppConfig = () => {
-  return {
-    '@apostrophecms/express': {
-      options: {
-        session: { secret: 'supersecret' }
-      }
-    },
-    '@apostrophecms/module': {
-      options: {
-      }
-    }
-  };
-};
-
-describe('@apostrophecms/module', function () {
-  let apos;
-
-  this.timeout(t.timeout);
-
-  after(function () {
-    return t.destroy(apos);
-  });
-
-  before(async function() {
-    apos = await t.create({
-      root: module,
-      baseUrl: 'http://localhost:3000',
-      testModule: true,
-      modules: getAppConfig()
-    });
-  });
-
-  describe('init', function() {
-    it('should have module enabled', function () {
-      const actual = Object.keys(apos.modules).includes('@apostrophecms/module');
-      const expected = true;
-
-      assert.equal(actual, expected);
-    });
-  });
-});
diff --git a/test/package.json b/test/package.json
deleted file mode 100644
index a627685..0000000
--- a/test/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/**": "This package.json file is not actually installed.",
-  " * ": "Apostrophe requires that all npm modules to be loaded by moog",
-  " */": "exist in package.json at project level, which for a test is here",
-  "dependencies": {
-    "apostrophe": "git+https://github.com/apostrophecms/apostrophe.git",
-    "@apostrophecms/module": "git+https://github.com/apostrophecms/module.git"
-  }
-}
diff --git a/ui/apos/components/InputMermaid.vue b/ui/apos/components/InputMermaid.vue
new file mode 100644
index 0000000..89a0517
--- /dev/null
+++ b/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>
diff --git a/ui/src/index.js b/ui/src/index.js
new file mode 100644
index 0000000..a21d563
--- /dev/null
+++ b/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);
+    }
+  };
+};
diff --git a/ui/src/index.scss b/ui/src/index.scss
new file mode 100644
index 0000000..49cf870
--- /dev/null
+++ b/ui/src/index.scss
@@ -0,0 +1,4 @@
+pre .mermaid {
+  all: initial;
+  display: block;
+}
\ No newline at end of file
diff --git a/views/widget.html b/views/widget.html
new file mode 100644
index 0000000..c8657b3
--- /dev/null
+++ b/views/widget.html
@@ -0,0 +1,5 @@
+<section data-mermaid-widget>
+<pre class="mermaid" style="background: #fff; width: 100%;">
+  {{ data.widget.mermaid }}
+</pre>
+</section>
\ No newline at end of file