svedit 0.6.4 → 0.7.0

package/src/lib/types.d.ts

@@ -93,59 +93,53 @@ export type PrimitiveType = ScalarType | ArrayType | RichType;
  */
 export type PropertyType = PrimitiveType | ReferenceType;
 
-/**
- * Document schema primitive types - all possible property types in document schemas.
- */
-export type DocumentSchemaPrimitive =
-	| 'string'
-	| 'number'
-	| 'boolean'
-	| 'integer'
-	| 'datetime'
-	| 'string_array'
-	| 'number_array'
-	| 'boolean_array'
-	| 'integer_array'
-	| 'annotated_text'
-	| 'node'
-	| 'node_array';
-
-/**
- * Maps document schema types to their JavaScript runtime types.
- */
-export type DocumentSchemaValueToJs<T> = T extends 'string'
-	? string
-	: T extends 'number'
-		? number
-		: T extends 'boolean'
-			? boolean
-			: T extends 'integer'
-				? number
-				: T extends 'datetime'
-					? string
-					: T extends 'string_array'
-						? Array<string>
-						: T extends 'number_array'
-							? Array<number>
-							: T extends 'boolean_array'
-								? Array<boolean>
-								: T extends 'integer_array'
-									? Array<number>
-									: T extends 'annotated_text'
-										? AnnotatedText
-										: T extends 'node'
-											? string
-											: T extends 'node_array'
-												? Array<string>
-												: never;
-
-/**
- * Converts a document node schema definition to its inferred JS type.
- * Handles the {type: "..."} wrapper structure used in document schemas.
- */
-export type DocumentNodeToJs<S extends NodeSchema> = { id: string; type: string } & {
-	[K in keyof S['properties']]: DocumentSchemaValueToJs<S['properties'][K]['type']>;
-};
+// TODO: We may later want more sophisticated type inference, so that typing
+// e.g. `session.get('image')` auto-completes the node's properties based on
+// the schema definition. The types below are a starting point for that.
+//
+// export type DocumentSchemaPrimitive =
+// 	| 'string'
+// 	| 'number'
+// 	| 'boolean'
+// 	| 'integer'
+// 	| 'datetime'
+// 	| 'string_array'
+// 	| 'number_array'
+// 	| 'boolean_array'
+// 	| 'integer_array'
+// 	| 'annotated_text'
+// 	| 'node'
+// 	| 'node_array';
+//
+// export type DocumentSchemaValueToJs<T> = T extends 'string'
+// 	? string
+// 	: T extends 'number'
+// 		? number
+// 		: T extends 'boolean'
+// 			? boolean
+// 			: T extends 'integer'
+// 				? number
+// 				: T extends 'datetime'
+// 					? string
+// 					: T extends 'string_array'
+// 						? Array<string>
+// 						: T extends 'number_array'
+// 							? Array<number>
+// 							: T extends 'boolean_array'
+// 								? Array<boolean>
+// 								: T extends 'integer_array'
+// 									? Array<number>
+// 									: T extends 'annotated_text'
+// 										? AnnotatedText
+// 										: T extends 'node'
+// 											? string
+// 											: T extends 'node_array'
+// 												? Array<string>
+// 												: never;
+//
+// export type DocumentNodeToJs<S extends NodeSchema> = { id: string; type: string } & {
+// 	[K in keyof S['properties']]: DocumentSchemaValueToJs<S['properties'][K]['type']>;
+// };
 
 /**
  * A property that stores an annotated text with required allow_newlines setting.
@@ -337,6 +331,8 @@ export type AnnotatedTextPropertyProps = {
 	class?: string;
 	/** A placeholder to be rendered for empty content */
 	placeholder?: string;
+	/** Rest props to spread onto the rendered element (e.g. href, target, etc.) */
+	[key: string]: any;
 };
 
 /**
@@ -351,6 +347,8 @@ export type CustomPropertyProps = {
 	class?: string;
 	/** The content of the custom property (e.g. an image) */
 	children: Snippet;
+	/** Rest props to spread onto the rendered element */
+	[key: string]: any;
 };
 
 /**
@@ -361,10 +359,10 @@ export type NodeArrayPropertyProps = {
 	path: DocumentPath;
 	/** Optional custom HTML tag */
 	tag?: string;
-	/** Optional custom HTML tag */
-	tag?: string;
 	/** The `class` attribute on the container element */
 	class?: string;
+	/** Rest props to spread onto the rendered element (e.g. href, target, etc.) */
+	[key: string]: any;
 };
 
 /**
@@ -379,22 +377,12 @@ export type NodeProps = {
 	class?: string;
 	/** The type-specific content of the node */
 	children: Snippet;
+	/** Rest props to spread onto the rendered element (e.g. href, target, etc.) */
+	[key: string]: any;
 };
 
 /**
- * Props for the CustomProperty component
- */
-export type CustomPropertyProps = {
-	/** The full path to the property */
-	path: DocumentPath;
-	/** The `class` attribute on the content element */
-	class?: string;
-	/** The content of the custom property (e.g. an image) */
-	children: Snippet;
-};
-
-/**
- * Props for the CustomProperty component
+ * Props for the Svedit component
  */
 export type SveditProps = {
 	/** The session instance */

package/src/lib/utils.js

@@ -2,6 +2,8 @@
  * @import { Annotation, AnnotatedText, SelectionRange, Selection } from './types.d.ts';
  */
 
+const SEGMENTER = new Intl.Segmenter('en', { granularity: 'grapheme' });
+
 /**
  * Detect if the current browser is on a mobile device
  * @returns {boolean} true if mobile browser, false otherwise
@@ -19,6 +21,7 @@ export function is_mobile_browser() {
 	);
 }
 
+// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️ 
 /**
  * Detect if the current browser is Chrome on desktop
  * @returns {boolean} true if Chrome desktop browser, false otherwise
@@ -48,10 +51,11 @@ export function is_chrome_desktop_browser() {
  * get_char_length('👋🏽') // Returns: 1 (not 4 - skin tone modifier treated as single char)
  */
 export function get_char_length(str) {
-	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-	return [...segmenter.segment(str)].length;
+	return [...SEGMENTER.segment(str)].length;
 }
 
+
+// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️ 
 /**
  * Get a single character at the specified position (accounting for multi-byte characters)
  *
@@ -68,8 +72,7 @@ export function get_char_length(str) {
  * get_char_at('👋🏽', 0) // Returns: '👋🏽' (skin tone modifier included)
  */
 export function get_char_at(str, index) {
-	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-	const segments = [...segmenter.segment(str)];
+	const segments = [...SEGMENTER.segment(str)];
 	return segments[index].segment;
 }
 
@@ -89,8 +92,7 @@ export function get_char_at(str, index) {
  * char_slice('a👋🏽b', 1, 2) // Returns: '👋🏽' (skin tone modifier included)
  */
 export function char_slice(str, start, end = undefined) {
-	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-	const segments = [...segmenter.segment(str)];
+	const segments = [...SEGMENTER.segment(str)];
 	return segments
 		.slice(start, end)
 		.map((s) => s.segment)
@@ -112,8 +114,7 @@ export function char_slice(str, start, end = undefined) {
  * utf16_to_char_offset("a😀b", 3) // Returns: 2 (position after emoji)
  */
 export function utf16_to_char_offset(str, utf16_offset) {
-	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-	const segments = [...segmenter.segment(str)];
+	const segments = [...SEGMENTER.segment(str)];
 	let char_offset = 0;
 	let utf16_count = 0;
 
@@ -142,8 +143,7 @@ export function utf16_to_char_offset(str, utf16_offset) {
  * char_to_utf16_offset("a😀b", 2) // Returns: 3 (UTF-16 position after emoji)
  */
 export function char_to_utf16_offset(str, char_offset) {
-	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-	const segments = [...segmenter.segment(str)];
+	const segments = [...SEGMENTER.segment(str)];
 	let utf16_offset = 0;
 
 	for (let i = 0; i < Math.min(char_offset, segments.length); i++) {