diff --git a/README.md b/README.md index fa841aa..ccff600 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,8 @@ Example: ## Known Issues -* After merging similar code blocks, pressing any arrow key results in an error. (Probably caused by the way Editor.js handles merges) +* While Pasting after a CMD+A selection, only the first character is replaced (Firefox, but works on Safari). + * Workaround is to remove the text after selection and then paste. +* Extra new line break added for every Enter key on Safari browser. * There is no syntax highlighting for code. This is done to avoid any impact to the actual code data (Adding syntax highlighting can impact inner HTML, which will directly affect saved data). * Terminal buttons are non-functional. These are intentionally left to avoid making the package too complex. These can be anyway be added at the render time. \ No newline at end of file diff --git a/package.json b/package.json index be4083c..7453745 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@coolbytes/editorjs-code", "description": "Code block tool for Editor.js", - "version": "1.0.1", + "version": "1.0.2", "private": false, "homepage": "https://apps.coolbytes.in/editorjs-code", "license": "MIT", diff --git a/src/index.css b/src/index.css index a4caced..248ccf3 100644 --- a/src/index.css +++ b/src/index.css @@ -8,7 +8,7 @@ .ce-code > pre { min-height: 25px; - font-family: 'FiraCode', sans-serif; + font-family: monospace; overflow-x: auto; background: #242e39; color: #ccc; @@ -25,7 +25,9 @@ } .ce-code > pre > code { - padding: 20px 0px; + outline: none; + line-height: 1.25em; + font-family: monospace; } .ce-code > pre > code::selection { @@ -104,6 +106,11 @@ position: relative; } +.ce-copy-btn svg { + height: 16px; + width: 16px; +} + .ce-copy-tooltip { font-size: 12px; /* width: 50px; */ diff --git a/src/index.js b/src/index.js index f778ab7..eaa24b5 100644 --- a/src/index.js +++ b/src/index.js @@ -261,18 +261,18 @@ export default class Code { //
 tag to wrap the code block
     const preDiv = document.createElement('PRE');
-    preDiv.contentEditable = !this._readOnly;
-    preDiv.addEventListener("paste", (event) => this._onPaste(event));
-    preDiv.addEventListener('keydown', (event) => {
-      if (event.code === 'Tab') {
-        this._tabHandler(event);
-      }
-    });
 
     // Code block
     this._codeBlock = document.createElement('CODE');
     this._codeBlock.setAttribute('language', this.currentLanguage);
     this._codeBlock.textContent = this._data.code || '';
+    this._codeBlock.contentEditable = !this._readOnly;
+    this._codeBlock.addEventListener("paste", (event) => this._onPaste(event));
+    this._codeBlock.addEventListener('keydown', (event) => {
+      if (event.code === 'Tab') {
+        this._tabHandler(event);
+      }
+    });
     preDiv.appendChild(this._codeBlock);
 
     parentDiv.appendChild(terminalBar);
@@ -410,7 +410,7 @@ export default class Code {
    */
   merge(data) {
     if (this._codeBlock) {
-      this._codeBlock.textContent = this._codeBlock.textContent + data.code || '';
+      this._codeBlock.innerHTML = this._codeBlock.innerHTML + data.code || '';
     }
   }