packages/fluent-editor/src/assets/tasklist.scss (5)

1-14: Ensure consistency in style definitions.

The styles for .ql-ui elements are consistent, but consider using variables for repeated values like 16px and #adb0b8 for better maintainability.

@mixin tasklist {
  $ui-size: 16px;
  $ui-color: #adb0b8;

  li.checked > .ql-ui,
  li.unchecked > .ql-ui {
    display: inline-block;
    width: $ui-size;
    height: $ui-size;
    line-height: 14px;
    text-align: right;
    margin-left: -26px;
    margin-right: 10px;
    border: 1px solid $ui-color;
    color: $ui-color;
    cursor: pointer;
  }
}

---

16-22: Consider using variables for colors and transition times.

Using variables for colors and transition times can improve maintainability and readability.

li.checked > .ql-ui {
  border: 1px solid #5e7ce0;
  background: #5e7ce0 url('data:image/svg+xml;base64,...');
  transition: all 0.3s ease-in-out;
}

---

29-39: Use comments in English for better readability.

The comment // 样式重置 is in Chinese. Consider using English comments for better readability by a wider audience.

// Style reset
li.checked,
li.unchecked {
  display: block;
  width: initial;
  height: initial;
  margin-left: initial;
  color: initial;
  border: initial;
  cursor: initial;
}

---

52-65: Ensure consistency in style definitions.

Similar to the tasklist mixin, consider using variables for repeated values like 16px and #adb0b8 for better maintainability.

@mixin tasklistOutside {
  $ui-size: 16px;
  $ui-color: #adb0b8;

  li.checked::before,
  li.unchecked::before {
    display: inline-block;
    width: $ui-size;
    height: $ui-size;
    text-align: right;
    margin-left: -26px;
    border: 1px solid $ui-color;
    content: '';
    position: absolute;
    top: 1px;
    margin-right: 0.7em;
  }
}

---

67-72: Consider using variables for colors.

Using variables for colors can improve maintainability and readability.

li.checked::before {
  border: 1px solid #5e7ce0;
  background: #5e7ce0 url('data:image/svg+xml;base64,...');
}

packages/fluent-editor/src/config.ts (2)

192-203: Improve code readability.

Consider adding comments to explain the logic, especially the conditions and the purpose of the function.

/**
 * Determines the current list value based on the previous list value.
 * @param value - The current value.
 * @param preListValue - The previous list value.
 * @returns The current list value.
 */
export function getListValue(value, preListValue) {
  let curListValue = value;
  if (preListValue && preListValue === value) {
    curListValue = false;
  } else if (value === 'check') {
    if (preListValue === 'checked' || preListValue === 'unchecked') {
      curListValue = false;
    } else {
      curListValue = 'unchecked';
    }
  }
  return curListValue;
}

---

192-203: Ensure edge cases are handled.

The function getListValue does not explicitly handle null or undefined values for value and preListValue. Ensure these edge cases are managed to prevent potential runtime errors. Additionally, add tests to verify the behavior of getListValue in these scenarios.

• Location: packages/fluent-editor/src/config.ts:192-203
• Suggested Changes:
  • Modify getListValue to handle null or undefined values.
  • Add tests to cover these edge cases.

Analysis chain

Ensure edge cases are handled.

The function logic seems correct, but ensure that all edge cases are handled, such as when value or preListValue are null or undefined.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify edge cases for the function `getListValue`.

# Test: Ensure the function handles null and undefined values correctly.
rg --type ts -A 5 $'getListValue'

Length of output: 1854

---

Script:

#!/bin/bash
# Retrieve the complete implementation of the `getListValue` function
ast-grep --lang typescript --pattern $'function getListValue($_, $_) {
  $$$
}' 

# Search for tests related to `getListValue`
rg --type ts 'getListValue'

Length of output: 1382

packages/fluent-editor/src/fluent-editor.ts (2)

57-90: Improve code readability.

Consider adding comments to explain the logic, especially the conditions and the purpose of the method.

list: function (value) {
  const range = this.quill.getSelection();
  const formats = this.quill.getFormat(range);
  const preListValue = Array.isArray(formats.list) ? formats.list[0]?.value : formats.list?.value;
  const curListValue = getListValue(value, preListValue);

  // If the selection range includes table columns, apply list formatting before and after the table.
  const lines = this.quill.getLines(range.index, range.length);
  const tableCols = lines.filter((line) => line.statics.blotName === 'table-col' && !line.prev);
  if (tableCols.length) {
    let start = range.index;
    tableCols.forEach((item, index) => {
      const table = item.domNode.closest('table.quill-better-table');
      const tableBlot = Quill.find(table);
      const tableLength = tableBlot.length();
      const tableStart = this.quill.getIndex(item);
      const tableEnd = tableStart + tableLength;
      const beforeTableRangeLength = tableStart - start;

      // Apply list formatting before the table.
      this.quill.setSelection(start, beforeTableRangeLength, Quill.sources.SILENT);
      this.quill.format('list', curListValue, Quill.sources.USER);
      table.parentNode.classList.remove('quill-better-table-selected');

      // Set the start for the next selection range.
      start = tableEnd;
      if (index === tableCols.length - 1) {
        // Apply list formatting after the table.
        this.quill.setSelection(tableEnd, range.index + range.length - tableEnd);
        this.quill.format('list', curListValue, Quill.sources.USER);
      }
    });
  } else {
    this.quill.format('list', curListValue, Quill.sources.USER);
  }
},

---

57-90: Ensure edge cases are handled.

The method logic seems correct, but ensure that all edge cases are handled, such as when the selection range is null. Currently, the method does not check if range is null before accessing its properties, which could lead to potential errors.

• Add a check for range being null before accessing its properties.

Analysis chain

Ensure edge cases are handled.

The method logic seems correct, but ensure that all edge cases are handled, such as when the selection range is null or when there are no table columns.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify edge cases for the method `list`.

# Test: Ensure the method handles null selection range and no table columns correctly.
rg --type ts -A 5 $'list'

Length of output: 287505

---

Script:

#!/bin/bash
# Description: Verify edge cases for the method `list` within the specified file and lines.

# Test: Ensure the method handles null selection range and no table columns correctly.
rg --type ts --line-number --context 5 --max-count 1 'list: function' packages/fluent-editor/src/fluent-editor.ts

Length of output: 739

---

Script:

#!/bin/bash
# Description: Extract the complete implementation of the `list` method.

# Extract the `list` method implementation from `packages/fluent-editor/src/fluent-editor.ts`
rg --type ts --line-number --context 30 'list: function' packages/fluent-editor/src/fluent-editor.ts

Length of output: 3089

---

Script:

#!/bin/bash
# Description: Extract the complete implementation of the `list` method.

# Extract the `list` method implementation from `packages/fluent-editor/src/fluent-editor.ts`
rg --type ts --line-number --context 50 'list: function' packages/fluent-editor/src/fluent-editor.ts

Length of output: 4449

Configuration used: CodeRabbit UI
Review profile: CHILL

Configuration used: CodeRabbit UI
Review profile: CHILL