docs: add readonly mode #207
Conversation
WalkthroughThis pull request introduces documentation for the read-only mode feature in the Fluent Editor. A new sidebar item has been added to link to the read-only mode documentation. A new Vue component Changes
Sequence DiagramsequenceDiagram
participant User
participant Vue Component
participant FluentEditor
User->>Vue Component: Load Page
Vue Component->>FluentEditor: Import Module
FluentEditor-->>Vue Component: Module Loaded
Vue Component->>FluentEditor: Create Instance
FluentEditor->>FluentEditor: Set Read-Only Mode
FluentEditor->>Vue Component: Render Read-Only Editor
Possibly related PRs
Poem
Finishing Touches
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Walkthrough此PR为Fluent Editor添加了只读模式的文档支持。通过在文档中增加相关说明和示例，用户可以了解如何配置只读模式。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
|
|
||
| onMounted(() => { | ||
| // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook | ||
| import('@opentiny/fluent-editor').then((module) => { |
There was a problem hiding this comment.
Consider handling the case where the module fails to load. This could prevent potential runtime errors if the import fails.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/docs/fluent-editor/demos/readonly.vue (1)
8-18:⚠️ Potential issueAdd error handling for dynamic import
The dynamic import should include error handling to gracefully handle module loading failures.
onMounted(() => { import('@opentiny/fluent-editor').then((module) => { const FluentEditor = module.default editor = new FluentEditor('#editor-readonly', { theme: 'snow', modules: { toolbar: false, }, readOnly: true, }) - }) + }).catch((error) => { + console.error('Failed to load FluentEditor:', error) + }) })
🧹 Nitpick comments (2)
packages/docs/fluent-editor/demos/readonly.vue (1)
4-4: Improve type safety with proper typingAdd proper TypeScript type for the editor instance.
-let editor +let editor: any // TODO: Replace 'any' with proper FluentEditor type from the modulepackages/docs/fluent-editor/docs/demo/readonly.md (1)
3-3: Enhance documentation with more detailsConsider adding:
- Type information for the configuration options
- Examples of programmatically toggling readonly mode
- Use cases or scenarios where readonly mode is beneficial
Example addition:
通过配置 `modules.toolbar` 为 false 可以隐藏工具栏，配置 `readOnly` 为 true 可以设置只读模式。 + +## 配置项 + +| 配置项 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| modules.toolbar | boolean | true | 是否显示工具栏 | +| readOnly | boolean | false | 是否为只读模式 | + +## 动态切换 + +```typescript +// 切换只读模式 +editor.enable(false) // 设置为只读 +editor.enable(true) // 取消只读 +```
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/docs/fluent-editor/.vitepress/sidebar.ts(1 hunks)packages/docs/fluent-editor/demos/readonly.vue(1 hunks)packages/docs/fluent-editor/docs/demo/readonly.md(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (1)
packages/docs/fluent-editor/.vitepress/sidebar.ts (1)
28-28: LGTM!The sidebar item is properly placed in the "使用示例" section and follows the existing structure.
| let editor | ||
| onMounted(() => { | ||
| // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook | ||
| import('@opentiny/fluent-editor').then((module) => { | ||
| const FluentEditor = module.default | ||
| editor = new FluentEditor('#editor-readonly', { | ||
| theme: 'snow', | ||
| modules: { | ||
| toolbar: false, | ||
| }, | ||
| readOnly: true, | ||
| }) | ||
| }) | ||
| }) |
There was a problem hiding this comment.
Add cleanup for editor instance
The editor instance should be properly destroyed when the component is unmounted to prevent memory leaks.
<script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, onBeforeUnmount } from 'vue'
let editor
onMounted(() => {
import('@opentiny/fluent-editor').then((module) => {
const FluentEditor = module.default
editor = new FluentEditor('#editor-readonly', {
theme: 'snow',
modules: {
toolbar: false,
},
readOnly: true,
})
})
})
+
+onBeforeUnmount(() => {
+ if (editor) {
+ editor.destroy()
+ editor = null
+ }
+})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let editor | |
| onMounted(() => { | |
| // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook | |
| import('@opentiny/fluent-editor').then((module) => { | |
| const FluentEditor = module.default | |
| editor = new FluentEditor('#editor-readonly', { | |
| theme: 'snow', | |
| modules: { | |
| toolbar: false, | |
| }, | |
| readOnly: true, | |
| }) | |
| }) | |
| }) | |
| import { onMounted, onBeforeUnmount } from 'vue' | |
| let editor | |
| onMounted(() => { | |
| // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook | |
| import('@opentiny/fluent-editor').then((module) => { | |
| const FluentEditor = module.default | |
| editor = new FluentEditor('#editor-readonly', { | |
| theme: 'snow', | |
| modules: { | |
| toolbar: false, | |
| }, | |
| readOnly: true, | |
| }) | |
| }) | |
| }) | |
| onBeforeUnmount(() => { | |
| if (editor) { | |
| editor.destroy() | |
| editor = null | |
| } | |
| }) |
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
Summary by CodeRabbit
New Features
Documentation