1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 07:32:39 +01:00

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
This commit is contained in:
Dan Brown 2020-04-05 17:27:16 +01:00
parent ea9e9565ef
commit 5f61620cc2
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 116 additions and 76 deletions

View File

@ -238,7 +238,10 @@ DISABLE_EXTERNAL_SERVICES=false
# Example: AVATAR_URL=https://seccdn.libravatar.org/avatar/${hash}?s=${size}&d=identicon # Example: AVATAR_URL=https://seccdn.libravatar.org/avatar/${hash}?s=${size}&d=identicon
AVATAR_URL= 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 DRAWIO=true
# Default item listing view # Default item listing view

View File

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

View File

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

View File

@ -238,7 +238,7 @@ function codePlugin() {
}); });
} }
function drawIoPlugin() { function drawIoPlugin(drawioUrl) {
let pageEditor = null; let pageEditor = null;
let currentNode = null; let currentNode = null;
@ -266,7 +266,7 @@ function drawIoPlugin() {
function showDrawingEditor(mceEditor, selectedNode = null) { function showDrawingEditor(mceEditor, selectedNode = null) {
pageEditor = mceEditor; pageEditor = mceEditor;
currentNode = selectedNode; currentNode = selectedNode;
DrawIO.show(drawingInit, updateContent); DrawIO.show(drawioUrl, drawingInit, updateContent);
} }
async function updateContent(pngData) { async function updateContent(pngData) {
@ -423,10 +423,14 @@ class WysiwygEditor {
loadPlugins() { loadPlugins() {
codePlugin(); codePlugin();
customHrPlugin(); 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'; this.plugins += ' drawio';
} }
if (this.textDirection === 'rtl') { if (this.textDirection === 'rtl') {
this.plugins += ' directionality' this.plugins += ' directionality'
} }

View File

@ -1,22 +1,21 @@
const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
let iFrame = null; let iFrame = null;
let onInit, onSave; let onInit, onSave;
/** /**
* Show the draw.io editor. * 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; onInit = onInitCallback;
onSave = onSaveCallback; onSave = onSaveCallback;
iFrame = document.createElement('iframe'); iFrame = document.createElement('iframe');
iFrame.setAttribute('frameborder', '0'); iFrame.setAttribute('frameborder', '0');
window.addEventListener('message', drawReceive); window.addEventListener('message', drawReceive);
iFrame.setAttribute('src', drawIoUrl); iFrame.setAttribute('src', drawioUrl);
iFrame.setAttribute('class', 'fullscreen'); iFrame.setAttribute('class', 'fullscreen');
iFrame.style.backgroundColor = '#FFFFFF'; iFrame.style.backgroundColor = '#FFFFFF';
document.body.appendChild(iFrame); document.body.appendChild(iFrame);

View File

@ -1,6 +1,8 @@
<div class="page-editor flex-fill flex" id="page-editor" <div class="page-editor flex-fill flex" id="page-editor"
drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}" 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') }}" editor-type="{{ setting('app-editor') }}"
page-id="{{ $model->id ?? 0 }}" page-id="{{ $model->id ?? 0 }}"
text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"

View File

@ -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');
}
}

View File

@ -278,50 +278,6 @@ class ImageTest extends TestCase
$this->assertFalse(file_exists(public_path($relPath)), 'Uploaded image has not been deleted as expected'); $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() protected function getTestProfileImage()
{ {
$imageName = 'profile.png'; $imageName = 'profile.png';