@brightspace-ui/core 2.188.0 → 2.189.0

package/components/collapsible-panel/README.md

@@ -136,6 +136,12 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 | `panel-title` | String | The title of the panel |
 | `skeleton` | Boolean | Renders the panel title and the expand/collapse icon as skeleton loaders |
 | `type` | String | The type of collapsible panel |
+
+### Events
+| Event | Description |
+|--|--|
+| `d2l-collapsible-panel-expand` | Dispatched when the panel is expanded |
+| `d2l-collapsible-panel-collapse` | Dispatched when the panel is collapsed |
 <!-- docs: end hidden content -->
 
 ### Panel Types

package/components/html-block/html-block.js

@@ -1,12 +1,13 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, 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 { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
-
+import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
+import { until } from 'lit/directives/until.js';
 
 export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered {
@@ -231,7 +232,9 @@ class HtmlBlock extends LitElement {
 		};
 
 		return html`
-			<div class="${classMap(renderContainerClasses)}"></div>
+			<div class="${classMap(renderContainerClasses)}">
+				${(this._embedsFeatureEnabled() && !this.noDeferredRendering) ? until(this._processEmbeds(), nothing) : nothing}
+			</div>
 			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
 		`;
 	}
@@ -270,11 +273,21 @@ class HtmlBlock extends LitElement {
 		return false;
 	}
 
+	_embedsFeatureEnabled() {
+		return window.D2L?.LP?.Web?.UI?.Flags.Flag('shield-7574-enable-embed-rendering-framework', true);
+	}
+
 	async _handleSlotChange(e) {
 		if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
 		await this._renderInline(e.target);
 	}
 
+	async _processEmbeds() {
+		const htmlFragment = document.createRange().createContextualFragment(this.html);
+		await renderEmbeds(htmlFragment);
+		return htmlFragment;
+	}
+
 	async _processRenderers(elem) {
 		await this._contextObserverControllerInitialized;
 		const renderers = await getRenderers();
@@ -324,7 +337,7 @@ class HtmlBlock extends LitElement {
 
 	async _updateRenderContainer() {
 		const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
-		renderContainer.innerHTML = this.html;
+		if (!this._embedsFeatureEnabled()) renderContainer.innerHTML = this.html;
 		await this._processRenderers(renderContainer);
 	}
 

package/helpers/embeds.js

@@ -0,0 +1,102 @@
+import { html, nothing, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
+import { tryGetPluginByKey } from './plugins.js';
+
+const embedTypeAttributeName = 'data-d2l-embed-type';
+
+function tryGetEmbedRendererPlugin(embedType) {
+	const embedRendererPlugin = tryGetPluginByKey('d2l-html-embed-renderer', embedType);
+	if (!embedRendererPlugin) {
+		console.warn(`d2l-html-embed-renderer: Can't find plugin for ${embedType} embed type.`);
+	}
+
+	return embedRendererPlugin;
+}
+
+export async function createEmbedViewPlaceholder(embedType, props) {
+	const embedRendererPlugin = tryGetEmbedRendererPlugin(embedType);
+	if (!embedRendererPlugin) return;
+
+	const placeholderData = await embedRendererPlugin.getViewPlaceholderData(props);
+	const contents = placeholderData.contents
+		? map(Object.entries(placeholderData.contents), ([id, content]) => html`<template data-d2l-embed-template-id=${id}>${content}</template>`)
+		: nothing;
+
+	const properties = placeholderData.properties ? JSON.stringify(placeholderData.properties) : undefined;
+
+	return placeholderData.inline
+		? html`
+			<span data-d2l-embed-type="${embedType}" data-d2l-embed-props="${ifDefined(properties)}" style="${placeholderData.style}">
+				${contents}
+			</span>
+		` : html`
+			<div data-d2l-embed-type="${embedType}" data-d2l-embed-props="${ifDefined(properties)}" style="${placeholderData.style}">
+				${contents}
+			</div>
+		`;
+}
+
+export async function createEmbedEditorPlaceholder(embedType, props) {
+	const embedRendererPlugin = tryGetEmbedRendererPlugin(embedType);
+	if (!embedRendererPlugin) return;
+
+	const placeholderData = await embedRendererPlugin.getEditorPlaceholderData(props);
+	const text = placeholderData.text || nothing;
+
+	const properties = placeholderData.properties ? JSON.stringify(placeholderData.properties) : undefined;
+
+	return placeholderData.inline
+		? html`
+			<span
+				contentEditable="${ifDefined(placeholderData.contentEditable)}"
+				data-d2l-embed-type="${embedType}"
+				data-d2l-embed-props="${ifDefined(properties)}"
+				style="${placeholderData.style}">
+				${text}
+			</span>
+		` : html`
+			<div
+				contentEditable="${ifDefined(placeholderData.contentEditable)}"
+				data-d2l-embed-type="${embedType}"
+				data-d2l-embed-props="${ifDefined(properties)}"
+				style="${placeholderData.style}">
+				${text}
+			</div>
+		`;
+}
+
+export async function renderEmbeds(node) {
+	const placeholders = [...node.querySelectorAll(`div[${embedTypeAttributeName}], span[${embedTypeAttributeName}]`)];
+	if (placeholders.length === 0) return;
+
+	const processPlaceholder = async placeholder => {
+		const embedRendererPlugin = tryGetEmbedRendererPlugin(placeholder.dataset.d2lEmbedType);
+		if (!embedRendererPlugin) return;
+
+		const templates = [...placeholder.querySelectorAll('template[data-d2l-embed-template-id]')];
+		const processedTemplates = await Promise.all(templates.map(async template => {
+			const templateNode = template.content.cloneNode(true);
+			await renderEmbeds(templateNode);
+			return html`${templateNode}`;
+		}));
+
+		const processedTemplateContents = templates.reduce((acc, template, index) => {
+			acc[template.dataset.d2lEmbedTemplateId] = processedTemplates[index];
+			return acc;
+		}, {});
+
+		const props = JSON.parse(placeholder.dataset.d2lEmbedProps);
+		return embedRendererPlugin.renderView(processedTemplateContents, props);
+	};
+
+	const embeds = await Promise.all(placeholders.map(processPlaceholder));
+	placeholders.forEach((placeholder, index) => {
+		if (!embeds[index]) {
+			console.warn(`d2l-html-embed-renderer: Can't find valid embed for placeholder with ${placeholder.dataset.d2lEmbedType} embed type`);
+		}
+
+		render(embeds[index], placeholder.parentNode, { renderBefore: placeholder });
+		placeholder.remove();
+	});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.188.0",
+  "version": "2.189.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",