Add attachment support for nextcloud-text

.gitignore

@@ -0,0 +1 @@
+/node_modules/

lib/AppInfo/Application.php

@@ -23,6 +23,8 @@
 use OCA\Drawio\Controller\SettingsController;
 use OCA\Drawio\Preview\DrawioPreview;
 use OCA\Drawio\Listeners\FileDeleteListener;
+use OCA\Drawio\Listeners\RegisterTemplateCreatorListener;
+use OCP\Files\Template\RegisterTemplateCreatorEvent;
 
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Files\Events\Node\NodeDeletedEvent;
@@ -32,11 +34,13 @@
 
 class Application extends App {
 
+    public const APP_ID = "drawio";
+
     public $appConfig;
 
     public function __construct(array $urlParams = [])
     {
-        $appName = "drawio";
+        $appName = self::APP_ID;
 
         parent::__construct($appName, $urlParams);
 
@@ -139,5 +143,6 @@ public function __construct(array $urlParams = [])
         /** @var IEventDispatcher $eventDispatcher */
 		$newEventDispatcher = $server->query(IEventDispatcher::class);
         $newEventDispatcher->addServiceListener(NodeDeletedEvent::class, FileDeleteListener::class);
+        $newEventDispatcher->addServiceListener(RegisterTemplateCreatorEvent::class, RegisterTemplateCreatorListener::class);
     }
 }

lib/Listeners/RegisterTemplateCreatorListener.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace OCA\Drawio\Listeners;
+
+use OCA\Drawio\AppInfo\Application;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventListener;
+use OCP\Files\Template\RegisterTemplateCreatorEvent;
+use OCP\Files\Template\TemplateFileCreator;
+use OCP\IL10N;
+
+final class RegisterTemplateCreatorListener implements IEventListener {
+	public function __construct(
+		private IL10N $l10n,
+	) {
+	}
+
+	public function handle(Event $event): void {
+		if (!($event instanceof RegisterTemplateCreatorEvent)) {
+			return;
+		}
+		$event->getTemplateManager()->registerTemplateFileCreator(function () {
+			$drawio = new TemplateFileCreator(Application::APP_ID, $this->l10n->t('New draw.io Diagram'), '.drawio');
+			$drawio->addMimetype('application/x-drawio');
+			$drawio->setIconSvgInline(file_get_contents(__DIR__ . '/../../img/drawio.svg'));
+			$drawio->setActionLabel($this->l10n->t('New draw.io Diagram'));
+			return $drawio;
+		});
+		$event->getTemplateManager()->registerTemplateFileCreator(function () {
+			$dwb = new TemplateFileCreator(Application::APP_ID, $this->l10n->t('New draw.io Whiteboard'), '.dwb');
+			$dwb->addMimetype('application/x-drawio-wb');
+			$dwb->setIconSvgInline(file_get_contents(__DIR__ . '/../../img/dwb.svg'));
+			$dwb->setActionLabel($this->l10n->t('New draw.io Whiteboard'));
+			return $dwb;
+		});
+	}
+}

package.json

@@ -13,6 +13,7 @@
     "dependencies": {
         "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.1",
+        "@nextcloud/browserslist-config": "^2.2.0",
         "@nextcloud/dialogs": "^6.1.1",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/files": "^3.10.2",

src/editor.js

@@ -180,10 +180,19 @@ import '@nextcloud/dialogs/style.css';
 
             if (filePath)
             {
-                url = generateUrl('/apps/files/?dir={currentDirectory}', {
-                    currentDirectory: filePath.substring(0, filePath.lastIndexOf('/')),
-                    fileId: data.id
-                });
+                const matches = [...filePath.matchAll(/\/\.attachments\.(\d+)\//g)];
+                if (matches.length) {
+                    const match = matches[matches.length - 1];
+                    url = generateUrl('/apps/files/files/{fileId}?dir={currentDirectory}&openfile=true', {
+                        currentDirectory: filePath.substring(0, filePath.lastIndexOf(match[0])),
+                        fileId: match[1],
+                    });
+                } else {
+                    url = generateUrl('/apps/files/?dir={currentDirectory}', {
+                        currentDirectory: filePath.substring(0, filePath.lastIndexOf('/')),
+                        fileId: data.id
+                    });
+                }
             }
             else // ShareToken case
             {

src/main.js

@@ -16,15 +16,15 @@ import axios from '@nextcloud/axios'
 import {
 	DefaultType,
 	FileAction,
-	addNewFileMenuEntry,
 	registerFileAction,
 	File,
 	Permission,
-	getNavigation,
 } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { emit } from '@nextcloud/event-bus'
 
+import PreviewComponent from './viewer.js'
+
 // Some code is inspired by Mind Map app (https://github.com/ACTom/files_mindmap)
 
 OCA.DrawIO = {
@@ -121,51 +121,64 @@ OCA.DrawIO = {
         };
     },
 
-    registerNewFileMenuPlugin: () => {
-        function getUniqueName(name, ext, names) 
+    init: async function () 
+    {
+        if ($('#isPublic').val() === '1' && !$('#filestable').length)
         {
-            let newName;
+            var fileName = $('#filename').val();
+            var mimeType = $('#mimetype').val();
+            var sharingToken = $('#sharingToken').val();
+            var extension = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
+            var isWB = String(extension == 'dwb');
 
-            do
+            if (!OCA.DrawIO.Mimes[extension] || OCA.DrawIO.Mimes[extension].mime != mimeType)
             {
-                newName = name + '-' + Math.round(Math.random() * 1000000) + '.' + ext;
+                return;
             }
-            while (names.includes(newName)) 
-
-            return newName;
-        }
 
-        function addMenuEntry(ext, attr)
-        {
-            addNewFileMenuEntry({
-                id: 'drawIoDiagram_' + ext,
-                displayName: attr.newStr,
-                enabled(node) {
-                    return (node.permissions & OC.PERMISSION_CREATE) !== 0;
-                },
-                iconClass: attr.css,
-                async handler(context, content)
-                {
-                    const contentNames = content.map((node) => node.basename);
-                    const fileName = getUniqueName(attr.newStr, ext, contentNames);
-                    OCA.DrawIO.CreateNewFile(fileName, context, ext, attr.mime);
-                }
+            var button = document.createElement('a');
+            button.href = generateUrl('apps/' + OCA.DrawIO.AppName + '/edit?shareToken={shareToken}&isWB={isWB}&lightbox=true', {
+                shareToken: sharingToken,
+                isWB: isWB
             });
-        }
+            button.className = 'button';
+            button.innerText = t(OCA.DrawIO.AppName, 'Open in Draw.io');
+            $('#preview').append(button);
 
-        for (const ext in OCA.DrawIO.Mimes) 
-        {
-            addMenuEntry(ext, OCA.DrawIO.Mimes[ext]);
-        }
-    },
+            // If the file is editable, add a button to edit it
+            var url = generateUrl('/apps/' + OCA.DrawIO.AppName + '/ajax/getFileInfo?shareToken={shareToken}', 
+            {
+                shareToken: sharingToken
+            });
+
+            var response = await axios.get(url);
 
-    init: async function () 
-    {
-        OCA.DrawIO.registerNewFileMenuPlugin();
-        OCA.DrawIO.registerFileActions();
+            if (response.status == 200 && response.data.writeable) 
+            {
+                var editButton = document.createElement('a');
+                editButton.href = generateUrl('apps/' + OCA.DrawIO.AppName + '/edit?shareToken={shareToken}&isWB={isWB}', {
+                    shareToken: sharingToken,
+                    isWB: isWB
+                });
+                editButton.className = 'button';
+                editButton.innerText = t(OCA.DrawIO.AppName, 'Edit in Draw.io');
+                $('#preview').append(editButton);
+            }
+        }
     }
 };
 
+if (typeof OCA.Viewer !== 'undefined') {
+    OCA.Viewer.registerHandler({
+        id: 'drawio',
+        mimes: Object.values(OCA.DrawIO.Mimes).map(x => x.mime),
+        component: PreviewComponent,
+        group: null,
+        theme: 'default',
+        canCompare: true,
+    });
+}
+
 $(function () 
 {
     OCA.DrawIO.init();

src/viewer.js

@@ -0,0 +1,78 @@
+const generateRandom = () =>
+	Math.random()
+		.toString(36)
+		.replace(/[^a-z]+/g, '')
+		.substr(0, 10);
+
+export default {
+    name: 'drawio-preview',
+    props: {
+        filename: { type: String, default: null },
+        fileid: { type: Number, default: null },
+        isEmbedded: { type: Boolean, default: false },
+    },
+    render(createElement) {
+        this.$emit('update:loaded', true);
+        const rnd = generateRandom();
+        const imgUrl = `/index.php/core/preview?fileId=${this.fileid}&x=1000&y=1000&a=1&${rnd}`;
+        const padding = 15;
+
+        this.$nextTick(() => {
+            const el = document.getElementById(
+                `drawoi-${rnd}`,
+            );
+            el.addEventListener('click', () => {
+                this.openEditor();
+            });
+        });
+        const img = new Image();
+        img.onload = function() {
+            const el = document.getElementById(
+                `drawoi-${rnd}`,
+            );
+            const img = document.createElement('div');
+            img.style.height = `${this.height}px`;
+            img.style.width = `100%`;
+            img.style.background = `url(${imgUrl}) no-repeat center/contain`;
+            img.style.cursor = 'pointer',
+            img.style.margin = `${padding}px`,
+
+            el.appendChild(img);
+            const h = this.height + padding * 2;
+            el.style.height = `${h}px`;
+            el.style.minHeight = `${h}px`;
+        }
+        img.src = imgUrl;
+        return createElement(
+            'div',
+            {
+                attrs: { id: `drawoi-${rnd}` },
+                style: {
+                    background: 'white',
+                    cursor: 'pointer',
+                },
+                class: [
+                    'drawio',
+                    'drawio-viewer__embedding',
+                ],
+            },
+            '',
+        );
+    },
+    computed: {
+        isWB() {
+            var extension = this.filename.substr(this.filename.lastIndexOf('.') + 1).toLowerCase();
+           return String(extension == 'dwb');
+        },
+    },
+    mounted() {
+        if (!this.isEmbedded) {
+            this.openEditor();
+        }
+    },
+    methods: {
+        openEditor() {
+            OCA.DrawIO.OpenEditor(this.fileid, this.isWB);
+        },
+    },
+};