Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]Table broken when paste wrapping text #43

Closed
kagol opened this issue Jan 15, 2020 · 4 comments
Closed

[Bug]Table broken when paste wrapping text #43

kagol opened this issue Jan 15, 2020 · 4 comments
Labels
duplicate This issue or pull request already exists

Comments

@kagol
Copy link

kagol commented Jan 15, 2020

Insert wrapping text into the table and the table is broken.

image

@soccerloway
Copy link
Owner

Thanks for your report.
I will fix it later.

@soccerloway
Copy link
Owner

Since quill's official table module doesn't support wrapping text in table cells, so pasting wrapping text in table cells will cause the table broken. To fix it, we must deal with pasting wrapping text in table cells specially.
One way is:Modifying onCapturePaste method of quilljs built-in clipboard module.
Add these code in onCapturePaste method:

const [thisLeaf] = this.quill.getLine(range.index)
    if (thisLeaf && thisLeaf.constructor.name === 'TableCellLine') {
      e.preventDefault();
      const html = e.clipboardData.getData('text/html');
      const text = e.clipboardData.getData('text/plain');
      const files = Array.from(e.clipboardData.files || []);
      if (!html && files.length > 0) {
        this.quill.uploader.upload(range, files);
      } else {
        this.onTableCellPaste(range, { html, text });
      }
      return;
    }

Add onTableCellPaste method to clipboard class:

onTableCellPaste (range, {text, html}) {
    const [line] = this.quill.getLine(range.index)
    const lineFormats = line.formats()
    const formats = this.quill.getFormat(range.index);
    let pastedDelta = this.convert({ text, html }, formats);

    pastedDelta = pastedDelta.reduce((newDelta, op) => {
      if (op.insert && typeof op.insert === 'string') {
        const lines = []
        let insertStr = op.insert
        let start = 0
        for (let i = 0; i < op.insert.length; i++) {
          if (insertStr.charAt(i) === '\n') {
            if (i === 0) {
              lines.push('\n')
            } else {
              lines.push(insertStr.substring(start, i))
              lines.push('\n')
            }
            start = i + 1
          }
        }

        const tailStr = insertStr.substring(start)
        if (tailStr) lines.push(tailStr)

        lines.forEach(text => {
          text === '\n'
          ? newDelta.insert('\n', extend(
              {},
              op.attributes,
              lineFormats
            ))
          : newDelta.insert(text, op.attributes)
        })
      } else {
        newDelta.insert(op.insert, op.attributes)
      }

      return newDelta
    }, new Delta())

    debug.log('onTableCellPaste', pastedDelta, { text, html });
    const delta = new Delta()
      .retain(range.index)
      .delete(range.length)
      .concat(pastedDelta);
    this.quill.updateContents(delta, Quill.sources.USER);
    this.quill.setSelection(
      delta.length() - range.length,
      Quill.sources.SILENT,
    );
    this.quill.scrollIntoView();
  }

@soccerloway
Copy link
Owner

But I haven't found a suitable way to do this. The clipboard module of quilljs does not provide a interface to modify the onCapturePaste method.
Now the question is how to add the special logics to onCapturePaste method of Clipboard.

@soccerloway soccerloway added the duplicate This issue or pull request already exists label Feb 17, 2020
@soccerloway
Copy link
Owner

This issue is discussed in #33 Pasting multiple lines breaks the table.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants