From 998aa727f79abde7870718ab1932a165f9301c7b Mon Sep 17 00:00:00 2001
From: Vinicius Reis <vinicius.reis@nextcloud.com>
Date: Thu, 8 Sep 2022 15:40:05 -0300
Subject: [PATCH] =?UTF-8?q?=E2=8F=AA=EF=B8=8F=20Revert=20"Merge=20pull=20r?=
 =?UTF-8?q?equest=20#2841=20from=20nextcloud/feature/heading-anchors"=20ul?=
 =?UTF-8?q?til=20#2868=20be=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 0f2c48ea4c4822456f737b3c39b0c5f354b17df5, reversing
changes made to 9973d1fb5230d8c9fb46394a14fbdcc90d339a3a.
---
 cypress/e2e/outline.spec.js       |  74 ++++++++++++++++++
 cypress/e2e/sections.spec.js      | 124 ------------------------------
 src/nodes/Heading/HeadingView.vue | 114 ---------------------------
 src/nodes/Heading/index.js        |  15 ----
 4 files changed, 74 insertions(+), 253 deletions(-)
 create mode 100644 cypress/e2e/outline.spec.js
 delete mode 100644 cypress/e2e/sections.spec.js
 delete mode 100644 src/nodes/Heading/HeadingView.vue

diff --git a/cypress/e2e/outline.spec.js b/cypress/e2e/outline.spec.js
new file mode 100644
index 00000000000..b441a65d6b7
--- /dev/null
+++ b/cypress/e2e/outline.spec.js
@@ -0,0 +1,74 @@
+import { randHash } from '../utils/index.js'
+
+const currentUser = randHash()
+
+const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
+	.last()
+	.click({ force: true })
+
+const clickOutline = () => {
+	cy.getActionEntry('headings')
+		.click()
+
+	cy.get('.v-popper__wrapper .open').getActionEntry('outline')
+		.click()
+}
+
+const createMarkdown = (fileName, content) => {
+	return cy.createFile(fileName, content, 'text/markdown')
+		.then(refresh)
+}
+
+describe('Table of Contents', () => {
+	before(() => {
+		// Init user
+		cy.nextcloudCreateUser(currentUser, 'password')
+		cy.login(currentUser, 'password')
+	})
+
+	beforeEach(() => {
+		cy.login(currentUser, 'password')
+	})
+
+	it('sidebar toc', () => {
+		const fileName = 'toc.md'
+
+		createMarkdown(fileName, '# T1 \n ## T2 \n ### T3 \n #### T4 \n ##### T5 \n ###### T6')
+			.then(refresh)
+			.then(() => cy.openFile(fileName, { force: true }))
+			.then(clickOutline)
+
+		cy.getOutline()
+			.find('header')
+			.should('exist')
+
+		cy.getTOC()
+			.find('ul li')
+			.should('have.length', 6)
+		cy.getTOC()
+			.find('ul li')
+			.each((el, index) => {
+				cy.wrap(el)
+					.should('have.attr', 'data-toc-level')
+					.and('equal', String(index + 1))
+
+				cy.wrap(el)
+					.find('a')
+					.should('have.attr', 'href')
+					.and('equal', `#t${index + 1}`)
+			})
+	})
+
+	it('empty toc', () => {
+		const fileName = 'empty.md'
+
+		createMarkdown(fileName, '')
+			.then(refresh)
+			.then(() => cy.openFile(fileName, { force: true }))
+			.then(clickOutline)
+
+		cy.getOutline()
+			.find('ul')
+			.should('be.empty')
+	})
+})
diff --git a/cypress/e2e/sections.spec.js b/cypress/e2e/sections.spec.js
deleted file mode 100644
index 89a3991a343..00000000000
--- a/cypress/e2e/sections.spec.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { initUserAndFiles, randHash } from '../utils/index.js'
-
-const currentUser = randHash()
-const fileName = 'test.md'
-
-const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
-	.last()
-	.click({ force: true })
-
-const clickOutline = () => {
-	cy.getActionEntry('headings')
-		.click()
-
-	cy.get('.v-popper__wrapper .open').getActionEntry('outline')
-		.click()
-}
-
-describe('Content Sections', () => {
-	before(function() {
-		initUserAndFiles(currentUser, fileName)
-	})
-
-	beforeEach(function() {
-		cy.login(currentUser, 'password', {
-			onBeforeLoad(win) {
-				cy.stub(win, 'open')
-					.as('winOpen')
-			},
-		})
-
-		cy.openFile(fileName)
-			.then(() => cy.clearContent())
-	})
-
-	describe('Heading anchors', () => {
-		beforeEach(() => cy.clearContent())
-
-		it('Anchor exists', () => {
-			cy.getContent()
-				.type('# Heading\nText\n## Heading 2\nText\n## Heading 2')
-				.then(() => {
-					cy.getContent()
-						.find('a.anchor-link')
-						.should(($anchor) => {
-							expect($anchor).to.have.length(3)
-							expect($anchor.eq(0)).to.have.attr('href').and.equal('#heading')
-							expect($anchor.eq(1)).to.have.attr('href').and.equal('#heading-2')
-							expect($anchor.eq(2)).to.have.attr('href').and.equal('#heading-2--1')
-						})
-				})
-		})
-
-		it('Anchor scrolls into view', () => {
-			// Create link to top heading
-			cy.getContent()
-				.type('{selectAll}{backspace}move top\n{selectAll}')
-				.get('.menububble button[data-text-bubble-action="add-link"]')
-				.click({ force: true })
-				.then(() => {
-					cy.get('.menububble .menububble__input')
-						.type('{shift}')
-						.type('#top{enter}', { force: true })
-				})
-			// Insert content above link
-			cy.getContent()
-				.type('{moveToStart}\n{moveToStart}# top \n')
-				.type('lorem ipsum \n'.repeat(25))
-				.type('{moveToEnd}\n')
-				.find('h1#top')
-				.should('not.be.inViewport')
-			// Click link and test view moved to anchor
-			cy.getContent()
-				.find('a:not(.anchor-link)')
-				.click()
-				.then(() => {
-					cy.getContent()
-						.get('h1[id="top"]')
-						.should('be.inViewport')
-				})
-		})
-	})
-
-	describe('Table of Contents', () => {
-		beforeEach(() => cy.clearContent())
-
-		it('sidebar toc', () => {
-			cy.getContent()
-				.type('# T1 \n## T2 \n### T3 \n#### T4 \n##### T5 \n###### T6\n')
-				.then(refresh)
-				.then(() => cy.openFile(fileName, { force: true }))
-				.then(clickOutline)
-
-			cy.getOutline()
-				.find('header')
-				.should('exist')
-
-			cy.getTOC()
-				.find('ul li')
-				.should('have.length', 6)
-			cy.getTOC()
-				.find('ul li')
-				.each((el, index) => {
-					cy.wrap(el)
-						.should('have.attr', 'data-toc-level')
-						.and('equal', String(index + 1))
-
-					cy.wrap(el)
-						.find('a')
-						.should('have.attr', 'href')
-						.and('equal', `#t${index + 1}`)
-				})
-		})
-
-		it('empty toc', () => {
-			refresh()
-				.then(() => cy.openFile(fileName, { force: true }))
-				.then(clickOutline)
-
-			cy.getOutline()
-				.find('ul')
-				.should('be.empty')
-		})
-	})
-})
diff --git a/src/nodes/Heading/HeadingView.vue b/src/nodes/Heading/HeadingView.vue
deleted file mode 100644
index 7e8b28e832a..00000000000
--- a/src/nodes/Heading/HeadingView.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2022
-  -
-  - @license AGPL-3.0-or-later
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<NodeViewWrapper ref="content"
-		:as="domElement"
-		v-bind="node.attrs"
-		tabindex="-1">
-		<a aria-hidden="true"
-			class="anchor-link"
-			:href="href"
-			:title="t('text', 'Link to this section')"
-			@click.stop="click">{{ linkSymbol }}</a>
-		<NodeViewContent />
-	</NodeViewWrapper>
-</template>
-
-<script>
-import Vue from 'vue'
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import { useEditorMixin } from '../../components/Editor.provider.js'
-
-export default Vue.extend({
-	name: 'HeadingView',
-	components: {
-		NodeViewWrapper,
-		NodeViewContent,
-	},
-	mixins: [useEditorMixin],
-	props: {
-		node: {
-			type: Object,
-			required: true,
-		},
-		extension: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	computed: {
-		href() {
-			return `#${this.node.attrs.id}`
-		},
-		domElement() {
-			const hasLevel = this.extension.options.levels.includes(this.node.attrs.level)
-			const level = hasLevel ? this.node.attrs.level : this.extension.options.levels[0]
-			return `h${level}`
-		},
-		linkSymbol() {
-			return this.extension.options.linkSymbol
-		},
-		t: () => window.t,
-	},
-
-	methods: {
-		click() {
-			this.$refs.content.$el.scrollIntoView()
-			window.location.hash = this.href
-		},
-	},
-})
-</script>
-
-<style scoped lang="scss">
-div.ProseMirror {
-	/* Anchor links */
-	h1, h2, h3, h4, h5, h6 {
-		position: relative;
-		.anchor-link {
-			opacity: 0;
-			padding: 0;
-			left: -1em;
-			bottom: 0;
-			font-size: max(1em, 16px);
-			position: absolute;
-			text-decoration: none;
-			transition-duration: .15s;
-			transition-property: opacity;
-			transition-timing-function: cubic-bezier(.4,0,.2,1);
-		}
-
-		&:hover .anchor-link {
-			opacity: 0.5;
-		}
-	}
-
-	// Shrink clickable area of anchor permalinks while editing
-	&.ProseMirror-focused[contenteditable="true"] {
-		h1,h2,h3,h4,h5,h6 {
-			.anchor-link {
-				width: fit-content;
-			}
-		}
-	}
-}
-</style>
diff --git a/src/nodes/Heading/index.js b/src/nodes/Heading/index.js
index 63614da7ef1..ce7e73e7862 100644
--- a/src/nodes/Heading/index.js
+++ b/src/nodes/Heading/index.js
@@ -1,18 +1,8 @@
 import TipTapHeading from '@tiptap/extension-heading'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
 import debounce from 'debounce'
-
-import HeadingView from './HeadingView.vue'
 import { setHeadings, extractHeadings } from './extractor.js'
 
 const Heading = TipTapHeading.extend({
-	addOptions() {
-		return {
-			...this.parent?.(),
-			linkSymbol: '#',
-		}
-	},
-
 	addAttributes() {
 		return {
 			...this.parent(),
@@ -26,11 +16,6 @@ const Heading = TipTapHeading.extend({
 			},
 		}
 	},
-
-	addNodeView() {
-		return VueNodeViewRenderer(HeadingView)
-	},
-
 	addKeyboardShortcuts() {
 		return this.options.levels.reduce((items, level) => ({
 			...items,