refactor: RichTextEditor

[mrmagic2020]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
wrong-question-notebook	Ready	Preview, Comment	Feb 26, 2026 10:42am

[Copilot]

Pull request overview

Refactors the RichTextEditor into a modular components/editor package (toolbar, popovers, extensions, active-state hook) and removes unused TipTap dependencies while consolidating rich-text CSS.

Changes:

• Replace monolithic components/ui/rich-text-editor.tsx with a modular editor implementation under components/editor/*.
• Update consumers to import from @/components/editor and pass initialContent.
• Remove unused TipTap extensions (table/text-align/underline) and simplify rich-text styling in globals.css.

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
web/package.json	Drops unused TipTap extension dependencies.
web/package-lock.json	Lockfile updates reflecting removed TipTap packages.
web/components/ui/rich-text-editor.tsx	Removes old monolithic editor implementation.
web/components/problem-set-creation-dialog.tsx	Switches editor import and prop name to initialContent.
web/components/editor/use-editor-active-state.ts	Adds a hook to derive toolbar active state via useEditorState.
web/components/editor/toolbar/toolbar.tsx	New composed toolbar wrapper.
web/components/editor/toolbar/toolbar-button.tsx	New shared toolbar button component.
web/components/editor/toolbar/list-buttons.tsx	Extracted list/quote controls.
web/components/editor/toolbar/history-buttons.tsx	Extracted undo/redo controls.
web/components/editor/toolbar/heading-buttons.tsx	Extracted heading controls.
web/components/editor/toolbar/formatting-buttons.tsx	Extracted formatting controls.
web/components/editor/rich-text-editor.tsx	New editor component + imperative handle + resize + toolbar wiring.
web/components/editor/resize-handle.tsx	Extracted resize handle UI.
web/components/editor/popovers/math-popover.tsx	Extracted math editor popover with KaTeX preview.
web/components/editor/popovers/link-popover.tsx	Extracted link creation/editing popover.
web/components/editor/popovers/image-popover.tsx	Extracted image insertion popover + URL validation.
web/components/editor/index.ts	Adds barrel exports for editor package.
web/components/editor/editor.css	Moves editor-only styles out of globals.css.
web/components/editor/editor-skeleton.tsx	Adds loading skeleton while TipTap editor initializes.
web/components/editor/editor-extensions.ts	Centralizes TipTap extension configuration.
web/app/page.tsx	Formatting-only change.
web/app/globals.css	Consolidates rich-text wrapping + removes editor-only styles from globals.
web/app/(app)/subjects/[id]/problems/problem-form.tsx	Updates editor usage to new import + handle + reset/remount strategy.
web/app/(app)/problem-sets/problem-set-edit-dialog.tsx	Updates editor usage to new import + initialContent.

Files not reviewed (1)

• web/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

web/app/(app)/problem-sets/problem-set-edit-dialog.tsx:203

• formData.description is populated via useEffect when problemSet changes, but RichTextEditor only applies initialContent on first mount and does not update when the prop changes. As a result, the editor will render an empty description initially and never reflect the loaded problemSet.description.

To fix, either force-remount the editor when problemSet changes (e.g., key={problemSet?.id}), or use a ref to call the editor handle’s setContent inside the useEffect that sets formData (or make RichTextEditor controlled again).

            <RichTextEditor
              initialContent={formData.description}
              onChange={content =>
                setFormData(prev => ({ ...prev, description: content }))
              }
              placeholder="Enter problem set description..."
              height="300px"
              minHeight="200px"
              maxHeight="400px"
              maxLength={VALIDATION_CONSTANTS.STRING_LIMITS.TEXT_BODY_MAX}
              showCharacterCount={true}
            />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 23 out of 24 changed files in this pull request and generated 7 comments.

Files not reviewed (1)

• web/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.