Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

medium-editor

Package Overview
Dependencies
Maintainers
6
Versions
125
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

medium-editor - npm Package Compare versions

Comparing version 5.14.1 to 5.14.2

9

CHANGES.md

@@ -0,1 +1,10 @@

5.14.2 / 2016-02-10
==================
* Support Microsoft Edge
* Fallback to custom insertHTML command instead of built-in command for Edge
* Use shim code for detecting input on contenteditable for Edge
* Fix issue with converting blockquotes to paragraphs in Edge
* Update documentation, fix tests, and include Edge in browser testing
5.14.1 / 2016-02-05

@@ -2,0 +11,0 @@ ==================

4

CUSTOM-EVENTS.md

@@ -129,3 +129,3 @@ # MediumEditor Custom Events (v5.0.0)

`editableInput` is triggered whenever the content of a `contenteditable` changes, including keypresses, toolbar actions, or any other user interaction that changes the html within the element. For non-IE browsers, this is just a proxied version of the native `input` event. However, Internet Explorer has never supported the `input` event on `contenteditable` elements so for these browsers the `editableInput` event is triggered through a combination of:
`editableInput` is triggered whenever the content of a `contenteditable` changes, including keypresses, toolbar actions, or any other user interaction that changes the html within the element. For non-IE browsers, this is just a proxied version of the native `input` event. However, Internet Explorer and has never supported the `input` event on `contenteditable` elements, and Edge has some support for `input` on `contenteditable` (which may be fixed in upcoming release of Edge) so for these browsers the `editableInput` event is triggered through a combination of:
* native `keypress` event on the element

@@ -143,3 +143,3 @@ * native `selectionchange` event on the document

`focus` is triggered whenver a `contentedtiable` element within an editor receives focus. If the user interacts with any editor maintained elements (ie toolbar), `blur` is NOT triggered because focus has not been lost. Thus, `focus` will only be triggered when an `contenteditable` element (or the editor that contains it) is first interacted with.
`focus` is triggered whenver a `contenteditable` element within an editor receives focus. If the user interacts with any editor maintained elements (ie toolbar), `blur` is NOT triggered because focus has not been lost. Thus, `focus` will only be triggered when an `contenteditable` element (or the editor that contains it) is first interacted with.

@@ -146,0 +146,0 @@ ## Toolbar Custom Events

@@ -56,2 +56,5 @@ /*global module, require, process*/

}, {
browserName: 'MicrosoftEdge',
platform: 'Windows 10'
}, {
browserName: 'chrome',

@@ -58,0 +61,0 @@ platform: 'WIN8.1'

{
"name": "medium-editor",
"version": "5.14.1",
"version": "5.14.2",
"author": "Davi Ferreira <hi@daviferreira.com>",

@@ -5,0 +5,0 @@ "contributors": [

@@ -13,3 +13,3 @@ # MediumEditor

![Supportd Browsers](https://cloud.githubusercontent.com/assets/2444240/7519189/a819e426-f4ad-11e4-8740-626396c5d61b.png)
![Supportd Browsers](https://cloud.githubusercontent.com/assets/2444240/12874138/d3960a04-cd9b-11e5-8cc5-8136d82cf5f6.png)

@@ -556,3 +556,3 @@ [![NPM info](https://nodei.co/npm/medium-editor.png?downloads=true)](https://www.npmjs.com/package/medium-editor)

This event is supported in all browsers supported by MediumEditor (including IE9+)! To help with cases when one instance of MediumEditor is monitoring multiple elements, the 2nd argument passed to the event handler (`editable` in the example above) will be a reference to the contenteditable element that has actually changed.
This event is supported in all browsers supported by MediumEditor (including IE9+ and Edge)! To help with cases when one instance of MediumEditor is monitoring multiple elements, the 2nd argument passed to the event handler (`editable` in the example above) will be a reference to the contenteditable element that has actually changed.

@@ -567,5 +567,5 @@ This is handy when you need to capture any modifications to the contenteditable element including:

So for most modern browsers (Chrome, Firefox, Safari, etc.), the `input` event works just fine. Infact, `editableInput` is just a proxy for the `input` event in those browsers. However, the `input` event [is not supported for contenteditable elements in IE 9-11](https://connect.microsoft.com/IE/feedback/details/794285/ie10-11-input-event-does-not-fire-on-div-with-contenteditable-set).
So for most modern browsers (Chrome, Firefox, Safari, etc.), the `input` event works just fine. Infact, `editableInput` is just a proxy for the `input` event in those browsers. However, the `input` event [is not supported for contenteditable elements in IE 9-11](https://connect.microsoft.com/IE/feedback/details/794285/ie10-11-input-event-does-not-fire-on-div-with-contenteditable-set) and is _mostly_ supported in Microsoft Edge, but not fully.
So, to properly support the `editableInput` event in Internet Explorer, MediumEditor uses a combination of the `selectionchange` and `keypress` events, as well as monitoring calls to `document.execCommand`.
So, to properly support the `editableInput` event in Internet Explorer and Microsoft Edge, MediumEditor uses a combination of the `selectionchange` and `keypress` events, as well as monitoring calls to `document.execCommand`.

@@ -572,0 +572,0 @@ ## Extensions & Plugins

@@ -285,2 +285,3 @@ /*global fireEvent, selectElementContentsAndFire */

jasmine.clock().tick(250);
expect(anchorPreview.showPreview).not.toHaveBeenCalled();

@@ -287,0 +288,0 @@ expect(toolbar.isDisplayed()).toBe(true);

/*global fireEvent, selectElementContents,
selectElementContentsAndFire */
selectElementContentsAndFire, getEdgeVersion */

@@ -43,3 +43,2 @@ describe('Anchor Button TestCase', function () {

selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
fireEvent(editor.elements[0], 'keydown', {

@@ -67,3 +66,3 @@ keyCode: code,

input = editor.getExtensionByName('anchor').getInput();
input.value = 'test';
input.value = 'http://test.com';
fireEvent(input, 'keyup', {

@@ -74,3 +73,3 @@ keyCode: MediumEditor.util.keyCode.ENTER

// A trailing <br> may be added when insertHTML is used to add the link internally.
expect(this.el.innerHTML.indexOf('<a href="test">lorem ipsum</a>')).toBe(0);
expect(this.el.innerHTML.indexOf('<a href="http://test.com">lorem ipsum</a>')).toBe(0);
});

@@ -128,3 +127,3 @@

input = editor.getExtensionByName('anchor').getInput();
input.value = 'test';
input.value = 'http://test.com';
fireEvent(input, 'keyup', {

@@ -134,10 +133,3 @@ keyCode: MediumEditor.util.keyCode.ENTER

expect(editor.createLink).toHaveBeenCalled();
var suffix;
if (this.el.innerHTML.indexOf('<br') !== -1) {
suffix = '<br>';
} else {
suffix = '<strong></strong>';
}
expect(this.el.innerHTML).toBe('Hello world, <a href="test">this <strong>will become a link</strong></a>' +
'<strong>, but this part won\'t.</strong>' + suffix);
expect(this.el.innerHTML).toMatch(/^Hello world, <a href="http:\/\/test\.com\/?">this <strong>will become a link<\/strong><\/a><strong>, but this part won\'t\.<\/strong>(<br>|<strong><\/strong>)?$/);
});

@@ -159,3 +151,3 @@

input = editor.getExtensionByName('anchor').getInput();
input.value = 'test';
input.value = 'http://test.com';
fireEvent(input, 'keyup', {

@@ -165,10 +157,21 @@ keyCode: MediumEditor.util.keyCode.ENTER

expect(editor.createLink).toHaveBeenCalled();
var expectedHTML = '<p>Hello <a href="test"><span>world</span>.</a></p>';
// Different browser's native createLink implement this differently.
if (this.el.innerHTML.indexOf('<strong><a') !== -1) {
expectedHTML += '<p><strong><a href="test">Let us make a link</a></strong> across paragraphs.</p>';
} else {
expectedHTML += '<p><a href="test"><strong>Let us make a link</strong></a> across paragraphs.</p>';
}
expect(this.el.innerHTML).toBe(expectedHTML);
var anchors = this.el.querySelectorAll('a');
// Edge creates 3 links, other browsers create 2
expect(anchors.length).toBeGreaterThan(1);
expect(anchors.length).toBeLessThan(4);
var linkText = '';
Array.prototype.slice.call(anchors).forEach(function (anchor) {
linkText += anchor.textContent;
});
expect(linkText).toBe('world.Let us make a link');
var spans = this.el.querySelectorAll('span');
expect(spans.length).toBe(1);
expect(spans[0].textContent).toBe('world');
var strongs = this.el.querySelectorAll('strong');
expect(strongs.length).toBe(1);
expect(strongs[0].textContent).toBe('Let us make a link');
});

@@ -377,3 +380,3 @@

input = anchorExtension.getInput();
input.value = 'test';
input.value = 'http://test.com';

@@ -388,3 +391,3 @@ button = anchorExtension.getForm().querySelector('input.medium-editor-toolbar-anchor-button');

opts = {
url: 'test',
url: 'http://test.com',
target: '_self',

@@ -586,3 +589,9 @@ buttonClass: 'btn btn-default'

expect(editor.createLink).toHaveBeenCalled();
expect(this.el.innerHTML).toContain('<a href="http://www.google.com"><img src="../demo/img/medium-editor.jpg"></a>');
// This appears to be broken in Edge < 13, but works correctly in Edge 13 or higher
// So for the sake of sanity, disabling this check for Edge 12.
// TODO: Find a better way to fix this issue if Edge 12 is going to matter
var edgeVersion = getEdgeVersion();
if (!edgeVersion || edgeVersion >= 13) {
expect(this.el.innerHTML).toContain('<a href="http://www.google.com"><img src="../demo/img/medium-editor.jpg"></a>');
}
});

@@ -632,4 +641,4 @@ });

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="createLink"]');

@@ -648,4 +657,4 @@ fireEvent(button, 'click');

spyOn(document, 'execCommand').and.callThrough();
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(11); // checkSelection delay
button = toolbar.getToolbarElement().querySelector('[data-action="createLink"]');

@@ -652,0 +661,0 @@ fireEvent(button, 'click');

@@ -33,4 +33,4 @@ /*global fireEvent, selectElementContentsAndFire,

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="bold"]');

@@ -46,4 +46,4 @@ fireEvent(button, 'click');

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="bold"]');

@@ -59,4 +59,4 @@ fireEvent(button, 'click');

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(11); // checkSelection delay
button = toolbar.getToolbarElement().querySelector('[data-action="bold"]');

@@ -73,4 +73,4 @@ expect(button.className).toContain('medium-editor-button-active');

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="bold"]');

@@ -162,3 +162,2 @@ fireEvent(button, 'click');

selectElementContentsAndFire(editor.elements[0].querySelector('h2').firstChild);
jasmine.clock().tick(1);
expect(button.classList.contains('medium-editor-button-active')).toBe(true);

@@ -268,3 +267,2 @@ expect(buttonTwo.classList.contains('medium-editor-button-active')).toBe(false);

selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);

@@ -291,3 +289,2 @@ Object.keys(defaultLabels).forEach(function (buttonName) {

selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);

@@ -318,3 +315,2 @@ Object.keys(fontAwesomeLabels).forEach(function (buttonName) {

selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);

@@ -340,4 +336,4 @@ Object.keys(customLabels).forEach(function (buttonName) {

spyOn(document, 'execCommand');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="append-h3"]');

@@ -357,4 +353,4 @@ fireEvent(button, 'click');

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="append-h3"]');

@@ -373,4 +369,4 @@ fireEvent(button, 'click');

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0].firstChild);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="append-h3"]');

@@ -403,4 +399,4 @@ fireEvent(button, 'click');

button = toolbar.getToolbarElement().querySelector('[data-action="bold"]');
this.el.innerHTML = '<b>lorem ipsum</b>';
this.el.innerHTML = '<b>lorem ipsum</b>';
selectElementContentsAndFire(editor.elements[0]);

@@ -427,4 +423,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

spyOn(document, 'queryCommandState').and.throwError('DOM ERROR');
this.el.innerHTML = '<b><i><u>lorem ipsum</u></i></b>';
this.el.innerHTML = '<b><i><u>lorem ipsum</u></i></b>';
selectElementContentsAndFire(editor.elements[0].querySelector('u'));

@@ -445,4 +441,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="bold"]');
this.el.innerHTML = '<p><span id="bold-span" style="font-weight: bold">lorem ipsum</span></p>';
this.el.innerHTML = '<p><span id="bold-span" style="font-weight: bold">lorem ipsum</span></p>';
selectElementContentsAndFire(document.getElementById('bold-span'));

@@ -465,2 +461,3 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

spyOn(document, 'execCommand').and.callThrough();
selectElementContentsAndFire(editor.elements[0]);

@@ -482,4 +479,4 @@ button = toolbar.getToolbarElement().querySelector('[data-action="italic"]');

button = toolbar.getToolbarElement().querySelector('[data-action="italic"]');
this.el.innerHTML = '<i>lorem ipsum</i>';
this.el.innerHTML = '<i>lorem ipsum</i>';
selectElementContentsAndFire(editor.elements[0]);

@@ -506,4 +503,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

spyOn(document, 'queryCommandState').and.throwError('DOM ERROR');
this.el.innerHTML = '<i><b><u>lorem ipsum</u></b></i>';
this.el.innerHTML = '<i><b><u>lorem ipsum</u></b></i>';
selectElementContentsAndFire(editor.elements[0].querySelector('u'));

@@ -524,4 +521,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="italic"]');
this.el.innerHTML = '<p><span id="italic-span" style="font-style: italic">lorem ipsum</span></p>';
this.el.innerHTML = '<p><span id="italic-span" style="font-style: italic">lorem ipsum</span></p>';
selectElementContentsAndFire(document.getElementById('italic-span'));

@@ -547,4 +544,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="underline"]');
this.el.innerHTML = '<u>lorem ipsum</u>';
this.el.innerHTML = '<u>lorem ipsum</u>';
selectElementContentsAndFire(editor.elements[0]);

@@ -568,4 +565,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

spyOn(document, 'queryCommandState').and.throwError('DOM ERROR');
this.el.innerHTML = '<u><b><i>lorem ipsum</i></b></u>';
this.el.innerHTML = '<u><b><i>lorem ipsum</i></b></u>';
selectElementContentsAndFire(editor.elements[0].querySelector('i'));

@@ -586,4 +583,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="underline"]');
this.el.innerHTML = '<p><span id="underline-span" style="text-decoration: underline">lorem ipsum</span></p>';
this.el.innerHTML = '<p><span id="underline-span" style="text-decoration: underline">lorem ipsum</span></p>';
selectElementContentsAndFire(document.getElementById('underline-span'));

@@ -609,4 +606,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="strikethrough"]');
this.el.innerHTML = '<strike>lorem ipsum</strike>';
this.el.innerHTML = '<strike>lorem ipsum</strike>';
selectElementContentsAndFire(editor.elements[0]);

@@ -630,4 +627,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

spyOn(document, 'queryCommandState').and.throwError('DOM ERROR');
this.el.innerHTML = '<strike><b><i>lorem ipsum</i></b></strike>';
this.el.innerHTML = '<strike><b><i>lorem ipsum</i></b></strike>';
selectElementContentsAndFire(editor.elements[0].querySelector('i'));

@@ -648,4 +645,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="strikethrough"]');
this.el.innerHTML = '<p><span id="strike-span" style="text-decoration: line-through">lorem ipsum</span></p>';
this.el.innerHTML = '<p><span id="strike-span" style="text-decoration: line-through">lorem ipsum</span></p>';
selectElementContentsAndFire(document.getElementById('strike-span'));

@@ -671,4 +668,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="superscript"]');
this.el.innerHTML = '<sup>lorem ipsum</sub>';
this.el.innerHTML = '<sup>lorem ipsum</sub>';
selectElementContentsAndFire(editor.elements[0]);

@@ -692,4 +689,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="subscript"]');
this.el.innerHTML = '<sub>lorem ipsum</sub>';
this.el.innerHTML = '<sub>lorem ipsum</sub>';
selectElementContentsAndFire(editor.elements[0]);

@@ -713,4 +710,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="createLink"]');
this.el.innerHTML = '<p><span id="span-lorem">lorem</span> <a href="#" id="link">ipsum</a></p>';
this.el.innerHTML = '<p><span id="span-lorem">lorem</span> <a href="#" id="link">ipsum</a></p>';
selectElementContentsAndFire(document.getElementById('link'));

@@ -728,2 +725,3 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);

@@ -745,4 +743,4 @@ button = toolbar.getToolbarElement().querySelector('[data-action="createLink"]');

button = toolbar.getToolbarElement().querySelector('[data-action="append-blockquote"]');
this.el.innerHTML = '<span id="span-lorem">lorem ipsum</span>';
this.el.innerHTML = '<span id="span-lorem">lorem ipsum</span>';
selectElementContentsAndFire(document.getElementById('span-lorem'));

@@ -767,4 +765,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(false);

spyOn(document, 'execCommand').and.callThrough();
this.el.innerHTML = '<span id="span-image">http://i.imgur.com/twlXfUq.jpg \n\n</span>';
this.el.innerHTML = '<span id="span-image">http://i.imgur.com/twlXfUq.jpg \n\n</span>';
selectElementContentsAndFire(document.getElementById('span-image'));

@@ -788,4 +786,4 @@

button = toolbar.getToolbarElement().querySelector('[data-action="insertorderedlist"]');
this.el.innerHTML = '<ol><li id="li-lorem">lorem ipsum</li></ol>';
this.el.innerHTML = '<ol><li id="li-lorem">lorem ipsum</li></ol>';
selectElementContentsAndFire(document.getElementById('li-lorem'));

@@ -812,4 +810,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="insertunorderedlist"]');
this.el.innerHTML = '<ul><li id="li-lorem">lorem ipsum</li></ul>';
this.el.innerHTML = '<ul><li id="li-lorem">lorem ipsum</li></ul>';
selectElementContentsAndFire(document.getElementById('li-lorem'));

@@ -836,4 +834,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

button = toolbar.getToolbarElement().querySelector('[data-action="append-pre"]');
this.el.innerHTML = '<pre><span id="span-lorem">lorem ipsum</span></pre>';
this.el.innerHTML = '<pre><span id="span-lorem">lorem ipsum</span></pre>';
selectElementContentsAndFire(document.getElementById('span-lorem'));

@@ -967,4 +965,4 @@ expect(button.classList.contains('medium-editor-button-active')).toBe(true);

expect(button).toBeTruthy();
this.el.innerHTML = '<p>foo<b>bar</b><i>baz</i><strong>bam</strong></p>';
this.el.innerHTML = '<p>foo<b>bar</b><i>baz</i><strong>bam</strong></p>';
selectElementContentsAndFire(editor.elements[0].querySelector('p'));

@@ -971,0 +969,0 @@ fireEvent(button, 'click');

@@ -5,3 +5,3 @@ /*global fireEvent, firePreparedEvent,

placeCursorInsideElement,
isIE, isFirefox */
isFirefox */

@@ -20,3 +20,3 @@ describe('Content TestCase', function () {

it('should removing paragraphs when a list is inserted inside of it', function () {
it('should remove paragraphs when a list is inserted inside of it', function () {
this.el.innerHTML = '<p>lorem ipsum<ul><li>dolor</li></ul></p>';

@@ -35,11 +35,19 @@ var editor = this.newMediumEditor('.editor', {

// for Chrome & Safari we manually moved the caret so let's check it
if (!isFirefox() && !isIE()) {
// ensure the cursor is positioned right after the text
sel = document.getSelection();
expect(sel.rangeCount).toBe(1);
sel = document.getSelection();
expect(sel.rangeCount).toBe(1);
range = sel.getRangeAt(0);
range = sel.getRangeAt(0);
// Chrome and Safari collapse the range at the end of the 'lorem ipsum' li
// Firefox, IE, and Edge select the 'lorem ipsum' contents
if (range.collapsed) {
expect(range.startContainer.nodeValue).toBe('lorem ipsum');
expect(range.endContainer.nodeValue).toBe('lorem ipsum');
expect(range.startOffset).toBe('lorem ipsum'.length);
expect(range.endOffset).toBe('lorem ipsum'.length);
expect(range.startOffset).toBe('lorem ipsum'.length);
} else {
expect(range.toString()).toBe('lorem ipsum');
expect(range.startContainer.nodeName.toLowerCase()).toBe('li');
expect(range.endContainer.nodeName.toLowerCase()).toBe('li');
expect(range.startOffset).toBe(0);
expect(range.endOffset).toBe(1);
}

@@ -642,3 +650,4 @@ });

blockquote = this.el.querySelector('blockquote');
expect(blockquote.querySelectorAll('br').length).toBe(3, 'Some of the <br> elements have been removed from the <blockquote>');
// Edge adds another <br /> automatically for some reason...
expect(blockquote.querySelectorAll('br').length).toBeGreaterThan(2, 'Some of the <br> elements have been removed from the <blockquote>');
expect(blockquote.querySelectorAll('div').length).toBe(0, 'Some <br> elements were replaced with <div> elements within the <blckquote>');

@@ -645,0 +654,0 @@ });

@@ -67,4 +67,3 @@ /*global fireEvent, selectElementContents */

toolbar = editor.getExtensionByName('toolbar'),
button,
regex;
button;

@@ -81,7 +80,9 @@ // Save selection around <i> tag

// Restore selection back to <i> tag and add a <strike> tag
regex = new RegExp('^<u>lorem (<i><strike>|<strike><i>)ipsum(</i></strike>|</strike></i>) dolor</u>$');
editor.restoreSelection();
button = toolbar.getToolbarElement().querySelector('[data-action="strikethrough"]');
fireEvent(button, 'click');
expect(regex.test(editor.elements[0].innerHTML)).toBe(true);
// Edge breaks this into 3 separate <u> tags for some reason...
var regex = new RegExp('^<u>lorem (<i><strike>|<strike><i>|</u><i><u><strike>)ipsum(</i></strike>|</strike></i>|</strike></u></i><u>) dolor</u>$');
expect(editor.elements[0].innerHTML).toMatch(regex);
});

@@ -88,0 +89,0 @@ });

@@ -327,3 +327,3 @@ /*global selectElementContentsAndFire */

});
selectElementContentsAndFire(editor.elements[0].firstChild);
selectElementContentsAndFire(editor.elements[0].firstChild, { eventToFire: 'focus' });
spyOn(ExtensionWithElement, 'checkState').and.callThrough();

@@ -330,0 +330,0 @@ editor.checkSelection();

@@ -37,4 +37,4 @@ /*global fireEvent, selectElementContents,

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="fontName"]');

@@ -41,0 +41,0 @@ fireEvent(button, 'click');

@@ -37,4 +37,4 @@ /*global fireEvent, selectElementContents,

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
button = toolbar.getToolbarElement().querySelector('[data-action="fontSize"]');

@@ -41,0 +41,0 @@ fireEvent(button, 'click');

@@ -63,2 +63,11 @@ /*global atob, unescape, Uint8Array, Blob*/

// If the browser is Edge, returns the version number as a float, otherwise returns 0
function getEdgeVersion() {
var match = /Edge\/(\d+[,.]\d+)/.exec(navigator.userAgent);
if (match !== null) {
return +match[1];
}
return 0;
}
function isFirefox() {

@@ -224,3 +233,10 @@ return navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;

selectElementContents(el, options);
fireEvent(el, options.eventToFire || 'focus');
fireEvent(el, options.eventToFire || 'click');
if (options.testDelay !== -1) {
if (!options.testDelay) {
jasmine.clock().tick(1);
} else {
jasmine.clock().tick(options.testDelay);
}
}
}

@@ -19,4 +19,4 @@ /*global fireEvent, selectElementContentsAndFire */

var editor = this.newMediumEditor('.editor');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
// bold

@@ -69,4 +69,4 @@ fireEvent(editor.elements[0], 'keydown', {

});
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
fireEvent(editor.elements[0], 'keydown', {

@@ -108,4 +108,4 @@ keyCode: 'p'.charCodeAt(0),

});
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
// If alt-key is not pressed, command should still be executed

@@ -180,4 +180,4 @@ fireEvent(editor.elements[0], 'keydown', {

});
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
['1', '2', '3', '4', '5', '6'].forEach(function (heading) {

@@ -197,4 +197,4 @@ fireEvent(editor.elements[0], 'keydown', {

var editor = this.newMediumEditor('.editor');
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
fireEvent(editor.elements[0], 'keydown', {

@@ -214,4 +214,4 @@ keyCode: 'B'.charCodeAt(0),

});
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
fireEvent(editor.elements[0], 'keydown', {

@@ -240,5 +240,4 @@ keyCode: 'B'.charCodeAt(0),

});
selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
fireEvent(editor.elements[0], 'keydown', {

@@ -245,0 +244,0 @@ keyCode: 'J'.charCodeAt(0),

@@ -284,3 +284,2 @@ /*global selectElementContents,

editor.cleanPaste('<label>div one</label><label>div two</label>');
expect(this.el.innerHTML).toMatch(new RegExp('^Before(&nbsp;|\\s)(<span id="editor-inner">)?<sub>div one</sub><sub>div two</sub>(</span>)?(&nbsp;|\\s)after\\.$'));

@@ -418,3 +417,3 @@ });

for (i = 0; i < textTests.length; i += 1) {
editorEl.innerHTML = '<div id="editor-inner">&nbsp</div>';
editorEl.innerHTML = '<div id="editor-inner">&nbsp;</div>';

@@ -421,0 +420,0 @@ range = document.createRange();

@@ -27,3 +27,3 @@ /*global fireEvent, selectElementContentsAndFire */

it('should not set a placeholder for elements with images only', function () {
this.el.innerHTML = '<img src="foo.jpg">';
this.el.innerHTML = '<img src="../demo/img/roman.jpg">';
var editor = this.newMediumEditor('.editor');

@@ -30,0 +30,0 @@ expect(editor.elements[0].className).not.toContain('medium-editor-placeholder');

@@ -370,3 +370,3 @@ /*global selectElementContents, placeCursorInsideElement, isSafari */

it('should support a selection that ends with an image', function () {
this.el.innerHTML = '<p>lorem ipsum <a href="#">img<img src="../demo/img/medium-editor.jpg" /><img src="../img/roman.jpg" /></a> dolor</p>';
this.el.innerHTML = '<p>lorem ipsum <a href="#">img<img src="../demo/img/medium-editor.jpg" /><img src="../demo/img/roman.jpg" /></a> dolor</p>';
MediumEditor.selection.importSelection({ start: 12, end: 15, trailingImageCount: 2 }, this.el, document);

@@ -373,0 +373,0 @@ var range = window.getSelection().getRangeAt(0);

@@ -1,3 +0,2 @@

/*global fireEvent, selectElementContents,
selectElementContentsAndFire */
/*global fireEvent, selectElementContentsAndFire */

@@ -94,41 +93,2 @@ describe('Setup/Destroy TestCase', function () {

// regression test for https://github.com/yabwe/medium-editor/issues/390
it('should work with multiple elements of the same class', function () {
var editor,
el,
elements = [],
i;
for (i = 0; i < 3; i += 1) {
el = document.createElement('div');
el.className = 'editor';
el.textContent = i;
elements.push(
document.body.appendChild(el)
);
}
editor = this.newMediumEditor('.editor');
var toolbar = editor.getExtensionByName('toolbar');
spyOn(toolbar, 'hideToolbar').and.callThrough(); // via: handleBlur
selectElementContentsAndFire(editor.elements[0], { eventToFire: 'click' });
jasmine.clock().tick(51);
expect(toolbar.hideToolbar).not.toHaveBeenCalled();
selectElementContentsAndFire(editor.elements[1], { eventToFire: 'click' });
jasmine.clock().tick(51);
expect(toolbar.hideToolbar).not.toHaveBeenCalled();
selectElementContents(editor.elements[2]);
selectElementContentsAndFire(editor.elements[2], { eventToFire: 'click' });
jasmine.clock().tick(51);
expect(toolbar.hideToolbar).not.toHaveBeenCalled();
elements.forEach(function (element) {
document.body.removeChild(element);
});
});
// regression test for https://github.com/yabwe/medium-editor/issues/197

@@ -138,4 +98,3 @@ it('should not crash when destroy immediately after a mouse click', function () {

// selected some content and let the toolbar appear
selectElementContents(editor.elements[0]);
jasmine.clock().tick(501);
selectElementContentsAndFire(editor.elements[0], { testDelay: 501 });

@@ -142,0 +101,0 @@ // fire a mouse up somewhere else (i.e. a button which click handler could have called destroy() )

@@ -58,3 +58,2 @@ /*global fireEvent, selectElementContents,

jasmine.clock().tick(51);
expect(toolbar.getToolbarElement().querySelector('button[data-action="bold"]').classList.contains('medium-editor-button-active')).toBe(true);

@@ -71,4 +70,2 @@ });

selectElementContentsAndFire(document.getElementById('bold_dolorTwo'));
jasmine.clock().tick(51);
expect(toolbar.getToolbarElement().querySelector('button[data-action="bold"]').classList.contains('medium-editor-button-active')).toBe(false);

@@ -78,4 +75,2 @@

selectElementContentsAndFire(document.getElementById('bold_dolorTwo'), { eventToFire: 'mouseup' });
jasmine.clock().tick(51);
expect(toolbar.getToolbarElement().querySelector('button[data-action="bold"]').classList.contains('medium-editor-button-active')).toBe(true);

@@ -92,3 +87,3 @@ });

selectElementContentsAndFire(this.el, { eventToFire: 'focus' });
selectElementContentsAndFire(this.el);

@@ -105,3 +100,3 @@ expect(callback).toHaveBeenCalledWith({}, this.el);

selectElementContentsAndFire(this.el, { eventToFire: 'focus' });
selectElementContentsAndFire(this.el);

@@ -112,19 +107,32 @@ expect(callback).toHaveBeenCalledWith({}, this.el);

it('should trigger positionToolbar before position called', function () {
it('should trigger positionToolbar before setToolbarPosition is called', function () {
this.el.innerHTML = 'position sanity check';
var editor = this.newMediumEditor('.editor'),
toolbar = editor.getExtensionByName('toolbar'),
triggerCount = 0,
temp = {
update: function () {
expect(toolbar.positionToolbar).not.toHaveBeenCalled();
// selectElementContents will select the contents and trigger 'click'
// Since we're manually triggering things, in Edge we have to trigger
// 'click' or the toolbar won't detect the change. However, in some
// browsers the selection action itself triggers a 'focus' which the toolbar
// picks up. This means for some browsers (ie Chrome, FF) the 'positionToolbar'
// event will trigger twice. So, let's just make sure the first time the
// event triggers, that it was triggered BEFORE the first call to setToolbarPosition
if (triggerCount === 0) {
expect(toolbar.setToolbarPosition).not.toHaveBeenCalled();
}
triggerCount++;
}
};
spyOn(toolbar, 'positionToolbar').and.callThrough();
selectElementContents(this.el);
jasmine.clock().tick(1);
spyOn(toolbar, 'setToolbarPosition').and.callThrough();
spyOn(temp, 'update').and.callThrough();
this.el.innerHTML = 'position sanity check';
editor.subscribe('positionToolbar', temp.update);
selectElementContentsAndFire(this.el, { eventToFire: 'focus' });
selectElementContentsAndFire(this.el);
expect(temp.update).toHaveBeenCalled();
expect(toolbar.positionToolbar).toHaveBeenCalled();
expect(toolbar.setToolbarPosition).toHaveBeenCalled();
});

@@ -140,6 +148,5 @@

selectElementContentsAndFire(this.el, { eventToFire: 'focus' });
selectElementContentsAndFire(this.el);
// Remove selection and call check selection, which should make the toolbar be hidden
jasmine.clock().tick(1);
window.getSelection().removeAllRanges();

@@ -167,7 +174,6 @@ editor.checkSelection();

selectElementContentsAndFire(this.el, { eventToFire: 'focus' });
selectElementContentsAndFire(this.el);
expect(callbackShow).toHaveBeenCalledWith({}, this.el);
// Remove selection and call check selection, which should make the toolbar be hidden
jasmine.clock().tick(1);
window.getSelection().removeAllRanges();

@@ -179,2 +185,29 @@ editor.checkSelection();

// regression test for https://github.com/yabwe/medium-editor/issues/390
it('should work with multiple elements of the same class', function () {
var editor,
el,
i;
this.el.textContent = '0';
for (i = 1; i < 3; i += 1) {
el = this.createElement('div', 'editor');
el.textContent = i;
}
expect(document.querySelectorAll('.editor').length).toBe(3);
editor = this.newMediumEditor('.editor');
var toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(editor.elements[0]);
expect(toolbar.isDisplayed()).toBe(true);
selectElementContentsAndFire(editor.elements[1]);
expect(toolbar.isDisplayed()).toBe(true);
selectElementContentsAndFire(editor.elements[2]);
expect(toolbar.isDisplayed()).toBe(true);
});
it('should not hide when selecting a link containing only an image', function () {

@@ -217,3 +250,2 @@ this.el.innerHTML = '<p>Here is an <a href="#"><img src="../demo/img/medium-editor.jpg"></a> image</p>';

selectElementContentsAndFire(editor.elements[0].firstChild);
jasmine.clock().tick(51);
expect(toolbar.isDisplayed()).toBe(true);

@@ -238,3 +270,3 @@

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(document.getElementById('p-one'), { eventToFire: 'focus' });
selectElementContentsAndFire(document.getElementById('p-one'));
expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);

@@ -283,3 +315,3 @@ selectElementContentsAndFire(this.el, { eventToFire: 'mouseup' });

toolbar = editor.getExtensionByName('toolbar');
selectElementContentsAndFire(document.getElementById('p-one'), { eventToFire: 'focus' });
selectElementContentsAndFire(document.getElementById('p-one'));
expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);

@@ -296,3 +328,2 @@ selectElementContentsAndFire(this.el, { eventToFire: 'mouseup' });

selectElementContentsAndFire(this.el);
jasmine.clock().tick(51);
expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);

@@ -309,3 +340,2 @@ });

selectElementContentsAndFire(this.el);
jasmine.clock().tick(51);
expect(toolbar.setToolbarPosition).toHaveBeenCalled();

@@ -351,7 +381,8 @@ expect(toolbar.setToolbarButtonStates).toHaveBeenCalled();

selectElementContentsAndFire(this.el.querySelector('b'));
expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);
expect(toolbar.getToolbarElement().querySelector('[data-action="bold"]').classList.contains('medium-editor-button-active')).toBe(true);
window.getSelection().removeAllRanges();
editor.checkSelection();
jasmine.clock().tick(1); // checkSelection delay
expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);
expect(toolbar.getToolbarElement().querySelector('[data-action="bold"]').classList.contains('medium-editor-button-active')).toBe(true);
expect(true).toBe(true);
});

@@ -370,3 +401,3 @@

selectElementContentsAndFire(this.el.querySelector('b'));
selectElementContentsAndFire(this.el.querySelector('b'), { eventToFire: 'focus', testDelay: -1 });
window.getSelection().removeAllRanges();

@@ -401,3 +432,3 @@ editor.checkSelection();

selectElementContents(document.getElementById('editor-span-1'));
fireEvent(this.el, 'focus', {
fireEvent(this.el, 'click', {
target: this.el,

@@ -413,3 +444,3 @@ relatedTarget: elTwo

selectElementContents(document.getElementById('editor-span-2'));
fireEvent(elTwo, 'focus', {
fireEvent(elTwo, 'click', {
target: elTwo,

@@ -436,4 +467,2 @@ relatedTarget: this.el

selectElementContentsAndFire(this.el, { collapse: 'toStart' });
jasmine.clock().tick(51);
expect(editor.getExtensionByName('toolbar').setToolbarButtonStates).toHaveBeenCalled();

@@ -482,3 +511,2 @@ });

selectElementContentsAndFire(element);
jasmine.clock().tick(51);

@@ -496,4 +524,2 @@ expect(toolbar.getToolbarElement().style.display).toBe('');

selectElementContentsAndFire(document.getElementById('cef_el'));
jasmine.clock().tick(51);
expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(false);

@@ -512,3 +538,3 @@ });

expect(toolbar.getToolbarElement().style.display).toBe('');
selectElementContentsAndFire(this.el, { eventToFire: 'focus' });
selectElementContentsAndFire(this.el);

@@ -558,3 +584,2 @@ expect(toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);

selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
expect(toolbar.getToolbarElement().className.indexOf('active')).toBeGreaterThan(-1);

@@ -584,3 +609,2 @@ spyOn(toolbar, 'setToolbarPosition');

selectElementContentsAndFire(editor.elements[0]);
jasmine.clock().tick(1);
expect(toolbar.getToolbarElement().className.indexOf('active')).toBeGreaterThan(-1);

@@ -658,3 +682,3 @@

it('should contain relative toolbar class', function () {
var relativeContainer = window.document.createElement('div');
var relativeContainer = this.createElement('div');
relativeContainer.setAttribute('id', 'someRelativeDiv');

@@ -674,3 +698,3 @@ window.document.body.appendChild(relativeContainer);

it('should be included in relative node', function () {
var relativeContainer = window.document.createElement('div');
var relativeContainer = this.createElement('div');
relativeContainer.setAttribute('id', 'someRelativeDiv');

@@ -677,0 +701,0 @@ window.document.body.appendChild(relativeContainer);

@@ -605,3 +605,3 @@ /*global selectElementContents*/

var el = this.createElement('div');
el.innerHTML = '<p>Plain <b>bold</b> <a href="#">li<img src="../demo.img/medium-editor.jpg" />nk</a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
el.innerHTML = '<p>Plain <b>bold</b> <a href="#">li<img src="../demo/img/medium-editor.jpg" />nk</a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
var textNodes = MediumEditor.util.findOrCreateMatchingTextNodes(document, el, { start: 11, end: 15 });

@@ -616,3 +616,3 @@ expect(textNodes.length).toBe(3);

var el = this.createElement('div');
el.innerHTML = '<p>Plain <b>bold</b> <a href="#">link<img src="../demo.img/medium-editor.jpg" /></a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
el.innerHTML = '<p>Plain <b>bold</b> <a href="#">link<img src="../demo/img/medium-editor.jpg" /></a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
var textNodes = MediumEditor.util.findOrCreateMatchingTextNodes(document, el, { start: 11, end: 15 });

@@ -626,3 +626,3 @@ expect(textNodes.length).toBe(2);

var el = this.createElement('div');
el.innerHTML = '<p>Plain <b>bold</b> <a href="#"><img src="../demo.img/medium-editor.jpg" /></a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
el.innerHTML = '<p>Plain <b>bold</b> <a href="#"><img src="../demo/img/medium-editor.jpg" /></a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
var textNodes = MediumEditor.util.findOrCreateMatchingTextNodes(document, el, { start: 11, end: 11 });

@@ -635,3 +635,3 @@ expect(textNodes.length).toBe(1);

var el = this.createElement('div');
el.innerHTML = '<p>Plain <b>bold</b> <a href="#"><img src="../demo.img/medium-editor.jpg" /><img src="../demo.img/roman.jpg" />link</a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
el.innerHTML = '<p>Plain <b>bold</b> <a href="#"><img src="../demo/img/medium-editor.jpg" /><img src="../demo/img/roman.jpg" />link</a> <i>italic</i> <u>underline</u> <span>span1 <span>span2</span></span></p>';
var textNodes = MediumEditor.util.findOrCreateMatchingTextNodes(document, el, { start: 11, end: 15 });

@@ -638,0 +638,0 @@ expect(textNodes.length).toBe(3);

@@ -14,3 +14,3 @@ (function () {

Events.prototype = {
InputEventOnContenteditableSupported: !MediumEditor.util.isIE,
InputEventOnContenteditableSupported: !MediumEditor.util.isIE && !MediumEditor.util.isEdge,

@@ -17,0 +17,0 @@ // Helpers for event handling

@@ -43,2 +43,4 @@ /*global NodeFilter*/

isEdge: (/Edge\/\d+/).exec(navigator.userAgent) !== null,
// if firefox

@@ -441,3 +443,10 @@ isFF: (navigator.userAgent.toLowerCase().indexOf('firefox') > -1),

if (doc.queryCommandSupported('insertHTML')) {
/* Edge's implementation of insertHTML is just buggy right now:
* - Doesn't allow leading white space at the beginning of an element
* - Found a case when a <font size="2"> tag was inserted when calling alignCenter inside a blockquote
*
* There are likely many other bugs, these are just the ones we found so far.
* For now, let's just use the same fallback we did for IE
*/
if (!MediumEditor.util.isEdge && doc.queryCommandSupported('insertHTML')) {
try {

@@ -531,3 +540,3 @@ return doc.execCommand('insertHTML', false, html);

// When FF or IE, we have to handle blockquote node seperately as 'formatblock' does not work.
// When FF, IE and Edge, we have to handle blockquote node seperately as 'formatblock' does not work.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Commands

@@ -540,4 +549,4 @@ if (blockContainer && blockContainer.nodeName.toLowerCase() === 'blockquote') {

// For Firefox, make sure there's a nested block element before calling outdent
if (Util.isFF && tagName === 'p') {
// For Firefox and Edge, make sure there's a nested block element before calling outdent
if ((Util.isFF || Util.isEdge) && tagName === 'p') {
childNodes = Array.prototype.slice.call(blockContainer.childNodes);

@@ -544,0 +553,0 @@ // If there are some non-block elements we need to wrap everything in a <p> before we outdent

@@ -18,3 +18,3 @@ MediumEditor.parseVersionString = function (release) {

// grunt-bump looks for this:
'version': '5.14.1'
'version': '5.14.2'
}).version);

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc