@bloklabs/angular 1.3.0 → 1.4.0

package/package.json

@@ -1,14 +1,34 @@
 {
   "name": "@bloklabs/angular",
-  "version": "1.3.0",
-  "description": "Angular bindings for the Blok editor (APF partial-Ivy bundle)",
+  "version": "1.4.0",
+  "description": "Angular block editor — official Angular bindings for Blok, the headless Notion-like rich text editor. Standalone components that render blocks and save to JSON (APF partial-Ivy bundle).",
   "license": "Apache-2.0",
   "author": "JackUait",
+  "homepage": "https://blokeditor.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/JackUait/blok.git",
     "directory": "packages/angular"
   },
+  "bugs": {
+    "url": "https://github.com/JackUait/blok/issues"
+  },
+  "keywords": [
+    "blok",
+    "angular",
+    "angular-component",
+    "block-editor",
+    "rich-text-editor",
+    "wysiwyg",
+    "editor",
+    "notion",
+    "notion-like",
+    "headless",
+    "block-based",
+    "contenteditable",
+    "json",
+    "typescript"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -16,7 +36,7 @@
     "@angular/common": ">=20 <23",
     "@angular/core": ">=20 <23",
     "@angular/forms": ">=20 <23",
-    "@bloklabs/core": "1.3.0"
+    "@bloklabs/core": "1.4.0"
   },
   "module": "fesm2022/bloklabs-angular.mjs",
   "typings": "./index.d.ts",

package/types/bloklabs-angular.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, EventEmitter, OnDestroy, InjectionToken, EnvironmentProviders, Type, Signal } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnDestroy, InjectionToken, EnvironmentProviders, Type, Signal, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { BlokConfig, EditorWidth, Blok, OutputData, API, BlockMutationEvent, ResolvedTheme, BlocksRenderedPayload, BlockRenderedPayload, OutputBlockData, ThemeMode, LooseOutputData, BlockToolData, BlockTuneData, MarkdownImportConfig, ToolboxConfig, BlockAPI, BlockToolConstructorOptions } from '@bloklabs/core';
 
@@ -18,8 +18,16 @@ type BlokAngularConfig = Omit<BlokConfig, 'holder'> & {
  * `BlokEditor`). Delegates instance lifecycle to an internal `BlokContentDirective`
  * and layers the typed reactive input/output API on top.
  *
- * Reactive inputs (`readOnly`, `theme`, `width`, `placeholder`, `autofocus`) are
- * synced in place after mount via effects; everything else seeds construction.
+ * 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
+ * `editor.tools.setInlineToolbar()` (content-compared),
+ * `styleTokens` through `editor.tokens.set()` (replace semantics),
+ * `i18n` through `editor.i18n.update()` (deep-equal–deduped; seeded at
+ * construction so the locale resolves during boot) and `data`
+ * through `editor.render()` (deep-equal–deduped); everything else seeds
+ * construction.
  *
  * Implementation note: classic `@Input()`/`@ViewChild()` decorators are used
  * (not signal `input()`/`viewChild()`) for JIT compatibility — see
@@ -68,7 +76,11 @@ declare class BlokEditorComponent implements AfterViewInit, ControlValueAccessor
      */
     onBeforePaste?: (html: string) => string | null;
     private readonly readOnly$;
-    set readOnly(value: boolean | undefined);
+    set readOnly(value: BlokConfig['readOnly'] | undefined);
+    private readonly hideToolbar$;
+    set hideToolbar(value: boolean | undefined);
+    private readonly inlineToolbar$;
+    set inlineToolbar(value: boolean | string[] | undefined);
     private readonly theme$;
     set theme(value: ThemeMode | undefined);
     private readonly width$;
@@ -82,6 +94,15 @@ declare class BlokEditorComponent implements AfterViewInit, ControlValueAccessor
      */
     private readonly styleTokens$;
     set styleTokens(value: Record<string, string> | undefined);
+    /**
+     * Locale, host message overrides and text direction. `config.i18n` was
+     * consumed once at boot, so a host driving a language switcher had to
+     * recreate the editor (losing caret, focus and undo stack) to relabel the
+     * UI; this drives the runtime `i18n.update` API instead. `defaultLocale` is
+     * not forwarded — it only affects the INITIAL locale resolution.
+     */
+    private readonly i18n$;
+    set i18n(value: BlokConfig['i18n'] | undefined);
     private readonly autofocus$;
     set autofocus(value: boolean | undefined);
     private readonly data$;
@@ -89,7 +110,7 @@ declare class BlokEditorComponent implements AfterViewInit, ControlValueAccessor
     tools?: BlokConfig['tools'];
     /**
      * Escape hatch: a full config object for keys without a dedicated input
-     * (i18n, sanitizer, minHeight, inlineToolbar, …). Layered between provideBlok
+     * (sanitizer, minHeight, …). Layered between provideBlok
      * defaults and the discrete inputs.
      */
     config?: Partial<BlokAngularConfig>;
@@ -103,6 +124,12 @@ declare class BlokEditorComponent implements AfterViewInit, ControlValueAccessor
     private lastRenderedData?;
     /** Last token set pushed through `tokens.set`, for deep-equal deduping. */
     private appliedTokens?;
+    /** Last i18n config pushed through `i18n.update`, for deep-equal deduping. */
+    private appliedI18n?;
+    /** Editor instance the i18n baseline above belongs to. */
+    private i18nAppliedFor;
+    /** Last value pushed through `tools.setInlineToolbar`, for content-compare deduping. */
+    private appliedInlineToolbar?;
     private seededEditor;
     private renderChain;
     /** Registered by `ControlValueAccessor.registerOnChange` (Angular forms). */
@@ -141,7 +168,7 @@ declare class BlokEditorComponent implements AfterViewInit, ControlValueAccessor
     /** Form disabled state maps to the editor's read-only mode (via the readOnly effect). */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BlokEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BlokEditorComponent, "blok-editor", ["blok"], { "onBeforeRender": { "alias": "onBeforeRender"; "required": false; }; "onBeforePaste": { "alias": "onBeforePaste"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "styleTokens": { "alias": "styleTokens"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "data": { "alias": "data"; "required": false; }; "tools": { "alias": "tools"; "required": false; }; "config": { "alias": "config"; "required": false; }; "recreateKey": { "alias": "recreateKey"; "required": false; }; }, { "ready": "ready"; "dataChange": "dataChange"; "save": "save"; "change": "change"; "afterRender": "afterRender"; "themeChange": "themeChange"; "blocksRendered": "blocksRendered"; "blockRendered": "blockRendered"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BlokEditorComponent, "blok-editor", ["blok"], { "onBeforeRender": { "alias": "onBeforeRender"; "required": false; }; "onBeforePaste": { "alias": "onBeforePaste"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "hideToolbar": { "alias": "hideToolbar"; "required": false; }; "inlineToolbar": { "alias": "inlineToolbar"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "styleTokens": { "alias": "styleTokens"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "data": { "alias": "data"; "required": false; }; "tools": { "alias": "tools"; "required": false; }; "config": { "alias": "config"; "required": false; }; "recreateKey": { "alias": "recreateKey"; "required": false; }; }, { "ready": "ready"; "dataChange": "dataChange"; "save": "save"; "change": "change"; "afterRender": "afterRender"; "themeChange": "themeChange"; "blocksRendered": "blocksRendered"; "blockRendered": "blockRendered"; }, never, never, true, never>;
 }
 
 /**
@@ -648,6 +675,47 @@ declare function createAngularBlock<Data = BlockToolData>(spec: CreateAngularBlo
  */
 declare function injectBlocks(editor: Signal<Blok | null>): UseBlocksApi;
 
+/** How the caller names the DOM scope to observe. */
+type BlokReadyScope = (() => Element | ElementRef<Element> | null | undefined) | ElementRef<Element> | Element | null;
+/** Options accepted by {@link injectBlokReady}. */
+interface InjectBlokReadyOptions {
+    /**
+     * Restrict the wait to editors mounted inside this element. Accepts an
+     * element, an `ElementRef`, or a getter/signal returning either — the getter
+     * form lets you pass `() => this.scopeRef?.nativeElement` from a field
+     * initializer, before the view exists. It is re-read on every readiness
+     * change.
+     *
+     * Omit it to observe every editor on the page. Passing it while it still
+     * resolves to null reports NOT ready — an unresolved scope must never fall
+     * back to the page-global one.
+     */
+    within?: BlokReadyScope;
+    /**
+     * `'ready'` (default) settles when each editor has finished booting.
+     * `'rendered'` also waits for its content to be in the DOM and re-arms on
+     * every post-boot re-render.
+     */
+    settleOn?: 'ready' | 'rendered';
+}
+/**
+ * Angular factory exposing the live readiness of the Blok editors in a DOM
+ * scope as a boolean signal.
+ *
+ * The readiness logic itself is framework-agnostic and lives in core
+ * (`Blok.readyState` / `Blok.subscribeReady`) — the SAME implementation behind
+ * React's and Vue's `useBlokReady`, so the three adapters cannot drift. This
+ * wrapper supplies only Angular's reactivity: a signal re-read on every
+ * registry change, unsubscribed through the injector's `DestroyRef`.
+ *
+ * Call it in an injection context (component constructor / field initializer).
+ * The signal starts `false` and takes its first real reading in
+ * `afterNextRender` — browser-only by contract, and late enough for a
+ * `@ViewChild` scope to exist. Over-waiting is safe; under-waiting is a bug.
+ * @param options - scope and readiness depth
+ */
+declare function injectBlokReady(options?: InjectBlokReadyOptions): Signal<boolean>;
+
 /**
  * Context handed to a `createAngularBlock` component. Delivered via DI (the
  * BLOK_BLOCK_CONTEXT token) rather than @Input, because core constructs the tool
@@ -680,5 +748,5 @@ interface AngularBlockRenderContext<Data> {
 /** DI token carrying the per-block render context into the authored component. */
 declare const BLOK_BLOCK_CONTEXT: InjectionToken<AngularBlockRenderContext<unknown>>;
 
-export { BLOK_BLOCK_CONTEXT, BLOK_DEFAULT_CONFIG, BlokContentDirective, BlokEditorComponent, createAngularBlock, injectBlocks, provideBlok };
-export type { AngularBlockRenderContext, BlockNode, BlokAngularConfig, CaretTarget, CreateAngularBlockSpec, InsertPosition, InsertSpec, MoveTarget, PropSchema, PropSchemaEntry, TreeInsertSpec, UseBlocksApi };
+export { BLOK_BLOCK_CONTEXT, BLOK_DEFAULT_CONFIG, BlokContentDirective, BlokEditorComponent, createAngularBlock, injectBlocks, injectBlokReady, provideBlok };
+export type { AngularBlockRenderContext, BlockNode, BlokAngularConfig, BlokReadyScope, CaretTarget, CreateAngularBlockSpec, InjectBlokReadyOptions, InsertPosition, InsertSpec, MoveTarget, PropSchema, PropSchemaEntry, TreeInsertSpec, UseBlocksApi };