@yoopta/editor 6.0.0-beta.17 → 6.0.0-beta.19

package/README.md

@@ -1,199 +1,136 @@
-# Core package
+# @yoopta/editor
 
-This is core package for Yoopta-Editor
+Core headless package for Yoopta Editor. Provides the editor instance, block/element/mark logic, and React component. Plugins and marks are passed to `createYooptaEditor`; UI (toolbars, slash menu, block actions) is rendered as **children** of `<YooptaEditor>` from `@yoopta/ui`.
 
-### Installation
+## Installation
 
 ```bash
-yarn add @yoopta/editor
+yarn add slate slate-react slate-dom @yoopta/editor
 ```
 
-### Usage
+Peer dependencies: `slate`, `slate-react`, `slate-dom`.
+
+## Quick Start
+
+Plugins, marks, and optional initial value are passed to `createYooptaEditor`. The component receives only the `editor` instance and callbacks.
 
 ```tsx
-import YooptaEditor, { createYooptaEditor, YooEditor } from '@yoopta/editor';
-// plugins
+import { useMemo } from 'react';
+import YooptaEditor, { createYooptaEditor, type YooptaContentValue } from '@yoopta/editor';
 import Paragraph from '@yoopta/paragraph';
+import { Bold, Italic } from '@yoopta/marks';
 
 const plugins = [Paragraph];
+const marks = [Bold, Italic];
+const initialValue = {} as YooptaContentValue;
+
+export default function Editor() {
+  const editor = useMemo(
+    () => createYooptaEditor({ plugins, marks, value: initialValue }),
+    [],
+  );
+
+  return (
+    <YooptaEditor
+      editor={editor}
+      placeholder="Type / to open menu"
+      onChange={(value) => console.log(value)}
+    />
+  );
+}
+```
 
-const Editor = () => {
-  // create instance
-  const editor: YooEditor = useMemo(() => createYooptaEditor(), []);
-  const [value, setValue] = useState();
+To add toolbar and slash menu, install `@yoopta/ui` and render them as **children** of `<YooptaEditor>`:
 
-  const onChange = (newValue) => setValue(newValue);
+```tsx
+import { FloatingToolbar, FloatingBlockActions, SlashCommandMenu } from '@yoopta/ui';
 
-  return <YooptaEditor editor={editor} plugins={plugins} value={value} onChange={onChange} />;
-};
+<YooptaEditor editor={editor} onChange={onChange} placeholder="Type / to open menu">
+  <FloatingToolbar />
+  <FloatingBlockActions />
+  <SlashCommandMenu />
+</YooptaEditor>
 ```
 
-### YooptaEditor component props
+## YooptaEditor props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `editor` | `YooEditor` | **Required.** Instance from `createYooptaEditor`. |
+| `onChange` | `(value, options) => void` | Called when content changes. |
+| `onPathChange` | `(path) => void` | Called when the current block path changes. |
+| `autoFocus` | `boolean` | Focus editor on mount. Default: `true`. |
+| `className` | `string` | Additional CSS class (default: `.yoopta-editor`). |
+| `style` | `CSSProperties` | Inline styles (e.g. `{ width: 750, paddingBottom: 100 }`). |
+| `placeholder` | `string` | Placeholder when the editor is empty. |
+| `children` | `ReactNode` | UI components (toolbar, slash menu, block actions, etc.). |
+| `renderBlock` | `(props) => ReactNode` | Custom wrapper per block (e.g. for drag-and-drop). |
+
+Initial content is set via `createYooptaEditor({ value })` or later with `editor.setEditorValue(value)`. Do not pass `plugins`, `marks`, or `value` to `<YooptaEditor>`.
+
+## createYooptaEditor options
 
 ```ts
-type Props = {
-  /**
-   * Instance of editor
-   */
-  editor: YooEditor;
-  /**
-   * Optional custom id. Useful for multiple instances
-   */
-  id?: string;
-  /**
-   * List of plugins
-   */
-  plugins: YooptaPlugin[];
-  /**
-   * List of marks from @yoopta/marks
-   */
-  marks?: YooptaMark<any>[];
-  /**
-   * Optional value of editor. DEFAULT - [undefined]
-   */
+createYooptaEditor({
+  plugins: YooptaPlugin[];   // required
+  marks?: YooptaMark[];      // optional
   value?: YooptaContentValue;
-  /**
-   * Autofocus when editor is ready. DEFAULT - [true]
-   */
-  autoFocus?: boolean;
-  /**
-   * Additional className for your needs. DEFAULT - [.yoopta-editor]
-   */
-  className?: string;
-  /**
-   * Box for selection area to select by mouse several blocks. DEFAULT - [document]
-   */
-  selectionBoxElement?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
-  children?: React.ReactNode;
-  placeholder?: string;
   readOnly?: boolean;
-  /* Width. [Default] - 400px. Will be DEPRECATED, use style object  */
-  width?: number | string;
-  /* Style CSS Object. [Default] - { width: 400, paddingBottom: 100 }
-   */
-  style?: number | string;
-  /* Change handler  */
-  onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
-  /* Path change handler */
-  onPathChange?: (path: YooptaPath) => void;
-};
+  id?: string;
+});
 ```
 
-### Editor API
+## Editor API (YooEditor)
 
-```tsx
-export type YooEditor = {
-  id: string;
-  readOnly: boolean;
-  isEmpty: () => boolean;
-
-  // block handlers
-  insertBlock: WithoutFirstArg<typeof insertBlock>;
-  updateBlock: WithoutFirstArg<typeof updateBlock>;
-  deleteBlock: WithoutFirstArg<typeof deleteBlock>;
-  duplicateBlock: WithoutFirstArg<typeof duplicateBlock>;
-  toggleBlock: WithoutFirstArg<typeof toggleBlock>;
-  increaseBlockDepth: WithoutFirstArg<typeof increaseBlockDepth>;
-  decreaseBlockDepth: WithoutFirstArg<typeof decreaseBlockDepth>;
-  moveBlock: WithoutFirstArg<typeof moveBlock>;
-  focusBlock: WithoutFirstArg<typeof focusBlock>;
-  mergeBlock: () => void;
-  splitBlock: (options?: SplitBlockOptions) => void;
-  getBlock: (options: GetBlockOptions) => YooptaBlockData | null;
-
-  // path handlers
-  path: YooptaPath;
-  setPath: (path: YooptaPath) => void;
-
-  children: YooptaContentValue;
-  getEditorValue: () => YooptaContentValue;
-  setEditorValue: WithoutFirstArg<typeof setEditorValue>;
-  blockEditorsMap: YooptaPluginsEditorMap;
-  blocks: YooptaBlocks;
-  formats: YooptaFormats;
-  shortcuts: Record<string, YooptaBlock>;
-  plugins: Record<string, Plugin<Record<string, SlateElement>, unknown>>;
-  commands: Record<string, (...args: any[]) => any>;
-
-  // core handlers
-  applyTransforms: WithoutFirstArg<typeof applyTransforms>;
-  batchOperations: (fn: () => void) => void;
-
-  // events handlers
-  on: <K extends keyof YooptaEventsMap>(
-    event: K,
-    fn: (payload: YooptaEventsMap[K]) => void,
-  ) => void;
-  once: <K extends keyof YooptaEventsMap>(
-    event: K,
-    fn: (payload: YooptaEventsMap[K]) => void,
-  ) => void;
-  off: <K extends keyof YooptaEventsMap>(
-    event: K,
-    fn: (payload: YooptaEventsMap[K]) => void,
-  ) => void;
-  emit: <K extends keyof YooptaEventsMap>(event: K, payload: YooptaEventsMap[K]) => void;
-
-  // focus handlers
-  isFocused: () => boolean;
-  blur: (options?: EditorBlurOptions) => void;
-  focus: () => void;
-
-  // parser handlers
-  getHTML: (content: YooptaContentValue) => string;
-  getMarkdown: (content: YooptaContentValue) => string;
-  getPlainText: (content: YooptaContentValue) => string;
-  getEmail: (content: YooptaContentValue, templateOptions: EmailTemplateOptions) => string;
-
-  // history
-  historyStack: Record<HistoryStackName, HistoryStack[]>;
-  isSavingHistory: WithoutFirstArg<typeof YooptaHistory.isSavingHistory>;
-  isMergingHistory: WithoutFirstArg<typeof YooptaHistory.isMergingHistory>;
-  withoutSavingHistory: WithoutFirstArg<typeof YooptaHistory.withoutSavingHistory>;
-  withoutMergingHistory: WithoutFirstArg<typeof YooptaHistory.withoutMergingHistory>;
-  withMergingHistory: WithoutFirstArg<typeof YooptaHistory.withMergingHistory>;
-  withSavingHistory: WithoutFirstArg<typeof YooptaHistory.withSavingHistory>;
-  redo: WithoutFirstArg<typeof YooptaHistory.redo>;
-  undo: WithoutFirstArg<typeof YooptaHistory.undo>;
-
-  // ref to editor element
-  refElement: HTMLElement | null;
-};
-```
+- **Content:** `getEditorValue()`, `setEditorValue(value)`
+- **Blocks:** `insertBlock`, `updateBlock`, `deleteBlock`, `duplicateBlock`, `toggleBlock`, `moveBlock`, `focusBlock`, `mergeBlock`, `splitBlock`, `increaseBlockDepth`, `decreaseBlockDepth`, `getBlock`
+- **Transforms:** `applyTransforms([{ type: 'validate_block_paths' }])`
+- **History:** `undo()`, `redo()`, `batchOperations(fn)`
+- **Events:** `on`, `off`, `once`, `emit` — events: `change`, `focus`, `blur`, `path-change`, `block:copy`
+- **Parsers:** `getHTML(value)`, `getMarkdown(value)`, `getPlainText(value)`, `getEmail(value, options)`
+- **Focus:** `focus()`, `blur()`, `isFocused()`
+- **Element builder:** `editor.y` for building block/element structures programmatically
+
+## Namespace APIs
 
-### Hooks from @yoopta/editor
+Use these for programmatic control (e.g. inside toolbar or custom UI):
 
 ```ts
-/**
- * Hook to access the Yoopta editor instance. Must be used in children components of <YooptaEditor />.
- * @returns {YooEditor} The editor instance.
- */
-useYooptaEditor();
-
-/**
- * Hook to check if the editor is in read-only mode.
- * @returns {boolean} True if the editor is read-only.
- */
-useYooptaReadOnly();
-
-/**
- * Hook to check if the editor is focused.
- * @returns {boolean} True if the editor is focused.
- */
-useYooptaFocused();
-
-/**
- * Hook to get the data for a specific block by its ID.
- * @param {string} blockId The ID of the block.
- * @returns {YooptaBlockData | undefined} The data of the block, or undefined if not found.
- */
-useBlockData(blockId);
-
-/**
- * Hook to get the options for a plugin.
- * @template TOptions The type of options expected.
- * @param {string} blockType The block type associated with the plugin.
- * @returns {PluginOptions<TOptions>} The options of the plugin.
- */
-useYooptaPluginOptions<TOptions>(blockType);
+import { Blocks, Elements, Marks, Selection } from '@yoopta/editor';
+
+// Block operations
+Blocks.insertBlock(editor, { ... });
+Blocks.updateBlock(editor, { ... });
+Blocks.deleteBlock(editor, { ... });
+Blocks.getBlock(editor, { id: blockId });
+
+// Element operations (within a block)
+Elements.insertElement(editor, { ... });
+Elements.updateElement(editor, { ... });
+Elements.getElement(editor, { ... });
+
+// Text formatting (marks)
+Marks.toggle(editor, { type: 'bold' });
+Marks.isActive(editor, { type: 'bold' });
 ```
+
+## Hooks
+
+Must be used inside a component that is a **child** of `<YooptaEditor>` (e.g. inside toolbar or block actions).
+
+| Hook | Description |
+|------|-------------|
+| `useYooptaEditor()` | Returns the editor instance. |
+| `useYooptaReadOnly()` | Returns whether the editor is read-only. |
+| `useYooptaFocused()` | Returns whether the editor is focused. |
+| `useBlockData(blockId)` | Returns block data for the given `blockId`. |
+| `useYooptaPluginOptions(blockType)` | Returns options for the plugin of the given block type. |
+
+## Related packages
+
+- **@yoopta/ui** — FloatingToolbar, SlashCommandMenu, FloatingBlockActions, BlockOptions, SelectionBox, BlockDndContext, SortableBlock
+- **@yoopta/themes-shadcn** — Styled block UI; use `applyTheme(plugins)` or extend a single plugin with theme elements
+- **@yoopta/marks** — Bold, Italic, Underline, Strike, CodeMark, Highlight, etc.
+- **@yoopta/paragraph**, **@yoopta/headings**, **@yoopta/code**, etc. — Block plugins
+
+See the [main README](https://github.com/Darginec05/Yoopta-Editor) and [Quickstart](https://docs.yoopta.dev/quickstart) for full setup with themes and UI.

package/dist/yoopta-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"yoopta-editor.d.ts","sourceRoot":"","sources":["../src/yoopta-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjG,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,kFAAkF;IAClF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACtD,CAAC;AAOF,QAAA,MAAM,YAAY,yGAUf,iBAAiB,4CAiDnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"yoopta-editor.d.ts","sourceRoot":"","sources":["../src/yoopta-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjG,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,kFAAkF;IAClF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACtD,CAAC;AAQF,QAAA,MAAM,YAAY,yGAUf,iBAAiB,4CAiDnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/editor",
-  "version": "6.0.0-beta.17",
+  "version": "6.0.0-beta.19",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -68,5 +68,5 @@
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
-  "gitHead": "1197e0459eb2009570e150ef0f054e4dc3a2e39b"
+  "gitHead": "88eeca5f42d499d7190e958c8537b19b2330457f"
 }