Merge pull request #3 from cosmocode/svg-as-object

Render SVGs as <object> instead of <img>

Author: annda

action.php

@@ -58,8 +58,7 @@ public function handleAjax(Doku_Event $event)
     }
 
     /**
-     * Return an array of diagrams that are editable,
-     * based on ACLs and image content ('embed.diagrams.net' or 'draw.io')
+     * Return an array of diagrams editable by the current user
      *
      * @param array $images
      * @return array
@@ -69,30 +68,32 @@ protected function editableDiagrams($images)
         $editable = [];
 
         foreach ($images as $image) {
-            // skip non SVG files
-            if (strpos($image, '.svg', - strlen('.svg')) === false) {
-                continue;
-            }
-            // check ACLs
-            if (auth_quickaclcheck($image) < AUTH_UPLOAD) {
-                continue;
-            }
-            // is it our diagram?
-            global $conf;
-            $file = DOKU_INC .
-                $conf['savedir'] .
-                DIRECTORY_SEPARATOR .
-                'media' .
-                DIRECTORY_SEPARATOR .
-                preg_replace(['/:/'], [DIRECTORY_SEPARATOR], $image);
-
-            $begin = file_get_contents($file, false, null, 0, 500);
-            // TODO find a better way to detect diagrams
-            if (strpos($begin, 'embed.diagrams.net') || strpos($begin, 'draw.io')) {
+            if (auth_quickaclcheck($image) >= AUTH_UPLOAD && $this->isDiagram($image)) {
                 $editable[] = $image;
             }
         }
 
         return $editable;
     }
+
+    /**
+     * Return true if the image is recognized as our diagram
+     * based on content ('embed.diagrams.net' or 'draw.io')
+     *
+     * @param string $image image id
+     * @return bool
+     */
+    protected function isDiagram($image)
+    {
+        global $conf;
+        $file = DOKU_INC .
+            $conf['savedir'] .
+            DIRECTORY_SEPARATOR .
+            'media' .
+            DIRECTORY_SEPARATOR .
+            preg_replace(['/:/'], [DIRECTORY_SEPARATOR], $image);
+
+        $begin = file_get_contents($file, false, null, 0, 500);
+        return strpos($begin, 'embed.diagrams.net') || strpos($begin, 'draw.io');
+    }
 }

script.js

@@ -3,12 +3,12 @@ jQuery(function () {
     /* DOKUWIKI:include script/service.js */
     /* DOKUWIKI:include script/elements.js */
 
-    // add diagram edit button to all SVGs included in wiki pages
-    const $images = jQuery('img').filter('.media, .medialeft, .mediacenter, .mediaright');
+    // add diagram edit button to diagram SVGs included in wiki pages
+    const $images = jQuery('object').filter('.diagrams-svg');
 
     // collect image IDs with file extension
     const imageIds = $images.map(function (key, image) {
-        return extractIdFromMediaUrl(image.src);
+        return extractIdFromMediaUrl(image.data);
     }).toArray();
 
     let ajaxData = {};
@@ -19,7 +19,7 @@ jQuery(function () {
     const attachButtons = function (result) {
         const diagrams = JSON.parse(result);
         $images.each(function () {
-            const id = extractIdFromMediaUrl(this.src);
+            const id = extractIdFromMediaUrl(this.data);
             const $current = jQuery(this);
             if (diagrams.includes(id)) {
                 let $editButton = editDiagramButton(id);
@@ -111,3 +111,11 @@ jQuery(function () {
         observer.observe(targetNode, config);
     });
 });
+
+// open links in diagrams in the browser window instead of SVG frame
+// TODO this will not work with DokuWiki master as of February 2021 (contentDocument is null)
+jQuery(window).on('load', function() {
+    jQuery('object.diagrams-svg').each( function() {
+        jQuery(this.contentDocument).find('svg').find('a').attr('target', '_parent');
+    });
+});

syntax.php

@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * Class syntax_plugin_diagrams
+ */
+class syntax_plugin_diagrams extends DokuWiki_Syntax_Plugin {
+
+    /**
+     * @inheritdoc
+     */
+    public function getType()
+    {
+        return 'substition';
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function getSort()
+    {
+        return 319;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function connectTo($mode)
+    {
+        $this->Lexer->addSpecialPattern('\{\{[^\}]+(?:\.svg)[^\}]*?\}\}',$mode,'plugin_diagrams');
+    }
+
+    /**
+     * Parse SVG syntax into media data
+     *
+     * @param string $match
+     * @param int $state
+     * @param int $pos
+     * @param Doku_Handler $handler
+     * @return array|bool
+     */
+    public function handle($match, $state, $pos, Doku_Handler $handler)
+    {
+        return Doku_Handler_Parse_Media($match);
+    }
+
+    /**
+     * Render the diagram SVG as <object> instead of <img> to allow links
+     *
+     * @param string $format
+     * @param Doku_Renderer $renderer
+     * @param array $data
+     * @return bool
+     */
+    public function render($format, Doku_Renderer $renderer, $data)
+    {
+        if ($format !== 'xhtml') return false;
+
+        $width = $data['width'] ? 'width="' . $data['width'] . '"' : '';
+        $height = $data['height'] ? 'height="' . $data['height'] . '"' : '';
+
+        $tag = '<object data="%s&cache=nocache" type="image/svg+xml" class="diagrams-svg media%s" %s %s></object>';
+        $renderer->doc .= sprintf($tag, ml($data['src']), $data['align'], $width, $height);
+
+        return true;
+    }
+}