feat(toolbar): custom color picker save current pick color and add more color #205

zzxming · 2025-01-15T04:34:13Z

PR

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our Commit Message Guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

此 pr 为颜色选择添加更多默认颜色与自定义颜色选择，使工具栏当前颜色不会跟随光标移动而变为光标所在位置的颜色，使点击图标后可直接设置上次选择的颜色。
此修改为实现shortcut-key中颜色修改的快捷设置

coderabbitai · 2025-01-15T04:34:20Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @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.
- @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration 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 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 for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

petercat-assistant · 2025-01-15T04:34:45Z

Walkthrough

This PR introduces a custom color picker feature in the toolbar, allowing users to save the current picked color and add more colors. It prevents the toolbar's current color from changing with the cursor's position and enables setting the last selected color directly by clicking the icon. This update facilitates quick color changes via shortcut keys.

Changes

File	Summary
eslint.config.mjs	Added rule to disable 'no-new'.
packages/docs/fluent-editor/.vitepress/sidebar.ts	Updated links to demo paths and added new sections for API references and module ecosystem.
packages/docs/fluent-editor/demos/toolbar-tip.vue	Removed onBeforeUnmount lifecycle hook.
packages/docs/fluent-editor/docs/api/*.md	Added new API documentation files for Fluent Editor class, instance, and options.
packages/docs/fluent-editor/docs/demo/*.md	Updated demo documentation files with new paths.
packages/docs/fluent-editor/docs/modules/*.md	Added new documentation files for modules like header-list and toolbar-tip.
packages/docs/fluent-editor/docs/used-in-framework.md	Removed eslint-disable comments.
packages/fluent-editor/package.json	Updated dependencies and added new ones.
packages/fluent-editor/src/assets/*.scss	Updated styles for toolbar, color picker, and added new styles for image bar.
packages/fluent-editor/src/config/i18n/*.ts	Added new language entries for color picker.
packages/fluent-editor/src/core/fluent-editor.ts	Added static register method.
packages/fluent-editor/src/fluent-editor.ts	Registered new UI components for color picker.
packages/fluent-editor/src/modules/custom-image/*.ts	Added ImageBar class for image context menu actions.
packages/fluent-editor/src/modules/i18n.ts	Modified changeLanguage method to support force update.
packages/fluent-editor/src/modules/toolbar/better-picker.ts	Refactored to use EasyColorPicker and updated picker logic.
packages/fluent-editor/src/themes/snow.ts	Extended SnowTheme to support new color picker and i18n text updates.
packages/fluent-editor/src/ui/icons.config.ts	Updated color icon configurations.
pnpm-lock.yaml	Updated lock file with new dependencies.

petercat-assistant · 2025-01-15T04:34:47Z

packages/fluent-editor/src/modules/custom-image/image-bar.ts

+        if (!response.ok) {
+          throw new Error('Copy image failed')
+        }
+        const blob = await response.blob()


Ensure that the fetch response is checked for success before proceeding to use the blob. This is crucial to avoid runtime errors if the fetch fails.

zzxming · 2025-01-15T04:41:56Z

v4 要合并一下主分支提交

kagol · 2025-01-15T10:05:20Z

@zzxming 这个看下是颜色面板支持自定义颜色，可否贴下效果图呢？

kagol · 2025-01-15T10:44:34Z

@zzxming 对勾的颜色太扎眼了，建议深色的用白色，然后浅色的用黑色。

kagol · 2025-01-15T11:12:07Z

@zzxming 有一个小的优化点：目前字体颜色和背景颜色的高亮都分了两部分，如果一直高亮着不好看（之前是跟随光标所在内容的字体颜色和背景颜色，不会一直高亮所以问题不大），建议上面部分不高亮，下面那根短横线高亮即可。

kagol · 2025-01-15T11:35:19Z

v4 要合并一下主分支提交

已合主干分支

zzxming · 2025-01-15T11:52:25Z

@zzxming 对勾的颜色太扎眼了，建议深色的用白色，然后浅色的用黑色。

这个是滤镜算的对比色，保证所有颜色的情况下都能明显显示出来这个对勾，如果固定的话，用户自定义的颜色值配置不到还是会有看不清的情况。这个没能想到还有什么样式能够明显显示的方法

zzxming · 2025-01-15T11:56:00Z

@zzxming 有一个小的优化点：目前字体颜色和背景颜色的高亮都分了两部分，如果一直高亮着不好看（之前是跟随光标所在内容的字体颜色和背景颜色，不会一直高亮所以问题不大），建议上面部分不高亮，下面那根短横线高亮即可。

上半部分的高亮可以处理掉，但是 background 的图标是 svg 问题，这个 svg 是一个整体，要修改的话要找一个其他的 svg

zzxming · 2025-01-15T12:29:35Z

packages/fluent-editor/src/ui/icons.config.ts

 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <path d="M4.64447006,9.66583547 L3.17597929,8.33216965 L6.15933183,5.11039074 L5.42508645,4.44355783
+    <path class="ql-color-label" d="M4.64447006,9.66583547 L3.17597929,8.33216965 L6.15933183,5.11039074 L5.42508645,4.44355783


@kagol icon 这个你回头找个好看的吧，在横线的位置加上这个类名就行

kagol · 2025-01-16T02:33:03Z

@zzxming 对勾的颜色太扎眼了，建议深色的用白色，然后浅色的用黑色。

这个是滤镜算的对比色，保证所有颜色的情况下都能明显显示出来这个对勾，如果固定的话，用户自定义的颜色值配置不到还是会有看不清的情况。这个没能想到还有什么样式能够明显显示的方法

@zzxming 我觉得可以这样：

先确保咱们自己的默认颜色显示没问题：深色用白色对勾、浅色用黑色对勾
然后我们可以看下如何识别深色颜色和浅色颜色，如果识别到用户自定义颜色是深色，则默认用白色对勾，浅色用黑色对勾，并且允许用户自定义自己的对勾颜色
不过这个可以后续优化。

petercat-assistant bot reviewed Jan 15, 2025

View reviewed changes

kagol added the enhancement New feature or request label Jan 15, 2025

zzxming force-pushed the feat-picker branch from 97560c3 to cb2e4a1 Compare January 15, 2025 12:22

feat: custom color picker

9fcecd6

zzxming force-pushed the feat-picker branch from cb2e4a1 to 9fcecd6 Compare January 15, 2025 12:28

zzxming commented Jan 15, 2025

View reviewed changes

kagol approved these changes Jan 16, 2025

View reviewed changes

kagol merged commit 03b23c1 into opentiny:v4 Jan 16, 2025

kagol added the v4 label Jan 16, 2025

zzxming mentioned this pull request Jan 22, 2025

🐛 [Bug]: FluentEditor文本色选中没有显示对勾 #173

Closed

zzxming deleted the feat-picker branch January 27, 2025 04:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(toolbar): custom color picker save current pick color and add more color #205

feat(toolbar): custom color picker save current pick color and add more color #205

zzxming commented Jan 15, 2025

coderabbitai bot commented Jan 15, 2025

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

petercat-assistant bot commented Jan 15, 2025

petercat-assistant bot Jan 15, 2025

zzxming commented Jan 15, 2025

kagol commented Jan 15, 2025

kagol commented Jan 15, 2025

kagol commented Jan 15, 2025

kagol commented Jan 15, 2025

zzxming commented Jan 15, 2025

zzxming commented Jan 15, 2025

zzxming Jan 15, 2025

kagol commented Jan 16, 2025 •

edited

Loading

feat(toolbar): custom color picker save current pick color and add more color #205

feat(toolbar): custom color picker save current pick color and add more color #205

Conversation

zzxming commented Jan 15, 2025

PR

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

coderabbitai bot commented Jan 15, 2025

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

petercat-assistant bot commented Jan 15, 2025

Walkthrough

Changes

petercat-assistant bot Jan 15, 2025

Choose a reason for hiding this comment

zzxming commented Jan 15, 2025

kagol commented Jan 15, 2025

kagol commented Jan 15, 2025

kagol commented Jan 15, 2025

kagol commented Jan 15, 2025

zzxming commented Jan 15, 2025

zzxming commented Jan 15, 2025

zzxming Jan 15, 2025

Choose a reason for hiding this comment

kagol commented Jan 16, 2025 • edited Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

kagol commented Jan 16, 2025 •

edited

Loading