From bbd243d2146b75864c76f44603012d5cfc16b56e Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 11 Jun 2026 16:01:10 +0100
Subject: [PATCH] fix: render newsfeed content as html

---
 .../features/course/api/newsfeed.svelte.ts    | 25 +++++++++---
 .../features/program/api/newsfeed.svelte.ts   | 28 ++++++++-----
 apps/dashboard/src/lib/features/ui/index.ts   |  1 +
 .../src/lib/features/ui/text-editor.svelte    | 22 +++++++++-
 .../routes/(app)/courses/[id]/+page.svelte    |  9 ++++-
 .../(app)/programs/[id]/newsfeed/+page.svelte |  6 ++-
 packages/ui/src/custom/editor/editor.ts       |  6 ++-
 .../ui/src/custom/editor/ui/menus/Link.svelte | 40 +++++++++++++------
 .../ui/src/custom/editor/ui/menus/Menu.svelte |  2 +-
 packages/utils/src/functions/sanitize.ts      |  2 +-
 10 files changed, 106 insertions(+), 35 deletions(-)

diff --git a/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts b/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts
index e35b93c3..74921360 100644
--- a/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts
+++ b/apps/dashboard/src/lib/features/course/api/newsfeed.svelte.ts
@@ -23,7 +23,7 @@ import {
 } from '@cio/utils/validation/newsfeed';
 
 import { get } from 'svelte/store';
-import { getTextFromHTML } from '$lib/utils/functions/toHtml';
+import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { profile } from '$lib/utils/store/user';
 import { snackbar } from '$features/ui/snackbar/store';
@@ -109,7 +109,15 @@ export class NewsfeedApi extends BaseApiWithErrors {
    * Creates a new newsfeed item
    */
   async create(courseId: string, fields: TNewsfeedCreate) {
-    const result = ZNewsfeedCreate.safeParse({ ...fields, content: getTextFromHTML(fields.content), courseId });
+    if (isHtmlValueEmpty(fields.content)) {
+      this.errors = mapZodErrorsToTranslations(
+        ZNewsfeedCreate.safeParse({ ...fields, content: '', courseId }).error!,
+        'newsfeed'
+      );
+      return;
+    }
+
+    const result = ZNewsfeedCreate.safeParse({ ...fields, courseId });
     if (!result.success) {
       this.errors = mapZodErrorsToTranslations(result.error, 'newsfeed');
       return;
@@ -160,10 +168,15 @@ export class NewsfeedApi extends BaseApiWithErrors {
    * Updates a newsfeed item (content and isPinned only)
    */
   async update(courseId: string, feedId: string, fields: TNewsfeedUpdate) {
-    const result = ZNewsfeedUpdate.safeParse({
-      ...fields,
-      content: getTextFromHTML(fields.content ?? '')
-    });
+    if (fields.content !== undefined && isHtmlValueEmpty(fields.content)) {
+      this.errors = mapZodErrorsToTranslations(
+        ZNewsfeedUpdate.safeParse({ ...fields, content: '' }).error!,
+        'newsfeed'
+      );
+      return;
+    }
+
+    const result = ZNewsfeedUpdate.safeParse(fields);
 
     if (!result.success) {
       this.errors = mapZodErrorsToTranslations(result.error, 'newsfeed');
diff --git a/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts b/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts
index 169c7928..5dfad2de 100644
--- a/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts
+++ b/apps/dashboard/src/lib/features/program/api/newsfeed.svelte.ts
@@ -24,7 +24,7 @@ import {
   ZUpdateProgramReaction
 } from '@cio/utils/validation/program';
 import { get } from 'svelte/store';
-import { getTextFromHTML } from '$lib/utils/functions/toHtml';
+import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { profile } from '$lib/utils/store/user';
 import { snackbar } from '$features/ui/snackbar/store';
@@ -77,10 +77,15 @@ export class ProgramNewsfeedApi extends BaseApiWithErrors {
   async create(programId: string, fields: TCreateProgramNewsfeed) {
     this.success = false;
 
-    const validationResult = ZCreateProgramNewsfeed.safeParse({
-      ...fields,
-      content: getTextFromHTML(fields.content)
-    });
+    if (isHtmlValueEmpty(fields.content)) {
+      this.errors = mapZodErrorsToTranslations(
+        ZCreateProgramNewsfeed.safeParse({ ...fields, content: '' }).error!,
+        'newsfeed'
+      );
+      return;
+    }
+
+    const validationResult = ZCreateProgramNewsfeed.safeParse(fields);
 
     if (!validationResult.success) {
       this.errors = mapZodErrorsToTranslations(validationResult.error, 'newsfeed');
@@ -115,10 +120,15 @@ export class ProgramNewsfeedApi extends BaseApiWithErrors {
   async update(programId: string, feedId: string, fields: TUpdateProgramNewsfeed) {
     this.success = false;
 
-    const validationResult = ZUpdateProgramNewsfeed.safeParse({
-      ...fields,
-      ...(fields.content ? { content: getTextFromHTML(fields.content) } : {})
-    });
+    if (fields.content !== undefined && isHtmlValueEmpty(fields.content)) {
+      this.errors = mapZodErrorsToTranslations(
+        ZUpdateProgramNewsfeed.safeParse({ ...fields, content: '' }).error!,
+        'newsfeed'
+      );
+      return;
+    }
+
+    const validationResult = ZUpdateProgramNewsfeed.safeParse(fields);
 
     if (!validationResult.success) {
       this.errors = mapZodErrorsToTranslations(validationResult.error, 'newsfeed');
diff --git a/apps/dashboard/src/lib/features/ui/index.ts b/apps/dashboard/src/lib/features/ui/index.ts
index 0001182c..5bf0e094 100644
--- a/apps/dashboard/src/lib/features/ui/index.ts
+++ b/apps/dashboard/src/lib/features/ui/index.ts
@@ -23,6 +23,7 @@ export { default as Search } from './search.svelte';
 export { default as SenjaEmbed } from './senja-embed.svelte';
 export { default as Snackbar } from './snackbar/snackbar.svelte';
 export { default as TextEditor } from './text-editor.svelte';
+export { preloadTextEditor } from './text-editor.svelte';
 export { default as UnsavedChanges } from './unsaved-changes.svelte';
 export { default as UploadImage } from './upload-image.svelte';
 export { default as UpgradeBanner } from './upgrade-banner.svelte';
diff --git a/apps/dashboard/src/lib/features/ui/text-editor.svelte b/apps/dashboard/src/lib/features/ui/text-editor.svelte
index 3a7a6056..6f7009fc 100644
--- a/apps/dashboard/src/lib/features/ui/text-editor.svelte
+++ b/apps/dashboard/src/lib/features/ui/text-editor.svelte
@@ -8,11 +8,17 @@
     pending ??= import('@cio/ui/custom/editor');
     return pending;
   }
+
+  /** Warm the editor chunk without mounting an instance (e.g. on newsfeed page load). */
+  export function preloadTextEditor() {
+    return loadEditor();
+  }
 </script>
 
 <script lang="ts">
   // Type-only imports are erased at build time — no static TipTap dependency.
   import type { HTMLContent, TiptapEditor } from '@cio/ui/custom/editor';
+  import { cn } from '@cio/ui/tools';
 
   interface Props {
     placeholder?: string | ((node: any) => string);
@@ -46,7 +52,21 @@
 </script>
 
 {#await loadEditor()}
-  <div class="ui:animate-pulse ui:rounded-md ui:bg-muted ui:h-32 ui:w-full" />
+  <div
+    class={cn(
+      'ui:relative ui:bg-background ui:flex ui:w-full ui:flex-col ui:rounded-md ui:border ui:border-dashed',
+      className
+    )}
+    aria-busy="true"
+    aria-hidden="true"
+  >
+    {#if showToolBar}
+      <div class="ui:h-9 ui:shrink-0 ui:border-b ui:border-dashed ui:bg-muted/50" />
+    {/if}
+    <div
+      class={cn('ui:relative ui:h-128 ui:w-full ui:overflow-auto ui:p-4 ui:animate-pulse ui:bg-muted/50', editorClass)}
+    />
+  </div>
 {:then { Editor }}
   <Editor
     {content}
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/+page.svelte
index 24d3f763..80af1135 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { resolve } from '$app/paths';
   import { NewsFeedPage } from '$features/course/pages';
   import { Button } from '@cio/ui/base/button';
   import * as Page from '@cio/ui/base/page';
-  import { RefreshPageData, RoleBasedSecurity } from '$features/ui';
+  import { RefreshPageData, RoleBasedSecurity, preloadTextEditor } from '$features/ui';
   import { currentOrg } from '$lib/utils/store/org';
   import { t } from '$lib/utils/functions/translations';
   import type { AccountOrg } from '$features/app/types';
@@ -21,6 +22,10 @@
 
     return roles;
   }
+
+  onMount(() => {
+    void preloadTextEditor();
+  });
 </script>
 
 <RoleBasedSecurity
@@ -38,7 +43,7 @@
       </Page.HeaderContent>
       <Page.Action>
         <div class="flex items-center gap-2">
-          <Button onclick={() => newsfeedApi.openNewFeedModal()}>
+          <Button onmouseenter={() => preloadTextEditor()} onclick={() => newsfeedApi.openNewFeedModal()}>
             {$t('course.navItem.news_feed.heading_button.title')}
           </Button>
           <RefreshPageData onRefresh={() => newsfeedApi.list(data.courseId)} />
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
index 95d1b8c4..c29d2f54 100644
--- a/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
@@ -16,6 +16,7 @@
   import PinIcon from '@lucide/svelte/icons/pin';
   import { BookIcon } from '@lucide/svelte';
   import { buildNextNewsfeedReaction, type NewsfeedReactionType } from '@cio/ui/custom/newsfeed-reactions';
+  import { preloadTextEditor } from '$features/ui';
 
   interface Props {
     data: {
@@ -106,6 +107,7 @@
   };
 
   onMount(async () => {
+    void preloadTextEditor();
     await loadNewsfeed();
   });
 </script>
@@ -117,7 +119,7 @@
     </Page.HeaderContent>
     <Page.Action>
       {#if canCreateNewsfeed}
-        <Button onclick={() => programNewsfeedApi.openNewFeedModal()}>
+        <Button onmouseenter={() => preloadTextEditor()} onclick={() => programNewsfeedApi.openNewFeedModal()}>
           {$t('programs.newsfeed.post')}
         </Button>
       {/if}
@@ -143,7 +145,7 @@
           variant="page"
         >
           {#if canCreateNewsfeed}
-            <Button onclick={() => programNewsfeedApi.openNewFeedModal()}>
+            <Button onmouseenter={() => preloadTextEditor()} onclick={() => programNewsfeedApi.openNewFeedModal()}>
               {$t('programs.newsfeed.post')}
             </Button>
           {/if}
diff --git a/packages/ui/src/custom/editor/editor.ts b/packages/ui/src/custom/editor/editor.ts
index 81569df4..c234801f 100644
--- a/packages/ui/src/custom/editor/editor.ts
+++ b/packages/ui/src/custom/editor/editor.ts
@@ -37,7 +37,11 @@ export default (
         link: {
           openOnClick: false,
           autolink: true,
-          linkOnPaste: true
+          linkOnPaste: true,
+          HTMLAttributes: {
+            target: '_blank',
+            rel: 'noopener noreferrer nofollow'
+          }
         },
         codeBlock: false
       }),
diff --git a/packages/ui/src/custom/editor/ui/menus/Link.svelte b/packages/ui/src/custom/editor/ui/menus/Link.svelte
index 268b0913..ced4a050 100644
--- a/packages/ui/src/custom/editor/ui/menus/Link.svelte
+++ b/packages/ui/src/custom/editor/ui/menus/Link.svelte
@@ -12,7 +12,31 @@
 
   const { editor }: Props = $props();
 
-  let link = $derived.by(() => editor.getAttributes('link').href);
+  let href = $state('');
+
+  $effect(() => {
+    const syncHref = () => {
+      href = editor.getAttributes('link').href ?? '';
+    };
+
+    syncHref();
+    editor.on('selectionUpdate', syncHref);
+    editor.on('transaction', syncHref);
+
+    return () => {
+      editor.off('selectionUpdate', syncHref);
+      editor.off('transaction', syncHref);
+    };
+  });
+
+  function copyLink(event: MouseEvent) {
+    event.preventDefault();
+
+    const url = editor.getAttributes('link').href;
+    if (!url) return;
+
+    void navigator.clipboard.writeText(url);
+  }
 </script>
 
 <BubbleMenu
@@ -27,20 +51,12 @@
   }}
   class="ui:bg-popover ui:flex ui:h-fit ui:w-fit ui:items-center ui:gap-1 ui:rounded ui:border ui:p-1 ui:shadow-lg"
 >
-  <Button variant="link" href={link} class="ui:max-w-80 ui:p-1" target="_blank">
+  <Button variant="link" {href} class="ui:max-w-80 ui:p-1" target="_blank">
     <span class="ui:w-full ui:overflow-hidden ui:text-ellipsis">
-      {link}
+      {href}
     </span>
   </Button>
-  <Button
-    variant="ghost"
-    title="Copy Link"
-    size="icon"
-    class="ui:z-50"
-    onclick={() => {
-      navigator.clipboard.writeText(link);
-    }}
-  >
+  <Button variant="ghost" title="Copy Link" size="icon" class="ui:z-50" onmousedown={copyLink}>
     <Copy />
   </Button>
   <Button
diff --git a/packages/ui/src/custom/editor/ui/menus/Menu.svelte b/packages/ui/src/custom/editor/ui/menus/Menu.svelte
index 2a209e08..c179fe4c 100644
--- a/packages/ui/src/custom/editor/ui/menus/Menu.svelte
+++ b/packages/ui/src/custom/editor/ui/menus/Menu.svelte
@@ -99,7 +99,7 @@
 
 <BubbleMenu
   {editor}
-  pluginKey="link-bubble-menu"
+  pluginKey="format-bubble-menu"
   {shouldShow}
   class={cn(
     'edra-bubble-menu ui:bg-popover ui:flex ui:h-fit ui:w-fit ui:items-center ui:rounded-lg ui:p-0.5 ui:shadow-lg',
diff --git a/packages/utils/src/functions/sanitize.ts b/packages/utils/src/functions/sanitize.ts
index 05b596e1..ab08a2a3 100644
--- a/packages/utils/src/functions/sanitize.ts
+++ b/packages/utils/src/functions/sanitize.ts
@@ -28,7 +28,7 @@ export const FORBID_ATTR = [
   'onunload'
 ] as const;
 
-export const ADD_ATTR = ['data-type', 'data-latex', 'colwidth'] as const;
+export const ADD_ATTR = ['data-type', 'data-latex', 'colwidth', 'target', 'rel'] as const;
 
 export const ALLOWED_URI_REGEXP =
   /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;