impl for DeepThought themes

Author: hatappo

src/DeepThought/chart.js

@@ -0,0 +1,33 @@
+CMS.registerEditorComponent({
+  id: "chart",
+  label: "Chart",
+  fields: [
+    {
+      name: "body",
+      label: "the body text",
+      widget: "text"
+    },
+  ],
+  pattern: /^{% chart\(\) %}\n(.*?)\n^{% end %}$/ms,
+  fromBlock: function(match) {
+    return {
+      body: match[1],
+    };
+  },
+  toBlock: function(obj) {
+    const body = obj.body || '';
+    return `
+{% chart() %}
+${body}
+{% end %}
+`;
+  },
+  toPreview: function(obj) {
+    const body = obj.body || '';
+    return `
+{% chart() %}
+${body}
+{% end %}
+`;
+  },
+});

src/DeepThought/galleria.js

@@ -0,0 +1,33 @@
+CMS.registerEditorComponent({
+  id: "galleria",
+  label: "Galleria",
+  fields: [
+    {
+      name: "body",
+      label: "the body text",
+      widget: "text"
+    },
+  ],
+  pattern: /^{% galleria\(\) %}\n(.*?)\n^{% end %}$/ms,
+  fromBlock: function(match) {
+    return {
+      body: match[1],
+    };
+  },
+  toBlock: function(obj) {
+    const body = obj.body || '';
+    return `
+{% galleria() %}
+${body}
+{% end %}
+`;
+  },
+  toPreview: function(obj) {
+    const body = obj.body || '';
+    return `
+{% galleria() %}
+${body}
+{% end %}
+`;
+  },
+});

src/DeepThought/katex.js

@@ -0,0 +1,41 @@
+CMS.registerEditorComponent({
+  id: "katex",
+  label: "Katex",
+  fields: [
+    {
+      name: "body",
+      label: "the body text",
+      widget: "text"
+    },
+    {
+      name: "block",
+      label: "if true, add `mode=display` into type of the script tag.",
+      widget: "boolean"
+    },
+  ],
+  pattern: /^{% katex\(block=(true|false)\) %}\n(.*?)\n^{% end %}$/ms,
+  fromBlock: function(match) {
+    return {
+      block: match[1],
+      body: match[2],
+    };
+  },
+  toBlock: function(obj) {
+    const block = !!obj.block;
+    const body = obj.body || '';
+    return `
+{% katex(block=${block}) %}
+${body}
+{% end %}
+`;
+  },
+  toPreview: function(obj) {
+    const block = !!obj.block;
+    const body = obj.body || '';
+    return `
+{% katex(block=${block}) %}
+${body}
+{% end %}
+`;
+  },
+});

src/DeepThought/mapbox.js

@@ -0,0 +1,41 @@
+CMS.registerEditorComponent({
+  id: "mapbox",
+  label: "Mapbox",
+  fields: [
+    {
+      name: "body",
+      label: "the body text",
+      widget: "text"
+    },
+    {
+      name: "zoom",
+      label: "zoom level. see https://docs.mapbox.com/help/glossary/zoom-level/",
+      widget: "number"
+    },
+  ],
+  pattern: /^{% mapbox\(zoom=([0-9]+)\) %}\n(.*?)\n^{% end %}$/ms,
+  fromBlock: function(match) {
+    return {
+      zoom: match[1],
+      body: match[2],
+    };
+  },
+  toBlock: function(obj) {
+    const zoom = obj.zoom ?? 10;
+    const body = obj.body || '';
+    return `
+{% mapbox(zoom=${zoom}) %}
+${body}
+{% end %}
+`;
+  },
+  toPreview: function(obj) {
+    const zoom = obj.zoom ?? 10;
+    const body = obj.body || '';
+    return `
+{% mapbox(zoom=${zoom}) %}
+${body}
+{% end %}
+`;
+  },
+});

src/DeepThought/mermaid.js

@@ -0,0 +1,33 @@
+CMS.registerEditorComponent({
+  id: "mermaid",
+  label: "Mermaid",
+  fields: [
+    {
+      name: "body",
+      label: "the body text",
+      widget: "text"
+    },
+  ],
+  pattern: /^{% mermaid\(\) %}\n(.*?)\n^{% end %}$/ms,
+  fromBlock: function(match) {
+    return {
+      body: match[1],
+    };
+  },
+  toBlock: function(obj) {
+    const body = obj.body || '';
+    return `
+{% mermaid() %}
+${body}
+{% end %}
+`;
+  },
+  toPreview: function(obj) {
+    const body = obj.body || '';
+    return `
+{% mermaid() %}
+${body}
+{% end %}
+`;
+  },
+});

src/DeepThought/vimeo.js

@@ -0,0 +1,25 @@
+CMS.registerEditorComponent({
+  id: "vimeo",
+  label: "Vimeo",
+  fields: [
+    {
+      name: "id",
+      label: "the video id (mandatory)",
+      widget: "string"
+    },
+  ],
+  pattern: /{{ vimeo\(id="([0-9]+)"\) }}/,
+  fromBlock: function(match) {
+    return {
+      id: match[1],
+    };
+  },
+  toBlock: function(obj) {
+    const id = obj.id || '';
+    return `{{ vimeo(id="${obj.id || ''}") }}`;
+  },
+  toPreview: function(obj) {
+    const id = obj.id || '';
+    return `{{ vimeo(id="${obj.id || ''}") }}`;
+  },
+});