mercury-rails 0.1.0

data/app/assets/stylesheets/mercury/uploader.scss

@@ -0,0 +1,109 @@
+/*
+ * Uploader
+ *----------------------------------------------------------------------------*/
+.mercury-uploader-overlay {
+  position: absolute;
+  z-index: 10040;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: .95;
+  /*display: none;*/
+  background: rgba(0,0,0, .65);
+}
+.mercury-uploader {
+  position: absolute;
+  z-index: 10050;
+  top: 300px;
+  left: 400px;
+  width: 500px;
+  height: 150px;
+  overflow: hidden;
+  padding: 15px;
+  background: rgba(0,0,0, .70);
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  font: normal normal normal 12px/normal Helvetica, Tahoma, Arial, sans-serif;
+  color: #CCC;
+  .mercury-uploader-preview {
+    float: left;
+    width: 150px;
+    height: 150px;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    b {
+      display: table-cell;
+      width: 150px;
+      height: 150px;
+      text-align: center;
+      vertical-align: middle;
+    }
+    img {
+      margin: 5px;
+      max-width: 140px;
+      max-height: 140px;
+    }
+  }
+  .mercury-uploader-details {
+    width: 333px;
+    overflow: hidden;
+    float: left;
+    padding-left: 15px;
+    span {
+      color: #F00;
+    }
+  }
+  .mercury-uploader-progress {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    width: 333px;
+    div.mercury-uploader-indicator {
+      width: 100%;
+      height: 30px;
+      margin: 5px 0 0;
+      position: relative;
+      background-color: #BABABA;
+      border-radius: 35px;
+      -moz-border-radius: 35px;
+      background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #C7C7C7), color-stop(1, #B0B0B0));
+      background: -moz-linear-gradient(#B0B0B0 0%, #C7C7C7 100%);
+      -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0, 0.5), 0px 1px 0px 0px rgba(255,255,255, 0.3);
+      -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0, 0.5), 0px 1px 0px 0px rgba(255,255,255, 0.3);
+      box-shadow: inset 0px 1px 2px 0px rgba(0,0,0, 0.5), 0px 1px 0px 0px rgba(255,255,255, 0.3);
+      div {
+        min-width: 28px;
+        position: relative;
+        overflow: hidden;
+        height: 28px;
+        border-radius: 35px;
+        width: 0;
+        -moz-border-radius: 35px;
+        -webkit-animation: animate-stripes 2s linear infinite;
+        -webkit-background-size: 44px 44px;
+        background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0.00, rgba(255,255,255, 0.17)), color-stop(0.25, rgba(255,255,255, 0.17)), color-stop(0.26, rgba(255,255,255, 0)), color-stop(0.50, rgba(255,255,255, 0)), color-stop(0.51, rgba(255,255,255, 0.17)), color-stop(0.75, rgba(255,255,255, 0.17)), color-stop(0.76, rgba(255,255,255, 0)), color-stop(1.00, rgba(255,255,255, 0))),
+                    -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,255,255, 0.1)), color-stop(1, rgba(255,255,255, 0.37)));
+        background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255, 0.17), rgba(255,255,255, 0.17) 15px, rgba(255,255,255, 0) 15px, rgba(255,255,255, 0) 30px),
+                    -moz-linear-gradient(rgba(255,255,255, 0.1) 0%, rgba(255,255,255, 0.37) 100%);
+        background-color: #09F;
+        box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, 0.4),
+                    inset 0px -1px 1px rgba(0,0,0, 0.2);
+        -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, 0.4),
+                         inset 0px -1px 1px rgba(0,0,0, 0.2);
+        border: 1px solid #0083DA;
+        b {
+          display: none;
+          position: absolute;
+          right: 0;
+          line-height: 28px;
+          padding-right: 12px;
+          color: rgba(0, 0, 0, .6);
+          text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}

data/app/controllers/images_controller.rb

@@ -0,0 +1,19 @@
+class ImagesController < MercuryController
+
+  respond_to :json
+
+  # POST /images.json
+  def create
+    @image = Image.new(params[:image])
+    @image.save
+    respond_with @image
+  end
+
+  # DELETE /images/1.json
+  def destroy
+    @image = Image.find(params[:id])
+    @image.destroy
+    respond_with @image
+  end
+
+end

data/app/controllers/mercury_controller.rb

@@ -0,0 +1,20 @@
+class MercuryController < ActionController::Base
+  protect_from_forgery
+
+  def edit
+    render text: '', layout: 'mercury'
+  end
+
+  def resource
+    render action: "/#{params[:type]}/#{params[:resource]}", layout: false
+  end
+
+  def snippet_options
+    render action: "/snippets/#{params[:name]}_options", layout: false
+  end
+
+  def snippet_preview
+    render action: "/snippets/#{params[:name]}", layout: false
+  end
+
+end

data/app/models/image.rb

@@ -0,0 +1,14 @@
+class Image < ActiveRecord::Base
+
+  has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }
+
+  delegate :url, to: :image
+
+  def serializable_hash(options = nil)
+    options ||= {}
+    options[:methods] ||= []
+    options[:methods] << :url
+    super(options)
+  end
+
+end

data/app/views/layouts/mercury.html.haml

@@ -0,0 +1,12 @@
+!!!
+%html
+  %head
+    %title Mercury Editor
+    = csrf_meta_tags
+    = stylesheet_link_tag "mercury"
+    = javascript_include_tag "mercury"
+    :javascript
+      Mercury.Snippet.load({
+        'snippet_1': {name: 'example', options: {'options[favorite_beer]': "miller_lite", 'options[first_name]': "1"}},
+      });
+  %body= javascript_tag 'new Mercury.PageEditor()'

data/app/views/mercury/modals/character.html.haml

@@ -0,0 +1,252 @@
+%form#mercury_insertcharacter{ style: 'width:456px' }
+
+  .mercury-modal-pane-container
+    .mercury-modal-pane
+
+      .character{ data: {entity: "#34"},   title: "quotation mark (APL quote)" }  "
+      .character{ data: {entity: "#38"},   title: "ampersand" } &
+      .character{ data: {entity: "#60"},   title: "less-than sign" } <
+      .character{ data: {entity: "#62"},   title: "greater-than sign" } >
+      .character{ data: {entity: "#710"},  title: "modifier letter circumflex accent" } ˆ
+      .character{ data: {entity: "#732"},  title: "small tilde" } ˜
+      .character{ data: {entity: "#160"},  title: "non-breaking space" }  
+      .character{ data: {entity: "#8194"}, title: "en space" }  
+      .character{ data: {entity: "#8195"}, title: "em space" }  
+      .character{ data: {entity: "#8201"}, title: "thin space" }  
+      .character{ data: {entity: "#8211"}, title: "en dash" } –
+      .character{ data: {entity: "#8212"}, title: "em dash" } —
+      .character{ data: {entity: "#8216"}, title: "left single quotation mark" } ‘
+      .character{ data: {entity: "#8217"}, title: "right single quotation mark" } ’
+      .character{ data: {entity: "#8218"}, title: "single low-9 quotation mark" } ‚
+      .character{ data: {entity: "#8220"}, title: "left double quotation mark" } “
+      .character{ data: {entity: "#8221"}, title: "right double quotation mark" } ”
+      .character{ data: {entity: "#8222"}, title: "double low-9 quotation mark" } „
+      .character{ data: {entity: "#8224"}, title: "dagger" } †
+      .character{ data: {entity: "#8225"}, title: "double dagger" } ‡
+      .character{ data: {entity: "#8240"}, title: "per mille sign" } ‰
+      .character{ data: {entity: "#8249"}, title: "single left-pointing angle quotation mark" } ‹
+      .character{ data: {entity: "#8250"}, title: "single right-pointing angle quotation mark" } ›
+      .character{ data: {entity: "#161"},  title: "inverted exclamation mark" } ¡
+      .character{ data: {entity: "#162"},  title: "cent sign" } ¢
+      .character{ data: {entity: "#163"},  title: "pound sign" } £
+      .character{ data: {entity: "#164"},  title: "currency sign" } ¤
+      .character{ data: {entity: "#165"},  title: "yen sign" } ¥
+      .character{ data: {entity: "#166"},  title: "broken bar" } ¦
+      .character{ data: {entity: "#167"},  title: "section sign" } §
+      .character{ data: {entity: "#168"},  title: "spacing diaeresis" } ¨
+      .character{ data: {entity: "#169"},  title: "copyright sign" } ©
+      .character{ data: {entity: "#170"},  title: "feminine ordinal indicator" } ª
+      .character{ data: {entity: "#186"},  title: "masculine ordinal indicator" } º
+      .character{ data: {entity: "#171"},  title: "left pointing guillemet" } «
+      .character{ data: {entity: "#172"},  title: "not sign" } ¬
+      .character{ data: {entity: "#174"},  title: "registered trade mark sign" } ®
+      .character{ data: {entity: "#175"},  title: "spacing macron" } ¯
+      .character{ data: {entity: "#176"},  title: "degree sign" } °
+      .character{ data: {entity: "#177"},  title: "plus-or-minus sign" } ±
+      .character{ data: {entity: "#185"},  title: "superscript one" } ¹
+      .character{ data: {entity: "#178"},  title: "superscript digit two" } ²
+      .character{ data: {entity: "#179"},  title: "superscript digit three" } ³
+      .character{ data: {entity: "#180"},  title: "acute accent" } ´
+      .character{ data: {entity: "#181"},  title: "micro sign" } µ
+      .character{ data: {entity: "#182"},  title: "pilcrow sign" } ¶
+      .character{ data: {entity: "#183"},  title: "middle dot" } ·
+      .character{ data: {entity: "#184"},  title: "cedilla" } ¸
+      .character{ data: {entity: "#187"},  title: "right-pointing double angle quotation mark" } »
+      .character{ data: {entity: "#188"},  title: "fraction one quarter" } ¼
+      .character{ data: {entity: "#189"},  title: "fraction one half" } ½
+      .character{ data: {entity: "#190"},  title: "fraction three quarters" } ¾
+      .character{ data: {entity: "#191"},  title: "inverted question mark" } ¿
+      .character{ data: {entity: "#215"},  title: "multiplication sign" } ×
+      .character{ data: {entity: "#247"},  title: "division sign" } ÷
+      .character{ data: {entity: "#192"},  title: "latin capital letter A with grave" } À
+      .character{ data: {entity: "#224"},  title: "latin small letter a with grave" } à
+      .character{ data: {entity: "#193"},  title: "latin capital letter A with acute" } Á
+      .character{ data: {entity: "#225"},  title: "latin small letter a with acute" } á
+      .character{ data: {entity: "#194"},  title: "latin capital letter A with circumflex" } Â
+      .character{ data: {entity: "#226"},  title: "latin small letter a with circumflex" } â
+      .character{ data: {entity: "#195"},  title: "latin capital letter A with tilde" } Ã
+      .character{ data: {entity: "#227"},  title: "latin small letter a with tilde" } ã
+      .character{ data: {entity: "#196"},  title: "latin capital letter A with diaeresis" } Ä
+      .character{ data: {entity: "#228"},  title: "latin small letter a with diaeresis" } ä
+      .character{ data: {entity: "#197"},  title: "latin capital letter A with ring above" } Å
+      .character{ data: {entity: "#229"},  title: "latin small letter a with ring above" } å
+      .character{ data: {entity: "#200"},  title: "latin capital letter E with grave" } È
+      .character{ data: {entity: "#232"},  title: "latin small letter e with grave" } è
+      .character{ data: {entity: "#201"},  title: "latin capital letter E with acute" } É
+      .character{ data: {entity: "#233"},  title: "latin small letter e with acute" } é
+      .character{ data: {entity: "#202"},  title: "latin capital letter E with circumflex" } Ê
+      .character{ data: {entity: "#234"},  title: "latin small letter e with circumflex" } ê
+      .character{ data: {entity: "#203"},  title: "latin capital letter E with diaeresis" } Ë
+      .character{ data: {entity: "#235"},  title: "latin small letter e with diaeresis" } ë
+      .character{ data: {entity: "#204"},  title: "latin capital letter I with grave" } Ì
+      .character{ data: {entity: "#236"},  title: "latin small letter i with grave" } ì
+      .character{ data: {entity: "#205"},  title: "latin capital letter I with acute" } Í
+      .character{ data: {entity: "#237"},  title: "latin small letter i with acute" } í
+      .character{ data: {entity: "#206"},  title: "latin capital letter I with circumflex" } Î
+      .character{ data: {entity: "#238"},  title: "latin small letter i with circumflex" } î
+      .character{ data: {entity: "#207"},  title: "latin capital letter I with diaeresis" } Ï
+      .character{ data: {entity: "#239"},  title: "latin small letter i with diaeresis" } ï
+      .character{ data: {entity: "#210"},  title: "latin capital letter O with grave" } Ò
+      .character{ data: {entity: "#242"},  title: "latin small letter o with grave" } ò
+      .character{ data: {entity: "#211"},  title: "latin capital letter O with acute" } Ó
+      .character{ data: {entity: "#243"},  title: "latin small letter o with acute" } ó
+      .character{ data: {entity: "#212"},  title: "latin capital letter O with circumflex" } Ô
+      .character{ data: {entity: "#244"},  title: "latin small letter o with circumflex" } ô
+      .character{ data: {entity: "#213"},  title: "latin capital letter O with tilde" } Õ
+      .character{ data: {entity: "#245"},  title: "latin small letter o with tilde" } õ
+      .character{ data: {entity: "#214"},  title: "latin capital letter O with diaeresis" } Ö
+      .character{ data: {entity: "#246"},  title: "latin small letter o with diaeresis" } ö
+      .character{ data: {entity: "#216"},  title: "latin capital letter O with stroke" } Ø
+      .character{ data: {entity: "#248"},  title: "latin small letter o with stroke" } ø
+      .character{ data: {entity: "#217"},  title: "latin capital letter U with grave" } Ù
+      .character{ data: {entity: "#249"},  title: "latin small letter u with grave" } ù
+      .character{ data: {entity: "#218"},  title: "latin capital letter U with acute" } Ú
+      .character{ data: {entity: "#250"},  title: "latin small letter u with acute" } ú
+      .character{ data: {entity: "#219"},  title: "latin capital letter U with circumflex" } Û
+      .character{ data: {entity: "#251"},  title: "latin small letter u with circumflex" } û
+      .character{ data: {entity: "#220"},  title: "latin capital letter U with diaeresis" } Ü
+      .character{ data: {entity: "#252"},  title: "latin small letter u with diaeresis" } ü
+      .character{ data: {entity: "#221"},  title: "latin capital letter Y with acute" } Ý
+      .character{ data: {entity: "#253"},  title: "latin small letter y with acute" } ý
+      .character{ data: {entity: "#376"},  title: "latin capital letter Y with diaeresis" } Ÿ
+      .character{ data: {entity: "#255"},  title: "latin small letter y with diaeresis" } ÿ
+      .character{ data: {entity: "#198"},  title: "latin capital ligature AE" } Æ
+      .character{ data: {entity: "#230"},  title: "latin small ligature ae" } æ
+      .character{ data: {entity: "#338"},  title: "latin capital ligature OE" } Œ
+      .character{ data: {entity: "#339"},  title: "latin small ligature oe" } œ
+      .character{ data: {entity: "#352"},  title: "latin capital letter S with caron" } Š
+      .character{ data: {entity: "#353"},  title: "latin small letter s with caron" } š
+      .character{ data: {entity: "#199"},  title: "latin capital letter C with cedilla" } Ç
+      .character{ data: {entity: "#231"},  title: "latin small letter c with cedilla" } ç
+      .character{ data: {entity: "#208"},  title: "latin capital letter ETH" } Ð
+      .character{ data: {entity: "#240"},  title: "latin small letter eth" } ð
+      .character{ data: {entity: "#209"},  title: "latin capital letter N with tilde" } Ñ
+      .character{ data: {entity: "#241"},  title: "latin small letter n with tilde" } ñ
+      .character{ data: {entity: "#222"},  title: "latin capital letter THORN" } Þ
+      .character{ data: {entity: "#254"},  title: "latin small letter thorn" } þ
+      .character{ data: {entity: "#223"},  title: "latin small letter sharp s (ess-zed)" } ß
+      .character{ data: {entity: "#402"},  title: "latin small f with hook (function)" } ƒ
+      .character{ data: {entity: "#913"},  title: "greek capital letter alpha" } Α
+      .character{ data: {entity: "#914"},  title: "greek capital letter beta" } Β
+      .character{ data: {entity: "#915"},  title: "greek capital letter gamma" } Γ
+      .character{ data: {entity: "#916"},  title: "greek capital letter delta" } Δ
+      .character{ data: {entity: "#917"},  title: "greek capital letter epsilon" } Ε
+      .character{ data: {entity: "#918"},  title: "greek capital letter zeta" } Ζ
+      .character{ data: {entity: "#919"},  title: "greek capital letter eta" } Η
+      .character{ data: {entity: "#920"},  title: "greek capital letter theta" } Θ
+      .character{ data: {entity: "#921"},  title: "greek capital letter iota" } Ι
+      .character{ data: {entity: "#922"},  title: "greek capital letter kappa" } Κ
+      .character{ data: {entity: "#923"},  title: "greek capital letter lambda" } Λ
+      .character{ data: {entity: "#924"},  title: "greek capital letter mu" } Μ
+      .character{ data: {entity: "#925"},  title: "greek capital letter nu" } Ν
+      .character{ data: {entity: "#926"},  title: "greek capital letter xi" } Ξ
+      .character{ data: {entity: "#927"},  title: "greek capital letter omicron" } Ο
+      .character{ data: {entity: "#928"},  title: "greek capital letter pi" } Π
+      .character{ data: {entity: "#929"},  title: "greek capital letter rho" } Ρ
+      .character{ data: {entity: "#931"},  title: "greek capital letter sigma" } Σ
+      .character{ data: {entity: "#932"},  title: "greek capital letter tau" } Τ
+      .character{ data: {entity: "#933"},  title: "greek capital letter upsilon" } Υ
+      .character{ data: {entity: "#934"},  title: "greek capital letter phi" } Φ
+      .character{ data: {entity: "#935"},  title: "greek capital letter chi" } Χ
+      .character{ data: {entity: "#936"},  title: "greek capital letter psi" } Ψ
+      .character{ data: {entity: "#937"},  title: "greek capital letter omega" } Ω
+      .character{ data: {entity: "#945"},  title: "greek small letter alpha" } α
+      .character{ data: {entity: "#946"},  title: "greek small letter beta" } β
+      .character{ data: {entity: "#947"},  title: "greek small letter gamma" } γ
+      .character{ data: {entity: "#948"},  title: "greek small letter delta" } δ
+      .character{ data: {entity: "#949"},  title: "greek small letter epsilon" } ε
+      .character{ data: {entity: "#950"},  title: "greek small letter zeta" } ζ
+      .character{ data: {entity: "#951"},  title: "greek small letter eta" } η
+      .character{ data: {entity: "#952"},  title: "greek small letter theta" } θ
+      .character{ data: {entity: "#953"},  title: "greek small letter iota" } ι
+      .character{ data: {entity: "#954"},  title: "greek small letter kappa" } κ
+      .character{ data: {entity: "#955"},  title: "greek small letter lambda" } λ
+      .character{ data: {entity: "#956"},  title: "greek small letter mu" } μ
+      .character{ data: {entity: "#957"},  title: "greek small letter nu" } ν
+      .character{ data: {entity: "#958"},  title: "greek small letter xi" } ξ
+      .character{ data: {entity: "#959"},  title: "greek small letter omicron" } ο
+      .character{ data: {entity: "#960"},  title: "greek small letter pi" } π
+      .character{ data: {entity: "#961"},  title: "greek small letter rho" } ρ
+      .character{ data: {entity: "#962"},  title: "greek small letter final sigma" } ς
+      .character{ data: {entity: "#963"},  title: "greek small letter sigma" } σ
+      .character{ data: {entity: "#964"},  title: "greek small letter tau" } τ
+      .character{ data: {entity: "#965"},  title: "greek small letter upsilon" } υ
+      .character{ data: {entity: "#966"},  title: "greek small letter phi" } φ
+      .character{ data: {entity: "#967"},  title: "greek small letter chi" } χ
+      .character{ data: {entity: "#968"},  title: "greek small letter psi" } ψ
+      .character{ data: {entity: "#969"},  title: "greek small letter omega" } ω
+      .character{ data: {entity: "#977"},  title: "greek small letter theta symbol" } ϑ
+      .character{ data: {entity: "#978"},  title: "greek upsilon with hook symbol" } ϒ
+      .character{ data: {entity: "#982"},  title: "greek pi symbol" } ϖ
+      .character{ data: {entity: "#8226"}, title: "bullet (black small circle)" } •
+      .character{ data: {entity: "#8230"}, title: "horizontal ellipsis" } …
+      .character{ data: {entity: "#8242"}, title: "prime (minutes/feet)" } ′
+      .character{ data: {entity: "#8243"}, title: "double prime (seconds/inches)" } ″
+      .character{ data: {entity: "#8254"}, title: "overline" } ‾
+      .character{ data: {entity: "#8260"}, title: "fraction slash" } ⁄
+      .character{ data: {entity: "#8472"}, title: "Weierstrass p" } ℘
+      .character{ data: {entity: "#8465"}, title: "imaginary part" } ℑ
+      .character{ data: {entity: "#8476"}, title: "real part symbol" } ℜ
+      .character{ data: {entity: "#8482"}, title: "trade mark sign" } ™
+      .character{ data: {entity: "#8501"}, title: "first transfinite cardinal" } ℵ
+      .character{ data: {entity: "#8592"}, title: "leftwards arrow" } ←
+      .character{ data: {entity: "#8593"}, title: "upwards arrow" } ↑
+      .character{ data: {entity: "#8594"}, title: "rightwards arrow" } →
+      .character{ data: {entity: "#8595"}, title: "downwards arrow" } ↓
+      .character{ data: {entity: "#8596"}, title: "left right arrow" } ↔
+      .character{ data: {entity: "#8629"}, title: "downwards arrow with corner leftwards" } ↵
+      .character{ data: {entity: "#8656"}, title: "leftwards double arrow" } ⇐
+      .character{ data: {entity: "#8657"}, title: "upwards double arrow" } ⇑
+      .character{ data: {entity: "#8658"}, title: "rightwards double arrow" } ⇒
+      .character{ data: {entity: "#8659"}, title: "downwards double arrow" } ⇓
+      .character{ data: {entity: "#8660"}, title: "left right double arrow" } ⇔
+      .character{ data: {entity: "#8704"}, title: "for all" } ∀
+      .character{ data: {entity: "#8706"}, title: "partial differential" } ∂
+      .character{ data: {entity: "#8707"}, title: "there exists" } ∃
+      .character{ data: {entity: "#8709"}, title: "empty set (null set/diameter)" } ∅
+      .character{ data: {entity: "#8711"}, title: "nabla (backward difference)" } ∇
+      .character{ data: {entity: "#8712"}, title: "element of" } ∈
+      .character{ data: {entity: "#8713"}, title: "not an element of" } ∉
+      .character{ data: {entity: "#8715"}, title: "contains as member" } ∋
+      .character{ data: {entity: "#8719"}, title: "n-ary product (product sign)" } ∏
+      .character{ data: {entity: "#8721"}, title: "n-ary sumation" } ∑
+      .character{ data: {entity: "#8722"}, title: "minus sign" } −
+      .character{ data: {entity: "#8727"}, title: "asterisk operator" } ∗
+      .character{ data: {entity: "#8730"}, title: "square root (radical sign)" } √
+      .character{ data: {entity: "#8733"}, title: "proportional to" } ∝
+      .character{ data: {entity: "#8734"}, title: "infinity" } ∞
+      .character{ data: {entity: "#8736"}, title: "angle" } ∠
+      .character{ data: {entity: "#8743"}, title: "logical and (wedge)" } ∧
+      .character{ data: {entity: "#8744"}, title: "logical or (vee)" } ∨
+      .character{ data: {entity: "#8745"}, title: "intersection (cap)" } ∩
+      .character{ data: {entity: "#8746"}, title: "union (cup)" } ∪
+      .character{ data: {entity: "#8747"}, title: "integral" } ∫
+      .character{ data: {entity: "#8756"}, title: "therefore" } ∴
+      .character{ data: {entity: "#8764"}, title: "tilde operator (varies with/similar to)" } ∼
+      .character{ data: {entity: "#8773"}, title: "approximately equal to" } ≅
+      .character{ data: {entity: "#8776"}, title: "almost equal to (asymptotic to)" } ≈
+      .character{ data: {entity: "#8800"}, title: "not equal to" } ≠
+      .character{ data: {entity: "#8801"}, title: "identical to" } ≡
+      .character{ data: {entity: "#8804"}, title: "less-than or equal to" } ≤
+      .character{ data: {entity: "#8805"}, title: "greater-than or equal to" } ≥
+      .character{ data: {entity: "#8834"}, title: "subset of" } ⊂
+      .character{ data: {entity: "#8835"}, title: "superset of" } ⊃
+      .character{ data: {entity: "#8836"}, title: "not a subset of" } ⊄
+      .character{ data: {entity: "#8838"}, title: "subset of or equal to" } ⊆
+      .character{ data: {entity: "#8839"}, title: "superset of or equal to" } ⊇
+      .character{ data: {entity: "#8853"}, title: "circled plus (direct sum)" } ⊕
+      .character{ data: {entity: "#8855"}, title: "circled times (vector product)" } ⊗
+      .character{ data: {entity: "#8869"}, title: "up tack (orthogonal to/perpendicular)" } ⊥
+      .character{ data: {entity: "#8901"}, title: "dot operator" } ⋅
+      .character{ data: {entity: "#8968"}, title: "left ceiling (apl upstile)" } ⌈
+      .character{ data: {entity: "#8969"}, title: "right ceiling" } ⌉
+      .character{ data: {entity: "#8970"}, title: "left floor (apl downstile)" } ⌊
+      .character{ data: {entity: "#8971"}, title: "right floor" } ⌋
+      .character{ data: {entity: "#9001"}, title: "left-pointing angle bracket (bra)" } 〈
+      .character{ data: {entity: "#9002"}, title: "right-pointing angle bracket (ket)" } 〉
+      .character{ data: {entity: "#9674"}, title: "lozenge" } ◊
+      .character{ data: {entity: "#9824"}, title: "black spade suit" } ♠
+      .character{ data: {entity: "#9827"}, title: "black club suit (shamrock)" } ♣
+      .character{ data: {entity: "#9829"}, title: "black heart suit (valentine)" } ♥
+      .character{ data: {entity: "#9830"}, title: "black diamond suit" } ♦
+      .character{ data: {entity: "#x2603"}, title: "snowman" } ☃

data/app/views/mercury/modals/htmleditor.html.haml

@@ -0,0 +1,8 @@
+= semantic_form_for 'htmleditor', { html: { id: 'mercury_htmleditor', style: 'width:650px' } } do |f|
+
+  %textarea.mercury-modal-pane-container{ rows: '5' }
+
+  .mercury-modal-controls
+
+    = f.buttons do
+      = f.commit_button 'Save and Replace'

data/app/views/mercury/modals/link.html.haml

@@ -0,0 +1,31 @@
+= semantic_form_for 'link', { html: { id: 'mercury_link', style: 'width:600px' } } do |f|
+
+  .mercury-modal-pane-container
+    .mercury-modal-pane
+
+      = f.inputs id: 'link_text_container' do
+        = f.input :text, required: false, label: 'Link Content'
+
+      = f.inputs 'Standard Links' do
+        = f.input :external_url, required: false, input_html: { class: 'selectable' },
+                  label: '<input name="link_type" type="radio" value="external_url" checked="checked"/>URL'.html_safe
+
+      = f.inputs 'Index / Bookmark Links' do
+        = f.input :existing_bookmark, as: :select, required: false, input_html: { class: 'selectable' }, collection: [], include_blank: false,
+                  label: '<input name="link_type" type="radio" value="existing_bookmark"/>Existing Links'.html_safe
+        = f.input :new_bookmark, required: false, input_html: { class: 'selectable' },
+                  label: '<input name="link_type" type="radio" value="new_bookmark"/>Bookmark'.html_safe
+
+      = f.inputs 'Options' do
+        = f.input :target, as: :select, required: false, label: 'Link Target',
+                  include_blank: 'Self (the same window or tab)',
+                  collection: [['Blank (a new window or tab)', '_blank'], ['Top (removes any frames)', '_top'], ['Popup Window (javascript new window popup)', 'popup']]
+
+        #popup_options.link-target-options{ style: 'display:none' }
+          = f.input :popup_width, required: false, label: 'Popup Width'
+          = f.input :popup_height, required: false, label: 'Popup Height'
+
+  .mercury-modal-controls
+
+    = f.buttons do
+      = f.commit_button 'Insert Link'