medium-editor
Advanced tools
medium-editor - npm Package Compare versions
Comparing version 5.21.0 to 5.21.1
| { | ||
| "name": "medium-editor", | ||
| "version": "5.21.0", | ||
| "version": "5.21.1", | ||
| "author": "Davi Ferreira <hi@daviferreira.com>", | ||
@@ -5,0 +5,0 @@ "contributors": [ |
@@ -410,4 +410,38 @@ /*global fireEvent, selectElementContentsAndFire */ | ||
| }); | ||
| it('should correctly set preview position even if elementsContainer is absolute', function () { | ||
| var container = document.createElement('div'), | ||
| editor, anchorPreview; | ||
| container.style.position = 'absolute'; | ||
| container.style.left = '100px'; | ||
| container.style.top = '100px'; | ||
| document.body.appendChild(container); | ||
| editor = this.newMediumEditor('.editor', { | ||
| elementsContainer: container, | ||
| anchorPreview: { | ||
| showWhenToolbarIsVisible: true | ||
| }, | ||
| toolbar: { | ||
| static: true | ||
| } | ||
| }); | ||
| anchorPreview = editor.getExtensionByName('anchor-preview').getPreviewElement(); | ||
| selectElementContentsAndFire(editor.elements[0].firstChild); | ||
| // show preview | ||
| fireEvent(document.getElementById('test-link'), 'mouseover'); | ||
| // preview shows only after delay | ||
| jasmine.clock().tick(1); | ||
| expect(anchorPreview.classList.contains('medium-editor-anchor-preview-active')).toBe(true); | ||
| expect(parseInt(anchorPreview.style.left, 10)).toBeLessThan(100); | ||
| expect(parseInt(anchorPreview.style.top, 10)).toBeLessThan(100); | ||
| document.body.removeChild(container); | ||
| }); | ||
| }); | ||
| }); |
@@ -206,2 +206,3 @@ /*global fireEvent, selectElementContents, | ||
| }); | ||
| it('should add http:// if need be and linkValidation option is set to true', function () { | ||
@@ -224,2 +225,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should add tel: if need be and linkValidation option is set to true', function () { | ||
@@ -242,2 +244,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change protocol when a valid one is included', function () { | ||
@@ -261,2 +264,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change protocol when a tel scheme is included', function () { | ||
@@ -281,2 +285,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change protocol when a maps scheme is included', function () { | ||
@@ -301,2 +306,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change protocol for protocol-relative URLs', function () { | ||
@@ -320,2 +326,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change protocol for any alphabetic scheme', function () { | ||
@@ -339,2 +346,22 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change fragment identifier when link begins with hash', function () { | ||
| var editor = this.newMediumEditor('.editor', { | ||
| anchor: { | ||
| linkValidation: true | ||
| } | ||
| }), | ||
| validHashLink = '#!$&\'()*+,;=123abcDEF-._~:@/?', | ||
| link, | ||
| anchorExtension = editor.getExtensionByName('anchor'); | ||
| selectElementContentsAndFire(editor.elements[0]); | ||
| anchorExtension.showForm(validHashLink); | ||
| fireEvent(anchorExtension.getForm().querySelector('a.medium-editor-toolbar-save'), 'click'); | ||
| link = editor.elements[0].querySelector('a'); | ||
| expect(link).not.toBeNull(); | ||
| expect(link.getAttribute('href')).toBe(validHashLink); | ||
| }); | ||
| it('should change spaces to %20 for a valid url if linkValidation options is set to true', function () { | ||
@@ -365,2 +392,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should not change spaces to %20 if linkValidation is set to false', function () { | ||
@@ -393,2 +421,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should add target="_blank" when "open in a new window" checkbox is checked', function () { | ||
@@ -417,2 +446,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should add target="_blank" when respective option is set to true', function () { | ||
@@ -433,2 +463,3 @@ var editor = this.newMediumEditor('.editor', { | ||
| }); | ||
| it('should create a button when user selects this option and presses enter', function () { | ||
@@ -435,0 +466,0 @@ spyOn(MediumEditor.prototype, 'createLink').and.callThrough(); |
@@ -425,2 +425,31 @@ /*global fireEvent, firePreparedEvent, | ||
| }); | ||
| describe('within a blockquote element', function () { | ||
| it('at the end of the blockquote, p tag should be created next, not blockquote', function () { | ||
| this.el.innerHTML = '<blockquote>lorem ipsum</blockquote>'; | ||
| var editor = this.newMediumEditor('.editor'), | ||
| target = editor.elements[0].querySelector('blockquote').firstChild; | ||
| placeCursorInsideElement(target, target.textContent.length); | ||
| fireEvent(target, 'keydown', { | ||
| keyCode: MediumEditor.util.keyCode.ENTER | ||
| }); | ||
| expect(this.el.innerHTML).toBe('<blockquote>lorem ipsum</blockquote><p><br></p>'); | ||
| }); | ||
| it('NOT at the start of the blockqoute, no formatting should be changed', function () { | ||
| this.el.innerHTML = '<blockquote>lorem ipsum</blockquote>'; | ||
| var editor = this.newMediumEditor('.editor'), | ||
| target = editor.elements[0].querySelector('blockquote').firstChild; | ||
| placeCursorInsideElement(target, 0); | ||
| fireEvent(target, 'keydown', { | ||
| keyCode: MediumEditor.util.keyCode.ENTER | ||
| }); | ||
| expect(this.el.innerHTML).toBe('<blockquote>lorem ipsum</blockquote>'); | ||
| }); | ||
| }); | ||
| }); | ||
@@ -427,0 +456,0 @@ |
@@ -16,2 +16,7 @@ /*global selectElementContents, | ||
| { | ||
| source: 'Google docs w/ numbered font weight', | ||
| paste: '<meta charset=\'utf-8\'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-b1bb8bfe-f54c-2e1f-72e2-4c7608d2be70"><div dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold</span></div><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Italic</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold and Italic</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">A </span><a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)" style="text-decoration:none;"><span style="font-size:15px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">link</span></a><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">.</span></p></b><br class="Apple-interchange-newline">', | ||
| output: '<div><b>Bold</b></div><p><i>Italic</i></p><p><b><i>Bold and Italic</i></b></p><p>A <a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)">link</a>.</p>' | ||
| }, | ||
| { | ||
| source: 'Inside editor', | ||
@@ -59,2 +64,7 @@ paste: '<meta charset=\'utf-8\'><p style="margin-bottom: 40px; color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b>Bold</b></p><p style="margin-bottom: 40px; color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><i>Italic</i></p><p style="margin-bottom: 40px; color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><i>Bold and Italic</i></b></p><p style="margin-bottom: 40px; color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">A<span class="Apple-converted-space"> </span><a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)" style="color: black;">link</a>.</p>', | ||
| { | ||
| source: 'Google docs w/ numbered font weight', | ||
| paste: '<meta charset=\'utf-8\'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-2f060cc5-1888-a396-af95-bfb31478c7ae"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold,</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> </span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">italic,</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> </span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">bold and italic</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">, and </span><a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)" style="text-decoration:none;"><span style="font-size:15px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">a link</span></a><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">.</span></b>', | ||
| output: '<b>Bold,</b> <i>italic,</i> <b><i>bold and italic</i></b>, and <a href="http://en.wikipedia.org/wiki/Link_\\(The_Legend_of_Zelda\\)">a link</a>\\.' | ||
| }, | ||
| { | ||
| source: 'Inside editor', | ||
@@ -61,0 +71,0 @@ paste: '<meta charset=\'utf-8\'><b style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">Bold,</b><span style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"> </span><i style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">italic,</i><span style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"><span class="Apple-converted-space"> </span></span><b style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><i>bold and italic</i></b><span style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">, and<span class="Apple-converted-space"> </span></span><a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)" style="color: black; font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">a link</a><span style="color: rgb(0, 0, 0); font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; font-size: 22.22222328186035px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 30px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.</span>', |
@@ -365,2 +365,26 @@ /*global fireEvent, selectElementContents, | ||
| }); | ||
| it('should correctly update position even if elementsContainer is absolute', function () { | ||
| var container = document.createElement('div'), | ||
| editor, toolbar; | ||
| container.style.position = 'absolute'; | ||
| container.style.left = '100px'; | ||
| container.style.top = '100px'; | ||
| document.body.appendChild(container); | ||
| this.el.innerHTML = 'lorem'; | ||
| editor = this.newMediumEditor('.editor', { | ||
| elementsContainer: container | ||
| }); | ||
| toolbar = editor.getExtensionByName('toolbar').getToolbarElement(); | ||
| selectElementContentsAndFire(this.el); | ||
| expect(toolbar.classList.contains('medium-editor-toolbar-active')).toBe(true); | ||
| expect(parseInt(toolbar.style.left, 10)).toBeLessThan(100); | ||
| expect(parseInt(toolbar.style.top, 10)).toBeLessThan(100); | ||
| document.body.removeChild(container); | ||
| }); | ||
| }); | ||
@@ -367,0 +391,0 @@ |
@@ -141,2 +141,16 @@ (function () { | ||
| MediumEditor.util.execFormatBlock(this.options.ownerDocument, 'p'); | ||
| } else if (MediumEditor.util.isKey(event, MediumEditor.util.keyCode.ENTER) && | ||
| (MediumEditor.util.getClosestTag(node, 'blockquote') !== false) && | ||
| MediumEditor.selection.getCaretOffsets(node).right === 0) { | ||
| // when cursor is at the end of <blockquote>, | ||
| // then pressing enter key should create <p> tag, not <blockquote> | ||
| p = this.options.ownerDocument.createElement('p'); | ||
| p.innerHTML = '<br>'; | ||
| node.parentElement.insertBefore(p, node.nextSibling); | ||
| // move the cursor into the new paragraph | ||
| MediumEditor.selection.moveCursor(this.options.ownerDocument, p); | ||
| event.preventDefault(); | ||
| } | ||
@@ -143,0 +157,0 @@ } |
@@ -106,9 +106,11 @@ (function () { | ||
| activeAnchor = activeAnchor || this.activeAnchor; | ||
| var buttonHeight = this.anchorPreview.offsetHeight, | ||
| var containerWidth = this.window.innerWidth, | ||
| buttonHeight = this.anchorPreview.offsetHeight, | ||
| boundary = activeAnchor.getBoundingClientRect(), | ||
| middleBoundary = (boundary.left + boundary.right) / 2, | ||
| diffLeft = this.diffLeft, | ||
| diffTop = this.diffTop, | ||
| halfOffsetWidth, | ||
| defaultLeft; | ||
| elementsContainer = this.getEditorOption('elementsContainer'), | ||
| elementsContainerAbsolute = ['absolute', 'fixed'].indexOf(window.getComputedStyle(elementsContainer).getPropertyValue('position')) > -1, | ||
| relativeBoundary = {}, | ||
| halfOffsetWidth, defaultLeft, middleBoundary, elementsContainerBoundary, top; | ||
@@ -123,3 +125,26 @@ halfOffsetWidth = this.anchorPreview.offsetWidth / 2; | ||
| this.anchorPreview.style.top = Math.round(buttonHeight + boundary.bottom - diffTop + this.window.pageYOffset - this.anchorPreview.offsetHeight) + 'px'; | ||
| // If container element is absolute / fixed, recalculate boundaries to be relative to the container | ||
| if (elementsContainerAbsolute) { | ||
| elementsContainerBoundary = elementsContainer.getBoundingClientRect(); | ||
| ['top', 'left'].forEach(function (key) { | ||
| relativeBoundary[key] = boundary[key] - elementsContainerBoundary[key]; | ||
| }); | ||
| relativeBoundary.width = boundary.width; | ||
| relativeBoundary.height = boundary.height; | ||
| boundary = relativeBoundary; | ||
| containerWidth = elementsContainerBoundary.width; | ||
| // Adjust top position according to container scroll position | ||
| top = elementsContainer.scrollTop; | ||
| } else { | ||
| // Adjust top position according to window scroll position | ||
| top = this.window.pageYOffset; | ||
| } | ||
| middleBoundary = boundary.left + boundary.width / 2; | ||
| top += buttonHeight + boundary.top + boundary.height - diffTop - this.anchorPreview.offsetHeight; | ||
| this.anchorPreview.style.top = Math.round(top) + 'px'; | ||
| this.anchorPreview.style.right = 'initial'; | ||
@@ -129,3 +154,3 @@ if (middleBoundary < halfOffsetWidth) { | ||
| this.anchorPreview.style.right = 'initial'; | ||
| } else if ((this.window.innerWidth - middleBoundary) < halfOffsetWidth) { | ||
| } else if ((containerWidth - middleBoundary) < halfOffsetWidth) { | ||
| this.anchorPreview.style.left = 'auto'; | ||
@@ -132,0 +157,0 @@ this.anchorPreview.style.right = 0; |
@@ -238,3 +238,4 @@ (function () { | ||
| // Matches common external protocols "mailto:" "tel:" "maps:" | ||
| var urlSchemeRegex = /^([a-z]+:)?\/\/|^(mailto|tel|maps):/i, | ||
| // Matches relative hash link, begins with "#" | ||
| var urlSchemeRegex = /^([a-z]+:)?\/\/|^(mailto|tel|maps):|^\#/i, | ||
| // var te is a regex for checking if the string is a telephone number | ||
@@ -241,0 +242,0 @@ telRegex = /^\+?\s?\(?(?:\d\s?\-?\)?){3,20}$/; |
@@ -40,3 +40,3 @@ (function () { | ||
| // replace google docs italics+bold with a span to be replaced once the html is inserted | ||
| [new RegExp(/<span[^>]*(font-style:italic;font-weight:bold|font-weight:bold;font-style:italic)[^>]*>/gi), '<span class="replace-with italic bold">'], | ||
| [new RegExp(/<span[^>]*(font-style:italic;font-weight:(bold|700)|font-weight:(bold|700);font-style:italic)[^>]*>/gi), '<span class="replace-with italic bold">'], | ||
@@ -47,3 +47,3 @@ // replace google docs italics with a span to be replaced once the html is inserted | ||
| //[replace google docs bolds with a span to be replaced once the html is inserted | ||
| [new RegExp(/<span[^>]*font-weight:bold[^>]*>/gi), '<span class="replace-with bold">'], | ||
| [new RegExp(/<span[^>]*font-weight:(bold|700)[^>]*>/gi), '<span class="replace-with bold">'], | ||
@@ -50,0 +50,0 @@ // replace manually entered b/i/a tags with real ones |
@@ -120,2 +120,4 @@ # Extensions | ||
| * Extends your Medium Editor with the possibility add buttons. | ||
| * [MediumEditor Phrase](https://github.com/nymag/medium-editor-phrase) | ||
| * Adds a configurable button to the MediumEditor toolbar which adds phrasing content tags (e.g. `span` tags) to selected text. | ||
| * [MediumEditor Handsontable](https://github.com/asselinpaul/medium-editor-handsontable) | ||
@@ -122,0 +124,0 @@ * Supports adding [handsontable](https://handsontable.com/) spreadsheets to MediumEditor. |
@@ -619,4 +619,3 @@ (function () { | ||
| var windowWidth = this.window.innerWidth, | ||
| middleBoundary = (boundary.left + boundary.right) / 2, | ||
| var containerWidth = this.window.innerWidth, | ||
| toolbarElement = this.getToolbarElement(), | ||
@@ -627,24 +626,56 @@ toolbarHeight = toolbarElement.offsetHeight, | ||
| buttonHeight = 50, | ||
| defaultLeft = this.diffLeft - halfOffsetWidth; | ||
| defaultLeft = this.diffLeft - halfOffsetWidth, | ||
| elementsContainer = this.getEditorOption('elementsContainer'), | ||
| elementsContainerAbsolute = ['absolute', 'fixed'].indexOf(window.getComputedStyle(elementsContainer).getPropertyValue('position')) > -1, | ||
| positions = {}, | ||
| relativeBoundary = {}, | ||
| middleBoundary, elementsContainerBoundary; | ||
| // If container element is absolute / fixed, recalculate boundaries to be relative to the container | ||
| if (elementsContainerAbsolute) { | ||
| elementsContainerBoundary = elementsContainer.getBoundingClientRect(); | ||
| ['top', 'left'].forEach(function (key) { | ||
| relativeBoundary[key] = boundary[key] - elementsContainerBoundary[key]; | ||
| }); | ||
| relativeBoundary.width = boundary.width; | ||
| relativeBoundary.height = boundary.height; | ||
| boundary = relativeBoundary; | ||
| containerWidth = elementsContainerBoundary.width; | ||
| // Adjust top position according to container scroll position | ||
| positions.top = elementsContainer.scrollTop; | ||
| } else { | ||
| // Adjust top position according to window scroll position | ||
| positions.top = this.window.pageYOffset; | ||
| } | ||
| middleBoundary = boundary.left + boundary.width / 2; | ||
| positions.top += boundary.top - toolbarHeight; | ||
| if (boundary.top < buttonHeight) { | ||
| toolbarElement.classList.add('medium-toolbar-arrow-over'); | ||
| toolbarElement.classList.remove('medium-toolbar-arrow-under'); | ||
| toolbarElement.style.top = buttonHeight + boundary.bottom - this.diffTop + this.window.pageYOffset - toolbarHeight + 'px'; | ||
| positions.top += buttonHeight + boundary.height - this.diffTop; | ||
| } else { | ||
| toolbarElement.classList.add('medium-toolbar-arrow-under'); | ||
| toolbarElement.classList.remove('medium-toolbar-arrow-over'); | ||
| toolbarElement.style.top = boundary.top + this.diffTop + this.window.pageYOffset - toolbarHeight + 'px'; | ||
| positions.top += this.diffTop; | ||
| } | ||
| if (middleBoundary < halfOffsetWidth) { | ||
| toolbarElement.style.left = defaultLeft + halfOffsetWidth + 'px'; | ||
| toolbarElement.style.right = 'initial'; | ||
| } else if ((windowWidth - middleBoundary) < halfOffsetWidth) { | ||
| toolbarElement.style.left = 'auto'; | ||
| toolbarElement.style.right = 0; | ||
| positions.left = defaultLeft + halfOffsetWidth; | ||
| positions.right = 'initial'; | ||
| } else if ((containerWidth - middleBoundary) < halfOffsetWidth) { | ||
| positions.left = 'auto'; | ||
| positions.right = 0; | ||
| } else { | ||
| toolbarElement.style.left = defaultLeft + middleBoundary + 'px'; | ||
| toolbarElement.style.right = 'initial'; | ||
| positions.left = defaultLeft + middleBoundary; | ||
| positions.right = 'initial'; | ||
| } | ||
| ['top', 'left', 'right'].forEach(function (key) { | ||
| toolbarElement.style[key] = positions[key] + (isNaN(positions[key]) ? '' : 'px'); | ||
| }); | ||
| } | ||
@@ -651,0 +682,0 @@ }); |
@@ -18,3 +18,3 @@ MediumEditor.parseVersionString = function (release) { | ||
| // grunt-bump looks for this: | ||
| 'version': '5.21.0' | ||
| 'version': '5.21.1' | ||
| }).version); |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.17%
1930513
- Lines of code
- increased by0.91%
24890