feat(editor): Add support for collapsible sections

cypress/e2e/nodes/Details.spec.js

@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { initUserAndFiles, randUser } from '../../utils/index.js'
+
+const user = randUser()
+const fileName = 'empty.md'
+
+describe('Details plugin', () => {
+	before(() => {
+		initUserAndFiles(user)
+	})
+
+	beforeEach(() => {
+		cy.login(user)
+
+		cy.isolateTest({
+			sourceFile: fileName,
+		})
+
+		return cy.openFile(fileName, { force: true })
+	})
+
+	it('inserts and removes details', () => {
+		cy.getContent()
+			.type('content{selectAll}')
+
+		cy.getMenuEntry('details').click()
+
+		cy.getContent()
+			.find('div[data-text-el="details"]')
+			.should('exist')
+
+		cy.getContent()
+			.type('summary')
+
+		cy.getContent()
+			.find('div[data-text-el="details"]')
+			.find('summary')
+			.should('contain', 'summary')
+
+		cy.getContent()
+			.find('div[data-text-el="details"]')
+			.find('.details-content')
+			.should('contain', 'content')
+
+		cy.getMenuEntry('details').click()
+
+		cy.getContent()
+			.find('div[data-text-el="details"]')
+			.should('not.exist')
+
+		cy.getContent()
+			.should('contain', 'content')
+	})
+})

package.json

@@ -123,6 +123,7 @@
     "@nextcloud/eslint-config": "^8.4.1",
     "@nextcloud/stylelint-config": "^3.0.1",
     "@nextcloud/vite-config": "^1.4.2",
+    "@types/markdown-it": "^13.0.2",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/test-utils": "^1.3.0 <2",
     "@vue/tsconfig": "^0.5.1",

src/components/Editor/PreviewOptions.vue

@@ -70,4 +70,9 @@ div[data-text-preview-options] {
 	left: -44px;
 }
 
+// Inside details, button needs to be shifted further
+.details-content div[data-text-preview-options] {
+	left: calc(-44px - 24px);
+}
+
 </style>

src/components/Menu/entries.js

@@ -28,6 +28,7 @@ import {
 	Paperclip,
 	Positive,
 	Table,
+	UnfoldMoreHorizontal,
 	Warn,
 } from '../icons.js'
 import EmojiPickerAction from './EmojiPickerAction.vue'
@@ -322,6 +323,16 @@ export default [
 		},
 		priority: 17,
 	},
+	{
+		key: 'details',
+		label: t('text', 'Details'),
+		isActive: 'details',
+		icon: UnfoldMoreHorizontal,
+		action: (command) => {
+			return command.toggleDetails()
+		},
+		priority: 18,
+	},
 	{
 		key: 'emoji-picker',
 		label: t('text', 'Insert emoji'),

src/components/icons.js

@@ -53,6 +53,7 @@ import MDI_TableAddRowBefore from 'vue-material-design-icons/TableRowPlusBefore.
 import MDI_TableSettings from 'vue-material-design-icons/TableCog.vue'
 import MDI_TrashCan from 'vue-material-design-icons/TrashCan.vue'
 import MDI_Undo from 'vue-material-design-icons/ArrowULeftTop.vue'
+import MDI_UnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 import MDI_Upload from 'vue-material-design-icons/Upload.vue'
 import MDI_Warn from 'vue-material-design-icons/Alert.vue'
 import MDI_Web from 'vue-material-design-icons/Web.vue'
@@ -131,6 +132,7 @@ export const TableSettings = makeIcon(MDI_TableSettings)
 export const TrashCan = makeIcon(MDI_TrashCan)
 export const TranslateVariant = makeIcon(MDI_TranslateVariant)
 export const Undo = makeIcon(MDI_Undo)
+export const UnfoldMoreHorizontal = makeIcon(MDI_UnfoldMoreHorizontal)
 export const Upload = makeIcon(MDI_Upload)
 export const Warn = makeIcon(MDI_Warn)
 export const Web = makeIcon(MDI_Web)

src/extensions/RichText.js

@@ -13,6 +13,7 @@ import Callouts from './../nodes/Callouts.js'
 import CharacterCount from '@tiptap/extension-character-count'
 import Code from '@tiptap/extension-code'
 import CodeBlock from './../nodes/CodeBlock.js'
+import Details from './../nodes/Details.js'
 import Document from '@tiptap/extension-document'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import EditableTable from './../nodes/EditableTable.js'
@@ -79,6 +80,7 @@ export default Extension.create({
 				lowlight,
 				defaultLanguage: 'plaintext',
 			}),
+			Details,
 			BulletList,
 			HorizontalRule,
 			OrderedList,

src/markdownit/details.ts

@@ -0,0 +1,122 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type MarkdownIt from 'markdown-it'
+import type StateBlock from 'markdown-it/lib/rules_block/state_block'
+import type Token from 'markdown-it/lib/token'
+
+const DETAILS_START_REGEX = /^<details>\s*$/
+const DETAILS_END_REGEX = /^<\/details>\s*$/
+const SUMMARY_REGEX = /(?<=^<summary>).*(?=<\/summary>\s*$)/
+
+function parseDetails(state: StateBlock, startLine: number, endLine: number, silent: boolean) {
+	// let autoClosedBlock = false
+	let start = state.bMarks[startLine] + state.tShift[startLine]
+	let max = state.eMarks[startLine]
+
+	// Details block start
+	if (!state.src.slice(start, max).match(DETAILS_START_REGEX)) {
+		return false
+	}
+
+	// Since start is found, we can report success here in validation mode
+	if (silent) {
+		return true
+	}
+
+	let detailsFound = false
+	let detailsSummary = null
+	let nestedCount = 0
+	let nextLine = startLine
+	for (;;) {
+		nextLine++
+		if (nextLine >= endLine) {
+			break
+		}
+
+		start = state.bMarks[nextLine] + state.tShift[nextLine]
+		max = state.eMarks[nextLine]
+
+		// Details summary
+		const m = state.src.slice(start, max).match(SUMMARY_REGEX)
+		if (m && detailsSummary === null) {
+			// Only set `detailsSummary` the first time
+			// Ignore future summary tags (in nested/broken details)
+			detailsSummary = m[0].trim()
+			continue
+		}
+
+		// Nested details
+		if (state.src.slice(start, max).match(DETAILS_START_REGEX)) {
+			nestedCount++
+		}
+
+		// Details block end
+		if (!state.src.slice(start, max).match(DETAILS_END_REGEX)) {
+			continue
+		}
+
+		// Regard nested details blocks
+		if (nestedCount > 0) {
+			nestedCount--
+		} else {
+			detailsFound = true
+			break
+		}
+	}
+
+	if (!detailsFound || detailsSummary === null) {
+		return false
+	}
+
+	const oldParent = state.parentType
+	const oldLineMax = state.lineMax
+	state.parentType = 'reference'
+
+	// This will prevent lazy continuations from ever going past our end marker
+	state.lineMax = nextLine;
+
+	// Push tokens to the state
+
+	let token = state.push('details_open', 'details', 1)
+	token.block = true
+	token.info = detailsSummary
+	token.map = [ startLine, nextLine ]
+
+	token = state.push('details_summary', 'summary', 1)
+	token.block = false
+
+	// Parse and push summary to preserve markup
+	let tokens: Token[] = []
+	state.md.inline.parse(detailsSummary, state.md, state.env, tokens)
+	for (const t of tokens) {
+		token = state.push(t.type, t.tag, t.nesting)
+		token.block = t.block
+		token.markup = t.markup
+		token.content = t.content
+	}
+
+	token = state.push('details_summary', 'summary', -1)
+
+	state.md.block.tokenize(state, startLine + 2, nextLine);
+
+	token = state.push('details_close', 'details', -1)
+	token.block = true
+
+	state.parentType = oldParent
+	state.lineMax = oldLineMax
+	state.line = nextLine + 1
+
+	return true
+}
+
+/**
+ * @param {object} md Markdown object
+ */
+export default function details(md: MarkdownIt) {
+	md.block.ruler.before('fence', 'details', parseDetails, {
+		alt: [ 'paragraph', 'reference', 'blockquote', 'list' ],
+	})
+}

src/markdownit/index.js

@@ -9,6 +9,7 @@ import markdownitMentions from '@quartzy/markdown-it-mentions'
 import underline from './underline.js'
 import splitMixedLists from './splitMixedLists.js'
 import callouts from './callouts.js'
+import details from './details.ts'
 import preview from './preview.js'
 import hardbreak from './hardbreak.js'
 import keepSyntax from './keepSyntax.js'
@@ -25,6 +26,7 @@ const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.use(underline)
 	.use(hardbreak)
 	.use(callouts)
+	.use(details)
 	.use(preview)
 	.use(keepSyntax)
 	.use(markdownitMentions)

src/nodes/CodeBlockView.vue

@@ -229,6 +229,7 @@ export default {
 <style lang="scss" scoped>
 .code-block {
 	background-color: var(--color-background-dark);
+	position: relative;
 }
 
 .code-block-header {