writing-style: Switch to Tiptap editor and preserve line breaks#1182
writing-style: Switch to Tiptap editor and preserve line breaks#1182
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughThese changes integrate the Tiptap rich text editor into the WritingStyle setting form, replacing plain textarea input with markdown editor capabilities, and extend Tiptap with support for preserving pasted line breaks through configurable markdown transformation options. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Switch the assistant writing style dialog to a Tiptap editor that preserves pasted line breaks and submits markdown content in WritingStyleDialog.tsx and extend
|
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx (1)
130-134: Error display won't function correctly without form state connection.While the error display implementation is correct, it won't show validation errors because the form state is not being updated as the user types. This is related to the issue flagged in the onSubmit handler.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/data-fetching.mdc)
**/*.{ts,tsx}: For API GET requests to server, use theswrpackage
Useresult?.serverErrorwithtoastErrorfrom@/components/Toastfor error handling in async operations
**/*.{ts,tsx}: Use wrapper functions for Gmail message operations (get, list, batch, etc.) from @/utils/gmail/message.ts instead of direct API calls
Use wrapper functions for Gmail thread operations from @/utils/gmail/thread.ts instead of direct API calls
Use wrapper functions for Gmail label operations from @/utils/gmail/label.ts instead of direct API calls
**/*.{ts,tsx}: For early access feature flags, create hooks using the naming conventionuse[FeatureName]Enabledthat return a boolean fromuseFeatureFlagEnabled("flag-key")
For A/B test variant flags, create hooks using the naming conventionuse[FeatureName]Variantthat define variant types, useuseFeatureFlagVariantKey()with type casting, and provide a default "control" fallback
Use kebab-case for PostHog feature flag keys (e.g.,inbox-cleaner,pricing-options-2)
Always define types for A/B test variant flags (e.g.,type PricingVariant = "control" | "variant-a" | "variant-b") and provide type safety through type casting
**/*.{ts,tsx}: Don't use primitive type aliases or misleading types
Don't use empty type parameters in type aliases and interfaces
Don't use this and super in static contexts
Don't use any or unknown as type constraints
Don't use the TypeScript directive @ts-ignore
Don't use TypeScript enums
Don't export imported variables
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions
Don't use TypeScript namespaces
Don't use non-null assertions with the!postfix operator
Don't use parameter properties in class constructors
Don't use user-defined types
Useas constinstead of literal types and type annotations
Use eitherT[]orArray<T>consistently
Initialize each enum member value explicitly
Useexport typefor types
Use `impo...
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
apps/web/app/(app)/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)
apps/web/app/(app)/**/*.{ts,tsx}: Components for the page are either put inpage.tsx, or in theapps/web/app/(app)/PAGE_NAMEfolder
If we're in a deeply nested component we will useswrto fetch via API
If you need to useonClickin a component, that component is a client component and file must start withuse client
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/prisma-enum-imports.mdc)
Always import Prisma enums from
@/generated/prisma/enumsinstead of@/generated/prisma/clientto avoid Next.js bundling errors in client componentsImport Prisma using the project's centralized utility:
import prisma from '@/utils/prisma'
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
Import specific lodash functions rather than entire lodash library to minimize bundle size (e.g.,
import groupBy from 'lodash/groupBy')
apps/web/**/*.{ts,tsx}: Use TypeScript with strict null checks
Do not export types/interfaces that are only used within the same file. Export later if needed
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI and Tailwind for components and styling
Usenext/imagepackage for images
For API GET requests to server, use theswrpackage with hooks likeuseSWRto fetch data
For text inputs, use theInputcomponent withregisterPropsfor form integration and error handling
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
**/*.{tsx,ts,css}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
Implement responsive design with Tailwind CSS using a mobile-first approach
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
**/*.tsx: Use theLoadingContentcomponent to handle loading states instead of manual loading state management
For text areas, use theInputcomponent withtype='text',autosizeTextareaprop set to true, andregisterPropsfor form integration
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{js,jsx,ts,tsx}: Don't useaccessKeyattribute on any HTML element
Don't setaria-hidden="true"on focusable elements
Don't add ARIA roles, states, and properties to elements that don't support them
Don't use distracting elements like<marquee>or<blink>
Only use thescopeprop on<th>elements
Don't assign non-interactive ARIA roles to interactive HTML elements
Make sure label elements have text content and are associated with an input
Don't assign interactive ARIA roles to non-interactive HTML elements
Don't assigntabIndexto non-interactive HTML elements
Don't use positive integers fortabIndexproperty
Don't include "image", "picture", or "photo" in img alt prop
Don't use explicit role property that's the same as the implicit/default role
Make static elements with click handlers use a valid role attribute
Always include atitleelement for SVG elements
Give all elements requiring alt text meaningful information for screen readers
Make sure anchors have content that's accessible to screen readers
AssigntabIndexto non-interactive HTML elements witharia-activedescendant
Include all required ARIA attributes for elements with ARIA roles
Make sure ARIA properties are valid for the element's supported roles
Always include atypeattribute for button elements
Make elements with interactive roles and handlers focusable
Give heading elements content that's accessible to screen readers (not hidden witharia-hidden)
Always include alangattribute on the html element
Always include atitleattribute for iframe elements
AccompanyonClickwith at least one of:onKeyUp,onKeyDown, oronKeyPress
AccompanyonMouseOver/onMouseOutwithonFocus/onBlur
Include caption tracks for audio and video elements
Use semantic elements instead of role attributes in JSX
Make sure all anchors are valid and navigable
Ensure all ARIA properties (aria-*) are valid
Use valid, non-abstract ARIA roles for elements with ARIA roles
Use valid AR...
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{jsx,tsx}: Don't use unnecessary fragments
Don't pass children as props
Don't use the return value of React.render
Make sure all dependencies are correctly specified in React hooks
Make sure all React hooks are called from the top level of component functions
Don't forget key props in iterators and collection literals
Don't define React components inside other components
Don't use event handlers on non-interactive elements
Don't assign to React component props
Don't use bothchildrenanddangerouslySetInnerHTMLprops on the same element
Don't use dangerous JSX props
Don't use Array index in keys
Don't insert comments as text nodes
Don't assign JSX properties multiple times
Don't add extra closing tags for components without children
Use<>...</>instead of<Fragment>...</Fragment>
Watch out for possible "wrong" semicolons inside JSX elements
Make sure void (self-closing) elements don't have children
Don't usetarget="_blank"withoutrel="noopener"
Don't use<img>elements in Next.js projects
Don't use<head>elements in Next.js projects
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
!(pages/_document).{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
Don't use the next/head module in pages/_document.js on Next.js projects
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/utilities.mdc)
**/*.{js,ts,jsx,tsx}: Use lodash utilities for common operations (arrays, objects, strings)
Import specific lodash functions to minimize bundle size (e.g.,import groupBy from 'lodash/groupBy')
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
apps/web/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
apps/web/**/*.{ts,tsx,js,jsx}: Use@/path aliases for imports from project root
Prefer self-documenting code over comments; use descriptive variable and function names instead of explaining intent with comments
Add helper functions to the bottom of files, not the top
All imports go at the top of files, no mid-file dynamic imports
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
apps/web/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
Follow NextJS app router structure with (app) directory
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
apps/web/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
apps/web/**/*.{tsx,jsx}: Follow tailwindcss patterns with prettier-plugin-tailwindcss for class sorting
Prefer functional components with hooks in React
Use shadcn/ui components when available
Ensure responsive design with mobile-first approach in components
Follow consistent naming conventions using PascalCase for components
Use LoadingContent component for async data with loading and error states
Use React Hook Form with Zod validation for form handling
Useresult?.serverErrorwithtoastErrorandtoastSuccessfor error handling in forms
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
apps/web/**/*.{ts,tsx,js,jsx,json,css}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
Format code with Prettier
Files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
apps/web/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/fullstack-workflow.mdc)
Use
LoadingContentcomponent to consistently handle loading and error states, passingloading,error, andchildrenpropsUse PascalCase for component file names (e.g.,
components/Button.tsx)
Files:
apps/web/components/editor/Tiptap.tsx
**/{pages,routes,components}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/gmail-api.mdc)
Never call Gmail API directly from routes or components - always use wrapper functions from the utils folder
Files:
apps/web/components/editor/Tiptap.tsx
🧠 Learnings (14)
📚 Learning: 2025-11-25T14:40:15.063Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:15.063Z
Learning: Applies to **/*.tsx : For text areas, use the `Input` component with `type='text'`, `autosizeTextarea` prop set to true, and `registerProps` for form integration
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:40:13.649Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:13.649Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : For text areas in forms, use the `Input` component with `type='text'`, `autosizeTextarea` prop, `rows`, `name`, `placeholder`, `registerProps` from react-hook-form, and `error` props
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsxapps/web/components/editor/Tiptap.tsx
📚 Learning: 2025-11-25T14:40:15.063Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:15.063Z
Learning: Applies to **/*.{tsx,ts} : For text inputs, use the `Input` component with `registerProps` for form integration and error handling
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:38:07.606Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/llm.mdc:0-0
Timestamp: 2025-11-25T14:38:07.606Z
Learning: Applies to apps/web/utils/ai/**/*.ts : Use XML-like tags to structure data in prompts, remove excessive whitespace and truncate long inputs, and format data consistently across similar LLM functions
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:40:15.063Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:15.063Z
Learning: Applies to **/*.{tsx,ts} : Use Shadcn UI and Tailwind for components and styling
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:40:13.649Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:13.649Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Use Shadcn UI and Tailwind for components and styling
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:40:13.649Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ui-components.mdc:0-0
Timestamp: 2025-11-25T14:40:13.649Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : For text inputs in forms, use the `Input` component with `type='email'`, `name`, `label`, `registerProps` from react-hook-form, and `error` props
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:36:51.389Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/form-handling.mdc:0-0
Timestamp: 2025-11-25T14:36:51.389Z
Learning: Applies to **/*Form.{ts,tsx} : Validate form inputs before submission using React Hook Form and Zod resolver
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-12-21T12:21:37.794Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: apps/web/CLAUDE.md:0-0
Timestamp: 2025-12-21T12:21:37.794Z
Learning: Applies to apps/web/**/*.{tsx,jsx} : Use React Hook Form with Zod validation for form handling
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:36:51.389Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/form-handling.mdc:0-0
Timestamp: 2025-11-25T14:36:51.389Z
Learning: Applies to **/*Form.{ts,tsx} : Use React Hook Form with Zod for form validation
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:36:53.147Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/form-handling.mdc:0-0
Timestamp: 2025-11-25T14:36:53.147Z
Learning: Applies to **/*Form.{ts,tsx} : Use React Hook Form with Zod for validation in form components
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:38:56.992Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:56.992Z
Learning: Components with `onClick` handlers must be client components marked with the `use client` directive
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:37:09.306Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/fullstack-workflow.mdc:0-0
Timestamp: 2025-11-25T14:37:09.306Z
Learning: Applies to apps/web/components/**/*Form*.tsx : Use React Hook Form with Zod validation (`zodResolver`) for form handling, with form components using `register`, `handleSubmit`, and error handling from the hook
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
📚 Learning: 2025-11-25T14:38:18.874Z
Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/page-structure.mdc:0-0
Timestamp: 2025-11-25T14:38:18.874Z
Learning: Applies to apps/web/app/(app)/**/*.tsx : If you need to use `onClick` in a component, that component must be a client component and file must start with `use client` directive
Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: cubic · AI code reviewer
- GitHub Check: Baz Reviewer
- GitHub Check: test
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
apps/web/components/editor/Tiptap.tsx (2)
23-23: LGTM: Clean prop addition with backward compatibility.The new
preservePastedLineBreaksprop is well-named and defaults tofalse, ensuring existing behavior is preserved.Also applies to: 32-32
50-59: No issues found. All configuration options (transformPastedText,transformCopiedText,breaks,linkify,bulletListMarker) are supported by tiptap-markdown v0.8.10 and correctly configured.apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx (2)
3-4: LGTM: Proper imports and ref setup.The additions of
useRef,Controller, andTiptapimports along with theeditorRefare correctly implemented for the new rich text editor integration.Also applies to: 27-27, 65-65
115-129: Good UX: Scrollable container and rich text styling.The Tiptap editor integration includes good UX choices:
- Scrollable container prevents dialog overflow
- Prose classes provide appropriate rich text styling
preservePastedLineBreaksis correctly enabledautofocus={false}prevents unwanted focus in dialog
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
Show resolved
Hide resolved
![baz-reviewer[bot]](https://avatars.githubusercontent.com/in/933528?s=60&v=4){kind=small}
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
Show resolved
Hide resolved
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 2 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx">
<violation number="1" location="apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx:125">
P1: The `Controller` is not passing `field.onChange` to the `Tiptap` component, so react-hook-form won't track edits. This means form validation will never run on the current content, and `errors.writingStyle` will always be based on the initial value rather than what the user typed.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| initialContent={field.value ?? ""} | ||
| className="prose prose-sm dark:prose-invert max-w-none" | ||
| autofocus={false} | ||
| preservePastedLineBreaks |
There was a problem hiding this comment.
P1: The Controller is not passing field.onChange to the Tiptap component, so react-hook-form won't track edits. This means form validation will never run on the current content, and errors.writingStyle will always be based on the initial value rather than what the user typed.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx, line 125:
<comment>The `Controller` is not passing `field.onChange` to the `Tiptap` component, so react-hook-form won't track edits. This means form validation will never run on the current content, and `errors.writingStyle` will always be based on the initial value rather than what the user typed.</comment>
<file context>
@@ -105,24 +111,28 @@ function WritingStyleDialog({
+ initialContent={field.value ?? ""}
+ className="prose prose-sm dark:prose-invert max-w-none"
+ autofocus={false}
+ preservePastedLineBreaks
+ />
+ </div>
</file context>
| preservePastedLineBreaks | |
| onChange={field.onChange} | |
| preservePastedLineBreaks |
✅ Addressed in 1ae47e4
There was a problem hiding this comment.
Commit 1ae47e4 addressed this comment by adding the missing onChange={field.onChange} prop to the Tiptap component (line 122). This allows react-hook-form to properly track edits and run validation on the current content. The onSubmit function was also simplified to use the form data directly instead of manually extracting content from the editor ref.
apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
Show resolved
Hide resolved
1 participant
User description
Switches the writing style input from a plain textarea to a Tiptap rich text editor to allow better visual formatting. Also adds a prop to Tiptap to optionally preserve line breaks on paste to prevent paragraphs from collapsing.
Generated description
Below is a concise technical summary of the changes proposed in this PR:
graph LR WritingStyleDialog_("WritingStyleDialog"):::modified Tiptap_("Tiptap"):::modified onSubmit_("onSubmit"):::added SAVE_WRITING_STYLE_ACTION_("SAVE_WRITING_STYLE_ACTION"):::modified TIPTAP_("TIPTAP"):::modified MARKDOWN_("MARKDOWN"):::modified WritingStyleDialog_ -- "Now provides markdown output, placeholder, and preserved pasted breaks." --> Tiptap_ Tiptap_ -- "Emits markdown or HTML via onChange depending on output prop." --> WritingStyleDialog_ WritingStyleDialog_ -- "Adds onSubmit to call execute with form data." --> onSubmit_ onSubmit_ -- "Sends markdown writingStyle payload to save action." --> SAVE_WRITING_STYLE_ACTION_ Tiptap_ -- "Adds placeholder extension and configurable markdown/html output." --> TIPTAP_ Tiptap_ -- "Conditionally configures Markdown to transform pasted text and output." --> MARKDOWN_ classDef added stroke:#15AA7A classDef removed stroke:#CD5270 classDef modified stroke:#EDAC4C linkStyle default stroke:#CBD5E1,font-size:13pxIntegrate the
Tiptaprich text editor component into theWritingStyleSettingto replace the previous plain text input. Enhance theTiptapcomponent to preserve line breaks when pasting content and to output markdown.Tiptaprich text editor into theWritingStyleSettingcomponent, replacing the standardInputfield. This involves usingreact-hook-form'sControllerto manage the editor's state and outputting content as markdown.Modified files (2)
Latest Contributors(1)
preservePastedLineBreaksprop to theTiptapcomponent, configuring theMarkdownextension to handle line breaks and list markers correctly when enabled. This ensures that pasted content retains its original formatting.Modified files (2)
Latest Contributors(1)