Updated version and assets for release v22.04.2

Revert "Update german translation"

.gitignore

@@ -5,10 +5,10 @@ Homestead.yaml
 .idea
 npm-debug.log
 yarn-error.log
-/public/dist
+/public/dist/*.map
 /public/plugins
-/public/css
-/public/js
+/public/css/*.map
+/public/js/*.map
 /public/bower
 /public/build/
 /storage/images

app/Actions/TagRepo.php

@@ -28,10 +28,10 @@ class TagRepo
                 'name',
                 ($searchTerm || $nameFilter) ? 'value' : DB::raw('COUNT(distinct value) as `values`'),
                 DB::raw('COUNT(id) as usages'),
-                DB::raw('SUM(IF(entity_type = \'page\', 1, 0)) as page_count'),
-                DB::raw('SUM(IF(entity_type = \'chapter\', 1, 0)) as chapter_count'),
-                DB::raw('SUM(IF(entity_type = \'book\', 1, 0)) as book_count'),
-                DB::raw('SUM(IF(entity_type = \'bookshelf\', 1, 0)) as shelf_count'),
+                DB::raw('SUM(IF(entity_type = \'BookStack\\\\Page\', 1, 0)) as page_count'),
+                DB::raw('SUM(IF(entity_type = \'BookStack\\\\Chapter\', 1, 0)) as chapter_count'),
+                DB::raw('SUM(IF(entity_type = \'BookStack\\\\Book\', 1, 0)) as book_count'),
+                DB::raw('SUM(IF(entity_type = \'BookStack\\\\BookShelf\', 1, 0)) as shelf_count'),
             ])
             ->orderBy($nameFilter ? 'value' : 'name');
 

app/Config/session.php

@@ -72,7 +72,7 @@ return [
     // to the server if the browser has a HTTPS connection. This will keep
     // the cookie from being sent to you if it can not be done securely.
     'secure' => env('SESSION_SECURE_COOKIE', null)
-        ?? Str::startsWith(env('APP_URL', ''), 'https:'),
+        ?? Str::startsWith(env('APP_URL'), 'https:'),
 
     // HTTP Access Only
     // Setting this value to true will prevent JavaScript from accessing the

app/Entities/Tools/ExportFormatter.php

@@ -215,16 +215,14 @@ class ExportFormatter
      */
     protected function containHtml(string $htmlContent): string
     {
-        // Replace embed tags with images
-        $htmlContent = preg_replace("/<embed (.*?)>/i", '<img $1>', $htmlContent);
-
-        // Replace image & embed src attributes with base64 encoded data strings
         $imageTagsOutput = [];
-        preg_match_all("/<img .*?src=['\"](.*?)['\"].*?>/i", $htmlContent, $imageTagsOutput);
+        preg_match_all("/\<img.*?src\=(\'|\")(.*?)(\'|\").*?\>/i", $htmlContent, $imageTagsOutput);
+
+        // Replace image src with base64 encoded image strings
         if (isset($imageTagsOutput[0]) && count($imageTagsOutput[0]) > 0) {
             foreach ($imageTagsOutput[0] as $index => $imgMatch) {
                 $oldImgTagString = $imgMatch;
-                $srcString = $imageTagsOutput[1][$index];
+                $srcString = $imageTagsOutput[2][$index];
                 $imageEncoded = $this->imageService->imageUriToBase64($srcString);
                 if ($imageEncoded === null) {
                     $imageEncoded = $srcString;
@@ -234,13 +232,14 @@ class ExportFormatter
             }
         }
 
-        // Replace any relative links with full system URL
         $linksOutput = [];
-        preg_match_all("/<a .*href=['\"](.*?)['\"].*?>/i", $htmlContent, $linksOutput);
+        preg_match_all("/\<a.*href\=(\'|\")(.*?)(\'|\").*?\>/i", $htmlContent, $linksOutput);
+
+        // Replace image src with base64 encoded image strings
         if (isset($linksOutput[0]) && count($linksOutput[0]) > 0) {
             foreach ($linksOutput[0] as $index => $linkMatch) {
                 $oldLinkString = $linkMatch;
-                $srcString = $linksOutput[1][$index];
+                $srcString = $linksOutput[2][$index];
                 if (strpos(trim($srcString), 'http') !== 0) {
                     $newSrcString = url($srcString);
                     $newLinkString = str_replace($srcString, $newSrcString, $oldLinkString);
@@ -249,6 +248,7 @@ class ExportFormatter
             }
         }
 
+        // Replace any relative links with system domain
         return $htmlContent;
     }
 

app/Http/Controllers/Controller.php

@@ -219,6 +219,6 @@ abstract class Controller extends BaseController
      */
     protected function getImageValidationRules(): array
     {
-        return ['image_extension', 'mimes:jpeg,png,gif,webp,svg', 'max:' . (config('app.upload_limit') * 1000)];
+        return ['image_extension', 'mimes:jpeg,png,gif,webp', 'max:' . (config('app.upload_limit') * 1000)];
     }
 }

app/Http/Controllers/Images/DrawioImageController.php

@@ -76,11 +76,8 @@ class DrawioImageController extends Controller
             return $this->jsonError('Image data could not be found');
         }
 
-        $isSvg = strtolower(pathinfo($image->path, PATHINFO_EXTENSION)) === 'svg';
-        $uriPrefix = $isSvg ? 'data:image/svg+xml;base64,' : 'data:image/png;base64,';
-
         return response()->json([
-            'content' => $uriPrefix . base64_encode($imageData),
+            'content' => base64_encode($imageData),
         ]);
     }
 }

app/Uploads/ImageRepo.php

@@ -148,8 +148,7 @@ class ImageRepo
      */
     public function saveDrawing(string $base64Uri, int $uploadedTo): Image
     {
-        $isSvg = strpos($base64Uri, 'data:image/svg+xml;') === 0;
-        $name = 'Drawing-' . user()->id . '-' . time() . ($isSvg ? '.svg' : '.png');
+        $name = 'Drawing-' . user()->id . '-' . time() . '.png';
 
         return $this->imageService->saveNewFromBase64Uri($base64Uri, $name, 'drawio', $uploadedTo);
     }

app/Uploads/ImageService.php

@@ -30,7 +30,7 @@ class ImageService
     protected $image;
     protected $fileSystem;
 
-    protected static $supportedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
+    protected static $supportedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 
     /**
      * ImageService constructor.
@@ -230,14 +230,6 @@ class ImageService
         return strtolower(pathinfo($image->path, PATHINFO_EXTENSION)) === 'gif';
     }
 
-    /**
-     * Check if the given image is an SVG image file.
-     */
-    protected function isSvg(Image $image): bool
-    {
-        return strtolower(pathinfo($image->path, PATHINFO_EXTENSION)) === 'svg';
-    }
-
     /**
      * Check if the given image and image data is apng.
      */
@@ -263,8 +255,8 @@ class ImageService
      */
     public function getThumbnail(Image $image, ?int $width, ?int $height, bool $keepRatio = false): string
     {
-        // Do not resize GIF images where we're not cropping or SVG images.
-        if (($keepRatio && $this->isGif($image)) || $this->isSvg($image)) {
+        // Do not resize GIF images where we're not cropping
+        if ($keepRatio && $this->isGif($image)) {
             return $this->getPublicUrl($image->path);
         }
 

public/dist/print-styles.css

@@ -0,0 +1 @@
+:root{--color-primary: #206ea7;--color-primary-light: rgba(32,110,167,0.15);--color-page: #206ea7;--color-page-draft: #7e50b1;--color-chapter: #af4d0d;--color-book: #077b70;--color-bookshelf: #a94747}header{display:none}html,body{font-size:12px;background-color:#fff}.page-content{margin:0 auto}.print-hidden{display:none !important}.tri-layout-container{grid-template-columns:1fr;grid-template-areas:"b";margin-inline-start:0;margin-inline-end:0;display:block}.card{box-shadow:none}.content-wrap.card{padding-inline-start:0;padding-inline-end:0}/*# sourceMappingURL=print-styles.css.map */

resources/js/components/markdown-editor.js

@@ -18,8 +18,10 @@ class MarkdownEditor {
         this.markdown = new MarkdownIt({html: true});
         this.markdown.use(mdTasksLists, {label: true});
 
-        this.display = this.$refs.display;
-        this.input = this.$refs.input;
+        this.display = this.elem.querySelector('.markdown-display');
+
+        this.displayStylesLoaded = false;
+        this.input = this.elem.querySelector('textarea');
 
         this.cm = null;
         this.Code = null;
@@ -30,13 +32,23 @@ class MarkdownEditor {
         });
 
         this.onMarkdownScroll = this.onMarkdownScroll.bind(this);
+
+        const displayLoad = () => {
+            this.displayDoc = this.display.contentDocument;
+            this.init(cmLoadPromise);
+        };
+
+        if (this.display.contentDocument.readyState === 'complete') {
+            displayLoad();
+        } else {
+            this.display.addEventListener('load', displayLoad.bind(this));
+        }
+
         window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
             markdownIt: this.markdown,
             displayEl: this.display,
             codeMirrorInstance: this.cm,
         });
-
-        this.init(cmLoadPromise);
     }
 
     init(cmLoadPromise) {
@@ -44,17 +56,17 @@ class MarkdownEditor {
         let lastClick = 0;
 
         // Prevent markdown display link click redirect
-        this.display.addEventListener('click', event => {
-            const isDblClick = Date.now() - lastClick < 300;
+        this.displayDoc.addEventListener('click', event => {
+            let isDblClick = Date.now() - lastClick < 300;
 
-            const link = event.target.closest('a');
+            let link = event.target.closest('a');
             if (link !== null) {
                 event.preventDefault();
                 window.open(link.getAttribute('href'));
                 return;
             }
 
-            const drawing = event.target.closest('[drawio-diagram]');
+            let drawing = event.target.closest('[drawio-diagram]');
             if (drawing !== null && isDblClick) {
                 this.actionEditDrawing(drawing);
                 return;
@@ -65,10 +77,10 @@ class MarkdownEditor {
 
         // Button actions
         this.elem.addEventListener('click', event => {
-            const button = event.target.closest('button[data-action]');
+            let button = event.target.closest('button[data-action]');
             if (button === null) return;
 
-            const action = button.getAttribute('data-action');
+            let action = button.getAttribute('data-action');
             if (action === 'insertImage') this.actionInsertImage();
             if (action === 'insertLink') this.actionShowLinkSelector();
             if (action === 'insertDrawing' && (event.ctrlKey || event.metaKey)) {
@@ -120,11 +132,35 @@ class MarkdownEditor {
         window.$events.emit('editor-markdown-change', content);
 
         // Set body content
-        this.display.innerHTML = html;
+        this.displayDoc.body.className = 'page-content';
+        this.displayDoc.body.innerHTML = html;
+
+        // Copy styles from page head and set custom styles for editor
+        this.loadStylesIntoDisplay();
+    }
+
+    loadStylesIntoDisplay() {
+        if (this.displayStylesLoaded) return;
+        this.displayDoc.documentElement.classList.add('markdown-editor-display');
+        // Set display to be dark mode if parent is
+
+        if (document.documentElement.classList.contains('dark-mode')) {
+            this.displayDoc.documentElement.style.backgroundColor = '#222';
+            this.displayDoc.documentElement.classList.add('dark-mode');
+        }
+
+        this.displayDoc.head.innerHTML = '';
+        const styles = document.head.querySelectorAll('style,link[rel=stylesheet]');
+        for (let style of styles) {
+            const copy = style.cloneNode(true);
+            this.displayDoc.head.appendChild(copy);
+        }
+
+        this.displayStylesLoaded = true;
     }
 
     onMarkdownScroll(lineCount) {
-        const elems = this.display.children;
+        const elems = this.displayDoc.body.children;
         if (elems.length <= lineCount) return;
 
         const topElem = (lineCount === -1) ? elems[elems.length-1] : elems[lineCount];
@@ -281,7 +317,7 @@ class MarkdownEditor {
             let cursor = cm.getCursor();
             let lineContent = cm.getLine(cursor.line);
             let lineLen = lineContent.length;
-            let newLineContent;
+            let newLineContent = lineContent;
 
             if (lineContent.indexOf(start) === 0 && lineContent.slice(-end.length) === end) {
                 newLineContent = lineContent.slice(start.length, lineContent.length - end.length);
@@ -297,9 +333,9 @@ class MarkdownEditor {
             let selection = cm.getSelection();
             if (selection === '') return wrapLine(start, end);
 
-            let newSelection;
+            let newSelection = selection;
             let frontDiff = 0;
-            let endDiff;
+            let endDiff = 0;
 
             if (selection.indexOf(start) === 0 && selection.slice(-end.length) === end) {
                 newSelection = selection.slice(start.length, selection.length - end.length);
@@ -409,10 +445,10 @@ class MarkdownEditor {
 
         DrawIO.show(url,() => {
             return Promise.resolve('');
-        }, (drawingData) => {
+        }, (pngData) => {
 
             const data = {
-                image: drawingData,
+                image: pngData,
                 uploaded_to: Number(this.pageId),
             };
 
@@ -426,7 +462,7 @@ class MarkdownEditor {
     }
 
     insertDrawing(image, originalCursor) {
-        const newText = DrawIO.buildDrawingContentHtml(image);
+        const newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
         this.cm.focus();
         this.cm.replaceSelection(newText);
         this.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
@@ -444,22 +480,21 @@ class MarkdownEditor {
 
         DrawIO.show(drawioUrl, () => {
             return DrawIO.load(drawingId);
-        }, (drawingData) => {
+        }, (pngData) => {
 
             let data = {
-                image: drawingData,
+                image: pngData,
                 uploaded_to: Number(this.pageId),
             };
 
             window.$http.post("/images/drawio", data).then(resp => {
-                const image = resp.data;
-                const newText = DrawIO.buildDrawingContentHtml(image);
-
-                const newContent = this.cm.getValue().split('\n').map(line => {
-                    const isDrawing = line.includes(`drawio-diagram="${drawingId}"`);
-                    return isDrawing ? newText : line;
+                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
+                let newContent = this.cm.getValue().split('\n').map(line => {
+                    if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
+                        return newText;
+                    }
+                    return line;
                 }).join('\n');
-
                 this.cm.setValue(newContent);
                 this.cm.setCursor(cursorPos);
                 this.cm.focus();

resources/js/components/page-editor.js

@@ -24,7 +24,7 @@ class PageEditor {
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;
-        this.changeEditorButtons = this.$manyRefs.changeEditor || [];
+        this.changeEditorButtons = this.$manyRefs.changeEditor;
         this.switchDialogContainer = this.$refs.switchDialog;
 
         // Translations

resources/js/services/drawio.js

@@ -55,7 +55,7 @@ function drawEventExport(message) {
 }
 
 function drawEventSave(message) {
-    drawPostMessage({action: 'export', format: 'xmlsvg', xml: message.xml, spin: 'Updating drawing'});
+    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
 }
 
 function drawEventInit() {
@@ -96,21 +96,7 @@ async function upload(imageData, pageUploadedToId) {
  */
 async function load(drawingId) {
     const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
-    return resp.data.content;
+    return `data:image/png;base64,${resp.data.content}`;
 }
 
-
-function buildDrawingContentHtml(drawing) {
-    const isSvg = drawing.url.split('.').pop().toLowerCase() === 'svg';
-    const image = `<img src="${drawing.url}">`;
-    const embed = `<embed src="${drawing.url}" type="image/svg+xml">`;
-    return `<div drawio-diagram="${drawing.id}">${isSvg ? embed : image}</div>`
-}
-
-function buildDrawingContentNode(drawing) {
-    const div = document.createElement('div');
-    div.innerHTML = buildDrawingContentHtml(drawing);
-    return div.children[0];
-}
-
-export default {show, close, upload, load, buildDrawingContentHtml, buildDrawingContentNode};
+export default {show, close, upload, load};

resources/js/wysiwyg/plugin-drawio.js

@@ -1,5 +1,4 @@
 import DrawIO from "../services/drawio";
-import {build} from "./config";
 
 let pageEditor = null;
 let currentNode = null;
@@ -16,14 +15,15 @@ function isDrawing(node) {
 function showDrawingManager(mceEditor, selectedNode = null) {
     pageEditor = mceEditor;
     currentNode = selectedNode;
-
     // Show image manager
     window.ImageManager.show(function (image) {
         if (selectedNode) {
-            pageEditor.dom.replace(buildDrawingNode(image), selectedNode);
+            let imgElem = selectedNode.querySelector('img');
+            pageEditor.dom.setAttrib(imgElem, 'src', image.url);
+            pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
         } else {
-            const drawingHtml = DrawIO.buildDrawingContentHtml(image);
-            pageEditor.insertContent(drawingHtml);
+            let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
+            pageEditor.insertContent(imgHTML);
         }
     }, 'drawio');
 }
@@ -34,14 +34,7 @@ function showDrawingEditor(mceEditor, selectedNode = null) {
     DrawIO.show(options.drawioUrl, drawingInit, updateContent);
 }
 
-function buildDrawingNode(drawing) {
-    const drawingEl = DrawIO.buildDrawingContentNode(drawing);
-    drawingEl.setAttribute('contenteditable', 'false');
-    drawingEl.setAttribute('data-ephox-embed-iri', 'true');
-    return drawingEl;
-}
-
-async function updateContent(drawingData) {
+async function updateContent(pngData) {
     const id = "image-" + Math.random().toString(16).slice(2);
     const loadingImage = window.baseUrl('/loading.gif');
 
@@ -57,9 +50,11 @@ async function updateContent(drawingData) {
     // Handle updating an existing image
     if (currentNode) {
         DrawIO.close();
+        let imgElem = currentNode.querySelector('img');
         try {
-            const img = await DrawIO.upload(drawingData, options.pageId);
-            pageEditor.dom.replace(buildDrawingNode(img), currentNode);
+            const img = await DrawIO.upload(pngData, options.pageId);
+            pageEditor.dom.setAttrib(imgElem, 'src', img.url);
+            pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
         } catch (err) {
             handleUploadError(err);
         }
@@ -67,11 +62,12 @@ async function updateContent(drawingData) {
     }
 
     setTimeout(async () => {
-        pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" alt="Loading" id="${id}"></div>`);
+        pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
         DrawIO.close();
         try {
-            const img = await DrawIO.upload(drawingData, options.pageId);
-            pageEditor.dom.replace(buildDrawingNode(img), pageEditor.dom.get(id).parentNode);
+            const img = await DrawIO.upload(pngData, options.pageId);
+            pageEditor.dom.setAttrib(id, 'src', img.url);
+            pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
         } catch (err) {
             pageEditor.dom.remove(id);
             handleUploadError(err);
@@ -90,6 +86,7 @@ function drawingInit() {
 }
 
 /**
+ *
  * @param {WysiwygConfigOptions} providedOptions
  * @return {function(Editor, string)}
  */
@@ -133,28 +130,14 @@ export function getPlugin(providedOptions) {
             showDrawingEditor(editor, selectedNode);
         });
 
-        editor.on('PreInit', () => {
-            editor.parser.addNodeFilter('div', function(nodes) {
-                for (const node of nodes) {
-                    if (node.attr('drawio-diagram')) {
-                        // Set content editable to be false to prevent direct editing of child content.
-                        node.attr('contenteditable', 'false');
-                        // Set this attribute to prevent drawing contents being parsed as media embeds
-                        // to avoid contents being replaced with placeholder images.
-                        // TinyMCE embed plugin sources looks for this attribute in its logic.
-                        node.attr('data-ephox-embed-iri', 'true');
-                    }
-                }
-            });
+        editor.on('SetContent', function () {
+            const drawings = editor.$('body > div[drawio-diagram]');
+            if (!drawings.length) return;
 
-            editor.serializer.addNodeFilter('div', function(nodes) {
-                for (const node of nodes) {
-                    // Clean up content attributes
-                    if (node.attr('drawio-diagram')) {
-                        node.attr('contenteditable', null);
-                        node.attr('data-ephox-embed-iri', null);
-                    }
-                }
+            editor.undoManager.transact(function () {
+                drawings.each((index, elem) => {
+                    elem.setAttribute('contenteditable', 'false');
+                });
             });
         });
 

resources/sass/_forms.scss

@@ -114,20 +114,26 @@
 
 .markdown-display {
   margin-inline-start: -1px;
-  display: block;
+}
+
+.markdown-editor-display {
   background-color: #fff;
-  padding: $-m;
-  overflow-y: scroll;
+  body {
+    display: block;
+    background-color: #fff;
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
+  }
   [drawio-diagram]:hover {
     outline: 2px solid var(--color-primary);
   }
-  [drawio-diagram] embed {
-    pointer-events: none;
-  }
 }
 
-.dark-mode .markdown-display {
+html.markdown-editor-display.dark-mode {
   background-color: #222;
+  body {
+    background-color: #222;
+  }
 }
 
 .editor-toolbar {

resources/sass/_tinymce.scss

@@ -48,11 +48,6 @@ body.page-content.mce-content-body  {
   display: none;
 }
 
-// Prevent interaction with embed contents
-.page-content.mce-content-body embed {
-  pointer-events: none;
-}
-
 // Details/summary editor usability
 .page-content.mce-content-body details summary {
   pointer-events: none;

resources/views/home/default.blade.php

@@ -17,6 +17,13 @@
         </div>
     </div>
 
+    <script nonce="{{ $cspNonce }}">
+        setTimeout(async () => {
+            const result = await window.components["confirm-dialog"][0].show();
+            console.log({result});
+        }, 1000);
+    </script>
+
     <div class="container" id="home-default">
         <div class="grid third gap-xxl no-row-gap" >
             <div>

resources/views/pages/parts/markdown-editor.blade.php

@@ -23,7 +23,6 @@
 
         <div markdown-input class="flex flex-fill">
             <textarea id="markdown-editor-input"
-                      refs="markdown-editor@input"
                       @if($errors->has('markdown')) class="text-neg" @endif
                       name="markdown"
                       rows="5">@if(isset($model) || old('markdown')){{ old('markdown') ?? ($model->markdown === '' ? $model->html : $model->markdown) }}@endif</textarea>
@@ -35,10 +34,7 @@
         <div class="editor-toolbar">
             <div class="editor-toolbar-label">{{ trans('entities.pages_md_preview') }}</div>
         </div>
-        <div class="markdown-display">
-            <div refs="markdown-editor@display"
-                 class="page-content"></div>
-        </div>
+        <iframe src="about:blank" class="markdown-display" sandbox="allow-same-origin"></iframe>
     </div>
 </div>
 

tests/Entity/ExportTest.php

@@ -258,24 +258,6 @@ class ExportTest extends TestCase
         unlink($testFilePath);
     }
 
-    public function test_page_export_contained_html_embed_elements_are_converted_to_images_with_srcs_inlined()
-    {
-        $page = Page::query()->first();
-        $page->html = '<embed src="http://localhost/uploads/images/gallery/svg_test.svg"/>';
-        $page->save();
-
-        $storageDisk = Storage::disk('local');
-        $storageDisk->makeDirectory('uploads/images/gallery');
-        $storageDisk->put('uploads/images/gallery/svg_test.svg', '<svg>good</svg>');
-
-        $resp = $this->asEditor()->get($page->getUrl('/export/html'));
-
-        $storageDisk->delete('uploads/images/gallery/svg_test.svg');
-
-        $resp->assertDontSee('http://localhost/uploads/images/gallery/svg_test.svg', false);
-        $resp->assertSee('<img src="data:image/svg+xml;base64,PHN2Zz5nb29kPC9zdmc+">', false);
-    }
-
     public function test_exports_removes_scripts_from_custom_head()
     {
         $entities = [

tests/TestResponse.php

@@ -111,7 +111,7 @@ class TestResponse extends BaseTestResponse
 
         foreach ($elements as $element) {
             $element = new Crawler($element);
-            if (preg_match("/$pattern/i", $element->text())) {
+            if (preg_match("/$pattern/i", $element->html())) {
                 $matched = true;
                 break;
             }

tests/Uploads/DrawioTest.php

@@ -10,7 +10,7 @@ class DrawioTest extends TestCase
 {
     use UsesImages;
 
-    public function test_get_image_as_base64_with_png_content()
+    public function test_get_image_as_base64()
     {
         $page = Page::first();
         $this->asAdmin();
@@ -23,27 +23,11 @@ class DrawioTest extends TestCase
 
         $imageGet = $this->getJson("/images/drawio/base64/{$image->id}");
         $imageGet->assertJson([
-            'content' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII=',
+            'content' => 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII=',
         ]);
     }
 
-    public function test_get_image_as_base64_with_svg_content()
-    {
-        $page = Page::first();
-        $this->asAdmin();
-
-        $this->uploadImage('my-drawing.svg', $page->id, 'image/svg+xml', 'diagram.svg');
-        $image = Image::first();
-        $image->type = 'drawio';
-        $image->save();
-
-        $imageGet = $this->getJson("/images/drawio/base64/{$image->id}");
-        $imageGet->assertJson([
-            'content' => 'data:image/svg+xml;base64,' . base64_encode(file_get_contents($this->getTestImageFilePath('diagram.svg'))),
-        ]);
-    }
-
-    public function test_drawing_base64_upload_with_png()
+    public function test_drawing_base64_upload()
     {
         $page = Page::first();
         $editor = $this->getEditor();
@@ -51,7 +35,7 @@ class DrawioTest extends TestCase
 
         $upload = $this->postJson('images/drawio', [
             'uploaded_to' => $page->id,
-            'image'       => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII=',
+            'image'       => 'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEcDCo5iYNs+gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFElEQVQI12O0jN/KgASYGFABqXwAZtoBV6Sl3hIAAAAASUVORK5CYII=',
         ]);
 
         $upload->assertStatus(200);
@@ -70,34 +54,6 @@ class DrawioTest extends TestCase
         $this->assertTrue($testImageData === $uploadedImageData, 'Uploaded image file data does not match our test image as expected');
     }
 
-    public function test_drawing_base64_upload_with_svg()
-    {
-        $page = Page::first();
-        $editor = $this->getEditor();
-        $this->actingAs($editor);
-
-        $upload = $this->postJson('images/drawio', [
-            'uploaded_to' => $page->id,
-            'image'       => 'data:image/svg+xml;base64,' . base64_encode(file_get_contents($this->getTestImageFilePath('diagram.svg'))),
-        ]);
-
-        $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->assertStringEndsWith('.svg', $image->path);
-        $this->assertTrue(file_exists(public_path($image->path)), 'Uploaded image not found at path: ' . public_path($image->path));
-
-        $testImageData = file_get_contents($this->getTestImageFilePath('diagram.svg'));
-        $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');

tests/Uploads/ImageTest.php

@@ -74,23 +74,6 @@ class ImageTest extends TestCase
         $this->assertStringNotContainsString('thumbs-', $imgDetails['response']->thumbs->display);
     }
 
-    public function test_svg_upload()
-    {
-        /** @var Page $page */
-        $page = Page::query()->first();
-        $admin = $this->getAdmin();
-        $this->actingAs($admin);
-
-        $imgDetails = $this->uploadGalleryImage($page, 'diagram.svg', 'image/svg+xml');
-        $this->assertFileExists(public_path($imgDetails['path']));
-        $this->assertTrue(
-            $imgDetails['response']->url === $imgDetails['response']->thumbs->gallery
-            && $imgDetails['response']->url === $imgDetails['response']->thumbs->display,
-        );
-
-        $this->deleteImage($imgDetails['path']);
-    }
-
     public function test_image_edit()
     {
         $editor = $this->getEditor();

tests/Uploads/UsesImages.php

@@ -3,7 +3,6 @@
 namespace Tests\Uploads;
 
 use BookStack\Entities\Models\Page;
-use BookStack\Uploads\Image;
 use Illuminate\Http\UploadedFile;
 use stdClass;
 
@@ -40,9 +39,9 @@ trait UsesImages
     /**
      * Get a test image that can be uploaded.
      */
-    protected function getTestImage(string $fileName, ?string $testDataFileName = null, $mimeType = 'image/png'): UploadedFile
+    protected function getTestImage(string $fileName, ?string $testDataFileName = null): UploadedFile
     {
-        return new UploadedFile($this->getTestImageFilePath($testDataFileName), $fileName, $mimeType, null, true);
+        return new UploadedFile($this->getTestImageFilePath($testDataFileName), $fileName, 'image/png', null, true);
     }
 
     /**
@@ -74,7 +73,7 @@ trait UsesImages
      */
     protected function uploadImage($name, $uploadedTo = 0, $contentType = 'image/png', ?string $testDataFileName = null)
     {
-        $file = $this->getTestImage($name, $testDataFileName, $contentType);
+        $file = $this->getTestImage($name, $testDataFileName);
 
         return $this->withHeader('Content-Type', $contentType)
             ->call('POST', '/images/gallery', ['uploaded_to' => $uploadedTo], [], ['file' => $file], []);
@@ -85,9 +84,11 @@ trait UsesImages
      * Returns the image name.
      * Can provide a page to relate the image to.
      *
+     * @param Page|null $page
+     *
      * @return array{name: string, path: string, page: Page, response: stdClass}
      */
-    protected function uploadGalleryImage(Page $page = null, string $testDataFileName = null, string $contentType = 'image/png')
+    protected function uploadGalleryImage(Page $page = null, ?string $testDataFileName = null)
     {
         if ($page === null) {
             $page = Page::query()->first();
@@ -97,7 +98,7 @@ trait UsesImages
         $relPath = $this->getTestImagePath('gallery', $imageName);
         $this->deleteImage($relPath);
 
-        $upload = $this->uploadImage($imageName, $page->id, $contentType, $testDataFileName);
+        $upload = $this->uploadImage($imageName, $page->id, 'image/png', $testDataFileName);
         $upload->assertStatus(200);
 
         return [

tests/test-data/diagram.svg

@@ -1,3 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="141px" viewBox="-0.5 -0.5 121 141"><defs/><g><ellipse cx="25" cy="87.5" rx="7.5" ry="7.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 25 95 L 25 120 M 25 100 L 10 100 M 25 100 L 40 100 M 25 120 L 10 140 M 25 120 L 40 140" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 0 0 L 120 0 L 120 50 L 80 50 L 60 80 L 60 50 L 0 50 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 25px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Hello!</div></div></div></foreignObject><text x="60" y="29" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Hello!</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>

version

@@ -1 +1 @@
-v22.02-dev
+v22.04.2