feat: add Zero-Dependency AE_Comp_Editor_TipTap with auto-formatting support
This commit is contained in:
51
src/routes/testing/editor_test/+page.svelte
Normal file
51
src/routes/testing/editor_test/+page.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user