I’m working on a plain text editor, functionally very similar to a textarea.
I’d like to force the plain text pasting behaviour in the clipboard handler. As I see there are many handlers I can use, but the main behaviour is hard-coded in input.ts.
I come up with a few solutions. 1 goes into an infinite loop. 2 simply doesn’t paste anything. 3 seems to work well, the moment I press a key, it removes all line breaks and makes it into a single line string.
How would you recommend me properly implementing this functionality?
export const forcePlainTextPaste = new Plugin({
props: {
handlePaste(view, event) {
const text = event.clipboardData?.getData('text/plain')
if (text) {
view.pasteText(text, event)
return true
}
return false
},
},
})
export const forcePlainTextPaste2 = new Plugin({
props: {
transformPastedHTML() {
// Return empty string to force plain text parsing
return ''
},
},
})
export const forcePlainTextPaste3 = new Plugin({
props: {
handlePaste(view, event) {
const text = event.clipboardData?.getData('text/plain')
if (text) {
const tr = view.state.tr.insertText(text)
view.dispatch(tr)
return true
}
return false
},
},
})
export const forcePlainTextPaste = new Plugin({
props: {
handlePaste(view, event) {
const text = event.clipboardData?.getData('text/plain')
if (text) {
view.pasteText(text, event)
return true
}
return false
},
},
})
export const forcePlainTextPaste2 = new Plugin({
props: {
transformPastedHTML() {
// Return empty string to force plain text parsing
return ''
},
},
})
export const forcePlainTextPaste3 = new Plugin({
props: {
handlePaste(view, event) {
const text = event.clipboardData?.getData('text/plain')
if (text) {
const tr = view.state.tr.insertText(text)
view.dispatch(tr)
return true
}
return false
},
},
})
This is my schema:
import { type DOMOutputSpec, type NodeSpec, Schema } from 'prosemirror-model'
const pDOM: DOMOutputSpec = ['p', 0]
const brDOM: DOMOutputSpec = ['br']
export const pmSchema = new Schema({
nodes: {
doc: {
content: 'block+',
} as NodeSpec,
paragraph: {
content: 'inline*',
group: 'block',
parseDOM: [
{
tag: 'p',
preserveWhitespace: 'full',
},
],
toDOM() {
return pDOM
},
} as NodeSpec,
text: {
group: 'inline',
} as NodeSpec,
hard_break: {
inline: true,
group: 'inline',
selectable: false,
parseDOM: [{ tag: 'br' }],
toDOM() {
return brDOM
},
} as NodeSpec,
},
marks: {},
})