diff --git a/src/views/components/AddTaskModal.jsx b/src/views/components/AddTaskModal.jsx
index 8bccd76..7c4afdf 100644
--- a/src/views/components/AddTaskModal.jsx
+++ b/src/views/components/AddTaskModal.jsx
@@ -14,16 +14,19 @@ import {
import { FormControl } from '@mui/material'
import * as chrono from 'chrono-node'
import moment from 'moment'
-import { useContext, useEffect, useRef, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
import { UserContext } from '../../contexts/UserContext'
import { useCreateChore } from '../../queries/ChoreQueries'
-import { useAllUsers } from '../../queries/UserQueries'
-import useDebounce from '../../utils/Debounce'
+import { useCircleMembers } from '../../queries/UserQueries'
import { isPlusAccount } from '../../utils/Helpers'
import { useLabels } from '../Labels/LabelQueries'
-import SmartTaskTitleInput from '../TestView/SmartTaskTitleInput'
-import { parseLabels, parsePriority, parseRepeatV2 } from './CustomParsers'
+import {
+ parseAssignees,
+ parseLabels,
+ parsePriority,
+ parseRepeatV2,
+} from './CustomParsers'
+import SmartTaskTitleInput from './SmartTaskTitleInput'
import LearnMoreButton from './LearnMore'
import RichTextEditor from './RichTextEditor'
@@ -31,13 +34,12 @@ import SubTasks from './SubTask'
const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
const { data: userLabels, isLoading: userLabelsLoading } = useLabels()
- const { data: allUsers, isLoading: isAllUserLoading } = useAllUsers()
+ const { data: circleMembers, isLoading: isCircleMembersLoading } =
+ useCircleMembers()
const createChoreMutation = useCreateChore()
const { userProfile } = useContext(UserContext)
- const navigate = useNavigate()
const [taskText, setTaskText] = useState('')
- const debounceParsing = useDebounce(taskText, 30)
const [taskTitle, setTaskTitle] = useState('')
const [renderedParts, setRenderedParts] = useState([])
@@ -46,7 +48,6 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
const [priority, setPriority] = useState(0)
const [dueDate, setDueDate] = useState(null)
const [description, setDescription] = useState(null)
- const [assignedTo, setAssignedTo] = useState(userProfile?.id)
const [assignees, setAssignees] = useState([])
const [labelsV2, setLabelsV2] = useState([])
const [frequency, setFrequency] = useState(null)
@@ -71,13 +72,231 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
}
}, [autoFocus])
+ const renderHighlightedSentence = useCallback(
+ (
+ sentence,
+ repeatHighlight,
+ priorityHighlight,
+ labelsHighlight,
+ dueDateHighlight,
+ ) => {
+ const parts = []
+ let lastIndex = 0
+ let plainText = ''
+
+ // Combine all highlight ranges and sort them by their start index
+ const allHighlights = []
+ if (repeatHighlight) {
+ repeatHighlight.forEach(h =>
+ allHighlights.push({ ...h, type: 'repeat', priority: 40 }),
+ )
+ }
+ if (priorityHighlight) {
+ priorityHighlight.forEach(h =>
+ allHighlights.push({ ...h, type: 'priority', priority: 30 }),
+ )
+ }
+ if (labelsHighlight) {
+ labelsHighlight.forEach(h =>
+ allHighlights.push({ ...h, type: 'label', priority: 20 }),
+ )
+ }
+ if (dueDateHighlight) {
+ allHighlights.push({
+ ...dueDateHighlight,
+ type: 'dueDate',
+ priority: 10,
+ })
+ }
+
+ allHighlights.sort((a, b) => a.start - b.start)
+ const resolvedHighlights = []
+ for (let i = 0; i < allHighlights.length; i++) {
+ const current = allHighlights[i]
+ const previous = resolvedHighlights[resolvedHighlights.length - 1]
+
+ if (previous && current.start < previous.end) {
+ if (current.priority > previous.priority) {
+ resolvedHighlights.pop()
+ resolvedHighlights.push(current)
+ }
+ } else {
+ // No overlap, add the current highlight
+ resolvedHighlights.push(current)
+ }
+ }
+
+ for (const highlight of resolvedHighlights) {
+ // Add the text before the highlight
+ if (highlight.start > lastIndex) {
+ const textBefore = sentence.substring(lastIndex, highlight.start)
+ parts.push(textBefore)
+ plainText += textBefore
+ }
+
+ // Determine the class name based on the highlight type
+ let className = ''
+ switch (highlight.type) {
+ case 'repeat':
+ className = 'highlight-repeat'
+ break
+ case 'priority':
+ className = 'highlight-priority'
+ break
+ case 'label':
+ className = 'highlight-label'
+ break
+ case 'dueDate':
+ className = 'highlight-date'
+ break
+ default:
+ break
+ }
+
+ // Add the highlighted span
+ const highlightedText = sentence.substring(
+ highlight.start,
+ highlight.end,
+ )
+ parts.push(
+
+ {highlightedText}
+ ,
+ )
+
+ // Update the last index to the end of the current highlight
+ lastIndex = highlight.end
+ }
+
+ // Add any remaining text after the last highlight
+ if (lastIndex < sentence.length) {
+ const remainingText = sentence.substring(lastIndex)
+ parts.push(remainingText)
+ plainText += remainingText
+ }
+
+ return {
+ parts,
+ plainText,
+ }
+ },
+ [],
+ )
+
+ const processText = useCallback(
+ sentence => {
+ let cleanedSentence = sentence
+ const priority = parsePriority(sentence)
+ if (priority.result) setPriority(priority.result)
+ cleanedSentence = priority.cleanedSentence
+ const labels = parseLabels(sentence, userLabels)
+ if (labels.result) {
+ cleanedSentence = labels.cleanedSentence
+ setLabelsV2(labels.result)
+ }
+
+ const repeat = parseRepeatV2(sentence)
+ if (repeat.result) {
+ setFrequency(repeat.result)
+ setFrequencyHumanReadable(repeat.name)
+ cleanedSentence = repeat.cleanedSentence
+ }
+ // Parse assignees using circle members
+ const circleMembersList = circleMembers?.res || []
+ const assigneesForParsing = circleMembersList.map(member => ({
+ userId: member.userId,
+ username:
+ member.username ||
+ member.displayName?.toLowerCase().replace(/\s+/g, ''),
+ displayName: member.displayName,
+ name: member.displayName,
+ id: member.userId,
+ }))
+
+ const assigneesResult = parseAssignees(sentence, assigneesForParsing)
+ if (assigneesResult.result) {
+ cleanedSentence = assigneesResult.cleanedSentence
+ setAssignees(assigneesResult.result)
+ } else {
+ // Default to current user if no assignees parsed
+ setAssignees([
+ {
+ userId: userProfile.id,
+ username: userProfile.username,
+ displayName: userProfile.displayName,
+ name: userProfile.displayName,
+ id: userProfile.id,
+ },
+ ])
+ }
+ const parsedDueDate = chrono.parse(sentence, new Date(), {
+ forwardDate: true,
+ })
+ if (parsedDueDate[0]?.index > -1) {
+ setDueDate(
+ moment(parsedDueDate[0].start.date()).format('YYYY-MM-DDTHH:mm:ss'),
+ )
+ cleanedSentence = cleanedSentence.replace(parsedDueDate[0].text, '')
+ }
+
+ if (repeat.result) {
+ // if repeat has result the cleaned sentence will remove the date related info which mean
+ // we need to reparse the date again to get the correct due date:
+ const parsedDueDate = chrono.parse(sentence, new Date(), {
+ forwardDate: true,
+ })
+ if (parsedDueDate[0]?.index > -1) {
+ setDueDate(
+ moment(parsedDueDate[0].start.date()).format('YYYY-MM-DDTHH:mm:ss'),
+ )
+ }
+ }
+
+ setTaskText(sentence)
+ setTaskTitle(cleanedSentence.trim())
+ const { parts, plainText } = renderHighlightedSentence(
+ sentence,
+ repeat.highlight,
+ priority.highlight,
+ labels.highlight,
+ parsedDueDate && parsedDueDate[0]
+ ? {
+ start: parsedDueDate[0].index,
+ end: parsedDueDate[0].index + parsedDueDate[0].text.length,
+ text: parsedDueDate[0].text,
+ }
+ : null,
+ )
+
+ setRenderedParts(parts)
+ setTaskTitle(plainText)
+ },
+ [circleMembers, userLabels, userProfile, renderHighlightedSentence],
+ )
+
useEffect(() => {
- if (!isModalOpen || userLabelsLoading || isAllUserLoading) {
+ if (!isModalOpen || userLabelsLoading || isCircleMembersLoading) {
return
}
processText(taskText)
- }, [taskText, userLabelsLoading, isAllUserLoading])
+ }, [
+ taskText,
+ userLabelsLoading,
+ isCircleMembersLoading,
+ isModalOpen,
+ processText,
+ ])
const handleEnterPressed = () => {
createChore()
@@ -96,6 +315,7 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
setSubTasks(null)
setHasSubTasks(false)
setLabelsV2([])
+ setAssignees([])
}
const handleSubmit = () => {
@@ -104,197 +324,12 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
setTaskText('')
}
- const handleTextChange = e => {
- if (!e.target.value) {
- setTaskText('')
- setDueDate(null)
- setFrequency(null)
- setFrequencyHumanReadable(null)
- setPriority(0)
- return
- }
- setTaskText(e.target.value)
- }
- const processText = sentence => {
- let cleanedSentence = sentence
- const priority = parsePriority(sentence)
- if (priority.result) setPriority(priority.result)
- cleanedSentence = priority.cleanedSentence
- const labels = parseLabels(sentence, userLabels)
- if (labels.result) {
- cleanedSentence = labels.cleanedSentence
- setLabelsV2(labels.result)
- }
-
- const repeat = parseRepeatV2(sentence)
- if (repeat.result) {
- setFrequency(repeat.result)
- setFrequencyHumanReadable(repeat.name)
- cleanedSentence = repeat.cleanedSentence
- }
- // const assignees = parseAssignees(sentence)
- // if (assignees.result) {
- // cleanedSentence = assignees.cleanedSentence
- // set
- // }
- const parsedDueDate = chrono.parse(sentence, new Date(), {
- forwardDate: true,
- })
- if (parsedDueDate[0]?.index > -1) {
- setDueDate(
- moment(parsedDueDate[0].start.date()).format('YYYY-MM-DDTHH:mm:ss'),
- )
- cleanedSentence = cleanedSentence.replace(parsedDueDate[0].text, '')
- }
-
- if (repeat.result) {
- // if repeat has result the cleaned sentence will remove the date related info which mean
- // we need to reparse the date again to get the correct due date:
- const parsedDueDate = chrono.parse(sentence, new Date(), {
- forwardDate: true,
- })
- if (parsedDueDate[0]?.index > -1) {
- setDueDate(
- moment(parsedDueDate[0].start.date()).format('YYYY-MM-DDTHH:mm:ss'),
- )
- }
- }
-
- setTaskText(sentence)
- setTaskTitle(cleanedSentence.trim())
- const { parts, plainText } = renderHighlightedSentence(
- sentence,
- repeat.highlight,
- priority.highlight,
- labels.highlight,
- parsedDueDate && parsedDueDate[0]
- ? {
- start: parsedDueDate[0].index,
- end: parsedDueDate[0].index + parsedDueDate[0].text.length,
- text: parsedDueDate[0].text,
- }
- : null,
- )
-
- setRenderedParts(parts)
- setTaskTitle(plainText)
- }
- const renderHighlightedSentence = (
- sentence,
- repeatHighlight,
- priorityHighlight,
- labelsHighlight,
- dueDateHighlight,
- ) => {
- const parts = []
- let lastIndex = 0
- let plainText = ''
-
- // Combine all highlight ranges and sort them by their start index
- const allHighlights = []
- if (repeatHighlight) {
- repeatHighlight.forEach(h =>
- allHighlights.push({ ...h, type: 'repeat', priority: 40 }),
- )
- }
- if (priorityHighlight) {
- priorityHighlight.forEach(h =>
- allHighlights.push({ ...h, type: 'priority', priority: 30 }),
- )
- }
- if (labelsHighlight) {
- labelsHighlight.forEach(h =>
- allHighlights.push({ ...h, type: 'label', priority: 20 }),
- )
- }
- if (dueDateHighlight) {
- allHighlights.push({ ...dueDateHighlight, type: 'dueDate', priority: 10 })
- }
-
- allHighlights.sort((a, b) => a.start - b.start)
- const resolvedHighlights = []
- for (let i = 0; i < allHighlights.length; i++) {
- const current = allHighlights[i]
- const previous = resolvedHighlights[resolvedHighlights.length - 1]
-
- if (previous && current.start < previous.end) {
- if (current.priority > previous.priority) {
- resolvedHighlights.pop()
- resolvedHighlights.push(current)
- }
- } else {
- // No overlap, add the current highlight
- resolvedHighlights.push(current)
- }
- }
-
- for (const highlight of resolvedHighlights) {
- // Add the text before the highlight
- if (highlight.start > lastIndex) {
- const textBefore = sentence.substring(lastIndex, highlight.start)
- parts.push(textBefore)
- plainText += textBefore
- }
-
- // Determine the class name based on the highlight type
- let className = ''
- switch (highlight.type) {
- case 'repeat':
- className = 'highlight-repeat'
- break
- case 'priority':
- className = 'highlight-priority'
- break
- case 'label':
- className = 'highlight-label'
- break
- case 'dueDate':
- className = 'highlight-date'
- break
- default:
- break
- }
-
- // Add the highlighted span
- const highlightedText = sentence.substring(highlight.start, highlight.end)
- parts.push(
-
- {highlightedText}
- ,
- )
-
- // Update the last index to the end of the current highlight
- lastIndex = highlight.end
- }
-
- // Add any remaining text after the last highlight
- if (lastIndex < sentence.length) {
- const remainingText = sentence.substring(lastIndex)
- parts.push(remainingText)
- plainText += remainingText
- }
-
- return {
- parts,
- plainText,
- }
- }
const createChore = () => {
const chore = {
name: taskTitle,
- assignees: [{ userId: userProfile.id }],
+ assignees: assignees.map(assignee => ({ userId: assignee.userId })),
dueDate: dueDate ? new Date(dueDate).toISOString() : null,
- assignedTo: userProfile.id,
+ assignedTo: assignees.length > 0 ? assignees[0].userId : userProfile.id,
assignStrategy: 'random',
isRolling: false,
notification: false,
@@ -346,7 +381,7 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
}
})
}
- if (userLabelsLoading || isAllUserLoading) {
+ if (userLabelsLoading || isCircleMembersLoading) {
return <>
}
@@ -373,7 +408,7 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
This feature lets you create a task simply by typing a
sentence. It attempt parses the sentence to identify the
- task's due date, priority, and frequency.
+ task's due date, priority, and frequency.
{
],
},
'@': {
- // value: 'userId',
- // display: 'displayName',
- // options: allUsers ? allUsers : [],
- value: 'id',
- display: 'name',
- options: [
- { id: userProfile.id, name: userProfile.displayName },
- ],
+ value: 'userId',
+ display: 'displayName',
+ options: circleMembers?.res || [],
},
}}
/>
@@ -561,11 +591,25 @@ const TaskInput = ({ autoFocus, onChoreUpdate, isModalOpen, onClose }) => {
}}
>
- Assignee
-
+ Assignees
+
+ {assignees.length > 0 ? (
+ assignees.map((assignee, index) => (
+
+ {assignee.displayName || assignee.username}
+
+ ))
+ ) : (
+
+ {userProfile.displayName}
+
+ )}
+
Frequency
diff --git a/src/views/components/CalendarView.jsx b/src/views/components/CalendarView.jsx
index 9842405..1b22636 100644
--- a/src/views/components/CalendarView.jsx
+++ b/src/views/components/CalendarView.jsx
@@ -1,11 +1,12 @@
import { CalendarMonth } from '@mui/icons-material'
-import { Box, Chip, Grid, Typography } from '@mui/joy'
+import { Avatar, Box, Chip, Grid, Typography } from '@mui/joy'
import moment from 'moment'
import React, { useState } from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css'
import { useNavigate } from 'react-router-dom'
import { UserContext } from '../../contexts/UserContext'
+import { useCircleMembers } from '../../queries/UserQueries'
import { TASK_COLOR } from '../../utils/Colors'
import './Calendar.css'
@@ -20,6 +21,19 @@ const CalendarView = ({ chores }) => {
const [selectedDate, setSeletedDate] = useState(null)
const Navigate = useNavigate()
+ // Fetch circle members data to get assignee names
+ const { data: circleMembersData } = useCircleMembers()
+ const circleMembers = circleMembersData?.res || []
+
+ // Helper function to get assignee display name
+ const getAssigneeName = assignedTo => {
+ if (assignedTo === userProfile.id) {
+ return userProfile.displayName
+ }
+ const assignee = circleMembers.find(member => member.userId === assignedTo)
+ return assignee ? `${assignee.displayName}` : 'Assigned to other'
+ }
+
const tileContent = ({ date, view }) => {
if (view === 'month') {
const dayChores = chores.filter(chore => {
@@ -109,34 +123,60 @@ const CalendarView = ({ chores }) => {
/>
{!selectedDate && (
- {[
- { name: 'Assigned to me', color: TASK_COLOR.ASSIGNED_TO_ME },
- { name: 'Assigned to other', color: TASK_COLOR.ASSIGNED_TO_OTHER },
- ].map((item, index) => (
-
- {
+ const assignedUserIds = new Set(
+ chores.map(chore => chore.assignedTo).filter(Boolean),
+ )
+ const legendItems = []
+
+ // Add current user if they have assignments
+ if (assignedUserIds.has(userProfile.id)) {
+ legendItems.push({
+ name: 'Assigned to me',
+ color: TASK_COLOR.ASSIGNED_TO_ME,
+ })
+ }
+
+ // Add other circle members who have assignments
+ circleMembers.forEach(member => {
+ if (
+ member.userId !== userProfile.id &&
+ assignedUserIds.has(member.userId)
+ ) {
+ legendItems.push({
+ name: `Assigned to ${member.displayName}`,
+ color: TASK_COLOR.ASSIGNED_TO_OTHER,
+ })
+ }
+ })
+
+ return legendItems.map((item, index) => (
+
-
- {item.name}
-
-
- ))}
+ >
+
+
+ {item.name}
+
+
+ ))
+ })()}
)}
{selectedDate && (
@@ -257,16 +297,37 @@ const CalendarView = ({ chores }) => {
>
{moment(chore.nextDueDate).format('h:mm A')}
-
- {chore.assignedTo === userProfile.id
- ? 'Assigned to me'
- : 'Assigned to other'}
-
+ {getAssigneeName(chore.assignedTo)}
+ */}
+
member.userId === chore.assignedTo,
+ )?.image
+ }
+ />
+ }
+ sx={{
+ backgroundColor: getAssigneeColor(
+ chore.assignedTo,
+ userProfile,
+ ),
+ color: 'white',
+ }}
+ >
+ {getAssigneeName(chore.assignedTo)}
+
))}
diff --git a/src/views/components/CustomParsers.js b/src/views/components/CustomParsers.js
index 632ea59..eb44912 100644
--- a/src/views/components/CustomParsers.js
+++ b/src/views/components/CustomParsers.js
@@ -375,7 +375,6 @@ export const parseAssignees = (inputSentence, users) => {
const sentence = inputSentence.toLowerCase()
const result = []
const highlight = []
- console.log('users:', users)
for (const user of users) {
if (sentence.includes(`@${user.username.toLowerCase()}`)) {
diff --git a/src/views/components/RichTextEditor.css b/src/views/components/RichTextEditor.css
index 78decca..5c5cf95 100644
--- a/src/views/components/RichTextEditor.css
+++ b/src/views/components/RichTextEditor.css
@@ -51,3 +51,135 @@
max-width: 100%;
height: auto;
}
+
+/* Material-UI style customizations for Quill toolbar */
+.quill-root .ql-toolbar.ql-snow {
+ border: 1px solid var(--joy-palette-neutral-outlinedBorder, #dde7ee);
+ border-bottom: none;
+ border-radius: 8px 8px 0 0;
+ background: var(--joy-palette-background-surface, #fff);
+ box-shadow: var(--joy-shadow-xs, 0px 1px 2px 0px rgba(16, 24, 40, 0.05));
+ padding: 12px 16px;
+}
+
+.quill-root .ql-container.ql-snow {
+ border: 1px solid var(--joy-palette-neutral-outlinedBorder, #dde7ee);
+ border-top: none;
+ border-radius: 0 0 8px 8px;
+ background: var(--joy-palette-background-surface, #fff);
+}
+
+/* Style toolbar buttons with Material-UI look */
+.quill-root .ql-toolbar .ql-formats {
+ margin-right: 12px;
+}
+
+.quill-root .ql-toolbar button {
+ border-radius: 6px;
+ padding: 6px;
+ margin: 0 2px;
+ transition: all 0.2s ease;
+ border: none;
+ background: transparent;
+}
+
+.quill-root .ql-toolbar button:hover {
+ background: var(--joy-palette-neutral-softHoverBg, rgba(99, 107, 116, 0.08));
+}
+
+.quill-root .ql-toolbar button.ql-active {
+ background: var(--joy-palette-primary-softActiveBg, rgba(25, 118, 210, 0.12));
+ color: var(--joy-palette-primary-solidBg, #1976d2);
+}
+
+/* Style dropdown selectors */
+.quill-root .ql-toolbar .ql-picker {
+ border-radius: 6px;
+}
+
+.quill-root .ql-toolbar .ql-picker-label {
+ border-radius: 6px;
+ transition: all 0.2s ease;
+ color: var(--joy-palette-neutral-solidBg, #333);
+}
+
+.quill-root .ql-toolbar .ql-picker-label:hover {
+ background: var(--joy-palette-neutral-softHoverBg, rgba(99, 107, 116, 0.08));
+}
+
+.quill-root .ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
+ background: var(--joy-palette-neutral-softActiveBg, rgba(99, 107, 116, 0.12));
+}
+
+/* Style the dropdown options */
+.quill-root .ql-toolbar .ql-picker-options {
+ border-radius: 8px;
+ background: var(--joy-palette-background-popup, #fff);
+ box-shadow: var(
+ --joy-shadow-md,
+ 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+ 0px 2px 4px -2px rgba(16, 24, 40, 0.06)
+ );
+ /* padding: 4px;
+}
+
+.quill-root .ql-toolbar .ql-picker-item {
+ /* border-radius: 4px;
+ padding: 8px 12px;
+ margin: 2px 0;
+ transition: all 0.2s ease; */
+}
+
+.quill-root .ql-toolbar .ql-picker-item:hover {
+ background: var(--joy-palette-neutral-softHoverBg, rgba(99, 107, 116, 0.08));
+}
+
+.quill-root .ql-toolbar .ql-picker-item.ql-selected {
+ background: var(--joy-palette-primary-softActiveBg, rgba(25, 118, 210, 0.12));
+ color: var(--joy-palette-primary-solidBg, #1976d2);
+}
+
+/* Add separator styling */
+.quill-root .ql-toolbar .ql-formats:not(:last-child)::after {
+ content: '';
+ display: inline-block;
+ width: 1px;
+ height: 20px;
+ background: var(--joy-palette-divider, #e7ebf0);
+ margin-left: 8px;
+ vertical-align: middle;
+}
+
+/* Remove default Quill borders and spacing */
+.quill-root .ql-editor {
+ padding: 16px;
+ min-height: 120px;
+ font-family: var(
+ --joy-fontFamily-body,
+ Inter,
+ system-ui,
+ Avenir,
+ Helvetica,
+ Arial,
+ sans-serif
+ );
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+/* Custom focus styles */
+.quill-root:focus-within .ql-toolbar.ql-snow {
+ border-color: var(--joy-palette-primary-outlinedBorder, #1976d2);
+}
+
+.quill-root:focus-within .ql-container.ql-snow {
+ border-color: var(--joy-palette-primary-outlinedBorder, #1976d2);
+}
+
+/* Variant-specific styling */
+.quill-variant-bubble .ql-toolbar {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ padding: 8px;
+}
diff --git a/src/views/components/RichTextEditor.jsx b/src/views/components/RichTextEditor.jsx
index f538f95..3a0eb40 100644
--- a/src/views/components/RichTextEditor.jsx
+++ b/src/views/components/RichTextEditor.jsx
@@ -2,9 +2,10 @@ import imageCompression from 'browser-image-compression'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import QuillMarkdown from 'quilljs-markdown'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useContext, useEffect, useRef } from 'react'
+import { UserContext } from '../../contexts/UserContext'
import { useError } from '../../service/ErrorProvider'
-import { resolvePhotoURL } from '../../utils/Helpers'
+import { isPlusAccount, resolvePhotoURL } from '../../utils/Helpers'
import { UploadFile } from '../../utils/TokenManager'
import './RichTextEditor.css'
@@ -12,16 +13,28 @@ const RichTextEditor = ({
value = '',
onChange,
isEditable = true,
+ placeholder = 'Enter description...',
variant = 'outlined',
entityId,
entityType,
}) => {
const { showError } = useError()
+ const { userProfile } = useContext(UserContext)
const quillRef = useRef(null)
const editorRef = useRef(null)
// Image upload handler - wrapped in useCallback to avoid recreating on every render
const handleImageUpload = useCallback(() => {
+ // Check if user has plus account
+ if (!isPlusAccount(userProfile)) {
+ showError({
+ title: 'Plus Feature',
+ message:
+ 'Image uploads are not available in the Basic plan. Upgrade to Plus to add images to your content.',
+ })
+ return
+ }
+
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
@@ -77,6 +90,19 @@ const RichTextEditor = ({
message: 'The file you are trying to upload is too large.',
})
return
+ } else if (response.status === 403 && !isPlusAccount()) {
+ showError({
+ title: 'Upgrade Required',
+ message:
+ 'Image uploads are only available for Plus accounts. Please ',
+ })
+ return
+ } else if (response.status === 403) {
+ showError({
+ title: 'Permission Denied',
+ message: 'You do not have permission to upload files.',
+ })
+ return
} else if (!response.ok) {
showError({
title: 'Upload Failed',
@@ -98,7 +124,7 @@ const RichTextEditor = ({
})
}
}
- }, [entityId, entityType, showError]) // Dependencies for useCallback
+ }, [entityId, entityType, showError, userProfile]) // Dependencies for useCallback
useEffect(() => {
if (!quillRef.current) return
@@ -120,7 +146,7 @@ const RichTextEditor = ({
},
},
},
- placeholder: 'Enter description...',
+ placeholder: placeholder,
})
new QuillMarkdown(editorRef.current, {})
editorRef.current.root.innerHTML = value
@@ -141,7 +167,7 @@ const RichTextEditor = ({
editorRef.current.readOnly = false
}
}
- }, [onChange, value, isEditable, variant, handleImageUpload]) // Added handleImageUpload to dependency array
+ }, [onChange, value, isEditable, variant, handleImageUpload, userProfile]) // Added handleImageUpload and userProfile to dependency array
useEffect(() => {
if (editorRef.current && isEditable) {
@@ -178,7 +204,13 @@ const RichTextEditor = ({
return (
)
}