@brightspace-ui/htmleditor - npm Package Compare versions

Comparing version 2.89.2 to 2.89.3

components/commands.js

@@ -151,3 +151,3 @@
 	undo: 'd2l-undo',
-	unorderedList: 'd2l-insert-unordered-list',
+	unorderedList: 'd2l-insert-unordered-list'
 });

components/plugins/a11ychecker.js

@@ -0,2 +1,4 @@
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { cmds } from '../commands.js';
+import { icons } from '../../generated/icons.js';
 
@@ -6,3 +8,8 @@ const name = 'd2l-a11ychecker';
 export class A11yCheckerPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -16,2 +23,31 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.a11yChecker,
+				extensionPoint: extensionPoints.VIEW_SECTION,
+				icon: icons['accessibility-check'],
+				sortOrder: 1,
+				title: this.#localizer('a11ychecker'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.a11yChecker,
+				extensionPoint: extensionPoints.VIEW_MENU,
+				icon: icons['accessibility-check'],
+				sortOrder: 3,
+				title: this.#localizer('a11ychecker'),
+				type: menuItemTypes.MENU_ITEM
+			},
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -18,0 +54,0 @@ return !inlineLimited;

components/plugins/attributes.js

@@ -7,3 +7,5 @@ import '@brightspace-ui/core/components/button/button.js';
 import { css, html, LitElement } from 'lit';
+import { extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { cmds } from '../commands.js';
+import { icons } from '../../generated/icons.js';
 import { inputLabelStyles } from '@brightspace-ui/core/components/inputs/input-label-styles.js';
@@ -25,3 +27,8 @@ import { live } from 'lit/directives/live.js';
 export class AttributesPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -35,2 +42,15 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				cmd: cmds.attributes,
+				extensionPoint: extensionPoints.INSERT_MORE_MENU_GENERAL_SECTION,
+				icon: icons['insert-attributes'],
+				sortOrder: 1,
+				title: this.#localizer('attributes'),
+				type: menuItemTypes.MENU_ITEM
+			}
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -37,0 +57,0 @@ return !inlineLimited;

components/plugins/color.js

@@ -60,2 +60,10 @@ import { cmds } from '../commands.js';
 
+	get toolbarItems() {
+		return [
+			// Note that for now, toolbar items for the color plugin are managed by the formatting plugin.
+			// This will ideally be the home for this logic in the future, but for now it needs to be kept
+			// separate because of its dependence on the LMS.
+		];
+	}
+
 	isAvailable() {
@@ -62,0 +70,0 @@ return true;

components/plugins/equation.js

@@ -0,1 +1,2 @@
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { css, LitElement } from 'lit';
@@ -6,2 +7,3 @@ import { moveToBookmark, removeBookmark, setBookmark } from '../selection-helpers.js';
 import { getComposedActiveElement } from '@brightspace-ui/core/helpers/focus.js';
+import { icons } from '../../generated/icons.js';
 import { loadMathJax } from '@brightspace-ui/core/helpers/mathjax.js';
@@ -20,3 +22,8 @@ import { openDialogWithParam } from '../lms-adapter.js';
 export class EquationPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -30,2 +37,81 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.LARGER
+				},
+				extensionPoint: extensionPoints.INSERT_SECTION,
+				icon: icons['equation-graphical'],
+				items: [
+					{
+						cmd: cmds.equationGraphical,
+						icon: icons['equation-graphical'],
+						title: this.#localizer('equation:graphical'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: cmds.equationLaTeX,
+						icon: icons['equation-latex'],
+						title: this.#localizer('equation:latex'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: cmds.equationMathML,
+						icon: icons['equation-mathml'],
+						title: this.#localizer('equation:mathml'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: cmds.equationChemistry,
+						icon: icons['equation-chemistry'],
+						title: this.#localizer('equation:chemistry'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					}
+				],
+				sortOrder: 4,
+				title: this.#localizer('equation'),
+				type: buttonTypes.BUTTON_MENU
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.LARGER
+				},
+				extensionPoint: extensionPoints.INSERT_MORE_MENU_ELEMENTS_SECTION,
+				icon: icons['equation-graphical'],
+				items: [
+					{
+						cmd: cmds.equationGraphical,
+						icon: icons['equation-graphical'],
+						title: this.#localizer('equation:graphical'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: cmds.equationLaTeX,
+						icon: icons['equation-latex'],
+						title: this.#localizer('equation:latex'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: cmds.equationMathML,
+						icon: icons['equation-mathml'],
+						title: this.#localizer('equation:mathml'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: cmds.equationChemistry,
+						icon: icons['equation-chemistry'],
+						title: this.#localizer('equation:chemistry'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					}
+				],
+				sortOrder: 1,
+				title: this.#localizer('equation'),
+				type: menuItemTypes.MENU_ITEM_MENU
+			}
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -32,0 +118,0 @@ return !inlineLimited;

components/plugins/format-painter.js

@@ -0,2 +1,4 @@
+import { buttonTypes, extensionPoints } from '../toolbar/item-params-internal.js';
 import { cmds } from '../commands.js';
+import { icons } from '../../generated/icons.js';
 
@@ -6,3 +8,8 @@ const name = 'd2l-formatpainter';
 export class FormatPainterPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -16,2 +23,14 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				cmd: cmds.formatPainter,
+				extensionPoint: extensionPoints.FORMAT_PAINTER_SECTION,
+				icon: icons['format-painter'],
+				title: this.#localizer('format:painter'),
+				type: buttonTypes.BUTTON_TOGGLE
+			}
+		];
+	}
+
 	isAvailable() {
@@ -18,0 +37,0 @@ return true;

components/plugins/formatting.js

@@ -1,3 +0,5 @@
-import { cmds } from '../commands.js';
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes, slottedTextContainers } from '../toolbar/item-params-internal.js';
+import { cmds, d2lCmds } from '../commands.js';
 import { FormattingContextMenuPlugin } from '../context-menu/formatting/formatting.js';
+import { icons } from '../../generated/icons.js';
 import { requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
@@ -10,3 +12,8 @@
 export class FormatPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -20,2 +27,244 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.MINIMUM
+				},
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				items: this.#getBlockFormatMenuItems(),
+				title: this.#localizer('format'),
+				type: buttonTypes.BUTTON_MENU,
+				width: 115
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.MINIMUM
+				},
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				items: this.#getBlockFormatMenuItems(),
+				title: this.#localizer('format'),
+				type: buttonTypes.BUTTON_MENU,
+				width: 70
+			},
+			{
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				type: buttonTypes.SEPARATOR
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: d2lCmds.bold,
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				icon: icons.bold,
+				title: this.#localizer('format:bold'),
+				type: buttonTypes.BUTTON_TOGGLE
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: d2lCmds.italic,
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				icon: icons.italic,
+				title: this.#localizer('format:italic'),
+				type: buttonTypes.BUTTON_TOGGLE
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				icon: icons.underline,
+				items: [
+					{
+						cmd: d2lCmds.underline,
+						icon: icons.underline,
+						title: this.#localizer('format:underline'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: d2lCmds.strikethrough,
+						icon: icons.strikethrough,
+						title: this.#localizer('format:strikethrough'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: d2lCmds.superscript,
+						icon: icons.superscript,
+						title: this.#localizer('format:superscript'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					},
+					{
+						cmd: d2lCmds.subscript,
+						icon: icons.subscript,
+						title: this.#localizer('format:subscript'),
+						type: menuItemTypes.MENU_ITEM_TOGGLE
+					}
+				],
+				title: this.#localizer('format:inline'),
+				type: buttonTypes.BUTTON_MENU
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.foregroundColor,
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				icon: icons['text-color'],
+				title: this.#localizer('color:text'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.SMALLER
+				},
+				extensionPoint: extensionPoints.FORMATTING_SECTION,
+				icon: icons['format-inline'],
+				items: this.#getBIUMenuItems(),
+				title: this.#localizer('format:inline'),
+				type: buttonTypes.BUTTON_MENU
+			},
+			{
+				extensionPoint: extensionPoints.INLINE_SECTION,
+				icon: icons['format-inline'],
+				items: this.#getBIUMenuItems(),
+				sortOrder: 1,
+				title: this.#localizer('format:inline'),
+				type: buttonTypes.BUTTON_MENU
+			},
+			{
+				extensionPoint: extensionPoints.INLINE_LIMITED_SECTION,
+				icon: icons['format-inline'],
+				items: this.#getBIUMenuItems(),
+				sortOrder: 1,
+				title: this.#localizer('format:inline'),
+				type: buttonTypes.BUTTON_MENU
+			}
+		];
+	}
+
+	#getBIUMenuItems() {
+		return [
+			{
+				cmd: d2lCmds.bold,
+				icon: icons.bold,
+				title: this.#localizer('format:bold'),
+				type: menuItemTypes.MENU_ITEM_TOGGLE
+			},
+			{
+				cmd: d2lCmds.italic,
+				icon: icons.italic,
+				title: this.#localizer('format:italic'),
+				type: menuItemTypes.MENU_ITEM_TOGGLE
+			},
+			{
+				cmd: d2lCmds.underline,
+				icon: icons.underline,
+				title: this.#localizer('format:underline'),
+				type: menuItemTypes.MENU_ITEM_TOGGLE
+			},
+			{
+				cmd: d2lCmds.strikethrough,
+				icon: icons.strikethrough,
+				title: this.#localizer('format:strikethrough'),
+				type: menuItemTypes.MENU_ITEM_TOGGLE
+			},
+			{
+				cmd: d2lCmds.superscript,
+				icon: icons.superscript,
+				title: this.#localizer('format:superscript'),
+				type: menuItemTypes.MENU_ITEM_TOGGLE
+			},
+			{
+				cmd: d2lCmds.subscript,
+				icon: icons.subscript,
+				title: this.#localizer('format:subscript'),
+				type: menuItemTypes.MENU_ITEM_TOGGLE
+			},
+			{
+				cmd: cmds.foregroundColor,
+				icon: icons['text-color'],
+				title: this.#localizer('color:text'),
+				type: menuItemTypes.MENU_ITEM
+			}
+		];
+	}
+
+	#getBlockFormatMenuItems() {
+		return [
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.PARAGRAPH,
+					text: this.#localizer('format:paragraph')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'p'
+			},
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.HEADING1,
+					text: this.#localizer('format:heading1')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'h1'
+			},
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.HEADING2,
+					text: this.#localizer('format:heading2')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'h2'
+			},
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.HEADING3,
+					text: this.#localizer('format:heading3')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'h3'
+			},
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.HEADING4,
+					text: this.#localizer('format:heading4')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'h4'
+			},
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.BLOCKQUOTE,
+					text: this.#localizer('format:blockquote')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'blockquote'
+			},
+			{
+				cmd: d2lCmds.formatBlock,
+				slottedText: {
+					containerElement: slottedTextContainers.CODE,
+					text: this.#localizer('format:code')
+				},
+				type: menuItemTypes.MENU_ITEM_TOGGLE,
+				value: 'code'
+			}
+		];
+	}
+
 	isAvailable() {
@@ -32,3 +281,3 @@ return true;
 
-		// TinyMCE 5 reflected the currently selected tag bag when querying the formatBlock command value.
+		// TinyMCE 5 reflected the currently selected tag back when querying the formatBlock command value.
 		// This no longer appears to be the case, so we need to do this ourselves for the format selector to work.
@@ -41,2 +290,22 @@ helpers.commandRegistry.registerCommand(cmds.formatBlock, undefined, undefined, () => {
 
+		if (!context.toolbarRefactor) return;
+
+		helpers.commandRegistry.registerCommand(
+			d2lCmds.formatBlock,
+			value => helpers.commandRegistry.executeInternalCommand(helpers.commandRegistry.builtInCommands.formatBlock, value),
+			undefined,
+			() => {
+				const selection = helpers.internalAPIWrapper.getSelection();
+				const selectedNode = selection && selection.getNode();
+				return getBlockElement(selectedNode) || 'p';
+			}
+		);
+
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.bold, helpers.commandRegistry.builtInCommands.bold);
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.italic, helpers.commandRegistry.builtInCommands.italic);
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.underline, helpers.commandRegistry.builtInCommands.underline);
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.strikethrough, helpers.commandRegistry.builtInCommands.strikethrough);
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.superscript, helpers.commandRegistry.builtInCommands.superscript);
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.subscript, helpers.commandRegistry.builtInCommands.subscript);
+
 		helpers.uiRegistry.registerContextMenu(FormattingContextMenuPlugin);
@@ -43,0 +312,0 @@ }

components/plugins/fullscreen.js

 import { allowBodyScroll, preventBodyScroll } from '@brightspace-ui/core/components/backdrop/backdrop.js';
+import { buttonTypes, extensionPoints } from '../toolbar/item-params-internal.js';
 import { clearDismissible, setDismissible } from '@brightspace-ui/core/helpers/dismissible.js';
 import { cmds } from '../commands.js';
+import { icons } from '../../generated/icons.js';
 import { requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
@@ -11,3 +13,8 @@
 export class FullscreenPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -21,2 +28,22 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				cmd: cmds.fullscreen,
+				extensionPoint: extensionPoints.PINNED_SECTION,
+				icon: icons.fullscreen,
+				title: this.#localizer('fullscreen'),
+				type: buttonTypes.BUTTON_TOGGLE
+			},
+			{
+				cmd: cmds.fullscreen,
+				extensionPoint: extensionPoints.INLINE_SECTION,
+				icon: icons.fullscreen,
+				sortOrder: 6,
+				title: this.#localizer('fullscreen'),
+				type: buttonTypes.BUTTON_TOGGLE
+			}
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -23,0 +50,0 @@ return !inlineLimited;

components/plugins/image.js

@@ -0,1 +1,2 @@
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { css, LitElement } from 'lit';
@@ -6,2 +7,3 @@ import { getContentFile, getSharedFile, getTempFile, openLegacyDialog, uploadFile } from '../lms-adapter.js';
 import { getComposedActiveElement } from '@brightspace-ui/core/helpers/focus.js';
+import { icons } from '../../generated/icons.js';
 
@@ -104,3 +106,8 @@ const fileTypes = {
 export class ImagePlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -114,2 +121,31 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.LARGE
+				},
+				cmd: cmds.image,
+				extensionPoint: extensionPoints.INSERT_SECTION,
+				icon: icons.image,
+				sortOrder: 3,
+				title: this.#localizer('image'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.MEDIUM
+				},
+				cmd: cmds.image,
+				extensionPoint: extensionPoints.INSERT_MORE_MENU_MEDIA_SECTION,
+				icon: icons.image,
+				sortOrder: 3,
+				title: this.#localizer('image'),
+				type: menuItemTypes.MENU_ITEM
+			}
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -116,0 +152,0 @@ return !inlineLimited;

components/plugins/insert-code.js

 import '../overlay/insert-code/insert-code-overlay-content.js';
 import '../overlay/insert-code/insert-code-overlay-toolbar.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
+import { extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { formatCodeElement, getCodeColors } from '@brightspace-ui/core/helpers/prism.js';
 import { moveToBookmark, removeBookmark, setBookmark } from '../selection-helpers.js';
 import { cmds } from '../commands.js';
+import { icons } from '../../generated/icons.js';
 import { overlayThemes } from '../overlay/overlay.js';
@@ -75,3 +77,8 @@ import { requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
 export class InsertCodePlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -85,2 +92,15 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				cmd: cmds.insertCode,
+				extensionPoint: extensionPoints.INSERT_MORE_MENU_GENERAL_SECTION,
+				icon: icons['insert-code'],
+				sortOrder: 5,
+				title: this.#localizer('insertCode'),
+				type: menuItemTypes.MENU_ITEM
+			}
+		];
+	}
+
 	isAvailable(inlineLimited, context, pluginAvailabilityProps) {
@@ -87,0 +107,0 @@ return !inlineLimited && !context.noInsertCode && !pluginAvailabilityProps.noInsertCode;

components/plugins/isf.js

@@ -0,1 +1,2 @@
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { css, LitElement } from 'lit';
@@ -5,2 +6,3 @@ import { RequesterMixin, requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
 import { getComposedActiveElement } from '@brightspace-ui/core/helpers/focus.js';
+import { icons } from '../../generated/icons.js';
 import { openLegacyDialog } from '../lms-adapter.js';
@@ -28,3 +30,8 @@
 export class ISFPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -38,2 +45,47 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakPoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALL
+				},
+				cmd: cmds.isf,
+				extensionPoint: extensionPoints.INSERT_SECTION,
+				icon: icons['insert-stuff'],
+				sortOrder: 1,
+				title: this.#localizer('isf'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakPoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.SMALL
+				},
+				cmd: cmds.isf,
+				extensionPoint: extensionPoints.INSERT_MORE_MENU_MEDIA_SECTION,
+				icon: icons['insert-stuff'],
+				sortOrder: 1,
+				title: this.#localizer('isf'),
+				type: menuItemTypes.MENU_ITEM
+			},
+			{
+				cmd: cmds.isf,
+				extensionPoint: extensionPoints.INLINE_SECTION,
+				icon: icons['insert-stuff'],
+				sortOrder: 4,
+				title: this.#localizer('isf'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				cmd: cmds.isf,
+				extensionPoint: extensionPoints.INLINE_LIMITED_SECTION,
+				icon: icons['insert-stuff'],
+				sortOrder: 3,
+				title: this.#localizer('isf'),
+				type: buttonTypes.BUTTON
+			}
+		];
+	}
+
 	isAvailable(inlineLimited, context) {
@@ -40,0 +92,0 @@ return context.activeOrgEnrollment;

components/plugins/link.js

@@ -1,2 +0,2 @@
-import { cmds } from '../commands.js';
+import { cmds, d2lCmds } from '../commands.js';
 import { findComposedAncestor } from '@brightspace-ui/core/helpers/dom.js';
@@ -64,2 +64,6 @@ import { LinkDisplayContextMenuPlugin } from '../context-menu/link/link-display.js';
 		helpers.uiRegistry.registerContextMenu(LinkEditContextMenuPlugin);
+
+		if (!context.toolbarRefactor) return;
+
+		helpers.commandRegistry.registerWrappedCommand(d2lCmds.linkRemove, helpers.commandRegistry.builtInCommands.linkRemove);
 	}
@@ -66,0 +70,0 @@

components/plugins/preview.js

@@ -0,1 +1,2 @@
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { css, LitElement } from 'lit';
@@ -5,2 +6,3 @@ import { RequesterMixin, requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
 import { getComposedActiveElement } from '@brightspace-ui/core/helpers/focus.js';
+import { icons } from '../../generated/icons.js';
 import { openDialogWithParam } from '../lms-adapter.js';
@@ -11,3 +13,8 @@
 export class PreviewPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -18,5 +25,34 @@ return name;
 	get requiresLmsContext() {
-		return true;
+		return false;
 	}
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.preview,
+				extensionPoint: extensionPoints.VIEW_SECTION,
+				icon: icons.preview,
+				sortOrder: 3,
+				title: this.#localizer('preview'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.preview,
+				extensionPoint: extensionPoints.VIEW_MENU,
+				icon: icons.preview,
+				sortOrder: 1,
+				title: this.#localizer('preview'),
+				type: menuItemTypes.MENU_ITEM
+			},
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -27,2 +63,8 @@ return !inlineLimited;
 	registerPlugin(context, helpers) {
+		// No LMS context, so just wrap TinyMCE's preview command
+		if (context.toolbarRefactor && !context.hasActiveOrgEnrollment) {
+			helpers.commandRegistry.registerWrappedCommand(cmds.preview, helpers.commandRegistry.builtInCommands.preview);
+			return;
+		}
+
 		const previewAction = async() => {
@@ -29,0 +71,0 @@ const content = helpers.internalAPIWrapper.getContent();

components/plugins/quicklink.js

@@ -0,1 +1,2 @@
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { css, LitElement } from 'lit';
@@ -6,2 +7,3 @@ import { RequesterMixin, requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
 import { getIfrauClient } from '../lms-adapter.js';
+import { icons } from '../../generated/icons.js';
 
@@ -11,3 +13,8 @@ const name = 'd2l-quicklink';
 export class QuicklinkPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -21,2 +28,39 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.MEDIUM
+				},
+				cmd: cmds.quicklink,
+				extensionPoint: extensionPoints.INSERT_SECTION,
+				icon: icons.link,
+				sortOrder: 2,
+				title: this.#localizer('quicklink'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.MEDIUM
+				},
+				cmd: cmds.quicklink,
+				extensionPoint: extensionPoints.INSERT_MORE_MENU_MEDIA_SECTION,
+				icon: icons.link,
+				sortOrder: 2,
+				title: this.#localizer('quicklink'),
+				type: menuItemTypes.MENU_ITEM
+			},
+			{
+				cmd: cmds.quicklink,
+				extensionPoint: extensionPoints.INLINE_LIMITED_SECTION,
+				icon: icons.link,
+				sortOrder: 4,
+				title: this.#localizer('quicklink'),
+				type: buttonTypes.BUTTON
+			}
+		];
+	}
+
 	isAvailable() {
@@ -23,0 +67,0 @@ return true;

components/plugins/source-code.js

 import '@brightspace-ui/core/components/button/button.js';
 import '@brightspace-ui/core/components/colors/colors.js';
 import '@brightspace-ui/core/components/dialog/dialog.js';
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { css, html, LitElement } from 'lit';
 import { AsyncStateEvent } from '@brightspace-ui/core/helpers/asyncStateEvent.js';
 import { cmds } from '../commands.js';
+import { icons } from '../../generated/icons.js';
 import { Localizer } from '../../localizer.js';
@@ -17,3 +19,8 @@ import { requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js';
 export class SourceCodePlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -27,2 +34,31 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.sourceCode,
+				extensionPoint: extensionPoints.VIEW_SECTION,
+				icon: icons.sourcecode,
+				sortOrder: 4,
+				title: this.#localizer('source'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.sourceCode,
+				extensionPoint: extensionPoints.VIEW_MENU,
+				icon: icons.sourcecode,
+				sortOrder: 2,
+				title: this.#localizer('source'),
+				type: menuItemTypes.MENU_ITEM
+			},
+		];
+	}
+
 	isAvailable(inlineLimited, context, pluginAvailabilityProps) {
@@ -29,0 +65,0 @@ return !inlineLimited && (pluginAvailabilityProps.sourceEditable || context.sourceEditable);

components/plugins/wordcount.js

@@ -8,2 +8,3 @@ import '@brightspace-ui/core/components/button/button.js';
 import '@brightspace-ui/core/components/menu/menu-item.js';
+import { breakPoints, breakPointTypes, buttonTypes, extensionPoints, menuItemTypes } from '../toolbar/item-params-internal.js';
 import { countAll, countCharacters, countWords } from '../../wordcount/wordcount.js';
@@ -14,2 +15,3 @@ import { css, html, LitElement } from 'lit';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
+import { icons } from '../../generated/icons.js';
 import { Localizer } from '../../localizer.js';
@@ -28,3 +30,8 @@ import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
 export class WordCountPlugin {
+	#localizer;
 
+	constructor(localizer) {
+		this.#localizer = localizer;
+	}
+
 	get name() {
@@ -38,2 +45,31 @@ return name;
 
+	get toolbarItems() {
+		return [
+			{
+				breakpoint: {
+					type: breakPointTypes.ABOVE,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.wordCount,
+				extensionPoint: extensionPoints.VIEW_SECTION,
+				icon: icons['word-count'],
+				sortOrder: 2,
+				title: this.#localizer('wordcount'),
+				type: buttonTypes.BUTTON
+			},
+			{
+				breakpoint: {
+					type: breakPointTypes.BELOW,
+					value: breakPoints.SMALLER
+				},
+				cmd: cmds.wordCount,
+				extensionPoint: extensionPoints.VIEW_MENU,
+				icon: icons['word-count'],
+				sortOrder: 4,
+				title: this.#localizer('wordcount'),
+				type: menuItemTypes.MENU_ITEM
+			},
+		];
+	}
+
 	isAvailable(inlineLimited) {
@@ -40,0 +76,0 @@ return !inlineLimited;

package.json

 {
   "name": "@brightspace-ui/htmleditor",
   "description": "An HTML editor that integrates with Brightspace",
-  "version": "2.89.2",
+  "version": "2.89.3",
   "type": "module",
@@ -6,0 +6,0 @@ "repository": "https://github.com/BrightspaceUI/htmleditor.git",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2147718

increased by1.91%

Number of package files

132

increased by3.94%

Lines of code

40674

increased by3.43%

No dependency changes