feat(drag): replace block mode with drag-and-drop row management#149
Merged
feat(drag): replace block mode with drag-and-drop row management#149
Conversation
- Added support for drag mode where each token (mark or text) is treated as an individual draggable row. - Implemented new utilities for managing drag rows: `addDragRow`, `deleteDragRow`, `duplicateDragRow`, `mergeDragRows`, and `reorderDragRows`. - Enhanced existing block operations to accommodate drag mode, including conditional handling in the `KeyDownController` and `BlockContainer` components. - Updated `MarkedInput` and `BlockContainer` components to support drag mode via a new `drag` prop. - Introduced new utility functions for handling drag-specific behaviors, including separator management between rows. - Added stories to demonstrate drag functionality in the Storybook.
…wn blocks - Removed the Block stories for React and Vue as they are now integrated into the Drag stories. - Added new Drag stories for PlainText, Markdown, and ReadOnly modes, showcasing drag-and-drop capabilities. - Introduced block-level markdown options to support drag mode, ensuring proper handling of adjacent text and marks. - Created comprehensive tests for drag functionality, including row addition, deletion, and menu interactions. - Enhanced the MarkedInput component to support drag behavior, allowing for intuitive reordering of content.
- Updated `addDragRow` to ensure two empty rows are created when the value is empty and a double separator is used. - Modified `ContentEditableController` to account for drag mode, ensuring all children are set to `contentEditable` in block or drag modes. - Adjusted `KeyDownController` to insert a double separator in drag mode when the caret is at the start of a row, ensuring proper row creation. - Enhanced `selectAllText` to allow native Ctrl+A behavior in both block and drag modes, preventing selection across all blocks.
…ures - Removed deprecated block operations: `addBlock`, `deleteBlock`, `duplicateBlock`, and `mergeBlocks`. - Updated block-related exports to streamline functionality, focusing on drag operations. - Refactored `splitTokensIntoBlocks` to `splitTokensIntoDragRows` for improved handling of drag-and-drop features. - Deleted associated tests and configurations to clean up the codebase. - Enhanced `KeyDownController` and `ContentEditableController` to better support drag mode interactions.
- Removed unused story components and consolidated the Drag stories for React and Vue. - Updated the Markdown story to enhance clarity and maintain consistency across implementations. - Streamlined the code by eliminating redundant components and improving overall readability. - Ensured that the drag-and-drop functionality remains intact while simplifying the story structure.
- Replaced the previous COMPLEX_MARKDOWN with DRAG_MARKDOWN in both React and Vue Drag stories for consistency. - Updated markdown options to streamline the rendering of drag-and-drop functionality. - Enhanced the clarity of the Markdown story by providing a more relevant example for drag mode.
- Updated the condition in splitTokensIntoDragRows to check for trimmed content, ensuring that only non-empty tokens are processed. - Enhanced documentation in sampleTexts to clarify the use of loose-list format for drag mode, improving understanding of the drag-and-drop functionality.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…y modes - Introduced PlainTextDrag, MarkdownDrag, and ReadOnlyDrag stories to showcase drag-and-drop capabilities with different content types. - Updated the Markdown story to enhance clarity and maintain consistency with the new story structure. - Utilized markRaw for MarkdownMark in the MarkdownDrag story to improve performance and rendering. - Ensured all new stories are integrated with the existing drag-and-drop functionality.
Nowely
pushed a commit
that referenced
this pull request
Mar 15, 2026
🤖 I have created a release *beep* *boop* --- ## [0.6.0](0.5.0...0.6.0) (2026-03-15) ### Features * **blocks:** add block merging via Backspace/Delete and TodoList story ([#148](#148)) ([0685033](0685033)) * **blocks:** Notion-like block editor with keyboard navigation, block operations, and drag-and-drop ([#146](#146)) ([4bd5534](4bd5534)) * **drag:** replace block mode with drag-and-drop row management ([#149](#149)) ([83034e8](83034e8)) * **storybook:** add withPlainValue decorator and enhance drag/text stories ([#151](#151)) ([1d76c1f](1d76c1f)) ### Refactoring * **storybook:** standardize stories with PlainValuePanel and StoryObj types across React and Vue ([#152](#152)) ([42d21f3](42d21f3)) ### Miscellaneous * upgrade to Vite 8, Vitest 4.1, and Astro 6 ([#150](#150)) ([693966d](693966d)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Introduces a new drag-and-drop editing mode where each top-level token becomes an independently draggable row. Removes the previous
blockprop and all block-specific operations, replacing them with a unifieddragprop and new drag-focused core logic.Changes
dragOperations.tsandsplitTokensIntoDragRows.ts; removedblockOperations,reorderBlocks, andsplitTokensIntoBlocks+ their specsContentEditableController,KeyDownController, and selection logic for drag modeBlockstories/specs toDragin both React and Vue storybooksMarkedInput,BlockContainer(React & Vue) to usedragprop