Skip to content

onPaste event fired on container instead of editor #64

@RobertFischer

Description

@RobertFischer

I would like to customize the handling when pasting some comment. To this end, I was following the slate-paste-html example, but the last two arguments expected by onPaste are missing (aka: undefined).

In my code, I do this:

import React, { useState } from 'react';
import Editor from 'canner-slate-editor';
import { getEventTransfer } from 'slate-react';
/* ... */
const BeeWellSlateEditor = ({ onChange:incomingOnChange, value:incomingValue=initialValue }) => {
	const [value, setValue] = useState(_.isEmpty(incomingValue) ? initialValue : incomingValue);

	// On change, update the app's React state with the new editor value.
	const onChange = ({ value:newValue }) => {
		setValue(newValue);
		incomingOnChange(newValue);
	};

	// Code derived from:
	//   * https://github.com/ianstormtaylor/slate/blob/master/examples/paste-html/index.js
	const onPaste = (event, editor, next) => {
		const transfer = getEventTransfer(event);
		console.debug(`Saw a paste event in the rich-text editor`, { editor, next, event, transfer });
		return next();
	};

	return (
		<div className="editor">
			<Editor
				value={value}
				onChange={onChange}
				onPaste={onPaste}
			/>
		</div>
	);
};

This successfully calls into my onPaste function. However, the editor and next values are both undefined, and I really need them to be defined in order to do anything interesting.

I started digging into the code, and it doesn't look like onPaste is passed down into the underlying Slate editor: https://github.com/Canner/canner-slate-editor/blob/master/packages/editors/canner-slate-editor/src/index.js#L254-L272 Moreover, it looks like that argument is actually being passed to the container div: https://github.com/Canner/canner-slate-editor/blob/master/packages/editors/canner-slate-editor/src/index.js#L215 -- so it's the container div whose onPaste event is firing, not the Slate editor.

It seems we can't customize plugins as per #63 so what would be the proper way to go about enabling the onPaste handling (without maintaining a private fork of canner-slate-editor)?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions