github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-10 13:27:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Removed use of image-manager/entity-selector window globals

Browse Source
This commit is contained in:
Dan Brown
2022-11-16 15:21:22 +00:00
parent 3b8ee3954e
commit 25c23a2e5f
5 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/components/image-manager.js
View File

@ -4,7 +4,6 @@ import {Component} from "./component";
export class ImageManager extends Component { export class ImageManager extends Component {
setup() { setup() {
// Options // Options
this.uploadedTo = this.$opts.uploadedTo; this.uploadedTo = this.$opts.uploadedTo;
@ -33,8 +32,6 @@ export class ImageManager extends Component {
this.resetState(); this.resetState();
this.setupListeners(); this.setupListeners();
window.ImageManager = this;
} }
setupListeners() { setupListeners() {

12
resources/js/components/markdown-editor.js
View File

@ -431,7 +431,9 @@ export class MarkdownEditor extends Component {
actionInsertImage() { actionInsertImage() {
const cursorPos = this.cm.getCursor('from'); const cursorPos = this.cm.getCursor('from');
window.ImageManager.show(image => { /** @type {ImageManager} **/
const imageManager = window.$components.first('image-manager');
imageManager.show(image => {
const imageUrl = image.thumbs.display || image.url; const imageUrl = image.thumbs.display || image.url;
let selectedText = this.cm.getSelection(); let selectedText = this.cm.getSelection();
let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")"; let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")";
@ -443,7 +445,9 @@ export class MarkdownEditor extends Component {
actionShowImageManager() { actionShowImageManager() {
const cursorPos = this.cm.getCursor('from'); const cursorPos = this.cm.getCursor('from');
window.ImageManager.show(image => { /** @type {ImageManager} **/
const imageManager = window.$components.first('image-manager');
imageManager.show(image => {
this.insertDrawing(image, cursorPos); this.insertDrawing(image, cursorPos);
}, 'drawio'); }, 'drawio');
} }
@ -451,7 +455,9 @@ export class MarkdownEditor extends Component {
// Show the popup link selector and insert a link when finished // Show the popup link selector and insert a link when finished
actionShowLinkSelector() { actionShowLinkSelector() {
const cursorPos = this.cm.getCursor('from'); const cursorPos = this.cm.getCursor('from');
window.EntitySelectorPopup.show(entity => { /** @type {EntitySelectorPopup} **/
const selector = window.$components.first('entity-selector-popup');
selector.show(entity => {
let selectedText = this.cm.getSelection() || entity.name; let selectedText = this.cm.getSelection() || entity.name;
let newText = `[${selectedText}](${entity.link})`; let newText = `[${selectedText}](${entity.link})`;
this.cm.focus(); this.cm.focus();

8
resources/js/wysiwyg/config.js
View File

@ -73,7 +73,9 @@ function file_picker_callback(callback, value, meta) {
// field_name, url, type, win // field_name, url, type, win
if (meta.filetype === 'file') { if (meta.filetype === 'file') {
window.EntitySelectorPopup.show(entity => { /** @type {EntitySelectorPopup} **/
const selector = window.$components.first('entity-selector-popup');
selector.show(entity => {
callback(entity.link, { callback(entity.link, {
text: entity.name, text: entity.name,
title: entity.name, title: entity.name,
@ -83,7 +85,9 @@ function file_picker_callback(callback, value, meta) {
if (meta.filetype === 'image') { if (meta.filetype === 'image') {
// Show image manager // Show image manager
window.ImageManager.show(function (image) { /** @type {ImageManager} **/
const imageManager = window.$components.first('image-manager');
imageManager.show(function (image) {
callback(image.url, {alt: image.name}); callback(image.url, {alt: image.name});
}, 'gallery'); }, 'gallery');
} }

6
resources/js/wysiwyg/plugin-drawio.js
View File

@ -15,8 +15,10 @@ function isDrawing(node) {
function showDrawingManager(mceEditor, selectedNode = null) { function showDrawingManager(mceEditor, selectedNode = null) {
pageEditor = mceEditor; pageEditor = mceEditor;
currentNode = selectedNode; currentNode = selectedNode;
// Show image manager
window.ImageManager.show(function (image) { /** @type {ImageManager} **/
const imageManager = window.$components.first('image-manager');
imageManager.show(function (image) {
if (selectedNode) { if (selectedNode) {
const imgElem = selectedNode.querySelector('img'); const imgElem = selectedNode.querySelector('img');
pageEditor.undoManager.transact(function () { pageEditor.undoManager.transact(function () {

5
resources/js/wysiwyg/plugins-imagemanager.js
View File

@ -3,14 +3,15 @@
* @param {String} url * @param {String} url
*/ */
function register(editor, url) { function register(editor, url) {
// Custom Image picker button // Custom Image picker button
editor.ui.registry.addButton('imagemanager-insert', { editor.ui.registry.addButton('imagemanager-insert', {
title: 'Insert image', title: 'Insert image',
icon: 'image', icon: 'image',
tooltip: 'Insert image', tooltip: 'Insert image',
onAction() { onAction() {
window.ImageManager.show(function (image) { /** @type {ImageManager} **/
const imageManager = window.$components.first('image-manager');
imageManager.show(function (image) {
const imageUrl = image.thumbs.display || image.url; const imageUrl = image.thumbs.display || image.url;
let html = `<a href="${image.url}" target="_blank">`; let html = `<a href="${image.url}" target="_blank">`;
html += `<img src="${imageUrl}" alt="${image.name}">`; html += `<img src="${imageUrl}" alt="${image.name}">`;