edytor 0.0.7 → 0.0.8

package/dist/plugins/arrowMove/arrowMove.js

@@ -0,0 +1,66 @@
+import {} from '../../plugins.js';
+import { tick } from 'svelte';
+export const arrowMovePlugin = (edytor) => {
+    return {
+        hotkeys: {
+            'mod+arrowdown': ({ prevent }) => {
+                const selectedBlocks = edytor.selection.selectedBlocks;
+                if (selectedBlocks.size === 1) {
+                    const selectedBlock = selectedBlocks.values().next().value;
+                    if (!selectedBlock)
+                        return;
+                    prevent(() => {
+                        const path = selectedBlock.path;
+                        console.log({ path: [...path] });
+                        if (selectedBlock.parent &&
+                            path?.at(-1) === selectedBlock.parent?.children.length - 1) {
+                            // If the block is nested and is the last child, we need to unest the block i.e pop the last path index
+                            path.pop();
+                        }
+                        // Then we just increment the last index
+                        path[path.length - 1]++;
+                        if (selectedBlock?.nextBlock?.hasChildren &&
+                            !selectedBlock?.nextBlock?.definition.island) {
+                            path.push(0);
+                        }
+                        const newBlock = selectedBlock.moveBlock({ path });
+                        if (newBlock) {
+                            tick().then(() => {
+                                edytor.selection.selectBlocks(newBlock);
+                            });
+                        }
+                    });
+                }
+            },
+            'mod+arrowup': ({ prevent }) => {
+                const selectedBlocks = edytor.selection.selectedBlocks;
+                if (selectedBlocks.size === 1) {
+                    const selectedBlock = selectedBlocks.values().next().value;
+                    if (!selectedBlock)
+                        return;
+                    prevent(() => {
+                        const path = selectedBlock.path;
+                        if (path?.at(-1) === 0) {
+                            // If the block is nested and is the first child, we need to unest the block i.e pop the last path index
+                            path.pop();
+                        }
+                        else {
+                            // Other wise just decrement the last index
+                            path[path.length - 1]--;
+                        }
+                        if (selectedBlock?.previousBlock?.hasChildren &&
+                            !selectedBlock?.previousBlock?.definition.island) {
+                            path.push(selectedBlock.previousBlock.children.length);
+                        }
+                        const newBlock = selectedBlock.moveBlock({ path });
+                        if (newBlock) {
+                            tick().then(() => {
+                                edytor.selection.selectBlocks(newBlock);
+                            });
+                        }
+                    });
+                }
+            }
+        }
+    };
+};

package/dist/plugins/code/CodePlugin.svelte

@@ -0,0 +1,218 @@
+<script module lang="ts">
+	import Prism from 'prismjs';
+	import './prism.css';
+	import 'prismjs/components/prism-jsx';
+	import 'prismjs/components/prism-css';
+	import type { Plugin, MarkSnippetPayload, BlockSnippetPayload } from '../../plugins.js';
+	import type { JSONText } from '../../utils/json.js';
+	import { id, prevent } from '../../utils.js';
+	import { Text } from '../../text/text.svelte.js';
+	import { Block } from '../../block/block.svelte.js';
+
+	import * as Y from 'yjs';
+
+	export const codePlugin: Plugin = (edytor) => {
+		return {
+			hotkeys: {
+				'mod+a': ({ prevent }) => {
+					const { islandRoot, startBlock, isAtEndOfBlock, isAtStartOfBlock } =
+						edytor.selection.state;
+					if (
+						startBlock?.type === 'codeLine' &&
+						!edytor.selection.selectedBlocks.size &&
+						!(isAtEndOfBlock && isAtStartOfBlock)
+					) {
+						prevent(() => {
+							const firstText = islandRoot?.firstEditableText;
+							let lastText = islandRoot?.lastEditableText;
+							if (firstText && lastText && firstText instanceof Text && lastText instanceof Text) {
+								edytor.selection.setAtTextsRange(firstText, lastText);
+							}
+						});
+					}
+				},
+				escape: () => {
+					const { startBlock } = edytor.selection.state;
+					if (startBlock?.type === 'codeLine' && startBlock?.suggestions) {
+						startBlock.suggestions = null;
+					}
+				},
+				tab: ({ prevent }) => {
+					const { startText, yStart, startBlock } = edytor.selection.state;
+					if (startText?.parent.type === 'codeLine') {
+						prevent(() => {
+							if (startBlock?.suggestions) {
+								startBlock.acceptSuggestedText();
+								edytor.selection.setAtTextOffset(startText, startText.yText.length);
+							} else {
+								if (startText) {
+									startText.insertText({ value: '\t' });
+									edytor.selection.setAtTextOffset(startText, yStart + 1);
+								}
+							}
+						});
+					}
+				},
+				'shift+enter': () => {
+					const { startText } = edytor.selection.state;
+					if (startText?.parent.type === 'codeLine') {
+						prevent(() => {
+							const event = new InputEvent('', {
+								inputType: 'insertParagraph'
+							});
+							edytor.onBeforeInput(event);
+						});
+					}
+				}
+			},
+			defaultBlock: (parent) => {
+				if (parent.type === 'code' || parent.type === 'codeLine') {
+					return 'codeLine';
+				}
+			},
+			onBeforeOperation: ({ operation, payload, block }) => {
+				if (block.closestNextBlock?.type === 'code' && operation === 'mergeBlockForward') {
+					if (block.isEmpty) {
+						prevent(() => {
+							block.mergeBlockBackward();
+						});
+					} else {
+						prevent();
+					}
+				}
+				if (block.type === 'codeLine') {
+					const selection = edytor.selection.state;
+					const isCollapsed = selection.isCollapsed;
+					if (operation === 'insertText') {
+						if (isCollapsed) {
+							if (payload.value === '{') {
+								payload.value = '{}';
+							}
+							if (payload.value === '[') {
+								payload.value = '[]';
+							}
+							if (payload.value === '(') {
+								payload.value = '()';
+							}
+							if (payload.value === '"') {
+								payload.value = '""';
+							}
+							if (payload.value === "'") {
+								payload.value = "''";
+							}
+						}
+					}
+
+					if (operation === 'mergeBlockBackward' && block.parent.children.length === 1) {
+						prevent();
+					}
+					if (
+						operation === 'mergeBlockForward' &&
+						block.index === block.parent.children.length - 1
+					) {
+						prevent();
+					}
+				}
+			},
+
+			blocks: {
+				code: {
+					snippet: code,
+					island: true
+				},
+				codeLine: {
+					snippet: codeLine,
+					transformText: ({ text }) => {
+						const tokens = Prism.tokenize(text.stringContent, Prism.languages['jsx']);
+						return tokens.map((token) => {
+							if (typeof token === 'string') {
+								return {
+									text: token
+								};
+							}
+							return {
+								marks: { codeToken: token.type },
+								text: token.content
+							};
+						}) as JSONText[];
+					},
+					normalizeContent: ({ block }) => {
+						// here we need to check if the code line has soft line breaks and if so, we need to insert a new code line after the current one.
+						const firstContent = block.content[0];
+						if (!(firstContent instanceof Text)) return;
+
+						const yText = firstContent.yText;
+						if (!(yText instanceof Y.Text)) return;
+
+						const content = yText.toString();
+						const lines = content.split('\n');
+
+						if (lines.length > 1) {
+							// Remove the current content
+							yText.delete(0, content.length);
+							// Insert the first line back
+							yText.insert(0, lines[0]);
+							// Create new code lines for each remaining line
+							for (let i = 1; i < lines.length; i++) {
+								const newBlock = new Block({
+									block: {
+										type: 'codeLine',
+										content: [{ text: lines[i] }]
+									},
+									parent: block.parent
+								});
+								block.parent.yChildren.insert(block.index + i, [newBlock.yBlock]);
+							}
+						}
+					}
+				}
+			},
+			marks: {
+				codeToken
+			}
+		};
+	};
+</script>
+
+{#snippet code({ block, children }: BlockSnippetPayload)}
+	<div use:block.attach class="card rounded grid gap-2 bg-neutral-600 p-1">
+		<div use:block.void class="text-xs flex justify-between">
+			<code>html</code>
+			<div>
+				<button
+					onclick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						// navigator.clipboard.writeText(block.content.stringContent);
+					}}
+				>
+					Copy
+				</button>
+			</div>
+		</div>
+		<pre use:block.attach class="language-jsx"><code class="language-jsx"
+				>{@render children?.()}</code
+			></pre>
+	</div>
+{/snippet}
+
+{#snippet codeLine({ content, block }: BlockSnippetPayload)}
+	<div
+		onclick={() => {
+			if (block.suggestions) {
+				block.suggestions = null;
+			} else {
+				block.suggestText({ value: "const a = 'hello' \n const b = 'world'" });
+			}
+		}}
+		class="hover:bg-neutral-700"
+		style:tab-size="7px"
+		use:block.attach
+	>
+		{@render content()}
+	</div>
+{/snippet}
+
+{#snippet codeToken({ content, mark }: MarkSnippetPayload)}
+	<span class="token {mark}">{@render content()}</span>
+{/snippet}

package/dist/plugins/code/CodePlugin.svelte.d.ts

@@ -0,0 +1,23 @@
+import './prism.css';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-css';
+import type { Plugin } from '../../plugins.js';
+export declare const codePlugin: 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 CodePlugin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CodePlugin = InstanceType<typeof CodePlugin>;
+export default CodePlugin;

package/dist/plugins/code/prism.css

@@ -0,0 +1,141 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #c5c8c6;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	font-size: 12px;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+	overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	/* background: #1d1f21; */
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7c7c7c;
+}
+
+.token.punctuation {
+	color: #c5c8c6;
+}
+
+.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+	color: #96cbfe;
+}
+
+.token.class-name {
+	color: #ffffb6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+	color: #99cc99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #ff73fd;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a8ff60;
+}
+
+.token.variable {
+	color: #c6c5fe;
+}
+
+.token.operator {
+	color: #ededed;
+}
+
+.token.entity {
+	color: #ffffb6;
+	cursor: help;
+}
+
+.token.url {
+	color: #96cbfe;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87c38a;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #f9ee98;
+}
+
+.token.function {
+	color: #dad085;
+}
+
+.token.regex {
+	color: #e9c062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

package/dist/plugins/image/ImagePlugin.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
+	export const imagePlugin: Plugin = (edytor) => {
+		return {
+			blocks: {
+				image: {
+					void: true,
+					snippet: image
+				}
+			}
+		};
+	};
+</script>
+
+{#snippet image({ block, content }: BlockSnippetPayload)}
+	<figure class="flex flex-col gap-1" use:block.attach>
+		<img src={'https://placehold.co/600x400'} />
+		<figcaption class="text-sm block">
+			{@render content()}
+		</figcaption>
+	</figure>
+{/snippet}

package/dist/plugins/image/ImagePlugin.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from '../../plugins.js';
+export declare const imagePlugin: 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 ImagePlugin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImagePlugin = InstanceType<typeof ImagePlugin>;
+export default ImagePlugin;

package/dist/plugins/mention/MentionPlugin.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { type Plugin, type InlineBlockSnippetPayload } from '../../plugins.js';
+	export const mentionPlugin: Plugin = (edytor) => {
+		return {
+			onBeforeOperation: ({ operation, payload, block, prevent }) => {
+				if (operation === 'insertText' && payload.value === '@') {
+					const { yStart, startText } = edytor.selection.state;
+					if (!startText) {
+						return;
+					}
+
+					prevent(() => {
+						const newText = block.addInlineBlock({
+							index: yStart,
+							text: startText,
+							block: {
+								type: 'mention',
+								data: {}
+							}
+						});
+
+						edytor.selection.setAtTextOffset(newText.id, 0);
+					});
+				}
+			},
+			inlineBlocks: {
+				mention: {
+					snippet: mention
+				}
+			}
+		};
+	};
+</script>
+
+<script>
+</script>
+
+{#snippet mention({ block }: InlineBlockSnippetPayload)}
+	<kbd data-edytor-mention use:block.attach>@mention</kbd>
+{/snippet}

package/dist/plugins/mention/MentionPlugin.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Plugin } from '../../plugins.js';
+export declare const mentionPlugin: 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 MentionPlugin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MentionPlugin = InstanceType<typeof MentionPlugin>;
+export default MentionPlugin;