Avoid direct modification of HTML

[lindapaiste]

Wherever possible, the content of the page should be controlled through React using props and state. Modifying the content using pure JS should be avoided.

The example that I found which is easy to fix is in the Editor component:

p5.js-web-editor/client/modules/IDE/components/Editor.jsx

Lines 180 to 185 in e01efe8

	this._cm.on('keyup', () => {
	const temp = this.props.t('Editor.KeyUpLineNumber', {
	lineNumber: parseInt(this._cm.getCursor().line + 1, 10)
	});
	document.getElementById('current-line').innerHTML = temp;
	});

The line number should be stored as a state and then passed down as a prop to the EditorAccessibility component, which contains the 'current-line' element.

It also seems like there is some wonky stuff going on throughout the uploader, but I need to dig in there to see what the code is doing.

p5.js-web-editor/client/modules/IDE/actions/uploader.js

Line 111 in dd433b7

let inputHidden = '<input type="hidden" name="attachments[]" value="';

p5.js-web-editor/client/modules/IDE/actions/uploader.js

Lines 121 to 122 in dd433b7

	inputHidden += `${window.btoa(jsonStr)}" />`;
	document.getElementById('uploader').innerHTML += inputHidden;

p5.js-web-editor/client/modules/IDE/actions/uploader.js

Lines 53 to 56 in dd433b7

	file.previewElement.classList.remove('dz-error');
	file.previewElement.classList.add('dz-success');
	file.previewElement.classList.add('dz-processing');
	file.previewElement.querySelector('.dz-upload').style.width = '100%';

p5.js-web-editor/client/modules/IDE/actions/uploader.js

Line 76 in dd433b7

file.previewTemplate.className += ' uploading'; // eslint-disable-line

[lindapaiste]

I found another one in the CopyableInput. We are mutating the DOM to add and remove class names on an element which is actually rendered by React. The component should have a state (like tooltipActive or whatever) and render the element with different class names depending on that state.

p5.js-web-editor/client/modules/IDE/components/CopyableInput.jsx

Lines 15 to 33 in 7212f76

	componentDidMount() {
	this.clipboard = new Clipboard(this.input, {
	target: () => this.input
	});
	this.clipboard.on('success', (e) => {
	this.tooltip.classList.add('tooltipped');
	this.tooltip.classList.add('tooltipped-n');
	});
	}
	componentWillUnmount() {
	this.clipboard.destroy();
	}
	onMouseLeaveHandler() {
	this.tooltip.classList.remove('tooltipped');
	this.tooltip.classList.remove('tooltipped-n');
	}