提示编辑器，如何粘贴多个空行？

Question

使用基本版本的Tiptap编辑器：

<template>
  <div v-if="editor">
    <editor-content :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
      ],
      content: `
        <p>The Paragraph extension is not required, but it’s very likely you want to use it. It’s needed to write paragraphs of text. </p>
      `,
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

(可在https://tiptap.dev/api/nodes/paragraph上进行测试)

我注意到，当使用多行粘贴文本时，例如：

Hello


This is a test with two break lines at the above and three after this:



Thanks!

其结果是：

​

​

<p>Hello</p>
<p>This is a test with two break lines at the above and three after this:</p>
<p>Thanks!</p>

在这种情况下，所有的“多重”断线都被删除了！

是否有办法保存它们，这意味着一旦执行了粘贴，内容应该是：

<p>Hello</p>
<p></p>
<p></p>
<p>This is a test with two break lines at the above and three after this:</p>
<p></p>
<p></p>
<p></p>
<p>Thanks!</p>

(我也可以使用<p><br /></p>而不是<p></p>来启用Hardbreak扩展，但在这两种情况下，它都不起作用)。

Answer 1

我认为您可以使用粘贴规则扩展。您可以使用regex查找空行，并用<br>替换它们。下面是来自TipTap文档的示例：

// Check pasted content for the ~single tilde~ markdown syntax
import Strike from '@tiptap/extension-strike'
import { markPasteRule } from '@tiptap/core'

// Default:
// const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/g

// New:
const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/g

const CustomStrike = Strike.extend({
  addPasteRules() {
    return [
      markPasteRule({
        find: pasteRegex,
        type: this.type,
      }),
    ]
  },
})

或者，您也可以尝试使用禁用粘贴规则来查看这是否会解决您的问题。

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
  enablePasteRules: false,
})

Answer 2

我通过在龙头上开一张票找到了解决方案。

事实证明，这是不处理多个断线的Prosemirror的错，但是来自蒂普的相关票证上的人提出了一个很好的建议：

import {Slice, Fragment, Node} from 'prosemirror-model'

function clipboardTextParser(text, context, plain)
{
    const blocks = text.replace().split(/(?:\r\n?|\n)/);
    const nodes = [];

    blocks.forEach(line => {
        let nodeJson = {type: "paragraph"};
        if (line.length > 0) {
            nodeJson.content = [{type: "text", text: line}]
        }
        let node = Node.fromJSON(context.doc.type.schema, nodeJson);
        nodes.push(node);
    });

    const fragment = Fragment.fromArray(nodes);
    return Slice.maxOpen(fragment);
}

new Editor({
    editorProps: {
        clipboardTextParser: clipboardTextParser,
    },
})