@reiwuzen/blocky-react 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _reiwuzen_blocky from '@reiwuzen/blocky';
+import { AnyBlock, Node, NodeSelection } from '@reiwuzen/blocky';
+import React, { KeyboardEvent } from 'react';
+
+type EditorStore = {
+    blocks: AnyBlock[];
+    activeBlockId: string | null;
+    setBlocks: (blocks: AnyBlock[]) => void;
+    updateBlock: (block: AnyBlock) => void;
+    insertAfter: (afterId: string, type?: AnyBlock["type"]) => string | null;
+    removeBlock: (id: string) => string;
+    duplicate: (id: string) => void;
+    move: (id: string, direction: "up" | "down") => void;
+    setActiveBlockId: (id: string | null) => void;
+};
+
+type EditorProps = {
+    /** Seed blocks — hydrated once on mount */
+    blocks?: AnyBlock[];
+    /**
+     * Called with serialized blocks when editable flips true → false.
+     * This is your "save" hook.
+     */
+    onChange?: (blocks: AnyBlock[]) => void;
+    editable?: boolean;
+    className?: string;
+    placeholder?: string;
+};
+declare function Editor({ blocks: seedBlocks, onChange, editable, className, placeholder, }: EditorProps): react_jsx_runtime.JSX.Element;
+
+type Props$5 = {
+    editable: boolean;
+    blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.RefObject<Set<string>>;
+};
+declare function BlockList({ editable, blockRefs, hydratedBlocks }: Props$5): react_jsx_runtime.JSX.Element;
+
+type Props$4 = {
+    block: AnyBlock;
+    isActive: boolean;
+    editable: boolean;
+    onFocus: (id: string) => void;
+    onDragStart: (id: string) => void;
+    onDrop: (dragId: string, dropId: string) => void;
+    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.MutableRefObject<Set<string>>;
+};
+declare function Block({ block, isActive, editable, onFocus, onDragStart, onDrop, blockRefs, hydratedBlocks, }: Props$4): react_jsx_runtime.JSX.Element;
+
+type Props$3 = {
+    block: AnyBlock;
+    className?: string;
+    placeholder?: string;
+    editable: boolean;
+    onFocus: (id: string) => void;
+    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.MutableRefObject<Set<string>>;
+};
+declare function EditableContent({ block, className, placeholder, editable, onFocus, blockRefs, hydratedBlocks, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function nodesToHtml(nodes: Node[]): string;
+declare function domToNodes(el: HTMLElement): Node[];
+
+type Props$2 = {
+    block: AnyBlock;
+};
+declare function FormatToolbar({ block }: Props$2): react_jsx_runtime.JSX.Element | null;
+
+type Props$1 = {
+    block: AnyBlock;
+    onClose: () => void;
+};
+declare function BlockTypeSwitcher({ block, onClose }: Props$1): react_jsx_runtime.JSX.Element;
+
+type Props = {
+    blockId: string;
+    onDragStart: (id: string) => void;
+};
+declare function DragHandle({ blockId, onDragStart }: Props): react_jsx_runtime.JSX.Element;
+
+declare function useEditor<T>(selector: (state: EditorStore) => T): T;
+declare function useBlocks(): _reiwuzen_blocky.AnyBlock[];
+declare function useActiveBlockId(): string | null;
+declare function useEditorActions(): {
+    setBlocks: (blocks: _reiwuzen_blocky.AnyBlock[]) => void;
+    updateBlock: (block: _reiwuzen_blocky.AnyBlock) => void;
+    insertBlockAfter: (afterId: string, type?: _reiwuzen_blocky.AnyBlock["type"]) => string | null;
+    removeBlock: (id: string) => string;
+    duplicateBlock: (id: string) => void;
+    moveBlock: (id: string, direction: "up" | "down") => void;
+    setActiveBlockId: (id: string | null) => void;
+};
+
+/**
+ * Returns a function that reads window.getSelection() and converts
+ * the flat browser offsets to a NodeSelection for the given block.
+ */
+declare function useSelection(block: AnyBlock): () => NodeSelection | null;
+
+type UseBlockKeyboardProps = {
+    block: AnyBlock;
+    onFocus: (id: string) => void;
+};
+declare function useBlockKeyboard({ block, onFocus }: UseBlockKeyboardProps): (e: KeyboardEvent<HTMLElement>) => void;
+
+export { Block, BlockList, BlockTypeSwitcher, DragHandle, EditableContent, Editor, type EditorProps, FormatToolbar, domToNodes, nodesToHtml, useActiveBlockId, useBlockKeyboard, useBlocks, useEditor, useEditorActions, useSelection };

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _reiwuzen_blocky from '@reiwuzen/blocky';
+import { AnyBlock, Node, NodeSelection } from '@reiwuzen/blocky';
+import React, { KeyboardEvent } from 'react';
+
+type EditorStore = {
+    blocks: AnyBlock[];
+    activeBlockId: string | null;
+    setBlocks: (blocks: AnyBlock[]) => void;
+    updateBlock: (block: AnyBlock) => void;
+    insertAfter: (afterId: string, type?: AnyBlock["type"]) => string | null;
+    removeBlock: (id: string) => string;
+    duplicate: (id: string) => void;
+    move: (id: string, direction: "up" | "down") => void;
+    setActiveBlockId: (id: string | null) => void;
+};
+
+type EditorProps = {
+    /** Seed blocks — hydrated once on mount */
+    blocks?: AnyBlock[];
+    /**
+     * Called with serialized blocks when editable flips true → false.
+     * This is your "save" hook.
+     */
+    onChange?: (blocks: AnyBlock[]) => void;
+    editable?: boolean;
+    className?: string;
+    placeholder?: string;
+};
+declare function Editor({ blocks: seedBlocks, onChange, editable, className, placeholder, }: EditorProps): react_jsx_runtime.JSX.Element;
+
+type Props$5 = {
+    editable: boolean;
+    blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.RefObject<Set<string>>;
+};
+declare function BlockList({ editable, blockRefs, hydratedBlocks }: Props$5): react_jsx_runtime.JSX.Element;
+
+type Props$4 = {
+    block: AnyBlock;
+    isActive: boolean;
+    editable: boolean;
+    onFocus: (id: string) => void;
+    onDragStart: (id: string) => void;
+    onDrop: (dragId: string, dropId: string) => void;
+    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.MutableRefObject<Set<string>>;
+};
+declare function Block({ block, isActive, editable, onFocus, onDragStart, onDrop, blockRefs, hydratedBlocks, }: Props$4): react_jsx_runtime.JSX.Element;
+
+type Props$3 = {
+    block: AnyBlock;
+    className?: string;
+    placeholder?: string;
+    editable: boolean;
+    onFocus: (id: string) => void;
+    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.MutableRefObject<Set<string>>;
+};
+declare function EditableContent({ block, className, placeholder, editable, onFocus, blockRefs, hydratedBlocks, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function nodesToHtml(nodes: Node[]): string;
+declare function domToNodes(el: HTMLElement): Node[];
+
+type Props$2 = {
+    block: AnyBlock;
+};
+declare function FormatToolbar({ block }: Props$2): react_jsx_runtime.JSX.Element | null;
+
+type Props$1 = {
+    block: AnyBlock;
+    onClose: () => void;
+};
+declare function BlockTypeSwitcher({ block, onClose }: Props$1): react_jsx_runtime.JSX.Element;
+
+type Props = {
+    blockId: string;
+    onDragStart: (id: string) => void;
+};
+declare function DragHandle({ blockId, onDragStart }: Props): react_jsx_runtime.JSX.Element;
+
+declare function useEditor<T>(selector: (state: EditorStore) => T): T;
+declare function useBlocks(): _reiwuzen_blocky.AnyBlock[];
+declare function useActiveBlockId(): string | null;
+declare function useEditorActions(): {
+    setBlocks: (blocks: _reiwuzen_blocky.AnyBlock[]) => void;
+    updateBlock: (block: _reiwuzen_blocky.AnyBlock) => void;
+    insertBlockAfter: (afterId: string, type?: _reiwuzen_blocky.AnyBlock["type"]) => string | null;
+    removeBlock: (id: string) => string;
+    duplicateBlock: (id: string) => void;
+    moveBlock: (id: string, direction: "up" | "down") => void;
+    setActiveBlockId: (id: string | null) => void;
+};
+
+/**
+ * Returns a function that reads window.getSelection() and converts
+ * the flat browser offsets to a NodeSelection for the given block.
+ */
+declare function useSelection(block: AnyBlock): () => NodeSelection | null;
+
+type UseBlockKeyboardProps = {
+    block: AnyBlock;
+    onFocus: (id: string) => void;
+};
+declare function useBlockKeyboard({ block, onFocus }: UseBlockKeyboardProps): (e: KeyboardEvent<HTMLElement>) => void;
+
+export { Block, BlockList, BlockTypeSwitcher, DragHandle, EditableContent, Editor, type EditorProps, FormatToolbar, domToNodes, nodesToHtml, useActiveBlockId, useBlockKeyboard, useBlocks, useEditor, useEditorActions, useSelection };