零宽度字符的妙用：解决prosemirror-tables单元格文字背景色设置不生效的问题

前端

2023-11-23 16:13:05

前言

最近，我在做富文本组件prosemirror-tables方面的优化工作。在对多个单元格设置样式（比如加粗、颜色等等）时，我发现了一个奇怪的问题：只有已经包含内容的单元格才会生效，而没有内容的单元格却不会生效。

经过一番调查，我找到了问题的根源：prosemirror-tables在处理单元格样式时，会检查单元格是否包含内容。如果没有内容，样式就不会被应用。

解决办法

为了解决这个问题，我想到了一个巧妙的方法：使用零宽度字符。

零宽度字符是一种特殊的字符，它不会在屏幕上显示，但它却占据了一个字符的位置。我们可以利用这个特性，在没有内容的单元格中插入一个零宽度字符，这样prosemirror-tables就会认为单元格中有内容，从而正确地应用样式。

具体步骤

首先，我们需要在prosemirror-tables中添加一个插件。这个插件可以用来向单元格中插入零宽度字符。
然后，我们需要修改prosemirror-tables的样式。在样式表中，我们需要将单元格的背景色设置为透明。
最后，我们需要在单元格中插入零宽度字符。我们可以使用JavaScript代码来实现这一点。

示例代码

// 1. 添加插件

const zeroWidthCharacterPlugin = new Plugin({
  props: {
    handleKeyDown(view, event) {
      if (event.key === "Enter") {
        const {state} = view;
        const {selection} = state;
        const {from, to} = selection;
        const cell = state.doc.nodeAt(from);

        if (cell && cell.type.name === "table_cell") {
          const isEmpty = cell.content.childCount === 0;

          if (isEmpty) {
            view.dispatch(
              state.tr
                .insertText("\u200B", from, from)
                .scrollIntoView()
            );
          }
        }
      }
    },
  },
});

// 2. 修改样式

.table-cell {
  background-color: transparent !important;
}

// 3. 插入零宽度字符

const insertZeroWidthCharacter = (view) => {
  const {state} = view;
  const {selection} = state;
  const {from, to} = selection;
  const cell = state.doc.nodeAt(from);

  if (cell && cell.type.name === "table_cell") {
    const isEmpty = cell.content.childCount === 0;

    if (isEmpty) {
      view.dispatch(
        state.tr
          .insertText("\u200B", from, from)
          .scrollIntoView()
      );
    }
  }
};

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    insertZeroWidthCharacter(editorView);
  }
});