fix: all svelte diagnostics.

src/lib/chat.ts

@@ -1,6 +1,6 @@
 import { derived, readable, type Readable } from 'svelte/store';
 import type { BlahChatServerConnection } from './blah/connection/chatServer';
-import type { BlahRichText } from './richText';
+import type { BlahRichText } from '@blah-im/core/richText';
 import { messageFromBlah, type Chat, type Message, type User } from './types';
 import { BlahError } from './blah/connection/error';
 

src/lib/components/DropdownMenu/Content.svelte

@@ -4,26 +4,26 @@
 	import { expoOut } from 'svelte/easing';
 	import { scale } from 'svelte/transition';
 
-	
+	interface Props extends DropdownMenuContentProps {
-	interface Props {
+		class?: string;
-		class?: $$Props['class'];
-		children?: import('svelte').Snippet;
-		[key: string]: any
 	}
 
 	let { class: className = '', children, ...rest }: Props = $props();
 
+	const fullClassName = tw(
+		'group border-ss-secondary bg-sb-overlay min-w-32 origin-top rounded-lg border p-1 shadow-lg',
+		className
+	);
 </script>
 
-<DropdownMenu.Content
+<DropdownMenu.Content class={fullClassName} sideOffset={4} forceMount {...rest}>
-	class={tw(
+	{#snippet child({ wrapperProps, props, open })}
-		'group min-w-32 origin-top rounded-lg border border-ss-secondary bg-sb-overlay p-1 shadow-lg',
+		{#if open}
-		className
+			<div {...wrapperProps}>
-	)}
+				<div {...props} transition:scale={{ start: 0.96, duration: 300, easing: expoOut }}>
-	sideOffset={4}
-	transition={scale}
-	transitionConfig={{ start: 0.96, duration: 300, easing: expoOut }}
-	{...rest}
->
 					{@render children?.()}
+				</div>
+			</div>
+		{/if}
+	{/snippet}
 </DropdownMenu.Content>

src/lib/components/RichTextInput.svelte

@@ -4,28 +4,28 @@
 	import InputFrame from '$lib/components/InputFrame.svelte';
 	import { tw } from '$lib/tw';
 
-
 	interface Props {
-		delta?: Delta | null;
+		delta?: Delta;
-		plainText?: string | undefined;
+		plainText?: string;
 		keyboardSubmitMethod?: 'enter' | 'shiftEnter' | undefined;
+		onKeyboardSubmit?: () => void;
 		placeholder?: string;
-		editor: Editor | undefined;
+		editor?: Editor;
 		class?: string;
 		children?: import('svelte').Snippet;
 	}
 
 	let {
-		delta = $bindable(null),
+		delta = $bindable(undefined),
 		plainText = $bindable(undefined),
 		keyboardSubmitMethod = undefined,
+		onKeyboardSubmit,
 		placeholder = '',
 		editor = $bindable(),
 		class: className = '',
 		children
 	}: Props = $props();
 
-
 	const loadClientComponent = async () => {
 		if (!browser) return;
 		const { default: ClientInput } = await import('./RichTextInput/ClientInput.svelte');
@@ -38,16 +38,16 @@
 		<div class="rich-text opacity-50">
 			<p>{placeholder}</p>
 		</div>
-	{:then Input}
+	{:then ClientInput}
-		<Input
+		<ClientInput
 			bind:delta
 			bind:plainText
 			{placeholder}
 			bind:editor
 			{keyboardSubmitMethod}
-			on:keyboardSubmit
+			{onKeyboardSubmit}
 		>
 			{@render children?.()}
-		</Input>
+		</ClientInput>
 	{/await}
 </InputFrame>

src/lib/components/RichTextInput/ClientInput.svelte

@@ -4,6 +4,7 @@
 
 	interface Props {
 		delta?: Delta;
+		editor?: Editor;
 		plainText?: string | undefined;
 		placeholder?: string;
 		keyboardSubmitMethod?: 'enter' | 'shiftEnter' | undefined;
@@ -13,6 +14,7 @@
 
 	let {
 		delta = $bindable(new Delta()),
+		editor = $bindable(initEditor()),
 		plainText = $bindable(undefined),
 		placeholder = '',
 		keyboardSubmitMethod = undefined,
@@ -20,8 +22,6 @@
 		children
 	}: Props = $props();
 
-	let editor: Editor = $state(initEditor());
-
 	function initEditor() {
 		const modules = keyboardSubmitMethod
 			? {

src/lib/mock/messages.ts

@@ -3,59 +3,38 @@ import type { Message, User } from '$lib/types';
 import { getRandomUser } from './users';
 
 const messageContents: BlahRichText[] = [
-	[['更好的例子可能是link和hashtag不應該共存']],
+	['更好的例子可能是link和hashtag不應該共存'],
-	[['理論上mono是可以BIUS的，只是可能不太常見']],
+	['理論上mono是可以BIUS的，只是可能不太常見'],
-	[[['這個是一個link', { link: 'https://google.com' }]]],
+	[['這個是一個link', { link: 'https://google.com' }]],
-	[['這是一個', ['#hashtag', { hashtag: true }]]],
+	['這是一個', ['#hashtag', { tag: true }]],
-	[
+	['這是一個', ['link', { link: 'https://google.com' }], '和一個', ['#hashtag', { tag: true }]],
-		[
+	['可以， 反正我都手写了（'],
-			'這是一個',
+	['但我們也可以約定這種entity一定要有plain text fallback'],
-			['link', { link: 'https://google.com' }],
+	['這樣的話，我們就可以在不支援的地方用plain text fallback'],
-			'和一個',
+	['有可能有僅attribute的run'],
-			['#hashtag', { hashtag: true }]
-		]
-	],
-	[['可以， 反正我都手写了（']],
-	[['但我們也可以約定這種entity一定要有plain text fallback']],
-	[['這樣的話，我們就可以在不支援的地方用plain text fallback']],
-	[['有可能有僅attribute的run']],
-	[
 	[
 		'我现在是约定 text piece 一定非空，也就是说空字符串应该是空数组（但能不能真的这么发言要打个问号）'
-		]
 	],
-	[['确实合并相邻的 run 就可以 canonicalize']],
+	['确实合并相邻的 run 就可以 canonicalize'],
-	[['比如我可能不希望往数据库里这么存 json ，还需要考虑检索之类的']],
+	['比如我可能不希望往数据库里这么存 json ，还需要考虑检索之类的'],
-	[['是我蠢了']],
+	['是我蠢了'],
-	[['我觉得这个问题是因为我们没有定义好什么是一个 run']],
+	['我觉得这个问题是因为我们没有定义好什么是一个 run'],
-	[['目标是如果前端/后端使用和协议不一致的格式存储的话 roundtrip 后一致']],
+	['目标是如果前端/后端使用和协议不一致的格式存储的话 roundtrip 后一致'],
-	[
 	[
 		'你们这个 canonicalize 真的靠谱吗，，，感觉哪怕跑了一遍以后也会有多个不同 message 视觉效果相同的情况'
-		]
 	],
-	[['稍微有点烦（']],
+	['稍微有点烦（'],
-	[
 	[
 		[
 			'奥运会究竟该如何报道？中国媒体的表现真的这么不堪吗？',
 			{ link: 'https://www.bilibili.com/video/BV1TZ421L7hj/' }
-			]
 		],
-		[
+		'\n在视频中，可爸深入分析了中国媒体在巴黎奥运会中的表现，探讨了媒体人员的规模、采访类型、团队构成以及值得称赞与批评的采访案例。文章指出，尽管注册媒体工作者数量庞大，但真正的记者数量相对较少，且面临专业能力不足和流量逻辑冲击等问题。同时，作者强调了媒体在维护国家荣誉和传递奥运精神方面的重要性，呼吁媒体挖掘运动员故事，以建立观众与运动员之间的情感联系。这篇文章为了解当前中国体育媒体的现状和未来发展提供了深刻的见解和反思。\n---\n\n非常好的视频。强烈推荐观看。'
-			'在视频中，可爸深入分析了中国媒体在巴黎奥运会中的表现，探讨了媒体人员的规模、采访类型、团队构成以及值得称赞与批评的采访案例。文章指出，尽管注册媒体工作者数量庞大，但真正的记者数量相对较少，且面临专业能力不足和流量逻辑冲击等问题。同时，作者强调了媒体在维护国家荣誉和传递奥运精神方面的重要性，呼吁媒体挖掘运动员故事，以建立观众与运动员之间的情感联系。这篇文章为了解当前中国体育媒体的现状和未来发展提供了深刻的见解和反思。'
 	],
-		[''],
+	['pieces:[], attrs:[] 两者等长。然后判断合并就是 attrs 有没有相邻重复元素'],
-		['---'],
-		[''],
-		['非常好的视频。强烈推荐观看。']
-	],
-	[['pieces:[], attrs:[] 两者等长。然后判断合并就是 attrs 有没有相邻重复元素']],
-	[
 	[
 		'记้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎得้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎做้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎ ้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎o้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎v้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎e้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎r้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎f้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎l้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎o้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎w้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎ ้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎h้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎i้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎d้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎d้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎e้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎n้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎้้้้๎๎๎๎'
 	]
-	]
 ];
 
 export function createRandomMessage({ sender }: { sender?: User }): Message {

src/lib/richText.ts

@@ -0,0 +1,79 @@
+import type { BlahRichText, BlahRichTextSpanAttributes } from '@blah-im/core/richText';
+import canonicalize from 'canonicalize';
+import type { AttributeMap, Delta } from 'typewriter-editor';
+
+function isObjectEmpty(obj: object) {
+	for (const _ in obj) return false;
+	return true;
+}
+
+function deltaAttributesToBlahRichTextSpanAttributes(
+	attributes?: AttributeMap
+): BlahRichTextSpanAttributes | null {
+	if (!attributes) return null;
+
+	const blahRichTextSpanAttributes: BlahRichTextSpanAttributes = {};
+
+	if (attributes.bold) blahRichTextSpanAttributes.b = true;
+	if (attributes.italic) blahRichTextSpanAttributes.i = true;
+	if (attributes.code) blahRichTextSpanAttributes.m = true;
+	if (attributes.link) blahRichTextSpanAttributes.link = attributes.link;
+
+	if (attributes.underline) blahRichTextSpanAttributes.u = true;
+	if (attributes.strikethrough) blahRichTextSpanAttributes.s = true;
+
+	return isObjectEmpty(blahRichTextSpanAttributes) ? null : blahRichTextSpanAttributes;
+}
+
+export function deltaToBlahRichText(delta: Delta, trim: boolean = true): BlahRichText {
+	const spans: BlahRichText = [];
+
+	let lastText = '';
+	let lastAttributes: BlahRichTextSpanAttributes | null = null;
+	let canonicalizedLastAttributes: string = 'null';
+
+	function commitSpan(trim?: 'start' | 'end'): boolean {
+		const trimmedLastText =
+			trim === 'start' ? lastText.trimStart() : trim === 'end' ? lastText.trimEnd() : lastText;
+		if (trimmedLastText === '') return false;
+		spans.push(lastAttributes === null ? trimmedLastText : [trimmedLastText, lastAttributes]);
+		return true;
+	}
+
+	let isFirstSpan = true;
+	for (const op of delta.ops) {
+		// Not sure in what cases op.insert would not be a string, but let's be safe
+		if (typeof op.insert !== 'string') continue;
+
+		const attributes = deltaAttributesToBlahRichTextSpanAttributes(op.attributes);
+		const canonicalizedAttributes = canonicalize(attributes) ?? 'null';
+
+		if (canonicalizedAttributes === canonicalizedLastAttributes) {
+			lastText += op.insert;
+			continue;
+		}
+
+		const commited = commitSpan(trim && isFirstSpan ? 'start' : undefined);
+		if (commited) isFirstSpan = false;
+
+		lastText = op.insert;
+		lastAttributes = attributes;
+		canonicalizedLastAttributes = canonicalizedAttributes;
+	}
+	const lastCommited = commitSpan(trim ? 'end' : undefined);
+	if (trim && !lastCommited) {
+		// The last segment is empty, so we need to trim the one before it
+		let lastSpan = spans.pop();
+		if (!lastSpan) return spans;
+
+		if (typeof lastSpan === 'string') {
+			lastSpan = lastSpan.trimEnd();
+			if (lastSpan !== '') spans.push(lastSpan);
+		} else {
+			lastSpan[0] = lastSpan[0].trimEnd();
+			if (lastSpan[0] !== '') spans.push(lastSpan);
+		}
+	}
+
+	return spans;
+}

src/routes/(app)/chats/[server]/[chatId]/+page.svelte

@@ -1,36 +1,29 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { page } from '$app/state';
-
-	import { page } from '$app/stores';
 	import { BlahChatServerConnection } from '$lib/blah/connection/chatServer';
-	import { browser } from '$app/environment';
 	import { chatServerConnectionPool } from '$lib/chatServers';
 	import ServiceMessage from '$lib/components/ServiceMessage.svelte';
 	import ChatPage from './ChatPage.svelte';
 	import { useChat } from '$lib/chat';
 
-	let roomId = $derived($page.params.chatId);
+	let roomId = $derived(page.params.chatId);
 
-	let serverEndpoint: string = $state('');
+	let serverEndpoint: string = $derived(normalizedServerEndpoint(page.params.server));
-	run(() => {
+	function normalizedServerEndpoint(serverURIComponent: string) {
-		const endpointString = decodeURIComponent($page.params.server);
+		const endpointString = decodeURIComponent(serverURIComponent);
-		serverEndpoint = endpointString.startsWith('http')
+		return endpointString.startsWith('http') ? endpointString : `https://${endpointString}`;
-			? endpointString
-			: `https://${endpointString}`;
-	});
-
-	let server: BlahChatServerConnection | null = $state();
-	run(() => {
-		if (browser) {
-			server = chatServerConnectionPool.getConnection(serverEndpoint);
 	}
+
+	let server: BlahChatServerConnection | null = $state(null);
+	$effect.pre(() => {
+		server = chatServerConnectionPool.getConnection(serverEndpoint);
 	});
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center">
 	{#if server}
-		{@const { info, sectionedMessages, sendMessage } = useChat(server, roomId)}
+		{@const { sendMessage, ...rest } = useChat(server, roomId)}
-		<ChatPage {info} {sectionedMessages} on:sendMessage={(e) => sendMessage(e.detail)} />
+		<ChatPage {...rest} onSendMessage={sendMessage} />
 	{:else}
 		<ServiceMessage>
 			To view this chat, you need to connect to chat server

src/routes/(app)/chats/[server]/[chatId]/ChatInput.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
 	import RichTextInput from '$lib/components/RichTextInput.svelte';
-	import { deltaToBlahRichText, type BlahRichText } from '@blah-im/core/richText';
+	import type { BlahRichText } from '@blah-im/core/richText';
-	import { createEventDispatcher } from 'svelte';
+	import { deltaToBlahRichText } from '$lib/richText';
 	import type { Delta, Editor } from 'typewriter-editor';
 
+	let {
+		onSendMessage
+	}: {
+		onSendMessage: (message: BlahRichText) => void;
+	} = $props();
+
 	let editor: Editor | undefined = $state();
 	let delta: Delta | undefined = $state();
 	let plainText: string = $state('');
 	let form: HTMLFormElement | null = $state(null);
 
-	const dispatch = createEventDispatcher<{ sendMessage: BlahRichText }>();
-
 	function onKeyboardSubmit() {
 		editor?.select(null);
 		form?.requestSubmit();
@@ -23,7 +27,7 @@
 		if (plainText.trim() === '' || !delta) return;
 
 		const brt = deltaToBlahRichText(delta);
-		dispatch('sendMessage', brt);
+		onSendMessage(brt);
 
 		plainText = '';
 	}
@@ -58,7 +62,7 @@
 		placeholder="Message"
 		class="max-h-40 flex-1"
 		keyboardSubmitMethod="enter"
-		on:keyboardSubmit={onKeyboardSubmit}
+		{onKeyboardSubmit}
 	/>
 	<Button class="p-1.5" variant="primary" type="submit">
 		<svg

src/routes/(app)/chats/[server]/[chatId]/ChatPage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Readable } from 'svelte/store';
 
-	import type { Chat, Message } from '$lib/types';
+	import type { Chat } from '$lib/types';
 	import BgPattern from '$lib/components/BgPattern.svelte';
 	import { currentKeyPair } from '$lib/keystore';
 
@@ -14,17 +14,14 @@
 	interface Props {
 		info: Readable<Chat>;
 		sectionedMessages: Readable<MessageSection[]>;
+		onSendMessage: (brt: BlahRichText) => void;
 	}
 
-	let { info, sectionedMessages }: Props = $props();
+	let { info, sectionedMessages, onSendMessage }: Props = $props();
-
-	interface $$Events {
-		sendMessage: CustomEvent<BlahRichText>;
-	}
 </script>
 
 <ChatHeader info={$info} outsideUnreadCount={263723} />
 <BgPattern class="w-full flex-1" pattern="charlieBrown">
 	<ChatHistory sectionedMessages={$sectionedMessages} mySenderId={$currentKeyPair?.id} />
 </BgPattern>
-<ChatInput on:sendMessage />
+<ChatInput {onSendMessage} />

src/routes/(internal)/_rich-text/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import RichTextInput from '$lib/components/RichTextInput.svelte';
-	import { deltaToBlahRichText } from '@blah-im/core/richText';
+	import { deltaToBlahRichText } from '$lib/richText';
 	import type { Delta } from 'typewriter-editor';
 
-	let delta: Delta = $state();
+	let delta: Delta | undefined = $state();
 
 	let brt = $derived(delta ? deltaToBlahRichText(delta) : null);
 </script>