1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_kroki.js b/app/assets/javascripts/behaviors/markdown/render_kroki.js
new file mode 100644
index 00000000000..7843df0cd8e
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_kroki.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import DiagramPerformanceWarning from '../components/diagram_performance_warning.vue';
+import { unrestrictedPages } from './constants';
+
+/**
+ * Create alert element.
+ *
+ * @param {Element} krokiImage Kroki `img` element
+ * @return {Element} Alert element
+ */
+function createAlert(krokiImage) {
+  const app = new Vue({
+    el: document.createElement('div'),
+    name: 'DiagramPerformanceWarningRoot',
+    render(createElement) {
+      return createElement(DiagramPerformanceWarning, {
+        on: {
+          closeAlert() {
+            app.$destroy();
+            app.$el.remove();
+          },
+          showImage() {
+            krokiImage.removeAttribute('hidden');
+            app.$destroy();
+            app.$el.remove();
+          },
+        },
+      });
+    },
+  });
+
+  return app.$el;
+}
+
+/**
+ * Add warning alert to hidden Kroki images,
+ * or show Kroki image if on an unrestricted page.
+ *
+ * Kroki images are given a hidden attribute by the
+ * backend when the original markdown source is large.
+ *
+ * @param {Array<Element>} krokiImages Array of hidden Kroki `img` elements
+ */
+export function renderKroki(krokiImages) {
+  const pageName = document.querySelector('body').dataset.page;
+  const isUnrestrictedPage = unrestrictedPages.includes(pageName);
+
+  krokiImages.forEach((krokiImage) => {
+    if (isUnrestrictedPage) {
+      krokiImage.removeAttribute('hidden');
+      return;
+    }
+
+    const parent = krokiImage.closest('.js-markdown-code');
+
+    // A single Kroki image is processed multiple times for some reason,
+    // so this condition ensures we only create one alert per Kroki image
+    if (!parent.hasAttribute('data-kroki-processed')) {
+      parent.setAttribute('data-kroki-processed', 'true');
+      parent.after(createAlert(krokiImage));
+    }
+  });
+}