feat: add Zero-Dependency AE_Comp_Editor_TipTap with auto-formatting support

This commit is contained in:
Scott Idem
2026-01-29 14:30:28 -05:00
parent 363d94a36b
commit 7ec3bae343
5 changed files with 231 additions and 0 deletions

View File

@@ -0,0 +1,51 @@
<script lang="ts">
import AE_Comp_Editor_TipTap from '$lib/elements/AE_Comp_Editor_TipTap.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
let test_content = $state('<h2>Welcome to the Visual Editor Test</h2><p>This editor uses <strong>native browser rich text</strong> capabilities.</p><ul><li>No library conflicts</li><li>Uses existing <em>.tiptap</em> styles</li><li>Instant performance</li></ul>');
let log_lvl = 1;
</script>
<div class="p-8 space-y-8 max-w-5xl mx-auto h-full overflow-y-auto">
<header class="border-b border-surface-500/30 pb-4">
<h1 class="h1">Rich Text Editor Test</h1>
<p class="opacity-70">Testing the Zero-Dependency "TipTap" replacement.</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Visual Editor -->
<section class="card p-4 space-y-4 variant-soft-primary">
<h2 class="h3 flex items-center gap-2">
<span class="fas fa-eye text-primary-500"></span>
Visual Editor (AE_Comp_Editor_TipTap)
</h2>
<div class="bg-surface-100-800-token rounded-lg">
<AE_Comp_Editor_TipTap
bind:content={test_content}
placeholder="Try writing something pretty..."
/>
</div>
</section>
<!-- Source Code View -->
<section class="card p-4 space-y-4 variant-soft-tertiary">
<h2 class="h3 flex items-center gap-2">
<span class="fas fa-code text-tertiary-500"></span>
Source View (AE_Comp_Editor_CodeMirror)
</h2>
<div class="bg-surface-100-800-token rounded-lg h-[250px]">
<AE_Comp_Editor_CodeMirror
bind:content={test_content}
language="html"
show_line_numbers={true}
/>
</div>
</section>
</div>
<!-- HTML Preview -->
<section class="card p-4 space-y-4 bg-surface-900 text-green-400 font-mono text-xs overflow-auto max-h-96 shadow-2xl border border-white/10">
<h2 class="text-sm font-bold opacity-50 uppercase tracking-widest border-b border-white/10 pb-2">Raw Bound Content (Saved to DB)</h2>
<pre class="whitespace-pre">{test_content}</pre>
</section>
</div>