Skip to content

fix(vue-renderless/fluent-editor): Fix lineheight formatting to use '… #4212

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

Open
cfljue wants to merge 1 commit into
base: dev
Choose a base branch
from
+1 −1
Open

fix(vue-renderless/fluent-editor): Fix lineheight formatting to use '… #4212

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
2 changes: 1 addition & 1 deletion packages/renderless/src/fluent-editor/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ export const redoHandler =
export const lineheightHandler =
({ state, FluentEditor }) =>
(value) => {
state.quill.format('lineheight', value, FluentEditor.sources.USER)
state.quill.format('line-height', value, FluentEditor.sources.USER)
}
Comment on lines 291 to 295

@coderabbitai coderabbitai Bot May 18, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 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=js

Repository: 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:

🌐 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:

🏁 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=js

Repository: 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 -A5

Repository: 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/null

Repository: 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 -i

Repository: 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=js

Repository: 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.

@zzcr zzcr Jun 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@cfljue 机器人有个检视意见，可以看下哈

@coderabbitai coderabbitai Bot Jun 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@zzcr 好的，我这边补充下关注点：当前主要是确认这次改成 line-height 后，是否和编辑器里实际注册的格式名一致。

具体看这 3 处是否统一即可：

  • lineheightHandler 里调用的 format key
  • toolbar/handlers 里使用的 key（当前还是 lineheight）
  • FluentEditor / Parchment 注册的 line-height 格式名

如果底层注册名就是 line-height，那这次修改方向是对的，但最好确认 toolbar 配置链路也能正确命中；如果注册名仍是 lineheight，那这里就需要保持一致。作者更新后我也可以再帮忙复看。

@cfljue cfljue Jul 15, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

这个富文本框的封装链路是Quill、@opentiny/fluent-editor、opentiny，可以看到上两层的格式名是line-height，只有openTiny使用lineheight且导致问题出现（opentiny官网可以看到）。
这里只修改执行层格式，不修改调用或者说定义层，是为了把修改无感更新，避免已有的使用者出错


export const fileHandler =
Expand Down
Loading