Location>code7788 >text

The Fluent Editor open source rich text has its first contributor!

Popularity：836 ℃/2024-09-01 09:07:16

Hello, I'm Kagol, personal public:Front-end open source planet。

On August 20, 2024, the Rich Text Fluent Editor, which has been open source for just a week, welcomed its first contributor:zzxming

1 Bug Description

zzxming fixed a hidden bug in the Rich Text Forms module of Fluent Editor:

fix: table module can't save background color #10

Defect description: After setting the cell background color through the table context menu, the cell background color information is missing in the generated delta, resulting in the rich text table cell set by the setContents method losing its background color.

This may be a bit of a mouthful, so zzxming has kindly made a demo to reproduce the problem:

Minimum Reproducible Demo

2 Bug Recovery Steps

Step 1: Right click in the table cell and set a background color for the cell.

Step 2: The corresponding delta obtained by ().

const delta = {  
    "ops": [  
        {  
            "attributes": {  
                "table-col": {  
                    "width": "100"  
                }  
            },  
            "insert": "\n"  
        },  
        {  
            "attributes": {  
                "table-cell-line": {  
                    "rowspan": "1",  
                    "colspan": "1",  
                    "row": "row-xapy",  
                    "cell": "cell-e89w"  
                },  
                "row": "row-xapy",  
                "cell": "cell-e89w",  
                "rowspan": "1",  
                "colspan": "1"  
            },  
            "insert": "\n"  
        }  
    ]  
}

You can see that delta does not carry cell background color information.

Step 3: Backfill the delta into the rich text via the setContents method, with no background color for the cell.

(delta)

3 Solutions

Modify the file:packages/fluent-editor/src/table/formats/

Fixing the problem is broken down into the following steps:

  • Set the cell-bg in delta to the qlbt-cell-line node'sdata-cell-bg attributes
  • Get it from the qlbt-cell-line node.data-cell-bg value, backfill it to the cell background color
  • Setting the DOM node'sdata-cell-bg value, saved in delta

3.1 Setting cell-bg information in delta to DOM nodes

Setting delta information into a DOM node is typically done in the blot'sstatic create Methods are carried out in the method.

static create(value) {
  const node = (value);

  ...

-  CELL_ATTRIBUTES.forEach((attrName) => {
-  (`data-${attrName}`, value[attrName] || CELL_DEFAULT[attrName]);
+  [...CELL_ATTRIBUTES, 'cell-bg'].forEach((attrName) => {
+    const keyValue = value[attrName] || CELL_DEFAULT[attrName];
+    keyValue && (`data-${attrName}`, keyValue);
  });

  ...

  return node;
}

Get the cell-bg information from delta(value) and set it to the data-cell-bg attribute of the DOM node.

The structure of value:

{
  rowspan: '1',
  colspan: '1',
  row: 'row-xapy',
  cell: 'cell-e89w',
  cell-bg: '#ffff00'
}

3.2 Backfill cell-bg to cell background color

zzxming Not only did my classmate fix the bug, but he also did a little refactoring, pumping the ability to set a cell's background color into a single functionsetCellBgand added detailed notes, kudos 👍

/** this method is for TableCellLine to change cell background color 
 *  if use `format('cell-bg', value)` will loop trigger 
 *   ->  ->  ...
 */
setCellBg(value?: string) {
  if (value) {
     = value
  } else {
     = 'initial'
  }
}

Call this function in the optimize method of the TableCellLine class to set the cell-bg color in the delta to the table cell.

3.3 Saving cell-bg information in delta

Saves the information from the DOM into a delta, usually in the blot'sstatic format Methods are carried out in the method.

The reduceFormats function is called in the static format method of the TableCellLine class, passing the cell-bg information to the function.

static formats(domNode) {
  const formats = {};
  if (formats['list']) {
    formats['list'] = (0);
  }
-  return reduceFormats(domNode, formats);
+  return reduceFormats(domNode, formats, ['cell-bg']);
}

Get the data-cell-bg in the DOM in reduceFormats and set it to the delta data.

- function reduceFormats(domNode, formats) {
-   return CELL_ATTRIBUTES.concat(CELL_IDENTITY_KEYS).reduce((tableFormats, attribute) => {
+ function reduceFormats(domNode:HTMLElement, formats:Record<string, any>, extraFormat: string[] = []) {
+   return [...CELL_ATTRIBUTES, ...CELL_IDENTITY_KEYS, ...extraFormat].reduce((tableFormats, attribute) => {
    if ((`data-${attribute}`)) {
      tableFormats[attribute] = (`data-${attribute}`) || undefined;
    }
    return tableFormats;
  }, formats);
}

The issue has been resolved and can be verified at the following link:

  • /edit/vitejs-vite-cakzv5?file=src%

For details, see the PRs submitted by fellow student zzxming:

fix: table module can't save background color #10

3.4 Optimization points

There's actually an optimization point here (PR 👏 welcome):

Currently, the cell-bg passed in by zzxming in the static create and reduceFormats methods are directly added, which can actually be put into the CELL_ATTRIBUTES constant array to make reasonable use of the existing code 😋.

- export const CELL_ATTRIBUTES = ['rowspan', 'colspan'];
+ export const CELL_ATTRIBUTES = ['rowspan', 'colspan', 'cell-bg'];

(express) thankszzxming Classmate's contribution to the Fluent Editor, now released!v3.18.3 version, welcome friends to useFluent EditorIf you are interested, you are welcome to participate in the co-construction.

Past article recommendations:

  • Fluent Editor: A powerful out-of-the-box rich text editor based on Quill 2.0!
  • Back on the Iron Throne! Quill 2.0 is finally released after 5 years!
  • Quill Series - Part 1: Quill Basic Usage and Configuration
  • Using Quill Series 2: Achieving Full Control of Editor Content with the Quill API
  • Principles of Quill Series 1: Modularization Mechanism of Quill, a Modern Rich Text Editor
  • Principles of Quill Series 2: Content Rendering Mechanism of Quill, a Modern Rich Text Editor
  • Quill in Depth Series - Practice Part 1: How to Insert Dragons into the Editor?
  • Quill in Depth Series - Practice Part 2: Putting the whole Snake game into the editor!
  • Quill Series Selection: Practicing with the Quill Rich Text Editor

Contact Us

GitHub：/opentiny/tiny-vue(Welcome Star ⭐)

Official website:/tiny-vue

Station B:/15284299

Personal Blog:/blogs

Small assistant WeChat: opentiny-official

Public: OpenTiny

<Previous Next>