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
Product: WebKit
Classification: Unclassified
Component: HTML Editing
: 420+
: Macintosh Mac OS X 10.4
: P2 Normal
Assigned To: Ryosuke Niwa
: InRadar
Depends on: 94077 79380
Blocks: 6627 7154 9915 10165 15322
  Show dependency treegraph
 
Reported: 2007-01-13 03:35 PST by Frederico Caldeira Knabben
Modified: 2012-10-16 06:41 PDT (History)
34 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Frederico Caldeira Knabben 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 Justin Garcia 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 Justin Garcia 2007-02-21 19:09:59 PST
*** Bug 7154 has been marked as a duplicate of this bug. ***
Comment 3 Justin Garcia 2007-02-27 18:26:17 PST
Re-titling as this effects all the editors
Comment 4 Frederico Caldeira Knabben 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 Galen Rhodes 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 David Kilzer (:ddkilzer) 2008-01-19 12:01:47 PST
<rdar://problem/5696409>
Comment 7 Justin Garcia 2008-03-25 16:08:05 PDT
I'm working on this.
Comment 8 Justin Garcia 2008-03-26 01:06:11 PDT
Created attachment 20078 [details]
first cut
Comment 9 Moxiecode Systems 2008-03-26 15:43:57 PDT
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 Justin Garcia 2008-03-27 00:59:23 PDT
Created attachment 20119 [details]
updated patch
Comment 11 Justin Garcia 2008-03-27 01:00:54 PDT
> 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 Sigurd Magnusson 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 philip magnusson 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 Jubal Kessler 2009-03-15 06:57:24 PDT
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 Michael B 2009-05-14 00:10:06 PDT
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 Alexey Proskuryakov 2009-09-11 10:41:18 PDT
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 Qazaq 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 kcviqmwfnowfnl 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 Qazaq 2010-05-06 04:15:47 PDT
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 Justin Garcia 2011-01-21 10:13:21 PST
I'm not currently working on this.
Comment 21 Andrew 2011-02-25 19:01:37 PST
Bump!
This feature would be very nice.
Comment 22 alexbk66 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 Ojan Vafai 2011-04-04 00:24:47 PDT
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 Frederico Caldeira Knabben 2011-04-04 08:23:10 PDT
(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 Kalle 2011-06-16 05:12:15 PDT
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 Vidar Langberget 2011-09-15 06:51:42 PDT
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 Alexey Proskuryakov 2011-09-26 11:10:51 PDT
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 Ryosuke Niwa 2011-09-26 11:21:12 PDT
(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 Ryosuke Niwa 2011-09-26 11:39:28 PDT
*** Bug 29125 has been marked as a duplicate of this bug. ***
Comment 30 Pablo Mazaeda 2011-11-07 13:36:00 PST
Please, fix this bug!
Comment 31 alexbk66 2012-02-23 21:13:00 PST
The problem exists for 5 years now, shocking!
Comment 32 Elijah Lynn 2012-05-10 07:48:16 PDT
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 Ryosuke Niwa 2012-08-13 17:44:17 PDT
Created attachment 158167 [details]
Shadow DOM-based approach - WIP prototype 1
Comment 34 Ryosuke Niwa 2012-08-13 17:48:46 PDT
Created attachment 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 Ryosuke Niwa 2012-08-13 17:53:01 PDT
Created attachment 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 Ryosuke Niwa 2012-08-13 18:29:13 PDT
Created attachment 158178 [details]
Shadow DOM-based approach - Delete old shadow roots
Comment 37 Ryosuke Niwa 2012-08-13 19:51:23 PDT
Created attachment 158194 [details]
Shadow DOM-based approach - prototype 2; just adds resizing corners
Comment 38 Ryosuke Niwa 2012-08-15 01:17:10 PDT
Created attachment 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 Ryosuke Niwa 2012-08-15 01:22:23 PDT
Comment on attachment 158169 [details]
Screenshot

This screenshot is still a good representative of the prototype.
Comment 40 Ryosuke Niwa 2012-08-16 19:26:19 PDT
Created attachment 158980 [details]
work in progress 5
Comment 41 Ryosuke Niwa 2012-08-17 01:21:47 PDT
Created attachment 159042 [details]
work in progress 6
Comment 42 Nate Haug 2012-09-02 20:13:56 PDT
@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 Elijah Lynn 2012-09-27 17:19:11 PDT
(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 WebKit Review Bot 2012-10-15 02:33:55 PDT
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 WebKit Review Bot 2012-10-16 06:41:38 PDT
Comment on attachment 159042 [details]
work in progress 6

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