search

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
10.12k stars 621 forks source link

Contenteditable issues #155

Open iprasadg opened 4 years ago

iprasadg commented 4 years ago

Environments

Description

There are issues with contenteditable set to true:

1) Contenteditable is not working on certain tags e.g Heading tags (H1, H2 etc), Div tag. Also on left click it is not editable but on right click it is working but as we know right click is a strange behavior as user always will always try to edit the content with left click. 

**Note: It is working fine for SPAN tag for both clicks. Comment out span tag and comment h1 tag from demo to see the output**

2) Contenteditable is not working for multiple elements inside Groupable.

Demo for issue 1

daybrush commented 4 years ago

@iprasadg

  1. If you want to use it in h1 put the tagName you want to allow.
  onDragStart({ inputEvent, target, stop }) {
    this.moveable.updateRect();
    if (inputEvent.target.nodeName === "SPAN") {
      stop();
    }
  }
  1. DragArea (true) and groupable do not support Contenteditable. Sorry.
iprasadg commented 4 years ago

Ooops ! Very sorry for the first issue. It was a mistake on my end, thanks for reply.

For 2nd issue regarding Contenteditable with groupable, for now I solved this issue doing toggling of some style for element having class 'moveable-area'.

It is working as expected, but we should not rely on this solution. There should be input parameter to moveable which will tell moveable, whether to edit inside group or not.

Thanks