Merge pull request #84 from oerpub/copy-paste-math-v2

Special copy/paste handler for math.

src/plugins/oer/copy/lib/copy-plugin.coffee

@@ -2,6 +2,23 @@ define ['aloha', 'aloha/plugin', 'jquery', 'ui/ui', 'ui/button', 'PubSub', './pa
 
   buffer = ''
   srcpath = null
+  content_type = null
+
+  getSection = ($el) ->
+    headings = ['h1', 'h2', 'h3']
+    level = headings.indexOf $el[0].nodeName.toLowerCase()
+    # Pick up all elements until the next heading of the same level or higher
+    selector = headings.slice(0, level+1).join(',')
+
+    if $el.addBack
+      # Jquery >= 1.8
+      $el = $el.nextUntil(selector).addBack()
+    else
+      # Jquery < 1.8
+      $el = $el.nextUntil(selector).andSelf()
+    html = ''
+    html += jQuery(e).outerHtml() for e in $el
+    return html
 
   Plugin.create 'copy',
     getCurrentPath: ->
@@ -26,13 +43,21 @@ define ['aloha', 'aloha/plugin', 'jquery', 'ui/ui', 'ui/button', 'PubSub', './pa
       else
         return srcpath
 
-    buffer: (content, path) ->
+    getContentType: ->
+      if localStorage
+        return localStorage.alohaOerCopyContentType
+      else
+        return content_type
+
+    buffer: (content, type, path) ->
       buffer = content
       buffer = buffer.replace /id="[^"]+"/, ''
-      srcpath = path
+      content_type = type or 'text/html'
+      srcpath = path or @getCurrentPath()
 
       localStorage.alohaOerCopyBuffer = buffer if localStorage
       localStorage.alohaOerCopySrcPath = srcpath if localStorage
+      localStorage.alohaOerCopyContentType = content_type if localStorage
 
       # Disable copy button, it will re-enable when you move the cursor. This
       # gives visual feedback and prevents you from copying the same thing
@@ -42,25 +67,16 @@ define ['aloha', 'aloha/plugin', 'jquery', 'ui/ui', 'ui/button', 'PubSub', './pa
       @pastebutton.flash?()
 
     copySection: ($el) ->
-      headings = ['h1', 'h2', 'h3']
-      level = headings.indexOf $el[0].nodeName.toLowerCase()
-      # Pick up all elements until the next heading of the same level or higher
-      selector = headings.slice(0, level+1).join(',')
-
-      if $el.addBack
-        # Jquery >= 1.8
-        $el = $el.nextUntil(selector).addBack()
-      else
-        # Jquery < 1.8
-        $el = $el.nextUntil(selector).andSelf()
-      html = ''
-      html += jQuery(e).outerHtml() for e in $el
-
-      path = @getCurrentPath()
-      if path != null
-        @buffer html, path
-      else
-        @buffer html
+      content = getSection($el)
+
+      # Fire a copy event, allow something more suitable to handle this.
+      evt = $.Event('copy')
+      evt.oerContent = content
+      evt.clipboardData =
+        setData: (t, c) => @buffer c, t
+      Aloha.activeEditable.obj.trigger(evt)
+      if not evt.isDefaultPrevented()
+        @buffer content
 
     init: ->
       plugin = @
@@ -89,7 +105,19 @@ define ['aloha', 'aloha/plugin', 'jquery', 'ui/ui', 'ui/button', 'PubSub', './pa
         tooltip: 'Paste',
         click: (e) ->
           e.preventDefault()
-          range = Aloha.Selection.getRangeObject()
+
+          # Fire a paste event, allow something else to handle this, if that
+          # something deems itself more suitable.
+          evt = $.Event('paste')
+          evt.clipboardData =
+            getData: (t) ->
+              if t == plugin.getContentType()
+                return plugin.getBuffer()
+              return null
+          Aloha.activeEditable.obj.trigger(evt)
+          return if evt.isDefaultPrevented()
+
+          # Default paste behaviour follows
           $elements = jQuery plugin.getBuffer()
 
           dstpath = plugin.getCurrentPath()
@@ -111,6 +139,7 @@ define ['aloha', 'aloha/plugin', 'jquery', 'ui/ui', 'ui/button', 'PubSub', './pa
                 else
                   console.log "Image path already absolute: #{imgpath}"
 
+          range = Aloha.Selection.getRangeObject()
           GENTICS.Utils.Dom.insertIntoDOM $elements, range, Aloha.activeEditable.obj
 
       @copybutton = UI.adopt "copy", Button,

src/plugins/oer/math/css/math.css

@@ -102,6 +102,6 @@ math,
     background-image: url(../img/remove-02.png);
 }
 
-button.done {
+button.done, button.copy {
     float: right;
 }

src/plugins/oer/math/lib/math-plugin.coffee

@@ -37,7 +37,7 @@
 #    </span>
 
 
-define [ 'aloha', 'aloha/plugin', 'jquery', 'overlay/overlay-plugin', 'ui/ui', 'css!../../../oer/math/css/math.css' ], (Aloha, Plugin, jQuery, Popover, UI) ->
+define [ 'aloha', 'aloha/plugin', 'jquery', 'overlay/overlay-plugin', 'ui/ui', 'copy/copy-plugin', 'css!../../../oer/math/css/math.css' ], (Aloha, Plugin, jQuery, Popover, UI, Copy) ->
 
   EDITOR_HTML = '''
     <div class="math-editor-dialog">
@@ -61,6 +61,7 @@ define [ 'aloha', 'aloha/plugin', 'jquery', 'overlay/overlay-plugin', 'ui/ui', '
               <input type="radio" name="mime-type" value="text/plain"> Plain text
           </label>
           <button class="btn btn-primary done">Done</button>
+          <button class="btn copy">Copy</button>
         </div>
     </div>
   '''
@@ -138,6 +139,55 @@ define [ 'aloha', 'aloha/plugin', 'jquery', 'overlay/overlay-plugin', 'ui/ui', '
     if editable.obj.is(':not(.aloha-root-editable)')
       return
 
+    # Bind copy and paste handlers. When a user copies content with math, place
+    # it on the clipboard with a different content type. This will prevent the
+    # cleanup that the browser does on namespaces. Use this alternative content
+    # type again when pasting. Prevent the browser default. This will only work
+    # in browsers that support event.clipboardData, chrome and safari to date.
+    editable.obj.on 'copy', (e) ->
+      content = e.oerContent or Aloha.getSelection().getRangeAt(0).cloneContents()
+      $content = $('<div />').append(content)
+      # If there is math among the content we're copying, treat it specially.
+      # Check that we also have a script tag in our selection, that occurs
+      # towards the end of the math and ensures we have the whole of it.
+      # The idea is to only do custom copy/paste if we need it, and let the
+      # browser handle other content. Also buffer it in our local copy buffer.
+      if $content.has('span.math-element').length and $content.has('script').length
+        e.preventDefault()
+        clipboard = e.clipboardData or e.originalEvent.clipboardData
+        clipboard.setData 'text/oerpub-content', $content.html()
+      else
+        Copy.buffer $content.html()
+
+    editable.obj.on 'paste', (e) ->
+      clipboard = e.clipboardData or e.originalEvent.clipboardData
+      content = clipboard.getData('text/oerpub-content')
+      if content
+        e.preventDefault()
+        $content = jQuery(
+          '<div class="aloha-ephemera-wrapper newly-pasted-content" />')
+          .append(content).hide()
+
+        # Remove ids, new ones will be assigned
+        $content.find('*[id]').removeAttr('id')
+
+        # Paste content into editor
+        range = Aloha.getSelection().getRangeAt(0)
+        range.insertNode($content.get(0))
+
+        # Re-typeset math, because we need our context menu back
+        math = []
+        $content.find('.math-element').each (idx, el) ->
+          deferred = $.Deferred()
+          math.push(deferred)
+          triggerMathJax jQuery(el), () -> deferred.resolve()
+
+        # When we're done typesetting, show the content and unwrap it.
+        $.when.apply($content, math).done ->
+          $content.each () ->
+            $$$ = jQuery(@)
+            $$$.replaceWith $$$.contents()
+
     # Bind ctrl+m to math insert/mathify
     editable.obj.bind 'keydown', 'ctrl+m', (evt) ->
       insertMath()
@@ -280,6 +330,8 @@ define [ 'aloha', 'aloha/plugin', 'jquery', 'overlay/overlay-plugin', 'ui/ui', '
     $editor.find('.remove').on 'click', =>
       $span.trigger 'hide-popover'
       cleanupFormula($editor, $span, true)
+    $editor.find('.copy').on 'click', =>
+      Copy.buffer $span.outerHtml(), 'text/oerpub-content'
 
     $formula = $editor.find('.formula')
 
@@ -464,6 +516,13 @@ define [ 'aloha', 'aloha/plugin', 'jquery', 'overlay/overlay-plugin', 'ui/ui', '
   UI.adopt 'insertMath', null,
     click: () -> insertMath()
 
+  # Add a copy option to the mathjax menu
+  MathJax.Callback.Queue MathJax.Hub.Register.StartupHook "MathMenu Ready", () ->
+    copyCommand = MathJax.Menu.ITEM.COMMAND "Copy Math", (e,f,g) ->
+      $script = jQuery(document.getElementById(MathJax.Menu.jax.inputID))
+      Copy.buffer $script.parent().parent().outerHtml(), 'text/oerpub-content'
+    MathJax.Menu.menu.items.unshift copyCommand
+
   ob =
     selector: '.math-element'
     populator: buildEditor