@jackuait/blok 0.22.0 → 0.23.1

package/types/react.d.ts

@@ -1,18 +1,24 @@
 import type { BlokConfig } from './index';
-import type { Blok } from './index';
+import type { Blok, EditorWidth } from './index';
 import type React from 'react';
 
 /**
  * Configuration for the useBlok hook.
- * Accepts all BlokConfig properties except `holder`, which is managed by BlokContent.
+ * Accepts all BlokConfig properties except `holder`, plus a React-only `width` prop.
  *
  * Reactive props (sync after mount without recreation):
  * - `readOnly` — calls `editor.readOnly.set(value)`
  * - `autofocus` — calls `editor.focus()` when changed to true
+ * - `theme` — calls `editor.theme.set(value)`
+ * - `width` — calls `editor.width.set(value)`
+ * - `placeholder` — calls `editor.placeholder.set(value)`
  *
  * All other config is consumed once at editor creation.
  */
-export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {}
+export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {
+  /** Editor content width mode. Synced reactively after mount. */
+  width?: EditorWidth;
+}
 
 /**
  * Props for the BlokContent component.
@@ -56,3 +62,34 @@ export function useBlok(
  * ```
  */
 export declare const BlokContent: React.ForwardRefExoticComponent<BlokContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the BlokEditor component — all useBlok config (except `onReady`,
+ * re-typed to receive the ready instance) plus every standard HTML div attribute
+ * (forwarded to the container, like `BlokContent`) and an optional `deps` list
+ * that forces recreation when changed. `style`/`onChange` keep editor-config meaning.
+ */
+export interface BlokEditorProps
+  extends Omit<UseBlokConfig, 'onReady'>,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'onChange'> {
+  /** When any value changes, the editor is destroyed and recreated. */
+  deps?: React.DependencyList;
+  /** Test id forwarded to the editor container element (via data-testid). */
+  'data-testid'?: string;
+  /** Called once the editor is ready, with the live Blok instance (ref is also committed). */
+  onReady?: (editor: Blok) => void;
+}
+
+/**
+ * The recommended all-in-one React component. Wires useBlok + BlokContent and
+ * forwards a ref to the live Blok instance (null before the editor is ready).
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<Blok | null>(null);
+ * <BlokEditor ref={ref} tools={tools} data={data} theme="dark" />;
+ * ```
+ */
+export declare const BlokEditor: React.ForwardRefExoticComponent<
+  BlokEditorProps & React.RefAttributes<Blok | null>
+>;