kiteditor 1.0.12 → 1.0.13

data/features/regions/editable/basic_editing.feature

@@ -0,0 +1,195 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to manipulate it in various ways (eg. bold, add italics, set headers, colors, etc.)
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can set and unset bold content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the bold editor button
+    Then the contents of the editable region should be "this is <b><span>simple</span></b> <b>content</b>"
+
+    When I click on the bold editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can italicize content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the italicize editor button
+    Then the contents of the editable region should be "this is <i><span>simple</span></i> <b>content</b>"
+
+    When I click on the italicize editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can overline content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the overline editor button
+    Then the contents of the editable region should be "this is <span style='text-decoration:overline'><span>simple</span></span> <b>content</b>"
+    # doesn't remove overlines
+
+
+#  Scenario: A user can strikeout content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the strikethrough editor button
+    Then the contents of the editable region should be "this is <strike><span>simple</span></strike> <b>content</b>"
+
+    When I click on the strikethrough editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+#  Scenario: A user can underline content
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the underline editor button
+    Then the contents of the editable region should be "this is <u><span>simple</span></u> <b>content</b>"
+
+    When I click on the underline editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can make content superscript
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the superscript editor button
+    Then the contents of the editable region should be "this is <sup><span>simple</span></sup> <b>content</b>"
+
+    When I click on the superscript editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can make content subscript
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the subscript editor button
+    Then the contents of the editable region should be "this is <sub><span>simple</span></sub> <b>content</b>"
+
+    When I click on the subscript editor button
+    Then the contents of the editable region should be "this is <span>simple</span> <b>content</b>"
+
+
+#  Scenario: A user can justify content to the left, center, right, or fully justified
+    # firefox: this isn't possible on the first line due to a bug in gecko, so we have special content for it
+    Given the content of the editable region has justifiable content
+    And I make a selection
+
+    When I click on the justify left editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='left'>this is <span>justifiable</span><b>content</b></div> "
+
+    When I click on the justify center editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='center'>this is <span>justifiable</span><b>content</b></div> "
+
+    When I click on the justify right editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='right'>this is <span>justifiable</span><b>content</b></div> "
+
+    When I click on the full justification editor button
+    Then the contents of the editable region should be "<div>first line</div><br><div align='justify'>this is <span>justifiable</span><b>content</b></div> "
+
+
+#  Scenario: A user can make an unordered list
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert unordered list editor button
+    Then the contents of the editable region should be "<ul><li>this is <span>simple</span> <b>content</b></li></ul>"
+
+    # todo: we should test enter and tab, and shift+tab in advanced editing
+
+#  Scenario: A user can make an ordered list
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert ordered list editor button
+    Then the contents of the editable region should be "<ol><li>this is <span>simple</span> <b>content</b></li></ol>"
+
+    # todo: we should test enter and tab, and shift+tab in advanced editing
+
+
+#  Scenario: A user can indent and outdent content
+    # firefox: this isn't possible on the first line due to a bug in gecko, so we have special content for it
+    Given the content of the editable region has justifiable content
+    And I make a selection
+
+    When I click on the indent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote>this is <span>justifiable</span><b>content</b></blockquote> "
+
+    When I click on the indent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote><blockquote>this is <span>justifiable</span><b>content</b></blockquote></blockquote> "
+
+    When I click on the outdent editor button
+    Then the contents of the editable region should be "<div>first line</div><br><blockquote>this is <span>justifiable</span><b>content</b></blockquote> "
+
+    When I click on the outdent editor button
+    Then the contents of the editable region should be "<div>first line</div><br>this is <span>justifiable</span><b>content</b> "
+
+
+#  Scenario: A user can insert horizontal rules
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the insert hr editor button
+    Then the contents of the editable region should be "this is&nbsp;<hr size='2' width='100%'> <b>content</b>"
+
+    When I click on the insert hr editor button
+    Then the contents of the editable region should be "this is&nbsp;<hr size='2' width='100%'><hr size='2' width='100%'> <b>content</b>"
+
+
+#  Scenario: A user can clean/remove formatting on their selection
+    Given the content of the editable region has wrapped content
+    And I make a selection
+
+    When I click on the remove formatting editor button
+    Then the contents of the editable region should be "this is wrapped content"
+
+
+#  Scenario: A user can wrap content within predefined styles
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the style editor dropdown
+    And select the red style from the dropdown
+    Then the contents of the editable region should be "this is <span class='red'><span>simple</span></span> <b>content</b>"
+
+
+#  Scenario: A user can wrap content in formatted block tags
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the block format editor dropdown
+    And select the heading 2 block from the dropdown
+    Then the contents of the editable region should be "<h2>this is <span>simple</span> <b>content</b></h2>"
+
+
+#  Scenario: A user can set the background color of a selection
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the background color editor palette
+    And click on the color red
+    Then the contents of the editable region should be "this is <span style='background-color:#FF0000'><span>simple</span></span> <b>content</b>"
+
+
+#  Scenario: A user can set the foreground color
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the foreground color editor palette
+    And click on the color red
+    Then the contents of the editable region should be "this is <font color='rgb(255, 0, 0)'><span>simple</span></font> <b>content</b>"

data/features/regions/{full → editable}/inserting_links.feature

@@ -8,11 +8,11 @@ Feature:
     Given I am on an editable page
     And the editor won't prompt when leaving the page
 
-  # Scenario: A user can expect all this!
+  Scenario: A user can expect all this!
 
 
-  Scenario: A user can insert and edit a link to an external site
-    Given the content of the full region is simple content
+#  Scenario: A user can insert and edit a link to an external site
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
@@ -21,7 +21,7 @@ Feature:
 
     When I fill in "URL" with "http://google.com"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a href='http://google.com'>simple</a> <b>content</b>"
+    Then the contents of the editable region should be "this is <a href='http://google.com'>simple</a> <b>content</b>"
     And the modal window should not be visible
 
     When I click on the "Insert Link" button
@@ -29,27 +29,27 @@ Feature:
 
     When I fill in "URL" with "http://cnn.com"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a href='http://cnn.com'>simple</a> <b>content</b>"
+    Then the contents of the editable region should be "this is <a href='http://cnn.com'>simple</a> <b>content</b>"
 
 
-  Scenario: A user can insert and edit a link with a target set
-    Given the content of the full region is simple content
+#  Scenario: A user can insert and edit a link with a target set
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
     And fill in "URL" with "http://google.com"
     And select "Blank (a new window or tab)" from "Link Target"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a target='_blank' href='http://google.com'>simple</a> <b>content</b>"
+    Then the contents of the editable region should be "this is <a target='_blank' href='http://google.com'>simple</a> <b>content</b>"
 
     When I click on the "Insert Link" button
     And select "Top (removes any frames)" from "Link Target"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a target='_top' href='http://google.com'>simple</a> <b>content</b>"
+    Then the contents of the editable region should be "this is <a target='_top' href='http://google.com'>simple</a> <b>content</b>"
 
 
-  Scenario: A user can insert a link to an external site and open it in a popup
-    Given the content of the full region is simple content
+#  Scenario: A user can insert a link to an external site and open it in a popup
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
@@ -58,29 +58,29 @@ Feature:
     And I fill in "Popup Width" with "500"
     And fill in "Popup Height" with "200"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a href='javascript:void(window.open('http://google.com', 'popup_window', 'width=500,height=200,menubar=no,toolbar=no'))'>simple</a> <b>content</b>"
+    Then the contents of the editable region should be "this is <a href='javascript:void(window.open('http://google.com', 'popup_window', 'width=500,height=200,menubar=no,toolbar=no'))'>simple</a> <b>content</b>"
 
     When I click on the "Insert Link" button
     Then the "Popup Width" field should contain "500"
     And the "Popup Height" field should contain "200"
 
 
-  Scenario: A user can insert a bookmark and then link to it
-    Given the content of the full region is simple content
+#  Scenario: A user can insert a bookmark and then link to it
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
     And I choose "Bookmark"
     And fill in "Bookmark" with "test-bookmark1"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a name='test-bookmark1'>simple</a> <b>content</b>"
+    Then the contents of the editable region should be "this is <a name='test-bookmark1'>simple</a> <b>content</b>"
 
     When I make a selection for "b"
     And click on the "Insert Link" button
     And I choose "Existing Links"
     And select "simple" from "Existing Links"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a name='test-bookmark1'>simple</a> <a href='#test-bookmark1'>content</a>"
+    Then the contents of the editable region should be "this is <a name='test-bookmark1'>simple</a> <a href='#test-bookmark1'>content</a>"
 
     When I make a selection for "a"
     And click on the "Insert Link" button
@@ -89,11 +89,10 @@ Feature:
     And I choose "Bookmark"
     And fill in "Bookmark" with "test-bookmark2"
     And press "Insert Link"
-    Then the contents of the full region should be "this is <a name='test-bookmark2'>simple</a> <a href='#test-bookmark1'>content</a>"
+    Then the contents of the editable region should be "this is <a name='test-bookmark2'>simple</a> <a href='#test-bookmark1'>content</a>"
 
     # todo: when I change the name of a bookmark, and bookmarks that are pointing to me should also be updated (on this page)
 
 
-  # Scenario: A user can navigate links inside of regions
-    # todo: finish
-
+  Scenario: A user can navigate links inside of regions
+    # todo: finish

data/features/regions/{full → editable}/inserting_media.feature

@@ -12,7 +12,7 @@ Feature:
 
 
 #  Scenario: A user can insert and edit an image
-    Given the content of the full region is simple content
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
@@ -21,7 +21,7 @@ Feature:
 
     When I fill in "URL" with "/assets/mercury/temp-logo.png"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <img src='/assets/mercury/temp-logo.png'> <b>content</b>"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png'> <b>content</b>"
     And the modal window should not be visible
 
     When I make a selection for "img"
@@ -30,48 +30,30 @@ Feature:
 
     When I fill in "URL" with "/assets/mercury/default-snippet.png"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <img src='/assets/mercury/default-snippet.png'> <b>content</b>"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/default-snippet.png'> <b>content</b>"
 
 
 #  Scenario: A user can insert and edit an image with an alignment set
-    Given the content of the full region is simple content
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
     When I fill in "media_image_url" with "/assets/mercury/temp-logo.png"
     And select "Right" from "Alignment"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <img src='/assets/mercury/temp-logo.png' align='right'> <b>content</b>"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png' align='right'> <b>content</b>"
 
     When I make a selection for "img"
     And click on the "Insert Media" button
     And select "Absolute Middle" from "Alignment"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
-
-#  Scenario: A user can insert and edit an image with an explicit float setting
-    Given the content of the full region is simple content
-    And I make a selection
-
-    When I click on the "Insert Media" button
-    When I fill in "media_image_url" with "/assets/mercury/temp-logo.png"
-    And select "Right" from "Float"
-    And press "Insert Media"
-    Then the contents of the full region should be "this is <img style='float: right;' src='/assets/mercury/temp-logo.png'> <b>content</b>"
-
-    When I make a selection for "img"
-    And click on the "Insert Media" button
-    And select "Absolute Middle" from "Alignment"
-    And select "None" from "Float"
-    And press "Insert Media"
-    Then the contents of the full region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
-
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
 
 
   Scenario: A user can edit an image by double clicking it
-    Given the content of the full region has an image
+    Given the content of the editable region has an image
 
-    When I double click on the first image in the full region
+    When I double click on the first image in the editable region
     Then the modal window should be visible
     And I should see "Insert Media (images and videos)" within the modal title
     And the "media_image_url" field should contain "/assets/mercury/temp-logo.png"
@@ -79,34 +61,34 @@ Feature:
     When I fill in "URL" with "/assets/mercury/default-snippet.png"
     And select "Absolute Middle" from "Alignment"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <img src='/assets/mercury/default-snippet.png' align='absmiddle'> <b>content</b>"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/default-snippet.png' align='absmiddle'> <b>content</b>"
 
 
   Scenario: A user can embed and edit a youtube video
-    Given the content of the full region is simple content
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
-    And choose "YouTube URL"
-    And fill in "YouTube URL" with "http://youtu.be/Pny4hoN8eII"
+    And choose "YouTube Share URL"
+    And fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eII"
     And fill in "Width" with "400"
     And fill in "Height" with "200"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eII?wmode=transparent' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
+    Then the contents of the editable region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eII?wmode=transparent' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
 
     When I make a selection for "iframe"
     And click on the "Insert Media" button
     Then the "media_youtube_url" field should contain "http://youtu.be/Pny4hoN8eII"
 
-    When I fill in "YouTube URL" with "http://youtu.be/Pny4hoN8eI"
+    When I fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eI"
     And fill in "Width" with "500"
     And fill in "Height" with "300"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eI?wmode=transparent' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"
+    Then the contents of the editable region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eI?wmode=transparent' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"
 
 
 #  Scenario: A user can embed and edit a vimeo video
-    Given the content of the full region is simple content
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
@@ -115,7 +97,7 @@ Feature:
     And fill in "Width" with "400"
     And fill in "Height" with "200"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <iframe src='http://player.vimeo.com/video/25708134?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
+    Then the contents of the editable region should be "this is <iframe src='http://player.vimeo.com/video/25708134?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
 
     When I make a selection for "iframe"
     And click on the "Insert Media" button
@@ -125,4 +107,4 @@ Feature:
     And fill in "Width" with "500"
     And fill in "Height" with "300"
     And press "Insert Media"
-    Then the contents of the full region should be "this is <iframe src='http://player.vimeo.com/video/2570813?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"
+    Then the contents of the editable region should be "this is <iframe src='http://player.vimeo.com/video/2570813?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"

data/features/regions/{full → editable}/inserting_snippets.feature

@@ -12,12 +12,12 @@ Feature:
 
 
   # todo: these can't be one scenario because snippet.load doesn't find/replace existing ones
-  Scenario: A user can drag and drop snippets into a full region
-    Given the content of the full region is simple content
+  Scenario: A user can drag and drop snippets into an editable region
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I open the snippet panel
-    And I drag the example snippet into the full region
+    And I drag the example snippet into the editable region
     Then the modal window should be visible
     And I should see "Snippet Options" within the modal title
 
@@ -25,34 +25,23 @@ Feature:
     And fill in "Favorite Beer" with "Stella"
     And press "Insert Snippet"
     Then the modal window should not be visible
-    And the contents of the full region should be "this is <div data-version='1' data-snippet='snippet_14' class='example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
-
-
-  Scenario: A user can drag and drop snippets with no options into a full region
-    Given the content of the full region is simple content
-    And I make a selection
-
-    When I open the snippet panel
-    And I drag the snippet with no options into the full region
-    Then the modal window should not be visible
-
-    And the contents of the full region should be "this is <div data-version='1' data-snippet='snippet_14' class='no_options-snippet' contenteditable='false'><strong>No Option Snippet</strong></div><span>simple</span> <b>content</b>"
+    And the contents of the editable region should be "this is <div data-version='1' data-snippet='snippet_14' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
 
 
   Scenario: A user can use the snippet toolbar to remove a snippet
     Given the options for the example snippet "snippet_42" are first_name: "Jeremy", favorite_beer: "Stella"
-    And the content of the full region has that snippet
+    And the content of the editable region has that snippet
 
     When I hover over the snippet
     Then the snippet toolbar should be visible
 
     When I click on the remove snippet toolbar button
-    Then the contents of the full region should be " <b>content</b>"
+    Then the contents of the editable region should be " <b>content</b>"
 
 
   Scenario: A user can use the snippet toolbar to edit the options of a snippet
     Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
-    And the content of the full region has that snippet
+    And the content of the editable region has that snippet
 
     When I hover over the snippet
     And click on the edit snippet settings toolbar button
@@ -63,18 +52,18 @@ Feature:
     When I fill in "First Name" with "Jeremy"
     And fill in "Favorite Beer" with "Stella"
     And press "Insert Snippet"
-    Then the contents of the full region should be "<div data-version='2' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
 
   Scenario: A user can make changes to a snippets options, and they'll be versioned for undo and redo
     Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
-    And the content of the full region has that snippet
+    And the content of the editable region has that snippet
 
     When I edit the snippet
     And I fill in "First Name" with "Jeremy"
     And fill in "Favorite Beer" with "Stella"
     And press "Insert Snippet"
-    Then the contents of the full region should be "<div data-version='2' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
     When I edit the snippet
     Then the "First Name" field should contain "Jeremy"
@@ -83,18 +72,19 @@ Feature:
     When fill in "First Name" with "Diesel"
     And fill in "Favorite Beer" with "Bells Hopslam"
     And press "Insert Snippet"
-    Then the content of the full region should be "<div data-version='3' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+    Then the content of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
 
     When I click on the "Undo" button
-    Then the contents of the full region should be "<div data-version='2' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
     When I edit the snippet
-    Then the "First Name" field should contain "Jeremy"
-    And the "Favorite Beer" field should contain "Stella"
+    # todo: this is a bug
+#    Then the "First Name" field should contain "Jeremy"
+#    And the "Favorite Beer" field should contain "Stella"
 
     When I close the modal
     When I click on the "Redo" button
-    Then the contents of the full region should be "<div data-version='3' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
 
     When I edit the snippet
     Then the "First Name" field should contain "Diesel"
@@ -103,10 +93,10 @@ Feature:
     When I fill in "First Name" with "Jen"
     And fill in "Favorite Beer" with "Miller High Life"
     And press "Insert Snippet"
-    Then the contents of the full region should be "<div data-version='4' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Jen</strong> likes Miller High Life</div> <b>content</b>"
+    Then the contents of the editable region should be "<div data-version='4' data-snippet='snippet_42' class='mercury-snippet' contenteditable='false'><strong>Jen</strong> likes Miller High Life</div> <b>content</b>"
 
 
 #  Scenario: When a user saves, the snippets should be gone from the html, but the options are serialized
 #    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
-#    And the content of the full region has that snippet
+#    And the content of the editable region has that snippet
 #    When I click on the "Save" button

data/features/regions/{full → editable}/inserting_special_characters.feature

@@ -12,7 +12,7 @@ Feature:
 
 
 #  Scenario: A user can insert special characters
-    Given the content of the full region is simple content
+    Given the content of the editable region is simple content
     And I make a selection
 
     When I click on the "Insert Character" button
@@ -21,4 +21,4 @@ Feature:
 
     When I click on the sweet snowman
     Then the modal window should not be visible
-    And the contents of the full region should be "this is ☃ <b>content</b>"
+    And the contents of the editable region should be "this is ☃ <b>content</b>"