From 3ca5a0f36f8bde6aab324bad885917f9e6504fa6 Mon Sep 17 00:00:00 2001 From: epndavis <47059262+epndavis@users.noreply.github.com> Date: Tue, 18 Aug 2020 16:52:35 +0100 Subject: [PATCH 1/5] feat: Add ability to set coding language - Update readme with references to code language --- README.md | 9 ++++++--- package.json | 2 +- src/index.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 61 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f542500..5b91e92 100644 --- a/README.md +++ b/README.md @@ -58,9 +58,11 @@ var editor = EditorJS({ ## Config Params -| Field | Type | Description | -| ----------- | -------- | -------------------------------| -| placeholder | `string` | Code Tool's placeholder string | +| Field | Type | Default | Description | +| ----------- | -------- | ----------- | -------------------------------| +| placeholder | `string` | Enter a code | Code Tool's placeholder string | +| languagePlaceholder | `string` | Select a language | Code Tool's language placeholder string | +| languageOptions | `array` | ['markup', 'css', 'javascript'] | Code Tool's list of languages | ## Output data @@ -71,6 +73,7 @@ This Tool returns code. "type" : "code", "data" : { "code": "body {\n font-size: 14px;\n line-height: 16px;\n}", + "language": "css", } } ``` diff --git a/package.json b/package.json index 4519f0e..374c2be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/code", - "version": "2.5.0", + "version": "2.5.1", "keywords": [ "codex editor", "code", diff --git a/src/index.js b/src/index.js index 11cec25..8d99f6e 100644 --- a/src/index.js +++ b/src/index.js @@ -45,6 +45,8 @@ class CodeTool { this.api = api; this.placeholder = this.api.i18n.t(config.placeholder || CodeTool.DEFAULT_PLACEHOLDER); + this.languagePlaceholder = this.api.i18n.t(config.languagePlaceholder || CodeTool.DEFAULT_LANGUAGE_PLACEHOLDER); + this.languageOptions = this.api.i18n.t(config.langaugeOptions || CodeTool.DEFAULT_LANGUAGE_OPTIONS); this.CSS = { baseClass: this.api.styles.block, @@ -56,10 +58,12 @@ class CodeTool { this.nodes = { holder: null, textarea: null, + select: null, }; this.data = { code: data.code || '', + language: data.language || '', }; this.nodes.holder = this.drawView(); @@ -73,7 +77,8 @@ class CodeTool { */ drawView() { const wrapper = document.createElement('div'), - textarea = document.createElement('textarea'); + textarea = document.createElement('textarea'), + select = document.createElement('select'); wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper); textarea.classList.add(this.CSS.textarea, this.CSS.input); @@ -85,6 +90,29 @@ class CodeTool { this.nodes.textarea = textarea; + select.classList.add(this.CSS.input) + + const placeholderOption = document.createElement('option'); + placeholderOption.setAttribute('disabled', true); + placeholderOption.setAttribute('selected', true); + placeholderOption.textContent = this.languagePlaceholder; + + select.appendChild(placeholderOption); + + for (let i = 0; i < this.languageOptions.length; i++) { + const option = document.createElement('option'); + option.setAttribute('value', this.languageOptions[i]); + option.textContent = this.languageOptions[i]; + + select.appendChild(option); + } + + select.value = this.data.language; + + wrapper.appendChild(select); + + this.nodes.select = select; + return wrapper; } @@ -108,6 +136,7 @@ class CodeTool { save(codeWrapper) { return { code: codeWrapper.querySelector('textarea').value, + language: codeWrapper.querySelector('select').value, }; } @@ -144,6 +173,10 @@ class CodeTool { if (this.nodes.textarea) { this.nodes.textarea.textContent = data.code; } + + if (this.nodes.select) { + this.nodes.select.value = data.language; + } } /** @@ -170,6 +203,26 @@ class CodeTool { return 'Enter a code'; } + /** + * Default placeholder for CodeTool's select + * + * @public + * @returns {string} + */ + static get DEFAULT_LANGUAGE_PLACEHOLDER () { + return 'Select a language' + } + + /** + * Default options for CodeTool's select + * + * @public + * @returns {string} + */ + static get DEFAULT_LANGUAGE_OPTIONS () { + return ['markup', 'css', 'javascript'] + } + /** * Used by Editor.js paste handling API. * Provides configuration to handle CODE tag. From d5467b1ad90e83584dc083c756970525944f71fb Mon Sep 17 00:00:00 2001 From: epndavis <47059262+epndavis@users.noreply.github.com> Date: Tue, 18 Aug 2020 16:56:47 +0100 Subject: [PATCH 2/5] doc: Set correct docblock return for default language options --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8d99f6e..58d8671 100644 --- a/src/index.js +++ b/src/index.js @@ -217,7 +217,7 @@ class CodeTool { * Default options for CodeTool's select * * @public - * @returns {string} + * @returns {array} */ static get DEFAULT_LANGUAGE_OPTIONS () { return ['markup', 'css', 'javascript'] From 2cee2c7473fbdd3162a2a949d8c34b9e9acfa90f Mon Sep 17 00:00:00 2001 From: epndavis <47059262+epndavis@users.noreply.github.com> Date: Tue, 18 Aug 2020 17:11:26 +0100 Subject: [PATCH 3/5] feat: Add optional label and values to language options --- README.md | 10 +++++----- src/index.js | 11 +++++++++-- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5b91e92..45c4221 100644 --- a/README.md +++ b/README.md @@ -58,11 +58,11 @@ var editor = EditorJS({ ## Config Params -| Field | Type | Default | Description | -| ----------- | -------- | ----------- | -------------------------------| -| placeholder | `string` | Enter a code | Code Tool's placeholder string | -| languagePlaceholder | `string` | Select a language | Code Tool's language placeholder string | -| languageOptions | `array` | ['markup', 'css', 'javascript'] | Code Tool's list of languages | +| Field | Type | Default | Description | Example | +| ----------- | -------- | ----------- | -------------------------------| ------------ | +| placeholder | `string` | Enter a code | Code Tool's placeholder string | | +| languagePlaceholder | `string` | Select a language | Code Tool's language placeholder string | | +| languageOptions | `array (string|object)` | ```['markup', 'css', 'javascript']``` | Code Tool's list of languages | ```['markup', 'css', { label: 'c++', value: 'cpp' }]``` | ## Output data diff --git a/src/index.js b/src/index.js index 58d8671..75165b0 100644 --- a/src/index.js +++ b/src/index.js @@ -101,8 +101,15 @@ class CodeTool { for (let i = 0; i < this.languageOptions.length; i++) { const option = document.createElement('option'); - option.setAttribute('value', this.languageOptions[i]); - option.textContent = this.languageOptions[i]; + const langaugeOption = this.languageOptions[i]; + + if (typeof langaugeOption === 'string') { + option.setAttribute('value', langaugeOption); + option.textContent = langaugeOption; + } else { + option.setAttribute('value', langaugeOption.value); + option.textContent = langaugeOption.label; + } select.appendChild(option); } From 587d3ae9512ec3dbf5de38187fc9918d6ffd2abe Mon Sep 17 00:00:00 2001 From: epndavis <47059262+epndavis@users.noreply.github.com> Date: Tue, 18 Aug 2020 17:12:01 +0100 Subject: [PATCH 4/5] chore: Build --- dist/bundle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/bundle.js b/dist/bundle.js index 9075e60..33c9928 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1,4 +1,4 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CodeTool=t():e.CodeTool=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=0)}([function(e,t,n){function r(e,t){for(var n=0;n ',title:"Code"}}},{key:"DEFAULT_PLACEHOLDER",get:function(){return"Enter a code"}},{key:"pasteConfig",get:function(){return{tags:["pre"]}}},{key:"sanitize",get:function(){return{code:!0}}}]),e}();e.exports=a},function(e,t,n){var r=n(2),o=n(3);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var a={insert:"head",singleton:!1};r(o,a);e.exports=o.locals||{}},function(e,t,n){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),i=[];function c(e){for(var t=-1,n=0;n ',title:"Code"}}},{key:"DEFAULT_PLACEHOLDER",get:function(){return"Enter a code"}},{key:"DEFAULT_LANGUAGE_PLACEHOLDER",get:function(){return"Select a language"}},{key:"DEFAULT_LANGUAGE_OPTIONS",get:function(){return["markup","css","javascript"]}},{key:"pasteConfig",get:function(){return{tags:["pre"]}}},{key:"sanitize",get:function(){return{code:!0}}}]),e}();e.exports=o},function(e,t,n){var r=n(2),a=n(3);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.i,a,""]]);var o={insert:"head",singleton:!1};r(a,o);e.exports=a.locals||{}},function(e,t,n){"use strict";var r,a=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),i=[];function c(e){for(var t=-1,n=0;n Date: Wed, 19 Aug 2020 00:23:54 +0100 Subject: [PATCH 5/5] fix(language): Fix bug where select placeholder doesn't show --- src/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 75165b0..72d7e2b 100644 --- a/src/index.js +++ b/src/index.js @@ -114,7 +114,9 @@ class CodeTool { select.appendChild(option); } - select.value = this.data.language; + if (this.data.language !== '') { + select.value = this.data.language; + } wrapper.appendChild(select);