Allow markdown/rich editor on figure block, fix toc highlight.

Unfortunately, I couldn't get the images uploaded inside the figure block to show in the preview, but they should show after saving. Fixes #38 Fixes #11
pentacode · Sep 14, 2022 · 1eee609 · 1eee609
1 parent a8cf1f6
commit 1eee609
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/_includes/components/section-menu.njk b/_includes/components/section-menu.njk
@@ -21,6 +21,11 @@
                 {% set hideChildren = true %}
             {% endif %}
 
+            {# Special case of pages/URLs with the same starting slug #}
+            {% if (not hideChildren) and (page.key === "/hilfe/handbuch/mitarbeiter-app" or page.key === "/hilfe/handbuch/mitarbeiter") and (eleventyNavigation.key === "/hilfe/handbuch/mitarbeiter-app" or eleventyNavigation.key === "/hilfe/handbuch/mitarbeiter") and (page.key !== eleventyNavigation.key) %}
+                {% set hideChildren = true %}
+            {% endif %}
+
             {% if hideChildren %}
                 {% set hiddenAttribute = "hidden" %}
             {% endif %}

diff --git a/admin/index.njk b/admin/index.njk
@@ -11,8 +11,13 @@
   <link rel="preload" href="https://fonts.gstatic.com/s/nunito/v16/XRXV3I6Li01BKofINeaBTMnFcQ.woff2" as="font"
     type="font/woff2" crossorigin />
   <script src="https://unpkg.com/netlify-cms@2.10.192/dist/netlify-cms.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script>
     (() => {
+      const md = window.markdownit({
+        html: true,
+      });
+
       CMS.registerPreviewStyle("/admin/base-preview.css");
       CMS.registerPreviewStyle("/admin/news-preview.css");
       CMS.registerPreviewStyle("/admin/magazin-preview.css");
@@ -195,7 +200,7 @@
           {
             name: 'body',
             label: 'HTML',
-            widget: 'text',
+            widget: 'markdown',
             required: true,
           }
         ],
@@ -208,19 +213,21 @@
           };
         },
         toBlock: function (data) {
+          const bodyHtml = md.renderInline(data.body || '');
           return `
-  <figure class="${data.extraClass}">
-    ${data.body}
-    <figcaption>${data.caption}</figcaption>
-  </figure>
+<figure class="${data.extraClass}">
+  ${bodyHtml}
+  <figcaption>${data.caption}</figcaption>
+</figure>
   `;
         },
         toPreview: function (data) {
+          const bodyHtml = md.renderInline(data.body || '');
           return `
-    <figure class="${data.extraClass}">
-      ${data.body}
-      <figcaption>${data.caption}</figcaption>
-    </figure>
+<figure class="${data.extraClass}">
+  ${bodyHtml}
+  <figcaption>${data.caption}</figcaption>
+</figure>
     `;
         }
       });