edytor 0.0.6 → 0.0.8

package/dist/plugins/richtext/RichTextPlugin.svelte

@@ -0,0 +1,241 @@
+<script module lang="ts">
+	import type { Plugin, MarkSnippetPayload, BlockSnippetPayload } from '../../plugins.js';
+	import type { SerializableContent } from '../../utils/json.js';
+	import type { HotKey } from '../../hotkeys.js';
+	import type { Edytor } from '../../edytor.svelte.js';
+
+	export const richTextOperations = (edytor: Edytor) => ({
+		removeAllMarksAtRange: () => {
+			const { yStart, yEnd, startText, texts } = edytor.selection.state;
+			texts.forEach((text) => {
+				const marks = text.yText.getAttributes();
+				Object.entries(marks).forEach(([key]) => {
+					text.yText.removeAttribute(key);
+				});
+			});
+			edytor.selection.setAtTextRange(startText, yStart, yEnd);
+		},
+		setMarkAtRange: (
+			mark:
+				| 'bold'
+				| 'italic'
+				| 'underline'
+				| 'code'
+				| 'link'
+				| 'strike'
+				| 'superscript'
+				| 'subscript'
+				| 'color'
+				| 'highlight',
+			value?: SerializableContent
+		) => {
+			const { yStart, yEnd, startText, texts } = edytor.selection.state;
+			console.table(texts.map((text) => ({ text: text.yText.toJSON() })));
+			texts.forEach((text, index) => {
+				const isFirst = index === 0;
+				const isLast = index === texts.length - 1;
+				text.markText({
+					mark,
+					value,
+					toggle: true,
+					start: isFirst ? yStart : 0,
+					end: isLast ? yEnd : text.yText.length
+				});
+			});
+			edytor.selection.setAtTextRange(startText, yStart, yEnd);
+		}
+	});
+
+	export const richTextPlugin: Plugin = (edytor) => {
+		const setMarkAndSelect =
+			(
+				mark:
+					| 'bold'
+					| 'italic'
+					| 'underline'
+					| 'code'
+					| 'link'
+					| 'strike'
+					| 'superscript'
+					| 'subscript'
+					| 'color'
+					| 'highlight',
+				value?: SerializableContent
+			): HotKey =>
+			({ prevent }) => {
+				prevent(() => {
+					richTextOperations(edytor).setMarkAtRange(mark, value);
+				});
+			};
+		return {
+			defaultBlock: (parent) => {
+				if (parent.type === 'ordered-list') {
+					return 'list-item';
+				}
+				if (parent.type === 'unordered-list') {
+					return 'list-item';
+				}
+				return 'paragraph';
+			},
+			hotkeys: {
+				'mod+b': setMarkAndSelect('bold'),
+				'mod+i': setMarkAndSelect('italic'),
+				'mod+u': setMarkAndSelect('underline'),
+				'mod+e': setMarkAndSelect('code'),
+				'mod+shift+x': setMarkAndSelect('strike'),
+				'mod+shift+h': setMarkAndSelect('color', 'red')
+			},
+			marks: {
+				bold,
+				italic,
+				underline,
+				code,
+				link,
+				strike,
+				superscript,
+				subscript,
+				color,
+				highlight
+			},
+			blocks: {
+				paragraph,
+				details,
+				heading,
+				'ordered-list': orderedList,
+				'unordered-list': unorderedList,
+				'list-item': listItem,
+				horizontalRule
+			}
+		};
+	};
+</script>
+
+{#snippet bold({ content }: MarkSnippetPayload)}
+	<b>
+		{@render content()}
+	</b>
+{/snippet}
+
+{#snippet italic({ content }: MarkSnippetPayload)}
+	<i>
+		{@render content()}
+	</i>
+{/snippet}
+
+{#snippet underline({ content }: MarkSnippetPayload)}
+	<u>
+		{@render content()}
+	</u>
+{/snippet}
+
+{#snippet code({ content }: MarkSnippetPayload)}
+	<code>
+		{@render content()}
+	</code>
+{/snippet}
+
+{#snippet link({ mark, content }: MarkSnippetPayload<{ href: string; target?: string }>)}
+	<a href={mark.href} target={mark.target}>
+		{@render content()}
+	</a>
+{/snippet}
+
+{#snippet strike({ content }: MarkSnippetPayload)}
+	<s>
+		{@render content()}
+	</s>
+{/snippet}
+
+{#snippet superscript({ content }: MarkSnippetPayload)}
+	<sup>
+		{@render content()}
+	</sup>
+{/snippet}
+
+{#snippet subscript({ content }: MarkSnippetPayload)}
+	<sub>
+		{@render content()}
+	</sub>
+{/snippet}
+
+{#snippet color({ mark, content }: MarkSnippetPayload<{ color: string }>)}
+	<span style="color: {mark}">
+		{@render content()}
+	</span>
+{/snippet}
+
+{#snippet highlight({ mark, content }: MarkSnippetPayload<string>)}
+	<span style="background-color: {mark}">
+		{@render content()}
+	</span>
+{/snippet}
+
+{#snippet paragraph({ block, content, children }: BlockSnippetPayload)}
+	<div class="rounded bg-opacity-25 p-1 my-1" use:block.attach>
+		<p>
+			{@render content()}
+		</p>
+		{#if children}
+			<div style:padding-left="10px">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+{#snippet details({ block, content, children }: BlockSnippetPayload)}
+	<details use:block.attach>
+		<summary>
+			{@render content()}
+		</summary>
+		{#if children}
+			<div>
+				{@render children()}
+			</div>
+		{/if}
+	</details>
+{/snippet}
+{#snippet heading({ block, content, children }: BlockSnippetPayload<{ level: number }>)}
+	<svelte:element this={block.level || 'h1'} use:block.attach>
+		{@render content()}
+		{#if children}
+			<div>
+				{@render children()}
+			</div>
+		{/if}
+	</svelte:element>
+{/snippet}
+
+{#snippet orderedList({ block, content, children }: BlockSnippetPayload)}
+	<ol use:block.attach>
+		{#if children}
+			<div>
+				{@render children()}
+			</div>
+		{/if}
+	</ol>
+{/snippet}
+
+{#snippet unorderedList({ block, content, children }: BlockSnippetPayload)}
+	<ul use:block.attach>
+		{#if children}
+			<div>
+				{@render children()}
+			</div>
+		{/if}
+	</ul>
+{/snippet}
+
+{#snippet listItem({ block, content, children }: BlockSnippetPayload)}
+	<li use:block.attach>
+		<div>{@render content()}</div>
+		{#if children}
+			<div>
+				{@render children()}
+			</div>
+		{/if}
+	</li>
+{/snippet}
+
+{#snippet horizontalRule({ block }: BlockSnippetPayload)}
+	<hr use:block.attach use:block.void />
+{/snippet}

package/dist/plugins/richtext/RichTextPlugin.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from '../../plugins.js';
+import type { SerializableContent } from '../../utils/json.js';
+import type { Edytor } from '../../edytor.svelte.js';
+export declare const richTextOperations: (edytor: Edytor) => {
+    removeAllMarksAtRange: () => void;
+    setMarkAtRange: (mark: "bold" | "italic" | "underline" | "code" | "link" | "strike" | "superscript" | "subscript" | "color" | "highlight", value?: SerializableContent) => void;
+};
+export declare const richTextPlugin: Plugin;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RichTextPlugin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RichTextPlugin = InstanceType<typeof RichTextPlugin>;
+export default RichTextPlugin;

package/dist/plugins.d.ts

@@ -0,0 +1,202 @@
+import type { Snippet } from 'svelte';
+import type { Edytor } from './edytor.svelte.js';
+import type { Block } from './block/block.svelte.js';
+import type { JSONBlock, JSONText } from './utils/json.js';
+import type { Text } from './text/text.svelte.js';
+import type { SerializableContent } from './utils/json.js';
+import type { HotKey, HotKeyCombination } from './hotkeys.js';
+import type { TextOperations } from './text/text.utils.js';
+import type { BlockOperations } from './block/block.utils.js';
+import type { EdytorSelection } from './selection/selection.svelte.js';
+import type { InlineBlock } from './block/inlineBlock.svelte.js';
+/**
+ * Represents the payload for mark snippets with generic serializable content.
+ * @template D - The type of serializable content
+ */
+export type MarkSnippetPayload<D extends SerializableContent = SerializableContent> = {
+    content: Snippet;
+    mark: D;
+    text: Text;
+};
+/**
+ * Function type for preventing default behavior with an optional callback.
+ */
+type Prevent = (cb?: () => void) => void;
+/**
+ * Represents the payload for block snippets with generic serializable content.
+ * @template D - The type of serializable content
+ */
+export type BlockSnippetPayload<D extends SerializableContent = SerializableContent> = {
+    block: Block;
+    content: Snippet;
+    children: Snippet | null;
+};
+/**
+ * Represents the payload for change operations on blocks and text.
+ * Combines both text operations and block operations with prevention capability.
+ */
+type ChangePayload = {
+    block: Block;
+    prevent: Prevent;
+} & ({
+    [K in keyof TextOperations]: {
+        operation: K;
+        text: Text;
+        payload: TextOperations[K];
+    };
+}[keyof TextOperations] | {
+    [K in keyof BlockOperations]: {
+        operation: K;
+        payload: BlockOperations[K];
+    };
+}[keyof BlockOperations]);
+/**
+ * Function type for transforming content within a text block.
+ */
+export type ContentTransformer = (payload: {
+    text: Text;
+    block: Block;
+    content: JSONText[];
+}) => JSONText[];
+/**
+ * Defines the structure of plugin definitions including marks, blocks, inline blocks, and hotkeys.
+ */
+export type PluginDefinitions = {
+    marks?: Record<string, MarkDefinition | Snippet<[MarkSnippetPayload<any>]>>;
+    blocks?: Record<string, BlockDefinition | Snippet<[BlockSnippetPayload<any>]>>;
+    inlineBlocks?: Record<string, InlineBlockDefinition | Snippet<[InlineBlockSnippetPayload<any>]>>;
+    hotkeys?: Partial<Record<HotKeyCombination, HotKey>>;
+};
+/**
+ * Plugin factory function type that creates plugin definitions and operations.
+ */
+export type Plugin = (editor: Edytor) => PluginDefinitions & PluginOperations;
+/**
+ * Defines the available operations and hooks for plugins.
+ */
+export type PluginOperations = {
+    /** Called before an operation is executed */
+    onBeforeOperation?: <C extends ChangePayload>(payload: C) => C['payload'] | void;
+    /** Called after an operation is executed */
+    onAfterOperation?: <C extends Omit<ChangePayload, 'prevent'>>(payload: C) => void;
+    /** Called when the editor value changes */
+    onChange?: (value: JSONBlock) => void;
+    /** Called when the selection changes */
+    onSelectionChange?: (selection: EdytorSelection) => void;
+    /** Placeholder content for empty blocks */
+    placeholder?: string | Snippet<[{
+        block: Block;
+    }]>;
+    /** Called when the editor is attached to the DOM */
+    onEdytorAttached?: (payload: {
+        node: HTMLElement;
+    }) => () => void;
+    /** Called when a block is attached to the DOM */
+    onBlockAttached?: (payload: {
+        node: HTMLElement;
+        block: Block;
+    }) => () => void;
+    /** Called when text is attached to the DOM */
+    onTextAttached?: (payload: {
+        node: HTMLElement;
+        text: Text;
+    }) => () => void;
+    /** Defines the default block type */
+    defaultBlock?: string | ((parent: Block) => string | void);
+    /** Called when selected blocks are deleted */
+    onDeleteSelectedBlocks?: (payload: {
+        prevent: Prevent;
+        selectedBlocks: Block[];
+    }) => void;
+    /** Called before input is processed */
+    onBeforeInput?: (payload: {
+        prevent: Prevent;
+        e: InputEvent;
+    }) => void;
+};
+/**
+ * Defines the structure and behavior of a block type.
+ */
+export type BlockDefinition = {
+    /** The block's rendering snippet */
+    snippet: Snippet<[BlockSnippetPayload<any>]>;
+    /** Whether the block is void (not editable)
+     *
+     * Void blocks are blocks that are not editable by the edytor.
+     * They can be nested inside other blocks
+     * They can not be merged with other blocks
+     * If the content of the void block is rendered, it will still be editable. This to allow for rendering caption of the void block. I
+     * In void blocks the content is treated as an island
+     *
+     */
+    void?: boolean;
+    /** Whether the block is an island.
+     *
+     * Island blocks are blocks that are independent of the document.
+     *
+     * They are editable
+     *
+     * They can be nested inside other blocks
+     *
+     * But their children can not be nested or merged with other blocks
+     *
+     * Their structure will remain as if.
+     *
+     * In case of a merge operation, the island block will be merged with the parent block and all its children will ne unnest and set to the default block type without being added as children of the merge destination block. The same wil happen to the island's content.
+     */
+    island?: boolean;
+    /** Transform text content within the block
+     *
+     * This transformation is applied after the text is synced in to the state.
+     *
+     * You can use it to render custom marks decorations on the text like code tokens that are not stored in the document.
+     */
+    transformText?: (payload: {
+        text: Text;
+        block: Block;
+        content: JSONText[];
+    }) => JSONText[];
+    /** Called when the block receives focus */
+    onFocus?: (payload: {
+        block: Block;
+    }) => void;
+    /** Called when the block loses focus */
+    onBlur?: (payload: {
+        block: Block;
+    }) => void;
+    /** Called when the block is selected */
+    onSelect?: (payload: {
+        block: Block;
+    }) => void;
+    /** Called when the block is deselected */
+    onDeselect?: (payload: {
+        block: Block;
+    }) => void;
+    /** Normalize block content
+     * This is called after each operation on the block.
+     * You may want to work with the yjs types directly because the operation has not been synced in to the state yet.
+     * If you return a function, it will be executed otherwise it will be ignored.
+     */
+    normalizeContent?: (payload: {
+        block: Block;
+    }) => (() => void) | void;
+    /** Schema for synchronization state data. It uses syncroState
+     *
+     * See https://github.com/beynar/syncrostate
+     *
+     */
+    schema?: any;
+};
+export type InlineBlockSnippetPayload<D extends SerializableContent = SerializableContent> = {
+    block: InlineBlock;
+};
+export type InlineBlockDefinition = {
+    snippet: Snippet<[InlineBlockSnippetPayload<any>]>;
+};
+export type MarkDefinition = {
+    snippet: Snippet<[MarkSnippetPayload<any>]>;
+    void?: boolean;
+    schema?: any;
+};
+export type InitializedPlugin = ReturnType<Plugin>;
+export {};

package/dist/plugins.js

@@ -0,0 +1,19 @@
+export {};
+// TODO: add arrow events
+// TODO: add onBeforeInput event
+// TODO: add block focus and selection events
+// TODO: add a cmd+a selection all event
+//
+// ISLAND BLOCKS
+// Island blocks are blocks that are independent of the document.
+// They are editable
+// They can be nested inside other blocks
+// But their children can not be nested or merged with other blocks
+// Their structure will remain as if or will not.
+// In case of a merge operation, the island block will be merged with the parent block and all its children will ne unnest and set to the default block type without being added as children of the merge destination block. The same wil happen to the island's content.
+// VOID BLOCKS
+// Void blocks are blocks that are not editable
+// They can be nested inside other blocks
+// They can not accept children nor be merged with other blocks
+// If the content of the void block is rendered, it will still be editable. This to allow for rendering caption of the void block. I
+// In void blocks the content is treated as an island

package/dist/selection/selection.svelte.d.ts

@@ -0,0 +1,68 @@
+import { type RelativePosition } from 'yjs';
+import type { Edytor } from '../edytor.svelte.js';
+import { Text } from '../text/text.svelte.js';
+import { Block } from '../block/block.svelte.js';
+import { SvelteSet } from 'svelte/reactivity';
+import { InlineBlock } from '../block/inlineBlock.svelte.js';
+type SelectionState = {
+    selection: Selection | null;
+    yStart: number;
+    yEnd: number;
+    start: number;
+    end: number;
+    length: number;
+    content: string;
+    isCollapsed: boolean;
+    ranges: Range[];
+    isAtStartOfBlock?: boolean;
+    isAtEndOfBlock?: boolean;
+    isAtStartOfText?: boolean;
+    isAtEndOfText?: boolean;
+    startText: Text | null;
+    endText: Text | null;
+    startBlock: Block | null;
+    endBlock: Block | null;
+    texts: Text[];
+    contentParts: (Text | InlineBlock)[];
+    blocks: Block[];
+    startNode: Node | null;
+    endNode: Node | null;
+    isTextSpanning: boolean;
+    isBlockSpanning: boolean;
+    isVoid: boolean;
+    voidRoot: Block | null;
+    isIsland: boolean;
+    islandRoot: Block | null;
+    relativePosition: RelativePosition | null;
+    yTextContent: string;
+};
+export declare class EdytorSelection {
+    private edytorOnSelectionChange?;
+    edytor: Edytor;
+    focusedBlocks: SvelteSet<Block>;
+    selectedBlocks: SvelteSet<Block>;
+    hasSelectedAll: boolean;
+    state: SelectionState;
+    constructor(edytor: Edytor, edytorOnSelectionChange?: ((selection: EdytorSelection) => void) | undefined);
+    destroy: () => void;
+    getTextOfNode: (node: Node | null) => Text | null;
+    getTextsInSelection: (startNode: Node | null, endNode: Node | null, ranges: Range[]) => {
+        startText: Text | null;
+        endText: Text | null;
+        texts: Text[];
+    };
+    init: () => void;
+    handleTripleClick: (e: MouseEvent) => Promise<void>;
+    shift: (length: number) => Promise<void>;
+    onSelectionChange: () => Promise<void> | undefined;
+    restoreRelativePosition: (text: Text) => void;
+    selectBlocks: (...blocks: Block[]) => void;
+    focusBlocks: (...blocks: Block[]) => void;
+    private findTextNode;
+    setAtTextOffset: (textOrId: Text | string | undefined | null, textOffset?: number | null | undefined) => Promise<void>;
+    setAtTextsRange: (startText: Text, endText: Text) => Promise<void>;
+    setAtBlockRange: (block?: Block | null, startOffset?: number, endOffset?: number) => Promise<void>;
+    setAtTextRange: (text: Text | undefined | null, start: number | undefined | null, end: number | undefined | null) => Promise<void>;
+    setAtNodeOffset: (node: Node, offset: number) => void;
+}
+export {};