[wip] Design description editor 2 #50
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR overhauls the text editor by centralizing its state in a context, adding Markdown serialization, enriching the toolbar with new controls, and wiring it into the design forms with updated schema support.
- Introduce
DescriptionProviderand context for editor state and Markdown/HTML toggling - Add
CustomMarkdownSerializer, table‐insertion extensions, and new toolbar components - Update design create/update forms to consume the context and refine
tagsschema
Reviewed Changes
Copilot reviewed 19 out of 20 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/globals.css | Rename editor comment and add ProseMirror table/blockquote styles |
| src/app/features/design-description-editor/extensions/md-serializer.tsx | Add custom Markdown serializer for editor content |
| src/app/features/design-description-editor/extensions/custom-tab-table.tsx | Implement Tab‐key behavior to exit tables |
| src/app/features/design-description-editor/context/description-context.tsx | Create DescriptionProvider for editor state |
| src/app/features/design-description-editor/components/toolbar.tsx | Refactor toolbar to use context and add new controls |
| src/app/features/design-description-editor/components/table-control.tsx | Provide dropdown for table operations |
| src/app/features/design-description-editor/components/link-control.tsx | Refactor link control to use context |
| src/app/features/design-description-editor/components/header-control.tsx | Refactor header control to use context |
| src/app/features/design-description-editor/components/editor.tsx | Wire editor content into React Hook Form with context |
| src/app/features/design-description-editor/components/dropdown-toolbar.tsx | Add secondary controls dropdown |
| src/app/features/design-description-editor/components/control-button.tsx | Change to default export and adjust styling |
| src/app/features/design-description-editor/components/content-control.tsx | Add Markdown/HTML toggle control |
| src/app/design/[designID]/page.tsx | Integrate context into update form and refine schema usage |
| src/app/components/design/types.ts | Change tags from string to structured array in Zod schema |
| src/app/components/design/design-form.tsx | Integrate enhanced editor into create form |
| package.json | Add new Tiptap and ProseMirror Markdown dependencies |
| electron/main.ts | Remove unused session import |
| import { LinkIcon } from "lucide-react"; | ||
| import { ControlButton } from "./control-button"; | ||
| import ControlButton from "@/src/app/features/design-description-editor/components/control-button"; | ||
| import log from "electron-log/renderer"; |
There was a problem hiding this comment.
The log import from electron-log/renderer is unused in this component and may cause bundling issues in a Next.js environment; please remove it.
Suggested change
| import log from "electron-log/renderer"; |
| @@ -0,0 +1,31 @@ | |||
| import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/src/app/components/ui/dropdown-menu" | |||
| import { Button } from '../../../components/ui/button' | |||
There was a problem hiding this comment.
This relative import path is inconsistent with other UI imports and may not resolve correctly; consider changing to an absolute import like @/src/app/components/ui/button.
Suggested change
| import { Button } from '../../../components/ui/button' | |
| import { Button } from '@/src/app/components/ui/button' |
| {errors.tags && <p className="text-red-500 text-sm">Tags are required</p>} | ||
| </div> | ||
| <div> | ||
| <label className="block text-sm font-medium mb-1">Tags</label> |
There was a problem hiding this comment.
The Tags field appears twice in the edit form—once at this location and again just below. Please remove the redundant block to avoid duplicate inputs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant updates to the design description editor, enhances form handling with
react-hook-formandzod, and refactors the text editor implementation. Additionally, it includes dependency updates and file restructuring for improved modularity and maintainability.Design Description Editor Updates:
TextEditorimplementation with a new modular design description editor, introducingDescriptionProviderfor centralized state management.ContentControlfor toggling between Markdown and HTML modes, andDropdownToolbarfor secondary toolbar functionality.Form Handling Enhancements:
react-hook-formwithzodResolverfor schema validation inDesignFormandDesignDetailsPage. This replaces manual state management for form fields likedescriptionandtags.tagsfield indesignUpdateSchemato use an array of objects for better structure and validation.Refactoring and File Restructuring:
TextEditorand related components (header-control.tsx,control-button.tsx) and relocated/refactored them underfeatures/design-description-editor.Dependency Updates:
blockquote,table,table-cell, etc.) andprosemirror-markdownfor enhanced text editing capabilities.Code Cleanup:
descriptionstate and related logic inDesignFormandDesignDetailsPage.