method for updating contents in editor without triggering text-change event (setSemanticHTML)

[trymeouteh]

To have an event where you can pass a string that will be used as the new innerHTML of the editor without triggering the text-change event.

The usecase for this is when you want to have two editors, the Quill rich text editor and the raw HTML editor and to be able to take the HTML string and easily place it into the Quill editor without any hassle.

This is my current workaround to achieve the functionality of having Quill rich text editor and a raw HTML editor

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.min.css" />

<style>
	textarea,
	#my-editor-container {
		height: 50%;
		width: 50%;
	}
</style>

<textarea></textarea>
<div id="my-editor-container">
	<div id="my-editor"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.min.js"></script>

<!-- Needed to beautify/format HTML in textarea element -->
<script src="https://cdn.jsdelivr.net/npm/simply-beautiful@latest/dist/index.min.js"></script>

<script>
	const myEditor = new Quill('#my-editor', {
		theme: 'snow',
	});

	//This variable will determine if the current myEditor.on('text-change') event was caused by document.querySelector('textarea').addEventListener('input') event when it executes myEditor.root.innerHTML = myEditorText line
	let textareaEventTriggered;

	myEditor.on('text-change', function () {
		if (!textareaEventTriggered) {
			let myEditorText = myEditor.getSemanticHTML();

			//Will detect if editor content is actually blank
			if (myEditorText === '<p></p>') {
				myEditorText = '';
			} else {
				//Replace &nbsp; into spaces " "
				myEditorText = myEditorText.replace(/&nbsp;/g, ' ');

				//Beautify/format HTML
				myEditorText = SimplyBeautiful().html(myEditorText);
			}

			document.querySelector('textarea').value = myEditorText;
		} else {
			textareaEventTriggered = false;
		}
	});

	document.querySelector('textarea').addEventListener('input', function () {
		let myEditorText = document.querySelector('textarea').value;

		//Replace all line breaks into blank strings. NEEDED TO PREVENT ADDITIONAL BLANK P TAGS FROM BEING ADDED
		myEditorText = myEditorText.replace(/\n/g, '');

		//Will tell myEditor.on('text-change') event that its going to be triggered by updating the editor value
		textareaEventTriggered = true;
		myEditor.root.innerHTML = myEditorText;
	});
</script>

Would prefer to something more like this which will allow me not to need a variable textareaEventTriggered to determine if the text-change event was triggered by the user or not.

<link rel="stylesheet" href="node_modules/quill/dist/quill.snow.css" />

<style>
	textarea,
	#my-editor-container {
		height: 50%;
		width: 50%;
	}
</style>

<textarea></textarea>
<div id="my-editor-container">
	<div id="my-editor"></div>
</div>

<script src="node_modules/quill/dist/quill.js"></script>

<!-- Needed to beautify/format HTML in textarea element -->
<script src="https://cdn.jsdelivr.net/npm/simply-beautiful@latest/dist/index.min.js"></script>

<script>
	const myEditor = new Quill('#my-editor', {
		theme: 'snow',
	});

	myEditor.on('text-change', function () {
		let myEditorText = myEditor.getSemanticHTML();

		//Will detect if editor content is actually blank
		if (myEditorText === '<p></p>') {
			myEditorText = '';
		} else {
			//Replace &nbsp; into spaces " "
			myEditorText = myEditorText.replace(/&nbsp;/g, ' ');

			//Beautify/format HTML
			myEditorText = SimplyBeautiful().html(myEditorText);
		}

		document.querySelector('textarea').value = myEditorText;
	});

	document.querySelector('textarea').addEventListener('input', function () {
		let myEditorText = document.querySelector('textarea').value;

		//Replace all line breaks into blank strings. NEEDED TO PREVENT ADDITIONAL BLANK P TAGS FROM BEING ADDED
		//MAY NOT BE NEEDED IF NEW METHOD REPLACES LINE BREAKS WITH BLANK STRINGS
		// myEditorText = myEditorText.replace(/\n/g, '');

		//NEW METHOD WHICH WILL SET VALUE INSIDE OF EDITOR WITHOUT TRIGGERING text-change EVENT
		myEditor.setSemanticHTML(myEditorText);
	});
</script>