Added support for changing the draw.io instance URL

- Allowed DRAWIO env option to be passed as URL to point to instance.
- Updated tests to check URL gets passed to pages correctly.
- Update default URL to be the default theme.

For #826

.env.example.complete

@@ -238,7 +238,10 @@ DISABLE_EXTERNAL_SERVICES=false
 # Example: AVATAR_URL=https://seccdn.libravatar.org/avatar/${hash}?s=${size}&d=identicon
 AVATAR_URL=
 
-# Enable Draw.io integration
+# Enable draw.io integration
+# Can simply be true/false to enable/disable the integration.
+# Alternatively, It can be URL to the draw.io instance you want to use.
+# For URLs, The following URL parameters should be included: embed=1&proto=json&spin=1
 DRAWIO=true
 
 # Default item listing view

app/Http/Controllers/Images/DrawioImageController.php

@@ -4,6 +4,7 @@ namespace BookStack\Http\Controllers\Images;
 
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Uploads\ImageRepo;
+use Exception;
 use Illuminate\Http\Request;
 use BookStack\Http\Controllers\Controller;
 
@@ -11,10 +12,6 @@ class DrawioImageController extends Controller
 {
     protected $imageRepo;
 
-    /**
-     * DrawioImageController constructor.
-     * @param ImageRepo $imageRepo
-     */
     public function __construct(ImageRepo $imageRepo)
     {
         $this->imageRepo = $imageRepo;
@@ -24,8 +21,6 @@ class DrawioImageController extends Controller
     /**
      * Get a list of gallery images, in a list.
      * Can be paged and filtered by entity.
-     * @param Request $request
-     * @return \Illuminate\Http\JsonResponse
      */
     public function list(Request $request)
     {
@@ -40,9 +35,7 @@ class DrawioImageController extends Controller
 
     /**
      * Store a new gallery image in the system.
-     * @param Request $request
+     * @throws Exception
-     * @return Illuminate\Http\JsonResponse
-     * @throws \Exception
      */
     public function create(Request $request)
     {
@@ -66,8 +59,6 @@ class DrawioImageController extends Controller
 
     /**
      * Get the content of an image based64 encoded.
-     * @param $id
-     * @return \Illuminate\Http\JsonResponse|mixed
      */
     public function getAsBase64($id)
     {

resources/js/components/markdown-editor.js

@@ -411,17 +411,23 @@ class MarkdownEditor {
         });
     }
 
+    getDrawioUrl() {
+        const drawioUrlElem = document.querySelector('[drawio-url]');
+        return drawioUrlElem ? drawioUrlElem.getAttribute('drawio-url') : false;
+    }
+
     // Show draw.io if enabled and handle save.
     actionStartDrawing() {
-        if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true') return;
+        const url = this.getDrawioUrl();
-        let cursorPos = this.cm.getCursor('from');
+        if (!url) return;
 
-        DrawIO.show(() => {
+        const cursorPos = this.cm.getCursor('from');
+
+        DrawIO.show(url,() => {
             return Promise.resolve('');
         }, (pngData) => {
-            // let id = "image-" + Math.random().toString(16).slice(2);
+
-            // let loadingImage = window.baseUrl('/loading.gif');
+            const data = {
-            let data = {
                 image: pngData,
                 uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id'))
             };
@@ -445,15 +451,15 @@ class MarkdownEditor {
 
     // Show draw.io if enabled and handle save.
     actionEditDrawing(imgContainer) {
-        const drawingDisabled = document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true';
+        const drawioUrl = this.getDrawioUrl();
-        if (drawingDisabled) {
+        if (!drawioUrl) {
             return;
         }
 
         const cursorPos = this.cm.getCursor('from');
         const drawingId = imgContainer.getAttribute('drawio-diagram');
 
-        DrawIO.show(() => {
+        DrawIO.show(drawioUrl, () => {
             return DrawIO.load(drawingId);
         }, (pngData) => {
 

resources/js/components/wysiwyg-editor.js

@@ -238,7 +238,7 @@ function codePlugin() {
     });
 }
 
-function drawIoPlugin() {
+function drawIoPlugin(drawioUrl) {
 
     let pageEditor = null;
     let currentNode = null;
@@ -266,7 +266,7 @@ function drawIoPlugin() {
     function showDrawingEditor(mceEditor, selectedNode = null) {
         pageEditor = mceEditor;
         currentNode = selectedNode;
-        DrawIO.show(drawingInit, updateContent);
+        DrawIO.show(drawioUrl, drawingInit, updateContent);
     }
 
     async function updateContent(pngData) {
@@ -423,10 +423,14 @@ class WysiwygEditor {
     loadPlugins() {
         codePlugin();
         customHrPlugin();
-        if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') === 'true') {
+
-            drawIoPlugin();
+        const drawioUrlElem = document.querySelector('[drawio-url]');
+        if (drawioUrlElem) {
+            const url = drawioUrlElem.getAttribute('drawio-url');
+            drawIoPlugin(url);
             this.plugins += ' drawio';
         }
+
         if (this.textDirection === 'rtl') {
             this.plugins += ' directionality'
         }

resources/js/services/drawio.js

@@ -1,22 +1,21 @@
-
-const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
 let iFrame = null;
 
 let onInit, onSave;
 
 /**
  * Show the draw.io editor.
- * @param onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param {String} drawioUrl
- * @param onSaveCallback - Is called with the drawing data on save.
+ * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param {Function} onSaveCallback - Is called with the drawing data on save.
  */
-function show(onInitCallback, onSaveCallback) {
+function show(drawioUrl, onInitCallback, onSaveCallback) {
     onInit = onInitCallback;
     onSave = onSaveCallback;
 
     iFrame = document.createElement('iframe');
     iFrame.setAttribute('frameborder', '0');
     window.addEventListener('message', drawReceive);
-    iFrame.setAttribute('src', drawIoUrl);
+    iFrame.setAttribute('src', drawioUrl);
     iFrame.setAttribute('class', 'fullscreen');
     iFrame.style.backgroundColor = '#FFFFFF';
     document.body.appendChild(iFrame);

resources/views/pages/form.blade.php

@@ -1,6 +1,8 @@
 <div class="page-editor flex-fill flex" id="page-editor"
      drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}"
-     drawio-enabled="{{ config('services.drawio') ? 'true' : 'false' }}"
+     @if(config('services.drawio'))
+        drawio-url="{{ is_string(config('services.drawio')) ? config('services.drawio') : 'https://www.draw.io/?embed=1&proto=json&spin=1' }}"
+     @endif
      editor-type="{{ setting('app-editor') }}"
      page-id="{{ $model->id ?? 0 }}"
      text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"

tests/Uploads/DrawioTest.php

@@ -0,0 +1,79 @@
+<?php namespace Tests\Uploads;
+
+use BookStack\Entities\Page;
+use BookStack\Uploads\Image;
+use Tests\TestCase;
+
+class DrawioTest extends TestCase
+{
+    use UsesImages;
+
+    public function test_get_image_as_base64()
+    {
+        $page = Page::first();
+        $this->asAdmin();
+        $imageName = 'first-image.png';
+
+        $this->uploadImage($imageName, $page->id);
+        $image = Image::first();
+        $image->type = 'drawio';
+        $image->save();
+
+        $imageGet = $this->getJson("/images/drawio/base64/{$image->id}");
+        $imageGet->assertJson([
+            'content' => 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII='
+        ]);
+    }
+
+    public function test_drawing_base64_upload()
+    {
+        $page = Page::first();
+        $editor = $this->getEditor();
+        $this->actingAs($editor);
+
+        $upload = $this->postJson('images/drawio', [
+            'uploaded_to' => $page->id,
+            'image' => 'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII='
+        ]);
+
+        $upload->assertStatus(200);
+        $upload->assertJson([
+            'type' => 'drawio',
+            'uploaded_to' => $page->id,
+            'created_by' => $editor->id,
+            'updated_by' => $editor->id,
+        ]);
+
+        $image = Image::where('type', '=', 'drawio')->first();
+        $this->assertTrue(file_exists(public_path($image->path)), 'Uploaded image not found at path: '. public_path($image->path));
+
+        $testImageData = file_get_contents($this->getTestImageFilePath());
+        $uploadedImageData = file_get_contents(public_path($image->path));
+        $this->assertTrue($testImageData === $uploadedImageData, "Uploaded image file data does not match our test image as expected");
+    }
+
+    public function test_drawio_url_can_be_configured()
+    {
+        config()->set('services.drawio', 'http://cats.com?dog=tree');
+        $page = Page::first();
+        $editor = $this->getEditor();
+
+        $resp = $this->actingAs($editor)->get($page->getUrl('/edit'));
+        $resp->assertSee('drawio-url="http://cats.com?dog=tree"');
+    }
+
+    public function test_drawio_url_can_be_disabled()
+    {
+        config()->set('services.drawio', true);
+        $page = Page::first();
+        $editor = $this->getEditor();
+
+        $resp = $this->actingAs($editor)->get($page->getUrl('/edit'));
+        $resp->assertSee('drawio-url="https://www.draw.io/?embed=1&amp;proto=json&amp;spin=1"');
+
+        config()->set('services.drawio', false);
+        $resp = $this->actingAs($editor)->get($page->getUrl('/edit'));
+        $resp->assertDontSee('drawio-url');
+    }
+
+}

tests/Uploads/ImageTest.php

@@ -278,50 +278,6 @@ class ImageTest extends TestCase
         $this->assertFalse(file_exists(public_path($relPath)), 'Uploaded image has not been deleted as expected');
     }
 
-    public function testBase64Get()
-    {
-        $page = Page::first();
-        $this->asAdmin();
-        $imageName = 'first-image.png';
-
-        $this->uploadImage($imageName, $page->id);
-        $image = Image::first();
-        $image->type = 'drawio';
-        $image->save();
-
-        $imageGet = $this->getJson("/images/drawio/base64/{$image->id}");
-        $imageGet->assertJson([
-            'content' => 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII='
-        ]);
-    }
-
-    public function test_drawing_base64_upload()
-    {
-        $page = Page::first();
-        $editor = $this->getEditor();
-        $this->actingAs($editor);
-
-        $upload = $this->postJson('images/drawio', [
-            'uploaded_to' => $page->id,
-            'image' => 'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII='
-        ]);
-
-        $upload->assertStatus(200);
-        $upload->assertJson([
-            'type' => 'drawio',
-            'uploaded_to' => $page->id,
-            'created_by' => $editor->id,
-            'updated_by' => $editor->id,
-        ]);
-
-        $image = Image::where('type', '=', 'drawio')->first();
-        $this->assertTrue(file_exists(public_path($image->path)), 'Uploaded image not found at path: '. public_path($image->path));
-
-        $testImageData = file_get_contents($this->getTestImageFilePath());
-        $uploadedImageData = file_get_contents(public_path($image->path));
-        $this->assertTrue($testImageData === $uploadedImageData, "Uploaded image file data does not match our test image as expected");
-    }
-
     protected function getTestProfileImage()
     {
         $imageName = 'profile.png';