TipTap等WYSIWYG编辑器如何保留Google Docs粘贴的缩进制表符

这个问题不存在技术上的无解限制，缩进丢失的核心原因是：Google Docs的首行自动缩进属于段落级的样式属性，不会以制表符、空格这类实体文本字符存储在内容中，默认复制时的纯文本载荷不会携带这类样式信息，而TipTap默认的粘贴解析逻辑没有针对Google Docs的剪贴板HTML内容做专属规则适配，才会出现缩进效果丢失的问题。

• 拦截粘贴流程优先解析HTML格式剪贴板载荷
  不要直接使用剪贴板中的纯文本内容做解析，在TipTap的paste事件钩子或者内置的transformPastedHTML配置项中，优先读取text/html类型的剪贴板内容。Google Docs复制出的HTML内容会携带固定标识docs-internal-guid，可以用这个特征判断内容来源：

  new Editor({
    // 其他基础配置
    transformPastedHTML(html) {
      // 识别Google Docs来源内容
      if (html.includes('id="docs-internal-guid-')) {
        const domParser = new DOMParser()
        const contentDoc = domParser.parseFromString(html, 'text/html')
        // 遍历所有段落节点提取缩进规则
        contentDoc.querySelectorAll('p').forEach(para => {
          const textIndent = para.style.textIndent || para.style.paddingLeft
          // 识别到有效缩进值时，保留为段落的内联样式或自定义属性
          if (textIndent && parseFloat(textIndent) > 0) {
            para.style.textIndent = textIndent
            para.setAttribute('data-paragraph-indent', parseFloat(textIndent))
          }
        })
        return contentDoc.body.innerHTML
      }
      return html
    }
  })
  

  注意：Google Docs复制内容中的class名是动态生成的，不要依赖类名做判断，优先识别固定的来源标识和内联样式属性。
• 补全段落缩进继承逻辑
  Google Docs中按回车换行自动补缩进的逻辑，本质是段落属性的继承，不是逐段插入缩进字符。解析到某一段存在首行缩进属性后，若后续相邻段落没有显式的缩进取消标记，自动给后续段落匹配相同的缩进值，即可还原和Google Docs一致的换行自动缩进效果。
• RTF格式兜底补全
  特殊场景下如果HTML载荷的样式信息不全，可以读取剪贴板中text/rtf格式的内容，RTF规范中用\fi控制符标记首行缩进值，解析该值可以作为缩进判断的兜底依据，信息完整度远高于纯文本载荷。

• 不要用插入制表符、全角空格的方式模拟首行缩进，这类实体字符在不同字体、不同编辑器下的显示宽度不固定，还原度极差，优先使用CSS的text-indent属性实现，和Google Docs的原生实现逻辑完全一致。
• 清洗Google Docs粘贴内容的冗余属性时，注意保留和排版相关的text-indent、text-align、line-height等内联样式，不要把所有非标准属性全部过滤掉。

内容的提问来源于stack exchange，提问作者holycamolie