User:DreamRimmer/DR Editor.js
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
![]() | This user script seems to have a documentation page at User:DreamRimmer/DR Editor. |
// <nowiki>
mw.loader.using(
['mediawiki.diff', 'mediawiki.diff.styles', 'oojs-ui-core'],
() => {
if (
!['view', 'edit', 'history'].includes(mw.config.get('wgAction')) ||
mw.config.get('wgNamespaceNumber') < 0 ||
mw.config.get('wgArticleId') < 1
) {
return;
}
const DR = {};
DR.pagename = mw.config.get('wgPageName');
DR.contentmodel = null;
DR.contentmodels = [
'wikitext',
'text',
'sanitized-css',
'json',
'javascript',
'css',
'Scribunto'
];
function initEditor(section) {
const queryParams = {
action: 'query',
titles: DR.pagename,
prop: 'revisions',
rvprop: ['content', 'contentmodel'],
rvlimit: 1,
format: 'json',
formatversion: 2
};
if (typeof section !== 'undefined') {
queryParams.rvsection = section;
}
new mw.Api()
.get(queryParams)
.done(response => {
if (!response.query.pages[0].revisions) {
mw.notify('Failed to load section content.', { type: 'error' });
return;
}
DR.content = response.query.pages[0].revisions[0].content;
DR.contentmodel = response.query.pages[0].revisions[0].contentmodel;
if (!DR.contentmodels.includes(DR.contentmodel)) {
mw.notify('Page content model is not a simple text-based one.', {
title: 'Unallowed content model',
type: 'error',
autoHide: true,
autoHideSeconds: 5,
tag: 'DR-notification'
});
return;
}
$('#mw-content-text').hide();
DR.textarea = new OO.ui.MultilineTextInputWidget({
value: DR.content,
type: 'text',
id: 'DR-textarea-div',
inputId: 'DR-textarea'
});
DR.summaryInput = new OO.ui.TextInputWidget({
placeholder: 'Edit summary',
id: 'DR-summary',
inputId: 'DR-summary-input'
});
DR.summaryField = new OO.ui.FieldLayout(DR.summaryInput, {
label: 'Edit summary:',
align: 'top'
});
DR.minorCheckbox = new OO.ui.CheckboxInputWidget({
selected: false,
id: 'DR-minor'
});
DR.minorField = new OO.ui.FieldLayout(DR.minorCheckbox, {
label: 'Mark edit as minor',
align: 'inline'
});
DR.saveButton = new OO.ui.ButtonWidget({
label: 'Save',
flags: ['primary', 'progressive'],
classes: 'DR-buttons',
id: 'DR-save'
});
DR.previewButton = new OO.ui.ButtonWidget({
label: 'Preview',
classes: 'DR-buttons',
id: 'DR-preview'
});
DR.reviewButton = new OO.ui.ButtonWidget({
label: 'Review Changes',
classes: 'DR-buttons',
id: 'DR-review'
});
DR.cancel = new OO.ui.ButtonWidget({
label: 'Cancel',
flags: ['destructive'],
classes: 'DR-buttons',
id: 'DR-cancel'
});
const $editorContainer = $('<div>')
.attr('id', 'DR-main')
.append(
$('<div>')
.attr('id', 'DR-output')
.css({
border: '1px solid #A2A9B1',
padding: '5px',
'margin-bottom': '10px',
display: 'none'
}),
DR.textarea.$element,
DR.summaryField.$element,
DR.minorField.$element,
$('<div>')
.attr('id', 'DR-buttons')
.css({
display: 'flex',
padding: '5px',
'justify-content': 'space-between',
'margin-top': '4px'
})
);
$('#mw-content-text').after($editorContainer);
$('#DR-buttons').prepend(
$('<div>').append(
DR.saveButton.$element,
DR.previewButton.$element,
DR.reviewButton.$element,
DR.cancel.$element
)
);
$('#DR-textarea-div').css({ margin: 0, 'max-width': '100%' });
$('#DR-textarea').css({
'min-height': '300px',
'min-width': '100%',
resize: 'vertical',
'font-size': 'small',
'font-family': 'monospace, monospace'
});
$('#DR-summary').css({
'margin-top': '3px',
'max-width': '100%',
width: '100%'
});
DR.saveButton.$element.click(() => {
const newContent = $('#DR-textarea').val();
const summary =
(DR.summaryInput.getValue() || '') +
' ([[User:DreamRimmer/DR Editor|DR]])';
const editParams = {
action: 'edit',
title: DR.pagename,
text: newContent,
summary: summary
};
if (typeof section !== 'undefined') {
editParams.section = section;
}
if (DR.minorCheckbox.isSelected()) {
editParams.minor = true;
}
new mw.Api()
.postWithEditToken(editParams)
.done(response => {
if (response.error && response.error.code === 'editconflict') {
const dialog = new OO.ui.MessageDialog();
const windowManager = new OO.ui.WindowManager();
$(document.body).append(windowManager.$element);
windowManager.addWindows([dialog]);
dialog.open({
title: 'Edit Conflict',
message:
response.error.info ||
'An edit conflict occurred. Please resolve it manually.'
});
} else if (response.edit && response.edit.result === 'Success') {
mw.notify('Page saved successfully!', {
title: 'Saved',
type: 'success',
autoHide: true,
autoHideSeconds: 5,
tag: 'DR-notification'
});
location.reload();
} else {
mw.notify('Error saving page.', {
title: 'Error',
type: 'error',
autoHide: true,
autoHideSeconds: 5,
tag: 'DR-notification'
});
}
})
.fail(() => {
mw.notify('Error saving page.', {
title: 'Error',
type: 'error',
autoHide: true,
autoHideSeconds: 5,
tag: 'DR-notification'
});
});
});
DR.previewButton.$element.click(() => {
$('#DR-output')
.show()
.html(
'<img src="/media/wikipedia/commons/5/51/Ajax-loader4.gif" width="30" height="30" alt="Loading...">'
);
const previewContent = $('#DR-textarea').val();
new mw.Api()
.post({
action: 'parse',
text: previewContent,
title: 'Preview',
contentmodel: DR.contentmodel,
pst: true,
format: 'json'
})
.done(response => {
$('#DR-output').html(response.parse.text['*']);
})
.fail(() => {
$('#DR-output').html(
'<div style="color: red;">Error generating preview.</div>'
);
});
});
DR.reviewButton.$element.click(() => {
$('#DR-output')
.show()
.html(
'<img src="/media/wikipedia/commons/5/51/Ajax-loader4.gif" width="30" height="30" alt="Loading...">'
);
$.ajax({
url: mw.config.get('wgScriptPath') + '/api.php',
data: {
action: 'compare',
fromtitle: DR.pagename,
toslots: 'main',
'totext-main': $('#DR-textarea').val(),
format: 'json',
formatversion: 2
},
type: 'POST',
dataType: 'json',
success: response => {
const diffHtml =
response.compare.body === ''
? '<div>(No changes)</div>'
: '<table class="diff diff-editfont-monospace" style="margin: auto; font-size: small;">' +
'<colgroup>' +
'<col class="diff-marker">' +
'<col class="diff-content">' +
'<col class="diff-marker">' +
'<col class="diff-content">' +
'</colgroup>' +
'<tbody>' +
response.compare.body +
'</tbody>' +
'</table>';
$('#DR-output').html(diffHtml);
mw.hook('wikipage.diff').fire($('#DR-output'));
},
error: () => {
$('#DR-output').html(
'<div style="color: red;">Error generating diff.</div>'
);
}
});
});
DR.cancel.$element.click(() => {
$('#mw-content-text, #DR-main').toggle();
$('#DR-main').remove();
});
})
.fail(error => {
mw.notify('API error: ' + error, { type: 'error' });
});
}
$(document).ready(() => {
const topBtn = $('<li>')
.attr('id', 'DR-Edit-TopBtn')
.append(
$('<span>').append(
$('<a>')
.attr('href', '#')
.text('DR Editor')
).data({ number: -1, target: DR.pagename })
);
if (mw.config.get('skin') === 'minerva') {
$(topBtn).css({ 'align-items': 'center', display: 'flex' });
$(topBtn).find('span').addClass('page-actions-menu__list-item');
$(topBtn)
.find('a')
.addClass(
'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-edit-base20 mw-ui-icon-with-label-desktop'
)
.css('vertical-align', 'middle');
}
if ($('#ca-edit').length > 0 && $('#DR-Edit-TopBtn').length === 0) {
if (mw.config.get('skin') === 'minerva') {
$('#ca-edit').parent().after(topBtn);
} else {
$('#ca-edit').after(topBtn);
}
$('#DR-Edit-TopBtn').click(() => {
initEditor();
});
} else if ($('#ca-edit').length === 0) {
console.error('fail_to_init_quickedit');
}
});
$(async function () {
// Diff undo functionality from [[User:Nardog/DiffUndo.js]]
let section = null;
const dependencies = [
'jquery.textSelection',
'oojs-ui-core',
'oojs-ui.styles.icons-editing-core'
];
await mw.loader.using(dependencies);
mw.loader.addStyleTag(
'.diff > tbody > tr{position:relative} .diffundo{position:absolute;inset-inline-end:0;bottom:0} tr:not(:hover) > td > .diffundo:not(:focus-within){opacity:0} .diffundo-undone{text-decoration:line-through;opacity:0.5}'
);
const idxMap = new WeakMap();
let offset = 0;
let rev;
const handler = button => {
const $row = button.$element.closest('tr');
const numRow = $row.prevAll().toArray().find(row => idxMap.has(row));
if (!numRow) {
mw.notify("Couldn't get the line number.", {
tag: 'diffundo',
type: 'error'
});
return;
}
const isUndone = $row.hasClass('diffundo-undone');
const $toReplace = $row.children(isUndone ? '.diff-deletedline' : '.diff-addedline');
const $toRestore = $row.children(isUndone ? '.diff-addedline' : '.diff-deletedline');
const isInsert = !$toReplace.length;
const isRemove = !$toRestore.length;
const $midLines = $row.prevUntil(numRow).map(function () {
return this.querySelector(
this.classList.contains('diffundo-undone')
? ':scope > .diff-deletedline'
: ':scope > .diff-context, :scope > .diff-addedline'
);
});
const lineIdx = idxMap.get(numRow) + $midLines.length;
const $textarea = $('#DR-textarea');
const lines = $textarea.textSelection('getContents').split('\n');
let canUndo;
if (isInsert) {
canUndo =
!$midLines.length ||
lines[lineIdx - 1] === $midLines[0].textContent;
} else {
canUndo = lines[lineIdx] === $toReplace.text();
}
if (!canUndo) {
mw.notify('The line has been modified since the diff.', {
tag: 'diffundo',
type: 'warn'
});
return;
}
const coords = [window.scrollX, window.scrollY];
let [start, end] = $textarea.textSelection('getCaretPosition', { startAndEnd: true });
const beforeLen = lines.slice(0, lineIdx).join('').length + lineIdx;
if (isRemove) {
const toReplaceLen = lines[lineIdx].length;
lines.splice(lineIdx, 1);
[start, end] = [start, end].map(idx => {
if (idx > beforeLen + toReplaceLen) {
return idx - toReplaceLen - 1;
} else if (idx > beforeLen) {
return beforeLen;
}
return idx;
});
$row.nextAll().each(function () {
if (idxMap.has(this)) {
idxMap.set(this, idxMap.get(this) - 1);
}
});
} else if (isInsert) {
const text = $toRestore.text();
lines.splice(lineIdx, 0, text);
[start, end] = [start, end].map(idx => {
if (idx > beforeLen) {
return idx + text.length + 1;
}
return idx;
});
$row.nextAll().each(function () {
if (idxMap.has(this)) {
idxMap.set(this, idxMap.get(this) + 1);
}
});
} else {
const toReplaceLen = lines[lineIdx].length;
const text = $toRestore.text();
lines.splice(lineIdx, 1, text);
[start, end] = [start, end].map(idx => {
if (idx > beforeLen + toReplaceLen) {
return idx - (toReplaceLen - text.length);
} else if (idx > beforeLen) {
return beforeLen;
}
return idx;
});
}
$textarea.textSelection('setContents', lines.join('\n'));
$textarea
.textSelection('setSelection', { start, end })
.textSelection('scrollToCaretPosition');
$row.toggleClass('diffundo-undone', !isUndone);
window.scrollTo(...coords);
setTimeout(() => {
button.focus();
});
};
const updateOffset = async () => {
if (rev) {
const { query } = await new mw.Api().get({
action: 'query',
titles: mw.config.get('wgPageName'),
prop: 'info',
formatversion: 2
});
if (query.pages[0].lastrevid === rev) return;
}
const { parse } = await new mw.Api().get({
action: 'parse',
page: mw.config.get('wgPageName'),
prop: 'revid|sections|wikitext',
formatversion: 2
});
const charOffset = section
? parse.sections.find(s => s.index === section)?.byteoffset
: 0;
if (section && (charOffset === undefined || charOffset === null)) {
mw.notify("Couldn't get the section offset.", {
tag: 'diffundo',
type: 'error'
});
return false;
}
offset = charOffset
? [...parse.wikitext].slice(0, charOffset - 1).join('').split('\n')
.length
: 0;
rev = parse.revid;
};
mw.hook('wikipage.diff').add(async $diff => {
if (!$('#DR-main').length) {
return;
}
const $lineNums = $diff.find('.diff-lineno:last-child');
if (
!$lineNums.length ||
(section &&
((await updateOffset()) === false || !$diff[0].isConnected))
) {
return;
}
$lineNums.each(function () {
const num = this.textContent.replace(/\D/g, '');
if (!num) return;
idxMap.set(this.parentElement, num - 1 - offset);
});
$diff.find('.diff-addedline, .diff-empty.diff-side-added').append(() => {
const button = new OO.ui.ButtonWidget({
classes: ['diffundo'],
framed: false,
icon: 'undo',
title: 'Undo this line'
});
return button.on('click', handler, [button]).$element;
});
});
});
}
);
// </nowiki>