Fix highlighting issues in core, react and angular packages - #27
Conversation
…ates - Added support for `markitContentKey` input, allowing the directive to unmark and re-apply highlights when the content key changes. - Implemented logic in `ngOnChanges` and `ngAfterViewChecked` to handle updates efficiently, preventing garbled text during content changes. - Introduced a utility function to compare previous and current content key values, supporting both single values and arrays. - Updated tests to cover new functionality, ensuring correct behavior when content keys change.
- Added functionality to share highlights across multiple instances using the CSS Highlight API, preventing overwrites. - Updated `HighlightApiRenderer` to manage highlights by name, allowing both default and custom highlight names. - Enhanced tests to verify correct behavior when multiple instances are created with the same highlight name. - Introduced `contentKey` prop in React components to handle dynamic content updates without garbled text. - Updated `useHighlight` hook to reapply highlights when `contentKey` changes, ensuring accurate rendering.
…ntent handling - Introduced a new script to report bundle sizes for core, React, and Angular packages, aiding in performance monitoring. - Updated documentation across various guides to clarify the use of `contentKey` for dynamic content in both React and Angular, ensuring highlights re-apply correctly. - Added a new section on framework lifecycles to explain how highlights are managed over time in React and Angular. - Enhanced README.md and other documentation files to improve clarity and usability for developers.
…pt configuration - Added `mermaid` and `vitepress-plugin-mermaid` as dev dependencies to enable diagram rendering in documentation. - Updated VitePress configuration to utilize the `withMermaid` function for enhanced diagram support. - Created a new TypeScript configuration file for the documentation to streamline type checking. - Refactored lifecycle diagrams in the documentation to use sequence diagrams for improved clarity.
📦 Bundle Size Report
✅ All packages within size limits |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the MarkIt highlighting library by resolving critical highlighting issues across its core, React, and Angular packages. The primary focus is on improving how the library handles dynamic content and multiple instances, preventing garbled text and ensuring consistent highlight rendering. Additionally, the documentation has been substantially updated to reflect these changes and provide better guidance to users, including new search capabilities and support for Mermaid diagrams. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces significant improvements and bug fixes across the core, React, and Angular packages. The fix for multiple highlight-api instances overriding each other is a crucial correction. The introduction of contentKey in React and markitContentKey in Angular provides a robust solution for handling dynamic content, which is a common use case in modern frameworks. The accompanying documentation updates, including the new 'Framework Lifecycles' page with Mermaid diagrams, are excellent and greatly improve clarity for developers. I've found one potential issue in the Angular directive's lifecycle logic, which I've detailed in a specific comment.
1 participant
renderer: dom.contentKeywhich are passed like deps inuseEffect.renderer: dom.markitContentKey