blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-07-06 22:15:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: chat detail frame

Browse source
This commit is contained in:
Shibo Lyu 2024-08-30 16:58:03 +08:00
parent 78339cd0b9
commit 793217a2a0
10 changed files with 176 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/lib/components/RichTextInput.svelte
View file

@ -1,8 +1,11 @@
<script lang="ts">
import { browser } from '$app/environment';
import type { Delta } from 'typewriter-editor';
import InputFrame from '$lib/components/InputFrame.svelte';
import { tw } from '$lib/tw';
export let delta: Delta;
export let delta: Delta | null = null;
export let placeholder: string = '';
let className = '';
export { className as class };
@ -14,6 +17,14 @@
};
</script>
{#await loadClientComponent() then Input}
<svelte:component this={Input} bind:delta class={className}><slot /></svelte:component>
{/await}
<InputFrame class={tw('overflow-y-auto', className)}>
{#await loadClientComponent()}
<div class="rich-text opacity-50">
<p>{placeholder}</p>
</div>
{:then Input}
<svelte:component this={Input} bind:delta class={className} {placeholder}>
<slot />
</svelte:component>
{/await}
</InputFrame>

23
src/lib/components/RichTextInput/ClientInput.svelte
View file

@ -1,12 +1,8 @@
<script lang="ts">
import InputFrame from '$lib/components/InputFrame.svelte';
import { tw } from '$lib/tw';
import { Delta, Editor, asRoot } from 'typewriter-editor';
let className = '';
export { className as class };
export let delta: Delta;
export let delta: Delta = new Delta();
export let placeholder: string = '';
const editor = new Editor();
delta = editor.getDelta();
@ -17,8 +13,13 @@
$: editor.setDelta(delta);
</script>
<InputFrame class={tw('overflow-y-auto', className)}>
<div class="rich-text w-full outline-none" use:asRoot={editor}>
<slot />
</div>
</InputFrame>
<div
class="rich-text relative w-full outline-none before:absolute before:hidden before:leading-tight before:opacity-50 before:content-[attr(data-weblah-placeholder)] data-[weblah-is-empty]:before:block"
use:asRoot={editor}
data-weblah-is-empty={!delta || (delta.ops.length === 1 && delta.ops[0].insert === '\n')
? 'true'
: undefined}
data-weblah-placeholder={placeholder}
>
<slot />
</div>