Comments (4)
Yes, pasting in table should be processed specially.
In my product, I forked quilljs and processed this in clipboard module(onCapturePaste).
But there, I can not find a proper way to process.
from quill-better-table.
I agree it's quite tricky. What could work is adding a paste
eventListener where you access the text\html
and find all instances of <p>
and replace them with something else. Maybe with the help of a clipboard matcher we could properly turn each line into cell divs.
How does this suggestion sound, and please correct me if I'm wrong:
Find all instances of <p>
and </p>
in text/html
data of the paste
event, replace it with a tag like (for example) <celldiv>
.
Then by using a matcher you let the clipboard itself process it for you into the element you want. Here's the documentation about matchers: https://quilljs.com/docs/modules/clipboard/#addmatcher
from quill-better-table.
As far as I know, I think the matchers is used to handle that how quill convert DOM element to content, they are always some pure functions, it may not be suitable for this.
I have already fixed this issue in my company project. As you said, adding a paste
eventListener, processing pasted delta
if current selection is an instance of TableCellLine
.
Here is the code:
onCapturePaste(e) {
if (e.defaultPrevented || !this.quill.isEnabled()) return;
const range = this.quill.getSelection(true);
// Process pasting in table-cell-line before
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;
}
// ............bypass quill origin code
}
onTableCellPaste
is the function processing default converted delta:
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.
The delta of multiple lines is merged in only one insertion:
{
insert: first line \n second line \n third line,
attributes: { foo: foo }
}
It caused the problem.
Back to quill-better-table
module, I have not found a proper way to fix it.
If I add a new paste
eventListener, I need to make sure that the new listener must execute before the old one.
Maybe there is a better way to fix it? I will try adding a new paste
eventListener first, if you have some other better way, help me please~:)
from quill-better-table.
Related Issues (20)
- 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?
- Error: [Parchment] Unable to create table blot
- Not working on quill v2.0.0-beta.0
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.