fix(vue-renderless/fluent-editor): Fix lineheight formatting to use '…#4212
fix(vue-renderless/fluent-editor): Fix lineheight formatting to use '…#4212cfljue wants to merge 1 commit into
Conversation
…line-height' Fix the issue where the line height setting for the rich text editor does not take effect
WalkthroughSingle-line change: the ChangesLine-height formatting key update
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/renderless/src/fluent-editor/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/renderless/src/fluent-editor/index.ts`:
- Around line 291-295: The handler lineheightHandler currently calls
state.quill.format('line-height', ...) which doesn't match the toolbar format
key (lineheight) used in the toolbar config; update the format key so they match
— either change the format call in lineheightHandler to
state.quill.format('lineheight', value, FluentEditor.sources.USER) or change the
toolbar config to use 'line-height' instead of lineheight; after making the
change, confirm the chosen name matches the Parchment Attributor registered on
the FluentEditor instance so the format is recognized.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 09a05962-92f5-40bf-bd58-e9c1525f91e3
📒 Files selected for processing (1)
packages/renderless/src/fluent-editor/index.ts
| export const lineheightHandler = | ||
| ({ state, FluentEditor }) => | ||
| (value) => { | ||
| state.quill.format('lineheight', value, FluentEditor.sources.USER) | ||
| state.quill.format('line-height', value, FluentEditor.sources.USER) | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for Quill format registrations and line-height/lineheight usage
echo "=== Searching for line-height or lineheight format registrations ==="
rg -n -C3 -P "(register|format|Quill\.(import|register)).*(line-?height|lineHeight)" --type=ts --type=js
echo -e "\n=== Searching for toolbar configuration with lineheight ==="
rg -n -C2 "lineheight.*:" --type=ts --type=js
echo -e "\n=== Searching for Quill format calls with line-height ==="
rg -n -P "\.format\s*\(\s*['\"]line-?height" --type=ts --type=js
echo -e "\n=== Searching for CSS lineHeight or line-height in Quill modules ==="
rg -n -C2 "lineHeight|line-height" --glob "**/fluent-editor/**" --type=ts --type=jsRepository: opentiny/tiny-vue
Length of output: 6246
🌐 Web query:
Quill.js line-height format registration and usage
💡 Result:
Quill.js does not include a built-in line-height format, so you must implement it using Parchment, Quill's document model [1][2]. To add this functionality, you need to create a custom Attributor and register it with Quill [3][2]. Implementation Steps 1. Define the Attributor: Use Parchment's StyleAttributor to map a format name (e.g., 'line-height') to the CSS 'line-height' property [3][2]. const Parchment = Quill.import('parchment'); const LineHeightStyle = new Parchment.Attributor.Style('line-height', 'line-height', { scope: Parchment.Scope.INLINE, whitelist: ['1.0', '1.2', '1.5', '1.6', '1.8', '2.0'] // Define allowed values }); 2. Register the Format: Register the new attributor with Quill so it can be recognized in the editor [1][2]. Quill.register(LineHeightStyle, true); 3. Configure the Toolbar: To allow users to select line-height, add it to your toolbar configuration [3][4]. const quill = new Quill('#editor', { modules: { toolbar: [ [{ 'line-height': ['1.0', '1.2', '1.5', '1.6', '1.8', '2.0'] }] ] } }); Usage Notes - Scope: Line-height is typically applied as an inline format [3][2]. Ensure your CSS handles the resulting span elements correctly, as applying line-height to inline elements may require setting display: inline-block or adjusting parent block styles to avoid layout issues [5][4]. - Customization: You can extend the whitelist to include any valid CSS line-height values [3][2]. If you need to handle specific DOM-to-Delta conversions (e.g., converting style strings to numbers), you can extend the Attributor class and override the value method [3]. - Toolbar Integration: If using a custom toolbar, ensure you have a handler that triggers the format command using the Quill API, such as quill.format('line-height', value) [4][6].
Citations:
- 1: https://quilljs.com/docs/customization
- 2: How to customize the row height in quill 2.0.0-dev3 slab/quill#3621
- 3: Line Spacing slab/quill#197
- 4: https://medium.com/@genyadstph/react-quill-add-line-height-to-custom-toolbar-91a8717394c8
- 5: https://stackoverflow.com/questions/69854002/quill-js-set-line-height-on-quills-size-classes-on-span-elements-without-inli
- 6: https://stackoverflow.com/questions/51125342/implement-custom-editor-for-quill-blot
🌐 Web query:
tiny-vue fluent-editor Quill format registration line-height or lineheight custom Parchment
💡 Result:
To implement custom line-height support in a Quill-based editor like Fluent Editor, you must define a custom Parchment Attributor and register it with the Quill instance [1][2]. 1. Define the Attributor: Create a custom class extending Parchment.StyleAttributor to manage the line-height style [1]. This allows the editor to apply the CSS line-height property to inline elements [1]. import { Parchment } from 'fluent-editor'; // or 'quill' const LineHeightStyle = new Parchment.Attributor.Style('line-height', 'line-height', { scope: Parchment.Scope.INLINE, whitelist: ['1', '1.5', '2', '2.5'] // Define your allowed values }); 2. Register the Format: Register this attributor with your Quill/Fluent Editor instance so the editor recognizes the new format [1][2]. import { Quill } from 'fluent-editor'; Quill.register(LineHeightStyle, true); 3. Integration: Once registered, you can add a custom dropdown or button to your toolbar that triggers the format command [3]. When the user selects a value, use the editor API to apply it: quill.format('line-height', '1.5'); Note: Fluent Editor (part of OpenTiny) has already implemented a LineHeightStyle attributor in its codebase [1]. If you are using Fluent Editor, check if you can leverage the existing implementation in packages/fluent-editor/src/attributors/line-height.ts rather than creating a new one [1]. If you are using standard Quill, the steps above are the standard approach for extending the document model [2]. Ensure your CSS handles the applied styles correctly, as Quill often wraps content in spans that may require display: inline-block for line-height to take effect on specific elements [4][3].
Citations:
- 1: fix: word paste missing formats tiny-editor#67
- 2: https://quilljs.com/docs/customization
- 3: https://medium.com/@genyadstph/react-quill-add-line-height-to-custom-toolbar-91a8717394c8
- 4: https://stackoverflow.com/questions/69854002/quill-js-set-line-height-on-quills-size-classes-on-span-elements-without-inli
🏁 Script executed:
# Search for Quill registration, import, or module setup for line-height/lineheight
rg -n "Quill\.(import|register|modules)" packages/renderless/src/fluent-editor/ --type=ts --type=js
rg -n "Parchment|register.*line" packages/renderless/src/fluent-editor/ --type=ts --type=js
rg -n "modules.*:.*\{" packages/renderless/src/fluent-editor/ -A 10 --type=ts --type=jsRepository: opentiny/tiny-vue
Length of output: 965
🏁 Script executed:
# Search for attributor definitions and registrations in fluent-editor
find packages/renderless/src/fluent-editor -name "*.ts" -o -name "*.js" | head -20
rg -n "attributor|Attributor|register" packages/renderless/src/fluent-editor --type=ts --type=js -B2 -A2
rg -n "line.*height|lineheight" packages/renderless/src/fluent-editor/index.ts --type=ts -B5 -A5Repository: opentiny/tiny-vue
Length of output: 1777
🏁 Script executed:
# Search for where FluentEditor is imported and initialized - might show attributor registration
rg -n "FluentEditor" packages/renderless/src/fluent-editor/index.ts -B3 -A3
# Also look for any Quill import or initialization that might register attributors
rg -n "import.*Quill|new Quill|Quill\.register" packages/renderless/src/fluent-editor -A5
# Check if there's an attributor file mentioned in web search result
find packages -name "*attributor*" -o -name "*line-height*" 2>/dev/nullRepository: opentiny/tiny-vue
Length of output: 5009
🏁 Script executed:
# Search for where FluentEditor is imported from
rg -n "import.*FluentEditor|from.*fluent-editor" packages/renderless/src/fluent-editor/ --type=ts --type=js
# Check the vue.ts file to see how FluentEditor is passed in
head -50 packages/renderless/src/fluent-editor/vue.ts
# Search for any Quill format registration or module setup
rg -n "\.register\(|register.*format|Quill\.import" packages/ --type=ts --type=js -iRepository: opentiny/tiny-vue
Length of output: 3687
🏁 Script executed:
# Look for FluentEditor module definition - it's passed as a parameter
rg -n "class FluentEditor|new FluentEditor\|function FluentEditor" packages/renderless/src/fluent-editor --type=ts --type=js
# Check the options file more thoroughly for toolbar format definitions
cat packages/renderless/src/fluent-editor/options.ts | head -80
# Search for lineheight (no hyphen) format calls in the entire codebase
rg -n "format\('lineheight'|\.lineheight" packages/ --type=ts --type=jsRepository: opentiny/tiny-vue
Length of output: 1900
🏁 Script executed:
# Search for any Quill format registration for lineheight or line-height in the fluent-editor package
rg -n "register.*format\|register.*lineheight\|register.*line-height" packages/renderless/src/fluent-editor -A5 -B5 --type=ts --type=js
# Check if there's a custom Quill initialization or module setup
rg -n "FluentEditor.import\|FluentEditor.register" packages/renderless/src/fluent-editor --type=ts --type=js -B2 -A2
# Look at git history or comments around the change
cat packages/renderless/src/fluent-editor/index.ts | sed -n '285,305p'Repository: opentiny/tiny-vue
Length of output: 485
Fix the format key mismatch between toolbar configuration and format call.
The toolbar configuration (line 69) defines the format as lineheight (no hyphen): { lineheight: lineHeightConfig }, but the handler at line 294 applies 'line-height' (with hyphen): state.quill.format('line-height', ...). In Quill, these keys must match exactly. Either:
- Change line 294 to use
'lineheight'to match the toolbar config, or - Update the toolbar config at line 69 to use
{ 'line-height': lineHeightConfig }to match the format call
Additionally, verify that the format name aligns with how the line-height Parchment Attributor is registered in the FluentEditor instance.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/renderless/src/fluent-editor/index.ts` around lines 291 - 295, The
handler lineheightHandler currently calls state.quill.format('line-height', ...)
which doesn't match the toolbar format key (lineheight) used in the toolbar
config; update the format key so they match — either change the format call in
lineheightHandler to state.quill.format('lineheight', value,
FluentEditor.sources.USER) or change the toolbar config to use 'line-height'
instead of lineheight; after making the change, confirm the chosen name matches
the Parchment Attributor registered on the FluentEditor instance so the format
is recognized.
There was a problem hiding this comment.
@zzcr 好的，我这边补充下关注点：当前主要是确认这次改成 line-height 后，是否和编辑器里实际注册的格式名一致。
具体看这 3 处是否统一即可：
lineheightHandler里调用的 format key- toolbar/handlers 里使用的 key（当前还是
lineheight） FluentEditor/ Parchment 注册的 line-height 格式名
如果底层注册名就是 line-height，那这次修改方向是对的，但最好确认 toolbar 配置链路也能正确命中；如果注册名仍是 lineheight，那这里就需要保持一致。作者更新后我也可以再帮忙复看。
2 participants
Fix the issue where the line height setting for the rich text editor does not take effect
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: 4211
What is the new behavior?
Fix the bug
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit