Merge pull request #3269 from nextcloud/fix/noid/invalid-relative-lin…

…k-rich-workspace Fix: relative link in RichWorkspace
nextcloud · Oct 27, 2022 · 7fd67d7 · 7fd67d7
2 parents f82828e + cf522aa
commit 7fd67d7
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 29 deletions.
diff --git a/cypress/e2e/workspace.spec.js b/cypress/e2e/workspace.spec.js
@@ -24,6 +24,7 @@ import { randHash } from '../utils/index.js'
 const randUser = randHash()
 
 describe('Workspace', function() {
+	let currentFolder
 
 	before(function() {
 		cy.nextcloudCreateUser(randUser, 'password')
@@ -33,11 +34,12 @@ describe('Workspace', function() {
 		cy.login(randUser, 'password').then(() => {
 			// isolate tests - each happens in its own folder
 			const retry = cy.state('test').currentRetry()
-			const folderName = retry
+
+			currentFolder = retry
 				? `${Cypress.currentTest.title} (${retry})`
 				: Cypress.currentTest.title
-			cy.createFolder(folderName)
-			cy.visit(`apps/files?dir=/${encodeURIComponent(folderName)}`)
+			cy.createFolder(currentFolder)
+			cy.visit(`apps/files?dir=/${encodeURIComponent(currentFolder)}`)
 		})
 	})
 
@@ -142,6 +144,44 @@ describe('Workspace', function() {
 			.contains('😀')
 	})
 
+	it.only('relative folder links', () => {
+		cy.createFolder(`${currentFolder}/sub-folder`)
+		cy.createFolder(`${currentFolder}/sub-folder/alpha`)
+
+		cy.uploadFile('test.md', 'text/markdown', `${currentFolder}/sub-folder/alpha/test.md`)
+
+		cy.openWorkspace()
+			.type('link me')
+			.type('{selectall}')
+
+		cy.getSubmenuEntry('insert-link', 'insert-link-file')
+			.click()
+
+		cy.get('#picker-filestable tr[data-entryname="sub-folder"]').click()
+		cy.get('#picker-filestable tr[data-entryname="alpha"]').click()
+		cy.get('#picker-filestable tr[data-entryname="test.md"]').click()
+		cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
+
+		cy.getEditor()
+			.find('a')
+			.should('have.attr', 'href')
+			.and('contains', `dir=/${currentFolder}/sub-folder/alpha`)
+			.and('contains', '#relPath=sub-folder/alpha/test.md')
+
+		cy.getEditor()
+			.find('a').click()
+
+		cy.getModal()
+			.find('.modal-header')
+			.contains('test.md')
+
+		cy.getModal()
+			.getEditor()
+			.contains('Hello world')
+
+		cy.getModal().find('button.header-close').click()
+	})
+
 	describe('callouts', () => {
 		const types = ['info', 'warn', 'error', 'success']
 

diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/files-modal.js b/js/files-modal.js
diff --git a/js/files-modal.js.map b/js/files-modal.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/EditorFactory.js b/src/EditorFactory.js
@@ -57,12 +57,13 @@ const loadSyntaxHighlight = async (language) => {
 	}
 }
 
-const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, session }) => {
+const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditing, session, relativePath }) => {
 	let richEditingExtensions = []
 	if (enableRichEditing) {
 		richEditingExtensions = [
 			Markdown,
 			RichText.configure({
+				relativePath,
 				extensions: [
 					EditableTable,
 					Mention.configure({

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -483,6 +483,7 @@ export default {
 			(this.isRichEditor ? Promise.resolve() : loadSyntaxHighlight(language))
 				.then(() => {
 					this.$editor = createEditor({
+						relativePath: this.relativePath,
 						session: this.currentSession,
 						content,
 						onCreate: ({ editor }) => {

diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
@@ -99,6 +99,7 @@ export default Extension.create({
 				...this.options.link,
 				openOnClick: true,
 				validate: href => /^https?:\/\//.test(href),
+				relativePath: this.options.relativePath,
 			}))
 		}
 		const additionalExtensionNames = this.options.extensions.map(e => e.name)

diff --git a/src/helpers/links.js b/src/helpers/links.js
@@ -50,7 +50,7 @@ const basedir = function(file) {
 		: file.slice(0, end + 1) // basedir('/toplevel') should return '/'
 }
 
-const domHref = function(node) {
+const domHref = function(node, relativePath) {
 	const ref = node.attrs.href
 	if (!ref) {
 		return ref
@@ -61,10 +61,11 @@ const domHref = function(node) {
 	if (ref.startsWith('#')) {
 		return ref
 	}
+
 	const match = ref.match(/^([^?]*)\?fileId=(\d+)/)
 	if (match) {
 		const [, relPath, id] = match
-		const currentDir = basedir(OCA.Viewer.file)
+		const currentDir = basedir(relativePath || OCA.Viewer.file)
 		const dir = absolutePath(currentDir, basedir(relPath))
 		if (relPath.length > 1 && relPath.endsWith('/')) {
 			// is directory

diff --git a/src/marks/Link.js b/src/marks/Link.js
@@ -30,6 +30,7 @@ const Link = TipTapLink.extend({
 		return {
 			...this.parent?.(),
 			onClick: openLink,
+			relativePath: null,
 		}
 	},
 
@@ -56,11 +57,15 @@ const Link = TipTapLink.extend({
 		},
 	],
 
-	renderHTML: ({ mark, HTMLAttributes }) => ['a', {
-		...mark.attrs,
-		href: domHref(mark),
-		rel: 'noopener noreferrer nofollow',
-	}, 0],
+	renderHTML(options) {
+		const { mark } = options
+
+		return ['a', {
+			...mark.attrs,
+			href: domHref(mark, this.options.relativePath),
+			rel: 'noopener noreferrer nofollow',
+		}, 0]
+	},
 
 	addProseMirrorPlugins() {
 		const plugins = this.parent()