@bloklabs/angular 1.2.5 → 1.3.0

package/fesm2022/bloklabs-angular.mjs

@@ -182,7 +182,8 @@ class BlokContentDirective {
     /** Emits the live Blok instance once it is ready, after `instance` is populated. */
     ready = new EventEmitter();
     /** The live Blok instance, or null before `isReady` resolves / after destroy. */
-    instance = signal(null, ...(ngDevMode ? [{ debugName: "instance" }] : []));
+    instance = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
     /** The editor created by the most recent construction; used as the staleness key. */
     current = null;
     destroyed = false;
@@ -250,10 +251,10 @@ class BlokContentDirective {
         this.registry = undefined;
         this.instance.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BlokContentDirective, isStandalone: true, selector: "[blokContent]", inputs: { config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: BlokContentDirective, isStandalone: true, selector: "[blokContent]", inputs: { config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[blokContent]',
@@ -1769,6 +1770,11 @@ const DATA_ATTR = {
     rtl: 'data-blok-rtl',
     /** Editor content width mode (present with value "full" for wide mode; absent = narrow) */
     width: 'data-blok-width',
+    /** Present on the editor wrapper when config.style.nativeSelection is true.
+     *  Public styling hook — disables Blok's ::selection repaint (preflight.css)
+     *  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',
     // ============================================
     // Drag and Drop
     // ============================================
@@ -2075,7 +2081,8 @@ class BlokEditorComponent {
     defaults = inject(BLOK_DEFAULT_CONFIG, { optional: true }) ?? {};
     contentQuery;
     /** Signal bridge for the @ViewChild directive so effects react to its arrival. */
-    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    content = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     /**
      * Output half of two-way `[(data)]`. Emits the editor's serialized content on
      * every change. Wiring the core `onSave` callback is gated on this being
@@ -2110,28 +2117,44 @@ class BlokEditorComponent {
     // ---- Reactive inputs (signal-backed setters; synced in place, never recreate) ----
     // Default undefined (not false) so an unset input falls back to a provideBlok
     // default; the readOnly effect / buildConfig coerce undefined to false.
-    readOnly$ = signal(undefined, ...(ngDevMode ? [{ debugName: "readOnly$" }] : []));
+    readOnly$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly$" }] : /* istanbul ignore next */ []));
     set readOnly(value) {
         this.readOnly$.set(value);
     }
-    theme$ = signal(undefined, ...(ngDevMode ? [{ debugName: "theme$" }] : []));
+    theme$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme$" }] : /* istanbul ignore next */ []));
     set theme(value) {
         this.theme$.set(value);
     }
-    width$ = signal(undefined, ...(ngDevMode ? [{ debugName: "width$" }] : []));
+    width$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width$" }] : /* istanbul ignore next */ []));
     set width(value) {
         this.width$.set(value);
     }
-    placeholder$ = signal(undefined, ...(ngDevMode ? [{ debugName: "placeholder$" }] : []));
+    placeholder$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder$" }] : /* istanbul ignore next */ []));
     set placeholder(value) {
         this.placeholder$.set(value);
     }
-    autofocus$ = signal(false, ...(ngDevMode ? [{ debugName: "autofocus$" }] : []));
+    /**
+     * Theme tokens. Construction-only config forced hosts with a live light/dark
+     * toggle to recreate the editor or hand-write the global stylesheet Blok
+     * already injects; this drives the runtime `tokens` API instead.
+     */
+    styleTokens$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleTokens$" }] : /* istanbul ignore next */ []));
+    set styleTokens(value) {
+        this.styleTokens$.set(value);
+    }
+    autofocus$ = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autofocus$" }] : /* istanbul ignore next */ []));
     set autofocus(value) {
         this.autofocus$.set(value);
     }
     // ---- Reactive content (seeds construction, then re-renders on change) ----
-    data$ = signal(undefined, ...(ngDevMode ? [{ debugName: "data$" }] : []));
+    data$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data$" }] : /* istanbul ignore next */ []));
     set data(value) {
         this.data$.set(value);
     }
@@ -2151,6 +2174,8 @@ class BlokEditorComponent {
      * no-op, so it won't clobber the caret. Renders are serialized via `renderChain`.
      */
     lastRenderedData;
+    /** Last token set pushed through `tokens.set`, for deep-equal deduping. */
+    appliedTokens;
     seededEditor = null;
     renderChain = Promise.resolve();
     /** Registered by `ControlValueAccessor.registerOnChange` (Angular forms). */
@@ -2173,7 +2198,8 @@ class BlokEditorComponent {
         });
     };
     /** Live Blok instance, or null until `isReady` resolves / after destroy. */
-    instance = computed(() => this.content()?.instance() ?? null, ...(ngDevMode ? [{ debugName: "instance" }] : []));
+    instance = computed(() => this.content()?.instance() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
     /** Guards `ready` to one emission per editor instance. */
     lastReadyInstance = null;
     /**
@@ -2282,6 +2308,15 @@ class BlokEditorComponent {
                 editor.placeholder.set(placeholder);
             }
         });
+        effect(() => {
+            const editor = this.instance();
+            const tokens = this.styleTokens$() ?? this.config?.style?.tokens;
+            if (!editor || tokens === undefined || deepEqual(tokens, this.appliedTokens)) {
+                return;
+            }
+            this.appliedTokens = { ...tokens };
+            editor.tokens.set(tokens);
+        });
         effect(() => {
             const editor = this.instance();
             if (editor && this.autofocus$()) {
@@ -2361,8 +2396,8 @@ class BlokEditorComponent {
     setDisabledState(isDisabled) {
         this.readOnly$.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: BlokEditorComponent, isStandalone: true, selector: "blok-editor", inputs: { onBeforeRender: "onBeforeRender", onBeforePaste: "onBeforePaste", readOnly: "readOnly", theme: "theme", width: "width", placeholder: "placeholder", autofocus: "autofocus", data: "data", tools: "tools", config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready", dataChange: "dataChange", save: "save", change: "change", afterRender: "afterRender", themeChange: "themeChange", blocksRendered: "blocksRendered", blockRendered: "blockRendered" }, providers: [
+    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", readOnly: "readOnly", theme: "theme", width: "width", placeholder: "placeholder", styleTokens: "styleTokens", autofocus: "autofocus", data: "data", tools: "tools", 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),
@@ -2370,7 +2405,7 @@ class BlokEditorComponent {
             },
         ], viewQueries: [{ propertyName: "contentQuery", first: true, predicate: BlokContentDirective, descendants: true }], exportAs: ["blok"], ngImport: i0, template: `<div blokContent [config]="buildConfig()" [recreateKey]="recreateKey"></div>`, isInline: true, dependencies: [{ kind: "directive", type: BlokContentDirective, selector: "[blokContent]", inputs: ["config", "recreateKey"], outputs: ["ready"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'blok-editor',
@@ -2418,6 +2453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], styleTokens: [{
+                type: Input
             }], autofocus: [{
                 type: Input
             }], data: [{
@@ -2487,8 +2524,10 @@ function createAngularBlock(spec) {
             this.pointerDrag = () => api?.blocks?.isPointerDragActive === true;
             this.mirror = fillDefaults(spec.propSchema, (options.data ?? {}));
             this.lastRendered = this.mirror;
-            this.dataSig = signal(this.mirror, ...(ngDevMode ? [{ debugName: "dataSig" }] : []));
-            this.readOnlySig = signal(options.readOnly, ...(ngDevMode ? [{ debugName: "readOnlySig" }] : []));
+            this.dataSig = signal(this.mirror, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "dataSig" }] : /* istanbul ignore next */ []));
+            this.readOnlySig = signal(options.readOnly, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "readOnlySig" }] : /* istanbul ignore next */ []));
             this.ctx = {
                 data: this.dataSig.asReadonly(),
                 commit: this.commit,
@@ -2657,13 +2696,15 @@ const BLOCK_CHANGED_EVENT = 'block changed';
 function injectBlocks(editor) {
     // Bumped on every `block changed`; the shared API's read methods touch it (via
     // the onRead seam) so template/computed reads stay reactive.
-    const version = signal(0, ...(ngDevMode ? [{ debugName: "version" }] : []));
+    const version = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
     const touch = () => {
         version();
     };
     // The API bound to the CURRENT editor; EMPTY_API while null. A signal so the
     // facade's reads track the editor-identity swap.
-    const bound = signal(EMPTY_API, ...(ngDevMode ? [{ debugName: "bound" }] : []));
+    const bound = signal(EMPTY_API, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bound" }] : /* istanbul ignore next */ []));
     // One subscription record (no `let` reassignment), re-bound on editor change.
     const sub = { editor: null, handler: null };
     const unsubscribe = () => {