diff --git a/.env.example.complete b/.env.example.complete index 86a7351c2..472ca051b 100644 --- a/.env.example.complete +++ b/.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 diff --git a/app/Http/Controllers/Images/DrawioImageController.php b/app/Http/Controllers/Images/DrawioImageController.php index 3595790f7..106dfd630 100644 --- a/app/Http/Controllers/Images/DrawioImageController.php +++ b/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 - * @return Illuminate\Http\JsonResponse - * @throws \Exception + * @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) { diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index 25d6bde47..f88cb7651 100644 --- a/resources/js/components/markdown-editor.js +++ b/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; - let cursorPos = this.cm.getCursor('from'); + const url = this.getDrawioUrl(); + 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'); - let data = { + + const 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'; - if (drawingDisabled) { + const drawioUrl = this.getDrawioUrl(); + 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) => { diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 7818db260..daacc7479 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/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' } diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js index a570737d1..17e57cd6b 100644 --- a/resources/js/services/drawio.js +++ b/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 onSaveCallback - Is called with the drawing data on save. + * @param {String} drawioUrl + * @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); diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php index ffc286c2c..3c2b4f0b0 100644 --- a/resources/views/pages/form.blade.php +++ b/resources/views/pages/form.blade.php @@ -1,6 +1,8 @@
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&proto=json&spin=1"'); + + config()->set('services.drawio', false); + $resp = $this->actingAs($editor)->get($page->getUrl('/edit')); + $resp->assertDontSee('drawio-url'); + } + +} \ No newline at end of file diff --git a/tests/Uploads/ImageTest.php b/tests/Uploads/ImageTest.php index 3f6c021a7..416927ac9 100644 --- a/tests/Uploads/ImageTest.php +++ b/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';