fix: Switch from Lit-managed rendering to direct DOM manipulation in …

…html-block to avoid conflicts with MathJax
BrightspaceUI · Oct 2, 2024 · f6b17ed · f6b17ed
2 parents ea206c0 + 2503f66
commit f6b17ed
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 31 deletions.
diff --git a/components/html-block/html-block.js b/components/html-block/html-block.js
@@ -1,13 +1,14 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
 import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';
-import { until } from 'lit/directives/until.js';
 
 export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered {
@@ -142,7 +143,7 @@ const getRenderers = async() => {
 /**
  * A component for displaying user-authored HTML.
  */
-class HtmlBlock extends LitElement {
+class HtmlBlock extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -206,8 +207,7 @@ class HtmlBlock extends LitElement {
 		this._initialContextResolve = undefined;
 		this._initialContextPromise = new Promise(resolve => this._initialContextResolve = resolve);
 
-		this._renderersProcessedResolve = undefined;
-		this._renderersProcessedPromise = new Promise(resolve => this._renderersProcessedResolve = resolve);
+		this._renderContainerRef = createRef();
 
 		const contextKeysPromise = getRenderers().then(renderers => renderers.reduce((keys, currentRenderer) => {
 			if (currentRenderer.contextKeys) currentRenderer.contextKeys.forEach(key => keys.push(key));
@@ -216,10 +216,7 @@ class HtmlBlock extends LitElement {
 
 		const contextValsPromise = contextKeysPromise.then(contextKeys => {
 			return Promise.allSettled(contextKeys.map(key => {
-				return tryGet(key, undefined, ctx => {
-					this._context.set(key, ctx);
-					this.updated(new Map([['_context']]));
-				});
+				return tryGet(key, undefined, ctx => this._context.set(key, ctx));
 			}));
 		});
 
@@ -238,24 +235,18 @@ class HtmlBlock extends LitElement {
 		};
 
 		return html`
-			<div class="${classMap(renderContainerClasses)}">
-				${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
-			</div>
+			<div class="${classMap(renderContainerClasses)}" ${ref(this._renderContainerRef)}></div>
 			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
 		`;
 	}
 
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if ((changedProperties.has('embeds') || changedProperties.has('_context')) && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
+		if (this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
 			await this._updateRenderContainer();
 		}
 	}
 
-	async getLoadingComplete() {
-		return this._renderersProcessedPromise;
-	}
-
 	async _handleSlotChange(e) {
 		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
 		await this._renderInline(e.target);
@@ -264,7 +255,6 @@ class HtmlBlock extends LitElement {
 	async _processEmbeds() {
 		const htmlFragment = document.createRange().createContextualFragment(this.html);
 		await renderEmbeds(htmlFragment);
-		this.updated(new Map([['embeds']]));
 		return htmlFragment;
 	}
 
@@ -289,7 +279,7 @@ class HtmlBlock extends LitElement {
 				loadingCompletePromises.push(renderer.getLoadingComplete());
 			}
 		}
-		Promise.all(loadingCompletePromises).then(() => this._renderersProcessedResolve());
+		Promise.all(loadingCompletePromises).then(this.resolveLoadingComplete);
 	}
 
 	async _renderInline(slot) {
@@ -300,15 +290,16 @@ class HtmlBlock extends LitElement {
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
 
 		if (!noDeferredRenderingContainer) {
-			this._renderersProcessedResolve();
+			this.resolveLoadingComplete();
 			return;
 		}
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 
 	async _updateRenderContainer() {
-		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		await this._processRenderers(renderContainer);
+		this._renderContainerRef.value.innerHTML = '';
+		this._renderContainerRef.value.append(await this._processEmbeds());
+		await this._processRenderers(this._renderContainerRef.value);
 	}
 
 	_validateHtml() {

diff --git a/components/html-block/test/html-block.vdiff.js b/components/html-block/test/html-block.vdiff.js
@@ -149,16 +149,8 @@ describe('d2l-html-block', () => {
 
 	it('update-content', async() => {
 		const elem = await fixture(html`<d2l-html-block html="before update"></d2l-html-block>`, { viewport });
-
-		let resolve;
-		const elemUpdated = new Promise(r => resolve = r);
-		elem.updated = async function(changedProperties) {
-			await Object.getPrototypeOf(elem).updated.call(elem, changedProperties);
-			if (changedProperties.has('embeds')) resolve();
-		};
-
 		elem.html = 'after update';
-		await elemUpdated;
+		await elem.loadingComplete;
 		await expect(elem).to.be.golden();
 	});