edytor 5.0.0 → 7.0.0

package/dist/plugins/richtext/RichTextPlugin.svelte

@@ -1,6 +1,11 @@
 <script module lang="ts">
 	import './richtext.css';
-	import type { Plugin, BlockSnippetPayload, KindPreset, PlaceholderView } from '../../plugins.js';
+	import type {
+		Plugin,
+		BlockDefinition,
+		BlockSnippetPayload,
+		PlaceholderView
+	} from '../../plugins.js';
 	import { branded } from '../brand.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import { presetId } from '../../kinds.js';
@@ -191,11 +196,15 @@
 		let retyping: string | null = null;
 		/** The disclosures this view created, opened once drawn (`onBlockAttached`). */
 		const opening = new Set<string>();
-		const presets = (type: string, rows: KindPreset[]) =>
-			rows.map((row, index) => {
-				const own = keywordsOf(edytor, presetId(type, index, rows.length), row.keywords);
-				return own ? { ...row, keywords: own } : row;
-			});
+		/** Each kind's presets, their keywords the view's (`labels`) where it names some. */
+		const named = (blocks: Record<string, BlockDefinition>) => {
+			for (const [type, kind] of Object.entries(blocks))
+				kind.presets = kind.presets?.map((row, index, rows) => {
+					const own = keywordsOf(edytor, presetId(type, index, rows.length), row.keywords);
+					return own ? { ...row, keywords: own } : row;
+				});
+			return blocks;
+		};
 		const operations = richTextOperations(edytor);
 		/** The space an autolink types itself: its own insertion is not looked at again. */
 		let autolinking = false;
@@ -395,62 +404,57 @@
 					])
 				)
 			},
-			blocks: {
+			blocks: named({
 				paragraph: {
 					snippet: paragraph,
-					presets: presets('paragraph', [
-						{ label: kinds.paragraph, icon: 'T', keywords: ['paragraph', 'plain'] }
-					])
+					presets: [{ label: kinds.paragraph, icon: 'T', keywords: ['paragraph', 'plain'] }]
 				},
 				heading: {
 					...headingRead,
 					...headingWrite,
 					snippet: textThenChildren,
-					presets: presets(
-						'heading',
-						HEADING_LEVELS.map((level, index) => ({
-							label: [kinds.heading1, kinds.heading2, kinds.heading3][index]!,
-							icon: `H${['₁', '₂', '₃'][index]}`,
-							keywords: [level, ...[['title'], ['subtitle'], []][index]!],
-							data: { level },
-							markdown: [`${'#'.repeat(index + 1)} `]
-						}))
-					)
+					presets: HEADING_LEVELS.map((level, index) => ({
+						label: [kinds.heading1, kinds.heading2, kinds.heading3][index]!,
+						icon: `H${['₁', '₂', '₃'][index]}`,
+						keywords: [level, ...[['title'], ['subtitle'], []][index]!],
+						data: { level },
+						markdown: [`${'#'.repeat(index + 1)} `]
+					}))
 				},
 				'bulleted-list-item': {
 					...itemRead,
 					...itemWrite,
 					continues: true,
 					snippet: listItem,
-					presets: presets('bulleted-list-item', [
+					presets: [
 						{
 							label: kinds.bulletedList,
 							icon: '•',
 							keywords: ['bullet', 'ul'],
 							markdown: ['- ', '* ', '+ ']
 						}
-					])
+					]
 				},
 				'numbered-list-item': {
 					...numberedRead,
 					...itemWrite,
 					continues: true,
 					snippet: listItem,
-					presets: presets('numbered-list-item', [
+					presets: [
 						{
 							label: kinds.numberedList,
 							icon: '1.',
 							keywords: ['number', 'ol'],
 							markdown: ['1. ', 'a. ', 'i. ']
 						}
-					])
+					]
 				},
 				'todo-item': {
 					...todoWrite,
 					continues: true,
 					// The app's control markup, if any, through its own snippet: the default costs no branch.
 					snippet: checkbox ? todoItemOwn : todoItem,
-					presets: presets('todo-item', [
+					presets: [
 						{
 							label: kinds.todoList,
 							icon: '☐',
@@ -458,7 +462,7 @@
 							data: { checked: false },
 							markdown: ['[ ] ', '[] ']
 						}
-					])
+					]
 				},
 				toggle: {
 					...toggleRead,
@@ -466,14 +470,14 @@
 					container: true,
 					snippet: emptyBody ? detailsOwn : details,
 					...disclosure,
-					presets: presets('toggle', [
+					presets: [
 						{
 							label: kinds.toggleList,
 							icon: '▸',
 							keywords: ['details', 'expand'],
 							markdown: ['> ']
 						}
-					])
+					]
 				},
 				// Notion's toggle headings: a heading's text as a toggle's header over its
 				// children. From a heading, `>` + space at its start makes it one (its level
@@ -485,23 +489,20 @@
 					container: true,
 					snippet: emptyBody ? detailsOwn : details,
 					...disclosure,
-					presets: presets(
-						'toggle-heading',
-						HEADING_LEVELS.map((level, index) => {
-							const hashes = '#'.repeat(index + 1);
-							return {
-								label: [kinds.toggleHeading1, kinds.toggleHeading2, kinds.toggleHeading3][index]!,
-								icon: `▸H${['₁', '₂', '₃'][index]}`,
-								keywords: ['toggle', 'heading', 'collapse'],
-								data: { level },
-								markdownFrom: {
-									heading: ['> '],
-									toggle: [`${hashes} `],
-									'toggle-heading': [`${hashes} `]
-								}
-							};
-						})
-					)
+					presets: HEADING_LEVELS.map((level, index) => {
+						const hashes = '#'.repeat(index + 1);
+						return {
+							label: [kinds.toggleHeading1, kinds.toggleHeading2, kinds.toggleHeading3][index]!,
+							icon: `▸H${['₁', '₂', '₃'][index]}`,
+							keywords: ['toggle', 'heading', 'collapse'],
+							data: { level },
+							markdownFrom: {
+								heading: ['> '],
+								toggle: [`${hashes} `],
+								'toggle-heading': [`${hashes} `]
+							}
+						};
+					})
 				},
 				// Notion's callout: an icon (`data.icon`, the picker's), a title (its own
 				// text) and a content (its children, any blocks), which shows even empty
@@ -511,9 +512,7 @@
 					container: true,
 					body: true,
 					snippet: calloutIcon || emptyBody ? calloutOwn : callout,
-					presets: presets('callout', [
-						{ label: kinds.callout, icon: '✦', keywords: ['note', 'tip'], data: { icon } }
-					]),
+					presets: [{ label: kinds.callout, icon: '✦', keywords: ['note', 'tip'], data: { icon } }],
 					// A callout without its own icon exports the view's.
 					...calloutWrite((data) => iconOf(data, edytor)),
 					// The block menu's Change icon, while the view lists a picker: the keyboard's way to it.
@@ -537,15 +536,15 @@
 					container: true,
 					snippet: textThenChildren,
 					// Notion: `"` + space is a quote; `>` + space is a toggle.
-					presets: presets('quote', [{ label: kinds.quote, icon: '❝', markdown: ['" '] }])
+					presets: [{ label: kinds.quote, icon: '❝', markdown: ['" '] }]
 				},
 				divider: {
 					...richTextKinds.divider,
 					...dividerRead,
 					...dividerWrite,
-					presets: presets('divider', [
+					presets: [
 						{ label: kinds.divider, icon: '—', keywords: ['hr', 'separator'], markdown: ['---'] }
-					]),
+					],
 					empty: { content: [], children: [] }
 				},
 				'ordered-list': {
@@ -561,7 +560,7 @@
 					snippet: list
 				},
 				'list-item': { ...itemRead, ...itemWrite, snippet: listItem }
-			}
+			})
 		};
 	};
 </script>
@@ -575,10 +574,13 @@
 	nested snippet or a text node between tags is one more node per block for
 	the browser to walk (`render.markers`).
 -->
+<!-- prettier-ignore -->
+{#snippet nested(children: Snippet)}<div data-edytor-children>{@render children()}</div>{/snippet}
+
 <!-- prettier-ignore -->
 {#snippet paragraph({ content, children }: BlockSnippetPayload)}<!--
 --><p>{@render content()}</p><!--
--->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{#if children}{@render nested(children)}{/if}<!--
 -->{/snippet}
 
 <!--
@@ -588,7 +590,7 @@
 <!-- prettier-ignore -->
 {#snippet details({ block, content, children }: BlockSnippetPayload)}<!--
 --><summary>{@render content()}</summary><!--
--->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{#if children}{@render nested(children)}<!--
 -->{:else}<EmptyBody {block} kind="toggle" />{/if}<!--
 -->{/snippet}
 
@@ -600,7 +602,7 @@
 <!-- prettier-ignore -->
 {#snippet textThenChildren({ content, children }: BlockSnippetPayload)}<!--
 -->{@render content()}<!--
--->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{#if children}{@render nested(children)}{/if}<!--
 -->{/snippet}
 
 <!--
@@ -611,7 +613,7 @@
 {#snippet callout({ block, content, children }: BlockSnippetPayload<{ icon?: string }>)}<!--
 --><CalloutIcon {block} /><!--
 --><div data-edytor-callout-title>{@render content()}</div><!--
--->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{#if children}{@render nested(children)}<!--
 -->{:else}<EmptyBody {block} kind="callout" />{/if}<!--
 -->{/snippet}
 
@@ -619,7 +621,7 @@
 {#snippet todoItem({ block, content, children }: BlockSnippetPayload<{ checked?: boolean }>)}<!--
 --><TodoCheckbox {block} /><!--
 --><div>{@render content()}</div><!--
--->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{#if children}{@render nested(children)}{/if}<!--
 -->{/snippet}
 
 <!--
@@ -630,13 +632,13 @@
 {#snippet todoItemOwn({ block, content, children }: BlockSnippetPayload<{ checked?: boolean }>)}<!--
 --><RichTextControl {block} control="checkbox" /><!--
 --><div>{@render content()}</div><!--
--->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{#if children}{@render nested(children)}{/if}<!--
 -->{/snippet}
 
 <!-- prettier-ignore -->
 {#snippet detailsOwn({ block, content, children }: BlockSnippetPayload)}<!--
 --><summary>{@render content()}</summary><!--
--->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{#if children}{@render nested(children)}<!--
 -->{:else}<RichTextControl {block} control="toggle" />{/if}<!--
 -->{/snippet}
 
@@ -644,14 +646,14 @@
 {#snippet calloutOwn({ block, content, children }: BlockSnippetPayload<{ icon?: string }>)}<!--
 --><RichTextControl {block} control="calloutIcon" /><!--
 --><div data-edytor-callout-title>{@render content()}</div><!--
--->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{#if children}{@render nested(children)}<!--
 -->{:else}<RichTextControl {block} control="callout" />{/if}<!--
 -->{/snippet}
 
 <!-- prettier-ignore -->
 {#snippet listItem({ content, children }: BlockSnippetPayload)}<!--
 --><div>{@render content()}</div><!--
--->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{#if children}{@render nested(children)}{/if}<!--
 -->{/snippet}
 
 <!--

package/dist/plugins/richtext/richTextOperations.js

@@ -74,9 +74,11 @@ export const openLink = (href, view = globalThis.window ?? null) => {
     if (safe)
         view?.open(safe, '_blank', 'noopener,noreferrer');
 };
+/** A mark's value as written: `true` when none is given. */
+const markValue = (value) => value === undefined ? true : value;
 /** Set `mark` to `value` (`null`: remove it) over `start`–`end` of `text`: the view's `formatRange`. */
 const markText = (edytor, text, start, end, mark, value) => edytor.formatRange(text.parent.id, text.segStart + start, end - start, {
-    [mark]: value === undefined ? true : value
+    [mark]: markValue(value)
 });
 const formatSelectedTextRange = (edytor, mark, value, toggle) => {
     const { yStart, yEnd, startText, endText } = edytor.selection.textRange();
@@ -87,7 +89,7 @@ const formatSelectedTextRange = (edytor, mark, value, toggle) => {
     // One decision for the whole range (Notion): a toggle removes the mark only
     // when every selected character has it, else it marks all of them.
     const on = spans.every(({ text, start, end }) => text.getMarksAtRange(start, end).every(({ marks }) => marks && mark in marks));
-    const next = toggle && on ? null : value === undefined ? true : value;
+    const next = toggle && on ? null : markValue(value);
     // One command per span: a vetoed one keeps its marks (`dispatcher.each`).
     edytor.dispatcher.each('format', spans, ({ text, start, end }) => edytor.formatRange(text.parent.id, text.segStart + start, end - start, { [mark]: next }));
     // Selected blocks stay selected (Notion; a divider's phantom text is no range).
@@ -99,6 +101,23 @@ const formatSelectedTextRange = (edytor, mark, value, toggle) => {
  * mark at (a lone selected divider's text is a phantom).
  */
 const selectsBlocks = (edytor) => edytor.selection.value.kind === 'blocks';
+/**
+ * At a caret (no block selection: a lone divider's text is a phantom),
+ * stage what `next` makes of the full set the next insertion carries
+ * (values kept), as a `format` command, and keep the caret; `false` over a
+ * range.
+ */
+const stageAtCaret = (edytor, next) => {
+    const { startText, yStart } = edytor.selection.textRange();
+    const { selection } = edytor;
+    if (!selection.projection.isCollapsed)
+        return false;
+    if (startText && !selectsBlocks(edytor)) {
+        edytor.dispatcher.run('format', () => selection.stage(next(marksForInsertion(startText, yStart, { pending: selection.pending }))));
+        selection.selectText(startText, yStart);
+    }
+    return true;
+};
 export const richTextOperations = (edytor) => ({
     /**
      * Insert a `divider` void block at the caret — the native
@@ -210,20 +229,8 @@ export const richTextOperations = (edytor) => ({
         const safeValue = mark === 'color' || mark === 'highlight' ? sanitizeCssColorValue(value) : value;
         if (safeValue === null)
             return;
-        const { startText, yStart } = edytor.selection.textRange();
-        const { isCollapsed } = edytor.selection.projection;
-        if (isCollapsed) {
-            if (startText && !selectsBlocks(edytor)) {
-                // Stage the full set the next insertion carries, values kept.
-                edytor.dispatcher.run('format', () => edytor.selection.stage({
-                    ...marksForInsertion(startText, yStart, { pending: edytor.selection.pending }),
-                    [mark]: safeValue
-                }));
-                edytor.selection.selectText(startText, yStart);
-            }
-            return;
-        }
-        formatSelectedTextRange(edytor, mark, safeValue, false);
+        if (!stageAtCaret(edytor, (marks) => ({ ...marks, [mark]: safeValue })))
+            formatSelectedTextRange(edytor, mark, safeValue, false);
     },
     /**
      * Toggle `mark` (any mark the editor defines: the rich text ones are
@@ -231,21 +238,8 @@ export const richTextOperations = (edytor) => ({
      * stage it for the next character typed.
      */
     setMarkAtRange: (mark, value) => {
-        const { yStart, yEnd, startText, endText } = edytor.selection.textRange();
-        const { selection } = edytor;
-        if (selection.projection.isCollapsed) {
-            if (startText && !selectsBlocks(edytor)) {
-                // A caret stages the full set the next insertion carries (values kept).
-                edytor.dispatcher.run('format', () => {
-                    const { [mark]: current = null, ...rest } = marksForInsertion(startText, yStart, {
-                        pending: selection.pending
-                    });
-                    selection.stage(current !== null ? rest : { ...rest, [mark]: value === undefined ? true : value });
-                });
-                selection.selectText(startText, yStart, endText, yEnd);
-            }
-            return;
-        }
-        formatSelectedTextRange(edytor, mark, value, true);
+        const toggled = ({ [mark]: current = null, ...rest }) => current !== null ? rest : { ...rest, [mark]: markValue(value) };
+        if (!stageAtCaret(edytor, toggled))
+            formatSelectedTextRange(edytor, mark, value, true);
     }
 });

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

@@ -34,7 +34,7 @@ export type Caret = {
  * order), comparing boundary points — a focus on an ancestor element of the
  * anchor (`(textElement, childCount)`) is after it.
  */
-export declare const isBackward: (selection: {
+export declare const isBackward: ({ anchorNode, anchorOffset, focusNode, focusOffset }: {
     anchorNode: Node | null;
     anchorOffset: number;
     focusNode: Node | null;