feat(slots): above-toolbar workplace slot (slots.above)

A new slot that always stays ABOVE the toolbar — for presence bars, banners
and similar chrome (the spot Google Docs uses for its avatars row). The
toolbar box used to re-pin itself as the container's first child on every
toolbarContainer access; it now skips children flagged with
data-jodit-above-toolbar. Empty slot renders as nothing; non-empty gets the
standard border-bottom.

Author: eric-mallac

src/core/view/view-with-toolbar.ts

@@ -49,15 +49,33 @@ export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 			return resolveElement(this.o.toolbar, this.o.shadowRoot || this.od);
 		}
 
-		this.o.toolbar &&
-			Dom.appendChildFirst(
-				this.container,
-				this.__defaultToolbarContainer
-			);
+		this.o.toolbar && this.__appendToolbarBox();
 
 		return this.__defaultToolbarContainer;
 	}
 
+	/**
+	 * Keep the toolbar box as the first child of the container, except that
+	 * children flagged with `data-jodit-above-toolbar` (e.g. the `above`
+	 * workplace slot used for presence bars and banners) stay above it.
+	 */
+	private __appendToolbarBox(): void {
+		const box = this.__defaultToolbarContainer;
+		let anchor = this.container.firstElementChild;
+
+		while (
+			anchor &&
+			anchor !== box &&
+			anchor.hasAttribute('data-jodit-above-toolbar')
+		) {
+			anchor = anchor.nextElementSibling;
+		}
+
+		if (anchor !== box) {
+			this.container.insertBefore(box, anchor);
+		}
+	}
+
 	/**
 	 * Change panel container
 	 */

src/jodit.ts

@@ -1417,6 +1417,13 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 
 		const SLOT = 'workplace-slot';
 
+		// A slot that always stays ABOVE the toolbar (presence bars, banners…).
+		// The `data-jodit-above-toolbar` attribute tells ViewWithToolbar to keep
+		// the toolbar box below it when (re)attaching the toolbar container.
+		const aboveSlot = this.c.div(this.getFullElName(SLOT, 'above'), NOEDIT);
+		aboveSlot.setAttribute('data-jodit-above-toolbar', '');
+		Dom.appendChildFirst(container, aboveSlot);
+
 		const topSlot = this.c.div(this.getFullElName(SLOT, 'top'), NOEDIT);
 
 		container.appendChild(topSlot);
@@ -1468,6 +1475,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 			container,
 			workplace,
 			slots: {
+				above: aboveSlot,
 				top: topSlot,
 				bottom: bottomPanel,
 				center: centerSlot,

src/styles/slots.less

@@ -4,6 +4,7 @@
 	--slot-left-width: auto;
 	--slot-right-width: auto;
 
+	.jodit-jodit__workplace-slot_above_true,
 	.jodit-jodit__workplace-slot_top_true,
 	.jodit-jodit__workplace-slot_bottom_true {
 		min-width: 0;
@@ -14,6 +15,11 @@
 		}
 	}
 
+	// Sits above the toolbar (presence bars, banners).
+	.jodit-jodit__workplace-slot_above_true:not(:empty) {
+		border-bottom: 1px solid var(--color-border, transparent);
+	}
+
 	.jodit-jodit__workplace-slot_top_true {
 		height: var(--slot-top-height);
 

src/styles/slots.test.js

@@ -9,6 +9,7 @@ describe('Test editor slots system', function () {
 		it('Should create all slot elements', function () {
 			const editor = getJodit();
 
+			expect(editor.currentPlace.slots.above).is.not.null;
 			expect(editor.currentPlace.slots.top).is.not.null;
 			expect(editor.currentPlace.slots.bottom).is.not.null;
 			expect(editor.currentPlace.slots.center).is.not.null;
@@ -42,6 +43,32 @@ describe('Test editor slots system', function () {
 			).is.true;
 		});
 
+		it('Should keep the above slot ABOVE the toolbar box', function () {
+			const editor = getJodit();
+
+			const above = editor.currentPlace.slots.above;
+			expect(above.hasAttribute('data-jodit-above-toolbar')).is.true;
+			expect(
+				above.classList.contains(
+					'jodit-jodit__workplace-slot_above_true'
+				)
+			).is.true;
+
+			// The toolbar box must come AFTER the above slot in the container…
+			const box = editor.toolbarContainer;
+			expect(box.parentElement).equals(editor.container);
+			expect(
+				above.compareDocumentPosition(box) &
+					Node.DOCUMENT_POSITION_FOLLOWING
+			).is.above(0);
+
+			// …and stay there even after the getter re-attaches the box.
+			above.appendChild(editor.c.element('div'));
+			const boxAgain = editor.toolbarContainer;
+			expect(boxAgain).equals(box);
+			expect(above.nextElementSibling).equals(box);
+		});
+
 		it('Should hide empty slots', function () {
 			const editor = getJodit();
 

src/types/jodit.d.ts

@@ -31,6 +31,8 @@ interface IWorkPlace {
 	container: HTMLDivElement;
 	workplace: HTMLDivElement;
 	slots: {
+		/** Sits above the toolbar (presence bars, banners). */
+		above: HTMLDivElement;
 		top: HTMLDivElement;
 		bottom: HTMLDivElement;
 		center: HTMLDivElement;