Add SingleEditable experimental story #106
Merged
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
## Summary - Introduced a new Storybook story for the `MarkedInput` component showcasing a single contentEditable approach. - Implemented a `CustomContainer` component to handle content editing with native browser support. - Added utility functions for managing selection and converting HTML to plain text with markup. - Demonstrated both controlled and uncontrolled editing approaches, highlighting the benefits of using MutationObserver for a smoother editing experience. ## Key Changes 1. **Custom Components**: Created `CustomContainer`, `PlainTextSpan`, and `HTMLMark` for rendering editable content. 2. **Utility Functions**: Added functions for saving and restoring selection, and converting HTML to plain text. 3. **Story Examples**: Provided examples of controlled vs uncontrolled editing, emphasizing the advantages of the uncontrolled approach. ## Benefits - Enhanced user experience for editing content with a more natural cursor behavior. - Clear demonstration of the component's capabilities in Storybook.
## Summary - Introduced a new story for the `MarkedInput` component demonstrating a single contentEditable approach. - Implemented `CustomContainer`, `PlainTextSpan`, and `HTMLMark` components for enhanced editing capabilities. - Added utility functions for converting HTML to plain text with markup. - Showcased both controlled and uncontrolled editing methods, emphasizing the advantages of using MutationObserver for a smoother user experience. ## Key Changes 1. **Custom Components**: Created components to manage editable content effectively. 2. **Utility Functions**: Added functions for HTML conversion and text processing. 3. **Story Examples**: Provided examples illustrating the differences between controlled and uncontrolled editing approaches. ## Benefits - Improved user experience with natural cursor behavior during editing. - Clear demonstration of the component's functionality in Storybook.
…ntEditable stories ## Summary - Introduced `MarkedInputControlled` and `MarkedInputUncontrolled` components to demonstrate controlled and uncontrolled contentEditable behavior. - Enhanced the editing experience by addressing cursor position issues in controlled components and utilizing MutationObserver in uncontrolled components. - Updated story examples to utilize the new components, improving clarity on their usage and benefits. ## Key Changes 1. **New Components**: Added `MarkedInputControlled` for controlled editing and `MarkedInputUncontrolled` for uncontrolled editing. 2. **Story Updates**: Refactored story examples to use the new components, showcasing their functionality and differences. ## Benefits - Improved user experience with better cursor management during editing. - Clearer demonstration of controlled vs uncontrolled editing approaches in Storybook.
## Summary - Renamed `MarkedInputControlled` and `MarkedInputUncontrolled` components to `SingleEditableControlled` and `SingleEditableUncontrolled` for clarity and consistency. - Updated associated interfaces and story examples to reflect the new naming, enhancing the overall readability and understanding of the components. ## Key Changes 1. **Component Renaming**: Changed component names to better represent their functionality as single editable components. 2. **Interface Updates**: Adjusted interfaces to match the new component names. 3. **Story Adjustments**: Modified story examples to utilize the renamed components, ensuring consistency across the documentation. ## Benefits - Improved clarity in component naming, making it easier for developers to understand their purpose. - Enhanced documentation and story examples for better user experience in Storybook.
## Summary - Introduced `SingleEditableControlled` and `SingleEditableUncontrolled` components to manage contentEditable behavior effectively. - Implemented a `CustomContainer`, `PlainTextSpan`, and `HTMLMark` for enhanced editing capabilities. - Added utility functions for converting HTML to plain text with markup. ## Key Changes 1. **New Components**: Created `SingleEditableControlled` for controlled editing and `SingleEditableUncontrolled` for uncontrolled editing. 2. **Custom Components**: Developed supporting components to facilitate editing and rendering of content. 3. **Utility Functions**: Included functions for HTML conversion and text processing. ## Benefits - Improved user experience with better cursor management during editing. - Clear demonstration of controlled vs uncontrolled editing approaches in Storybook.
<message> - Introduced `SingleEditableMarkdown`, an uncontrolled markdown editor that supports various formatting options including bold, italic, code, links, headings, and blockquotes. - Implemented a `MarkdownContainer` for contentEditable functionality, ensuring smooth editing with a MutationObserver. - Added utility functions for converting HTML to markdown format and parsing markdown into structured tokens for rendering. ## Key Changes 1. **New Component**: Created `SingleEditableMarkdown` for markdown editing with real-time preview. 2. **Supporting Components**: Developed `MarkdownContainer`, `MarkdownText`, and `MarkdownMark` for rendering and editing markdown content. 3. **Utility Functions**: Included `htmlToMarkdown` and `parseMarkdown` for handling markdown conversion. ## Benefits - Enhanced user experience with native markdown editing capabilities. - Clear demonstration of markdown features in Storybook.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…r improved readability ## Summary - Cleaned up the formatting of the `handleInput` function in `SingleEditableControlled` for better readability. - Removed unnecessary line breaks in the `MarkdownContainer` component to streamline the code structure. - Simplified the return statement in the `htmlToMarkdown` utility function for clarity. ## Key Changes 1. **Code Formatting**: Enhanced the readability of the `handleInput` function by adjusting its structure. 2. **Component Cleanup**: Removed extraneous line breaks in `MarkdownContainer` to improve code flow. 3. **Utility Function Simplification**: Streamlined the return statement in `htmlToMarkdown` for better clarity. ## Benefits - Improved code maintainability and readability for future development. - Enhanced clarity in component functionality and utility operations.
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.
Introduces a comprehensive set of SingleEditable components for flexible content editing: