add simple rich text editor to /pad route

This commit is contained in:
silentsilas 2025-01-23 23:54:40 -05:00
parent 5e7fc8b87d
commit f0d1c62e5f
Signed by: silentsilas
GPG Key ID: 113DFB380F724A81
3 changed files with 862 additions and 2 deletions

839
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -49,6 +49,7 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@dimforge/rapier3d-compat": "^0.14.0", "@dimforge/rapier3d-compat": "^0.14.0",
"@friendofsvelte/tipex": "^0.0.7-fix-0",
"@langchain/anthropic": "^0.3.1", "@langchain/anthropic": "^0.3.1",
"@langchain/community": "^0.3.1", "@langchain/community": "^0.3.1",
"@langchain/core": "^0.3.32", "@langchain/core": "^0.3.32",

View File

@ -0,0 +1,24 @@
<script lang="ts">
import { Tipex, type TipexEditor } from '@friendofsvelte/tipex';
import '@friendofsvelte/tipex/styles/Tipex.css';
import '@friendofsvelte/tipex/styles/ProseMirror.css';
import '@friendofsvelte/tipex/styles/Controls.css';
import '@friendofsvelte/tipex/styles/EditLink.css';
import '@friendofsvelte/tipex/styles/CodeBlock.css';
const INITIAL_HTML_CONTENT = `<h1>Simple editor</h1><p>What's written here will be saved to your local storage, and won't be sent to the server.</p>`;
let body = localStorage.getItem('tipex') || INITIAL_HTML_CONTENT;
let editor: TipexEditor | undefined = $state();
function handleUpdate() {
const currentHtml = editor?.getHTML();
localStorage.setItem('tipex', currentHtml || '');
}
</script>
<svelte:head>
<title>silentsilas - Pad</title>
</svelte:head>
<div class="container mx-auto my-8 dark">
<Tipex {body} controls !focal class="h-[80vh]" bind:tipex={editor} onupdate={handleUpdate} />
</div>