Dome
b51ce9ab3f
- 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.
114 lines
2.7 KiB
JavaScript
114 lines
2.7 KiB
JavaScript
(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, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
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
|
|
});
|
|
});
|
|
}
|
|
})();
|