Dev

package.json

@@ -41,10 +41,16 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@supabase/supabase-js": "^2.58.0",
     "@tanstack/react-query": "^5.56.2",
+    "@tiptap/extension-link": "^3.7.2",
+    "@tiptap/extension-text-align": "^3.7.2",
+    "@tiptap/react": "^3.7.2",
+    "@tiptap/starter-kit": "^3.7.2",
+    "@types/dompurify": "^3.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
+    "dompurify": "^3.3.0",
     "embla-carousel-react": "^8.3.0",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.462.0",

src/components/EditableField.tsx

@@ -118,7 +118,7 @@ useEffect(() => {
         onChange={handleChange}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
-        className={`w-full p-2 rounded border border-portfolio-blue bg-white ${className}`}
+        className={`w-full p-2 rounded border border-portfolio-blue bg-white !text-foreground ${className}`}
         placeholder={placeholder}
         rows={3}
       />
@@ -130,7 +130,7 @@ useEffect(() => {
         onChange={handleChange}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
-        className={`w-full p-2 rounded border border-portfolio-blue bg-white ${className}`}
+        className={`w-full p-2 rounded border border-portfolio-blue bg-white !text-foreground ${className}`}
         placeholder={placeholder}
       />
     );

src/components/EditableImage.tsx

@@ -52,7 +52,7 @@ const EditableImage: React.FC<EditableImageProps> = ({
 
   return (
     <div
-      className="relative inline-block cursor-pointer"
+      className="relative cursor-pointer mx-auto"
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
       onClick={handleClick}

src/components/PortfolioHeader.tsx

@@ -370,7 +370,7 @@ const PortfolioHeader: React.FC<PortfolioHeaderProps> = ({
   return (
     <header className="border-b bg-card sticky top-0 z-50 mb-6">
       <nav className="container mx-auto px-6 h-16 flex items-center justify-between">
-        <Link to="/" className="flex items-center gap-2">
+        <Link to="/dashboard" className="flex items-center gap-2">
           <span className="text-3xl font-outfit font-bold bg-gradient-to-r from-portfolio-violet to-portfolio-celadon bg-clip-text text-transparent">
             clickly.it
           </span>

src/components/ProfileSection.tsx

@@ -2,8 +2,10 @@ import React, { useEffect, useState } from "react";
 import { toast } from "sonner";
 import EditableImage from "./EditableImage";
 import EditableField from "./EditableField";
+import { RichTextEditor } from "./RichTextEditor";
 import { supabase } from "../integrations/supabase/client";
 import { useAuth } from "../contexts/AuthContext";
+import { sanitizeHtml } from "@/utils/securityUtils";
 import { Button } from "./ui/button";
 import { SocialLink } from "@/types/portfolio";
 import { 
@@ -241,7 +243,7 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({
   // Loading state
   if (isLoading) {
     return (
-      <section className="flex flex-col items-center max-w-xl mx-auto mb-6 p-6">
+      <section className="flex flex-col items-center max-w-xl mx-auto mb-6 px-6">
         <Skeleton className="w-32 h-32 md:w-40 md:h-40 rounded-full" />
         <div className="mt-6 w-full text-center space-y-3">
           <Skeleton className="h-8 w-48 mx-auto" />
@@ -257,7 +259,7 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({
   // Read-only mode
   if (!isEditingMode) {
     return (
-      <section className="flex flex-col items-center max-w-xl mx-auto mb-6 p-6">
+      <section className="flex flex-col items-center max-w-xl mx-auto mb-6 px-6">
         {localState.photo && (
           <img
             src={localState.photo}
@@ -309,7 +311,10 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({
           )}
 
           {localState.description && (
-            <p className="text-muted-foreground mt-4 max-w-prose mx-auto text-justify">{localState.description}</p>
+            <div 
+              className="text-muted-foreground mt-4 max-w-prose mx-auto prose prose-sm max-w-none"
+              dangerouslySetInnerHTML={{ __html: sanitizeHtml(localState.description) }}
+            />
           )}
         </div>
       </section>
@@ -318,7 +323,7 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({
 
   // Edit mode
   return (
-    <section className="flex flex-col items-center max-w-xl mx-auto mb-6 p-6">
+    <section className="flex flex-col items-center max-w-xl mx-auto mb-6 px-6">
 
       <EditableImage
         src={localState.photo}
@@ -471,13 +476,11 @@ const ProfileSection: React.FC<ProfileSectionProps> = ({
           )}
         </div>
 
-        <EditableField
-          value={localState.description}
+        <RichTextEditor
+          content={localState.description}
           onChange={(value) => handleProfileUpdate("description", value)}
-          tag="p"
-          className="text-muted-foreground mt-4 max-w-prose mx-auto text-justify"
           placeholder="Add a brief description about yourself..."
-          multiline
+          className="mt-4 max-w-prose mx-auto"
         />
       </div>
     </section>