scrivito-medium-editor 0.0.3 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ad64db0faae3ded0f08706ae44afb519450f1ab0
-  data.tar.gz: 73e66a90390e82b6af2b0c915f75033f946e198c
+  metadata.gz: 28d9531d02acc90b80f75d0e403f64bdb57a7969
+  data.tar.gz: c112fe03485146f350b80a8d366ce9ffbe250418
 SHA512:
-  metadata.gz: bd1908f024b7b18b899408375e3dc5f86c4f1ab3519b266eb854c24aec30c68652545ddc460fac50e649fce76edeb8f8293855802f49d4840f0af78da9e24819
-  data.tar.gz: 9325535cce58110e731e7d9627c6573af1b5418ce58c5cdcdb6a7ef94522c44b89dd6914803ed225399114534296671d417afe8b283e4b78248ce77b50bd8725
+  metadata.gz: 5a3f54bab3ab21a8934414599afd0fb84244e5983ecaa34ebd4a9786f4becec1e670262e19158374668dffef4acd2b66a81635cb334e3f5b2861f0fc6faf5f6c
+  data.tar.gz: 2e6483f8c0b3055f35abe706c40d1dc67452252f48ecb54d6563ca8e3b7ce80171757243408a42a0f80cc537bbee64648d1ab7af9a4de492dce3736838697c67

data/app/assets/javascripts/scrivito-medium-editor.js

@@ -3,31 +3,87 @@
 
 ;(function() {
 
-scrivito.on('content', function(content) {
-  if (!scrivito.in_editable_view()) { return; }
+var ScrivitoAnchor = MediumEditor.extensions.anchor.extend({
+  name: 'scrivito_anchor',
+  contentDefault: '<i class="scrivito_customer_icon sci_link"></i>',
 
-  $(content).find('[data-editor=medium]').each(function() {
-    var contenteditable = $(this);
+  handleClick: function (event) {
+    if (!this.isDisplayed()) {
+      var selection_range = MediumEditor.selection.getSelectionRange(this.document);
+      var selected_parent = MediumEditor.selection.getSelectedParentElement(selection_range);
+      var first_text_element = MediumEditor.util.getFirstTextNode(selected_parent);
+      var link_element = MediumEditor.util.getClosestTag(first_text_element, 'a');
+      var link_value = $(link_element).attr('href');
+      this.showForm(link_value);
+    }
+    return false;
+  },
+
+  getTemplate: function() {
+    return '<i class="medium-editor-toolbar-browse scrivito_customer_icon sci_collection"></i>' +
+      '<input type="text" class="medium-editor-toolbar-input" placeholder="'+this.placeholderText+'">' +
+      '<i class="medium-editor-toolbar-save scrivito_customer_icon sci_check"></i>' +
+      '<i class="medium-editor-toolbar-close scrivito_customer_icon sci_cross"></i>';
+  },
+
+  attachFormEvents: function(form) {
+    MediumEditor.extensions.anchor.prototype.attachFormEvents.call(this, form);
+
+    form = $(form);
+    var input = form.find('.medium-editor-toolbar-input');
+    form.find('.medium-editor-toolbar-browse').on('click', function() {
+      scrivito.content_browser.open({selection: input.val(), selection_mode: 'single'})
+        .done(function(selection) { if (selection) { input.val(selection); } });
+      return false;
+    });
+  },
 
-    var config;
-    if (contenteditable.attr('data-medium-editor')) {
-      config = JSON.parse(contenteditable.attr('data-medium-editor'));
+  completeFormSave: function (opts) {
+    this.base.restoreSelection();
+    if (opts.url) {
+      this.execAction(this.action, opts);
     } else {
-      config = {buttons: [
+      this.execAction('unlink');
+    }
+    this.base.checkSelection();
+  },
+});
+
+var editor_options = function(toolbar_options) {
+  var options = {
+    anchorPreview: false,
+    extensions: {scrivito_anchor: new ScrivitoAnchor()},
+    toolbar: {
+      buttons: [
+        'h1',
+        'h2',
+        'h3',
         'bold',
         'italic',
+        'scrivito_anchor',
         'underline',
-        'header1',
-        'header2',
+        'orderedlist',
         'unorderedlist',
-        'orderedlist'
-      ]};
+        'indent',
+        'outdent',
+        'justifyLeft',
+        'justifyCenter',
+        'justifyFull'
+      ]
     }
+  };
+  if (toolbar_options) { options.toolbar = toolbar_options; }
+  return options;
+};
 
-    new MediumEditor(contenteditable, config);
+scrivito.on('content', function(content) {
+  if (!scrivito.in_editable_view()) { return; }
 
-    contenteditable.on('input', function() {
-      contenteditable.scrivito('save', $(this).html());
+  $(content).find('[data-editor=medium]').each(function() {
+    var dom_element = $(this);
+    new MediumEditor(dom_element, editor_options(dom_element.data('medium-editor-toolbar')));
+    dom_element.on('input', function() {
+      dom_element.scrivito('save', dom_element.html());
     });
   });
 });

data/app/assets/stylesheets/scrivito-medium-editor.css

@@ -3,5 +3,18 @@
  *= require medium-editor-theme-flat
  *= require_self
  */
-
+.medium-toolbar-arrow-under::after { top: auto;}
+.medium-editor-toolbar { z-index: 11112; margin:0 10px; background:rgba(67, 148, 57, 0.9);
+  border-radius:4px;}
+.medium-editor-toolbar li button { height:40px; min-width:40px; padding:10px;
+  border:none; margin:1px; background:rgba(0,0,0,.1);
+  }
 .medium-editor-toolbar li button * { color: inherit; }
+.medium-editor-toolbar li button .scrivito_customer_icon { font-size:18px;}
+.medium-editor-toolbar-form .scrivito_customer_icon { font-size:18px;
+  min-width:40px; height:40px; line-height: 40px!important;
+  display:inline-block; text-align:center;
+  color: #fff; margin: 1px; background:rgba(0,0,0,.1);
+  }
+.medium-editor-toolbar-form .scrivito_customer_icon:hover {background:rgba(0,0,0,.3);}
+.medium-editor-toolbar-form .medium-editor-toolbar-input {margin: 1px;height:40px; background:rgba(0,0,0,.3);}

data/lib/scrivito_medium_editor/version.rb

@@ -1,3 +1,3 @@
 module ScrivitoMediumEditor
-  VERSION = '0.0.3'.freeze
+  VERSION = '0.0.5'.freeze
 end

data/vendor/assets/javascripts/medium-editor.js

@@ -1905,7 +1905,7 @@ var Selection;
                 }
             }
 
-            if (selectionState.emptyBlocksIndex && selectionState.end === nextCharIndex) {
+            if (selectionState.emptyBlocksIndex) {
                 var targetNode = Util.getTopBlockContainer(range.startContainer),
                     index = 0;
                 // Skip over empty blocks until we hit the block we want the selection to be in
@@ -1921,7 +1921,6 @@ var Selection;
                 // We're selecting a high-level block node, so make sure the cursor gets moved into the deepest
                 // element at the beginning of the block
                 range.setStart(Util.getFirstSelectableLeafNode(targetNode), 0);
-                range.collapse(true);
             }
 
             // If the selection is right at the ending edge of a link, put it outside the anchor tag instead of inside.
@@ -2541,6 +2540,9 @@ var Events;
         },
 
         updateInput: function (target, eventObj) {
+            if (!this.contentCache) {
+                return;
+            }
             // An event triggered which signifies that the user may have changed someting
             // Look in our cache of input for the contenteditables to see if something changed
             var index = target.getAttribute('medium-editor-index');
@@ -3066,10 +3068,11 @@ var AnchorForm;
             event.preventDefault();
             event.stopPropagation();
 
-            var selectedParentElement = Selection.getSelectedParentElement(Selection.getSelectionRange(this.document)),
-                firstTextNode = Util.getFirstTextNode(selectedParentElement);
+            var range = Selection.getSelectionRange(this.document);
 
-            if (Util.getClosestTag(firstTextNode, 'a')) {
+            if (range.startContainer.nodeName.toLowerCase() === 'a' ||
+                range.endContainer.nodeName.toLowerCase() === 'a' ||
+                Util.getClosestTag(Selection.getSelectedParentElement(range), 'a')) {
                 return this.execAction('unlink');
             }
 
@@ -3117,10 +3120,12 @@ var AnchorForm;
                 // fixme: ideally, this targetCheckboxText would be a formLabel too,
                 // figure out how to deprecate? also consider `fa-` icon default implcations.
                 template.push(
+                    '<div class="medium-editor-toolbar-form-row">',
                     '<input type="checkbox" class="medium-editor-toolbar-anchor-target">',
                     '<label>',
                     this.targetCheckboxText,
-                    '</label>'
+                    '</label>',
+                    '</div>'
                 );
             }
 
@@ -3128,10 +3133,12 @@ var AnchorForm;
                 // fixme: expose this `Button` text as a formLabel property, too
                 // and provide similar access to a `fa-` icon default.
                 template.push(
+                    '<div class="medium-editor-toolbar-form-row">',
                     '<input type="checkbox" class="medium-editor-toolbar-anchor-button">',
                     '<label>',
                     this.customClassOptionText,
-                    '</label>'
+                    '</label>',
+                    '</div>'
                 );
             }
 
@@ -3149,16 +3156,40 @@ var AnchorForm;
             this.getInput().value = '';
         },
 
-        showForm: function (linkValue) {
-            var input = this.getInput();
+        showForm: function (opts) {
+            var input = this.getInput(),
+                targetCheckbox = this.getAnchorTargetCheckbox(),
+                buttonCheckbox = this.getAnchorButtonCheckbox();
+
+            opts = opts || { url: '' };
+            // TODO: This is for backwards compatability
+            // We don't need to support the 'string' argument in 6.0.0
+            if (typeof opts === 'string') {
+                opts = {
+                    url: opts
+                };
+            }
 
             this.base.saveSelection();
             this.hideToolbarDefaultActions();
             this.getForm().style.display = 'block';
             this.setToolbarPosition();
 
-            input.value = linkValue || '';
+            input.value = opts.url;
             input.focus();
+
+            // If we have a target checkbox, we want it to be checked/unchecked
+            // based on whether the existing link has target=_blank
+            if (targetCheckbox) {
+                targetCheckbox.checked = opts.target === '_blank';
+            }
+
+            // If we have a custom class checkbox, we want it to be checked/unchecked
+            // based on whether an existing link already has the class
+            if (buttonCheckbox) {
+                var classList = opts.buttonClass ? opts.buttonClass.split(' ') : [];
+                buttonCheckbox.checked = (classList.indexOf(this.customClassOption) !== -1);
+            }
         },
 
         // Called by core when tearing down medium-editor (destroy)
@@ -3178,8 +3209,8 @@ var AnchorForm;
 
         getFormOpts: function () {
             // no notion of private functions? wanted `_getFormOpts`
-            var targetCheckbox = this.getForm().querySelector('.medium-editor-toolbar-anchor-target'),
-                buttonCheckbox = this.getForm().querySelector('.medium-editor-toolbar-anchor-button'),
+            var targetCheckbox = this.getAnchorTargetCheckbox(),
+                buttonCheckbox = this.getAnchorButtonCheckbox(),
                 opts = {
                     url: this.getInput().value
                 };
@@ -3258,6 +3289,14 @@ var AnchorForm;
             return this.getForm().querySelector('input.medium-editor-toolbar-input');
         },
 
+        getAnchorTargetCheckbox: function () {
+            return this.getForm().querySelector('.medium-editor-toolbar-anchor-target');
+        },
+
+        getAnchorButtonCheckbox: function () {
+            return this.getForm().querySelector('.medium-editor-toolbar-anchor-button');
+        },
+
         handleTextboxKeyup: function (event) {
             // For ENTER -> create the anchor
             if (event.keyCode === Util.keyCode.ENTER) {
@@ -3427,7 +3466,12 @@ var AnchorPreview;
                 // We may actually be displaying the anchor form, which should be controlled by delay
                 this.base.delay(function () {
                     if (activeAnchor) {
-                        anchorExtension.showForm(activeAnchor.attributes.href.value);
+                        var opts = {
+                            url: activeAnchor.attributes.href.value,
+                            target: activeAnchor.getAttribute('target'),
+                            buttonClass: activeAnchor.getAttribute('class')
+                        };
+                        anchorExtension.showForm(opts);
                         activeAnchor = null;
                     }
                 }.bind(this));
@@ -3451,7 +3495,7 @@ var AnchorPreview;
 
             // Detect empty href attributes
             // The browser will make href="" or href="#top"
-            // into absolute urls when accessed as event.targed.href, so check the html
+            // into absolute urls when accessed as event.target.href, so check the html
             if (!/href=["']\S+["']/.test(target.outerHTML) || /href=["']#\S+["']/.test(target.outerHTML)) {
                 return true;
             }
@@ -3918,7 +3962,7 @@ var KeyboardCommands;
                     event.preventDefault();
                     event.stopPropagation();
 
-                    // command can be false so the shortcurt is just disabled
+                    // command can be false so the shortcut is just disabled
                     if (false !== data.command) {
                         this.execAction(data.command);
                     }
@@ -4245,8 +4289,7 @@ var PasteHandler;
         },
 
         cleanPaste: function (text) {
-            var i, elList, workEl,
-                el = Selection.getSelectionElement(this.window),
+            var i, elList,
                 multiline = /<p|<br|<div/.test(text),
                 replacements = createReplacements().concat(this.cleanReplacements || []);
 
@@ -4262,31 +4305,6 @@ var PasteHandler;
             elList = text.split('<br><br>');
 
             this.pasteHTML('<p>' + elList.join('</p><p>') + '</p>');
-
-            try {
-                this.document.execCommand('insertText', false, '\n');
-            } catch (ignore) { }
-
-            // block element cleanup
-            elList = el.querySelectorAll('a,p,div,br');
-            for (i = 0; i < elList.length; i += 1) {
-                workEl = elList[i];
-
-                // Microsoft Word replaces some spaces with newlines.
-                // While newlines between block elements are meaningless, newlines within
-                // elements are sometimes actually spaces.
-                workEl.innerHTML = workEl.innerHTML.replace(/\n/gi, ' ');
-
-                switch (workEl.nodeName.toLowerCase()) {
-                    case 'p':
-                    case 'div':
-                        this.filterCommonBlocks(workEl);
-                        break;
-                    case 'br':
-                        this.filterLineBreak(workEl);
-                        break;
-                }
-            }
         },
 
         pasteHTML: function (html, options) {
@@ -4305,7 +4323,6 @@ var PasteHandler;
             this.cleanupSpans(fragmentBody);
 
             elList = fragmentBody.querySelectorAll('*');
-
             for (i = 0; i < elList.length; i += 1) {
                 workEl = elList[i];
 
@@ -4317,6 +4334,27 @@ var PasteHandler;
                 Util.cleanupTags(workEl, options.cleanTags);
             }
 
+            // block element cleanup
+            elList = fragmentBody.querySelectorAll('a,p,div,br');
+            for (i = 0; i < elList.length; i += 1) {
+                workEl = elList[i];
+
+                // Microsoft Word replaces some spaces with newlines.
+                // While newlines between block elements are meaningless, newlines within
+                // elements are sometimes actually spaces.
+                workEl.innerHTML = workEl.innerHTML.replace(/\n/gi, ' ');
+
+                switch (workEl.nodeName.toLowerCase()) {
+                    case 'p':
+                    case 'div':
+                        this.filterCommonBlocks(workEl);
+                        break;
+                    case 'br':
+                        this.filterLineBreak(workEl);
+                        break;
+                }
+            }
+
             Util.insertHTMLCommand(this.document, fragmentBody.innerHTML.replace(/&nbsp;/g, ' '));
         },
 
@@ -4863,7 +4901,7 @@ var Toolbar;
                         offset = offset + 1;
                     }
                     selectionRange = Selection.select(this.document, adjacentNode, offset,
-                        selectionRange.endContainer, selectionRange.offset);
+                        selectionRange.endContainer, selectionRange.endOffset);
                 }
             }
         },
@@ -5177,8 +5215,7 @@ var ImageDragging;
 
 var extensionDefaults;
 (function () {
-    // for now this is empty because nothing interally uses an Extension default.
-    // as they are converted, provide them here.
+
     extensionDefaults = {
         button: Button,
         form: FormExtension,
@@ -5488,28 +5525,23 @@ function MediumEditor(elements, options) {
     function createContentEditable(textarea, id) {
         var div = this.options.ownerDocument.createElement('div'),
             uniqueId = 'medium-editor-' + Date.now() + '-' + id,
-            attributesToClone = [
-                'data-disable-editing',
-                'data-disable-toolbar',
-                'data-placeholder',
-                'data-disable-return',
-                'data-disable-double-return',
-                'data-disable-preview',
-                'spellcheck'
-            ];
+            atts = textarea.attributes;
 
         div.className = textarea.className;
         div.id = uniqueId;
         div.innerHTML = textarea.value;
-        div.setAttribute('medium-editor-textarea-id', id);
-        attributesToClone.forEach(function (attr) {
-            if (textarea.hasAttribute(attr)) {
-                div.setAttribute(attr, textarea.getAttribute(attr));
+
+        textarea.setAttribute('medium-editor-textarea-id', id);
+
+        // re-create all attributes from the textearea to the new created div
+        for (var i = 0, n = atts.length; i < n; i++) {
+            // do not re-create existing attributes
+            if (!div.hasAttribute(atts[i].nodeName)) {
+                div.setAttribute(atts[i].nodeName, atts[i].nodeValue);
             }
-        });
+        }
 
         textarea.classList.add('medium-editor-hidden');
-        textarea.setAttribute('medium-editor-textarea-id', id);
         textarea.parentNode.insertBefore(
             div,
             textarea
@@ -5613,7 +5645,7 @@ function MediumEditor(elements, options) {
         // Built-in extensions
         var builtIns = {
             paste: true,
-            anchorPreview: isAnchorPreviewEnabled.call(this),
+            'anchor-preview': isAnchorPreviewEnabled.call(this),
             autoLink: isAutoLinkEnabled.call(this),
             keyboardCommands: isKeyboardCommandsEnabled.call(this),
             placeholder: isPlaceholderEnabled.call(this)
@@ -5905,7 +5937,7 @@ function MediumEditor(elements, options) {
                     merged = Util.extend({}, this.options.anchor, opts);
                     extension = new MediumEditor.extensions.anchor(merged);
                     break;
-                case 'anchorPreview':
+                case 'anchor-preview':
                     extension = new MediumEditor.extensions.anchorPreview(this.options.anchorPreview);
                     break;
                 case 'autoLink':
@@ -6097,8 +6129,7 @@ function MediumEditor(elements, options) {
         },
 
         createLink: function (opts) {
-            var customEvent,
-                i;
+            var customEvent, i;
 
             if (opts.url && opts.url.trim().length > 0) {
                 var currentSelection = this.options.contentWindow.getSelection();
@@ -6108,17 +6139,22 @@ function MediumEditor(elements, options) {
                         endContainerParentElement,
                         textNodes;
 
-                    startContainerParentElement = Util.getClosestBlockContainer(
-                        currentSelection.getRangeAt(0).startContainer);
-                    endContainerParentElement = Util.getClosestBlockContainer(
-                        currentSelection.getRangeAt(0).endContainer);
+                    startContainerParentElement = Util.getClosestBlockContainer(currentSelection.getRangeAt(0).startContainer);
+                    endContainerParentElement = Util.getClosestBlockContainer(currentSelection.getRangeAt(0).endContainer);
 
                     if (startContainerParentElement === endContainerParentElement) {
                         var currentEditor = Selection.getSelectionElement(this.options.contentWindow),
                             parentElement = (startContainerParentElement || currentEditor),
                             fragment = this.options.ownerDocument.createDocumentFragment();
+
+                        // since we are going to create a link from an extracted text,
+                        // be sure that if we are updating a link, we won't let an empty link behind (see #754)
+                        // (Workaroung for Chrome)
+                        this.execAction('unlink');
+
                         exportedSelection = this.exportSelection();
                         fragment.appendChild(parentElement.cloneNode(true));
+
                         if (currentEditor === parentElement) {
                             // We have to avoid the editor itself being wiped out when it's the only block element,
                             // as our reference inside this.elements gets detached from the page when insertHTML runs.
@@ -6131,37 +6167,50 @@ function MediumEditor(elements, options) {
                             // In WebKit:
                             // an invented <br /> tag at the end in the same situation
 
-                            Selection.select(this.options.ownerDocument,
-                                parentElement.firstChild, 0,
-                                parentElement.lastChild, parentElement.lastChild.nodeType === 3 ?
-                                parentElement.lastChild.nodeValue.length : parentElement.lastChild.childNodes.length);
+                            Selection.select(
+                                this.options.ownerDocument,
+                                parentElement.firstChild,
+                                0,
+                                parentElement.lastChild,
+                                parentElement.lastChild.nodeType === 3 ?
+                                parentElement.lastChild.nodeValue.length : parentElement.lastChild.childNodes.length
+                            );
                         } else {
-                            Selection.select(this.options.ownerDocument,
-                                parentElement, 0,
-                                parentElement, parentElement.childNodes.length);
+                            Selection.select(
+                                this.options.ownerDocument,
+                                parentElement,
+                                0,
+                                parentElement,
+                                parentElement.childNodes.length
+                            );
                         }
+
                         var modifiedExportedSelection = this.exportSelection();
 
-                        textNodes = Util.findOrCreateMatchingTextNodes(this.options.ownerDocument,
-                                fragment,
-                                {
-                                    start: exportedSelection.start - modifiedExportedSelection.start,
-                                    end: exportedSelection.end - modifiedExportedSelection.start,
-                                    editableElementIndex: exportedSelection.editableElementIndex
-                                });
+                        textNodes = Util.findOrCreateMatchingTextNodes(
+                            this.options.ownerDocument,
+                            fragment,
+                            {
+                                start: exportedSelection.start - modifiedExportedSelection.start,
+                                end: exportedSelection.end - modifiedExportedSelection.start,
+                                editableElementIndex: exportedSelection.editableElementIndex
+                            }
+                        );
+
                         // Creates the link in the document fragment
                         Util.createLink(this.options.ownerDocument, textNodes, opts.url.trim());
                         // Chrome trims the leading whitespaces when inserting HTML, which messes up restoring the selection.
                         var leadingWhitespacesCount = (fragment.firstChild.innerHTML.match(/^\s+/) || [''])[0].length;
                         // Now move the created link back into the original document in a way to preserve undo/redo history
-                        Util.insertHTMLCommand(this.options.ownerDocument,
-                            fragment.firstChild.innerHTML.replace(/^\s+/, ''));
+                        Util.insertHTMLCommand(this.options.ownerDocument, fragment.firstChild.innerHTML.replace(/^\s+/, ''));
                         exportedSelection.start -= leadingWhitespacesCount;
                         exportedSelection.end -= leadingWhitespacesCount;
+
                         this.importSelection(exportedSelection);
                     } else {
                         this.options.ownerDocument.execCommand('createLink', false, opts.url);
                     }
+
                     if (this.options.targetBlank || opts.target === '_blank') {
                         Util.setTargetBlank(Selection.getSelectionStart(this.options.ownerDocument), opts.url);
                     }
@@ -6187,6 +6236,16 @@ function MediumEditor(elements, options) {
 
         pasteHTML: function (html, options) {
             this.getExtensionByName('paste').pasteHTML(html, options);
+        },
+
+        setContent: function (html, index) {
+            index = index || 0;
+
+            if (this.elements[index]) {
+                var target = this.elements[index];
+                target.innerHTML = html;
+                this.events.updateInput(target, { target: target, currentTarget: target });
+            }
         }
     };
 }());
@@ -6208,7 +6267,7 @@ MediumEditor.parseVersionString = function (release) {
 
 MediumEditor.version = MediumEditor.parseVersionString.call(this, ({
     // grunt-bump looks for this:
-    'version': '5.4.0'
+    'version': '5.5.3'
 }).version);
 
     return MediumEditor;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: scrivito-medium-editor
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.5
 platform: ruby
 authors:
 - Scrivito
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-27 00:00:00.000000000 Z
+date: 2015-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler