Enhance Language Selection: Add Dropdown for Syntax Highlighters & Validate Language Before Updating Editor

example/example.html

@@ -101,7 +101,23 @@
           // inlineCode:,
 
         // Load Local Tools
-          code: editorJsCodeCup,
+        code: {
+          class: editorJsCodeCup,
+          // config: {
+          //   languages: { 
+          //       javascript: "JavaScript",
+          //       typescript: "TypeScript",
+          //       python: "Python",
+          //       java: "Java",
+          //       cpp: "C++",
+          //       csharp: "C#",
+          //       go: "Go",
+          //       rust: "Rust",
+          //       swift: "Swift",
+          //       none: "Plain Text",
+          //     } // override language selection
+          // } 
+        }
           // code: CodeTool,
 
         // Load 3rd Party Tools

package.json

@@ -7,7 +7,8 @@
   "license": "MIT",
   "main": "./dist/editorjs-codeCup.bundle.js",
   "scripts": {
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "build:watch": "webpack --watch --mode development"
   },
   "dependencies": {
     "@calumk/codecup": "^1.8.1"

readme.md

@@ -31,13 +31,13 @@ It was built to be an improvement on :
 
 ---
 
-## Installation / use
+## Installation / Use
 
 ```javascript
 import EditorJS from '@editorjs/editorjs';
 import editorjsCodecup from '@calumk/editorjs-codecup';
 
-var editor = EditorJS({
+var editor = new EditorJS({
   // ...
   tools: {
     ...
@@ -46,6 +46,40 @@ var editor = EditorJS({
 });
 ```
 
+### Language Selection
+
+This plugin includes a dropdown that enables users to choose a programming language for syntax highlighting with Prism.js.
+<br />Additionally, users can override the default language mapping by providing custom mappings of Prism.js language keys to their preferred display names in the configuration.
+<br />Refer to [Prism.js supported languages](https://prismjs.com/#supported-languages) for the available language mappings.
+
+
+#### Example Configuration
+
+```javascript
+import EditorJS from '@editorjs/editorjs';
+import editorjsCodecup from '@calumk/editorjs-codecup';
+
+var editor = new EditorJS({
+  // ...
+  tools: {
+    ...
+    code: {
+      class: editorJsCodeCup,
+      config: {
+        languages: { 
+          javascript: "JavaScript",
+          python: "Python",
+          java: "Java",
+          cpp: "C++",
+          csharp: "C#",
+          go: "Go",
+          none: "Plain Text",
+        } // override language selection
+      } 
+    }
+  },
+});
+```
 
 ## Data Format
 The data imported/exported from the block is as follows:
@@ -55,9 +89,7 @@ The data imported/exported from the block is as follows:
 | code                       | The code that is displayed in the editor, with line breaks |
 | language (optional)        | The programming language                                   |
 | showlinenumbers (optional) | Will show/hide the line numbers (Default true)             |
-| showCopyButton (optional)  | will show/hide the copy button (Defauly true)              |
-|                            |                                                            |
-
+| showCopyButton (optional)  | Will show/hide the copy button (Default true)              |
 
 Since language and linenumbers are optional, existing ```code``` blocks can safley use this plugin
 

src/codecup.css

@@ -25,7 +25,7 @@
 	padding: 5px;
 	padding-left: 10px;
 	padding-right: 10px;
-	right: 0;
+	right: 12px; 
 	bottom: 0;
 	border-bottom-right-radius: 5px;
 	border-top-left-radius: 5px;
@@ -71,4 +71,65 @@
 	padding:5px;
 	display: flex;
 	justify-content: space-between;
-}
+}
+
+.editorjs-codeCup_languageSelectContainer {
+	position: relative;
+}
+
+.editorjs-codeCup_languageDropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	background: white;
+	border: 1px solid #ddd;
+	padding: 5px;
+	z-index: 1000;
+	max-height: 200px;
+	overflow-y: auto;
+	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+	font-size: 14px;
+	min-width: 150px;
+}
+
+.editorjs-codeCup_languageOption {
+	font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+	padding: 6px 12px;
+	cursor: pointer;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.editorjs-codeCup_languageOption:hover {
+	background-color: #f5f5f5;		
+}
+
+.editorjs-codeCup_languageErrorMessage {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 500;
+	color: #d9534f;
+	background: white;
+	padding: 6px 10px;
+	margin-top: 8px;
+	border-left: 4px solid #d9534f;
+	border-radius: 4px;
+  }
+
+  .editorjs-codeCup_languageErrorMessage .close-error {
+	font-size: 18px;
+	font-weight: bold;
+	color: black;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	transition: color 0.2s ease;
+  }
+
+  .editorjs-codeCup_languageErrorMessage .close-error:hover {
+	color: #444;
+  }