u2ui 1.5.4 → 1.5.8

package/js/rte/src/ui/toolbar.js

@@ -8,7 +8,6 @@ export class Toolbar {
     #surfaceController = null;
     #surface = null;
     #commands = null;
-    #dismissed = false;
     #connected = true;
 
     constructor(core, element, {commands, place = null} = {}) {
@@ -39,8 +38,6 @@ export class Toolbar {
         }, listen);
         element.addEventListener('click', this.#click, listen);
         element.addEventListener('change', this.#change, listen);
-        core.root.addEventListener('focusin', this.#focusIn, {...listen, capture: true});
-        core.root.addEventListener('focusout', this.#focusOut, {...listen, capture: true});
         if (!element.hasAttribute('role')) element.setAttribute('role', 'toolbar');
         element.hidden = true;
         // Focus landing in a control is still the editor's: without this the core
@@ -66,12 +63,16 @@ export class Toolbar {
         const commands = surface?.connected ? this.#resolve(surface) : null;
         if (commands != null && !registry(commands)) throw new TypeError('Toolbar commands must resolve to a command registry');
         this.#commands = commands || null;
-        const active = !!commands && !this.#dismissed && surface.config.ui === 'roaming'
-            && visibleForSelection(surface);
-        const names = active ? configured(surface.element) : null;
+        // One computed style for the settings only this toolbar reads: asking for
+        // it three times is three style resolutions on a path every keystroke
+        // goes down. The shared ones keep coming from the surface, defaults and
+        // validation included.
+        const style = commands && getComputedStyle(surface.element);
+        const active = !!commands && surface.config.ui === 'roaming' && visibleForSelection(surface, style);
+        const names = active ? configured(style) : null;
         // A host may prefer a toolbar that only ever shows what it can do, at
         // the cost of a shape that moves with the caret.
-        const hiding = active && unavailable(surface.element) === 'hide';
+        const hiding = active && setting(style, 'toolbar-unavailable') === 'hide';
         const detail = surface?.selection ? {range: surface.selection.range()} : undefined;
         let visible = 0;
         for (const item of this.#items()) {
@@ -138,7 +139,6 @@ export class Toolbar {
         this.#surfaceController = null;
         this.#surface = null;
         this.#commands = null;
-        this.#dismissed = false;
         display(this.#element, false);
         this.#connected = false;
     }
@@ -154,7 +154,6 @@ export class Toolbar {
         }
         this.#surfaceController?.abort();
         this.#surface = surface || null;
-        this.#dismissed = false;
         this.#surfaceController = null;
         if (surface) {
             const Controller = this.#element.ownerDocument.defaultView.AbortController;
@@ -194,18 +193,6 @@ export class Toolbar {
     #disconnect = () => this.#activate(null);
     #refresh = () => this.refresh();
 
-    #focusIn = event => {
-        if (!this.#dismissed || !this.#ownsFocus(event.composedPath()[0])) return;
-        this.#dismissed = false;
-        this.refresh();
-    };
-
-    #focusOut = event => {
-        if (!this.#ownsFocus(event.composedPath()[0]) || this.#ownsFocus(event.relatedTarget)) return;
-        this.#dismissed = true;
-        display(this.#element, false);
-    };
-
     // The toolbar is chrome: pointing at it must never move the editor's
     // selection, not even at a control that currently has nothing to run.
     // Fields keep their own pointer behaviour so they can be opened and typed in.
@@ -233,18 +220,6 @@ export class Toolbar {
         }
         this.#run(command, {value: name});
     };
-
-
-    #ownsFocus(node) {
-        if (!node || !this.#surface) return false;
-        // A `focusout` listener outside the toolbar's shadow tree sees its
-        // related target retargeted to that tree's host, so focus moving into a
-        // control of its own would otherwise read as focus leaving.
-        const root = this.#element.getRootNode();
-        if (root.host && node === root.host) return true;
-        return node === this.#element || this.#element.contains(node)
-            || node === this.#surface.element || this.#surface.element.contains(node);
-    }
 }
 
 function registry(value) {
@@ -254,18 +229,18 @@ function registry(value) {
         && typeof value?.run === 'function';
 }
 
-function configured(element) {
-    const value = getComputedStyle(element).getPropertyValue('--u2-rte-toolbar').trim();
-    return value ? new Set(value.split(/[\s,]+/).filter(Boolean)) : null;
+function setting(style, name) {
+    return style.getPropertyValue(`--u2-rte-${name}`).trim();
 }
 
-function unavailable(element) {
-    return getComputedStyle(element).getPropertyValue('--u2-rte-toolbar-unavailable').trim();
+function configured(style) {
+    const value = setting(style, 'toolbar');
+    return value ? new Set(value.split(/[\s,]+/).filter(Boolean)) : null;
 }
 
-function visibleForSelection(surface) {
-    const value = getComputedStyle(surface.element).getPropertyValue('--u2-rte-toolbar-when').trim();
-    return value !== 'selection' || !!surface.selection && !surface.selection.collapsed;
+function visibleForSelection(surface, style) {
+    return setting(style, 'toolbar-when') !== 'selection'
+        || !!surface.selection && !surface.selection.collapsed;
 }
 
 function state(item, value, disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.4",
+  "version": "1.5.8",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",