Updated js dev docs with latest component changes

[bookstack] / resources / js / components / markdown-editor.js

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index 3290fc3001ac59786af0f4f140f301171926da5a..b9567d8643779184e74553b52c2aa9adb23420f3 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -4,8 +4,9 @@ import Clipboard from "../services/clipboard";
 import {debounce} from "../services/util";
 import {patchDomFromHtmlString} from "../services/vdom";
 import DrawIO from "../services/drawio";
+import {Component} from "./component";
 
-class MarkdownEditor {
+export class MarkdownEditor extends Component {
 
     setup() {
         this.elem = this.$el;
@@ -430,7 +431,9 @@ class MarkdownEditor {
 
     actionInsertImage() {
         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;
             let selectedText = this.cm.getSelection();
             let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")";
@@ -442,7 +445,9 @@ class MarkdownEditor {
 
     actionShowImageManager() {
         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);
         }, 'drawio');
     }
@@ -450,7 +455,9 @@ class MarkdownEditor {
     // Show the popup link selector and insert a link when finished
     actionShowLinkSelector() {
         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 newText = `[${selectedText}](${entity.link})`;
             this.cm.focus();
@@ -619,5 +626,3 @@ class MarkdownEditor {
         });
     }
 }
-
-export default MarkdownEditor ;