kiss-keray commented 1 month ago

PR

效果：

PR Checklist

Please check if your PR fulfills the following requirements:

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

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[x] Other... Please describe:

What is the current behavior?

引入mathlive编辑公式模块，满足LaTeX格式公式的编辑

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Summary by CodeRabbit

Release Notes

New Features
- Introduced a new Vue component for math editing using the Fluent Editor with a formula toolbar.
- Added support for LaTeX formula handling, allowing users to insert and edit mathematical expressions directly within the editor.
- Integrated Mathlive functionality, enhancing the editor's capabilities for mathematical content.
Bug Fixes
- Improved compatibility with server-side rendering and dynamic imports.
Documentation
- Expanded documentation to include details on the new Mathlive formula feature and configuration settings, including a comparison with existing KaTeX functionality.

coderabbitai[bot] commented 1 month ago

Walkthrough

This pull request introduces a new Vue component for a Fluent Editor that integrates mathematical formula handling using the Mathlive library. It includes a toolbar with a formula button, which opens a dialog for entering LaTeX formatted equations. Additionally, new styles for the editor and tooltip are defined, and changes are made to several package configuration files to support the new functionality, including the addition of dependencies and documentation updates.

Changes

File	Change Summary
`packages/docs/fluent-editor/demos/mathlive.vue`	New Vue component added utilizing `<script setup>` with TypeScript for Fluent Editor integration.
`packages/docs/package.json`	Added new dependency: `"mathlive": "^0.101.0"`; minor formatting change: newline character removed at the end of the file.
`packages/fluent-editor/package.json`	Added new peer dependencies: `mathlive` and `parchment`.
`packages/fluent-editor/src/assets/mathlive.scss`	New styles for `.ql-math-field` and `.ql-tooltip.math-field-tooltip` classes added.
`packages/fluent-editor/src/assets/style.scss`	New import statement for the `mathlive` module added.
`packages/fluent-editor/src/fluent-editor.ts`	Integrated LaTeX handling with new `MathliveModule` and `MathliveBlot`, including toolbar handlers.
`packages/fluent-editor/src/mathlive/formats.ts`	New `MathliveBlot` class introduced for embedding Mathlive functionality in Quill.
`packages/fluent-editor/src/mathlive/index.ts`	New `MathliveModule` class added to integrate Mathlive with Quill editor.
`packages/fluent-editor/src/mathlive/tooltip.ts`	New `MathliveTooltip` class added for Mathlive input field integration in tooltips.
`packages/docs/fluent-editor/docs/formula.md`	Updated documentation for formula feature, including `mathlive` integration details.

Possibly related PRs

#105: The changes in the main PR introduce a new Vue component that utilizes the Fluent Editor, while this PR enhances documentation related to contributing to the project, which may indirectly support the development of similar components.

Suggested labels

documentation

Suggested reviewers

kagol

Poem

In a world of math and flair,
A new editor's here to share.
With formulas that dance and play,
LaTeX magic leads the way!
So hop along, and join the fun,
With mathlive, the work is done! 🐰✨

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 , 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 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](http://discord.gg/coderabbit) 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

@kiss-keray 想了解下这个和 Quill 原生的 formula 公式功能有什么不同呢？ https://opentiny.github.io/fluent-editor/docs/formula

kiss-keray commented 1 month ago

@kiss-keray 想了解下这个和 Quill 原生的 formula 公式功能有什么不同呢？ https://opentiny.github.io/fluent-editor/docs/formula

原生的公式用的katex格式，添加公式不友好，并且现有的公式不支持重新编辑。新增的公式是latex格式，使用mathlive可视化编辑友好，并且支持重复编辑公式

kagol commented 1 month ago

@kiss-keray 需要解决下冲突哈

kagol commented 4 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用
不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【可编辑公式】的demo

kiss-keray commented 4 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用

不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【MathLive 公式】的demo

OK

kiss-keray commented 4 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用

不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【可编辑公式】的demo

冲突已解决，建议git忽略pnpm-lock.yaml。第2点已改，第1点暂时没找到解决版本

kagol commented 2 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用

不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【可编辑公式】的demo

冲突已解决，建议git忽略pnpm-lock.yaml。第2点已改，第1点暂时没找到解决版本

@kiss-keray 第一点其实不难实现，可以参考下 screenshot 的实现。

这个截屏功能依赖于 html2canvas 库，但是 packages/fluent-editor/package.json 的 dependencies 中并没有这个依赖，这就意味着用户没有用到这个截屏功能的话，是不需要安装这个依赖的，这样就能做到按需，提升用户体验。

同理，mathlive 公式编辑功能，依赖于 mathlive 库，也可以不写到 packages/fluent-editor/package.json 的 dependencies 中，这样的话，用户没有用到这个公司编辑功能的话，是不需要安装 mathlive 这个依赖。

具体来说，就是需要给 mathlive 模块增加一个 options 配置，里面有一个属性叫：Mathlive，这个属性由用户从组件外部传入，如果用户没有传入的话，从window,Mathlive 中读取也是可以的，如果两个渠道都没有取到值，那么这个功能不可用，控制台提示用户需要安装和传入 Mathlive。

详细可以参考 packages/fluent-editor/src/screenshot/index.ts 文件。

kiss-keray commented 2 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用

不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【可编辑公式】的demo

冲突已解决，建议git忽略pnpm-lock.yaml。第2点已改，第1点暂时没找到解决版本

@kiss-keray 第一点其实不难实现，可以参考下 screenshot 的实现。

这个截屏功能依赖于 html2canvas 库，但是 packages/fluent-editor/package.json 的 dependencies 中并没有这个依赖，这就意味着用户没有用到这个截屏功能的话，是不需要安装这个依赖的，这样就能做到按需，提升用户体验。

同理，mathlive 公式编辑功能，依赖于 mathlive 库，也可以不写到 packages/fluent-editor/package.json 的 dependencies 中，这样的话，用户没有用到这个公司编辑功能的话，是不需要安装 mathlive 这个依赖。

具体来说，就是需要给 mathlive 模块增加一个 options 配置，里面有一个属性叫：Mathlive，这个属性由用户从组件外部传入，如果用户没有传入的话，从window,Mathlive 中读取也是可以的，如果两个渠道都没有取到值，那么这个功能不可用，控制台提示用户需要安装和传入 Mathlive。

详细可以参考 packages/fluent-editor/src/screenshot/index.ts 文件。

借用window并不是最优解，我希望的是在运行时检查是否安装了依赖，没安装依赖时console警告。并且使用这个功能用户只需要安装依赖这一步就够了，不需要其他步骤。我尝试过在运行时import，但是在不安装依赖时运行直接报错。原因在于vite编译时对依赖进行了preload，具体怎么解决我还没找到办法。

kagol commented 2 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用

不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【可编辑公式】的demo

冲突已解决，建议git忽略pnpm-lock.yaml。第2点已改，第1点暂时没找到解决版本

@kiss-keray 第一点其实不难实现，可以参考下 screenshot 的实现。这个截屏功能依赖于 html2canvas 库，但是 packages/fluent-editor/package.json 的 dependencies 中并没有这个依赖，这就意味着用户没有用到这个截屏功能的话，是不需要安装这个依赖的，这样就能做到按需，提升用户体验。同理，mathlive 公式编辑功能，依赖于 mathlive 库，也可以不写到 packages/fluent-editor/package.json 的 dependencies 中，这样的话，用户没有用到这个公司编辑功能的话，是不需要安装 mathlive 这个依赖。具体来说，就是需要给 mathlive 模块增加一个 options 配置，里面有一个属性叫：Mathlive，这个属性由用户从组件外部传入，如果用户没有传入的话，从window,Mathlive 中读取也是可以的，如果两个渠道都没有取到值，那么这个功能不可用，控制台提示用户需要安装和传入 Mathlive。详细可以参考 packages/fluent-editor/src/screenshot/index.ts 文件。

借用window并不是最优解，我希望的是在运行时检查是否安装了依赖，没安装依赖时console警告。并且使用这个功能用户只需要安装依赖这一步就够了，不需要其他步骤。我尝试过在运行时import，但是在不安装依赖时运行直接报错。原因在于vite编译时对依赖进行了preload，具体怎么解决我还没找到办法。

@kiss-keray 其实是有两个方案的，不完全是借用window，第一优先级是用户通过模块的 options 配置主动传入依赖，如果用户没有主动传入，才从 window 变量中找依赖。

借用 window 其实是 quill 的做法，quill 的 formula 是直接借用 window 获取依赖的，确实不是特别好，所以我觉得应该优先让用户主动传入。

你提到的用户只需要安装依赖这一步就够了，不需要其他步骤，我觉得不太可行，理由如下：

虽然我们可以在代码里写类似这样的代码：import mathlive from 'mathlive'，这样就不需要从 window 取 mathlive 依赖了，同时在 devDependencies 声明依赖，这样没用到这个功能的用户也不会安装这个依赖
但是这样我们就没法判断用户是否安装 mathlive 了，因为我们本地环境已经安装了 mathlive 依赖，也就没法提示用户需要安装 mathlive 依赖

所以我觉得让用户从模块 options 中主动传入依赖是一个比较优雅的方式，quill 内部的 syntax 代码块高亮也是采用的这种方式。

用户的用法类似以下方式：

new FluentEditor('#editor', {
  modules: {
    mathlive: {
      // 可以在此处传入外部依赖
    }
  }
})

可以参考：code-block-highlight

kiss-keray commented 2 weeks ago

@kiss-keray 我看下了这个 mathlive 公式模块比 Quill 内置的体验好多了，我有以下建议：

参考quill内置的公式katex，将mathlive这个依赖外置，不放到package.json中，因为大部分用户可能不需要公式这个模块的功能，外置可以尽可能减少包体积，做到按需安装和使用

不需要新开一个demo文档，二是将 Demo 文档合入到【公式】这个demo文档中，在【基本用法】demo下面增加一个【可编辑公式】的demo

冲突已解决，建议git忽略pnpm-lock.yaml。第2点已改，第1点暂时没找到解决版本

@kiss-keray 第一点其实不难实现，可以参考下 screenshot 的实现。这个截屏功能依赖于 html2canvas 库，但是 packages/fluent-editor/package.json 的 dependencies 中并没有这个依赖，这就意味着用户没有用到这个截屏功能的话，是不需要安装这个依赖的，这样就能做到按需，提升用户体验。同理，mathlive 公式编辑功能，依赖于 mathlive 库，也可以不写到 packages/fluent-editor/package.json 的 dependencies 中，这样的话，用户没有用到这个公司编辑功能的话，是不需要安装 mathlive 这个依赖。具体来说，就是需要给 mathlive 模块增加一个 options 配置，里面有一个属性叫：Mathlive，这个属性由用户从组件外部传入，如果用户没有传入的话，从window,Mathlive 中读取也是可以的，如果两个渠道都没有取到值，那么这个功能不可用，控制台提示用户需要安装和传入 Mathlive。详细可以参考 packages/fluent-editor/src/screenshot/index.ts 文件。

借用window并不是最优解，我希望的是在运行时检查是否安装了依赖，没安装依赖时console警告。并且使用这个功能用户只需要安装依赖这一步就够了，不需要其他步骤。我尝试过在运行时import，但是在不安装依赖时运行直接报错。原因在于vite编译时对依赖进行了preload，具体怎么解决我还没找到办法。

@kiss-keray 其实是有两个方案的，不完全是借用window，第一优先级是用户通过模块的 options 配置主动传入依赖，如果用户没有主动传入，才从 window 变量中找依赖。

借用 window 其实是 quill 的做法，quill 的 formula 是直接借用 window 获取依赖的，确实不是特别好，所以我觉得应该优先让用户主动传入。

你提到的用户只需要安装依赖这一步就够了，不需要其他步骤，我觉得不太可行，理由如下：

虽然我们可以在代码里写类似这样的代码：import mathlive from 'mathlive'，这样就不需要从 window 取 mathlive 依赖了，同时在 devDependencies 声明依赖，这样没用到这个功能的用户也不会安装这个依赖

但是这样我们就没法判断用户是否安装 mathlive 了，因为我们本地环境已经安装了 mathlive 依赖，也就没法提示用户需要安装 mathlive 依赖

所以我觉得让用户从模块 options 中主动传入依赖是一个比较优雅的方式，quill 内部的 syntax 代码块高亮也是采用的这种方式。

用户的用法类似以下方式：
new FluentEditor('#editor', {
  modules: {
    mathlive: {
      // 可以在此处传入外部依赖
    }
  }
})
可以参考：code-block-highlight

这种方式稍微好点，可以改成这种

kagol commented 2 weeks ago

@all-contributors please add @kiss-keray for code.

allcontributors[bot] commented 2 weeks ago

@kagol

I've put up a pull request to add @kiss-keray! :tada:

kagol commented 1 week ago

建议git忽略pnpm-lock.yaml

@kiss-keray 一般 lock 文件不应该被忽略，理由如下：

package.json 并不能锁定依赖的版本
将 lock 文件提交到代码仓库，有助于保持一致依赖版本，多人协同开发时，不容易因为依赖版本不同导致本地不起来之类的
将 lock 文件提交到代码仓库，已经被大量知名开源项目采用，比如：vue / react / angular

vue:

react:

angular:

kagol commented 1 week ago

@kiss-keray @opentiny/fluent-editor@3.22.0 已发布，支持 mathlive 可编辑公式🎉

release notes: https://github.com/opentiny/fluent-editor/releases/tag/v3.22.0 demo: https://opentiny.github.io/fluent-editor/docs/formula#可编辑公式

感谢你对 Fluent Editor 富文本编辑器的贡献！👏

opentiny / fluent-editor

mathlive公式模块 #95

PR

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Summary by CodeRabbit

Release Notes

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Poem