Skip to content

Conversation

@pbirrer
Copy link

@pbirrer pbirrer commented Aug 22, 2025

This PR integrates the new attachment support from nextcloud/text into nextcloud-drawio.

Changes

  • Attachment support:
    • Adapted nextcloud-drawio to work with the new Text editor attachment feature
    • Enables inserting .drawio files directly from the Text editor as attachments.
  • File previews:
    • Added a preview image that will be displayed inside Nextcloud Text when referencing a draw.io file.
  • Mimetype registration:
    • Updated the way draw.io files register their mimetype to be available to other nextcloud apps via template manager.

@davidjgraph
Copy link
Contributor

Please confirm this is manually written code, not AI generated.

@pbirrer
Copy link
Author

pbirrer commented Aug 22, 2025

Hey @davidjgraph, yes, this is indeed manually written code and may need some refinement 😄

@rvjr
Copy link

rvjr commented Sep 8, 2025

Please confirm this is manually written code, not AI generated.

@davidjgraph just for the context: we worked on the attachment editing feature for NextCloud (see nextcloud/text#6676). The PR here basically makes the draw.io plugin behave the same way as the NextCloud whiteboard app. Which is very neat for creating rich documents with diagrams; and the diagrams are integrated into the document as attachments. The basic functionality is laid out in my comment here: nextcloud/collectives#615 (comment). With draw.io installed it simply shows "Create new draw.io diagram" and launches draw.io to edit the attachment.
grafik

@rvjr
Copy link

rvjr commented Sep 8, 2025

Here is how it works with draw.io
drawio-att-edit

The main point is to have the diagram as attachment to the markdown doc, not as separate file, to not clutter the surrounding folder with the diagram files.

@davidjgraph davidjgraph requested a review from Copilot October 25, 2025 15:13
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds attachment support for draw.io files within the Nextcloud Text editor by integrating with Nextcloud's new attachment feature. It enables users to insert and preview draw.io diagrams directly in text documents.

Key changes:

  • Implemented a preview component for rendering draw.io file thumbnails in the Text editor
  • Added template file creator registration to make draw.io mimetypes available to other Nextcloud apps
  • Enhanced editor navigation to support files stored in Text attachment directories

Reviewed Changes

Copilot reviewed 6 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
src/viewer.js New preview component for displaying draw.io file thumbnails with click-to-edit functionality
src/main.js Registered the preview component with OCA.Viewer and refactored initialization to remove new file menu registration
src/editor.js Added logic to detect and handle files in Text attachment directories for proper navigation
package.json Added @nextcloud/browserslist-config dependency
lib/Listeners/RegisterTemplateCreatorListener.php New event listener for registering draw.io file templates with Nextcloud's template manager
lib/AppInfo/Application.php Registered the template creator listener and added APP_ID constant

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.


this.$nextTick(() => {
const el = document.getElementById(
`drawoi-${rnd}`,
Copy link

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Corrected spelling of 'drawoi' to 'drawio'.

Copilot uses AI. Check for mistakes.
const img = new Image();
img.onload = function() {
const el = document.getElementById(
`drawoi-${rnd}`,
Copy link

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Corrected spelling of 'drawoi' to 'drawio'.

Copilot uses AI. Check for mistakes.
return createElement(
'div',
{
attrs: { id: `drawoi-${rnd}` },
Copy link

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Corrected spelling of 'drawoi' to 'drawio'.

Copilot uses AI. Check for mistakes.
img.style.height = `${this.height}px`;
img.style.width = `100%`;
img.style.background = `url(${imgUrl}) no-repeat center/contain`;
img.style.cursor = 'pointer',
Copy link

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Syntax error: using comma instead of semicolon. This line should end with a semicolon to be consistent with other property assignments and to avoid potential issues.

Suggested change
img.style.cursor = 'pointer',
img.style.cursor = 'pointer';

Copilot uses AI. Check for mistakes.
computed: {
isWB() {
var extension = this.filename.substr(this.filename.lastIndexOf('.') + 1).toLowerCase();
return String(extension == 'dwb');
Copy link

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using loose equality (==) and unnecessary String() conversion. The comparison should use strict equality (===) and String() wrapper is redundant since the result will already be a boolean.

Suggested change
return String(extension == 'dwb');
return extension === 'dwb';

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants