edytor 0.1.0-next.34 → 0.1.0-next.36

package/README.md

@@ -16,13 +16,16 @@
 
 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.34`, `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.36`, `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 and block handles: headings, lists, to-dos, toggles, callouts, quotes, dividers, ten marks and Notion's hotkeys. Add the Notion theme, a block menu (drag one block, or every block the selection covers), a slash menu, a selection toolbar, markdown shortcuts (`markdownShortcutsPlugin`) and code blocks.
+- **Notion-style editing out of the box.** `<Edytor />` alone is a rich text editor with images and block handles: headings, toggle headings, lists, to-dos, toggles, callouts, quotes, dividers, ten marks and Notion's hotkeys. Add the Notion theme, a block menu (block colours; drag one block, or every block the selection covers), a slash menu, a selection toolbar, markdown shortcuts (`markdownShortcutsPlugin`) and code blocks.
+- **Pages and a table of contents, opt-in.** `createPagePlugin` links a block to another document (a page per room, opened and named by your app), and `tocPlugin` lists the headings live ([Page](https://edytor.dev/docs/plugins/page), [Table of contents](https://edytor.dev/docs/plugins/table-of-contents)).
 - **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)).
+- **Mentions, page links and your own triggers.** `createMentionPlugin` (`@` people) and `createPageLinkPlugin` (`[[` pages) take your app's search; a plugin's `inputRules` (`:smile:` → 😄) and `triggers` (a menu on a typed character) declare the rest ([Input rules and triggers](https://edytor.dev/docs/plugins/input-rules)).
 - **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.
+- **Your language.** Every word the chrome shows or says, slash keywords included, comes from a labels dictionary each plugin takes; English by default ([Localization](https://edytor.dev/docs/customization/localization)).
 - **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.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.

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

@@ -160,10 +160,16 @@ export declare class Block {
         ops: import("../crdt/index.js").DataPatch[];
         atom?: string;
     }) => void;
-    addInlineBlock: (payload: {
-        index: number;
+    /**
+     * Insert an inline atom: at `offset` of the block's content (block
+     * offsets, an inline atom counting 1; a caret's), or at `index` of the
+     * text segment `text`. One `addInlineBlock` operation (its payload names
+     * the segment). Answers the text segment right after the atom, where a
+     * caret goes (`null` when it was not written, `undefined` when refused).
+     */
+    addInlineBlock: (payload: BlockOperations["addInlineBlock"] | {
+        offset: number;
         block: JSONInlineBlock;
-        text: Text;
     }) => Text | null | undefined;
     normalizeContent: () => void;
     normalizeChildren: () => void;

package/dist/block/block.svelte.js

@@ -294,7 +294,20 @@ export class Block {
     pushContentIntoBlock = batch('pushContentIntoBlock', pushContentIntoBlock);
     removeInlineBlock = batch('removeInlineBlock', removeInlineBlock, prepareRemoveInline);
     patchData = batch('patchData', patchData, preparePatch);
-    addInlineBlock = batch('addInlineBlock', addInlineBlock, undefined, textAfterAtom);
+    #addInline = batch('addInlineBlock', addInlineBlock, undefined, textAfterAtom);
+    /**
+     * Insert an inline atom: at `offset` of the block's content (block
+     * offsets, an inline atom counting 1; a caret's), or at `index` of the
+     * text segment `text`. One `addInlineBlock` operation (its payload names
+     * the segment). Answers the text segment right after the atom, where a
+     * caret goes (`null` when it was not written, `undefined` when refused).
+     */
+    addInlineBlock = (payload) => {
+        if (!('offset' in payload))
+            return this.#addInline(payload);
+        const at = this.textAtOffset(Math.max(0, payload.offset));
+        return at ? this.#addInline({ index: at.offset, text: at.text, block: payload.block }) : null;
+    };
     normalizeContent = batch('normalizeContent', normalizeContent);
     normalizeChildren = batch('normalizeChildren', normalizeChildren);
     /** @deprecated `edytor.suggestions.add({ end: block.id }, …)`. */

package/dist/block/colors.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Block colours (Notion's "Color" in the block menu): a block's text colour
+ * and background, by palette name, in two data leaves, `data.color` and
+ * `data.background`. Each is one property of the block, so two people
+ * colouring it at once keep one value each (per-leaf last writer), and
+ * Turn into keeps them (a retype sets only the leaves it names).
+ *
+ * The core renders a valid name as `data-edytor-color` and
+ * `data-edytor-background` on the block element (`Block.svelte`, owned by
+ * the attribute table), and its stylesheet paints the bundled names from
+ * theme tokens (`--edytor-color-<name>`, `--edytor-background-<name>`).
+ */
+import type { Block } from './block.svelte.js';
+import type { Edytor } from '../edytor.svelte.js';
+/** Notion's palette: the colour names a block may hold, in menu order ("Default" is none). */
+export declare const BLOCK_COLORS: readonly ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+/**
+ * Notion's light values of the palette: the fallbacks of the theme tokens
+ * (`--edytor-color-<name>`, `--edytor-background-<name>`), as the core's
+ * stylesheet (`Block.svelte`) and the Notion theme write them.
+ */
+export declare const BLOCK_PALETTE: Record<(typeof BLOCK_COLORS)[number], {
+    color: string;
+    background: string;
+}>;
+/** A block's colour fields: its text colour and its background. */
+export type BlockColorField = 'color' | 'background';
+/** `value` as a colour name, or `undefined`. */
+export declare const colorName: (value: unknown) => string | undefined;
+/** The block element's colour attributes for `data` (absent when it holds none). */
+export declare const colorAttributes: (data: Readonly<Record<string, unknown>> | undefined) => {
+    'data-edytor-color': string | undefined;
+    'data-edytor-background': string | undefined;
+};
+/**
+ * Whether `block` takes a colour: a block showing its own text (a
+ * paragraph, a heading, a list item, a toggle, a callout), not a void (a
+ * divider, an image), an island (a code block) or one of its lines.
+ */
+export declare const colorable: (block: Block) => boolean;
+/**
+ * Set `field` of every colourable block of `blocks` to `value` (`null`
+ * removes it: the default), as one command and one undo step; each block
+ * is its own data write (`patchData`), so an extension vetoing one keeps
+ * that block as it was. Answers whether any block changed.
+ */
+export declare const setBlockColor: (edytor: Edytor, blocks: Iterable<Block>, field: BlockColorField, value: string | null) => boolean;

package/dist/block/colors.js

@@ -0,0 +1,74 @@
+/** Notion's palette: the colour names a block may hold, in menu order ("Default" is none). */
+export const BLOCK_COLORS = [
+    'gray',
+    'brown',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'purple',
+    'pink',
+    'red'
+];
+/**
+ * Notion's light values of the palette: the fallbacks of the theme tokens
+ * (`--edytor-color-<name>`, `--edytor-background-<name>`), as the core's
+ * stylesheet (`Block.svelte`) and the Notion theme write them.
+ */
+export const BLOCK_PALETTE = {
+    gray: { color: '#7d7a75', background: '#f0efed' },
+    brown: { color: '#9f765a', background: '#f5ede9' },
+    orange: { color: '#d27b2d', background: '#fbebde' },
+    yellow: { color: '#cb9434', background: '#f9f3dc' },
+    green: { color: '#50946e', background: '#e8f1ec' },
+    blue: { color: '#387dc9', background: '#e5f2fc' },
+    purple: { color: '#9a6bb4', background: '#f3ebf9' },
+    pink: { color: '#c14c8a', background: '#fae9f1' },
+    red: { color: '#cf5148', background: '#fce9e7' }
+};
+/**
+ * A colour name the core renders: lowercase letters, digits and hyphens,
+ * starting with a letter (an app's own name, such as `teal`, renders too,
+ * and its stylesheet paints it). Anything else renders nothing.
+ */
+const NAME = /^[a-z][a-z0-9-]{0,31}$/;
+/** `value` as a colour name, or `undefined`. */
+export const colorName = (value) => typeof value === 'string' && NAME.test(value) ? value : undefined;
+/** The block element's colour attributes for `data` (absent when it holds none). */
+export const colorAttributes = (data) => ({
+    'data-edytor-color': colorName(data?.color),
+    'data-edytor-background': colorName(data?.background)
+});
+/**
+ * Whether `block` takes a colour: a block showing its own text (a
+ * paragraph, a heading, a list item, a toggle, a callout), not a void (a
+ * divider, an image), an island (a code block) or one of its lines.
+ */
+export const colorable = (block) => {
+    const { facade } = block.edytor;
+    const line = block.parent && !block.parent.isRoot && facade.isLines(block.parent.id);
+    return (!block.isRoot &&
+        block.rendersContent &&
+        !facade.isVoid(block.id) &&
+        !facade.isIsland(block.id) &&
+        !line);
+};
+/**
+ * Set `field` of every colourable block of `blocks` to `value` (`null`
+ * removes it: the default), as one command and one undo step; each block
+ * is its own data write (`patchData`), so an extension vetoing one keeps
+ * that block as it was. Answers whether any block changed.
+ */
+export const setBlockColor = (edytor, blocks, field, value) => {
+    const name = value === null ? undefined : colorName(value);
+    if (value !== null && name === undefined)
+        return false;
+    const painted = [...blocks].filter((block) => colorable(block) && edytor.facade.blockDataOf(block.id)?.[field] !== name);
+    if (!painted.length)
+        return false;
+    const applied = edytor.dispatcher.each('setBlockColor', painted, (block) => {
+        block.patchData({ ops: [{ path: [field], value: name }] });
+        return edytor.dispatcher.last?.status === 'applied';
+    });
+    return applied.some(Boolean);
+};