Test site with all input elements

[rugk]

Is there a test/reference site with all input elements as mentioned in #9 (comment)?

If not, we could create a simple one.

My aim is also to include this in the bug report templates so that people could test whether it works in all fields to say more exactly what is broken without us needing to ask again.

[tdulcet]

Is there a test/reference site with all input elements

My demo from rugk/awesome-emoji-picker#66 includes the three input types, although I would not recommend using that with this add-on enabled, as they will likely interfere with each other.

If not, we could create a simple one.

If you wanted to create a new website, the HTML is very simple (this is adapted from my demo):

<h3>Input</h3>
<input type="text">

<h3>Textarea</h3>
<textarea></textarea>

<h3>ContentEditable Div</h3>
<div contenteditable="true">This text can be edited by the user.<br>
	Some <strong>bold</strong> and <em>italic and <strong>bold</strong></em> text.</div>

[rugk]

We have that website on https://rugk.github.io/unicodify/ now.

[tdulcet]

@rugk - Here is an updated version that supports better simulating Thunderbird:

<h3>Input</h3>
<input type="text">

<h3>Textarea</h3>
<textarea></textarea>

<h3>ContentEditable Div</h3>
<fieldset>
	<legend>Select a Paragraph Separator:</legend>

	<div>
		<input type="radio" id="div" name="separator" value="div" checked>
		<label for="div">Div (Modern Firefox/Chromium browser default)</label>
	</div>

	<div>
		<input type="radio" id="p" name="separator" value="p">
		<label for="p">Paragraph (Thunderbird default)</label>
	</div>

	<div>
		<input type="radio" id="louie" name="separator" value="br">
		<label for="br">Line Break (Thunderbird's "Body text" mode, Firefox only)</label>
	</div>
</fieldset>
<br>
<div contenteditable="true">This text can be edited by the user.<br>
	Some <strong>bold</strong> and <em>italic and <strong>bold</strong></em> text.</div>
<script>
	"use strict";

	const separators = Array.from(document.getElementsByName("separator"));

	function toggle() {
		const separator = separators.find((r) => r.checked).value;
		console.log("Separator", separator);
		document.execCommand("defaultParagraphSeparator", false, separator);
	}

	window.addEventListener('load', toggle);

	for (const radio of separators) {
		radio.addEventListener('change', toggle);
	}
</script>

[rugk]

@tdulcet just push it to the gh-pages branch. 🙃

Note you may also want to edit the issue templates accordingly…

[tdulcet]

Nice, I was wondering how you created that page. I pushed the changes in 8cc7ccd.