Image selection

src/test/unit/specific_feature_tests/images.js

@@ -4,8 +4,7 @@
     prepareUnitTestModule,
     test,
     expect,
-    equal,
-    deepEqual
+    strictEqual
 */
 "use strict";
 
@@ -45,39 +44,29 @@ test("Inserts image into the body", function () {
     });
 });
 
-test("._selectedImage is saved on mousedown", function () {
-    var initHtml = [""
-        , '<p id="noimage">Images? We dont need no silly images</p>'
-        , '<p>'
-            , '<img id="google" src="http://example.com/example.jpg" />'
-        , '</p>'
-        ].join(''),
-        wymeditor = jQuery.wymeditors(0),
-        $body,
-        $noimage,
-        $google;
+module("images-selection", {setup: prepareUnitTestModule});
 
-    expect(3);
+test("Image is selected on mousedown", function () {
+    var noChangeHtml = [""
+            , "<p>"
+                , "A "
+                , "<img alt=\"Pen\" src=\"http://goo.gl/N9nqUc\" />"
+            , "</p>"
+        ].join("");
 
-    wymeditor.rawHtml(initHtml);
-    $body = wymeditor.$body();
-
-    // Editor starts with no selected image. Use equal instead of strictEqual
-    // because wymeditor._selectedImage intermittently changes between being
-    // undefined and null, but either value should be acceptable for this test.
-    equal(
-        wymeditor._selectedImage,
-        null
-    );
-
-    // Clicking on a non-image doesn't change that
-    $noimage = $body.find('#noimage');
-    $noimage.mousedown();
-    deepEqual(wymeditor._selectedImage, null);
-
-
-    // Clicking an image does update the selected image
-    $google = $body.find('#google');
-    $google.mousedown();
-    deepEqual(wymeditor._selectedImage, $google[0]);
+    manipulationTestHelper({
+        startHtml: noChangeHtml,
+        prepareFunc: function (wymeditor) {
+            wymeditor.$body().find("img").mousedown();
+        },
+        expectedResultHtml: noChangeHtml,
+        additionalAssertionsFunc: function (wymeditor) {
+            expect(expect() + 1);
+            strictEqual(
+                wymeditor._getSelectedNodes()[0].tagName.toLowerCase(),
+                "img",
+                "Image is the only selected node"
+            );
+        }
+    });
 });

src/test/unit/specific_feature_tests/links.js

@@ -196,3 +196,75 @@ test("IE unlinks when collapsed selection inside link", function () {
         }
     });
 });
+
+test("Links selected unlinked image", function () {
+    manipulationTestHelper({
+        startHtml: "<p>A <img alt=\"pen\" src=\"http://goo.gl/N9nqUc\" /></p>",
+        prepareFunc: function (wymeditor) {
+            wymeditor.$body().find("img").mousedown();
+        },
+        manipulationFunc: function (wymeditor) {
+            wymeditor.link({href: "http://example.com/"});
+        },
+        expectedResultHtml: [""
+            , "<p>"
+                , "A "
+                , "<a href=\"http://example.com/\">"
+                    , "<img alt=\"pen\" src=\"http://goo.gl/N9nqUc\" />"
+                , "</a>"
+            , "</p>"
+        ].join("")
+    });
+});
+
+test("Modifies linked image", function () {
+    manipulationTestHelper({
+        startHtml: [""
+            , "<p>"
+                , "<a href=\"http://example.com/\">"
+                    , "A "
+                    , "<img alt=\"pen\" src=\"http://goo.gl/N9nqUc\" />"
+                , "</a>"
+            , "</p>"
+        ].join(""),
+        prepareFunc: function (wymeditor) {
+            wymeditor.$body().find("img").mousedown();
+        },
+        manipulationFunc: function (wymeditor) {
+            wymeditor.link({href: "http://example.com/foo"});
+        },
+        expectedResultHtml: [""
+            , "<p>"
+                , "<a href=\"http://example.com/foo\">"
+                , "A "
+                    , "<img alt=\"pen\" src=\"http://goo.gl/N9nqUc\" />"
+                , "</a>"
+            , "</p>"
+        ].join("")
+    });
+});
+
+test("Unlinks linked image", function () {
+    manipulationTestHelper({
+        startHtml: [""
+            , "<p>"
+                , "A "
+                , "<a href=\"http://example.com/\">"
+                    , "<img alt=\"pen\" src=\"http://goo.gl/N9nqUc\" />"
+                , "</a>"
+            , "</p>"
+        ].join(""),
+        prepareFunc: function (wymeditor) {
+            wymeditor.$body().find("img").mousedown();
+        },
+        manipulationFunc: function (wymeditor) {
+            wymeditor.exec(WYMeditor.EXEC_COMMANDS.UNLINK);
+        },
+        expectedResultHtml: [""
+            , "<p>"
+                , "A "
+                , "<img alt=\"pen\" src=\"http://goo.gl/N9nqUc\" />"
+            , "</p>"
+        ].join("")
+    });
+});

src/wymeditor/core.js

@@ -1181,11 +1181,6 @@ WYMeditor._initDialog = function (index) {
                 selected.tagName.toLowerCase !== WYMeditor.A) {
             selected = jQuery(selected).parentsOrSelf(WYMeditor.A);
         }
-
-        // fix MSIE selection if link image has been clicked
-        if (!selected && wym._selectedImage) {
-            selected = jQuery(wym._selectedImage).parentsOrSelf(WYMeditor.A);
-        }
     }
 
     // pre-init functions
@@ -1202,19 +1197,6 @@ WYMeditor._initDialog = function (index) {
         jQuery(wym._options.altSelector).val(jQuery(selected).attr(WYMeditor.ALT));
     }
 
-    // auto populate image fields if selected image
-    if (wym._selectedImage) {
-        jQuery(
-            wym._options.dialogImageSelector + " " + wym._options.srcSelector
-        ).val(jQuery(wym._selectedImage).attr(WYMeditor.SRC));
-        jQuery(
-            wym._options.dialogImageSelector + " " + wym._options.titleSelector
-        ).val(jQuery(wym._selectedImage).attr(WYMeditor.TITLE));
-        jQuery(
-            wym._options.dialogImageSelector + " " + wym._options.altSelector
-        ).val(jQuery(wym._selectedImage).attr(WYMeditor.ALT));
-    }
-
     jQuery(wym._options.dialogLinkSelector + " " + wym._options.submitSelector)
         .submit(function () {
             wym.link({

src/wymeditor/editor/base.js

@@ -658,7 +658,7 @@ WYMeditor.editor.prototype.exec = function (cmd) {
 
     case WYMeditor.EXEC_COMMANDS.CREATE_LINK:
         container = wym.getRootContainer();
-        if (container || wym._selectedImage) {
+        if (container) {
             wym.dialog(WYMeditor.DIALOG_LINK);
         }
         break;
@@ -1226,12 +1226,7 @@ WYMeditor.editor.prototype.keyCanCreateBlockElement = function (keyCode) {
 */
 WYMeditor.editor.prototype.toggleClass = function (sClass, jqexpr) {
     var wym = this,
-        $container;
-    if (wym._selectedImage) {
-        $container = jQuery(wym._selectedImage);
-    } else {
         $container = jQuery(wym.selectedContainer());
-    }
     $container = $container.parentsOrSelf(jqexpr);
     $container.toggleClass(sClass);
 
@@ -3955,11 +3950,15 @@ WYMeditor.editor.prototype._handlePasteEvent = function () {
 };
 
 WYMeditor.editor.prototype._mousedown = function (evt) {
-    var wym = this;
-    // Store the selected image if we clicked an <img> tag
-    wym._selectedImage = null;
+    var wym = this,
+        selection,
+        imageRange;
+
     if (evt.target.tagName.toLowerCase() === WYMeditor.IMG) {
-        wym._selectedImage = evt.target;
+        selection = wym.selection();
+        imageRange = rangy.createRangyRange();
+        imageRange.selectNode(evt.target);
+        selection.setSingleRange(imageRange);
     }
 };
 

src/wymeditor/editor/gecko.js

@@ -64,7 +64,6 @@ WYMeditor.WymClassGecko.prototype._keyup = function (evt) {
         wym.documentStructureManager.structureRules.notValidRootContainers;
     defaultRootContainer =
         wym.documentStructureManager.structureRules.defaultRootContainer;
-    wym._selectedImage = null;
     container = null;
 
     // If the inputted key cannont create a block element and is not a command,

src/wymeditor/editor/trident-pre-7.js

@@ -163,7 +163,6 @@ WYMeditor.WymClassTridentPre7.prototype.unwrap = function () {
 
 WYMeditor.WymClassTridentPre7.prototype._keyup = function (evt) {
     var wym = this,
-        doc = wym._doc,
         container,
         defaultRootContainer,
         notValidRootContainers,
@@ -176,7 +175,6 @@ WYMeditor.WymClassTridentPre7.prototype._keyup = function (evt) {
         wym.documentStructureManager.structureRules.notValidRootContainers;
     defaultRootContainer =
         wym.documentStructureManager.structureRules.defaultRootContainer;
-    doc._selectedImage = null;
 
     // If the pressed key can't create a block element and is not a command,
     // check to make sure the selection is properly wrapped in a container

src/wymeditor/editor/webkit.js

@@ -161,7 +161,6 @@ WYMeditor.WymClassWebKit.prototype._keyup = function (evt) {
         wym.documentStructureManager.structureRules.notValidRootContainers;
     defaultRootContainer =
         wym.documentStructureManager.structureRules.defaultRootContainer;
-    wym._selectedImage = null;
 
     // Fix to allow shift + return to insert a line break in older safari
     if (jQuery.browser.version < 534.1) {