edytor 0.1.0-next.16 → 0.1.0-next.18

package/README.md

@@ -7,22 +7,23 @@
 [![Svelte v5](https://img.shields.io/badge/Svelte-v5-FF3E00.svg)](https://svelte.dev)
 
 <p>
-    <a href="https://edytor-docs.beynar.workers.dev/docs">Documentation</a> •
+    <a href="https://edytor.dev/docs">Documentation</a> •
     <a href="#quick-start">Quick start</a> •
-    <a href="https://edytor-docs.beynar.workers.dev/docs/reference/migration">Migrating from 0.0.11</a>
+    <a href="https://edytor.dev/docs/reference/migration">Migrating from 0.0.11</a>
   </p>
 </div>
 
 Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable editor with an API to build any kind of collaborative rich text editor.
 
-> **Work in progress.** Edytor is a pre-release (`0.1.0-next.16`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **Work in progress.** Edytor is a pre-release (`0.1.0-next.18`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
 
 ## Features
 
 - **Notion-style editing out of the box.** `<Edytor />` alone is a rich text editor with images: headings, lists, to-dos, toggles, callouts, quotes, dividers, ten marks, Notion's markdown shortcuts and hotkeys. Add the Notion theme, block handles with a block menu (drag one block, or every block the selection covers), a slash menu, a selection toolbar and code blocks.
+- **Columns, opt-in.** List `columnsPlugin` for Notion's multi-column layouts: drag a block to the edge of another to put them side by side, or pick "2 columns" to "5 columns"; drag the gap to resize. Layouts converge across collaborators and the room ([Columns](https://edytor.dev/docs/plugins/columns)).
 - **Your markup.** Blocks, marks and inline atoms render through your Svelte snippets; the slash menu, toolbar, block menu and handles take a snippet and keep their behavior.
 - **Synced properties.** `block.data`, `atom.data` and `edytor.data` read and write like plain objects (`bind:value={block.data.title}`); each property and each array item syncs on its own, so concurrent edits of different properties, or of different items of one array, merge.
-- **AI suggestions.** `edytor.suggestions.add(position, content)` proposes text, paragraphs, lists, to-dos or images after, before or inside a block, at the end of its text, or in place of the selection; it streams in, shows only on your screen, and becomes one undo step when accepted ([Suggestions](https://edytor-docs.beynar.workers.dev/docs/editor/suggestions)).
+- **AI suggestions.** `edytor.suggestions.add(position, content)` proposes text, paragraphs, lists, to-dos or images after, before or inside a block, at the end of its text, or in place of the selection; it streams in, shows only on your screen, and becomes one undo step when accepted ([Suggestions](https://edytor.dev/docs/editor/suggestions)).
 - **Plugins that can veto anything.** Every command is prepared before it writes; plugins see the command and each planned step and can refuse or replace it.
 - **Real-time collaboration.** One `EdytorDocument` shared by any number of views, or none (headless). Presence cursors, identity-preserving moves, splits and merges, and undo that only takes back your own edits.
 - **Offline first.** A local IndexedDB copy and cross-tab sync; offline edits survive reloads and reach the server on reconnect.
@@ -37,7 +38,7 @@ The pre-release is on npm under the `next` tag. Name the tag: a bare `edytor` is
 pnpm add edytor@next
 ```
 
-`svelte@^5` is a peer dependency. Do not install `yjs`: the v14 engine is vendored (`edytor/crdt`). See [installation](https://edytor-docs.beynar.workers.dev/docs/getting-started).
+`svelte@^5` is a peer dependency. Do not install `yjs`: the v14 engine is vendored (`edytor/crdt`). See [installation](https://edytor.dev/docs/getting-started).
 
 ## Quick start
 
@@ -77,7 +78,7 @@ pnpm add edytor@next
 </div>
 ```
 
-`<Edytor>` adds the rich text, image, arrow-move and suggestions plugins after yours, and block handles. To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor-docs.beynar.workers.dev/docs/server/quick-start):
+`<Edytor>` adds the rich text, image, arrow-move and suggestions plugins after yours, and block handles. To collaborate, name a room and a server running the [`edytor/cloudflare` room](https://edytor.dev/docs/server/quick-start):
 
 ```svelte
 <Edytor
@@ -90,14 +91,14 @@ pnpm add edytor@next
 
 ## Documentation
 
-The [documentation site](https://edytor-docs.beynar.workers.dev/docs) is the single source for the API and behavior; this README only introduces the package.
+The [documentation site](https://edytor.dev/docs) is the single source for the API and behavior; this README only introduces the package.
 
-- [Getting started](https://edytor-docs.beynar.workers.dev/docs/getting-started): installation, quick start, SvelteKit, entry points and bundle size
-- [Concepts](https://edytor-docs.beynar.workers.dev/docs/concepts/document-model): the document model, blocks, void and island roles
-- [Editor](https://edytor-docs.beynar.workers.dev/docs/editor/edytor-component): the component, commands, selection, history, clipboard, readonly
-- [Plugins](https://edytor-docs.beynar.workers.dev/docs/plugins) and [customization](https://edytor-docs.beynar.workers.dev/docs/customization/blocks): bundled plugins, custom blocks and marks, [hotkeys and editing behavior](https://edytor-docs.beynar.workers.dev/docs/customization/hotkeys)
-- [Collaboration](https://edytor-docs.beynar.workers.dev/docs/collaboration) and [server](https://edytor-docs.beynar.workers.dev/docs/server/quick-start): documents, providers, presence, the Durable Object room and its protocol
-- [Reference](https://edytor-docs.beynar.workers.dev/docs/reference/document-api): the document API, [troubleshooting](https://edytor-docs.beynar.workers.dev/docs/reference/troubleshooting), [migration from 0.0.11](https://edytor-docs.beynar.workers.dev/docs/reference/migration), limitations
+- [Getting started](https://edytor.dev/docs/getting-started): installation, quick start, SvelteKit, entry points and bundle size
+- [Concepts](https://edytor.dev/docs/concepts/document-model): the document model, blocks, void and island roles
+- [Editor](https://edytor.dev/docs/editor/edytor-component): the component, commands, selection, history, clipboard, readonly
+- [Plugins](https://edytor.dev/docs/plugins) and [customization](https://edytor.dev/docs/customization/blocks): bundled plugins, custom blocks and marks, [hotkeys and editing behavior](https://edytor.dev/docs/customization/hotkeys)
+- [Collaboration](https://edytor.dev/docs/collaboration) and [server](https://edytor.dev/docs/server/quick-start): documents, providers, presence, the Durable Object room and its protocol
+- [Reference](https://edytor.dev/docs/reference/document-api): the document API, [troubleshooting](https://edytor.dev/docs/reference/troubleshooting), [migration from 0.0.11](https://edytor.dev/docs/reference/migration), limitations
 
 ## Contributing
 

package/dist/block/block.svelte.d.ts

@@ -145,10 +145,12 @@ export declare class Block {
     }, plan?: import("../crdt/index.js").Prepared | undefined) => void;
     moveBlock: (this: Block, payload: {
         path: number[];
+        beside?: import("./block.utils.js").BlockBeside;
     }, plan?: import("../crdt/index.js").Prepared | undefined) => Block | null;
     moveBlocks: (this: Block, payload: {
         blocks: Block[];
         path: number[];
+        beside?: import("./block.utils.js").BlockBeside;
     }, plan?: import("../crdt/index.js").Prepared | undefined) => Block[];
     pushContentIntoBlock: (args_0: {
         value: (Text | InlineBlock)[];

package/dist/block/block.utils.d.ts

@@ -38,6 +38,11 @@ import type { DataPatch } from '../crdt/data.js';
 import type { ResolvedAt } from '../session/suggestions.svelte.js';
 import { type JSONBlock, type JSONInlineBlock, type JSONText } from '../utils/json.js';
 import { InlineBlock } from './inlineBlock.svelte.js';
+/** A move beside `target`, to its `side` (`prepare.placeBeside`, `layout.place-beside`). */
+export type BlockBeside = {
+    target: Block;
+    side: 'left' | 'right';
+};
 export type BlockOperations = {
     removeInlineBlock: {
         index: number;
@@ -88,12 +93,15 @@ export type BlockOperations = {
         block: JSONInlineBlock;
         text: Text;
     };
+    /** `beside`: placed beside a target (`left`/`right` moves); `path` is then the target's. */
     moveBlock: {
         path: number[];
+        beside?: BlockBeside;
     };
     moveBlocks: {
         blocks: Block[];
         path: number[];
+        beside?: BlockBeside;
     };
     pushContentIntoBlock: {
         value: (Text | InlineBlock)[];
@@ -128,6 +136,12 @@ export type BlockOperations = {
     deleteBlocks: {
         blocks: Block[];
     };
+    /** Wrap sibling blocks in a new layout of `kind` and `columns` items, one block per item (`layout.wrap`). */
+    wrapBlocks: {
+        blocks: Block[];
+        kind?: string;
+        columns?: number;
+    };
     /** A divider at the caret: its steps are the conversion, insertion or split it plans. */
     insertDivider: {};
 };

package/dist/clipboard/createClipboardFragment.js

@@ -3,6 +3,7 @@ import { Text } from '../text/text.svelte.js';
 import { sliceTextValue } from '../block/contentRange.js';
 import { cloneJson } from '../utils/json.js';
 import { rangeCovers, selectedMembers } from '../selection/visibility.js';
+import { liftLayouts } from '../selection/replaceSelection.js';
 const extractContentRange = (block, startText, startOffset, endText, endOffset) => {
     const content = [];
     const startIndex = block.content.indexOf(startText);
@@ -67,13 +68,15 @@ const extractBlockRange = (edytor) => {
     });
 };
 export const createEdytorClipboardFragment = (edytor) => {
-    const selectedBlocks = selectedMembers(edytor);
+    // A layout the block selection covers whole is copied as the layout (D3).
+    const selectedBlocks = selectedMembers(edytor, liftLayouts(edytor.selection.selectedBlocks));
     if (selectedBlocks.length > 0) {
         return {
             version: 1,
             source: 'edytor',
             kind: 'blocks',
-            // Exactly the members (`sel.blocks.exact`): what a cut copies is what it deletes.
+            // Exactly the members (`sel.blocks.exact`), a layout covered whole as itself, which
+            // deleting its blocks removes: what a cut copies is what it deletes.
             blocks: nestMembers(selectedBlocks, (block) => block.value),
             whole: true
         };

package/dist/clipboard/htmlFlow.js

@@ -135,6 +135,14 @@ export const flowOfHtml = (kinds, html) => {
             }));
             return [{ type: claim.type, data: claim.data, content: [], children }];
         }
+        // A kind that shows no text of its own (a list, a layout, a column) takes none: its
+        // inline runs and a leading paragraph are lines of its default child, never hidden text.
+        if (claim && blocks.get(claim.type)?.rendersContent === false) {
+            const children = linesOf(element, kinds.document.defaultChild(claim.type));
+            return [
+                { type: claim.type, data: claim.data, content: [], ...(children.length && { children }) }
+            ];
+        }
         const wraps = (element) => [...element.children].some(isBlock);
         // An element that only wraps blocks (a `div`, a `ul`) is not a line of its own.
         if (!claim && wraps(element))

package/dist/components/Block.svelte

@@ -44,12 +44,18 @@
 	/** Tags that take no content: the kind renders the element only. */
 	const VOID_TAGS = new Set(['area', 'br', 'col', 'embed', 'hr', 'img', 'input', 'wbr']);
 
-	/** The element a kind declares (O45): a tag, or tag and attributes, from the block's data. */
+	/**
+	 * The element a kind declares (O45): a tag, or tag and attributes, from the
+	 * block's data and id (a kind's own view state keyed by block, such as a
+	 * column's width while a resize drags; reactive state the function reads
+	 * re-renders the element).
+	 */
 	const elementOf = (
 		declared: BlockDefinition['element'],
-		data: Record<string, unknown> | undefined
+		data: Record<string, unknown> | undefined,
+		id: string
 	) => {
-		const spec = typeof declared === 'function' ? declared(data ?? {}) : declared;
+		const spec = typeof declared === 'function' ? declared(data ?? {}, id) : declared;
 		if (spec === undefined) return undefined;
 		return typeof spec === 'string' ? { tag: spec, attributes: {} } : { attributes: {}, ...spec };
 	};
@@ -100,9 +106,11 @@
 	);
 	const definition = $derived(cell && edytor.definitionOf(cell.type));
 	// The core renders the block element from the definition; the snippet renders inside it (R11).
-	const element = $derived(definition && elementOf(definition.element ?? 'div', cell?.data));
+	const element = $derived(definition && elementOf(definition.element ?? 'div', cell?.data, id));
 	// The element around the block's own text (a heading's `h2`): the core's, so an override keeps it.
-	const contentElement = $derived(definition && elementOf(definition.contentElement, cell?.data));
+	const contentElement = $derived(
+		definition && elementOf(definition.contentElement, cell?.data, id)
+	);
 	/** Registers the block element (O45): one element per block, re-registered when the tag changes. */
 	const register = (node: HTMLElement) => block.handle?.attach(node);
 	/** The block element's attributes: the kind's, then the core's. */

package/dist/components/Edytor.svelte

@@ -323,18 +323,13 @@
 
 	const nonNativeEditableBlockChromeSelection = (node: HTMLElement) => {
 		const { selection } = edytor;
-		const pointerdown = (event: PointerEvent) =>
-			selection.handleNonNativeEditableBlockChromePointerDown(event);
-		node.addEventListener('pointerdown', pointerdown, true);
 		// `selectstart` is the only event fired before a drag-selection
 		// begins — the guard keeps one from starting on non-editable
-		// chrome (markers, void/island chrome, plugin UI).
+		// chrome (markers, void/island chrome, plugin UI). A press on that
+		// chrome is the press's (`events/onFocus.ts`).
 		node.addEventListener('selectstart', selection.onSelectStart);
 		return {
-			destroy: () => {
-				node.removeEventListener('pointerdown', pointerdown, true);
-				node.removeEventListener('selectstart', selection.onSelectStart);
-			}
+			destroy: () => node.removeEventListener('selectstart', selection.onSelectStart)
 		};
 	};
 </script>

package/dist/crdt/document.d.ts

@@ -24,7 +24,7 @@ export type DocumentActor = {
  * part of this: they are view-side rendering policy.
  */
 export type DocumentSemanticsConfig = {
-    /** Structural role per block type (`{void?, island?, lines?}` — absent flags mean false). */
+    /** Structural role per block type (`{void?, island?, lines?, layout?}` — absent flags mean false). */
     roles?: Record<string, BlockRole>;
     /** Whether a kind renders its own content slot (undeclared kinds do). */
     rendersContent?: Record<string, boolean>;
@@ -343,7 +343,8 @@ export declare class EdytorDocument {
      */
     adoptSemantics: (config: DocumentSemanticsConfig) => void;
     /**
-     * DEV: `lines` needs an island with a default child (its line kind), and
+     * DEV: `layout` needs a default child (its item kind); `lines` needs an
+     * island with a default child (its line kind), and
      * the line kind belongs to it — outside such an island a block of that
      * kind shows as its parent's default child, so a kind other blocks use
      * (the default type, another kind's default child) would be recast.

package/dist/crdt/document.js

@@ -202,7 +202,8 @@ export const DEFAULT_READINESS_BOUND = 1000;
 const normalizeRole = (role) => ({
     void: role?.void === true,
     island: role?.island === true,
-    lines: role?.lines === true
+    lines: role?.lines === true,
+    ...(role?.layout === true && { layout: true })
 });
 const anonymousActor = () => ({
     id: `anon-${crypto.randomUUID()}`
@@ -496,12 +497,14 @@ export class EdytorDocument {
         if (DEV)
             this._warnLines();
         // A newly void kind sheds its children at read time (UW-21b); a block
-        // promoted out of a newly island kind displays as a default child.
-        if (Object.values(config.roles ?? {}).some((role) => role?.void || role?.island))
+        // promoted out of a newly island kind displays as a default child; a
+        // newly layout kind displays only its items (`layout.*`).
+        if (Object.values(config.roles ?? {}).some((role) => role?.void || role?.island || role?.layout))
             this.facade.rolesChanged();
     };
     /**
-     * DEV: `lines` needs an island with a default child (its line kind), and
+     * DEV: `layout` needs a default child (its item kind); `lines` needs an
+     * island with a default child (its line kind), and
      * the line kind belongs to it — outside such an island a block of that
      * kind shows as its parent's default child, so a kind other blocks use
      * (the default type, another kind's default child) would be recast.
@@ -509,6 +512,8 @@ export class EdytorDocument {
     _warnLines() {
         const { roles, defaultChild } = this._capability;
         for (const [type, role] of roles) {
+            if (role.layout && !defaultChild.has(type))
+                console.warn(`[edytor] "${type}" declares \`layout\` without a \`defaultChild\` (its column kind): it is no layout.`);
             if (!role.lines)
                 continue;
             const line = defaultChild.get(type);

package/dist/crdt/edytor-doc.d.ts

@@ -113,6 +113,13 @@ export type BlockRole = {
      * `island` and a `defaultChild`; other islands keep their structure.
      */
     lines?: boolean;
+    /**
+     * A layout (columns): it displays only its items — its `defaultChild`
+     * kind, a container that renders no content — side by side, and only
+     * while it shows two or more (`layout.*` in the delete contract). Needs
+     * a `defaultChild`.
+     */
+    layout?: boolean;
 };
 /** Island-sealing policy for a walk in document order (R5; see `next`). */
 export type OrderPolicy = {
@@ -436,6 +443,8 @@ export declare const bindEdytorDoc: (Y: EngineApi) => {
                 keep?: boolean;
                 after?: readonly BlockSpec[];
             }) => Prepared;
+            placeBeside: (ids: readonly BlockId[], target: BlockId, side: "left" | "right", kind?: string) => Prepared;
+            wrapInLayout: (ids: readonly BlockId[], kind?: string, columns?: number) => Prepared;
             splitBlock: (id: BlockId, offset: number, newId: BlockId, tail?: SplitTail) => Prepared;
             mergeBlocks: (fromId: BlockId, intoId: BlockId) => Prepared;
             mergeBackward: (id: BlockId) => Prepared;
@@ -561,6 +570,8 @@ export declare const bindEdytorDoc: (Y: EngineApi) => {
             keep?: boolean;
             after?: readonly BlockSpec[];
         } | undefined) => OpResult;
+        placeBeside: (ids: readonly string[], target: string, side: "left" | "right", kind?: string | undefined) => OpResult;
+        wrapInLayout: (ids: readonly string[], kind?: string | undefined, columns?: number | undefined) => OpResult;
         splitBlock: (id: string, offset: number, newId: string, tail?: SplitTail | undefined) => OpResult;
         mergeBlocks: (fromId: string, intoId: string) => OpResult;
         mergeBackward: (id: string) => OpResult;
@@ -654,6 +665,12 @@ export declare const bindEdytorDoc: (Y: EngineApi) => {
         isVoid: (id: string) => boolean;
         isIsland: (id: string) => boolean;
         isLines: (id: string) => boolean;
+        /** `id` is a layout: its kind's role says `layout` (`layout.*`). */
+        isLayout: (id: string) => boolean;
+        /** `id` is a layout item: of its layout's item kind, directly in it (a column). */
+        isLayoutItem: (id: string) => boolean;
+        /** The block a beside placement at `id` stands beside (`placeBeside`'s resolution). */
+        besideAt: (id: BlockId, kind?: string) => string;
         islandOf: (id: string) => string | null;
         insideIsland: (id: string) => boolean;
         canPlace: (ids: readonly BlockId[], parent?: BlockId | null) => boolean;