edytor 0.0.7 → 0.0.9

package/dist/components/Content.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Block } from '../block/block.svelte.js';
+	import { Text } from '../text/text.svelte.js';
+	import RenderText from './Text.svelte';
+	import RenderInlineBlock from './InlineBlock.svelte';
+	import { InlineBlock } from '../block/inlineBlock.svelte.js';
+
+	let {
+		block
+	}: {
+		block: Block;
+	} = $props();
+</script>
+
+{#snippet renderContent(content: (Text | InlineBlock)[])}
+	{#each content as blockOrText (blockOrText.id)}
+		{#if 'children' in blockOrText}
+			<RenderText text={blockOrText} />
+		{:else}
+			<RenderInlineBlock block={blockOrText} />
+		{/if}
+	{/each}
+{/snippet}
+{@render renderContent(
+	block.content
+)}<!--
+-->{#if block?.content.length === 1 && (block.content[0] as Text)?.isEmpty && block.edytor.placeholder}
+	<span data-edytor-text-placeholder contentEditable="false" style="user-select: none;">
+		{#if typeof block.edytor.placeholder === 'string'}
+			{block.edytor.placeholder}
+		{:else}
+			{@render block.edytor.placeholder({ block })}
+		{/if}
+	</span>
+{/if}<!--
+-->{#if block?.suggestions}
+	<span
+		data-edytor-text-suggestion
+		contentEditable="false"
+		style="user-select: none; pointer-events: none"
+	>
+		{@render renderContent(block.suggestions)}
+	</span>
+{/if}

package/dist/components/Content.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Block } from '../block/block.svelte.js';
+type $$ComponentProps = {
+    block: Block;
+};
+declare const Content: import("svelte").Component<$$ComponentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/Edytor.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+	import { Edytor, useEdytor, type Snippets } from '../edytor.svelte.js';
+	import { Awareness } from 'y-protocols/awareness';
+	export { Edytor as EdytorContext, useEdytor };
+	import type { Plugin } from '../plugins.js';
+	import type { Block as BlockType } from '../block/block.svelte.js';
+	const defaultValue: JSONDoc = {
+		children: [
+			{
+				type: 'paragraph',
+				content: [{ text: 'One', marks: { bold: true } }]
+			},
+
+			{
+				type: 'image',
+				content: [{ text: 'Caption' }]
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{ text: 'One', marks: { bold: true } },
+					{ text: ' Two', marks: { italic: true } }
+				]
+			},
+			{
+				type: 'paragraph',
+				content: [{ text: '' }]
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{ text: 'Three', marks: { italic: true } },
+					{ text: ' Four', marks: { bold: true } },
+					{ text: '' }
+				]
+			},
+
+			{
+				type: 'paragraph',
+				content: [
+					{ text: 'Hello', marks: { bold: true } },
+					{ text: '', marks: { void: true } },
+					{ text: ' World', marks: { bold: true } }
+				]
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{ text: 'hello', marks: { bold: true } },
+					{
+						type: 'mention'
+					},
+					{ text: 'World', marks: { bold: true } },
+					{
+						type: 'mention'
+					},
+					{ text: 'Prout', marks: { bold: true } }
+				],
+
+				children: [
+					{
+						type: 'paragraph',
+						content: [{ text: 'One', marks: { bold: true } }],
+						children: [
+							{
+								type: 'paragraph',
+								content: [{ text: 'Two', marks: { bold: true } }]
+							}
+						]
+					}
+				]
+			},
+			{
+				type: 'code',
+				content: [{ text: 'caption yo' }],
+				children: [{ type: 'codeLine', content: [{ text: '\t\tconsole.log("hello")' }] }]
+			}
+		]
+	};
+
+	export type EdytorProps = Snippets & {
+		plugins?: Plugin[];
+		class?: string;
+		edytor?: Edytor;
+		doc?: Y.Doc;
+		awareness?: Awareness;
+		readonly?: boolean;
+		hotKeys?: Record<string, HotKey>;
+		onChange?: (value: JSONBlock) => void;
+		onSelectionChange?: (selection: EdytorSelection) => void;
+		value?: JSONDoc;
+		placeholder?: string | Snippet<[{ block: BlockType }]>;
+		sync?: ({
+			doc,
+			awareness,
+			synced
+		}: {
+			doc: Y.Doc;
+			awareness: Awareness;
+			synced: (provider?: any) => void;
+		}) => void;
+	};
+</script>
+
+<script lang="ts">
+	import * as Y from 'yjs';
+	import type { JSONBlock, JSONDoc } from '../utils/json.js';
+	import { onMount, setContext, type Snippet } from 'svelte';
+	import type { HotKey } from '../hotkeys.js';
+	import type { EdytorSelection } from '../selection/selection.svelte.js';
+	import ReadonlyEditor from './ReadonlyEditor.svelte';
+	import Block from './Block.svelte';
+
+	let {
+		plugins,
+		class: className,
+		edytor = $bindable(),
+		doc,
+		readonly = false,
+		value = $bindable(defaultValue),
+		hotKeys,
+		sync,
+		awareness,
+		onChange,
+		onSelectionChange,
+		placeholder,
+		...snippets
+	}: EdytorProps = $props();
+
+	edytor = new Edytor({
+		snippets,
+		readonly,
+		plugins,
+		doc,
+		awareness,
+		hotKeys,
+		onSelectionChange,
+		onChange,
+		sync: !!sync,
+		value,
+		placeholder
+	});
+
+	onMount(() => {
+		if (!readonly && sync) {
+			sync({
+				doc: edytor.doc,
+				awareness: edytor.awareness,
+				synced: () => {
+					edytor.sync(value);
+				}
+			});
+		}
+	});
+
+	setContext('edytor', edytor);
+</script>
+
+{#if edytor.synced || readonly}
+	<div class={className} use:edytor.attach data-edytor contenteditable={!readonly}>
+		{#each edytor.root?.children || [] as block (block.id)}
+			<Block {block} />
+		{/each}
+	</div>
+{/if}

package/dist/components/Edytor.svelte.d.ts

@@ -0,0 +1,33 @@
+import { Edytor, useEdytor, type Snippets } from '../edytor.svelte.js';
+import { Awareness } from 'y-protocols/awareness';
+export { Edytor as EdytorContext, useEdytor };
+import type { Plugin } from '../plugins.js';
+import type { Block as BlockType } from '../block/block.svelte.js';
+export type EdytorProps = Snippets & {
+    plugins?: Plugin[];
+    class?: string;
+    edytor?: Edytor;
+    doc?: Y.Doc;
+    awareness?: Awareness;
+    readonly?: boolean;
+    hotKeys?: Record<string, HotKey>;
+    onChange?: (value: JSONBlock) => void;
+    onSelectionChange?: (selection: EdytorSelection) => void;
+    value?: JSONDoc;
+    placeholder?: string | Snippet<[{
+        block: BlockType;
+    }]>;
+    sync?: ({ doc, awareness, synced }: {
+        doc: Y.Doc;
+        awareness: Awareness;
+        synced: (provider?: any) => void;
+    }) => void;
+};
+import * as Y from 'yjs';
+import type { JSONBlock, JSONDoc } from '../utils/json.js';
+import { type Snippet } from 'svelte';
+import type { HotKey } from '../hotkeys.js';
+import type { EdytorSelection } from '../selection/selection.svelte.js';
+declare const Edytor: import("svelte").Component<EdytorProps, {}, "edytor" | "value">;
+type Edytor = ReturnType<typeof Edytor>;
+export default Edytor;

package/dist/components/InlineBlock.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { InlineBlock } from '../block/inlineBlock.svelte.js';
+
+	let {
+		block
+	}: {
+		block: InlineBlock;
+	} = $props();
+
+	const snippet = $derived(block.definition.snippet);
+</script>
+
+{#if snippet}
+	<span data-edytor-inline-block use:block.attach>
+		{@render snippet({ block })}
+	</span>
+{/if}

package/dist/components/InlineBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import { InlineBlock } from '../block/inlineBlock.svelte.js';
+type $$ComponentProps = {
+    block: InlineBlock;
+};
+declare const InlineBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type InlineBlock = ReturnType<typeof InlineBlock>;
+export default InlineBlock;

package/dist/components/Mark.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Text } from '../text/text.svelte.js';
+	import Mark from './Mark.svelte';
+	import type { JSONDelta } from '../text/deltas.js';
+
+	let {
+		delta,
+		text,
+		index
+	}: {
+		text: Text;
+		delta: JSONDelta;
+		index: number;
+	} = $props();
+
+	const mark = $derived(delta.marks[index]);
+	const definition = $derived(text.edytor.marks.get(mark?.[0]));
+</script>
+
+{#snippet content()}
+	{#if delta.marks[index + 1]}
+		<Mark index={index + 1} {delta} {text} />
+	{:else}
+		{delta.text}
+	{/if}
+{/snippet}
+
+{#if definition?.snippet}
+	{#if definition.void}
+		<span data-edytor-mark-void contenteditable="false">
+			{@render definition.snippet({ content, mark: mark?.[1], text })}
+		</span>
+	{:else}
+		{@render definition.snippet({ content, mark: mark?.[1], text })}
+	{/if}
+{:else}
+	{@render content()}
+{/if}

package/dist/components/Mark.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Text } from '../text/text.svelte.js';
+import Mark from './Mark.svelte';
+import type { JSONDelta } from '../text/deltas.js';
+type $$ComponentProps = {
+    text: Text;
+    delta: JSONDelta;
+    index: number;
+};
+declare const Mark: import("svelte").Component<$$ComponentProps, {}, "">;
+type Mark = ReturnType<typeof Mark>;
+export default Mark;

package/dist/components/ReadonlyEditor.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { JSONBlock } from '../utils/json.js';
+	import { type EdytorProps } from './Edytor.svelte';
+	import { createReadonlyBlock } from './readonlyElements.svelte.js';
+	import Block from './Block.svelte';
+	import { Edytor } from '../edytor.svelte.js';
+	let {
+		value,
+		class: className,
+		plugins,
+		...snippets
+	}: Omit<
+		EdytorProps,
+		| 'awareness'
+		| 'readonly'
+		| 'hotKeys'
+		| 'onChange'
+		| 'onSelectionChange'
+		| 'sync'
+		| 'edytor'
+		| 'doc'
+	> = $props();
+
+	const generateReadonlyBlock = (block: JSONBlock) => {
+		return createReadonlyBlock({
+			block,
+			edytor,
+			parent: edytor
+		});
+	};
+
+	const children = $derived(value!.children.map(generateReadonlyBlock));
+
+	const edytor = new Edytor({
+		snippets,
+		readonly: true,
+		plugins,
+		value
+	});
+</script>
+
+<div class={className} data-edytor contenteditable="false">
+	{#each children || [] as block (block.id)}
+		<Block {block} />
+	{/each}
+</div>

package/dist/components/ReadonlyEditor.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type EdytorProps } from './Edytor.svelte';
+declare const ReadonlyEditor: import("svelte").Component<Omit<EdytorProps, "edytor" | "hotKeys" | "readonly" | "doc" | "awareness" | "sync" | "onSelectionChange" | "onChange">, {}, "">;
+type ReadonlyEditor = ReturnType<typeof ReadonlyEditor>;
+export default ReadonlyEditor;

package/dist/components/Text.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Text } from '../text/text.svelte.js';
+	import Mark from './Mark.svelte';
+	let {
+		text
+	}: {
+		text: Text;
+	} = $props();
+</script>
+
+<!-- The comment blocks are needed to prevent unwanted text nodes with whitespace. -->
+<!-- thanks for the tip: https://github.com/michael/svedit/blob/main/src/lib/Text.svelte -->
+
+<span use:text.attach style:white-space="break-spaces"
+	><!--
+-->{#if text.isEmpty}<!--
+-->&#8203;<!--
+-->{:else}<!--
+-->{#each text.children as delta (delta.id)}<!--
+-->{#if delta.marks.length}<!--
+--><Mark
+					{delta}
+					index={0}
+					{text}
+				/><!--
+-->{:else}<!--
+-->{delta.text}<!--
+-->{/if}<!--
+-->{/each}<!--
+-->{/if}<!--
+-->{#if text.endsWithNewline}<!--
+--><span
+			class="newline">&#8203;</span
+		><!--
+-->{/if}<!--
+--></span
+>

package/dist/components/Text.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Text } from '../text/text.svelte.js';
+type $$ComponentProps = {
+    text: Text;
+};
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/readonlyElements.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { InlineBlock } from '../block/inlineBlock.svelte.js';
+import type { BlockDefinition, InlineBlockDefinition } from '../plugins.js';
+import { type JSONDelta } from '../text/deltas.js';
+import type { JSONBlock, JSONInlineBlock, JSONText } from '../utils/json.js';
+import type { Block } from '../block/block.svelte.js';
+import type { Edytor } from '../edytor.svelte.js';
+import type { Text } from '../text/text.svelte.js';
+declare class ReadonlyBlock {
+    readonly: boolean;
+    edytor: Edytor;
+    parent: ReadonlyBlock | Block | Edytor;
+    type: string;
+    value: JSONBlock;
+    children: ReadonlyBlock[];
+    content: (ReadonlyText | ReadonlyInlineBlock)[];
+    id: string;
+    definition: BlockDefinition;
+    selected: boolean;
+    focused: boolean;
+    insideIsland: boolean;
+    isEmpty: boolean;
+    hasChildren: boolean;
+    hasContent: boolean;
+    node: HTMLElement | undefined;
+    suggestions: undefined;
+    constructor({ block, edytor, parent }: {
+        edytor: Edytor;
+        parent: ReadonlyBlock | Block | Edytor;
+        block: JSONBlock;
+    });
+    attach(node: HTMLElement): void;
+    void: (node: HTMLElement) => void;
+}
+export declare const createReadonlyBlock: ({ edytor, parent, block }: {
+    edytor: Edytor;
+    parent: ReadonlyBlock | Block | Edytor;
+    block: JSONBlock;
+}) => Block;
+export declare const createReadonlyInlineBlock: ({ edytor, parent, block }: {
+    edytor: Edytor;
+    parent: ReadonlyBlock | Block | Edytor;
+    block: JSONInlineBlock;
+}) => InlineBlock;
+export declare const createReadonlyText: ({ edytor, parent, value }: {
+    edytor: Edytor;
+    parent: ReadonlyBlock | Block;
+    value: JSONText[];
+}) => Text;
+export declare class ReadonlyText {
+    #private;
+    readonly: boolean;
+    edytor: Edytor;
+    parent: ReadonlyBlock | Block;
+    stringContent: string;
+    node: HTMLElement | undefined;
+    isEmpty: boolean;
+    endsWithNewline: boolean;
+    id: string;
+    length: number;
+    get value(): JSONText[];
+    get children(): JSONDelta[];
+    constructor({ value, parent, edytor }: {
+        value: JSONText[];
+        parent: ReadonlyBlock | Block;
+        edytor: Edytor;
+    });
+    attach(node: HTMLElement): void;
+}
+declare class ReadonlyInlineBlock {
+    readonly: boolean;
+    edytor: Edytor;
+    parent: ReadonlyBlock | Block | Edytor;
+    type: string;
+    data: {};
+    definition: InlineBlockDefinition;
+    constructor({ parent, block, edytor }: {
+        parent: ReadonlyBlock | Block | Edytor;
+        block: JSONInlineBlock;
+        edytor: Edytor;
+    });
+}
+export {};

package/dist/components/readonlyElements.svelte.js

@@ -0,0 +1,144 @@
+import { deltaToJson, jsonToDelta, toDeltas } from '../text/deltas.js';
+import { id } from '../utils.js';
+import { DEV } from 'esm-env';
+class ReadonlyBlock {
+    readonly = true;
+    edytor;
+    parent;
+    type;
+    value;
+    children;
+    content;
+    id;
+    definition;
+    selected = false;
+    focused = false;
+    insideIsland = false;
+    isEmpty;
+    hasChildren;
+    hasContent;
+    node;
+    suggestions = undefined;
+    constructor({ block, edytor, parent }) {
+        this.definition = edytor.getBlockDefinition('block', block.type);
+        this.id = block.id || id('b');
+        this.type = block.type;
+        this.edytor = edytor;
+        this.parent = parent;
+        this.value = block;
+        this.children =
+            block.children?.map((block) => new ReadonlyBlock({ block, edytor, parent })) || [];
+        this.content =
+            block.content?.map((child) => {
+                if ('type' in child) {
+                    return new ReadonlyInlineBlock({
+                        block: child,
+                        parent,
+                        edytor
+                    });
+                }
+                else {
+                    return new ReadonlyText({ value: [child], parent: this, edytor });
+                }
+            }) || [];
+        this.hasChildren = this.children.length > 0;
+        this.hasContent =
+            this.content.length > 0 &&
+                this.content.some((part) => part instanceof ReadonlyText && !part.isEmpty);
+        this.isEmpty = !this.hasChildren && !this.hasContent;
+    }
+    attach(node) {
+        node.contentEditable = 'false';
+        this.node = node;
+    }
+    void = (node) => {
+        // node.contentEditable = 'false';
+    };
+}
+const createProxy = (target) => {
+    return new Proxy(target, {
+        get(target, prop) {
+            if (typeof prop === 'string' && prop in target) {
+                const value = target[prop];
+                console.log({ value });
+                // Handle functions by binding them to the target
+                return value;
+            }
+            if (DEV) {
+                console.warn(`[ReadonlyBlock] Access to property "${String(prop)}" is forbidden in readonly mode`);
+            }
+            // Return a proxy for undefined to allow for safe chaining
+            return createProxy({});
+        },
+        apply(target, thisArg, args) {
+            if (typeof target === 'function') {
+                return target.apply(thisArg, args);
+            }
+            if (DEV) {
+                console.warn(`[ReadonlyBlock] Attempted to call a non-function value in readonly mode`, {
+                    target
+                });
+            }
+            return createProxy({});
+        }
+    });
+};
+export const createReadonlyBlock = ({ edytor, parent, block }) => {
+    return createProxy(new ReadonlyBlock({ block, edytor, parent }));
+};
+export const createReadonlyInlineBlock = ({ edytor, parent, block }) => {
+    return createProxy(new ReadonlyInlineBlock({ block, edytor, parent }));
+};
+export const createReadonlyText = ({ edytor, parent, value }) => {
+    return createProxy(new ReadonlyText({ value, parent, edytor }));
+};
+export class ReadonlyText {
+    readonly = true;
+    edytor;
+    parent;
+    #children;
+    stringContent;
+    node;
+    isEmpty;
+    endsWithNewline;
+    id;
+    length;
+    get value() {
+        return deltaToJson(this.#children);
+    }
+    get children() {
+        const transformer = this.parent.definition?.transformText;
+        return transformer
+            ? jsonToDelta(
+            // @ts-expect-error
+            transformer({ text: this, block: this.parent, content: deltaToJson(this.#children) }))
+            : this.#children;
+    }
+    constructor({ value, parent, edytor }) {
+        this.#children = jsonToDelta(value);
+        this.stringContent = value.map((child) => child.text).join('');
+        this.isEmpty = this.stringContent.length === 0;
+        this.parent = parent;
+        this.endsWithNewline = this.stringContent.endsWith('\n');
+        this.id = id('t');
+        this.edytor = edytor;
+        this.length = this.children.reduce((acc, child) => acc + child.text.length, 0);
+    }
+    attach(node) {
+        this.node = node;
+    }
+}
+class ReadonlyInlineBlock {
+    readonly = true;
+    edytor;
+    parent;
+    type;
+    data = {};
+    definition;
+    constructor({ parent, block, edytor }) {
+        this.type = block.type;
+        this.definition = edytor.getBlockDefinition('inline', this.type);
+        this.parent = parent;
+        this.edytor = parent.edytor;
+    }
+}

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare class TRANSACTION {
+}
+export declare class UndoTracker {
+}

package/dist/constants.js

@@ -0,0 +1,4 @@
+export class TRANSACTION {
+}
+export class UndoTracker {
+}

package/dist/dnd.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Block } from './block/block.svelte.js';
+type DnDOptions = {
+    onDrop?: (source: Block, target: Block, position: 'before' | 'after' | 'inside') => void;
+    canDrop?: (source: Block, target: Block) => boolean;
+};
+export declare class DnD {
+    private state;
+    private options;
+    private uniqueContextId;
+    constructor(options?: DnDOptions);
+    private calculateDropPosition;
+    private updateDropIndicator;
+    attach: (element: HTMLElement, block: Block) => {
+        destroy(): void;
+    };
+}
+export {};