From ff07dbcea6b339aeb46af39374a203e7d44b8d23 Mon Sep 17 00:00:00 2001 From: Abdullah Alabbad Date: Fri, 9 Apr 2021 01:30:07 +1000 Subject: [PATCH 1/4] add dropdown menu to specify the language for the written code --- src/index.css | 41 ++++++++++++++++++++--------- src/index.js | 72 +++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 82 insertions(+), 31 deletions(-) diff --git a/src/index.css b/src/index.css index cc4a48a..fab970f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,31 @@ .ce-code__textarea { - min-height: 200px; - font-family: Menlo, Monaco, Consolas, Courier New, monospace; - color: #41314e; - line-height: 1.6em; - font-size: 12px; - background: #f8f7fa; - border: 1px solid #f1f1f4; - box-shadow: none; - white-space: pre; - word-wrap: normal; - overflow-x: auto; - resize: vertical; + min-height: 200px; + font-family: Menlo, Monaco, Consolas, Courier New, monospace; + color: #41314e; + line-height: 1.6em; + font-size: 12px; + background: #f8f7fa; + border: 1px solid #f1f1f4; + box-shadow: none; + white-space: pre; + word-wrap: normal; + overflow-x: auto; + resize: vertical; +} + +.ce-code__dropdown { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearnance: none; + appearnance: none; + min-height: 40px; + margin-bottom: 5px; + line-height: 1.6em; + font-size: 14px; +} + +.ce-code__dropdown select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; } diff --git a/src/index.js b/src/index.js index d7506d9..8bf3ff7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ /** * Build styles */ -import { getLineStartPosition } from './utils/string'; -import './index.css'; +import { getLineStartPosition } from "./utils/string"; +import "./index.css"; /** * CodeTool for Editor.js @@ -19,7 +19,6 @@ import './index.css'; * Code Tool for the Editor.js allows to include code examples in your articles. */ export default class CodeTool { - /** * Notify core that read-only mode is supported * @@ -59,20 +58,24 @@ export default class CodeTool { this.placeholder = this.api.i18n.t(config.placeholder || CodeTool.DEFAULT_PLACEHOLDER); + this.languages = this.config.languages; // <<- languages array, if specified + this.CSS = { baseClass: this.api.styles.block, input: this.api.styles.input, - wrapper: 'ce-code', - textarea: 'ce-code__textarea', + wrapper: "ce-code", + textarea: "ce-code__textarea", + dropdown: "ce-code__dropdown", // <<- class name for dropdown menu }; this.nodes = { holder: null, textarea: null, + dropdown: null, // <<- define dropdown node }; this.data = { - code: data.code || '', + code: data.code || "", }; this.nodes.holder = this.drawView(); @@ -85,8 +88,27 @@ export default class CodeTool { * @private */ drawView() { - const wrapper = document.createElement('div'), - textarea = document.createElement('textarea'); + const wrapper = document.createElement("div"), + textarea = document.createElement("textarea"); + + if (typeof this.config.languages === "object") { + const dropdown = document.createElement("select"); + + dropdown.classList.add(this.CSS.dropdown, this.CSS.input); + dropdown.value = this.data.languages; + + this.languages.forEach((lang) => { + let option = document.createElement("option"); + + option.classList.add(`${this.CSS.dropdown}__option`); + option.textContent = lang; + + dropdown.appendChild(option); + }); + + wrapper.appendChild(dropdown); + this.nodes.dropdown = dropdown; + } wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper); textarea.classList.add(this.CSS.textarea, this.CSS.input); @@ -103,9 +125,9 @@ export default class CodeTool { /** * Enable keydown handlers */ - textarea.addEventListener('keydown', (event) => { + textarea.addEventListener("keydown", (event) => { switch (event.code) { - case 'Tab': + case "Tab": this.tabHandler(event); break; } @@ -134,9 +156,16 @@ export default class CodeTool { * @public */ save(codeWrapper) { - return { - code: codeWrapper.querySelector('textarea').value, - }; + if (typeof this.config.languages === "object") { + return { + language: codeWrapper.querySelector("select").value, + code: codeWrapper.querySelector("textarea").value, + }; + } else { + return { + code: codeWrapper.querySelector("textarea").value, + }; + } } /** @@ -172,6 +201,9 @@ export default class CodeTool { if (this.nodes.textarea) { this.nodes.textarea.textContent = data.code; } + if (this.nodes.dropdown) { + this.nodes.dropdown.value = data.languages; + } } /** @@ -183,8 +215,9 @@ export default class CodeTool { */ static get toolbox() { return { - icon: ' ', - title: 'Code', + icon: + ' ', + title: "Code", }; } @@ -195,7 +228,7 @@ export default class CodeTool { * @returns {string} */ static get DEFAULT_PLACEHOLDER() { - return 'Enter a code'; + return "Enter a code"; } /** @@ -207,7 +240,7 @@ export default class CodeTool { */ static get pasteConfig() { return { - tags: [ 'pre' ], + tags: ["pre"], }; } @@ -244,7 +277,7 @@ export default class CodeTool { const isShiftPressed = event.shiftKey; const caretPosition = textarea.selectionStart; const value = textarea.value; - const indentation = ' '; + const indentation = " "; let newCaretPosition; @@ -269,7 +302,8 @@ export default class CodeTool { /** * Trim the first two chars from the start of line */ - textarea.value = value.substring(0, currentLineStart) + value.substring(currentLineStart + indentation.length); + textarea.value = + value.substring(0, currentLineStart) + value.substring(currentLineStart + indentation.length); newCaretPosition = caretPosition - indentation.length; } From 11c5a512a0fe2c378ea1c5c29308d279493b6830 Mon Sep 17 00:00:00 2001 From: Abdullah Alabbad Date: Fri, 9 Apr 2021 02:29:11 +1000 Subject: [PATCH 2/4] fix some bugs and add error checking --- src/index.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index 8bf3ff7..50646f1 100644 --- a/src/index.js +++ b/src/index.js @@ -58,7 +58,7 @@ export default class CodeTool { this.placeholder = this.api.i18n.t(config.placeholder || CodeTool.DEFAULT_PLACEHOLDER); - this.languages = this.config.languages; // <<- languages array, if specified + this.languages = config.languages; // <<- languages array, if specified this.CSS = { baseClass: this.api.styles.block, @@ -91,22 +91,28 @@ export default class CodeTool { const wrapper = document.createElement("div"), textarea = document.createElement("textarea"); - if (typeof this.config.languages === "object") { + if (typeof this.languages === "object" && this.languages.length > 0) { const dropdown = document.createElement("select"); dropdown.classList.add(this.CSS.dropdown, this.CSS.input); dropdown.value = this.data.languages; - this.languages.forEach((lang) => { - let option = document.createElement("option"); + let isValidLang = true; + + for (const lang of this.languages) { + if (typeof lang !== "string") { + isValidLang = false; + break; + } + let option = document.createElement("option"); option.classList.add(`${this.CSS.dropdown}__option`); option.textContent = lang; - dropdown.appendChild(option); - }); + } + + if (isValidLang) wrapper.appendChild(dropdown); - wrapper.appendChild(dropdown); this.nodes.dropdown = dropdown; } @@ -156,7 +162,7 @@ export default class CodeTool { * @public */ save(codeWrapper) { - if (typeof this.config.languages === "object") { + if (typeof this.languages === "object" && this.languages > 0) { return { language: codeWrapper.querySelector("select").value, code: codeWrapper.querySelector("textarea").value, From b447db1cad74ebcbeabc38882cd39fe721848f83 Mon Sep 17 00:00:00 2001 From: Abdullah Alabbad Date: Fri, 9 Apr 2021 02:35:32 +1000 Subject: [PATCH 3/4] clean up the code from some comments --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 50646f1..a8bbaef 100644 --- a/src/index.js +++ b/src/index.js @@ -58,20 +58,20 @@ export default class CodeTool { this.placeholder = this.api.i18n.t(config.placeholder || CodeTool.DEFAULT_PLACEHOLDER); - this.languages = config.languages; // <<- languages array, if specified + this.languages = config.languages; this.CSS = { baseClass: this.api.styles.block, input: this.api.styles.input, wrapper: "ce-code", textarea: "ce-code__textarea", - dropdown: "ce-code__dropdown", // <<- class name for dropdown menu + dropdown: "ce-code__dropdown", }; this.nodes = { holder: null, textarea: null, - dropdown: null, // <<- define dropdown node + dropdown: null, }; this.data = { From 00c3e8b409b274178ce22d27e40aa08ebbcf1139 Mon Sep 17 00:00:00 2001 From: Abdullah Alabbad Date: Fri, 9 Apr 2021 02:54:39 +1000 Subject: [PATCH 4/4] fix saving the language of the code --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index a8bbaef..d0c1e57 100644 --- a/src/index.js +++ b/src/index.js @@ -162,7 +162,7 @@ export default class CodeTool { * @public */ save(codeWrapper) { - if (typeof this.languages === "object" && this.languages > 0) { + if (typeof this.languages === "object" && this.languages.length > 0) { return { language: codeWrapper.querySelector("select").value, code: codeWrapper.querySelector("textarea").value,