Bug 12250 - No support for "control selections" to select or drag images in editable content (affects TinyMCE, FCKEditor and Vox)
: No support for "control selections" to select or drag images in editable cont...
Status: ASSIGNED
: WebKit
HTML Editing
: 420+
: Macintosh Mac OS X 10.4
: P2 Normal
Assigned To:
:
: InRadar
: 79380 94077
: 6627 7154 9915 10165 15322
  Show dependency treegraph
 
Reported: 2007-01-13 03:35 PST by
Modified: 2012-10-16 06:41 PST (History)


Attachments
first cut (26.48 KB, patch)
2008-03-26 01:06 PST, Justin Garcia
no flags Review Patch | Details | Formatted Diff | Diff
updated patch (28.47 KB, patch)
2008-03-27 00:59 PST, Justin Garcia
no flags Review Patch | Details | Formatted Diff | Diff
Shadow DOM-based approach - WIP prototype 1 (14.37 KB, patch)
2012-08-13 17:44 PST, Ryosuke Niwa
no flags Review Patch | Details | Formatted Diff | Diff
Screenshot (28.64 KB, image/png)
2012-08-13 17:48 PST, Ryosuke Niwa
no flags Details
Screenshot 2 - the image has disappered (4.35 KB, image/png)
2012-08-13 17:53 PST, Ryosuke Niwa
no flags Details
Shadow DOM-based approach - Delete old shadow roots (15.01 KB, patch)
2012-08-13 18:29 PST, Ryosuke Niwa
no flags Review Patch | Details | Formatted Diff | Diff
Shadow DOM-based approach - prototype 2; just adds resizing corners (16.39 KB, patch)
2012-08-13 19:51 PST, Ryosuke Niwa
no flags Review Patch | Details | Formatted Diff | Diff
Shadow DOM based approach - prototype 3 (kinda works) (14.85 KB, patch)
2012-08-15 01:17 PST, Ryosuke Niwa
no flags Review Patch | Details | Formatted Diff | Diff
work in progress 5 (17.31 KB, patch)
2012-08-16 19:26 PST, Ryosuke Niwa
no flags Review Patch | Details | Formatted Diff | Diff
work in progress 6 (17.64 KB, patch)
2012-08-17 01:21 PST, Ryosuke Niwa
webkit.review.bot: commit‑queue-
Review Patch | Details | Formatted Diff | Diff


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2007-01-13 03:35:06 PST
In an editable document, there are no ways to select objects, like images, form fields and tables. Also, not being able to select them, it is not possible to drag them inside the editor contents and no context menu is also available for the specific objects.
------- Comment #1 From 2007-02-21 19:07:18 PST -------
Retitling.  It is possible to drag and drop any element in an editable region afaik, but doing so is tricky for some elements, like form fields and tables.  The issue here is really that you can't create control selections around single elements.  Control selections appear in FF and IE when the user clicks on certain elements, like tables, form fields, and images.  The control selection allows the user to easily resize and drag these elements.  We don't yet support this type of selection.
------- Comment #2 From 2007-02-21 19:09:59 PST -------
*** Bug 7154 has been marked as a duplicate of this bug. ***
------- Comment #3 From 2007-02-27 18:26:17 PST -------
Re-titling as this effects all the editors
------- Comment #4 From 2007-03-10 05:40:48 PST -------
I would say that for now it is not important to resize objects, showing the resize handlers. The most important and basic feature is the simple possibility of selecting them. So, a user clicks on it and it gets the selection.

This is what Opera proposes today. They only show a simple border in objects when clicking them. No resize, but it is ok for now.

By not being able to select an image, there is no way to change its properties, which is a very basic feature of a text editor like FCKeditor.
------- Comment #5 From 2008-01-18 11:21:23 PST -------
This is a problem for our project since the users want to be able to resize images using TinyMCE and for now we're telling them to use Firefox or Camino and they're not happy about that.  They want to use Safari and they're blaming us for it.
------- Comment #6 From 2008-01-19 12:01:47 PST -------
<rdar://problem/5696409>
------- Comment #7 From 2008-03-25 16:08:05 PST -------
I'm working on this.
------- Comment #8 From 2008-03-26 01:06:11 PST -------
Created an attachment (id=20078) [details]
first cut
------- Comment #9 From 2008-03-26 15:43:57 PST -------
This is really good news. I hope that you guys implement the ability to do the image selection from JS as well. This is currently only possible in IE with their control range type. But it should be possible to check when the focusNode and anchorNode of the Selection object is set to an image element it selects it with some dotted border basically the same thing as selecting it with the mouse. This is not very important but more of a nice to have since it will then be better than most other browsers out there.
------- Comment #10 From 2008-03-27 00:59:23 PST -------
Created an attachment (id=20119) [details]
updated patch
------- Comment #11 From 2008-03-27 01:00:54 PST -------
> I hope that you guys implement the ability to do the image selection from JS as 
> well. This is currently only possible in IE with their control range type.

Probably not in the first pass, but I definitely want to do this eventually.
------- Comment #12 From 2008-11-04 16:20:50 PST -------
Justin - love to see this patch progressed and shipped with Safari 3 or 4 as it is one of the few things that causes major usability reduction in Safari with the SilverStripe open source CMS (http://www.silverstripe.com)

It affects us in this way: http://open.silverstripe.com/ticket/1687
------- Comment #13 From 2008-11-06 05:53:16 PST -------
This seems to still be an issue for safari as far as I can see - at least with PC-safari combination.  
------- Comment #14 From 2009-03-15 06:57:24 PST -------
Using Webkit nightly ("41443") version "530.1+", OS X 10.5.6.

When using FCKEditor version 2.6.4 (21629), and inserting an image in the textarea, I am unable to afterward select the image object and change its properties.

I have not tried with Safari 4 beta, but given I'm running a recent nightly, I doubt anything has changed.

I notice that this bug was opened 26 months ago, and a patch has been attached, yet the bug still has a status of "NEW". This is discouraging.

I look forward to a resolution, either with WebKit or with FCKEditor.
------- Comment #15 From 2009-05-14 00:10:06 PST -------
Looking forward to updates on this case. I had to write special code for Safari to be able to select an image and to display handles around it's edges, enabling users to resize the image.
It solves the problem for now, but is it the right way to go?
Using Safari 4 beta 528.16 on windows.
------- Comment #16 From 2009-09-11 10:41:18 PST -------
This bug seems to have an unfortunate mismatch between title and content. Is it about control selections, or just about being able to single-click to select an image? The latter has been also reported as bug 29125, and I'm not sure if it should be marked as a duplicate.
------- Comment #17 From 2009-11-03 15:58:23 PST -------
This 'bug' (missing feature) is the main reason why all my clients are advised to use Firefox instead of Safari / Chrome.
Any updates on this subject would be very welcome.
------- Comment #18 From 2009-12-02 20:56:26 PST -------
Is anyone still working on this? Is there any plan to fix it?

I am in the same position as many others. I would love to recommend Chrome to people (heck I would like to use it myself), but this one lacking feature stops me from doing so.

This even breaks google docs when you use chrome.

Looking forward to an update.
------- Comment #19 From 2010-05-06 04:15:47 PST -------
Chrome 5 and still no way of resizing objects. I would be really interested in having this feature added.
Any update on this would be very very welcome.
------- Comment #20 From 2011-01-21 10:13:21 PST -------
I'm not currently working on this.
------- Comment #21 From 2011-02-25 19:01:37 PST -------
Bump!
This feature would be very nice.
------- Comment #22 From 2011-03-11 03:09:09 PST -------
I like that it's assigned to nobody! So there's no intention to fix the bug?
All my customers are switching to Firefox or IE (even if everybody hate MS) :(
------- Comment #23 From 2011-04-04 00:24:47 PST -------
There's a lot of comments on this bug. Just to be clear, the core request here is that WebKit select the element when you click on an image or form control. Stated more generally, clicking on an element with unselectable children should select the element?

For example, the following cases?
<img>
<input>
<textarea>
<div style="-webkit-user-select:none">foo</div>

I'm not sure what the ask is for tables. If you click on a table, presumably we should be putting a text cursor inside the table.
------- Comment #24 From 2011-04-04 08:23:10 PST -------
(In reply to comment #23)
> Stated more generally, clicking on an element with unselectable children should select the element?

This sounds correct and it's a good way to define it.

> For example, the following cases?
> <img>
> <input>
> <textarea>
> <div style="-webkit-user-select:none">foo</div>

Correct. I would also add <span contenteditable=false> and the such. Basically, anything that can't be edited inside.

> I'm not sure what the ask is for tables. If you click on a table, presumably we should be putting a text cursor inside the table.

IE makes it possible to select the table only, by clicking on it's border. It's a nice feature. Firefox instead has another nice one, where you can click and drag through table cells to select them. So even cell selection is possible. Those features, while not totally required, are definitely wanted.
------- Comment #25 From 2011-06-16 05:12:15 PST -------
Please fix this problem as soon as possible!!!

More and more people are using Chrome/Safari and a lot of our support issues are currently about this single issue.

The only recommendation we can give our customers today is to use Internet Explorer or Firefox instead of Chrome/Safari and that is not a good recommendation, but it is the only one we can give since this issue has not been fixed :(
------- Comment #26 From 2011-09-15 06:51:42 PST -------
Like a lot of the other comments are saying, we are forced to recommend users of our CMS to use non-webkit browsers due to this issue. 

When are you going to fix this critical issue?
------- Comment #27 From 2011-09-26 11:10:51 PST -------
It seems that bug 29125 tracks selecting images in editable content, and bug 68801 tracks adding resize handles.

I'm not sure if there is anything actionable left in this bug. It appears to only confuse everyone, as people add "met too" comments without clarifying what exactly they need. Should we close this one, and track specific parts separately?
------- Comment #28 From 2011-09-26 11:21:12 PST -------
(In reply to comment #27)
> It seems that bug 29125 tracks selecting images in editable content, and bug 68801 tracks adding resize handles.

I don't think this bug blocks the bug 68801 since control selection doesn't necessarily provide resizing UI (e.g. Opera). Rather, this bug blocks the bug 68801.

> I'm not sure if there is anything actionable left in this bug. It appears to only confuse everyone, as people add "met too" comments without clarifying what exactly they need. Should we close this one, and track specific parts separately?

I think it's worth keeping this bug so that people can find it by the keyword "control selection(s)".
------- Comment #29 From 2011-09-26 11:39:28 PST -------
*** Bug 29125 has been marked as a duplicate of this bug. ***
------- Comment #30 From 2011-11-07 13:36:00 PST -------
Please, fix this bug!
------- Comment #31 From 2012-02-23 21:13:00 PST -------
The problem exists for 5 years now, shocking!
------- Comment #32 From 2012-05-10 07:48:16 PST -------
Here are three issues that I know of that are waiting for this bug fix/feature request.

http://drupal.org/node/746490 (2010.03.18)
http://drupal.org/node/367655 (2009.02.01)
http://www.tinymce.com/forum/viewtopic.php?pid=71770 (2008.10.29)

Now, there does seem to be a Javascript hack which I will try shortly but I would rather not add bloat to a page if I don't have to. http://www.editorboost.net/webkitresize
------- Comment #33 From 2012-08-13 17:44:17 PST -------
Created an attachment (id=158167) [details]
Shadow DOM-based approach - WIP prototype 1
------- Comment #34 From 2012-08-13 17:48:46 PST -------
Created an attachment (id=158169) [details]
Screenshot

Oops, sorry, you need to modify the patch to use ShadowRoot::AuthorShadowRoot instead of UserAgentShadowRoot because it relies on HTMLImageElement's native shadow being alive.
The image appears properly when I click for the first time, but it disappears as soon as I move the selection away. It appears that the shadow element doesn't have the right intrinsic width and height :(
------- Comment #35 From 2012-08-13 17:53:01 PST -------
Created an attachment (id=158170) [details]
Screenshot 2 - the image has disappered

This second screenshot shows what happens when I click outside of the image. The image simply disappears :(
------- Comment #36 From 2012-08-13 18:29:13 PST -------
Created an attachment (id=158178) [details]
Shadow DOM-based approach - Delete old shadow roots
------- Comment #37 From 2012-08-13 19:51:23 PST -------
Created an attachment (id=158194) [details]
Shadow DOM-based approach - prototype 2; just adds resizing corners
------- Comment #38 From 2012-08-15 01:17:10 PST -------
Created an attachment (id=158522) [details]
Shadow DOM based approach - prototype 3 (kinda works)

The image in the shadow DOM doesn't resize properly due to the bug 94077 but everything else works more or less.
------- Comment #39 From 2012-08-15 01:22:23 PST -------
(From update of attachment 158169 [details])
This screenshot is still a good representative of the prototype.
------- Comment #40 From 2012-08-16 19:26:19 PST -------
Created an attachment (id=158980) [details]
work in progress 5
------- Comment #41 From 2012-08-17 01:21:47 PST -------
Created an attachment (id=159042) [details]
work in progress 6
------- Comment #42 From 2012-09-02 20:13:56 PST -------
@Ryosuke Niwa, really excited to see this being taken on! With Chrome being the new dominant browser this sort of problem with WYSIWYG editors isn't something I can rationalize away with my clients.

p.s. Looks like we're almost neighbors! I live nearby in Berkeley. Free beers on me when we meet. :D
------- Comment #43 From 2012-09-27 17:19:11 PST -------
(In reply to comment #42)
> @Ryosuke Niwa, really excited to see this being taken on! With Chrome being the new dominant browser this sort of problem with WYSIWYG editors isn't something I can rationalize away with my clients.
> 
> p.s. Looks like we're almost neighbors! I live nearby in Berkeley. Free beers on me when we meet. :D

For everyone who is finding this via Google and also uses TinyMCE, v3.5.5 has issued a fix for this bug. 

http://www.tinymce.com/forum/viewtopic.php?id=29222
------- Comment #44 From 2012-10-15 02:33:55 PST -------
Attachment 159042 [details] did not pass style-queue:

Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'Source/WebCore/WebCore.exp.in', u'Source/W..." exit_code: 1
Source/WebCore/editing/FrameSelection.cpp:51:  Alphabetical sorting problem.  [build/include_order] [4]
Source/WebCore/editing/FrameSelection.cpp:76:  Alphabetical sorting problem.  [build/include_order] [4]
Source/WebCore/editing/FrameSelection.cpp:2114:  This { should be at the end of the previous line  [whitespace/braces] [4]
Total errors found: 3 in 7 files


If any of these errors are false positives, please file a bug against check-webkit-style.
------- Comment #45 From 2012-10-16 06:41:38 PST -------
(From update of attachment 159042 [details])
Attachment 159042 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/14391155

New failing tests:
editing/pasteboard/drag-selected-image-to-contenteditable.html
fast/forms/range/slider-delete-while-dragging-thumb.html
editing/undo/orphaned-selection-crash-bug32823-2.html
editing/pasteboard/styled-element-markup.html
editing/selection/drag-to-contenteditable-iframe.html
editing/inserting/replace-at-visible-boundary.html
fast/replaced/selection-rect-in-table-cell.html
editing/pasteboard/drag-image-to-contenteditable-in-iframe.html
fast/loader/text-document-wrapping.html
editing/deleting/delete-image-003.html
http/tests/security/drag-drop-same-unique-origin.html
editing/selection/select-missing-image.html
fast/forms/range/slider-mouse-events.html
fast/replaced/selection-rect-transform.html
editing/pasteboard/drag-and-drop-image-contenteditable.html
editing/pasteboard/drag-drop-iframe-refresh-crash.html
editing/pasteboard/drag-image-in-about-blank-frame.html
editing/pasteboard/4989774.html
http/tests/xmlhttprequest/xmlhttprequest-unsafe-redirect.html
editing/deleting/delete-image-004.html
editing/pasteboard/4947130.html
fast/events/drag-selects-image.html
fast/loader/javascript-url-in-object.html
editing/execCommand/remove-format-image.html
editing/execCommand/5080333-2.html
fast/events/standalone-image-drag-to-editable.html
fast/forms/range/slider-onchange-event.html
editing/selection/doubleclick-whitespace-img-crash.html
editing/selection/legal-positions.html