Feature/tiptap by akshad-exe · Pull Request #14 · Luxion-Labs/PulmNotes

akshad-exe · 2026-02-08T02:46:52Z

Migrate to TipTap Rich Text Editor

Overview

This PR implements a comprehensive migration from the custom text editor to TipTap v3.19.0, a modern, collaborative rich-text editor framework. This migration resolves existing editor issues including cursor positioning bugs, broken @mentions, and unreliable slash commands while significantly reducing code complexity.

What Changed

Rich Text Formatting

Bold, italic, underline, strikethrough
Headings (H1, H2, H3), lists, code blocks, blockquotes
Tables with editing capabilities
Text alignment and typography transformations

Interactive Elements

Slash Commands: Quick content insertion with / commands (e.g., /h1, /table, /todo)
Mentions: Dynamic note linking with @ syntax and filtering
Todo Items: Interactive checkboxes with state persistence
Asset Nodes: Custom handling for images, videos, and audio with drag-and-drop support

Technical Improvements

Custom NodeViews: Interactive rendering for assets and todos
Bidirectional Converters: Seamless conversion between PulmNotes Block format and TipTap JSONContent
Auto-save: 300ms debounced saving to localStorage
Error Boundaries: Safe rendering with fallback handling

Why This Change

This migration addresses critical issues identified in the current custom editor:

Cursor positioning bugs: Eliminated manual cursor management that caused regressions
Broken @mentions: Restored full mention functionality with autocomplete
Unreliable slash commands: Implemented robust command system
Code complexity: Achieved ~60% code reduction (from ~2000 lines to ~800 lines)
Maintenance burden: Replaced 646-line Editor.tsx with modular, maintainable components

Implementation Details

Core Components

TipTapNoteEditor: Main editor component with 10+ extensions
Converters: convertBlocksToTipTap and convertTipTapToBlocks for data fidelity
Extensions: Custom nodes for assets, todos, mentions, and slash commands

Testing

E2E Tests: 20+ Playwright test cases covering slash commands, mentions, todos, rich formatting, and data persistence
Unit Tests: Comprehensive converter validation with edge cases
Coverage: Slash commands, mentions, todos, rich formatting, and persistence

Files Changed

New editor structure under editor/ directory
Updated NoteView.tsx for drag-and-drop integration
Enhanced type definitions in app/types.ts and editor/schema/types.ts
Comprehensive documentation in docs/

Migration Status

✅ Complete - All planned features implemented and tested

Breaking Changes

Editor component replaced (old Editor.tsx removed)
Block type system extended with new asset and media types
Data persistence format updated (backward compatible via converters)

Testing Instructions

Run E2E tests: npx playwright test e2e/editor.spec.ts
Run unit tests: bun test editor/lib/__tests__/converters.test.ts
Manual testing: Create notes with rich content, mentions, and assets

Checklist

Commit History

The following commits were made on the feature/tiptap branch since it diverged from main (merge-base: 397f57e61c31969a21664175ea7135c8c94873e5):

eb1c184 feat: Add EnhancedNoteEditor documentation and migration summary
d2d70d7 chore: add Vitest and playwright configuration for testing environment and module resolution
b1a29a6 feat: add E2E tests for TipTap Editor integration covering slash commands, mentions, todos, rich formatting, and data persistence
4affbfa feat: remove legacy exports and update active exports for TipTap integration
2f701f6 feat: implement TipTapNoteEditor with custom extensions and rich text features
44d3a0f feat: integrate TipTap editor and enhance asset handling in NoteView
9d64cfb feat: enhance MentionMenu and SlashMenu with improved styling and item grouping
7a4a5db feat: implement TodoNode with interactive checkbox functionality
570b6dc feat: add AssetNode for rendering and managing media assets in the editor
7782657 feat: add Table extension with insert, add row, and add column functionalities
c23f239 feat: implement Image extension with upload and insertion capabilities
d11a11d feat: add MentionSuggestion extension for dynamic note mentions in editor
41e85c0 feat: implement SlashSuggestion extension for enhanced command input functionality
688859d feat: add table node components and styles for enhanced table editing functionality
084f229 feat: update image placeholder to SVG and add mention styles in SimpleEditor
f329076 feat: extend BlockType and MenuItem interfaces to include additional types and properties
6cfc66e feat: add comprehensive round-trip conversion tests for Block ↔ TipTap
afeb199 feat: add TipTapTestPage for testing Block ↔ TipTap JSON converters
4a16230 feat: implement converters for TipTap JSONContent and PulmNotes Block formats
a3ad5da feat: add SimpleEditor component to the editor page
b015f17 feat: update tsconfig paths and include additional type definitions for improved module resolution
0990208 feat: implement global styles and layout updates for Tiptap editor integration
2064d10 feat: add keyframe animations and CSS variable definitions for styling enhancements
624bd48 feat: add various custom hooks for Tiptap editor including useComposedRef, useCursorVisibility, useElementRect, useIsBreakpoint, useMenuNavigation, useScrolling, useThrottledCallback, useTiptapEditor, useUnmount, and useWindowSize
5403b31 feat: add Tiptap UI primitives including Button, Card, Dropdown Menu, Input, Popover, Separator, Spacer, and Toolbar components
5482fa8 feat: add Simple Editor with customizable theme toggle and content structure
d6a8b9d feat: add image upload node with drag-and-drop support and file previews
a29fc5e feat: add list dropdown menu component and related hooks for Tiptap editor
be8fa05 Add new icon components for text formatting and actions
b792f28 feat: implement node background extension for TipTap editor
0543270 chore: update dependencies and added taptao new packages for enhanced functionality

Related Issues

Closes #13: Editor Migration: Migrate from Custom Editor to TipTap Editor
Fixes #1: Editor regression: cursor jumps to start, @mentions broken, slash commands stopped working
Related to #8: Editor Enhancement: Aesthetic Design, Advanced Features & Bug Fixes

Pull request overview

This PR continues the migration to TipTap by introducing new editor UI primitives, extensions (tables, assets, todos, image upload), hook utilities, and updating app-level integration (globals + NoteView/editor route).

Changes:

Added TipTap editor exports + converter re-exports, expanded block/schema types for new node kinds (asset/mention/emoji).
Introduced substantial TipTap UI component library (buttons, dropdowns, popovers, toolbar) and styling (variables + keyframe animations).
Updated app integration to use TipTapNoteEditor, added /editor template route, and moved globals to SCSS.

Reviewed changes

Copilot reviewed 183 out of 192 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
editor/ui/MentionMenu.tsx	Adds `noTransform` option to control mention menu positioning.
editor/styles/_keyframe-animations.scss	Adds shared keyframe animations used by popovers/menus.
editor/schema/types.ts	Extends editor schema types (block types, menu grouping, media assetId).
editor/lib/converters.ts	Adds a simple barrel export for block↔TipTap converters.
editor/index.ts	Switches exports to TipTap editor/components and converter utilities.
editor/hooks/use-window-size.ts	Adds Visual Viewport-based size tracking hook.
editor/hooks/use-unmount.ts	Adds unmount cleanup hook used by other hooks.
editor/hooks/use-tiptap-editor.ts	Adds a wrapper hook to access provided or context editor.
editor/hooks/use-throttled-callback.ts	Adds throttled callback hook with unmount cancellation.
editor/hooks/use-scrolling.ts	Adds scrolling-state hook for UI behaviors.
editor/hooks/use-is-breakpoint.ts	Adds breakpoint media-query hook.
editor/hooks/use-element-rect.ts	Adds element rect tracking hook (ResizeObserver + scroll/resize).
editor/hooks/use-cursor-visibility.ts	Adds cursor-visibility auto-scroll logic for mobile/toolbars.
editor/hooks/use-composed-ref.ts	Adds composed ref utility for forwarding/combining refs.
editor/extensions/todo-node.tsx	Adds custom todo node + insert helper.
editor/extensions/todo-node-view.tsx	Adds React NodeView for interactive todo checkbox rendering.
editor/extensions/table-extension.tsx	Adds table extension bundle + insert/row/col helpers.
editor/extensions/image-extension.tsx	Adds image extension config + helpers for upload/insert.
editor/extensions/asset-node.tsx	Adds custom asset node for images/videos/audio.
editor/extensions/asset-node-view.tsx	Adds React NodeView renderer for asset nodes.
editor/components/tiptap-ui/undo-redo-button/undo-redo-button.tsx	Adds undo/redo toolbar button wrapper integrating editor context.
editor/components/tiptap-ui/undo-redo-button/index.tsx	Re-exports undo/redo UI + hook.
editor/components/tiptap-ui/text-align-button/text-align-button.tsx	Adds text-align toolbar button wrapper.
editor/components/tiptap-ui/text-align-button/index.tsx	Re-exports text-align UI + hook.
editor/components/tiptap-ui/mark-button/mark-button.tsx	Adds mark toggle button wrapper (bold/italic/etc.).
editor/components/tiptap-ui/mark-button/index.tsx	Re-exports mark button UI + hook.
editor/components/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx	Adds list dropdown menu wrapper (bullet/ordered/task).
editor/components/tiptap-ui/list-dropdown-menu/index.tsx	Re-exports list dropdown menu.
editor/components/tiptap-ui/list-button/list-button.tsx	Adds list toggle button wrapper.
editor/components/tiptap-ui/list-button/index.tsx	Re-exports list button UI + hook.
editor/components/tiptap-ui/link-popover/index.tsx	Re-exports link popover UI + hook.
editor/components/tiptap-ui/image-upload-button/index.tsx	Re-exports image upload button UI + hook.
editor/components/tiptap-ui/image-upload-button/image-upload-button.tsx	Adds image upload toolbar button wrapper.
editor/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.ts	Adds hook for heading dropdown menu state.
editor/components/tiptap-ui/heading-dropdown-menu/index.tsx	Re-exports heading dropdown menu UI + hook.
editor/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx	Adds heading dropdown menu component wrapper.
editor/components/tiptap-ui/heading-button/index.tsx	Re-exports heading button UI + hook.
editor/components/tiptap-ui/heading-button/heading-button.tsx	Adds heading toggle button wrapper.
editor/components/tiptap-ui/color-highlight-popover/index.tsx	Re-exports color highlight popover.
editor/components/tiptap-ui/color-highlight-button/index.tsx	Re-exports color highlight button UI + hook.
editor/components/tiptap-ui/color-highlight-button/color-highlight-button.scss	Adds highlight button styling.
editor/components/tiptap-ui/code-block-button/index.tsx	Re-exports code block button UI + hook.
editor/components/tiptap-ui/code-block-button/code-block-button.tsx	Adds code block button wrapper.
editor/components/tiptap-ui/blockquote-button/index.tsx	Re-exports blockquote button UI + hook.
editor/components/tiptap-ui/blockquote-button/blockquote-button.tsx	Adds blockquote button wrapper.
editor/components/tiptap-ui-primitive/tooltip/tooltip.scss	Adds tooltip styling.
editor/components/tiptap-ui-primitive/tooltip/index.tsx	Re-exports tooltip primitive.
editor/components/tiptap-ui-primitive/toolbar/toolbar.tsx	Adds toolbar primitives + keyboard navigation support.
editor/components/tiptap-ui-primitive/toolbar/toolbar.scss	Adds toolbar layout + mobile variants.
editor/components/tiptap-ui-primitive/toolbar/index.tsx	Re-exports toolbar primitives.
editor/components/tiptap-ui-primitive/spacer/spacer.tsx	Adds spacer primitive.
editor/components/tiptap-ui-primitive/spacer/index.tsx	Re-exports spacer primitive.
editor/components/tiptap-ui-primitive/separator/separator.tsx	Adds separator primitive with ARIA semantics.
editor/components/tiptap-ui-primitive/separator/separator.scss	Adds separator styling.
editor/components/tiptap-ui-primitive/separator/index.tsx	Re-exports separator primitive.
editor/components/tiptap-ui-primitive/popover/popover.tsx	Adds popover wrapper for Radix popover.
editor/components/tiptap-ui-primitive/popover/popover.scss	Adds popover styling/animations.
editor/components/tiptap-ui-primitive/popover/index.tsx	Re-exports popover primitives.
editor/components/tiptap-ui-primitive/input/input.tsx	Adds input primitives.
editor/components/tiptap-ui-primitive/input/input.scss	Adds input styling.
editor/components/tiptap-ui-primitive/input/index.tsx	Re-exports input primitives.
editor/components/tiptap-ui-primitive/dropdown-menu/index.tsx	Re-exports dropdown menu primitive.
editor/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx	Adds dropdown menu wrappers for Radix dropdown menu.
editor/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss	Adds dropdown menu styling/animations.
editor/components/tiptap-ui-primitive/card/index.tsx	Re-exports card primitive.
editor/components/tiptap-ui-primitive/card/card.tsx	Adds card primitives.
editor/components/tiptap-ui-primitive/card/card.scss	Adds card styling.
editor/components/tiptap-ui-primitive/button/index.tsx	Re-exports button primitive.
editor/components/tiptap-ui-primitive/button/button.tsx	Adds button primitive with tooltip integration.
editor/components/tiptap-ui-primitive/button/button-group.scss	Adds button group layout styling.
editor/components/tiptap-ui-primitive/badge/index.tsx	Re-exports badge primitive.
editor/components/tiptap-ui-primitive/badge/badge.tsx	Adds badge primitive.
editor/components/tiptap-ui-primitive/badge/badge.scss	Adds badge styling.
editor/components/tiptap-ui-primitive/badge/badge-group.scss	Adds badge group styling.
editor/components/tiptap-templates/simple/theme-toggle.tsx	Adds dark-mode toggle for simple editor template.
editor/components/tiptap-templates/simple/simple-editor.scss	Adds template styling + mention menu styles.
editor/components/tiptap-node/table-node/table-trigger-button.scss	Adds TableTriggerButton styling.
editor/components/tiptap-node/table-node/table-selection-overlay.scss	Adds table selection overlay styling.
editor/components/tiptap-node/table-node/table-node.scss	Adds table node styling and resize handle visuals.
editor/components/tiptap-node/table-node/table-handle.scss	Adds table action handle styling.
editor/components/tiptap-node/table-node/table-extend-row-column-button.scss	Adds table extend buttons styling.
editor/components/tiptap-node/table-node/table-cell-handle-menu.scss	Adds table cell menu styling.
editor/components/tiptap-node/table-node/TableTriggerButton.tsx	Adds UI control for inserting tables by grid selection.
editor/components/tiptap-node/table-node/TableSelectionOverlay.tsx	Adds overlay highlighting active table selection.
editor/components/tiptap-node/table-node/TableHandle.tsx	Adds table control handle for row/column actions.
editor/components/tiptap-node/table-node/TableExtendRowColumnButtons.tsx	Adds buttons to append row/column.
editor/components/tiptap-node/table-node/TableCellHandleMenu.tsx	Adds table cell alignment/merge/split menu.
editor/components/tiptap-node/image-upload-node/index.tsx	Re-exports image upload node extension.
editor/components/tiptap-node/image-upload-node/image-upload-node-extension.ts	Adds image upload atom node extension + command + keyboard shortcut.
editor/components/tiptap-node/image-node/image-node.scss	Adds image node styling including selected state.
editor/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss	Adds horizontal rule styling.
editor/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts	Adds custom HR node rendering wrapper.
editor/components/tiptap-node/heading-node/heading-node.scss	Adds heading styling.
editor/components/tiptap-node/code-block-node/code-block-node.scss	Adds inline code + code block styling.
editor/components/tiptap-node/blockquote-node/blockquote-node.scss	Adds blockquote styling.
editor/components/tiptap-icons/undo2-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/underline-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/trash-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/superscript-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/sun-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/subscript-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/strike-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/redo2-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/moon-star-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/list-todo-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/list-ordered-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/list-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/link-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/italic-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/image-plus-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/highlighter-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-two-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-three-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-six-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-one-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-four-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/heading-five-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/external-link-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/corner-down-left-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/code2-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/code-block-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/close-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/chevron-down-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/bold-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/blockquote-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/ban-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/arrow-left-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/align-right-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/align-left-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/align-justify-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-icons/align-center-icon.tsx	Adds icon used by toolbar/buttons.
editor/components/tiptap-extension/node-background-extension.ts	Adds extension for per-node background color attribute + commands.
docs/TIPTAP_MIGRATION_PLAN.md	Updates migration plan with a pilot route note.
app/types.ts	Extends app-level block types for TipTap nodes and assets.
app/layout.tsx	Switches to SCSS globals import and adds `scrollbar-none` body class.
app/globals.scss	New SCSS globals importing editor variables + keyframes and scrollbar utilities.
app/globals.css	Updates CSS globals file with SCSS imports (potentially conflicting).
app/editor/page.tsx	Adds editor demo route rendering `SimpleEditor`.
app/components/NoteView.tsx	Integrates `TipTapNoteEditor` and updated asset drag/drop block handling.
app/components/NoteTabs.tsx	Adjusts tab container overflow behavior.

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

Copilot · 2026-02-08T02:51:15Z

+  useEffect(() => {
+    const ensureCursorVisibility = () => {
+      if (!editor) return
+
+      const { state, view } = editor
+      if (!view.hasFocus()) return
+
+      // Get current cursor position coordinates
+      const { from } = state.selection
+      const cursorCoords = view.coordsAtPos(from)
+
+      if (windowHeight < rect.height && cursorCoords) {
+        const availableSpace = windowHeight - cursorCoords.top
+
+        // If the cursor is hidden behind the overlay or offscreen, scroll it into view
+        if (availableSpace < overlayHeight) {
+          const targetCursorY = Math.max(windowHeight / 2, overlayHeight)
+          const currentScrollY = window.scrollY
+          const cursorAbsoluteY = cursorCoords.top + currentScrollY
+          const newScrollY = cursorAbsoluteY - targetCursorY
+
+          window.scrollTo({
+            top: Math.max(0, newScrollY),
+            behavior: "smooth",
+          })
+        }
+      }
+    }
+
+    ensureCursorVisibility()
+  }, [editor, overlayHeight, windowHeight, rect.height])


This effect only runs on mount/dependency changes, so it won’t keep the caret visible while typing/selection changes (despite the hook’s intent and docs). Consider subscribing to editor events (e.g., transaction and/or selectionUpdate) and calling ensureCursorVisibility there, with proper cleanup in the effect return.

Copilot · 2026-02-08T02:51:15Z

+import { mergeAttributes, Node } from "@tiptap/react"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { ImageUploadNode as ImageUploadNodeComponent } from "@/components/tiptap-node/image-upload-node/image-upload-node"
+import type { NodeType } from "@tiptap/pm/model"


Node, mergeAttributes, and command module augmentation should typically come from @tiptap/core, not @tiptap/react. Importing these from @tiptap/react (and augmenting @tiptap/react) is likely to break builds or at least prevent the command types from being picked up. Switch imports and declare module target to @tiptap/core.

Copilot · 2026-02-08T02:51:16Z

+declare module "@tiptap/react" {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      setImageUploadNode: (options?: ImageUploadNodeOptions) => ReturnType
+    }
+  }
+}


Node, mergeAttributes, and command module augmentation should typically come from @tiptap/core, not @tiptap/react. Importing these from @tiptap/react (and augmenting @tiptap/react) is likely to break builds or at least prevent the command types from being picked up. Switch imports and declare module target to @tiptap/core.

Copilot · 2026-02-08T02:51:17Z

+    const style = noTransform
+      ? { top: position.y, left: position.x, transform: 'none' }
+      : { top: position.y, left: position.x, transform: 'translateY(-100%) translateY(-10px)' }


The same style object is computed twice (empty vs non-empty branches). Compute it once before the if (filteredNotes.length === 0) check to avoid duplication and keep positioning logic consistent.

Copilot · 2026-02-08T02:51:17Z

+  const style = noTransform
+    ? { top: position.y, left: position.x, transform: 'none' }
+    : { top: position.y, left: position.x, transform: 'translateY(-100%) translateY(-10px)' }


The same style object is computed twice (empty vs non-empty branches). Compute it once before the if (filteredNotes.length === 0) check to avoid duplication and keep positioning logic consistent.

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2026-02-08T02:51:18Z

+  > img:not([data-type="emoji"] img) {
+    margin: 2rem 0;
+    outline: 0.125rem solid transparent;
+    border-radius: var(--tt-radius-xs, 0.25rem);
+  }
+
+  img:not([data-type="emoji"] img).ProseMirror-selectednode {


The selector :not([data-type="emoji"] img) is unlikely to match what’s intended (it mixes an attribute selector with a descendant selector inside :not()), and may not exclude emoji images correctly. Consider rewriting this based on the actual emoji node DOM shape (e.g., exclude img[data-type="emoji"] if the attribute is on the img, or scope emoji images under a wrapper and exclude via a parent selector).

Suggested change

> img:not([data-type="emoji"] img) {

margin: 2rem 0;

outline: 0.125rem solid transparent;

border-radius: var(--tt-radius-xs, 0.25rem);

}

img:not([data-type="emoji"] img).ProseMirror-selectednode {

> img:not([data-type="emoji"]) {

margin: 2rem 0;

outline: 0.125rem solid transparent;

border-radius: var(--tt-radius-xs, 0.25rem);

}

img:not([data-type="emoji"]).ProseMirror-selectednode {

Co-authored-by: Copilot <[email protected]>

Copilot · 2026-02-08T03:11:17Z

@akshad-exe I've opened a new pull request, #15, to work on those changes. Once the pull request is ready, I'll request review from you.

…chronization Co-authored-by: akshad-exe <[email protected]>

Fix TodoNodeView state desync from editor transactions

Copilot · 2026-02-08T03:21:10Z

@akshad-exe I've opened a new pull request, #16, to work on those changes. Once the pull request is ready, I'll request review from you.

…cation Co-authored-by: akshad-exe <[email protected]>

Eliminate duplicate style computation in MentionMenu

akshad-exe added 30 commits February 7, 2026 15:00

feat: implement node background extension for TipTap editor

b792f28

feat: add Simple Editor with customizable theme toggle and content st…

5482fa8

…ructure

feat: add various custom hooks for Tiptap editor including useCompose…

624bd48

…dRef, useCursorVisibility, useElementRect, useIsBreakpoint, useMenuNavigation, useScrolling, useThrottledCallback, useTiptapEditor, useUnmount, and useWindowSize

feat: add keyframe animations and CSS variable definitions for stylin…

2064d10

…g enhancements

feat: implement global styles and layout updates for Tiptap editor in…

0990208

…tegration

feat: update tsconfig paths and include additional type definitions f…

b015f17

…or improved module resolution

feat: add SimpleEditor component to the editor page

a3ad5da

feat: implement converters for TipTap JSONContent and PulmNotes Block…

4a16230

… formats

feat: add TipTapTestPage for testing Block ↔ TipTap JSON converters

afeb199

feat: add comprehensive round-trip conversion tests for Block ↔ TipTap

6cfc66e

feat: extend BlockType and MenuItem interfaces to include additional …

f329076

…types and properties

feat: update image placeholder to SVG and add mention styles in Simpl…

084f229

…eEditor

feat: add table node components and styles for enhanced table editing…

688859d

… functionality

feat: implement SlashSuggestion extension for enhanced command input …

41e85c0

…functionality

feat: add MentionSuggestion extension for dynamic note mentions in ed…

d11a11d

…itor

feat: implement Image extension with upload and insertion capabilities

c23f239

feat: add Table extension with insert, add row, and add column functi…

7782657

…onalities

feat: add AssetNode for rendering and managing media assets in the ed…

570b6dc

…itor

feat: implement TodoNode with interactive checkbox functionality

7a4a5db

feat: enhance MentionMenu and SlashMenu with improved styling and ite…

9d64cfb

…m grouping

feat: integrate TipTap editor and enhance asset handling in NoteView

44d3a0f

feat: implement TipTapNoteEditor with custom extensions and rich text…

2f701f6

… features

feat: remove legacy exports and update active exports for TipTap inte…

4affbfa

…gration

feat: add E2E tests for TipTap Editor integration covering slash comm…

b1a29a6

…ands, mentions, todos, rich formatting, and data persistence

chore: add Vitest and playwright configuration for testing environmen…

d2d70d7

…t and module resolutio: - updated gitignore file excluding testing files - updated tsconfig to exclude e2e - updated package.json to include new depencendencies and add new scripts

Copilot AI review requested due to automatic review settings February 8, 2026 02:46

akshad-exe self-assigned this Feb 8, 2026

Copilot AI reviewed Feb 8, 2026

View reviewed changes

akshad-exe and others added 5 commits February 8, 2026 08:30

Apply suggestions from code review

0c0aa0a

Co-authored-by: Copilot <[email protected]>

Update editor/hooks/use-window-size.ts

180ccd3

Co-authored-by: Copilot <[email protected]>

Update editor/hooks/use-scrolling.ts

cbcdaac

Co-authored-by: Copilot <[email protected]>

Update editor/hooks/use-element-rect.ts

e5ab289

Co-authored-by: Copilot <[email protected]>

Initial plan

ab4c630

Copilot AI mentioned this pull request Feb 8, 2026

Fix TodoNodeView state desync from editor transactions #15

Merged

Copilot AI and others added 3 commits February 8, 2026 03:13

fix: derive TodoNodeView checked state from node.attrs for proper syn…

57bf733

…chronization Co-authored-by: akshad-exe <[email protected]>

Merge pull request #15 from dev-Ninjaa/copilot/sub-pr-14

8355a31

Fix TodoNodeView state desync from editor transactions

Initial plan

1948cef

Copilot AI mentioned this pull request Feb 8, 2026

Eliminate duplicate style computation in MentionMenu #16

Merged

Copilot AI and others added 2 commits February 8, 2026 03:22

refactor: compute style object once in MentionMenu to eliminate dupli…

89fe9d6

…cation Co-authored-by: akshad-exe <[email protected]>

Merge pull request #16 from dev-Ninjaa/copilot/sub-pr-14-again

0914542

Eliminate duplicate style computation in MentionMenu

akshad-exe merged commit 5a5977c into main Feb 8, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/tiptap#14

Feature/tiptap#14
akshad-exe merged 41 commits into
mainfrom
feature/tiptap

akshad-exe commented Feb 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 8, 2026

Uh oh!

Copilot AI Feb 8, 2026

Uh oh!

Copilot AI Feb 8, 2026

Uh oh!

Uh oh!

Copilot AI Feb 8, 2026

Uh oh!

Copilot AI Feb 8, 2026

Uh oh!

akshad-exe Feb 8, 2026

Uh oh!

Uh oh!

Copilot AI Feb 8, 2026

Uh oh!

Copilot AI commented Feb 8, 2026

Uh oh!

Copilot AI commented Feb 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

akshad-exe commented Feb 8, 2026

Migrate to TipTap Rich Text Editor

Overview

What Changed

Rich Text Formatting

Interactive Elements

Technical Improvements

Why This Change

Implementation Details

Core Components

Testing

Files Changed

Migration Status

Breaking Changes

Testing Instructions

Checklist

Commit History

Related Issues

Related Documentation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

akshad-exe Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Feb 8, 2026

Uh oh!

Copilot AI commented Feb 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants