feat(editor): added syntas highlighting in editor as well (#3301)

thorsten · Jan 6, 2025 · bdbf6c7 · bdbf6c7
1 parent b1d96aa
commit bdbf6c7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 <thorsten@phpmyfaq.de>
+ * @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 = `<pre><code class="language-${selectedLanguage}">${encodeHTML(selectedCode)}</code></pre>`;
       editor.selection.insertHTML(codeSnippet);
+      editor.events.fire('change');
       dialog.close();
     });
   });