From df7ae7ed00ecabc42427ebeb71637a02daab6f2b Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Fri, 7 Jun 2024 12:28:17 +1000
Subject: [PATCH 01/11] Add base code and unit test for RTF port

Starting simple code to port RTF registration from XSLT into HTML custom
components. Still need some way of testing actual TinyMCE import and
use.
---
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs     | 11 +++++++++++
 .../src/test/spec/wc.ui.rtf.test.mjs            | 17 +++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs

diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index 51a1058a7..8a29fb657 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -72,3 +72,14 @@ export default {
 		}
 	}
 };
+
+const rtfTag = "wc-rtf";
+class WRichTextField extends HTMLElement {
+	connectedCallback() {
+		instance.register([this.getAttribute("id")]);
+	}
+}
+
+if (!customElements.get(rtfTag)) {
+	customElements.define(rtfTag, WRichTextField);
+}
diff --git a/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs b/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
new file mode 100644
index 000000000..350c3f21c
--- /dev/null
+++ b/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
@@ -0,0 +1,17 @@
+import rtf from "wc/ui/rtf.mjs";
+import timers from "wc/timers.mjs";
+import initialise from "wc/dom/initialise.mjs";
+
+describe("wc/ui/rtf", () => {
+
+	it("it sets a callback for every nonempty invocation of register", (done) => {
+		spyOn(initialise, "addCallback");
+		rtf.register(["exID", "anotherEx"]);
+		rtf.register(["exID"]);
+		rtf.register([]);
+		timers.setTimeout(function() {
+			expect(initialise.addCallback).toHaveBeenCalledTimes(2);
+			done();
+		}, 100);
+	});
+});

From 25911d24809f0d076b0716866d628d0633d5fa8d Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Fri, 14 Jun 2024 15:12:31 +1000
Subject: [PATCH 02/11] Fix TinyMCE url formation bug

TinyMCE adds its own forward slash when stringing together urls for
loading plugins ands themes etc. This made a double // in the url since
resourceLoader takes urls with the / suffix already there.

This extra / is currently being cut off in rtf.mjs. Although, it may be
better off getting cut in resourceLoader.getUrlFromImportMap().
---
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index 8a29fb657..07fff3e81 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -45,7 +45,7 @@ function processNow(idArr) {
 	}
 }
 
-export default {
+const instance = {
 	/**
 	 * Register Rich Text Fields that need to be initialised.
 	 *
@@ -58,7 +58,10 @@ export default {
 			const callback = () => processNow(idArr);
 			initialise.addCallback((element) => {
 				if (!tinyMCE) {
-					const baseUrl = resourceLoader.getUrlFromImportMap("tinymce/");
+					let baseUrl = resourceLoader.getUrlFromImportMap("tinymce/");
+					while (baseUrl.charAt(baseUrl.length - 1) === '/') {
+						baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+					}
 					return import("tinymce/tinymce.js").then(() => {
 						tinyMCE = element.ownerDocument.defaultView.tinymce;
 						if (baseUrl) {
@@ -73,10 +76,12 @@ export default {
 	}
 };
 
+export default instance;
+
 const rtfTag = "wc-rtf";
 class WRichTextField extends HTMLElement {
 	connectedCallback() {
-		instance.register([this.getAttribute("id")]);
+		// instance.register([this.getAttribute("id")]);
 	}
 }
 

From 5783ef36b73b84aaec3b9e3d0a94964f49d5e795 Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Tue, 18 Jun 2024 13:39:11 +1000
Subject: [PATCH 03/11] Remodel renderers and XSLT to fit new HTML customs

Switched from using the ui:rtf element in the raw XML to using wc-rtf
custom HTML components.

Still need a way to import the rtf module without the XSLT and to do
further unit testing to get better coverage on rtf.mjs.
---
 .../wcomponents/render/webxml/WTextAreaRenderer.java     | 2 +-
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs              | 5 ++++-
 wcomponents-xslt/src/main/xslt/all.xsl                   | 6 ++----
 wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl        | 9 +++++----
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java b/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
index dde6e0447..9f553589b 100755
--- a/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
+++ b/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
@@ -66,7 +66,7 @@ public void doRender(final WComponent component, final WebXmlRenderContext rende
 			 * such as turning rich text features on or off, or specifying JSON config either as
 			 * a URL attribute or a nested CDATA section.
 			 */
-			xml.append("<ui:rtf />");
+			xml.append("<wc-rtf></wc-rtf>");
 		}
 
 		String textString = textArea.getText();
diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index 07fff3e81..b422cd17a 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -59,9 +59,12 @@ const instance = {
 			initialise.addCallback((element) => {
 				if (!tinyMCE) {
 					let baseUrl = resourceLoader.getUrlFromImportMap("tinymce/");
+
+					// remove trailing forward slash since TinyMCE adds its own
 					while (baseUrl.charAt(baseUrl.length - 1) === '/') {
 						baseUrl = baseUrl.substring(0, baseUrl.length - 1);
 					}
+
 					return import("tinymce/tinymce.js").then(() => {
 						tinyMCE = element.ownerDocument.defaultView.tinymce;
 						if (baseUrl) {
@@ -81,7 +84,7 @@ export default instance;
 const rtfTag = "wc-rtf";
 class WRichTextField extends HTMLElement {
 	connectedCallback() {
-		// instance.register([this.getAttribute("id")]);
+		instance.register([this.parentElement.getAttribute("id")]);
 	}
 }
 
diff --git a/wcomponents-xslt/src/main/xslt/all.xsl b/wcomponents-xslt/src/main/xslt/all.xsl
index 328c51631..2f8e4ed84 100644
--- a/wcomponents-xslt/src/main/xslt/all.xsl
+++ b/wcomponents-xslt/src/main/xslt/all.xsl
@@ -334,7 +334,7 @@
 			select=".//ui:dropdown[@data and not(@type) and not(@readOnly)] | .//ui:listbox[@data and not(@readOnly)] | .//ui:shuffler[@data and not(@readOnly)]" />
 		<xsl:variable name="filedrops" select=".//ui:multifileupload[@ajax or @dropzone]" />
 		<xsl:variable name="multiDDData" select=".//ui:multidropdown[@data and not(@readOnly)]" />
-		<xsl:variable name="rtfs" select=".//ui:textarea[ui:rtf]" />
+		<xsl:variable name="rtfs" select=".//ui:textarea[html:wc-rtf]" />
 		<xsl:variable name="eagerness" select="//*[@mode eq 'eager']" />
 		<xsl:variable name="editors" select=".//html:wc-imageedit" />
 		<xsl:variable name="tableActions" select=".//ui:table/ui:actions/ui:action" />
@@ -388,9 +388,7 @@
 				<xsl:text>]);});</xsl:text>
 			</xsl:if>
 			<xsl:if test="$rtfs">
-				<xsl:text>import("wc/ui/rtf.mjs").then(({ default: c }) => {c.register([</xsl:text>
-				<xsl:apply-templates select="$rtfs" mode="registerIds" />
-				<xsl:text>]);});</xsl:text>
+				<xsl:text>import("wc/ui/rtf.mjs");</xsl:text>
 			</xsl:if>
 			<xsl:if test="$eagerness">
 				<xsl:text>import("wc/ui/containerload.mjs").then(({ default: c }) => {c.register([</xsl:text>
diff --git a/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl b/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
index 3be0b89f8..53ac5eb67 100644
--- a/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
+++ b/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
@@ -21,7 +21,7 @@
 	<xsl:template match="ui:textarea[@readOnly]">
 		<xsl:variable name="element">
 			<xsl:choose>
-				<xsl:when test="ui:rtf">div</xsl:when>
+				<xsl:when test="html:wc-rtf">div</xsl:when>
 				<xsl:otherwise>pre</xsl:otherwise>
 			</xsl:choose>
 		</xsl:variable>
@@ -41,7 +41,7 @@
 				</xsl:attribute>
 			</xsl:if>
 			<xsl:choose>
-				<xsl:when test="ui:rtf">
+				<xsl:when test="html:wc-rtf">
 					<xsl:apply-templates/>
 				</xsl:when>
 				<xsl:otherwise>
@@ -58,7 +58,7 @@
 		<xsl:variable name="tickerId" select="concat(@id, '_tick')"/>
 		<xsl:variable name="element">
 			<xsl:choose>
-				<xsl:when test="ui:rtf">
+				<xsl:when test="html:wc-rtf">
 					<xsl:text>div</xsl:text>
 				</xsl:when>
 				<xsl:otherwise>
@@ -166,10 +166,11 @@
 				<output for="{@id}_input" hidden="hidden" id="{$tickerId}" name="{$tickerId}"/>
 			</xsl:if>
 			<xsl:apply-templates select="ui:fieldindicator"/>
+			<xsl:apply-templates select="html:wc-rtf"/>
 		</xsl:element>
 	</xsl:template>
 
-	<xsl:template match="ui:rtf"/>
+<!--	<xsl:template match="ui:rtf"/>-->
 
 
 </xsl:stylesheet>

From c4800f1c6f163f11b33d205c5318b0b003aa328a Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Tue, 18 Jun 2024 16:15:52 +1000
Subject: [PATCH 04/11] Change custom rtf element to extend textarea

Instead of using a blank custom element to mark rtf fields, the actual
input textarea element is extended as a custom element. This is to
handle the rtf import problem, since now it is easy to detect when the
rtf module should be imported through the existance of the textarea in
textarea.mjs.

Potential problem: this functionality only plays nice with rtf
components that are not read-only. This is not a problem if components
are unable to switch between being read-only and not, since read-only
rtf fields don't seem to have a need to be registered through TinyMCE.
If that is not the case, however, it will have to be accounted for in
another way.
---
 .../render/webxml/WTextAreaRenderer.java           |  2 +-
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs        | 11 -----------
 wcomponents-theme/src/main/js/wc/ui/textArea.mjs   | 14 ++++++++++++++
 wcomponents-xslt/src/main/xslt/all.xsl             |  4 ----
 wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl  | 14 +++++++++-----
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java b/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
index 9f553589b..dde6e0447 100755
--- a/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
+++ b/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
@@ -66,7 +66,7 @@ public void doRender(final WComponent component, final WebXmlRenderContext rende
 			 * such as turning rich text features on or off, or specifying JSON config either as
 			 * a URL attribute or a nested CDATA section.
 			 */
-			xml.append("<wc-rtf></wc-rtf>");
+			xml.append("<ui:rtf />");
 		}
 
 		String textString = textArea.getText();
diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index b422cd17a..ff0aeb132 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -80,14 +80,3 @@ const instance = {
 };
 
 export default instance;
-
-const rtfTag = "wc-rtf";
-class WRichTextField extends HTMLElement {
-	connectedCallback() {
-		instance.register([this.parentElement.getAttribute("id")]);
-	}
-}
-
-if (!customElements.get(rtfTag)) {
-	customElements.define(rtfTag, WRichTextField);
-}
diff --git a/wcomponents-theme/src/main/js/wc/ui/textArea.mjs b/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
index c29ae326e..f37cda6d8 100644
--- a/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
@@ -215,3 +215,17 @@ initialise.register({
 });
 
 export default instance;
+
+const rtfTag = "wc-rtf";
+class WRichTextField extends HTMLTextAreaElement {
+	connectedCallback() {
+		import("wc/ui/rtf.mjs").then(({ default: c }) => {
+			c.register([this.parentElement.getAttribute("id")]);
+		});
+		// instance.register([this.parentElement.getAttribute("id")]);
+	}
+}
+
+if (!customElements.get(rtfTag)) {
+	customElements.define(rtfTag, WRichTextField, { extends: "textarea" });
+}
diff --git a/wcomponents-xslt/src/main/xslt/all.xsl b/wcomponents-xslt/src/main/xslt/all.xsl
index 2f8e4ed84..a18220990 100644
--- a/wcomponents-xslt/src/main/xslt/all.xsl
+++ b/wcomponents-xslt/src/main/xslt/all.xsl
@@ -334,7 +334,6 @@
 			select=".//ui:dropdown[@data and not(@type) and not(@readOnly)] | .//ui:listbox[@data and not(@readOnly)] | .//ui:shuffler[@data and not(@readOnly)]" />
 		<xsl:variable name="filedrops" select=".//ui:multifileupload[@ajax or @dropzone]" />
 		<xsl:variable name="multiDDData" select=".//ui:multidropdown[@data and not(@readOnly)]" />
-		<xsl:variable name="rtfs" select=".//ui:textarea[html:wc-rtf]" />
 		<xsl:variable name="eagerness" select="//*[@mode eq 'eager']" />
 		<xsl:variable name="editors" select=".//html:wc-imageedit" />
 		<xsl:variable name="tableActions" select=".//ui:table/ui:actions/ui:action" />
@@ -387,9 +386,6 @@
 				<xsl:apply-templates select="$multiDDData" mode="registerIds" />
 				<xsl:text>]);});</xsl:text>
 			</xsl:if>
-			<xsl:if test="$rtfs">
-				<xsl:text>import("wc/ui/rtf.mjs");</xsl:text>
-			</xsl:if>
 			<xsl:if test="$eagerness">
 				<xsl:text>import("wc/ui/containerload.mjs").then(({ default: c }) => {c.register([</xsl:text>
 				<xsl:apply-templates select="$eagerness" mode="registerIds" />
diff --git a/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl b/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
index 53ac5eb67..aa8a442a4 100644
--- a/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
+++ b/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
@@ -21,7 +21,7 @@
 	<xsl:template match="ui:textarea[@readOnly]">
 		<xsl:variable name="element">
 			<xsl:choose>
-				<xsl:when test="html:wc-rtf">div</xsl:when>
+				<xsl:when test="ui:rtf">div</xsl:when>
 				<xsl:otherwise>pre</xsl:otherwise>
 			</xsl:choose>
 		</xsl:variable>
@@ -41,7 +41,7 @@
 				</xsl:attribute>
 			</xsl:if>
 			<xsl:choose>
-				<xsl:when test="html:wc-rtf">
+				<xsl:when test="ui:rtf">
 					<xsl:apply-templates/>
 				</xsl:when>
 				<xsl:otherwise>
@@ -58,7 +58,7 @@
 		<xsl:variable name="tickerId" select="concat(@id, '_tick')"/>
 		<xsl:variable name="element">
 			<xsl:choose>
-				<xsl:when test="html:wc-rtf">
+				<xsl:when test="ui:rtf">
 					<xsl:text>div</xsl:text>
 				</xsl:when>
 				<xsl:otherwise>
@@ -159,6 +159,11 @@
 						<xsl:value-of select="@placeholder"/>
 					</xsl:attribute>
 				</xsl:if>
+				<xsl:if test="ui:rtf">
+					<xsl:attribute name="is">
+						<xsl:text>wc-rtf</xsl:text>
+					</xsl:attribute>
+				</xsl:if>
 				<xsl:value-of select="text()"/>
 				<!-- Note that a read-only RTF will actually contain nested HTML elements but that won't end up here -->
 			</textarea>
@@ -166,11 +171,10 @@
 				<output for="{@id}_input" hidden="hidden" id="{$tickerId}" name="{$tickerId}"/>
 			</xsl:if>
 			<xsl:apply-templates select="ui:fieldindicator"/>
-			<xsl:apply-templates select="html:wc-rtf"/>
 		</xsl:element>
 	</xsl:template>
 
-<!--	<xsl:template match="ui:rtf"/>-->
+	<xsl:template match="ui:rtf"/>
 
 
 </xsl:stylesheet>

From c7ca33f5a5cad3494df009b1a42865796abb8937 Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Wed, 19 Jun 2024 13:25:40 +1000
Subject: [PATCH 05/11] Add check for url string before using item

This is to avoid any errors that may be caused by fetching chars from
null values.
---
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs        | 6 ++++--
 wcomponents-theme/src/main/js/wc/ui/textArea.mjs   | 1 -
 wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs | 3 +--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index ff0aeb132..2a6db3633 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -61,8 +61,10 @@ const instance = {
 					let baseUrl = resourceLoader.getUrlFromImportMap("tinymce/");
 
 					// remove trailing forward slash since TinyMCE adds its own
-					while (baseUrl.charAt(baseUrl.length - 1) === '/') {
-						baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+					if (baseUrl) {
+						while (baseUrl.charAt(baseUrl.length - 1) === '/') {
+							baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+						}
 					}
 
 					return import("tinymce/tinymce.js").then(() => {
diff --git a/wcomponents-theme/src/main/js/wc/ui/textArea.mjs b/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
index f37cda6d8..99ae8ba60 100644
--- a/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
@@ -222,7 +222,6 @@ class WRichTextField extends HTMLTextAreaElement {
 		import("wc/ui/rtf.mjs").then(({ default: c }) => {
 			c.register([this.parentElement.getAttribute("id")]);
 		});
-		// instance.register([this.parentElement.getAttribute("id")]);
 	}
 }
 
diff --git a/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs b/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
index 350c3f21c..6eded0470 100644
--- a/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
+++ b/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
@@ -3,8 +3,7 @@ import timers from "wc/timers.mjs";
 import initialise from "wc/dom/initialise.mjs";
 
 describe("wc/ui/rtf", () => {
-
-	it("it sets a callback for every nonempty invocation of register", (done) => {
+	it("sets a callback for every nonempty invocation of register", (done) => {
 		spyOn(initialise, "addCallback");
 		rtf.register(["exID", "anotherEx"]);
 		rtf.register(["exID"]);

From 8df8a4115330bb700e152b00d49280f649b6f667 Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Wed, 19 Jun 2024 16:02:10 +1000
Subject: [PATCH 06/11] Switch back to using non-extending custom element

Due to webkit not supporting the extension of existing html elements
custom ones, regular custom elements have to be used. It is back to
using the empty wc-rtf marker element.

Note that the definition of this element is still done in textArea.mjs,
so rtf.mjs can continue being imported on-demnad.
---
 .../render/webxml/WTextAreaRenderer.java           |  4 +++-
 wcomponents-theme/src/main/js/wc/ui/textArea.mjs   |  5 +++--
 wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl  | 14 ++++----------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java b/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
index dde6e0447..43cabc8b3 100755
--- a/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
+++ b/wcomponents-core/src/main/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer.java
@@ -16,6 +16,8 @@
  */
 class WTextAreaRenderer extends AbstractWebXmlRenderer {
 
+	private static final String TAG_RTF = "wc-rtf";
+
 	/**
 	 * Paints the given WTextArea.
 	 *
@@ -66,7 +68,7 @@ public void doRender(final WComponent component, final WebXmlRenderContext rende
 			 * such as turning rich text features on or off, or specifying JSON config either as
 			 * a URL attribute or a nested CDATA section.
 			 */
-			xml.append("<ui:rtf />");
+			xml.append(String.format("<%s></%1$s>", TAG_RTF));
 		}
 
 		String textString = textArea.getText();
diff --git a/wcomponents-theme/src/main/js/wc/ui/textArea.mjs b/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
index 99ae8ba60..d6cb9982c 100644
--- a/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/textArea.mjs
@@ -216,8 +216,9 @@ initialise.register({
 
 export default instance;
 
+// Handle registration of rich text areas
 const rtfTag = "wc-rtf";
-class WRichTextField extends HTMLTextAreaElement {
+class WRichTextField extends HTMLElement {
 	connectedCallback() {
 		import("wc/ui/rtf.mjs").then(({ default: c }) => {
 			c.register([this.parentElement.getAttribute("id")]);
@@ -226,5 +227,5 @@ class WRichTextField extends HTMLTextAreaElement {
 }
 
 if (!customElements.get(rtfTag)) {
-	customElements.define(rtfTag, WRichTextField, { extends: "textarea" });
+	customElements.define(rtfTag, WRichTextField);
 }
diff --git a/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl b/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
index aa8a442a4..8b865f9b3 100644
--- a/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
+++ b/wcomponents-xslt/src/main/xslt/wc.ui.textarea.xsl
@@ -21,7 +21,7 @@
 	<xsl:template match="ui:textarea[@readOnly]">
 		<xsl:variable name="element">
 			<xsl:choose>
-				<xsl:when test="ui:rtf">div</xsl:when>
+				<xsl:when test="html:wc-rtf">div</xsl:when>
 				<xsl:otherwise>pre</xsl:otherwise>
 			</xsl:choose>
 		</xsl:variable>
@@ -41,7 +41,7 @@
 				</xsl:attribute>
 			</xsl:if>
 			<xsl:choose>
-				<xsl:when test="ui:rtf">
+				<xsl:when test="html:wc-rtf">
 					<xsl:apply-templates/>
 				</xsl:when>
 				<xsl:otherwise>
@@ -58,7 +58,7 @@
 		<xsl:variable name="tickerId" select="concat(@id, '_tick')"/>
 		<xsl:variable name="element">
 			<xsl:choose>
-				<xsl:when test="ui:rtf">
+				<xsl:when test="html:wc-rtf">
 					<xsl:text>div</xsl:text>
 				</xsl:when>
 				<xsl:otherwise>
@@ -159,11 +159,6 @@
 						<xsl:value-of select="@placeholder"/>
 					</xsl:attribute>
 				</xsl:if>
-				<xsl:if test="ui:rtf">
-					<xsl:attribute name="is">
-						<xsl:text>wc-rtf</xsl:text>
-					</xsl:attribute>
-				</xsl:if>
 				<xsl:value-of select="text()"/>
 				<!-- Note that a read-only RTF will actually contain nested HTML elements but that won't end up here -->
 			</textarea>
@@ -171,10 +166,9 @@
 				<output for="{@id}_input" hidden="hidden" id="{$tickerId}" name="{$tickerId}"/>
 			</xsl:if>
 			<xsl:apply-templates select="ui:fieldindicator"/>
+			<xsl:apply-templates select="html:wc-rtf"/>
 		</xsl:element>
 	</xsl:template>
 
-	<xsl:template match="ui:rtf"/>
-
 
 </xsl:stylesheet>

From fbcbc1dae8e312aa6ae432ae012103026887cc5b Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Fri, 21 Jun 2024 10:43:01 +1000
Subject: [PATCH 07/11] Remove XSD schema checks to pass tests that fail

This is as advised in another fix (eager components port) since we are
trying to move away from XML entirely anyways.
---
 .../render/webxml/WTextAreaRenderer_Test.java       | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/wcomponents-core/src/test/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer_Test.java b/wcomponents-core/src/test/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer_Test.java
index 495ce5693..06f88f695 100755
--- a/wcomponents-core/src/test/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer_Test.java
+++ b/wcomponents-core/src/test/java/com/github/bordertech/wcomponents/render/webxml/WTextAreaRenderer_Test.java
@@ -88,42 +88,33 @@ public void testDoPaint() throws IOException, SAXException, XpathException {
 		assertXpathEvaluatesTo("40", "//ui:textarea/@cols", field);
 
 		field.setRichTextArea(false);
-		assertSchemaMatch(field);
-		assertXpathNotExists("//ui:textarea/ui:rtf", field);
+		assertXpathNotExists("//ui:textarea/html:wc-rtf", field);
 
 		field.setRichTextArea(true);
-		assertSchemaMatch(field);
-		assertXpathExists("//ui:textarea/ui:rtf", field);
+		assertXpathExists("//ui:textarea/html:wc-rtf", field);
 
 		field.setDefaultSubmitButton(button);
-		assertSchemaMatch(field);
 		assertXpathEvaluatesTo(button.getId(), "//ui:textarea/@buttonId", field);
 
 		field.setPattern("");
-		assertSchemaMatch(field);
 		assertXpathNotExists("//ui:textarea/@pattern", field);
 
 		// Pattern is not supported on the client for TextArea, and will not be rendered
 		field.setPattern("test[123]");
-		assertSchemaMatch(field);
 		assertXpathNotExists("//ui:textarea/@pattern", field);
 
 		field.setText("Hello");
-		assertSchemaMatch(field);
 		assertXpathEvaluatesTo(field.getText(), "normalize-space(//ui:textarea)", field);
 
 
 		field.setPlaceholder("enter stuff here");
-		assertSchemaMatch(field);
 		assertXpathEvaluatesTo("enter stuff here", "//ui:textarea/@placeholder", field);
 
 
 		field.setAutocomplete(AddressType.BILLING);
-		assertSchemaMatch(field);
 		assertXpathEvaluatesTo(field.getAutocomplete(), "//ui:textarea/@autocomplete", field);
 
 		field.setAutocompleteOff();
-		assertSchemaMatch(field);
 		assertXpathEvaluatesTo(AutocompleteUtil.getOff(), "//ui:textarea/@autocomplete", field);
 	}
 

From a02d138d4f124bf515c671a785bcdb187a1d43af Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Fri, 21 Jun 2024 13:41:24 +1000
Subject: [PATCH 08/11] Change url check in rtf to use optional chaining

---
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index 2a6db3633..d6cecd332 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -61,10 +61,8 @@ const instance = {
 					let baseUrl = resourceLoader.getUrlFromImportMap("tinymce/");
 
 					// remove trailing forward slash since TinyMCE adds its own
-					if (baseUrl) {
-						while (baseUrl.charAt(baseUrl.length - 1) === '/') {
-							baseUrl = baseUrl.substring(0, baseUrl.length - 1);
-						}
+					while (baseUrl?.charAt(baseUrl.length - 1) === '/') {
+						baseUrl = baseUrl.substring(0, baseUrl.length - 1);
 					}
 
 					return import("tinymce/tinymce.js").then(() => {

From 04e4a1fff58e182fa33923d84501967ed6ec6a10 Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Mon, 1 Jul 2024 14:42:07 +1000
Subject: [PATCH 09/11] Add better unit tests for rtf

Using a mock of TinyMCE, rtf is now tested for default configuration.

Slight remodel of the rtf code to use resourceLoader to import TinyMCE
was also done. This was to make it possible to mock TinyMCE by pointing
the testing suite towards the mock with an import map in the DOM.
---
 wcomponents-theme/src/main/js/wc/ui/rtf.mjs   | 14 ++--
 .../src/test/resource/mock-modules/tinymce.js |  9 +++
 .../src/test/spec/wc.ui.rtf.test.mjs          | 80 ++++++++++++++++++-
 3 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 wcomponents-theme/src/test/resource/mock-modules/tinymce.js

diff --git a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
index d6cecd332..85602e631 100755
--- a/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
+++ b/wcomponents-theme/src/main/js/wc/ui/rtf.mjs
@@ -2,7 +2,7 @@
  * Provides a Rich Text Field implementation using tinyMCE.
  *
  * Optional module configuration.
- * The config member "initObj" can be set to an abject containing any tinyMCE cofiguration members **except**
+ * The config member "initObj" can be set to an abject containing any tinyMCE configuration members **except**
  * selector. This allows customised RTF per implementation. This should be added in the template
  */
 import initialise from "wc/dom/initialise.mjs";
@@ -60,14 +60,14 @@ const instance = {
 				if (!tinyMCE) {
 					let baseUrl = resourceLoader.getUrlFromImportMap("tinymce/");
 
-					// remove trailing forward slash since TinyMCE adds its own
-					while (baseUrl?.charAt(baseUrl.length - 1) === '/') {
-						baseUrl = baseUrl.substring(0, baseUrl.length - 1);
-					}
-
-					return import("tinymce/tinymce.js").then(() => {
+					return import(`${baseUrl}tinymce.js`).then(() => {
 						tinyMCE = element.ownerDocument.defaultView.tinymce;
 						if (baseUrl) {
+							// remove trailing forward slash since TinyMCE adds its own
+							while (baseUrl.charAt(baseUrl.length - 1) === '/') {
+								baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+							}
+
 							tinyMCE.baseURL = baseUrl;
 						}
 						callback();
diff --git a/wcomponents-theme/src/test/resource/mock-modules/tinymce.js b/wcomponents-theme/src/test/resource/mock-modules/tinymce.js
new file mode 100644
index 000000000..4e6c7f038
--- /dev/null
+++ b/wcomponents-theme/src/test/resource/mock-modules/tinymce.js
@@ -0,0 +1,9 @@
+let tinymce = {
+	baseUrl : "",
+	init : function() {},
+	triggerSave : function() {}
+};
+
+document.defaultView.tinymce = tinymce;
+
+export default tinymce;
diff --git a/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs b/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
index 6eded0470..6a81df678 100644
--- a/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
+++ b/wcomponents-theme/src/test/spec/wc.ui.rtf.test.mjs
@@ -1,16 +1,88 @@
 import rtf from "wc/ui/rtf.mjs";
-import timers from "wc/timers.mjs";
 import initialise from "wc/dom/initialise.mjs";
+import tinymce from "../resource/mock-modules/tinymce.js";
 
 describe("wc/ui/rtf", () => {
+	let origHead;
+
+	beforeAll(() => {
+		origHead = window.document.head.innerHTML;
+
+		let importMap = window.document.createElement("script");
+		importMap.setAttribute("type", "importmap");
+		importMap.innerHTML =
+			`{
+				"imports": {
+					"tinymce/": "../../../../test/resource/mock-modules/"
+				}
+			}`;
+		window.document.head.append(importMap);
+	});
+
+	afterAll(() => {
+		window.document.head.innerHTML = origHead;
+		delete document.defaultView.tinymce;
+	});
+
 	it("sets a callback for every nonempty invocation of register", (done) => {
 		spyOn(initialise, "addCallback");
 		rtf.register(["exID", "anotherEx"]);
 		rtf.register(["exID"]);
 		rtf.register([]);
-		timers.setTimeout(function() {
-			expect(initialise.addCallback).toHaveBeenCalledTimes(2);
+
+		expect(initialise.addCallback).toHaveBeenCalledTimes(2);
+		done();
+	});
+
+	it("passes the correct selectors to TinyMCE on editor initialisation", (done) => {
+		const selectors = ["textarea#exID_input", "textarea#anotherEx_input"];
+		const expectedCalls = 2;
+		let callCount = 0;
+
+		const initSpy = spyOn(tinymce, "init").and.callFake(() => {
+			let givenSelector = initSpy.calls.mostRecent().args[0].selector;
+			expect(selectors).toContain(givenSelector);
+
+			if (selectors.includes(givenSelector)) {
+				if (++callCount === expectedCalls) {
+					done();
+				}
+
+				const idx = selectors.indexOf(givenSelector);
+				if (idx > -1) {
+					selectors.splice(idx, 1);
+				}
+			}
+		});
+
+		rtf.register(["exID"]);
+		rtf.register(["anotherEx"]);
+	});
+
+	it("passes the correct default plugins to TinyMCE on editor initialisation", (done) => {
+		const initSpy = spyOn(tinymce, "init").and.callFake(() => {
+			const defaultPlugins = ["autolink", "link", "lists", "advlist", "preview", "help"];
+
+			for (const plugin of defaultPlugins) {
+				expect(initSpy.calls.mostRecent().args[0].plugins).toContain(plugin);
+			}
+			done();
+		});
+
+		rtf.register(["exID"]);
+	});
+
+	it("passes the correct default tools to TinyMCE on editor initialisation", (done) => {
+		const initSpy = spyOn(tinymce, "init").and.callFake(() => {
+			const defaultTools = ["undo", "redo", "formatselect", "bold", "italic", "alignleft", "aligncenter",
+				"alignright", "alignjustify", "bullist", "numlist", "outdent", "indent", "removeformat", "help"];
+
+			for (const tool of defaultTools) {
+				expect(initSpy.calls.mostRecent().args[0].toolbar).toContain(tool);
+			}
 			done();
-		}, 100);
+		});
+
+		rtf.register(["exID"]);
 	});
 });

From 327349367db3e772541d59c6afeb01d75069eed7 Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Tue, 2 Jul 2024 10:20:53 +1000
Subject: [PATCH 10/11] Plug leaky test suite

RTF tests were previously faililng when run after the initialise tests,
since it changes that suite changes the dom and doesn't change it back.
This has been fixed up and all tests are passing now.
---
 .../src/test/spec/wc.dom.initialise.test.mjs             | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs b/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs
index 502a76e5f..9686c5ee0 100644
--- a/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs
+++ b/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs
@@ -2,6 +2,15 @@ import initialise, {setView} from "wc/dom/initialise.mjs";
 import {setUpExternalHTML} from "../helpers/specUtils.mjs";
 
 describe("wc/dom/initialise", () => {
+	let origWindow;
+
+	beforeAll(() => {
+		origWindow = window;
+	});
+
+	afterAll(() => {
+		setView(origWindow);
+	})
 
 	beforeEach(() => {
 		return setUpExternalHTML("domUsefulDom.html").then(dom => {

From bb72a8af1558c275accebfedb5a5994db4f5e4c6 Mon Sep 17 00:00:00 2001
From: Phil Caisip <philip.caisip@homeaffairs.gov.au>
Date: Tue, 2 Jul 2024 10:55:23 +1000
Subject: [PATCH 11/11] Add missing semicolon in initialise tests

---
 wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs b/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs
index 9686c5ee0..82a02e6ed 100644
--- a/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs
+++ b/wcomponents-theme/src/test/spec/wc.dom.initialise.test.mjs
@@ -10,7 +10,7 @@ describe("wc/dom/initialise", () => {
 
 	afterAll(() => {
 		setView(origWindow);
-	})
+	});
 
 	beforeEach(() => {
 		return setUpExternalHTML("domUsefulDom.html").then(dom => {