svedit 0.1.0

package/package.json

@@ -0,0 +1,65 @@
+{
+	"name": "svedit",
+	"version": "0.1.0",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"src/lib",
+		"!src/lib/**/*.test.*",
+		"!src/lib/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.21.2",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "^8.39.1",
+		"@typescript-eslint/parser": "^8.39.1",
+		"@vitest/browser": "^3.2.4",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"vite": "^7.0.4",
+		"vitest": "^3.2.3",
+		"vitest-browser-svelte": "^1.1.0",
+		"nanoid": "^5.1.5"
+	}
+}

package/src/lib/AnnotatedStringProperty.svelte

@@ -0,0 +1,126 @@
+<script>
+	import { getContext } from 'svelte';
+
+  /** @import { AnnotatedStringPropertyProps, AnnotationFragment } from './types.d.ts'; */
+
+	const svedit = getContext('svedit');
+
+ /** @type {AnnotatedStringPropertyProps} */
+	let {
+		path,
+		class: css_class,
+		placeholder = '',
+	} = $props();
+
+	let is_focused = $derived.by(() => {
+		return svedit.doc.selection?.type === 'text' && path.join('.') === svedit.doc.selection?.path.join('.');
+	});
+
+	/**
+	 * Converts text with annotations into renderable fragments for display.
+	 * @param {string} text - The plain text content
+	 * @param {Array<[number, number, string, ...any]>} annotations - Array of annotations where each is [start_offset, end_offset, type, options?] (minimum 3 elements)
+	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
+	 */
+	function render_annotated_string(text, annotations) {
+		let fragments = [];
+		let last_index = 0;
+
+		// Sort annotations by start_offset
+		const sorted_annotations = $state.snapshot(annotations).sort((a, b) => a[0] - b[0]);
+
+		for (let [index, annotation] of sorted_annotations.entries()) {
+			// Add text before the annotation
+			if (annotation[0] > last_index) {
+				fragments.push(text.slice(last_index, annotation[0]));
+			}
+
+			// Add the annotated string
+			const annotated_content = text.slice(annotation[0], annotation[1]);
+			fragments.push({
+				type: annotation[2],
+				content: annotated_content,
+				annotation_index: index,
+				data: annotation[3]
+			});
+
+			last_index = annotation[1];
+		}
+
+		// Add any remaining text after the last annotation
+		if (last_index < text.length) {
+			fragments.push(text.slice(last_index));
+		}
+
+		return fragments;
+	}
+
+	let fragments = $derived(render_annotated_string(svedit.doc.get(path)[0], svedit.doc.get(path)[1]));
+	let plain_text = $derived(svedit.doc.get(path)[0]);
+
+	/**
+	 * @param {MouseEvent} e - The click event
+	 */
+	function handle_link_click(e) {
+		e.preventDefault();
+	}
+</script>
+
+<!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
+<div
+ 	data-type="text"
+ 	data-path={path.join('.')}
+ 	style="anchor-name: --{path.join('-')};"
+ 	class="text svedit-selectable {css_class}"
+ 	class:empty={plain_text.length === 0}
+  class:focused={is_focused}
+  placeholder={placeholder}
+>
+  {#each fragments as fragment, index (index)}
+		{#if typeof fragment === 'string'}<!--
+      -->{fragment}<!--
+    -->{:else if fragment.type === 'emphasis'}<!--
+      --><em>{fragment.content}</em><!--
+    -->{:else if fragment.type === 'strong'}<!--
+      --><strong>{fragment.content}</strong><!--
+    -->{:else if fragment.type === 'link'}<!--
+      --><a
+				onclick={handle_link_click}
+				style="anchor-name: --{path.join('-') + '-' + fragment.annotation_index};"
+				href={fragment.data.href}
+				target={fragment.data.target || '_self'}>{fragment.content}</a><!--
+    -->{:else}<!--
+      -->{fragment.content}<!--
+    -->{/if}
+	{/each}<!--
+  --><br>
+</div>
+
+<style>
+  .text {
+    white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		box-sizing: content-box;
+
+		&.heading1 {
+      text-wrap: var(--text-wrap);
+    }
+  }
+
+  [placeholder].empty::before {
+    content: attr(placeholder);
+    pointer-events: none;
+    color: color-mix(in oklch, currentcolor 50%, transparent);
+  }
+
+  /* We can safely hide the <br> element when the placeholder is empty and focused. */
+  /* No longer the cursor will be rendered after the placeholder when focused. */
+  [placeholder].empty.focused br {
+    display:none;
+  }
+
+  .text.focused {
+    background: none;
+    outline: 1px dashed var(--editing-stroke-color);
+  }
+</style>

package/src/lib/CustomProperty.svelte

@@ -0,0 +1,40 @@
+<script>
+  /** @import { CustomPropertyProps } from './types.d.ts'; */
+
+  /** @type {CustomPropertyProps} */
+  let {
+    path,
+    class: css_class,
+    children,
+  } = $props();
+</script>
+
+<!-- NOTE: It's super crucial that there is no extra whitespace, to not introduce additional cursor positions in contenteditable -->
+<div
+  class="property {css_class}"
+  data-type="property"
+  data-path={path.join('.')}
+  style="anchor-name: --{path.join('-')};"
+>
+  <div class="cursor-trap svedit-selectable"><br/></div>
+  <div class="property-content" contenteditable="false">{@render children()}</div>
+</div>
+
+<style>
+  .property {
+    position: relative;
+  }
+  .cursor-trap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    outline: none;
+  }
+  .property-content {
+    width: 100%;
+    height: 100%;
+  }
+</style>