Feat: description editor

Maimunar commented 7 months ago

Closes https://github.com/tryabby/abby/issues/72

This PR implements an improved description editor based on TipTap. The following was changed:

tiptap and its dependencies were updated from 2.1.13 to 2.2.4. A text-align extension was added for tiptap
a menu with formatting options was included on top of the description editor
the editor itself now has a fixed height and overflows instead of the previous implementation, where it was increasing its size on a new line
BubbleMenu was deleted in favor of the button menu
The "markdown is supported" caption was now unnecessary due to the menu bar, so it was removed
Additional minor text styling changes (see Editor.tsx)

Screenshot of new (proposed) editor modal

Summary by CodeRabbit

New Features
- Enhanced text editor with new formatting options including headings, bold, italic, and text alignment (left, center, right, justify).
Improvements
- Updated @tiptap packages for better performance and stability in the text editor.
- Refined text editor's menu bar for improved organization and user interaction.
Bug Fixes
- Removed the markdown support message from the EditDescriptionModal to streamline user experience.

vercel[bot] commented 7 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
abby-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2024 10:12pm

vercel[bot] commented 7 months ago

@Maimunar is attempting to deploy a commit to a Personal Account owned by @tryabby on Vercel.

@tryabby first needs to authorize it.

vercel[bot] commented 7 months ago

Deployment failed with the following error:

Hobby accounts are limited to daily cron jobs. This cron expression (0 0,12 * * *) would run more than once per day. Upgrade to pro to unlock all Cron Jobs features on Vercel.

cstrnt commented 7 months ago

Hey @Maimunar,

thank you very much for the PR! This is super helpful! I like it a lot but also thought that it would be cool to use Icons instead of Text for the different formatting options. I saw that Lucide (https://lucide.dev) has icons for H1, H2 etc. Would you mind using those instead?

coderabbitai[bot] commented 7 months ago

Walkthrough

The update enhances the WYSIWYG editor in the web application by upgrading the @tiptap packages to 2.2.4, introducing new formatting options like text alignment, and refining the UI for a better user experience. It also removes outdated markdown support messaging from the EditDescriptionModal.

Changes

Files	Change Summary
`apps/web/package.json`	Updated `@tiptap` packages to `2.2.4`, affecting extensions and related dependencies.
`apps/web/src/components/Editor.tsx`	Added text alignment functionality, refactored menu bar, and updated editor configuration.
`apps/web/src/components/FlagPage.tsx`	Removed markdown support message from `EditDescriptionModal`.

Assessment against linked issues

Objective	Addressed	Explanation
Add a nicer WYSIWYG Editor for the Feature Flag / Remote Config Description (#72)	✅

🐰✨ A hop, a skip, in the code we dip, To bring a change, a brand new ship. With buttons bright and alignment tight, We craft a space where ideas take flight. So here's to the text, now finely dressed, In its WYSIWYG best, it's sure to impress! 🎉🐾

Recent Review Details

**Configuration used: CodeRabbit UI**

Commits

Files that changed from the base of the PR and between 6c9f365a2ecfa3ebbb1551ac3da978b5467c2021 and df43b363019a5602d10275b9de1902a53ca66988.

Files ignored due to path filters (1)

* `pnpm-lock.yaml` is excluded by `!pnpm-lock.yaml`

Files selected for processing (1)

* apps/web/package.json (1 hunks)

Additional comments not posted (6)

apps/web/package.json (6)
`63-63`: Updated `@tiptap/extension-bubble-menu` to `2.2.4` aligns with the PR objectives to enhance the editor. --- `64-64`: Updated `@tiptap/extension-placeholder` to `2.2.4` aligns with the PR objectives to enhance the editor. --- `65-65`: Updated `@tiptap/extension-text-align` to `2.2.4` aligns with the PR objectives to enhance the editor. --- `66-66`: Updated `@tiptap/pm` to `2.2.4` aligns with the PR objectives to enhance the editor. --- `67-67`: Updated `@tiptap/react` to `2.2.4` aligns with the PR objectives to enhance the editor. --- `68-68`: Updated `@tiptap/starter-kit` to `2.2.4` aligns with the PR objectives to enhance the editor.

--- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

simonorzel26 commented 7 months ago

@Maimunar Thanks for the PR! I went ahead and just added the icons that @cstrnt requested. Please check again! 👍

Maimunar commented 7 months ago

My pleasure, also thanks for picking that up! Let me know if there is anything else worth looking into for that PR

tryabby / abby