diff --git a/phpmyfaq/admin/assets/scss/style.scss b/phpmyfaq/admin/assets/scss/style.scss index c6c520309d..f9e08b09c0 100644 --- a/phpmyfaq/admin/assets/scss/style.scss +++ b/phpmyfaq/admin/assets/scss/style.scss @@ -24,6 +24,9 @@ // Bootstrap Icons @import '../../../../node_modules/bootstrap-icons/font/bootstrap-icons'; +// Highlight.js +@import '../../../../node_modules/highlight.js/styles/default.css'; + // Import Mixins @import 'mixins.scss'; diff --git a/phpmyfaq/admin/assets/src/content/editor.js b/phpmyfaq/admin/assets/src/content/editor.js index ea82deee86..8645e18757 100644 --- a/phpmyfaq/admin/assets/src/content/editor.js +++ b/phpmyfaq/admin/assets/src/content/editor.js @@ -42,6 +42,7 @@ import 'jodit/esm/modules/uploader/uploader.js'; import 'jodit/esm/plugins/video/video.js'; import '../plugins/phpmyfaq/phpmyfaq.js'; import '../plugins/code-snippet/code-snippet.js'; +import hljs from 'highlight.js'; export const renderEditor = () => { const editor = document.getElementById('editor'); @@ -52,6 +53,8 @@ export const renderEditor = () => { const joditEditor = Jodit.make(editor, { zIndex: 0, readonly: false, + beautifyHTML: false, + sourceEditor: 'area', activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about', 'dots'], toolbarButtonSize: 'middle', theme: 'default', @@ -61,10 +64,10 @@ export const renderEditor = () => { triggerChangeEvent: true, width: 'auto', height: 'auto', - minHeight: 100, + minHeight: 400, direction: '', language: 'auto', - debugLanguage: true, + debugLanguage: false, i18n: 'en', tabIndex: -1, toolbar: true, @@ -246,4 +249,16 @@ export const renderEditor = () => { showFileName: true, }, }); + + joditEditor.events.on('afterSetValue', () => { + joditEditor.container.querySelectorAll('pre code').forEach((block) => { + hljs.highlightElement(block); + }); + }); + + joditEditor.events.on('change', () => { + joditEditor.container.querySelectorAll('pre code').forEach((block) => { + hljs.highlightElement(block); + }); + }); }; diff --git a/phpmyfaq/admin/assets/src/plugins/code-snippet/code-snippet.js b/phpmyfaq/admin/assets/src/plugins/code-snippet/code-snippet.js index 2ce4236810..c81da65666 100644 --- a/phpmyfaq/admin/assets/src/plugins/code-snippet/code-snippet.js +++ b/phpmyfaq/admin/assets/src/plugins/code-snippet/code-snippet.js @@ -1,3 +1,18 @@ +/** + * Jodit Editor plugin to insert source code snippets with syntax highlighting + * + * This Source Code Form is subject to the terms of the Mozilla Public License, + * v. 2.0. If a copy of the MPL was not distributed with this file, You can + * obtain one at https://mozilla.org/MPL/2.0/. + * + * @package phpMyFAQ + * @author Thorsten Rinne + * @copyright 2025 phpMyFAQ Team + * @license http://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0 + * @link https://www.phpmyfaq.de + * @since 2025-01-05 + */ + import { Jodit } from 'jodit'; import codeSnippet from '../code-snippet/code-snippet.svg.js'; @@ -9,7 +24,9 @@ Jodit.plugins.add('codeSnippet', (editor) => { name: 'codeSnippet', group: 'insert', icon: 'codeSnippet', - text: 'Insert Source Code Snippet', + options: { + tooltip: 'Insert Source Code Snippet', + }, }); // Register the command @@ -74,6 +91,7 @@ Jodit.plugins.add('codeSnippet', (editor) => { const selectedCode = code.value; const codeSnippet = `
${encodeHTML(selectedCode)}
`; editor.selection.insertHTML(codeSnippet); + editor.events.fire('change'); dialog.close(); }); });