Feat/richeditor #8871
Merged
Feat/richeditor #8871
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
- Replaced the TextEditPopup with RichEditPopup for adding and editing notes, enhancing the editing experience with rich text capabilities. - Updated note previews to display HTML content appropriately, improving usability and visual representation. - Added a styled component for note previews to enhance user interaction.
- Added new command system for rich text editing, allowing users to execute commands like headings, lists, and formatting. - Integrated drag handle functionality for better content manipulation within the editor. - Updated toolbar to include additional formatting options such as strikethrough and code blocks. - Improved markdown and HTML content handling, enabling seamless conversion and previewing. - Introduced new utility functions for markdown conversion and sanitization. - Added tests for command list popover and rich editor functionalities to ensure reliability.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
- Introduced link and unlink commands in the RichEditor toolbar, enhancing text formatting capabilities. - Updated placeholder text for the RichEditor to provide clearer user guidance. - Refactored styles and removed unused code to streamline the RichEditor component. - Added internationalization support for new toolbar items and placeholder text in both English and Chinese.
- Introduced `he` for HTML entity decoding and `striptags` for stripping HTML tags in markdown conversion. - Updated `package.json` and `yarn.lock` to include new type definitions and library versions.
- Added ImageUploader component for embedding images with URL support and drag-and-drop functionality. - Introduced MathInputDialog for entering LaTeX formulas, allowing real-time updates and integration with the editor. - Enhanced RichEditor toolbar with new commands for image and math insertion. - Updated styles for better user experience and accessibility. - Added internationalization support for new features in multiple languages.
3 tasks
- Changed the export of CodeHeader to a local variable within CodeBlockView. - Removed unused export from code-block-shiki index file.
- Added support for disabling specific commands in the RichEditPopup. - Implemented dynamic command registration and management in the RichEditor, allowing for initial commands to be registered on mount. - Updated toolbar to dynamically generate items based on command groups, improving organization and accessibility. - Introduced new command definitions for text formatting, including bold, italic, underline, and strikethrough, with toolbar visibility options. - Enhanced command handling capabilities, including the ability to unregister commands and set their availability based on editor context.
… components - Eliminated translation handling logic, including the translate button and associated state management. - Cleaned up imports and unused variables to streamline the RichEditPopup component. - Simplified the content change handling by focusing solely on rich content management.
- Added custom image upload button with improved styling and theme support. - Refactored image display logic to use a more flexible layout. - Updated file acceptance criteria to restrict uploads to PNG and JPEG formats. - Simplified the upload process by preventing default behavior and customizing request handling. - Improved overall component structure and styling for better user experience.
DeJeune
requested review from
alephpiece,
EurFelux,
beyondkmp,
MyPrototypeWhat and
Pleasurecruise
…ty and enhance UI - Introduced throttling for the update function to improve performance and reduce unnecessary updates. - Added a save button to the UI for manual saving of changes, enhancing user experience. - Refactored the component to streamline the handling of emoji selection and markdown changes. - Updated layout with Flex component for better alignment of buttons in the settings interface.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as off-topic.
This comment was marked as off-topic.
- Updated the placeholder property to utilize the i18next translation function, enhancing support for multiple languages. - Improved user experience by providing localized placeholder text in the RichEditor component.
…aragraph tags during content insertion
… improve escaping logic
这个是库的bug，暂时没法解决 |
…ment boundaries and improve accuracy near the end of the document
后面v2做个开关吧 |
这个要等到上下文菜单的时候一起做 |
|
除了这两个问题，其他都修复了，麻烦在feat-note分支再测试一下 |
DeJeune
force-pushed
the
feat/richeditor
branch
from
6618520 to
0488ec8
Compare
* feat: add notes feature with sidebar integration Introduces a new Notes page and integrates it into the sidebar and routing. Updates sidebar icon types, default icons, and migration logic to support the new 'notes' icon. Adds initial types for notes and folders, and provides a basic NotesPage component. Also updates Chinese locale for notes. * feat: add notes feature with sidebar, editor, and storage Introduces a full notes management feature, including a sidebar for folders and notes, a markdown editor using Vditor, and persistent storage of the notes tree. Adds new components (NotesNavbar, NotesSidebar), a NotesService utility for CRUD operations, and updates settings and migration logic to support workspace visibility. Also updates Chinese i18n for notes, and refines the notes type definition. * feat: enhance notes functionality with auto-save and file name synchronization * feat: add export to Notes feature Introduced the ability to export messages and topics to the Notes workspace. Updated UI components, i18n strings, settings, migration logic, and export utilities to support the new export option. * fix: merge main branch error * fix: build check error * Update src/renderer/src/utils/export.ts Co-authored-by: Copilot <[email protected]> * Update src/renderer/src/utils/export.ts Co-authored-by: Copilot <[email protected]> * Update src/renderer/src/App.tsx Co-authored-by: Copilot <[email protected]> * Update src/renderer/src/pages/home/Tabs/TopicsTab.tsx Co-authored-by: Copilot <[email protected]> * Update src/renderer/src/pages/notes/NotesPage.tsx Co-authored-by: Copilot <[email protected]> * Revert "Update src/renderer/src/pages/notes/NotesPage.tsx" This reverts commit a1b9c5a. * Merge branch 'feat/richeditor' into feat-note * wip: read markdown * wip: markdown content save * fix: content save * feat: add context menu to notes sidebar and loading state Implemented a right-click context menu for notes in the sidebar, including options to rename, star, export to knowledge base, and delete notes. Added a loading spinner to NotesPage when loading note content. Updated i18n labels and Chinese translations for new features. * Enable exporting notes to knowledge base Added support for exporting individual notes to the knowledge base via a popup. Updated SaveToKnowledgePopup to handle notes, adjusted UI logic for note export, and added relevant i18n strings for export actions and feedback in all supported languages. NotesSidebar now provides an export option in the note context menu. * Add favorite notes feature to notes sidebar Introduces the ability to mark notes as favorites and view only starred notes in the sidebar. Updates i18n translations for related labels in all supported languages. Implements UI controls for toggling favorite status and switching between all notes and starred notes view. * Refactor notes export and update UI labels Moved NotesService to a shared services directory and updated all imports. Replaced the notes export menu option with a direct 'Save to Notes' action in message and topic menus. Updated i18n labels for 'Save to Notes' in multiple languages and removed the notes export toggle from settings. Cleaned up related migration logic and improved code organization. * Add drag-and-drop Markdown note upload Implemented drag-and-drop file upload in NotesSidebar, allowing users to upload Markdown (.md) files directly to notes. Added internationalized messages for upload success, failure, and file type restrictions. Updated NotesService with uploadNote method to handle file storage and tree updates. * fix: editor init * Implement drag-and-drop sorting for notes tree Replaces node moving with a more flexible drag-and-drop sorting mechanism in the notes sidebar. Adds visual indicators for drop positions and updates NotesService with a sortNodes method to handle before, after, and inside placement of nodes. Improves user experience and tree manipulation capabilities. * fix: some bugs * fix: remove NotesService class * Migrate notes tree storage to IndexedDB Replaced localStorage usage with IndexedDB for storing and retrieving the notes tree structure. Updated NotesService methods and related logic to use the new notes_tree table in Dexie, including making buildNodePath asynchronous. Adjusted translations in NotesSidebar for consistency. * fix: some bugs * Merge branch 'feat/richeditor' into feat-note * feat: enhance RichEditor with table of contents and content search features Added 'showTableOfContents' and 'enableContentSearch' props to the RichEditor component in NotesPage, improving navigation and search capabilities within notes. * Add multi-level note sorting functionality Introduced sorting options for notes by name, update time, and creation time in ascending and descending order. Updated UI and i18n files to support new sorting features, refactored NotesSidebar and NotesPage to handle sorting, and extended NotesService with recursive sorting logic. Added NotesSortType to note types for better type safety. * perf: reduce rerender * Add search functionality to notes sidebar Introduces a search view in the notes sidebar, allowing users to filter notes by keyword. Adds UI elements for toggling search mode and inputting search terms, and updates filtering logic to support both starred and search views. * Update NotesPage.tsx * Add header navbar to notes page Introduced a new HeaderNavbar component for the notes page and integrated it into NotesPage. Adjusted layout styles and reduced NotesSidebar width from 280px to 250px for improved UI consistency. * Refactor notes state management and add character count i18n Moved activeNodeId state to Redux store for better state management in NotesPage. Added 'characters' translation key to all supported locales and updated NotesPage to use it. Cleaned exported note content in exportMessageToNotes to remove assistant header. * Add breadcrumb navigation to notes header Introduces breadcrumb navigation in the notes header by passing notesTree to HeaderNavbar and implementing path calculation using getNodePathArray. Also exports findNodeInTree and refactors layout for improved UI structure. * fix: style * fix: update sorting labels and title capitalization in localization files for multiple languages * style: adjust margin and padding in TableOfContentsWrapper and ToCDock components * feat: implement content update handling in RichEditor and enhance mode switching in NotesPage * refactor: remove redundant content update handling in RichEditor * Update NotesPage.tsx * Update NotesPage.tsx * feat: enhance Table of Contents functionality with dynamic item display and scroll behavior * fix: update markdown conversion tests to ensure proper HTML output for line breaks and code blocks * feat: add support for saving pasted images in RichEditor with compression handling and IPC integration * feat: enhance markdown conversion to support file:// protocol images as HTML img tags * fix: update RichEditor styles for overflow handling and adjust markdown conversion to preserve <br> tags * fix: refine RichEditor styles to improve text wrapping and ensure proper display of paragraphs * Update NotesPage.tsx * fix: update content structure in TableCell and EnhancedImage to allow for multiple block types * feat: add methods to set selection to the last row and last column in TableView for improved user experience * fix: adjust table layout and minimum width in RichEditor styles for better responsiveness and display * fix: update table layout and scrollbar styles in RichEditor for improved responsiveness and user experience * fix: improve style * fix: update content structure in TableCell to support images alongside paragraphs * fix: enhance layout and styling in NotesPage for improved responsiveness and user experience * fix: unsaved mention * Update NotesPage.tsx * Update NotesPage.tsx * fix: refine styling in RichEditor and NotesPage for improved layout and responsiveness * fix: remove extraneous text from Navbar component rendering * fix: adjust layout and styling in HeaderNavbar for better alignment and responsiveness * fix: update Scrollbar styling in RichEditor for improved layout * feat: implement enhanced math command in RichEditor for improved math placeholder insertion * chore: update @tiptap dependencies to version 3.2.0 and enhance drag handling in RichEditor * refactor: remove italic font style from rich text and clean up button styles in RichEditor * refactor: streamline drag handle behavior and adjust styling in RichEditor for improved layout * style: add code block styling to rich text for consistent font properties * feat: add tooltips for plus button and drag handle in RichEditor for enhanced user guidance * fix: update @tiptap/extension-drag-handle to use a patch version for improved functionality in RichEditor * feat: enhance RichEditor with full width and font family options, and update settings localization * feat: add drop hint for importing markdown files in NotesSidebar and update localization for multiple languages * refactor: remove EditorContainer and simplify JSX structure in NotesPage for cleaner layout * feat: add copy content functionality to HeaderNavbar and update localization for multiple languages * refactor: simplify NotesPage by integrating NotesEditor component and optimizing state management with useCallback * wip: open external folder * feat: enable full width option in AssistantPromptSettings for improved layout * wip: open external folder * wip: open external folder * wip: open external folder * fix: move node * wip: fix file rename * refactor: notebook feature * fix: improve file and directory deletion and renaming logic Enhanced error handling and logging for external file and directory deletion in FileStorage. Updated file renaming to consistently append '.md' extension. Improved NotesService and NotesTreeService to use externalPath for renaming and fixed path updates for renamed nodes. Breadcrumbs in HeaderNavbar now reset when no active node is present. File scanning now strips file extension from node names. * Refactor notes directory handling and state management Replaces 'folderPath' with 'notesPath' throughout the codebase for clarity and consistency. Adds getNotesDir utility and updates IPC, FileStorage, Redux store, hooks, and UI components to use the new notes directory logic. Improves initialization and workspace setup for notes, ensuring correct directory creation and state synchronization. * fix * wip: ensure unique names for notes and folders Introduces logic to prevent name collisions when creating or uploading notes and folders by checking for existing paths and appending a counter if necessary. Updates related services and UI to handle only one file upload at a time and provide user feedback for invalid actions. * feat: add file watcher functionality and validate notes directory Introduces a file watcher using chokidar to monitor changes in the notes directory. Adds IPC channels for starting and stopping the watcher, and validates the selected notes directory to ensure it meets specific criteria. Updates relevant components and services to integrate the new functionality, enhancing the application's responsiveness to file changes. * fix: add file name validation and uniqueness checks Introduces file name legality and uniqueness checks to prevent duplicate or invalid file/folder names. Updates IPC, backend, and renderer logic to use these checks for creating, renaming, and uploading notes and folders. Removes legacy unique name logic and refactors related code for consistency. * fix: file name guard * fix: rename * Update NotesSettings.tsx * Update NotesSettings.tsx * feat: enhance notes settings and editor functionality Refactors the notes settings to introduce new display and editor configurations, including options for default view modes and content compression. Updates the Redux store to manage these new settings and modifies relevant components to reflect the changes. Ensures a more intuitive user experience by allowing users to customize their editing environment and display preferences. * feat: enhance file change handling and directory scanning Introduces a new FileChangeEvent type to manage file system events more effectively. Updates the FileStorage service to handle directory operations with immediate synchronization and implements a debounce mechanism for file changes. Enhances the scanDir function to support recursive directory scanning with a configurable depth, improving the overall file management capabilities. Additionally, updates the Redux store to track active file paths instead of node IDs, streamlining the note management process. * feat: enhance directory scanning and note management Updates the scanDir function to include an optional basePath parameter for improved relative path handling. Modifies the NotesPage and NotesSidebar components to manage selected folder states, allowing for more intuitive folder and note creation. Refactors the createFolder and createNote services to ensure proper tree structure updates based on the selected folder. Additionally, introduces a new utility function to find nodes by external path, enhancing the overall note management experience. * feat: improve code block highlighting and note saving functionality Enhances the ShikiPlugin to load themes and languages only when necessary, preventing redundant operations. Introduces error handling for loading processes. In the NotesPage component, implements a debounced save mechanism to optimize note saving, ensuring that changes are saved only after a pause in typing. Additionally, adds logic to compare file content changes before triggering updates, improving the efficiency of file watching and content management. * Update file.ts * fix: improve file name validation and sanitization Refactored file name validation logic to support platform-specific rules and provide detailed error messages. Added a sanitizeFilename utility to clean file names by replacing invalid characters and handling reserved names. Updated getName and checkName functions to use the new validation and sanitization methods. * fix: remove unused languageMap from useRichEditor hook Eliminated the languageMap variable from the useRichEditor hook as it was not being utilized, streamlining the code and improving performance. Updated dependencies in the effect hook accordingly. * refactor: streamline theme and language loading in ShikiPlugin Removed unnecessary snapshot logic for loaded themes and languages in the ShikiPlugin. Simplified the loading check by introducing a flag to track if any themes or languages were loaded, enhancing performance and reducing complexity. --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: suyao <[email protected]>
Introduced a new method `isTextFile` in the preload API to determine if a given file path corresponds to a text file. This enhancement improves file handling capabilities within the application.
- Added a temporary view mode state in NotesEditor for improved UI handling. - Enhanced sortAllLevels function in NotesService to persist the notes tree after sorting. - Changed default edit mode in note state from 'realtime' to 'preview' for better user experience.
- Added a new ref to track if initial sorting has been applied. - Introduced a useEffect to apply alphabetical sorting to the notes tree on initial load, ensuring a consistent order for users. - Included error handling for the sorting process to log any issues encountered.
- Temporarily disabled the file content comparison logic in the NotesPage component to streamline the file reading process. - This change is intended for further review and potential optimization of the file handling functionality.
- Eliminated the overflow-y property to improve the styling of the rich text editor, allowing for better content display and user experience.
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.
rich-editor
现有对
CommonMark的支持有点问题TODO:
CommonMark规范而不是在外部对齐tiptap(考虑使用remark实现)不一定在这个PR支持