fix: render newsfeed content as html

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
       }),

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

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',

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;