Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(fluent-editor): add formula demo #2516

Merged
merged 1 commit into from
Nov 12, 2024
Merged

docs(fluent-editor): add formula demo #2516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions examples/sites/demos/pc/app/fluent-editor/options-formula-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div>
<tiny-fluent-editor v-model="content" :options="options" ref="editorRef"></tiny-fluent-editor>
内容：<br />
{{ content }}
</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { TinyFluentEditor } from '@opentiny/vue'

// 引入 mathlive 模块和样式
import 'mathlive'
import 'mathlive/static.css'
import 'mathlive/fonts.css'

const editorRef = ref()

const content = ref('{"ops":[{"insert":{"mathlive":{"value":"\\sum_{i=1}^{n} i^2","mode":"dialog"}}},{"insert":"\n"}]}')

const options = ref({
modules: {
// 工具栏
toolbar: ['formula'],
// 可编辑公式
mathlive: true
}
})

onMounted(() => {
editorRef.value.state.quill.setContents({
'ops': [{ 'insert': { 'mathlive': { 'value': '\\sum_{i=1}^{n} i^2', 'mode': 'dialog' } } }, { 'insert': '\n' }]
})
})
Comment on lines +31 to +35
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove redundant content initialization

The initial content is already set via v-model binding. The manual initialization in onMounted is redundant and could lead to race conditions.

-onMounted(() => {
-  editorRef.value.state.quill.setContents({
-    'ops': [{ 'insert': { 'mathlive': { 'value': '\\sum_{i=1}^{n} i^2', 'mode': 'dialog' } } }, { 'insert': '\n' }]
-  })
-})

Additionally, if you need to programmatically update the content, consider exposing a proper method through the TinyFluentEditor component instead of accessing the Quill instance directly.

📝 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.

Suggested change
onMounted(() => {
editorRef.value.state.quill.setContents({
'ops': [{ 'insert': { 'mathlive': { 'value': '\\sum_{i=1}^{n} i^2', 'mode': 'dialog' } } }, { 'insert': '\n' }]
})
})

</script>
40 changes: 40 additions & 0 deletions examples/sites/demos/pc/app/fluent-editor/options-formula.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<div>
<tiny-fluent-editor v-model="content" :options="options" ref="editorRef"></tiny-fluent-editor>
内容：<br />
{{ content }}
</div>
</template>

<script>
import { TinyFluentEditor } from '@opentiny/vue'

// 引入 mathlive 模块和样式
import 'mathlive'
import 'mathlive/static.css'
import 'mathlive/fonts.css'

export default {
components: {
TinyFluentEditor
},
data() {
return {
content: '{"ops":[{"insert":{"mathlive":{"value":"\\sum_{i=1}^{n} i^2","mode":"dialog"}}},{"insert":"\n"}]}',
options: {
modules: {
// 工具栏
toolbar: ['formula'],
// 可编辑公式
mathlive: true
}
}
}
},
mounted() {
this.$refs.editorRef.state.quill.setContents({
'ops': [{ 'insert': { 'mathlive': { 'value': '\\sum_{i=1}^{n} i^2', 'mode': 'dialog' } } }, { 'insert': '\n' }]
})
}
}
</script>
12 changes: 12 additions & 0 deletions examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,18 @@ export default {
},
codeFiles: ['options.vue']
},
{
demoId: 'formula',
name: {
'zh-CN': '可编辑公式',
'en-US': 'Formula'
},
desc: {
'zh-CN': '通过设置 <code>options</code> 中的 <code>mathlive</code> 为 true 开启可编辑公式功能。',
'en-US': ''
},
codeFiles: ['options-formula.vue']
},
{
demoId: 'data-switch',
name: {
Expand Down
1 change: 1 addition & 0 deletions examples/sites/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"github-markdown-css": "^5.1.0",
"highlight.js": "^11.5.1",
"marked": "^4.3.0",
"mathlive": "^0.101.1",
"prismjs": "^1.28.0",
"sortablejs": "1.15.0",
"tailwindcss": "^3.2.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/fluent-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"//postversion": "pnpm build"
},
"dependencies": {
"@opentiny/fluent-editor": "~3.20.0",
"@opentiny/fluent-editor": "~3.22.0",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Version bump is compatible but MathLive dependency is missing

The version bump to ~3.22.0 is compatible, but there's an implementation concern:

  • The formula feature requires MathLive (v0.101.1) as shown in the demo files, but it's not declared as a dependency in the component's package.json
  • The feature is actively used in the demo files with imports from 'mathlive'
  • This dependency should be explicitly declared in packages/vue/src/fluent-editor/package.json to ensure proper installation
🔗 Analysis chain

Verify compatibility with the new fluent-editor version

The version bump from ~3.20.0 to ~3.22.0 appears to be related to adding formula support. Let's verify this version contains the required features.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check the changelog or release notes for version 3.22.0 to confirm formula support
# and verify no breaking changes were introduced

# Search for changelog files
fd -t f -e md -e txt -i "changelog|release|history" 

# Check package.json in fluent-editor dependency for peer dependencies
curl -s https://registry.npmjs.org/@opentiny/fluent-editor/3.22.0 | jq '.peerDependencies'

Length of output: 549

Script:

#!/bin/bash
# Let's check the actual usage of mathlive in the formula-related files
rg -A 5 "mathlive" examples/sites/demos/pc/app/fluent-editor/options-formula.vue
rg -A 5 "mathlive" examples/sites/demos/pc/app/fluent-editor/options-formula-composition-api.vue

# Check if there are any formula-related features in the fluent-editor component
rg -l "formula" packages/vue/src/fluent-editor/

# Check the package.json in examples to see how mathlive is declared
cat examples/sites/package.json | jq '.dependencies["mathlive"]'

Length of output: 1436

"@opentiny/vue-common": "workspace:~",
"@opentiny/vue-icon": "workspace:~",
"@opentiny/vue-image-viewer": "workspace:~",
Expand Down
Loading