MDL-77706 atto_link: Work around Mozilla bug 1906559

This upstream bug prevents creation of an anchor with a hyperlink where
the content has a block-like display.

The workaround is to wrap the content in a span, set the display to
inline, call the `createLink` command on the span, move the content out
of the span, and then remove it.

This is only done for Firefox-based browsers.
This commit is contained in:
Andrew Nicols 2024-07-08 23:18:03 +08:00
parent 4197e50fec
commit b2018b2fbc
No known key found for this signature in database
GPG Key ID: 6D1E3157C8CFBF14
4 changed files with 83 additions and 7 deletions

View File

@ -317,8 +317,33 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
selectednode = host.insertContentAtFocusPoint(link.get('outerHTML'));
host.setSelection(host.getSelectionFromNode(selectednode));
} else {
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
if (Y.UA.gecko > 0) {
// For Firefox / Gecko we need to wrap the selection in a span so we can surround it with an anchor.
// This relates to https://bugzilla.mozilla.org/show_bug.cgi?id=1906559.
var originalSelection = document.getSelection();
var wrapper = document.createElement('span');
wrapper.setAttribute('data-wrapper', '');
wrapper.style.display = 'inline';
var i;
for (i = 0; i < originalSelection.rangeCount; i++) {
originalSelection.getRangeAt(i).surroundContents(wrapper);
}
host.setSelection(host.getSelectionFromNode(Y.one(wrapper)));
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
var anchorNode = wrapper.parentNode;
wrapper.children.forEach(function(child) {
anchorNode.appendChild(child);
});
wrapper.remove();
} else {
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
}
// Now set the target.
selectednode = host.getSelectionParentNode();

File diff suppressed because one or more lines are too long

View File

@ -317,8 +317,33 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
selectednode = host.insertContentAtFocusPoint(link.get('outerHTML'));
host.setSelection(host.getSelectionFromNode(selectednode));
} else {
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
if (Y.UA.gecko > 0) {
// For Firefox / Gecko we need to wrap the selection in a span so we can surround it with an anchor.
// This relates to https://bugzilla.mozilla.org/show_bug.cgi?id=1906559.
var originalSelection = document.getSelection();
var wrapper = document.createElement('span');
wrapper.setAttribute('data-wrapper', '');
wrapper.style.display = 'inline';
var i;
for (i = 0; i < originalSelection.rangeCount; i++) {
originalSelection.getRangeAt(i).surroundContents(wrapper);
}
host.setSelection(host.getSelectionFromNode(Y.one(wrapper)));
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
var anchorNode = wrapper.parentNode;
wrapper.children.forEach(function(child) {
anchorNode.appendChild(child);
});
wrapper.remove();
} else {
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
}
// Now set the target.
selectednode = host.getSelectionParentNode();

View File

@ -315,8 +315,33 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
selectednode = host.insertContentAtFocusPoint(link.get('outerHTML'));
host.setSelection(host.getSelectionFromNode(selectednode));
} else {
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
if (Y.UA.gecko > 0) {
// For Firefox / Gecko we need to wrap the selection in a span so we can surround it with an anchor.
// This relates to https://bugzilla.mozilla.org/show_bug.cgi?id=1906559.
var originalSelection = document.getSelection();
var wrapper = document.createElement('span');
wrapper.setAttribute('data-wrapper', '');
wrapper.style.display = 'inline';
var i;
for (i = 0; i < originalSelection.rangeCount; i++) {
originalSelection.getRangeAt(i).surroundContents(wrapper);
}
host.setSelection(host.getSelectionFromNode(Y.one(wrapper)));
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
var anchorNode = wrapper.parentNode;
wrapper.children.forEach(function(child) {
anchorNode.appendChild(child);
});
wrapper.remove();
} else {
document.execCommand('unlink', false, null);
document.execCommand('createLink', false, url);
}
// Now set the target.
selectednode = host.getSelectionParentNode();