feat: add native code block feature with Prism highlighting and editor integration

- Implemented custom code block system for frontend and editors - Integrated Prism.js for syntax highlighting (YAML + HTML support) - Added copy-to-clipboard functionality with hover-based UI - Introduced custom Gutenberg block for code input - Added Classic Editor button for quick code insertion - Implemented server-side rendering via the_content filter - Added dedicated styling (code.css) with Dracula-inspired theme - Added editor preview styling (editor.css) for visual consistency - Ensured accessibility and keyboard support for copy button - Optimized asset loading and versioning using filemtime() This feature provides a lightweight, theme-native alternative to external code highlighting plugins.
2026-05-02 15:50:33 +02:00
parent 3150f4da51
commit b51ce9ab3f
10 changed files with 720 additions and 18 deletions
@@ -0,0 +1,113 @@
+(function () {
+  'use strict';
+
+  /**
+   * Gutenberg block
+   */
+  if (
+    window.wp &&
+    window.wp.blocks &&
+    window.wp.element &&
+    window.wp.i18n &&
+    window.wp.components &&
+    window.wp.blockEditor
+  ) {
+    const blocks = window.wp.blocks;
+    const element = window.wp.element;
+    const i18n = window.wp.i18n;
+    const blockEditor = window.wp.blockEditor;
+
+    const el = element.createElement;
+    const __ = i18n.__;
+    const PlainText = blockEditor.PlainText;
+
+    blocks.registerBlockType('ztfr/code-block', {
+      title: __('Code', 'zeitfresser'),
+      icon: 'editor-code',
+      category: 'formatting',
+      description: __('Insert a styled YAML code block.', 'zeitfresser'),
+      supports: {
+        html: false
+      },
+      attributes: {
+        content: {
+          type: 'string',
+          default: ''
+        }
+      },
+
+      edit: function (props) {
+        const content = props.attributes.content || '';
+
+        return el(
+          'div',
+          {
+            className: 'ztfr-code is-editor-preview',
+            'data-language': 'yaml'
+          },
+          el(
+            'pre',
+            { className: 'language-yaml' },
+            el(PlainText, {
+              tagName: 'code',
+              className: 'language-yaml',
+              value: content,
+              placeholder: __('Write or paste YAML code here…', 'zeitfresser'),
+              onChange: function (value) {
+                props.setAttributes({ content: value });
+              }
+            })
+          )
+        );
+      },
+
+      save: function (props) {
+        const content = props.attributes.content || '';
+
+        return el(
+          'pre',
+          { className: 'language-yaml' },
+          el(
+            'code',
+            { className: 'language-yaml' },
+            content
+          )
+        );
+      }
+    });
+  }
+
+  /**
+   * Classic Editor TinyMCE button
+   */
+  if (window.tinymce && window.tinymce.PluginManager) {
+    function escapeHtml(text) {
+      return String(text)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    window.tinymce.PluginManager.add('ztfr_code_block', function (editor) {
+      function insertCodeBlock() {
+        const selectedText = editor.selection.getContent({ format: 'text' });
+        const code = selectedText || 'your_key: your_value';
+        const safeCode = escapeHtml(code);
+
+        editor.insertContent(
+          '<pre class="language-yaml"><code class="language-yaml">' +
+          safeCode +
+          '</code></pre><p></p>'
+        );
+      }
+
+      editor.addButton('ztfr_code_block', {
+        text: 'Code',
+        icon: false,
+        onclick: insertCodeBlock
+      });
+    });
+  }
+})();