1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00

Ran eslint fix on existing codebase

Had to do some manual fixing of the app.js file due to misplaced
comments
This commit is contained in:
Dan Brown
2023-04-18 22:20:02 +01:00
parent 752ee664c2
commit e711290d8b
106 changed files with 905 additions and 869 deletions

View File

@ -2,7 +2,6 @@
* @param {Editor} editor
*/
export function listen(editor) {
// Replace editor content
window.$events.listen('editor::replace', ({html}) => {
editor.setContent(html);
@ -31,4 +30,4 @@ export function listen(editor) {
editor.focus();
}
});
}
}

View File

@ -1,32 +1,35 @@
import {register as registerShortcuts} from "./shortcuts";
import {listen as listenForCommonEvents} from "./common-events";
import {scrollToQueryString} from "./scrolling";
import {listenForDragAndPaste} from "./drop-paste-handling";
import {getPrimaryToolbar, registerAdditionalToolbars} from "./toolbars";
import {registerCustomIcons} from "./icons";
import {register as registerShortcuts} from './shortcuts';
import {listen as listenForCommonEvents} from './common-events';
import {scrollToQueryString} from './scrolling';
import {listenForDragAndPaste} from './drop-paste-handling';
import {getPrimaryToolbar, registerAdditionalToolbars} from './toolbars';
import {registerCustomIcons} from './icons';
import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
import {getPlugin as getDrawioPlugin} from "./plugin-drawio";
import {getPlugin as getCustomhrPlugin} from "./plugins-customhr";
import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager";
import {getPlugin as getAboutPlugin} from "./plugins-about";
import {getPlugin as getDetailsPlugin} from "./plugins-details";
import {getPlugin as getTasklistPlugin} from "./plugins-tasklist";
import {getPlugin as getCodeeditorPlugin} from './plugin-codeeditor';
import {getPlugin as getDrawioPlugin} from './plugin-drawio';
import {getPlugin as getCustomhrPlugin} from './plugins-customhr';
import {getPlugin as getImagemanagerPlugin} from './plugins-imagemanager';
import {getPlugin as getAboutPlugin} from './plugins-about';
import {getPlugin as getDetailsPlugin} from './plugins-details';
import {getPlugin as getTasklistPlugin} from './plugins-tasklist';
const style_formats = [
{title: "Large Header", format: "h2", preview: 'color: blue;'},
{title: "Medium Header", format: "h3"},
{title: "Small Header", format: "h4"},
{title: "Tiny Header", format: "h5"},
{title: "Paragraph", format: "p", exact: true, classes: ''},
{title: "Blockquote", format: "blockquote"},
{title: 'Large Header', format: 'h2', preview: 'color: blue;'},
{title: 'Medium Header', format: 'h3'},
{title: 'Small Header', format: 'h4'},
{title: 'Tiny Header', format: 'h5'},
{
title: "Callouts", items: [
{title: "Information", format: 'calloutinfo'},
{title: "Success", format: 'calloutsuccess'},
{title: "Warning", format: 'calloutwarning'},
{title: "Danger", format: 'calloutdanger'}
]
title: 'Paragraph', format: 'p', exact: true, classes: '',
},
{title: 'Blockquote', format: 'blockquote'},
{
title: 'Callouts',
items: [
{title: 'Information', format: 'calloutinfo'},
{title: 'Success', format: 'calloutsuccess'},
{title: 'Warning', format: 'calloutwarning'},
{title: 'Danger', format: 'calloutdanger'},
],
},
];
@ -37,7 +40,7 @@ const formats = {
calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}},
calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}},
calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}},
calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}
calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}},
};
const color_map = [
@ -66,14 +69,13 @@ const color_map = [
'#34495E', '',
'#000000', '',
'#ffffff', ''
'#ffffff', '',
];
function file_picker_callback(callback, value, meta) {
// field_name, url, type, win
if (meta.filetype === 'file') {
/** @type {EntitySelectorPopup} **/
/** @type {EntitySelectorPopup} * */
const selector = window.$components.first('entity-selector-popup');
selector.show(entity => {
callback(entity.link, {
@ -85,13 +87,12 @@ function file_picker_callback(callback, value, meta) {
if (meta.filetype === 'image') {
// Show image manager
/** @type {ImageManager} **/
/** @type {ImageManager} * */
const imageManager = window.$components.first('image-manager');
imageManager.show(function (image) {
imageManager.show(image => {
callback(image.url, {alt: image.name});
}, 'gallery');
}
}
/**
@ -100,21 +101,21 @@ function file_picker_callback(callback, value, meta) {
*/
function gatherPlugins(options) {
const plugins = [
"image",
"table",
"link",
"autolink",
"fullscreen",
"code",
"customhr",
"autosave",
"lists",
"codeeditor",
"media",
"imagemanager",
"about",
"details",
"tasklist",
'image',
'table',
'link',
'autolink',
'fullscreen',
'code',
'customhr',
'autosave',
'lists',
'codeeditor',
'media',
'imagemanager',
'about',
'details',
'tasklist',
options.textDirection === 'rtl' ? 'directionality' : '',
];
@ -137,11 +138,11 @@ function gatherPlugins(options) {
* Fetch custom HTML head content from the parent page head into the editor.
*/
function fetchCustomHeadContent() {
const headContentLines = document.head.innerHTML.split("\n");
const headContentLines = document.head.innerHTML.split('\n');
const startLineIndex = headContentLines.findIndex(line => line.trim() === '<!-- Start: custom user content -->');
const endLineIndex = headContentLines.findIndex(line => line.trim() === '<!-- End: custom user content -->');
if (startLineIndex === -1 || endLineIndex === -1) {
return ''
return '';
}
return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n');
}
@ -152,7 +153,7 @@ function fetchCustomHeadContent() {
* @param {Editor} editor
*/
function setupBrFilter(editor) {
editor.serializer.addNodeFilter('br', function(nodes) {
editor.serializer.addNodeFilter('br', nodes => {
for (const node of nodes) {
if (node.parent && node.parent.name === 'code') {
const newline = tinymce.html.Node.create('#text');
@ -200,9 +201,9 @@ function getSetupCallback(options) {
icon: 'sourcecode',
onAction() {
editor.execCommand('mceToggleFormat', false, 'code');
}
})
}
},
});
};
}
/**
@ -229,7 +230,6 @@ body {
* @return {Object}
*/
export function build(options) {
// Set language
window.tinymce.addI18n(options.language, options.translationMap);
@ -241,7 +241,7 @@ export function build(options) {
width: '100%',
height: '100%',
selector: '#html-editor',
cache_suffix: '?version=' + version,
cache_suffix: `?version=${version}`,
content_css: [
window.baseUrl('/dist/styles.css'),
],
@ -263,12 +263,12 @@ export function build(options) {
automatic_uploads: false,
custom_elements: 'doc-root,code-block',
valid_children: [
"-div[p|h1|h2|h3|h4|h5|h6|blockquote|code-block]",
"+div[pre|img]",
"-doc-root[doc-root|#text]",
"-li[details]",
"+code-block[pre]",
"+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]"
'-div[p|h1|h2|h3|h4|h5|h6|blockquote|code-block]',
'+div[pre|img]',
'-doc-root[doc-root|#text]',
'-li[details]',
'+code-block[pre]',
'+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]',
].join(','),
plugins: gatherPlugins(options),
contextmenu: false,
@ -285,7 +285,7 @@ export function build(options) {
color_map,
file_picker_callback,
paste_preprocess(plugin, args) {
const content = args.content;
const {content} = args;
if (content.indexOf('<img src="file://') !== -1) {
args.content = '';
}
@ -312,4 +312,4 @@ export function build(options) {
* @property {int} pageId
* @property {Object} translations
* @property {Object} translationMap
*/
*/

View File

@ -1,4 +1,4 @@
import Clipboard from "../services/clipboard";
import Clipboard from '../services/clipboard';
let wrap;
let draggedContentEditable;
@ -23,8 +23,7 @@ function paste(editor, options, event) {
const images = clipboard.getImages();
for (const imageFile of images) {
const id = "image-" + Math.random().toString(16).slice(2);
const id = `image-${Math.random().toString(16).slice(2)}`;
const loadingImage = window.baseUrl('/loading.gif');
event.preventDefault();
@ -57,7 +56,7 @@ function paste(editor, options, event) {
*/
async function uploadImageFile(file, pageId) {
if (file === null || file.type.indexOf('image') !== 0) {
throw new Error(`Not an image file`);
throw new Error('Not an image file');
}
const remoteFilename = file.name || `image-${Date.now()}.png`;
@ -74,7 +73,7 @@ async function uploadImageFile(file, pageId) {
* @param {WysiwygConfigOptions} options
*/
function dragStart(editor, options) {
let node = editor.selection.getNode();
const node = editor.selection.getNode();
if (node.nodeName === 'IMG') {
wrap = editor.dom.getParent(node, '.mceTemp');
@ -96,8 +95,8 @@ function dragStart(editor, options) {
* @param {DragEvent} event
*/
function drop(editor, options, event) {
let dom = editor.dom,
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
const {dom} = editor;
const rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
// Template insertion
const templateId = event.dataTransfer && event.dataTransfer.getData('bookstack/template');
@ -105,7 +104,7 @@ function drop(editor, options, event) {
event.preventDefault();
window.$http.get(`/templates/${templateId}`).then(resp => {
editor.selection.setRng(rng);
editor.undoManager.transact(function () {
editor.undoManager.transact(() => {
editor.execCommand('mceInsertContent', false, resp.data.html);
});
});
@ -117,7 +116,7 @@ function drop(editor, options, event) {
} else if (wrap) {
event.preventDefault();
editor.undoManager.transact(function () {
editor.undoManager.transact(() => {
editor.selection.setRng(rng);
editor.selection.setNode(wrap);
dom.remove(wrap);
@ -127,7 +126,7 @@ function drop(editor, options, event) {
// Handle contenteditable section drop
if (!event.isDefaultPrevented() && draggedContentEditable) {
event.preventDefault();
editor.undoManager.transact(function () {
editor.undoManager.transact(() => {
const selectedNode = editor.selection.getNode();
const range = editor.selection.getRng();
const selectedNodeRoot = selectedNode.closest('body > *');
@ -153,6 +152,6 @@ function drop(editor, options, event) {
*/
export function listenForDragAndPaste(editor, options) {
editor.on('dragstart', () => dragStart(editor, options));
editor.on('drop', event => drop(editor, options, event));
editor.on('drop', event => drop(editor, options, event));
editor.on('paste', event => paste(editor, options, event));
}
}

View File

@ -5,17 +5,15 @@ const icons = {
'table-insert-column-before': '<svg width="24" height="24"><path d="M8 19h5V5H8C6.764 5 6.766 3 8 3h11a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8c-1.229 0-1.236-2 0-2zm7-6v6h4v-6zm0-8v6h4V5ZM3.924 11h2V9c0-1.333 2-1.333 2 0v2h2c1.335 0 1.335 2 0 2h-2v2c0 1.333-2 1.333-2 0v-2h-1.9c-1.572 0-1.113-2-.1-2z"/></svg>',
'table-insert-row-above': '<svg width="24" height="24"><path d="M5 8v5h14V8c0-1.235 2-1.234 2 0v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8C3 6.77 5 6.764 5 8zm6 7H5v4h6zm8 0h-6v4h6zM13 3.924v2h2c1.333 0 1.333 2 0 2h-2v2c0 1.335-2 1.335-2 0v-2H9c-1.333 0-1.333-2 0-2h2v-1.9c0-1.572 2-1.113 2-.1z"/></svg>',
'table-insert-row-after': '<svg width="24" height="24"><path d="M19 16v-5H5v5c0 1.235-2 1.234-2 0V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v11c0 1.229-2 1.236-2 0zm-6-7h6V5h-6zM5 9h6V5H5Zm6 11.076v-2H9c-1.333 0-1.333-2 0-2h2v-2c0-1.335 2-1.335 2 0v2h2c1.333 0 1.333 2 0 2h-2v1.9c0 1.572-2 1.113-2 .1z"/></svg>',
'table': '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2ZM5 14v5h6v-5zm14 0h-6v5h6zm0-7h-6v5h6zM5 12h6V7H5Z"/></svg>',
table: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2ZM5 14v5h6v-5zm14 0h-6v5h6zm0-7h-6v5h6zM5 12h6V7H5Z"/></svg>',
'table-delete-table': '<svg width="24" height="24"><path d="M5 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14c0 1.1-.9 2-2 2zm0-2h14V5H5v14z"/><path d="m13.711 15.423-1.71-1.712-1.712 1.712c-1.14 1.14-2.852-.57-1.71-1.712l1.71-1.71-1.71-1.712c-1.143-1.142.568-2.853 1.71-1.71L12 10.288l1.711-1.71c1.141-1.142 2.852.57 1.712 1.71L13.71 12l1.626 1.626c1.345 1.345-.76 2.663-1.626 1.797z" style="fill-rule:nonzero;stroke-width:1.20992"/></svg>',
};
/**
* @param {Editor} editor
*/
export function registerCustomIcons(editor) {
for (const [name, svg] of Object.entries(icons)) {
editor.ui.registry.addIcon(name, svg);
}
}
}

View File

@ -10,8 +10,8 @@ function elemIsCodeBlock(elem) {
*/
function showPopup(editor, code, language, callback) {
window.$components.first('code-editor').open(code, language, (newCode, newLang) => {
callback(newCode, newLang)
editor.focus()
callback(newCode, newLang);
editor.focus();
});
}
@ -59,7 +59,7 @@ function defineCodeBlockCustomElement(editor) {
}
getLanguage() {
const getLanguageFromClassList = (classes) => {
const getLanguageFromClassList = classes => {
const langClasses = classes.split(' ').filter(cssClass => cssClass.startsWith('language-'));
return (langClasses[0] || '').replace('language-', '');
};
@ -114,12 +114,12 @@ function defineCodeBlockCustomElement(editor) {
this.style.height = `${height}px`;
const container = this.shadowRoot.querySelector('.CodeMirrorContainer');
const renderEditor = (Code) => {
const renderEditor = Code => {
this.editor = Code.wysiwygView(container, this.shadowRoot, content, this.getLanguage());
setTimeout(() => this.style.height = null, 12);
};
window.importVersioned('code').then((Code) => {
window.importVersioned('code').then(Code => {
const timeout = (Date.now() - connectedTime < 20) ? 20 : 0;
setTimeout(() => renderEditor(Code), timeout);
});
@ -135,26 +135,25 @@ function defineCodeBlockCustomElement(editor) {
}
}
}
}
win.customElements.define('code-block', CodeBlockElement);
}
/**
* @param {Editor} editor
* @param {String} url
*/
function register(editor, url) {
editor.ui.registry.addIcon('codeblock', '<svg width="24" height="24"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5Z"/><path d="M11.103 15.423c.277.277.277.738 0 .922a.692.692 0 0 1-1.106 0l-4.057-3.78a.738.738 0 0 1 0-1.107l4.057-3.872c.276-.277.83-.277 1.106 0a.724.724 0 0 1 0 1.014L7.6 12.012ZM12.897 8.577c-.245-.312-.2-.675.08-.955.28-.281.727-.27 1.027.033l4.057 3.78a.738.738 0 0 1 0 1.107l-4.057 3.872c-.277.277-.83.277-1.107 0a.724.724 0 0 1 0-1.014l3.504-3.412z"/></svg>')
editor.ui.registry.addIcon('codeblock', '<svg width="24" height="24"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5Z"/><path d="M11.103 15.423c.277.277.277.738 0 .922a.692.692 0 0 1-1.106 0l-4.057-3.78a.738.738 0 0 1 0-1.107l4.057-3.872c.276-.277.83-.277 1.106 0a.724.724 0 0 1 0 1.014L7.6 12.012ZM12.897 8.577c-.245-.312-.2-.675.08-.955.28-.281.727-.27 1.027.033l4.057 3.78a.738.738 0 0 1 0 1.107l-4.057 3.872c-.277.277-.83.277-1.107 0a.724.724 0 0 1 0-1.014l3.504-3.412z"/></svg>');
editor.ui.registry.addButton('codeeditor', {
tooltip: 'Insert code block',
icon: 'codeblock',
onAction() {
editor.execCommand('codeeditor');
}
},
});
editor.ui.registry.addButton('editcodeeditor', {
@ -162,7 +161,7 @@ function register(editor, url) {
icon: 'edit-block',
onAction() {
editor.execCommand('codeeditor');
}
},
});
editor.addCommand('codeeditor', () => {
@ -185,14 +184,14 @@ function register(editor, url) {
});
editor.on('dblclick', event => {
let selectedNode = editor.selection.getNode();
const selectedNode = editor.selection.getNode();
if (elemIsCodeBlock(selectedNode)) {
showPopupForCodeBlock(editor, selectedNode);
}
});
editor.on('PreInit', () => {
editor.parser.addNodeFilter('pre', function(elms) {
editor.parser.addNodeFilter('pre', elms => {
for (const el of elms) {
const wrapper = tinymce.html.Node.create('code-block', {
contenteditable: 'false',
@ -207,13 +206,13 @@ function register(editor, url) {
}
});
editor.parser.addNodeFilter('code-block', function(elms) {
editor.parser.addNodeFilter('code-block', elms => {
for (const el of elms) {
el.attr('contenteditable', 'false');
}
});
editor.serializer.addNodeFilter('code-block', function(elms) {
editor.serializer.addNodeFilter('code-block', elms => {
for (const el of elms) {
el.unwrap();
}
@ -221,12 +220,12 @@ function register(editor, url) {
});
editor.ui.registry.addContextToolbar('codeeditor', {
predicate: function (node) {
predicate(node) {
return node.nodeName.toLowerCase() === 'code-block';
},
items: 'editcodeeditor',
position: 'node',
scope: 'node'
scope: 'node',
});
editor.on('PreInit', () => {
@ -240,4 +239,4 @@ function register(editor, url) {
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -1,4 +1,4 @@
import DrawIO from "../services/drawio";
import DrawIO from '../services/drawio';
let pageEditor = null;
let currentNode = null;
@ -16,12 +16,12 @@ function showDrawingManager(mceEditor, selectedNode = null) {
pageEditor = mceEditor;
currentNode = selectedNode;
/** @type {ImageManager} **/
/** @type {ImageManager} * */
const imageManager = window.$components.first('image-manager');
imageManager.show(function (image) {
imageManager.show(image => {
if (selectedNode) {
const imgElem = selectedNode.querySelector('img');
pageEditor.undoManager.transact(function () {
pageEditor.undoManager.transact(() => {
pageEditor.dom.setAttrib(imgElem, 'src', image.url);
pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
});
@ -39,10 +39,10 @@ function showDrawingEditor(mceEditor, selectedNode = null) {
}
async function updateContent(pngData) {
const id = "image-" + Math.random().toString(16).slice(2);
const id = `image-${Math.random().toString(16).slice(2)}`;
const loadingImage = window.baseUrl('/loading.gif');
const handleUploadError = (error) => {
const handleUploadError = error => {
if (error.status === 413) {
window.$events.emit('error', options.translations.serverUploadLimitText);
} else {
@ -54,10 +54,10 @@ async function updateContent(pngData) {
// Handle updating an existing image
if (currentNode) {
DrawIO.close();
let imgElem = currentNode.querySelector('img');
const imgElem = currentNode.querySelector('img');
try {
const img = await DrawIO.upload(pngData, options.pageId);
pageEditor.undoManager.transact(function () {
pageEditor.undoManager.transact(() => {
pageEditor.dom.setAttrib(imgElem, 'src', img.url);
pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
});
@ -72,7 +72,7 @@ async function updateContent(pngData) {
DrawIO.close();
try {
const img = await DrawIO.upload(pngData, options.pageId);
pageEditor.undoManager.transact(function () {
pageEditor.undoManager.transact(() => {
pageEditor.dom.setAttrib(id, 'src', img.url);
pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
});
@ -83,7 +83,6 @@ async function updateContent(pngData) {
}, 5);
}
function drawingInit() {
if (!currentNode) {
return Promise.resolve('');
@ -101,13 +100,12 @@ function drawingInit() {
export function getPlugin(providedOptions) {
options = providedOptions;
return function(editor, url) {
editor.addCommand('drawio', () => {
const selectedNode = editor.selection.getNode();
showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
});
editor.ui.registry.addIcon('diagram', `<svg width="24" height="24" fill="${options.darkMode ? '#BBB' : '#000000'}" xmlns="http://www.w3.org/2000/svg"><path d="M20.716 7.639V2.845h-4.794v1.598h-7.99V2.845H3.138v4.794h1.598v7.99H3.138v4.794h4.794v-1.598h7.99v1.598h4.794v-4.794h-1.598v-7.99zM4.736 4.443h1.598V6.04H4.736zm1.598 14.382H4.736v-1.598h1.598zm9.588-1.598h-7.99v-1.598H6.334v-7.99h1.598V6.04h7.99v1.598h1.598v7.99h-1.598zm3.196 1.598H17.52v-1.598h1.598zM17.52 6.04V4.443h1.598V6.04zm-4.21 7.19h-2.79l-.582 1.599H8.643l2.717-7.191h1.119l2.724 7.19h-1.302zm-2.43-1.006h2.086l-1.039-3.06z"/></svg>`)
editor.ui.registry.addIcon('diagram', `<svg width="24" height="24" fill="${options.darkMode ? '#BBB' : '#000000'}" xmlns="http://www.w3.org/2000/svg"><path d="M20.716 7.639V2.845h-4.794v1.598h-7.99V2.845H3.138v4.794h1.598v7.99H3.138v4.794h4.794v-1.598h7.99v1.598h4.794v-4.794h-1.598v-7.99zM4.736 4.443h1.598V6.04H4.736zm1.598 14.382H4.736v-1.598h1.598zm9.588-1.598h-7.99v-1.598H6.334v-7.99h1.598V6.04h7.99v1.598h1.598v7.99h-1.598zm3.196 1.598H17.52v-1.598h1.598zM17.52 6.04V4.443h1.598V6.04zm-4.21 7.19h-2.79l-.582 1.599H8.643l2.717-7.191h1.119l2.724 7.19h-1.302zm-2.43-1.006h2.086l-1.039-3.06z"/></svg>`);
editor.ui.registry.addSplitButton('drawio', {
tooltip: 'Insert/edit drawing',
@ -123,7 +121,7 @@ export function getPlugin(providedOptions) {
type: 'choiceitem',
text: 'Drawing manager',
value: 'drawing-manager',
}
},
]);
},
onItemAction(api, value) {
@ -131,25 +129,24 @@ export function getPlugin(providedOptions) {
const selectedNode = editor.selection.getNode();
showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
}
}
},
});
editor.on('dblclick', event => {
let selectedNode = editor.selection.getNode();
const selectedNode = editor.selection.getNode();
if (!isDrawing(selectedNode)) return;
showDrawingEditor(editor, selectedNode);
});
editor.on('SetContent', function () {
editor.on('SetContent', () => {
const drawings = editor.dom.select('body > div[drawio-diagram]');
if (!drawings.length) return;
editor.undoManager.transact(function () {
editor.undoManager.transact(() => {
for (const drawing of drawings) {
drawing.setAttribute('contenteditable', 'false');
}
});
});
};
}
}

View File

@ -3,7 +3,6 @@
* @param {String} url
*/
function register(editor, url) {
const aboutDialog = {
title: 'About the WYSIWYG Editor',
url: window.baseUrl('/help/wysiwyg'),
@ -14,16 +13,14 @@ function register(editor, url) {
tooltip: 'About the editor',
onAction() {
tinymce.activeEditor.windowManager.openUrl(aboutDialog);
}
},
});
}
/**
* @param {WysiwygConfigOptions} options
* @return {register}
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -3,10 +3,10 @@
* @param {String} url
*/
function register(editor, url) {
editor.addCommand('InsertHorizontalRule', function () {
let hrElem = document.createElement('hr');
let cNode = editor.selection.getNode();
let parentNode = cNode.parentNode;
editor.addCommand('InsertHorizontalRule', () => {
const hrElem = document.createElement('hr');
const cNode = editor.selection.getNode();
const {parentNode} = cNode;
parentNode.insertBefore(hrElem, cNode);
});
@ -15,15 +15,14 @@ function register(editor, url) {
tooltip: 'Insert horizontal line',
onAction() {
editor.execCommand('InsertHorizontalRule');
}
},
});
}
/**
* @param {WysiwygConfigOptions} options
* @return {register}
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -2,10 +2,9 @@
* @param {Editor} editor
* @param {String} url
*/
import {blockElementTypes} from "./util";
import {blockElementTypes} from './util';
function register(editor, url) {
editor.ui.registry.addIcon('details', '<svg width="24" height="24"><path d="M8.2 9a.5.5 0 0 0-.4.8l4 5.6a.5.5 0 0 0 .8 0l4-5.6a.5.5 0 0 0-.4-.8ZM20.122 18.151h-16c-.964 0-.934 2.7 0 2.7h16c1.139 0 1.173-2.7 0-2.7zM20.122 3.042h-16c-.964 0-.934 2.7 0 2.7h16c1.139 0 1.173-2.7 0-2.7z"/></svg>');
editor.ui.registry.addIcon('togglefold', '<svg height="24" width="24"><path d="M8.12 19.3c.39.39 1.02.39 1.41 0L12 16.83l2.47 2.47c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-3.17-3.17c-.39-.39-1.02-.39-1.41 0l-3.17 3.17c-.4.38-.4 1.02-.01 1.41zm7.76-14.6c-.39-.39-1.02-.39-1.41 0L12 7.17 9.53 4.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.03 0 1.42l3.17 3.17c.39.39 1.02.39 1.41 0l3.17-3.17c.4-.39.4-1.03.01-1.42z"/></svg>');
editor.ui.registry.addIcon('togglelabel', '<svg height="18" width="18" viewBox="0 0 24 24"><path d="M21.41,11.41l-8.83-8.83C12.21,2.21,11.7,2,11.17,2H4C2.9,2,2,2.9,2,4v7.17c0,0.53,0.21,1.04,0.59,1.41l8.83,8.83 c0.78,0.78,2.05,0.78,2.83,0l7.17-7.17C22.2,13.46,22.2,12.2,21.41,11.41z M6.5,8C5.67,8,5,7.33,5,6.5S5.67,5,6.5,5S8,5.67,8,6.5 S7.33,8,6.5,8z"/></svg>');
@ -15,15 +14,15 @@ function register(editor, url) {
tooltip: 'Insert collapsible block',
onAction() {
editor.execCommand('InsertDetailsBlock');
}
},
});
editor.ui.registry.addButton('removedetails', {
icon: 'table-delete-table',
tooltip: 'Unwrap',
onAction() {
unwrapDetailsInSelection(editor)
}
unwrapDetailsInSelection(editor);
},
});
editor.ui.registry.addButton('editdetials', {
@ -31,7 +30,7 @@ function register(editor, url) {
tooltip: 'Edit label',
onAction() {
showDetailLabelEditWindow(editor);
}
},
});
editor.on('dblclick', event => {
@ -46,15 +45,15 @@ function register(editor, url) {
const details = getSelectedDetailsBlock(editor);
details.toggleAttribute('open');
editor.focus();
}
},
});
editor.addCommand('InsertDetailsBlock', function () {
editor.addCommand('InsertDetailsBlock', () => {
let content = editor.selection.getContent({format: 'html'});
const details = document.createElement('details');
const summary = document.createElement('summary');
const id = 'details-' + Date.now();
details.setAttribute('data-id', id)
const id = `details-${Date.now()}`;
details.setAttribute('data-id', id);
details.appendChild(summary);
if (!content) {
@ -76,12 +75,12 @@ function register(editor, url) {
});
editor.ui.registry.addContextToolbar('details', {
predicate: function (node) {
predicate(node) {
return node.nodeName.toLowerCase() === 'details';
},
items: 'editdetials toggledetails removedetails',
position: 'node',
scope: 'node'
scope: 'node',
});
editor.on('PreInit', () => {
@ -135,20 +134,20 @@ function detailsDialog(editor) {
buttons: [
{
type: 'cancel',
text: 'Cancel'
text: 'Cancel',
},
{
type: 'submit',
text: 'Save',
primary: true,
}
},
],
onSubmit(api) {
const {summary} = api.getData();
setSummary(editor, summary);
api.close();
}
}
},
};
}
function setSummary(editor, summaryContent) {
@ -191,20 +190,20 @@ function unwrapDetailsInSelection(editor) {
* @param {Editor} editor
*/
function setupElementFilters(editor) {
editor.parser.addNodeFilter('details', function(elms) {
editor.parser.addNodeFilter('details', elms => {
for (const el of elms) {
ensureDetailsWrappedInEditable(el);
}
});
editor.serializer.addNodeFilter('details', function(elms) {
editor.serializer.addNodeFilter('details', elms => {
for (const el of elms) {
unwrapDetailsEditable(el);
el.attr('open', null);
}
});
editor.serializer.addNodeFilter('doc-root', function(elms) {
editor.serializer.addNodeFilter('doc-root', elms => {
for (const el of elms) {
el.unwrap();
}
@ -258,11 +257,10 @@ function unwrapDetailsEditable(detailsEl) {
}
}
/**
* @param {WysiwygConfigOptions} options
* @return {register}
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -9,24 +9,23 @@ function register(editor, url) {
icon: 'image',
tooltip: 'Insert image',
onAction() {
/** @type {ImageManager} **/
/** @type {ImageManager} * */
const imageManager = window.$components.first('image-manager');
imageManager.show(function (image) {
imageManager.show(image => {
const imageUrl = image.thumbs.display || image.url;
let html = `<a href="${image.url}" target="_blank">`;
html += `<img src="${imageUrl}" alt="${image.name}">`;
html += '</a>';
editor.execCommand('mceInsertContent', false, html);
}, 'gallery');
}
},
});
}
/**
* @param {WysiwygConfigOptions} options
* @return {register}
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -6,11 +6,10 @@ function register(editor, url) {
}
/**
* @param {WysiwygConfigOptions} options
* @return {register}
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -3,7 +3,6 @@
* @param {String} url
*/
function register(editor, url) {
// Tasklist UI buttons
editor.ui.registry.addIcon('tasklist', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22,8c0-0.55-0.45-1-1-1h-7c-0.55,0-1,0.45-1,1s0.45,1,1,1h7C21.55,9,22,8.55,22,8z M13,16c0,0.55,0.45,1,1,1h7 c0.55,0,1-0.45,1-1c0-0.55-0.45-1-1-1h-7C13.45,15,13,15.45,13,16z M10.47,4.63c0.39,0.39,0.39,1.02,0,1.41l-4.23,4.25 c-0.39,0.39-1.02,0.39-1.42,0L2.7,8.16c-0.39-0.39-0.39-1.02,0-1.41c0.39-0.39,1.02-0.39,1.41,0l1.42,1.42l3.54-3.54 C9.45,4.25,10.09,4.25,10.47,4.63z M10.48,12.64c0.39,0.39,0.39,1.02,0,1.41l-4.23,4.25c-0.39,0.39-1.02,0.39-1.42,0L2.7,16.16 c-0.39-0.39-0.39-1.02,0-1.41s1.02-0.39,1.41,0l1.42,1.42l3.54-3.54C9.45,12.25,10.09,12.25,10.48,12.64L10.48,12.64z"/></svg>');
editor.ui.registry.addToggleButton('tasklist', {
@ -28,7 +27,7 @@ function register(editor, url) {
const inList = parentListEl && parentListEl.classList.contains('task-list-item');
api.setActive(Boolean(inList));
});
}
},
});
// Tweak existing bullet list button active state to not be active
@ -48,32 +47,32 @@ function register(editor, url) {
// Instead we quickly jump through an ordered list first if we're within a tasklist.
if (elementWithinTaskList(editor.selection.getNode())) {
editor.execCommand('InsertOrderedList', null, {
'list-item-attributes': {class: null}
'list-item-attributes': {class: null},
});
}
editor.execCommand('InsertUnorderedList', null, {
'list-item-attributes': {class: null}
'list-item-attributes': {class: null},
});
};
// Tweak existing number list to not allow classes on child items
const existingNumListButton = editor.ui.registry.getAll().buttons.numlist;
existingNumListButton.onAction = function() {
editor.execCommand('InsertOrderedList', null, {
'list-item-attributes': {class: null}
'list-item-attributes': {class: null},
});
};
// Setup filters on pre-init
editor.on('PreInit', () => {
editor.parser.addNodeFilter('li', function(nodes) {
editor.parser.addNodeFilter('li', nodes => {
for (const node of nodes) {
if (node.attributes.map.class === 'task-list-item') {
parseTaskListNode(node);
}
}
});
editor.serializer.addNodeFilter('li', function(nodes) {
editor.serializer.addNodeFilter('li', nodes => {
for (const node of nodes) {
if (node.attributes.map.class === 'task-list-item') {
serializeTaskListNode(node);
@ -83,7 +82,7 @@ function register(editor, url) {
});
// Handle checkbox click in editor
editor.on('click', function(event) {
editor.on('click', event => {
const clickedEl = event.target;
if (clickedEl.nodeName === 'LI' && clickedEl.classList.contains('task-list-item')) {
handleTaskListItemClick(event, clickedEl, editor);
@ -118,7 +117,7 @@ function handleTaskListItemClick(event, clickedEl, editor) {
editor.undoManager.transact(() => {
if (clickedEl.hasAttribute('checked')) {
clickedEl.removeAttribute('checked');
} else {
} else {
clickedEl.setAttribute('checked', 'checked');
}
});
@ -168,4 +167,4 @@ function serializeTaskListNode(node) {
*/
export function getPlugin(options) {
return register;
}
}

View File

@ -26,4 +26,4 @@ function scrollToText(editor, scrollId) {
editor.selection.select(element, true);
editor.selection.collapse(false);
editor.focus();
}
}

View File

@ -4,7 +4,7 @@
export function register(editor) {
// Headers
for (let i = 1; i < 5; i++) {
editor.shortcuts.add('meta+' + i, '', ['FormatBlock', false, 'h' + (i+1)]);
editor.shortcuts.add(`meta+${i}`, '', ['FormatBlock', false, `h${i + 1}`]);
}
// Other block shortcuts
@ -30,7 +30,7 @@ export function register(editor) {
});
// Loop through callout styles
editor.shortcuts.add('meta+9', '', function() {
editor.shortcuts.add('meta+9', '', () => {
const selectedNode = editor.selection.getNode();
const callout = selectedNode ? selectedNode.closest('.callout') : null;
@ -39,15 +39,14 @@ export function register(editor) {
const newFormatIndex = (currentFormatIndex + 1) % formats.length;
const newFormat = formats[newFormatIndex];
editor.formatter.apply('callout' + newFormat);
editor.formatter.apply(`callout${newFormat}`);
});
// Link selector shortcut
editor.shortcuts.add('meta+shift+K', '', function() {
/** @var {EntitySelectorPopup} **/
editor.shortcuts.add('meta+shift+K', '', () => {
/** @var {EntitySelectorPopup} * */
const selectorPopup = window.$components.first('entity-selector-popup');
selectorPopup.show(function(entity) {
selectorPopup.show(entity => {
if (editor.selection.isCollapsed()) {
editor.insertContent(editor.dom.createHTML('a', {href: entity.link}, editor.dom.encode(entity.name)));
} else {
@ -56,6 +55,6 @@ export function register(editor) {
editor.selection.collapse(false);
editor.focus();
})
});
});
}
}

View File

@ -13,7 +13,7 @@ export function getPrimaryToolbar(options) {
'bullist numlist listoverflow',
textDirPlugins,
'link table imagemanager-insert insertoverflow',
'code about fullscreen'
'code about fullscreen',
];
return toolbar.filter(row => Boolean(row)).join(' | ');
@ -26,17 +26,17 @@ function registerPrimaryToolbarGroups(editor) {
editor.ui.registry.addGroupToolbarButton('formatoverflow', {
icon: 'more-drawer',
tooltip: 'More',
items: 'strikethrough superscript subscript inlinecode removeformat'
items: 'strikethrough superscript subscript inlinecode removeformat',
});
editor.ui.registry.addGroupToolbarButton('listoverflow', {
icon: 'more-drawer',
tooltip: 'More',
items: 'tasklist outdent indent'
items: 'tasklist outdent indent',
});
editor.ui.registry.addGroupToolbarButton('insertoverflow', {
icon: 'more-drawer',
tooltip: 'More',
items: 'customhr codeeditor drawio media details'
items: 'customhr codeeditor drawio media details',
});
}
@ -50,7 +50,7 @@ function registerLinkContextToolbar(editor) {
},
position: 'node',
scope: 'node',
items: 'link unlink openlink'
items: 'link unlink openlink',
});
}
@ -64,7 +64,7 @@ function registerImageContextToolbar(editor) {
},
position: 'node',
scope: 'node',
items: 'image'
items: 'image',
});
}
@ -76,4 +76,4 @@ export function registerAdditionalToolbars(editor, options) {
registerPrimaryToolbarGroups(editor);
registerLinkContextToolbar(editor);
registerImageContextToolbar(editor);
}
}

View File

@ -1,5 +1,3 @@
export const blockElementTypes = [
'p',
'h1',
@ -15,5 +13,5 @@ export const blockElementTypes = [
'details',
'ul',
'ol',
'table'
];
'table',
];