Improved copy function with rich text

src/lib/ae_journals/ae_journals__journal_entry.ts

@@ -339,7 +339,10 @@ export async function db_save_ae_obj_li__journal_entry(
             }
 
             let content = obj.content ?? '';
-            let content_md_html: null|string = marked.parse(content);
+            // remove the most common zerowidth characters from the start of the file
+            let content_cleaned: string = content.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"");
+            let content_md_html: null|string = await marked.parse(content_cleaned ?? '') ?? null;
+            // let content_md_html_alt: null|string = await marked.parse(content_cleaned ?? '', { gfm: false }) ?? null;
 
             try {
                 const id_random = await db_journals.journal_entry.put({
@@ -378,6 +381,7 @@ export async function db_save_ae_obj_li__journal_entry(
 
                     content: obj.content,
                     content_md_html: content_md_html,
+                    // content_md_html_alt: content_md_html_alt,
                     content_html: obj.content_html,
                     content_json: obj.content_json,
 

src/lib/ae_journals/db_journals.ts

@@ -136,12 +136,12 @@ export interface Journal {
 }
 
 
-// Updated 2025-03-15
+// Updated 2025-04-02
 export interface Journal_Entry {
     id: string; // actually "id_random"
     journal_entry_id: string;
 
-    // journal_id: string; // This is the parent journal ID. If deleted, then delete all children journal entries.
+    journal_id: string; // This is the parent journal ID. If deleted, then delete all children journal entries.
 
     // Essentially this is a change log of journal entries
     snapshot_id?: string; // This is the original journal ID. If deleted, then delete all children journal entries.
@@ -183,6 +183,7 @@ export interface Journal_Entry {
 
     content?: null|string;
     content_md_html?: null|string; // Markdown converted to HTML based on content
+    content_md_html_alt?: null|string; // Markdown converted to HTML based on content
     content_html?: null|string;
     content_json?: null|string;
 

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -728,7 +728,9 @@ $effect(() => {
     class:hidden={!$ae_loc.trusted_access || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
     class="w-full font-mono shadow-md rounded-lg border-gray-500 bg-gray-100 p-2"
     >
-<article class="prose" id="rendered_journal_entry_content">
+<article
+    class="prose"
+    id="rendered_journal_entry_content">
 {@html $lq__journal_entry_obj?.content_md_html}
 </article>
 <!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -11,7 +11,7 @@ import {
         NotebookPen, NotebookText, NotepadTextDashed,
         RemoveFormatting,
         Shapes, Siren,
-        Tags
+        Tags, TypeOutline
     } from '@lucide/svelte';
 
 
@@ -171,6 +171,44 @@ let tmp_entry_obj: key_val = $state({});
                 <Copy size="2em" />
                 <span class="hidden md:inline">Clone</span>
             </button>
+
+
+            <!-- Button to copy the rich text (rendered HTML) version -->
+            <button
+                type="button"
+                onclick={async () => {
+                    const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
+                    if (!element) {
+                        console.error('Element not found: rendered_journal_entry_content');
+                        alert('Failed to copy rich content.');
+                        return;
+                    }
+
+                    try {
+                        // Get the rendered HTML content
+                        const htmlContent = element.innerHTML;
+
+                        // Use the Clipboard API to write the HTML content as rich text
+                        await navigator.clipboard.write([
+                            new ClipboardItem({
+                                'text/html': new Blob([htmlContent], { type: 'text/html' }),
+                            }),
+                        ]);
+
+                        alert('Rendered rich content copied to clipboard!');
+                    } catch (error) {
+                        console.error('Failed to copy rich content:', error);
+                        alert('Failed to copy rich content.');
+                    }
+                }}
+                class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+                title="Copy the rich text (rendered HTML) content"
+            >
+                <Copy size="1em" />
+                <TypeOutline size="2em" />
+                <span class="hidden">Copy Rich Text</span>
+            </button>
+
             </span>
 
             <div class="flex flex-row flex-wrap gap-2 items-center justify-end">
@@ -244,6 +282,13 @@ let tmp_entry_obj: key_val = $state({});
                 >
             {@html journals_journal_entry_obj.content}
             </div>
+
+            <!-- This needs to remain hidden for the copy function to work and us not seeing the rendered HTML version. -->
+            <article
+                class="prose hidden"
+                id="rendered_journal_entry_content_{journals_journal_entry_obj.journal_entry_id}">
+                {@html journals_journal_entry_obj?.content_md_html}
+            </article>
         {/if}
 
         <!-- <div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center"> -->