search

opentiny / fluent-editor

Fluent Editor is a rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It is powerful and out-of-the-box. Fluent Editor 是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，功能强大、开箱即用。
https://opentiny.github.io/fluent-editor/
MIT License
121 stars 17 forks source link

refactor: Build split code #55

Closed zzxming closed 1 month ago

zzxming commented 2 months ago

PR

PR Checklist

Please check if your PR fulfills the following requirements:

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?

Other information

将 quill 作为 peerDependencies，用户需要自行安装，用于解决用户需要导出 quill 中并没有在主文件导出的方法。这应该能解决 issue #46 ，用户可以自行从 quill 中导出需要使用的方法

将依赖的 highlight.js、html2canvas 作为 devDependencies，这两项依赖仅在单独的模块中使用，当用户不使用对应模块时，这是多余的，当用户需要使用时自行安装，并作为模块的 options 传入

从入口文件的导入中移除 css 文件的导入，css 文件应该与 js 文件分离

Summary by CodeRabbit

coderabbitai[bot] commented 2 months ago

Walkthrough

This pull request introduces several changes across multiple files, primarily focusing on the addition of an SCSS stylesheet import for the FluentEditor component. The updates ensure that the editor is styled correctly in various Vue components and documentation files. Additionally, modifications to configuration files enhance the build process, dependency management, and module resolution, transitioning from CSS to SCSS for styling. New dependencies are added to support enhanced functionality, and the overall structure of the project is refined for better maintainability.

Changes

Files Change Summary
README.md, README.zh-CN.md Added import statement for @opentiny/fluent-editor/style.scss to include styles for the FluentEditor component.
packages/docs/fluent-editor/demos/*.vue Added import statement for @opentiny/fluent-editor/style.scss in various demo files to ensure proper styling of the FluentEditor component.
packages/docs/fluent-editor/docs/quick-start.md Added two instances of import statement for @opentiny/fluent-editor/style.css to ensure correct styling in quick start documentation.
packages/fluent-editor/package.json Updated styling entry to use style.scss instead of style.css, added quill as a peer dependency, and modified build scripts.
packages/fluent-editor/scripts/pre-release.js Updated paths for module entries and changed mapping for style.scss to style.css.
packages/fluent-editor/src/assets/style.scss Introduced foundational styles and imports for the FluentEditor component, including custom font face and various SCSS modules.
packages/fluent-editor/src/config/types/editor-modules.interface.ts Enhanced syntax property in IEditorModules interface to accept more complex configurations for syntax highlighting.
packages/fluent-editor/vite.config.theme.ts Added configuration for Vite to build theme assets from SCSS files, specifying input and output settings.

Possibly related PRs

🐰 "In the meadow where bunnies play,
New styles hop in, brightening the day.
With SCSS in tow, the editor's dressed,
A joyful sight, we’re truly blessed!
Hops and skips, let’s celebrate,
For every change, we elevate!" 🐇✨

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.` - `@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 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](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.
kagol commented 1 month ago

@zzxming 代码块高亮的 demo 有报错，功能失效 image

kagol commented 1 month ago

@zzxming 这次重构非常赞！不仅解决了 Quill 内容导出问题，抽离了样式，而且优化了产物结构，减少了包体积。 我发了一个 alpha 包：@opentiny/fluent-editor@3.19.1-alpha.0，目前验证产物没有问题，你也可以再验证下。

可能有个小问题，之前引入样式的方式：

@import '@opentiny/fluent-editor/style.css';

现在产物里面没有 style.css，会导致报错。 image

kagol commented 1 month ago

@zzxming 还发现两个问题，一个是插入表情功能失效，点击工具栏的表情图标不会弹出表情面板 另一个是通过 setContents(delta) 给富文本赋值不生效。

zzxming commented 1 month ago

@zzxming 还发现两个问题，一个是插入表情功能失效，点击工具栏的表情图标不会弹出表情面板 另一个是通过 setContents(delta) 给富文本赋值不生效。

有复现方式吗？我通过下载 @opentiny/fluent-editor@3.19.1-alpha.0 进行测试，表情和 setContents 都是正常的

zzxming commented 1 month ago

@zzxming 代码块高亮的 demo 有报错，功能失效 image

文档说明已修改，可正常使用

kagol commented 1 month ago

@zzxming 还发现两个问题，一个是插入表情功能失效，点击工具栏的表情图标不会弹出表情面板 另一个是通过 setContents(delta) 给富文本赋值不生效。

有复现方式吗？我通过下载 @opentiny/fluent-editor@3.19.1-alpha.0 进行测试，表情和 setContents 都是正常的

有的

https://stackblitz.com/edit/vitejs-vite-q9ttrh?file=src%2FApp.vue

zzxming commented 1 month ago

@zzxming 还发现两个问题，一个是插入表情功能失效，点击工具栏的表情图标不会弹出表情面板 另一个是通过 setContents(delta) 给富文本赋值不生效。

有复现方式吗？我通过下载 @opentiny/fluent-editor@3.19.1-alpha.0 进行测试，表情和 setContents 都是正常的

有的

https://stackblitz.com/edit/vitejs-vite-q9ttrh?file=src%2FApp.vue

这是因为 Quill 初始化 syntax 模块错误了，后面的没执行成功，删掉 syntax 就行，或者安装一下 highlight.js

kagol commented 1 month ago

@zzxming 还发现两个问题，一个是插入表情功能失效，点击工具栏的表情图标不会弹出表情面板 另一个是通过 setContents(delta) 给富文本赋值不生效。

有复现方式吗？我通过下载 @opentiny/fluent-editor@3.19.1-alpha.0 进行测试，表情和 setContents 都是正常的

有的 https://stackblitz.com/edit/vitejs-vite-q9ttrh?file=src%2FApp.vue

这是因为 Quill 初始化 syntax 模块错误了，后面的没执行成功，删掉 syntax 就行，或者安装一下 highlight.js

是不是可以给个提示，如果配置了 syntax: true，就提示安装 highlight.js

zzxming commented 1 month ago

是不是可以给个提示，如果配置了 syntax: true，就提示安装 highlight.js

quill 本身在控制台是有提示的 Uncaught Error: Syntax module requires highlight.js. Please include the library on the page before Quill.