@@ -9,6 +9,11 @@ WysiHat.Selection = Class.create((function() { function initialize(editor) { this.window = editor.getWindow(); this.document = editor.getDocument(); + + if (Prototype.Browser.IE) { + editor.observe('wysihat:cursormove', saveRange.bind(this)); + editor.observe('wysihat:focus', restoreRange); + } } /** @@ -24,10 +29,9 @@ WysiHat.Selection = Class.create((function() { * Get range for selected text. **/ function getRange() { - var selection = this.getSelection(); + var range = null, selection = this.getSelection(); try { - var range; if (selection.getRangeAt) range = selection.getRangeAt(0); else @@ -190,6 +194,15 @@ WysiHat.Selection = Class.create((function() { bookmark.parentNode.removeChild(bookmark); } + var savedRange = null; + function saveRange() { + savedRange = this.getRange(); + } + + function restoreRange() { + if (savedRange) savedRange.select(); + } + return { initialize: initialize, getSelection: getSelection, @@ -197,6 +210,7 @@ WysiHat.Selection = Class.create((function() { getNode: getNode, selectNode: selectNode, setBookmark: setBookmark, - moveToBookmark: moveToBookmark + moveToBookmark: moveToBookmark, + restore: restoreRange }; })()); src/wysihat/dom/selection.js @@ -142,7 +142,7 @@ WysiHat.Commands = (function() { **/ function colorSelected() { var node = this.selection.getNode(); - return Element.getStyle(node, 'color'); + return standardizeColor(Element.getStyle(node, 'color')); } /** @@ -167,7 +167,7 @@ WysiHat.Commands = (function() { **/ function backgroundColorSelected() { var node = this.selection.getNode(); - return Element.getStyle(node, 'backgroundColor'); + return standardizeColor(Element.getStyle(node, 'backgroundColor')); } /** @@ -281,6 +281,8 @@ WysiHat.Commands = (function() { function execCommand(command, ui, value) { var document = this.getDocument(); + if (Prototype.Browser.IE) this.selection.restore(); + var handler = this.commands.get(command) if (handler) handler.bind(this)(value); @@ -335,6 +337,55 @@ WysiHat.Commands = (function() { return parseInt(fontSize); } + function standardizeColor(color) { + if (!color || color.match(/[0-9a-f]{6}/i)) return color; + var m = color.toLowerCase().match(/^(rgba?|hsla?)\(([\s\.\-,%0-9]+)\)/); + if(m){ + var c = m[2].split(/\s*,\s*/), l = c.length, t = m[1]; + if((t == "rgb" && l == 3) || (t == "rgba" && l == 4)){ + var r = c[0]; + if(r.charAt(r.length - 1) == "%"){ + var a = c.map(function(x){ + return parseFloat(x) * 2.56; + }); + if(l == 4){ a[3] = c[3]; } + return _colorFromArray(a); + } + return _colorFromArray(c); + } + if((t == "hsl" && l == 3) || (t == "hsla" && l == 4)){ + var H = ((parseFloat(c[0]) % 360) + 360) % 360 / 360, + S = parseFloat(c[1]) / 100, + L = parseFloat(c[2]) / 100, + m2 = L <= 0.5 ? L * (S + 1) : L + S - L * S, + m1 = 2 * L - m2, + a = [_hue2rgb(m1, m2, H + 1 / 3) * 256, + _hue2rgb(m1, m2, H) * 256, _hue2rgb(m1, m2, H - 1 / 3) * 256, 1]; + if(l == 4){ a[3] = c[3]; } + return _colorFromArray(a); + } + } + return null; // dojo.Color + } + + function _colorFromArray(a) { + var arr = a.slice(0, 3).map(function(x){ + var s = parseInt(x).toString(16); + return s.length < 2 ? "0" + s : s; + }); + return "#" + arr.join(""); // String + } + + function _hue2rgb(m1, m2, h){ + if(h < 0){ ++h; } + if(h > 1){ --h; } + var h6 = 6 * h; + if(h6 < 1){ return m1 + (m2 - m1) * h6; } + if(2 * h < 1){ return m2; } + if(3 * h < 2){ return m1 + (m2 - m1) * (2 / 3 - h) * 6; } + return m1; + } + return { boldSelection: boldSelection, boldSelected: boldSelected, src/wysihat/editor/commands.js @@ -86,7 +86,7 @@ WysiHat.Events = (function() { var range = editor.selection.getRange(); if (previousRange != range) { editor.fire("wysihat:cursormove"); - editor.previousRange = range; + previousRange = range; } }; src/wysihat/editor/events.js @@ -34,18 +34,28 @@ new Test.Unit.Runner({ }}, testBold: function() { with(this) { - testFontFormat('bold', 'b'); + testFontFormat('bold'); + testNestedFontFormat('bold', 'b'); }}, testItalic: function() { with(this) { - testFontFormat('italic', 'i'); + testFontFormat('italic'); + testNestedFontFormat('italic', 'i'); }}, testUnderline: function() { with(this) { - testFontFormat('underline', 'u'); + testFontFormat('underline'); + testNestedFontFormat('underline', 'u'); }}, testFonts: function() { with(this) { + editor.setContent("Times"); + selectFirstNode(); + editor.fontSelection('times'); + assertEqual('times', editor.fontSelected()); + }}, + + testNestedFonts: function() { with(this) { editor.setContent("<font face='times'>Times</font>"); selectFirstNode(); assertEqual('times', editor.fontSelected()); @@ -54,19 +64,47 @@ new Test.Unit.Runner({ testFontSizes: function() { with(this) { editor.setContent("<font size='7'>Font Size</font>"); selectFirstNode(); + editor.fontSizeSelection(5); + assertEqual(5, editor.fontSizeSelected()); + }}, + + testNestedFontSizes: function() { with(this) { + editor.setContent("<font size='7'>Font Size</font>"); + selectFirstNode(); assertEqual(7, editor.fontSizeSelected()); }}, - testColor: function() { with(this) { - editor.setContent("<font color='#555555'>color</font>"); + testColor: function() { with (this) { + editor.setContent('color'); selectFirstNode(); - assertEqual('rgb(85, 85, 85)', editor.colorSelected()); + editor.colorSelection("#555555"); + assertEqual('#555555', editor.colorSelected()); }}, + testNestedColor: function() { with(this) { + editor.setContent("<font color='#555555'>color</font>"); + selectFirstNode(); + assertEqual('#555555', editor.colorSelected()); + }}, + testBackgroundColor: function() { with(this) { + editor.setContent("background color"); + selectFirstNode(); + editor.backgroundColorSelection("#555555"); + assertEqual('#555555', editor.backgroundColorSelected()); + }}, + + testNestedBackgroundColor: function() { with(this) { editor.setContent("<font style='background-color:#555555'>background-color</font>"); selectFirstNode(); - assertEqual('rgb(85, 85, 85)', editor.backgroundColorSelected()); + assertEqual('#555555', editor.backgroundColorSelected()); + }}, + + testAlignment: function() { with(this) { + editor.setContent("align me"); + selectFirstNode(); + editor.alignSelection('right'); + assertEqual('right', editor.alignSelected()); }}, testNestedAlignment: function() { with(this) { @@ -84,6 +122,29 @@ new Test.Unit.Runner({ assertEqual('13px', editor.getStyle('fontSize')); }}, + testLink: function() { with (this) { + link = 'http://github.com/'; + editor.setContent('linky link'); + selectFirstNode(); + + wait(500, function() { + var textarea = $('link').down('textarea'); + textarea.focus(); // simulate real world case of IE losing focus + textarea.value = link; + editor.linkSelection(link); + assert(editor.linkSelected()); + assertEqual(link, editor.selection.getNode().href); + }); + }}, + + testNestedLink: function(){ with (this) { + link = 'http://github.com/'; + editor.setContent('<a href="' + link + '">linky link</a>'); + selectFirstNode(); + assert(editor.linkSelected()); + assertEqual(link, editor.selection.getNode().href); + }}, + testUnattach: function() { with(this) { editor.setContent("<font face='times'>Unattached</font>"); editor.unattach(); @@ -99,7 +160,14 @@ new Test.Unit.Runner({ editor.selection.selectNode(node); }; - this.testFontFormat = function(styleType, styleTag) { + this.testFontFormat = function(styleType) { + editor.setContent('Boldly going where no man has gone before'); + this.selectFirstNode(); + editor[styleType + 'Selection'](); + this.assert(editor[styleType + 'Selected']()); + }; + + this.testNestedFontFormat = function(styleType, styleTag) { editor.setContent('<' + styleTag + '>Boldly going where no man has gone before</' + styleTag + '>'); this.selectFirstNode(); this.assert(editor[styleType + 'Selected']()); test/unit/editor_test.js @@ -1,3 +1,6 @@ <form action="#" method="post"> <textarea id="content"></textarea> </form> +<div id="link"> + <textarea></textarea> +</div> \ No newline at end of file test/unit/fixtures/editor.html 1b42e625f19f0977ec5f482d5749ed3abc947bfd David Badley david@533d666c43c59e3ce0c3b417dfad59a4.local http://github.com/josh/wysihat/commit/05ff61050c6b1cf51916a3734fd895de78bc71d6 05ff61050c6b1cf51916a3734fd895de78bc71d6 2009-06-30T16:06:48-07:00 2009-06-30T14:35:50-07:00 Added some bug fi fixes for firefox and for IE. Added tests for formatting Selection() methods, renamed past tests to Nested. The bug fix for firefox deals with backcolor and execCommand being handled differently in firefox than the other browsers (it uses hilitecolor). The bug fix for IE resolves an issue with losing its selection when clicking on the toolbar by saving its selection. Signed-off-by: Joshua Peek <josh@joshpeek.com> c16406b3738c0ce3110c18a57b77c3d2fdd6f6f3 Joshua Peek josh@joshpeek.com