ct-rich-text-editor 1.3.11 → 1.3.12

package/README.md

@@ -45,6 +45,14 @@ import 'ct-rich-text-editor/style.css';
 function App() {
   const apiKey = 'your-api-key'; // Replace with your actual API key
 
+  // Current logged-in user for comments
+  const currentUser = {
+    id: 'user-123',
+    name: 'John Doe',
+    email: 'john@example.com',
+    avatar: 'https://example.com/avatar.jpg' // optional
+  };
+
   const handleContentChange = (html) => {
     console.log('Editor HTML content:', html);
     // Handle the HTML content (save to state, send to server, etc.)
@@ -53,12 +61,13 @@ function App() {
   return (
     <EditorProvider
       defaultFontFamilies={defaultEditorConfig.defaultFontFamilies}
-      mentionUserList={defaultEditorConfig.mentionUserList}
+      currentUser={currentUser}
     >
       <ConfigurableEditorWithAuth
         apiKey={apiKey}
         onChange={handleContentChange}
         initialContent="<p>Welcome to the editor!</p>"
+        mentionUserList={["Alice", "Bob", "Charlie"]}
         onAuthSuccess={() => console.log('Authentication successful')}
         onAuthError={(error) => console.error('Authentication error:', error)}
       />
@@ -77,7 +86,7 @@ Provides authentication and configuration context for the editor.
 
 - `children`: React nodes to render
 - `defaultFontFamilies`: Array of font names (optional)
-- `mentionUserList`: Array of usernames for mention functionality (optional)
+- `currentUser`: Current logged-in user for comments (optional) - Object with `id`, `name`, `email`, and optional `avatar`
 
 ### ConfigurableEditorWithAuth
 
@@ -89,7 +98,7 @@ The main editor component with authentication.
 - `initialContent`: Initial HTML content for the editor (optional) - string
 - `onChange`: Callback function when editor content changes (optional) - receives HTML string
 - `defaultFontFamilies`: Array of font names for the font selector (optional)
-- `mentionUserList`: Array of usernames for mention functionality (optional)
+- `mentionUserList`: Array of usernames for mention functionality (optional) - Array of strings like `["Alice", "Bob", "Charlie"]`
 - `onAuthSuccess`: Callback function when authentication is successful (optional)
 - `onAuthError`: Callback function when authentication fails (optional)
 - `customVerifyKey`: Custom function to verify API key (optional)
@@ -126,6 +135,13 @@ import 'ct-rich-text-editor/style.css';
 function App() {
   const [editorContent, setEditorContent] = useState('');
 
+  // Current user (typically from your auth system)
+  const currentUser = {
+    id: 'user-456',
+    name: 'Jane Smith',
+    email: 'jane@example.com'
+  };
+
   const handleContentChange = (html) => {
     setEditorContent(html);
     console.log('Current content:', html);
@@ -140,18 +156,18 @@ function App() {
 
   const loadSavedContent = () => {
     const saved = '<p>Start writing your content here...</p>';
-    return saved 
+    return saved;
   };
 
   return (
     <div>
-      <EditorProvider>
+      <EditorProvider currentUser={currentUser}>
         <ConfigurableEditorWithAuth
           apiKey="your-api-key"
           initialContent={loadSavedContent()}
           onChange={handleContentChange}
           defaultFontFamilies={['Arial', 'Helvetica', 'Times New Roman']}
-          mentionUserList={['@john', '@jane', '@bob']}
+          mentionUserList={['Alice', 'Bob', 'Charlie']}
           onAuthSuccess={() => console.log('Ready to edit!')}
           onAuthError={(error) => console.error('Auth failed:', error)}
         />

package/dist/Provider/EditorProvider.d.ts

@@ -1,4 +1,10 @@
 import { EditorConfigTypes } from '../types';
+export interface CurrentUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+}
 interface EditorContextType {
     isAuthenticated: boolean;
     isLoading: boolean;
@@ -7,6 +13,7 @@ interface EditorContextType {
     projectName: string | null;
     isPaidPlan: boolean;
     apiKey: string | null;
+    currentUser: CurrentUser | null;
     verifyKey: (apiKey: string) => Promise<void>;
 }
 export declare const useEditor: () => EditorContextType;
@@ -14,6 +21,7 @@ interface EditorProviderProps {
     children: React.ReactNode;
     defaultFontFamilies?: string[];
     mentionUserList?: string[];
+    currentUser?: CurrentUser;
 }
 export declare const EditorProvider: React.FC<EditorProviderProps>;
 export {};

package/dist/assets/style.css

@@ -648,6 +648,10 @@ video {
   left: 0.625rem;
 }
 
+.cteditor-left-3{
+  left: 0.75rem;
+}
+
 .cteditor-left-\[50\%\]{
   left: 50%;
 }
@@ -680,6 +684,10 @@ video {
   top: 0.5rem;
 }
 
+.cteditor-top-3{
+  top: 0.75rem;
+}
+
 .cteditor-top-4{
   top: 1rem;
 }
@@ -794,10 +802,6 @@ video {
   margin-left: 0.5rem;
 }
 
-.cteditor-ml-4{
-  margin-left: 1rem;
-}
-
 .cteditor-ml-auto{
   margin-left: auto;
 }
@@ -810,6 +814,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.cteditor-ms-auto{
+  margin-inline-start: auto;
+}
+
 .cteditor-mt-0\.5{
   margin-top: 0.125rem;
 }
@@ -830,10 +838,6 @@ video {
   margin-top: 1rem;
 }
 
-.cteditor-mt-5{
-  margin-top: 1.25rem;
-}
-
 .cteditor-mt-6{
   margin-top: 1.5rem;
 }
@@ -902,6 +906,11 @@ video {
   height: 1.5rem !important;
 }
 
+.\!cteditor-size-8{
+  width: 2rem !important;
+  height: 2rem !important;
+}
+
 .\!cteditor-size-\[18px\]{
   width: 18px !important;
   height: 18px !important;
@@ -917,6 +926,11 @@ video {
   height: 2.5rem;
 }
 
+.cteditor-size-11{
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
 .cteditor-size-3{
   width: 0.75rem;
   height: 0.75rem;
@@ -952,6 +966,18 @@ video {
   height: auto;
 }
 
+.\!cteditor-h-10{
+  height: 2.5rem !important;
+}
+
+.\!cteditor-h-11{
+  height: 2.75rem !important;
+}
+
+.\!cteditor-h-4{
+  height: 1rem !important;
+}
+
 .\!cteditor-h-6{
   height: 1.5rem !important;
 }
@@ -1060,6 +1086,10 @@ video {
   max-height: 12rem;
 }
 
+.cteditor-max-h-5{
+  max-height: 1.25rem;
+}
+
 .cteditor-max-h-56{
   max-height: 14rem;
 }
@@ -1100,6 +1130,10 @@ video {
   max-height: 650px;
 }
 
+.cteditor-max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .cteditor-max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
@@ -1144,6 +1178,14 @@ video {
   min-height: 100vh;
 }
 
+.\!cteditor-w-24{
+  width: 6rem !important;
+}
+
+.\!cteditor-w-4{
+  width: 1rem !important;
+}
+
 .\!cteditor-w-9{
   width: 2.25rem !important;
 }
@@ -1156,20 +1198,20 @@ video {
   width: 2.5rem;
 }
 
-.cteditor-w-14{
-  width: 3.5rem;
+.cteditor-w-11{
+  width: 2.75rem;
 }
 
-.cteditor-w-16{
-  width: 4rem;
+.cteditor-w-12{
+  width: 3rem;
 }
 
-.cteditor-w-2{
-  width: 0.5rem;
+.cteditor-w-14{
+  width: 3.5rem;
 }
 
-.cteditor-w-24{
-  width: 6rem;
+.cteditor-w-2{
+  width: 0.5rem;
 }
 
 .cteditor-w-3{
@@ -1244,10 +1286,6 @@ video {
   width: 340px;
 }
 
-.cteditor-w-\[400px\]{
-  width: 400px;
-}
-
 .cteditor-w-auto{
   width: auto;
 }
@@ -1696,6 +1734,10 @@ video {
   border-left-width: 1px;
 }
 
+.cteditor-border-l-2{
+  border-left-width: 2px;
+}
+
 .cteditor-border-l-4{
   border-left-width: 4px;
 }
@@ -1782,6 +1824,10 @@ video {
   border-color: hsl(var(--cteditorf47ac10b-foreground) / 0.2);
 }
 
+.cteditor-border-foreground\/30{
+  border-color: hsl(var(--cteditorf47ac10b-foreground) / 0.3);
+}
+
 .cteditor-border-foreground\/5{
   border-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
@@ -1800,11 +1846,6 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
-.cteditor-border-gray-400{
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
-}
-
 .cteditor-border-gray-500{
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
@@ -1897,6 +1938,10 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.1) !important;
 }
 
+.\!cteditor-bg-foreground\/15{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.15) !important;
+}
+
 .\!cteditor-bg-foreground\/5{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05) !important;
 }
@@ -1991,6 +2036,10 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-destructive) / 0.1);
 }
 
+.cteditor-bg-foreground{
+  background-color: hsl(var(--cteditorf47ac10b-foreground));
+}
+
 .cteditor-bg-foreground\/15{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.15);
 }
@@ -2003,6 +2052,14 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
 
+.cteditor-bg-foreground\/90{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.9);
+}
+
+.cteditor-bg-foreground\/\[0\.02\]{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.02);
+}
+
 .cteditor-bg-gray-100{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -2053,10 +2110,6 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-primary) / 0.1);
 }
 
-.cteditor-bg-primary\/20{
-  background-color: hsl(var(--cteditorf47ac10b-primary) / 0.2);
-}
-
 .cteditor-bg-primary\/5{
   background-color: hsl(var(--cteditorf47ac10b-primary) / 0.05);
 }
@@ -2253,6 +2306,11 @@ video {
   padding-right: 0.25rem !important;
 }
 
+.\!cteditor-px-2{
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .\!cteditor-py-0\.5{
   padding-top: 0.125rem !important;
   padding-bottom: 0.125rem !important;
@@ -2447,10 +2505,6 @@ video {
   font-size: 13px;
 }
 
-.cteditor-text-\[15px\]{
-  font-size: 15px;
-}
-
 .cteditor-text-\[9px\]{
   font-size: 9px;
 }
@@ -2549,11 +2603,6 @@ video {
   color: rgb(180 83 9 / var(--tw-text-opacity, 1)) !important;
 }
 
-.cteditor-text-\[\#9e9e9e\]{
-  --tw-text-opacity: 1;
-  color: rgb(158 158 158 / var(--tw-text-opacity, 1));
-}
-
 .cteditor-text-amber-600{
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
@@ -2883,6 +2932,14 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.cteditor-ring-background{
+  --tw-ring-color: hsl(var(--cteditorf47ac10b-background));
+}
+
+.cteditor-ring-foreground{
+  --tw-ring-color: hsl(var(--cteditorf47ac10b-foreground));
+}
+
 .cteditor-ring-primary\/20{
   --tw-ring-color: hsl(var(--cteditorf47ac10b-primary) / 0.2);
 }
@@ -3277,6 +3334,15 @@ body .ai-chat-popup .ai-chat-input {
     scrollbar-width: none;  /* Firefox */
 }
 
+body .EmojiPickerReact{
+  --epr-bg-color: hsl(var(--cteditorf47ac10b-background) / 0.5);
+  --epr-picker-border-color:hsl(var(--cteditorf47ac10b-foreground) / 0.2);
+  --epr-search-input-bg-color:hsl(var(--cteditorf47ac10b-background));
+  --epr-search-border-color:hsl(var(--cteditorf47ac10b-foreground) / 0.2);
+  --epr-category-label-bg-color:hsl(var(--cteditorf47ac10b-foreground) / 0.03);
+  --epr-category-label-text-color:hsl(var(--cteditorf47ac10b-foreground));
+}
+
 .\*\:cteditor-size-5 > *{
   width: 1.25rem;
   height: 1.25rem;
@@ -3408,6 +3474,10 @@ body .ai-chat-popup .ai-chat-input {
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
 
+.hover\:cteditor-bg-foreground\/\[0\.04\]:hover{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.04);
+}
+
 .hover\:cteditor-bg-gray-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -4111,8 +4181,12 @@ body .ai-chat-popup .ai-chat-input {
     width: 28rem;
   }
 
-  .sm\:cteditor-w-\[400px\]{
-    width: 400px;
+  .sm\:cteditor-max-w-\[500px\]{
+    max-width: 500px;
+  }
+
+  .sm\:cteditor-max-w-lg{
+    max-width: 32rem;
   }
 
   .sm\:cteditor-max-w-md{
@@ -4284,6 +4358,10 @@ body .ai-chat-popup .ai-chat-input {
   opacity: 0.5;
 }
 
+.\[\&\>div\>input\]\:\!cteditor-w-5>div>input{
+  width: 1.25rem !important;
+}
+
 .\[\&\>hr\]\:cteditor-h-\[2px\]>hr{
   height: 2px;
 }
@@ -4366,8 +4444,6 @@ body .ai-chat-popup .ai-chat-input {
 .\[\&_svg\]\:cteditor-shrink-0 svg{
   flex-shrink: 0;
 }
-
-
 #ct-editor-f47ac10b {
   /* Responsive container styles for constrained spaces */
   .editor-container {

package/dist/context/CommentContext.d.ts

@@ -1,8 +1,16 @@
 import { default as React } from 'react';
+export interface CurrentUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+}
 export interface Comment {
     id: string;
     text: string;
     author: string;
+    authorId?: string;
+    authorAvatar?: string;
     timestamp: number;
     status: "open" | "resolved";
     replies: Reply[];
@@ -12,10 +20,13 @@ export interface Reply {
     id: string;
     text: string;
     author: string;
+    authorId?: string;
+    authorAvatar?: string;
     timestamp: number;
 }
 interface CommentContextType {
     comments: Comment[];
+    currentUser: CurrentUser | null;
     addComment: (comment: Omit<Comment, "id" | "timestamp" | "status" | "replies">) => string;
     updateComment: (id: string, updates: Partial<Comment>) => void;
     deleteComment: (id: string) => void;
@@ -26,6 +37,7 @@ interface CommentContextType {
 export declare const useComments: () => CommentContextType;
 interface CommentProviderProps {
     children: React.ReactNode;
+    currentUser?: CurrentUser | null;
 }
 export declare const CommentProvider: React.FC<CommentProviderProps>;
 export {};

package/dist/{html2pdf.bundle-f2c10c61.js → html2pdf.bundle-83da4814.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { g as getDefaultExportFromCjs, c as commonjsGlobal } from "./index-ca05509b.js";
+import { g as getDefaultExportFromCjs, c as commonjsGlobal } from "./index-78acd11a.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];
@@ -46125,4 +46125,4 @@ const html2pdf_bundle$1 = /* @__PURE__ */ _mergeNamespaces({
 export {
   html2pdf_bundle$1 as h
 };
-//# sourceMappingURL=html2pdf.bundle-f2c10c61.js.map
+//# sourceMappingURL=html2pdf.bundle-83da4814.js.map