plate icon indicating copy to clipboard operation
plate copied to clipboard

Can't copy a picture alone

Open YaoKaiLun opened this issue 4 years ago • 2 comments

Description

When I select a picture by clicking then pressing sortkey ctrl + c and ctrl + v, the picture doesn't be pasted.

Recording

image

SandBox https://slate-plugins.udecode.io/docs/playground

YaoKaiLun avatar Jul 09 '21 01:07 YaoKaiLun

I think this happens because clicking on the image is setting the editor selection but not the window selection. So if in the ImageElement.tsx you do something like:

	const handleOnMouseDown = (event) => {
		const selection = window.getSelection();    // Save the selection.
		const range = document.createRange();
		range.selectNodeContents(ReactEditor.toDOMNode(editor,element)); // element being the ImageElement
		selection.removeAllRanges();          // Remove all ranges from the selection.
		selection.addRange(range);            // Add the new range.
	};

the browser would know which element to copy.

PibeG avatar Jul 12 '21 10:07 PibeG

@PibeG I haven't tried that, finally, my solution like below

const getElementWrapRange = (editor, element) => {
  let elementRange;
  try {
    const elementPath = ReactEditor.findPath(editor, element);
    const elementPreviousPath = Path.previous(elementPath);
    const elementNextPath = Path.next(elementPath);
    let elementPreviousPoint = { path: elementPreviousPath, offset: 0 };
    let elementNextPoint = { path: elementNextPath, offset: 0 }
    const node = Node.get(editor, elementPreviousPath);

    if (node.text) {
      elementPreviousPoint.offset = node.text.length;
    }

    elementRange = {
      anchor: elementPreviousPoint,
      focus: elementNextPoint,
    };
    return elementRange;
  } catch (error) {
    return null;
  }
};

const wrapRange = getElementWrapRange(editor, element);
if (wrapRange) {
  Transforms.select(editor, wrapRange);
}

YaoKaiLun avatar Jul 12 '21 15:07 YaoKaiLun