diff --git a/CHANGELOG.md b/CHANGELOG.md index 80b9254..e555df8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added - Hindi translation for warnings @shehbazjafri. +### Changed +- `id` property is no longer mandatory @PatrickSachs. + ## [2.5.6] - 2018-10-07 ### Added - Reset option @AndrewRedican. diff --git a/README.md b/README.md index 329484d..878488f 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/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 = null; + this.refLabels = null; this.updateInternalProps(); this.renderCount = 1; this.state = { @@ -110,10 +108,9 @@ class JSONInput extends Component { } render(){ const + id = this.props.id, 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 +121,7 @@ class JSONInput extends Component { return (
this.refLabels = ref} style = {{ display : 'inline-block', boxSizing : 'border-box', @@ -304,7 +302,8 @@ class JSONInput extends Component { {this.renderLabels()} this.refContent = ref } contentEditable = { true } style = {{ display : 'inline-block', @@ -371,7 +370,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 +381,7 @@ class JSONInput extends Component { const color = number !== errorLine ? colors.default : 'red'; return (
/g,'').length) string = '' + string + ''; return ( - '' + string + + '' + 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 @@ -439,10 +426,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 +438,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 +457,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 +477,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, @@ -580,7 +563,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(){ @@ -591,21 +580,13 @@ 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 => { - e.preventDefault(); - var text = e.clipboardData.getData('text/plain'); - document.execCommand('insertHTML', false, text); - }); this.showPlaceholder(); } componentWillUnmount(){ 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(