Comments (4)
Thanks for your report.
I will fix it later.
from quill-better-table.
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();
}
from quill-better-table.
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.
from quill-better-table.
This issue is discussed in #33 Pasting multiple lines breaks the table.
from quill-better-table.
Related Issues (20)
- Context menu does not properly work in Blazor HOT 2
- Existence of arrow functions
- some use of this module of vue
- Typescript Support HOT 1
- Cannot read property 'width' of undefined HOT 2
- How to correctly import quill-better-table in custom quill bundle? HOT 1
- Right click outside the table throw exception: Cannot read properties of undefined (reading 'getBoundingClientRect') HOT 2
- Selection tool not aligned when horizontal scrollbar is present
- can't input list item.
- Uncaught TypeError: Cannot read properties of undefined (reading 'next') HOT 1
- 如何修改单元格的width HOT 1
- Unexpected token ':' in Angular Project HOT 2
- How can I put the "merged function" into the toolbar?
- lower performance when paste a large doc which include many tables
- 怎样将table的Delta转换成html
- Modify column to specified width
- <p>` tags are adding instead of table. HOT 3
- TypeError: Cannot read properties of null (reading 'descendants')
- Cannot read properties of undefined (reading 'pop') HOT 5
- Are there plans to fix bugs, add features for this module?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quill-better-table.