From 9863c034dd9ac9329179a1ccd90bf34af87c5360 Mon Sep 17 00:00:00 2001 From: Patrick Sachs Date: Tue, 9 Oct 2018 23:11:52 +0200 Subject: [PATCH 1/7] Removed IDs from component --- example/create-react-app-project/src/index.js | 1 - example/webpack-project/src/index.js | 1 - src/index.js | 66 +++++++------------ test/change/index.js | 2 - test/logic/testSyntaxLogic.js | 5 -- test/render/index.js | 6 -- 6 files changed, 25 insertions(+), 56 deletions(-) diff --git a/example/create-react-app-project/src/index.js b/example/create-react-app-project/src/index.js index b741449..7c9fe4e 100644 --- a/example/create-react-app-project/src/index.js +++ b/example/create-react-app-project/src/index.js @@ -42,7 +42,6 @@ class App extends Component { return (
' : this.randomString(10)) + '-' + this.props.id; - this.contentID = this.uniqueID + '-content-box'; + this.refContent = React.createRef(); + this.refLabels = React.createRef(); this.updateInternalProps(); this.renderCount = 1; this.state = { @@ -45,6 +44,9 @@ class JSONInput extends Component { if (!this.props.locale) { console.warn("[react-json-editor-ajrm - Deprecation Warning] You did not provide a 'locale' prop for your JSON input - This will be required in a future version. English has been set as a default."); } + if (this.props.id) { + console.warn("[react-json-editor-ajrm - Deprecation Warning] The editor no longer requires an ID to be set. This also means that you can no longer get its DOM node by using `document.getElementById`. Please use refs instead."); + } } updateInternalProps(){ let colors = {}, style = {}, theme = themes.dark_vscode_tribute; @@ -112,8 +114,6 @@ class JSONInput extends Component { const markupText = this.state.markupText, error = this.state.error, - uniqueID = this.uniqueID, - contentID = this.contentID, colors = this.colors, style = this.style, confirmGood = this.confirmGood, @@ -124,7 +124,6 @@ class JSONInput extends Component { return (
this.refLabels = ref} style = {{ display : 'inline-block', boxSizing : 'border-box', @@ -304,7 +300,7 @@ class JSONInput extends Component { {this.renderLabels()} this.refContent = ref} contentEditable = { true } style = {{ display : 'inline-block', @@ -371,7 +367,6 @@ class JSONInput extends Component { } renderLabels(){ const - uniqueID = this.uniqueID + '-line-', colors = this.colors, style = this.style, errorLine = this.state.error ? this.state.error.line : -1, @@ -383,8 +378,7 @@ class JSONInput extends Component { const color = number !== errorLine ? colors.default : 'red'; return (
/g,'').length) string = '' + string + ''; return ( - '' + string + + '' + string + '' ); } @@ -439,10 +430,9 @@ class JSONInput extends Component { * Adjustments based on coundBR account for usage of
instead of for linebreaks to determine acurate cursor position * Find a way to consolidate render styles */ - const contentID = this.contentID; - function isChildOf(node) { + const isChildOf = node => { while (node !== null) { - if (node.id === contentID) return true; + if (node === this.refContent) return true; node = node.parentNode; } return false; @@ -452,12 +442,11 @@ class JSONInput extends Component { charCount = -1, linebreakCount = 0, node; - if (selection.focusNode) - if (isChildOf(selection.focusNode)) { + if (selection.focusNode && isChildOf(selection.focusNode)) { node = selection.focusNode; charCount = selection.focusOffset; while (node) { - if (node.id === contentID) break; + if (node === this.refContent) break; if (node.previousSibling) { node = node.previousSibling; if(countBR) if(node.nodeName==='BR') linebreakCount++; @@ -472,8 +461,7 @@ class JSONInput extends Component { } setCursorPosition(nextPosition) { if([false,null,undefined].indexOf(nextPosition)>-1) return; - const contentID = this.contentID; - function createRange(node, chars, range) { + const createRange = (node, chars, range) => { if (!range) { range = document.createRange(); range.selectNode(node); @@ -493,23 +481,22 @@ class JSONInput extends Component { } return range; }; - function setPosition(chars) { + const setPosition = chars => { if (chars < 0) return; let selection = window.getSelection(), - range = createRange(document.getElementById(contentID), { count: chars }); + range = createRange(this.refContent, { count: chars }); if (!range) return; range.collapse(false); selection.removeAllRanges(); selection.addRange(range); }; if(nextPosition > 0) setPosition(nextPosition); - else document.getElementById(contentID).focus(); + else this.refContent.focus(); } update(cursorOffset=0,updateCursorPosition=true){ const - contentID = this.contentID, - container = document.getElementById(contentID), + container = this.refContent, data = this.tokenize(container); if('onChange' in this.props) this.props.onChange({ plainText : data.indented, @@ -591,17 +578,14 @@ class JSONInput extends Component { this.update(0,false); } onScroll(event){ - const uniqueID = this.uniqueID; - var labels = document.getElementById(uniqueID + '-labels'); - labels.scrollTop = event.target.scrollTop; + this.refLabels.scrollTop = event.target.scrollTop; } componentDidUpdate(){ this.updateInternalProps(); this.showPlaceholder(); } componentDidMount(){ - const contentID = this.contentID; - document.getElementById(contentID).addEventListener('paste', e => { + this.refContent.addEventListener('paste', e => { e.preventDefault(); var text = e.clipboardData.getData('text/plain'); document.execCommand('insertHTML', false, text); diff --git a/test/change/index.js b/test/change/index.js index c5e204f..9ab9ce9 100644 --- a/test/change/index.js +++ b/test/change/index.js @@ -6,8 +6,6 @@ function run() { test(`Update placeholder property value`, () => { let wrapper = mount( , { attachTo: window.domNode } @@ -72,8 +69,6 @@ function testSyntaxLogic(language='JS',scope,input,output){ const wrapper = shallow( , { attachTo: window.domNode } diff --git a/test/render/index.js b/test/render/index.js index 29e34fa..ebf64f8 100644 --- a/test/render/index.js +++ b/test/render/index.js @@ -16,8 +16,6 @@ function run() { test(`Basic Component Render`, () => { let wrapper = mount( , { attachTo: window.domNode } @@ -28,8 +26,6 @@ function run() { test(`All Component Properties Render [1]`, () => { let wrapper = mount( { let wrapper = mount( Date: Tue, 9 Oct 2018 23:27:12 +0200 Subject: [PATCH 2/7] Remove DOM paste listener in favor for React paste listener --- src/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index a83fffa..7c472a4 100644 --- a/src/index.js +++ b/src/index.js @@ -567,7 +567,13 @@ class JSONInput extends Component { } } onPaste(event){ - if('viewOnly' in this.props) if(this.props.viewOnly) this.stopEvent(event); + if (this.props.viewOnly) { + this.stopEvent(event); + } else { + event.preventDefault(); + var text = event.clipboardData.getData('text/plain'); + document.execCommand('insertHTML', false, text); + } this.update(); } onClick(){ @@ -585,11 +591,6 @@ class JSONInput extends Component { this.showPlaceholder(); } componentDidMount(){ - this.refContent.addEventListener('paste', e => { - e.preventDefault(); - var text = e.clipboardData.getData('text/plain'); - document.execCommand('insertHTML', false, text); - }); this.showPlaceholder(); } componentWillUnmount(){ From a418608613cc9133d4f2a149d652fac2952f2d9f Mon Sep 17 00:00:00 2001 From: Patrick Sachs Date: Wed, 10 Oct 2018 20:06:26 +0200 Subject: [PATCH 3/7] Remove randomString function --- src/index.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 7c472a4..2529a4f 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,6 @@ class JSONInput extends Component { constructor(props){ super(props); this.updateInternalProps = this.updateInternalProps .bind(this); - this.randomString = this.randomString .bind(this); this.createMarkup = this.createMarkup .bind(this); this.onClick = this.onClick .bind(this); this.onBlur = this.onBlur .bind(this); @@ -415,14 +414,7 @@ class JSONInput extends Component { '>' + string + '' ); - } - randomString(length){ - if(typeof length !== 'number') throw '@randomString: Expected \'length\' to be a number'; - const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; - let result = ''; - for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]; - return result; - } + } getCursorPosition(countBR){ /** * Need to deprecate countBR From a1a66582d1debcb9f53dd2eab52a3b20776425ad Mon Sep 17 00:00:00 2001 From: Patrick Sachs Date: Wed, 10 Oct 2018 20:20:00 +0200 Subject: [PATCH 4/7] Re-added optional IDs --- README.md | 8 ++++---- src/index.js | 12 ++++++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 1fcdb6a..22c7b34 100644 --- a/README.md +++ b/README.md @@ -83,10 +83,10 @@ The `./examples` folder contains two examples: | Name | Description | Type | Required | | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | :-------: | -| [id]() | A unique id to identify component. | string | Mandatory | -| [locale]() | The locale of your editor. Import locales like this: `import locale from 'react-json-editor-ajrm/locale/en'`. [Learn More](https://github.com/AndrewRedican/react-json-editor-ajrm/wiki/Locale-Support) | object | Mandatory | -| [placeholder]() | Send a valid javascript object to be shown once the component is mounted. Assign a different value to have the component's initial content re-rendered. | object | Optional | -| [reset]() | Send `true` to have component always re-render or 'reset' to the value provided on the `placeholder` property. | boolean | Optional | +| [locale]() | The locale of your editor. Import locales like this: `import locale from 'react-json-editor-ajrm/locale/en'`. [Learn More](https://github.com/AndrewRedican/react-json-editor-ajrm/wiki/Locale-Support) | object | Mandatory | +| [id]() | An optional `id` to assign to the actual text input DOM node. Asides the from the text input, the following nodes will also receive an id: `{id}-outer-box`, `{id}-container`, `{id}-warning-box`, `{id}-labels` | string | Optional | +| [placeholder]() | Send a valid javascript object to be shown once the component is mounted. Assign a different value to have the component's initial content re-rendered. | object | Optional | +| [reset]() | Send `true` to have component always re-render or 'reset' to the value provided on the `placeholder` property. | boolean | Optional | | [viewOnly]() | Send `true` if you would like for content shown not to be editable. | boolean | Optional | | [onChange]() | Whenever `onBlur` or `onKeyPress` events take place, it will return content values. | object | Optional | | [confirmGood]() | Send `false` if you would like for the checkmark to confirm good syntax to be hidden. | boolean | Optional | diff --git a/src/index.js b/src/index.js index 2529a4f..ac284f6 100644 --- a/src/index.js +++ b/src/index.js @@ -43,9 +43,6 @@ class JSONInput extends Component { if (!this.props.locale) { console.warn("[react-json-editor-ajrm - Deprecation Warning] You did not provide a 'locale' prop for your JSON input - This will be required in a future version. English has been set as a default."); } - if (this.props.id) { - console.warn("[react-json-editor-ajrm - Deprecation Warning] The editor no longer requires an ID to be set. This also means that you can no longer get its DOM node by using `document.getElementById`. Please use refs instead."); - } } updateInternalProps(){ let colors = {}, style = {}, theme = themes.dark_vscode_tribute; @@ -111,6 +108,7 @@ class JSONInput extends Component { } render(){ const + id = this.props.id, markupText = this.state.markupText, error = this.state.error, colors = this.colors, @@ -123,6 +121,7 @@ class JSONInput extends Component { return (
this.refLabels = ref} style = {{ display : 'inline-block', @@ -299,7 +302,8 @@ class JSONInput extends Component { {this.renderLabels()} this.refContent = ref} + id = { id } + ref = { ref => this.refContent = ref } contentEditable = { true } style = {{ display : 'inline-block', From 06fbc5fdb8fc5262cc446507b8cb820edb6c9de4 Mon Sep 17 00:00:00 2001 From: Patrick Sachs Date: Wed, 10 Oct 2018 20:22:57 +0200 Subject: [PATCH 5/7] Remove React.createRef for React <16.3 support --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index ac284f6..ffe0825 100644 --- a/src/index.js +++ b/src/index.js @@ -27,8 +27,8 @@ class JSONInput extends Component { this.onKeyDown = this.onKeyDown .bind(this); this.onPaste = this.onPaste .bind(this); this.stopEvent = this.stopEvent .bind(this); - this.refContent = React.createRef(); - this.refLabels = React.createRef(); + this.refContent = null; + this.refLabels = null; this.updateInternalProps(); this.renderCount = 1; this.state = { From 933461868798673745d23267690142583dc1b548 Mon Sep 17 00:00:00 2001 From: Andrew Redican Date: Wed, 10 Oct 2018 22:16:24 +0100 Subject: [PATCH 6/7] updated changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fca227..b88d1d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Changed +- `id` property is no longer mandatory @PatrickSachs. ## [2.5.6] - 2018-10-07 ### Added From b16aa803cd255a3f906df95efc8c22dfc3d86270 Mon Sep 17 00:00:00 2001 From: Andrew Redican Date: Wed, 10 Oct 2018 22:21:11 +0100 Subject: [PATCH 7/7] added a space --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 940cff5..e555df8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] ### Added - Hindi translation for warnings @shehbazjafri. + ### Changed - `id` property is no longer mandatory @PatrickSachs.