Multiple Languages 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

@@ -103,20 +103,22 @@
         // Load Local Tools
         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
-          // } 
+          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,
 

package.json

@@ -1,7 +1,7 @@
 {
   "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",

readme.md

@@ -48,21 +48,21 @@ var editor = new 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.
+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.
 
-#### Example Configuration
+2. **Predefined Language Dropdown**: When you provide a languages configuration, users can select from a predefined list of languages through a dropdown menu.
 
-```javascript
-import EditorJS from '@editorjs/editorjs';
-import editorjsCodecup from '@calumk/editorjs-codecup';
+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: {
@@ -74,13 +74,37 @@ var editor = new EditorJS({
           csharp: "C#",
           go: "Go",
           none: "Plain Text",
-        } // override language selection
+        }
       } 
     }
   },
 });
 ```
 
+#### 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:
 
@@ -95,22 +119,11 @@ Since language and linenumbers are optional, existing ```code``` blocks can safl
 
 
 
-<!-- ---
-
-## 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: 12px; 
+	right: 0px; 
 	bottom: 0;
 	border-bottom-right-radius: 5px;
 	border-top-left-radius: 5px;
@@ -78,19 +78,19 @@
 }
 
 .editorjs-codeCup_languageDropdown {
-	position: absolute;
-	top: 100%;
-	left: 0;
+	/* top:10px; left:100px; */
+	position: fixed;
 	background: white;
 	border: 1px solid #ddd;
 	padding: 5px;
-	z-index: 1000;
+	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 {