import { useOpenBlock, OpenBlockView } from '@labbs/openblock-react';
import '@labbs/openblock-core/styles/editor.css';

function MyEditor() {
  const editor = useOpenBlock({
    initialContent: [
      {
        type: 'heading',
        props: { level: 1 },
        content: [{ type: 'text', text: 'Hello World', styles: {} }],
      },
      {
        type: 'paragraph',
        content: [{ type: 'text', text: 'Start editing...', styles: {} }],
      },
    ],
  });

  return <OpenBlockView editor={editor} />;
}

const editor = useOpenBlock({
  initialContent: [...],
  editable: true,
  autoFocus: 'end',
  onUpdate: (blocks) => console.log(blocks),
  deps: [someValue], // Recreate editor when deps change
});

const blocks = useEditorContent(editor);
// blocks updates whenever the document changes

const selectedBlocks = useEditorSelection(editor);
// selectedBlocks updates when selection changes

const isFocused = useEditorFocus(editor);

<OpenBlockView
  editor={editor}
  className="my-editor"
/>

const viewRef = useRef<OpenBlockViewRef>(null);

<OpenBlockView
  ref={viewRef}
  editor={editor}
/>

// Later: viewRef.current?.focus()

function MyEditor() {
  const editor = useOpenBlock({...});

  const handleBold = () => {
    editor.toggleBold();
  };

  const handleCustomAction = () => {
    // Direct ProseMirror access
    const tr = editor.pm.createTransaction();
    tr.insertText('Custom text');
    editor.pm.dispatch(tr);
  };

  return (
    <>
      <button onClick={handleBold}>Bold</button>
      <button onClick={handleCustomAction}>Insert</button>
      <OpenBlockView editor={editor} />
    </>
  );
}