@bloklabs/angular 1.10.1 → 1.12.0

package/fesm2022/bloklabs-angular.mjs

@@ -2247,6 +2247,9 @@ const DATA_ATTR = {
      *  inserting blocks into the DOM; removed while a re-render is in flight.
      *  Acts as a stable render-readiness gate for consumers (e.g. E2E waits). */
     rendered: 'data-blok-rendered',
+    /** Blok version number stamped on the editor wrapper (e.g. '1.10.0', 'dev').
+     *  Consumed by browser extensions to identify the running version. */
+    version: 'data-blok-version',
     // ============================================
     // Block Identifiers
     // ============================================
@@ -2293,6 +2296,11 @@ const DATA_ATTR = {
      *  Public styling hook — drives the gutter auto-collapse (the gutter
      *  exists solely to house the toolbar's +/⠿ controls). */
     toolbarHidden: 'data-blok-toolbar-hidden',
+    /** Which gutter the floating block controls occupy: 'left' (default,
+     *  inline-start) or 'right' (inline-end). Written on the editor wrapper from
+     *  config.toolbarPosition and kept in sync by `toolbar.setPosition()`.
+     *  Public styling hook — drives the gutter swap and the actions-bar side. */
+    toolbarPosition: 'data-blok-toolbar-position',
     // ============================================
     // Editor Modes
     // ============================================
@@ -2307,6 +2315,11 @@ const DATA_ATTR = {
      *  and re-points the fake-background highlight at the UA Highlight color
      *  (colors.css), so selection falls back to native/host-defined colors. */
     nativeSelection: 'data-blok-native-selection',
+    /** Present on the editor wrapper while a cross-block TEXT selection is painted.
+     *  Suppresses the engine's own ::selection paint (main.css) so the
+     *  ::highlight() sub-ranges are the only thing drawn — Chromium and Firefox
+     *  paint such a range natively too and would otherwise double it up. */
+    crossSelection: 'data-blok-cross-selection',
     // ============================================
     // Drag and Drop
     // ============================================
@@ -2323,6 +2336,10 @@ const DATA_ATTR = {
     // ============================================
     /** Toolbar element */
     toolbar: 'data-blok-toolbar',
+    /** The floating block-controls bar (plus button + drag/settings handle)
+     *  inside the toolbar. Public styling hook — the side it docks to is driven
+     *  from the wrapper's `data-blok-toolbar-position`. */
+    toolbarActions: 'data-blok-toolbar-actions',
     /** Settings toggler button */
     settingsToggler: 'data-blok-settings-toggler',
     /** Toolbox is open */
@@ -2924,10 +2941,11 @@ const BlockChildrenMounted = 'block:childrenMounted';
  * `BlokEditor`). Delegates instance lifecycle to an internal `BlokContentDirective`
  * and layers the typed reactive input/output API on top.
  *
- * Reactive inputs (`readOnly`, `hideToolbar`, `inlineToolbar`, `theme`,
- * `width`, `placeholder`, `autofocus`, `styleTokens`, `i18n`, `data`) are
- * synced in place after mount via effects — `hideToolbar` through
- * `editor.toolbar.setHidden()`, `inlineToolbar` through
+ * Reactive inputs (`readOnly`, `hideToolbar`, `toolbarPosition`,
+ * `inlineToolbar`, `theme`, `width`, `placeholder`, `autofocus`, `styleTokens`,
+ * `i18n`, `data`) are synced in place after mount via effects — `hideToolbar`
+ * through `editor.toolbar.setHidden()`, `toolbarPosition` through
+ * `editor.toolbar.setPosition()`, `inlineToolbar` through
  * `editor.tools.setInlineToolbar()` (content-compared),
  * `styleTokens` through `editor.tokens.set()` (replace semantics),
  * `i18n` through `editor.i18n.update()` (deep-equal–deduped; seeded at
@@ -3000,6 +3018,11 @@ class BlokEditorComponent {
     set hideToolbar(value) {
         this.hideToolbar$.set(value);
     }
+    toolbarPosition$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarPosition$" }] : /* istanbul ignore next */ []));
+    set toolbarPosition(value) {
+        this.toolbarPosition$.set(value);
+    }
     inlineToolbar$ = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inlineToolbar$" }] : /* istanbul ignore next */ []));
     set inlineToolbar(value) {
@@ -3198,6 +3221,10 @@ class BlokEditorComponent {
         if (hideToolbar !== undefined) {
             cfg.hideToolbar = hideToolbar;
         }
+        const toolbarPosition = this.toolbarPosition$();
+        if (toolbarPosition !== undefined) {
+            cfg.toolbarPosition = toolbarPosition;
+        }
         const inlineToolbar = this.inlineToolbar$();
         if (inlineToolbar !== undefined) {
             cfg.inlineToolbar = inlineToolbar;
@@ -3378,6 +3405,13 @@ class BlokEditorComponent {
                 editor.toolbar.setHidden(hideToolbar);
             }
         });
+        effect(() => {
+            const editor = this.instance();
+            const toolbarPosition = this.toolbarPosition$();
+            if (editor && toolbarPosition !== undefined) {
+                editor.toolbar.setPosition(toolbarPosition);
+            }
+        });
         // Content-compared (not identity): a new array with the same tool names is
         // a no-op, so template-inline array literals don't thrash the assignment.
         effect(() => {
@@ -3538,7 +3572,7 @@ class BlokEditorComponent {
         this.readOnly$.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: BlokEditorComponent, isStandalone: true, selector: "blok-editor", inputs: { onBeforeRender: "onBeforeRender", onBeforePaste: "onBeforePaste", onError: "onError", readOnly: "readOnly", hideToolbar: "hideToolbar", inlineToolbar: "inlineToolbar", theme: "theme", width: "width", placeholder: "placeholder", styleTokens: "styleTokens", i18n: "i18n", autofocus: "autofocus", data: "data", tools: "tools", migrations: "migrations", config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready", dataChange: "dataChange", save: "save", change: "change", afterRender: "afterRender", themeChange: "themeChange", blocksRendered: "blocksRendered", blockRendered: "blockRendered" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: BlokEditorComponent, isStandalone: true, selector: "blok-editor", inputs: { onBeforeRender: "onBeforeRender", onBeforePaste: "onBeforePaste", onError: "onError", readOnly: "readOnly", hideToolbar: "hideToolbar", toolbarPosition: "toolbarPosition", inlineToolbar: "inlineToolbar", theme: "theme", width: "width", placeholder: "placeholder", styleTokens: "styleTokens", i18n: "i18n", autofocus: "autofocus", data: "data", tools: "tools", migrations: "migrations", config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready", dataChange: "dataChange", save: "save", change: "change", afterRender: "afterRender", themeChange: "themeChange", blocksRendered: "blocksRendered", blockRendered: "blockRendered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BlokEditorComponent),
@@ -3592,6 +3626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }], hideToolbar: [{
                 type: Input
+            }], toolbarPosition: [{
+                type: Input
             }], inlineToolbar: [{
                 type: Input
             }], theme: [{