Language Improvements

dist/editorjs-codeCup.bundle.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /**
-  * EditorJsCodeCup Block for the Editor.js.
-  *
-  * @author Calum Knott ([email protected])
-  * @license The MIT License (MIT)
-  */
+ * EditorJsCodeCup Block for the Editor.js.
+ *
+ * @author Calum Knott ([email protected])
+ * @license The MIT License (MIT)
+ */

example/example.html

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

package.json

@@ -1,13 +1,14 @@
 {
   "name": "@calumk/editorjs-codecup",
   "description": "Codecup, for EditorJS",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Calum Knott",
   "repository": "https://github.com/calumk/editorjs-codecup",
   "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,64 @@ var editor = EditorJS({
 });
 ```
 
+### Language Selection
+
+The plugin provides two ways to handle language selection:
+
+1. **Free-form Language Input**: By default (when no languages are configured), users can enter any valid Prism.js language key through a text input.
+
+2. **Predefined Language Dropdown**: When you provide a languages configuration, users can select from a predefined list of languages through a dropdown menu.
+
+You can configure the language selection behavior using these options:
+
+#### Predefined Languages
+Provide a custom mapping of Prism.js language keys to their display names:
+
+```javascript
+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",
+        }
+      } 
+    }
+  },
+});
+```
+
+#### Force Show Language Input
+If you want to allow both predefined language selection AND free-form language input, use the `forceShowLanguageInput` option:
+
+```javascript
+var editor = new EditorJS({
+  // ...
+  tools: {
+    code: {
+      class: editorJsCodeCup,
+      config: {
+        languages: { 
+          javascript: "JavaScript",
+          python: "Python",
+          // ... other languages
+        },
+        forceShowLanguageInput: true // Shows both dropdown and language input
+      } 
+    }
+  },
+});
+```
+
+Refer to [Prism.js supported languages](https://prismjs.com/#supported-languages) for the available language mappings.
 
 ## Data Format
 The data imported/exported from the block is as follows:
@@ -55,30 +113,17 @@ 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
 
 
 
-<!-- ---
-
-## Markdown Compatability
-
-> TODO!
-
-This plugin *will be* compatible with
-
-    npm i editorjs-markdown-parser
+---
 
-It will import/export using the code fence markdown style, with the language printed imediatly after the first fence, as described in [GFM #117](https://github.github.com/gfm/#example-112)
+## Contributing
 
-Line-numbers cant be expressed in markdown, so will be ommited
+@calumk
 
-Example :
+@keertyverma
 
-    ```javascript
-    \\ Hello World
-    ``` -->

src/codecup.css

@@ -25,7 +25,7 @@
 	padding: 5px;
 	padding-left: 10px;
 	padding-right: 10px;
-	right: 0;
+	right: 0px; 
 	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 {
+	/* top:10px; left:100px; */
+	position: fixed;
+	background: white;
+	border: 1px solid #ddd;
+	padding: 5px;
+	z-index: 9999;
+	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;
+	/* The position will need to be set dynamically via JavaScript */
+}
+
+.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;
+  }