blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-07-16 18:52:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: basic rich text input & format

Browse source
This commit is contained in:
Shibo Lyu 2024-08-30 03:21:51 +08:00
parent e386fe2583
commit ca380e9ce6
8 changed files with 219 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/routes/(internal)/_rich-text/+page.svelte Normal file
View file

@ -0,0 +1,30 @@
<script lang="ts">
import RichTextInput from '$lib/components/RichTextInput.svelte';
import { deltaToBlahRichText } from '$lib/richText';
import type { Delta } from 'typewriter-editor';
let delta: Delta;
$: brt = delta ? deltaToBlahRichText(delta) : null;
</script>
<RichTextInput bind:delta class="m-4 max-h-32">
<p>A <strong>quick</strong> brown <em>fox</em> jumps over the lazy dog.</p>
<p>A test engineer <a href="https://example.com">tests</a> the <code>RichTextInput</code>.</p>
</RichTextInput>
<div class="flex min-h-0 flex-1 gap-4 p-4">
<div class="flex min-h-0 flex-1 flex-col">
<h2 class="text-lg">Delta (Editor's internal representation)</h2>
<div class="min-h-0 flex-1 select-text overflow-auto">
<pre><code>{JSON.stringify(delta, null, 2)}</code></pre>
</div>
</div>
<div class="flex min-h-0 flex-1 flex-col">
<h2 class="text-lg">Blah Rich Text</h2>
<div class="min-h-0 flex-1 select-text overflow-auto">
<pre><code>{JSON.stringify(brt, null, 2)}</code></pre>
</div>
</div>
</div>