CRUD - Affirmations

2026-01-19 14:59:51 -06:00
parent 0991d1916b
commit 30e7f8e00a
13 changed files with 1456 additions and 23 deletions
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Editor } from '@tiptap/core';
+  import StarterKit from '@tiptap/starter-kit';
+
+  let { initialContent = '', name = 'content' } = $props<{ initialContent: string; name?: string }>();
+
+  let element: HTMLElement;
+  let editor: Editor;
+  let content = $state('');
+
+  onMount(() => {
+    content = initialContent;
+
+    editor = new Editor({
+      element,
+      extensions: [StarterKit],
+      content: initialContent,
+      onUpdate: ({ editor }) => {
+        content = editor.getHTML();
+      }
+    });
+
+    return () => editor.destroy();
+  });
+</script>
+
+<div class="border border-gray-300 rounded-lg overflow-hidden">
+  <div class="flex gap-1 p-2 bg-gray-100 border-b border-gray-300">
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleBold().run()}
+      class="px-3 py-1 rounded font-bold hover:bg-gray-200 transition-colors"
+    >B</button>
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleItalic().run()}
+      class="px-3 py-1 rounded italic hover:bg-gray-200 transition-colors"
+    >I</button>
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleStrike().run()}
+      class="px-3 py-1 rounded line-through hover:bg-gray-200 transition-colors"
+    >S</button>
+    <div class="w-px bg-gray-300 mx-1"></div>
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleBulletList().run()}
+      class="px-3 py-1 rounded hover:bg-gray-200 transition-colors"
+    >• List</button>
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleOrderedList().run()}
+      class="px-3 py-1 rounded hover:bg-gray-200 transition-colors"
+    >1. List</button>
+  </div>
+
+  <div bind:this={element} class="p-3 min-h-40 prose prose-sm max-w-none focus:outline-none"></div>
+</div>
+
+<input type="hidden" {name} value={content} />