Merge pull request #7521 from nextcloud/feat/tiptap_typography

Add typography extension

Author: max-nextcloud

cypress/e2e/inputRules.spec.js

@@ -0,0 +1,82 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { randUser } from '../utils/index.js'
+const user = randUser()
+
+const testPlainInputRule = (chars, expected) => {
+	cy.getContent().type(chars)
+	cy.getContent().should('contain', expected)
+	return cy.closeFile()
+}
+
+describe('input rules', () => {
+	before(() => {
+		cy.createUser(user)
+	})
+
+	beforeEach(() => {
+		cy.login(user)
+		cy.uploadTestFile()
+		cy.visit('/apps/files')
+		cy.openTestFile()
+	})
+
+	it('unordered list item', () => {
+		cy.getContent().type('* item')
+		cy.getContent().find('ul').find('li').should('contain', 'item')
+		cy.closeFile()
+	})
+
+	it('ordered list item', () => {
+		cy.getContent().type('1. item')
+		cy.getContent().find('ol').find('li').should('contain', 'item')
+		cy.closeFile()
+	})
+
+	it('task list item', () => {
+		cy.getContent().type('* [] item')
+		cy.getContent().find('ul').find('li').find('input[type="checkbox"]')
+		cy.getContent().find('ul').find('li').should('contain', 'item')
+		cy.closeFile()
+	})
+
+	it('blockquote', () => {
+		cy.getContent().type('> quote')
+		cy.getContent().find('blockquote').should('contain', 'uote')
+		cy.closeFile()
+	})
+
+	it('codeblock', () => {
+		cy.getContent().type('```{enter}code')
+		cy.getContent().find('pre').should('contain', 'code')
+		cy.closeFile()
+	})
+
+	it('inline code', () => {
+		cy.getContent().type('`code`')
+		cy.getContent().find('code').should('contain', 'code')
+		cy.closeFile()
+	})
+
+	it('link', () => {
+		cy.getContent().type('[link](https://nextcloud.com/)')
+		cy.getContent().find('a').should('contain', 'link')
+		cy.closeFile()
+	})
+
+	it('emoji', () => testPlainInputRule(':+1{enter}', '👍'))
+
+	it('typography: ellipsis', () => testPlainInputRule('...', '…'))
+	it('typography: copyright', () => testPlainInputRule('(c)', '©'))
+	it('typography: oneHalf', () => testPlainInputRule('1/2 ', '½'))
+	it('typography: superscriptTwo', () => testPlainInputRule('^2', '²'))
+	it('typography: emDash', () => testPlainInputRule('-- ', '—'))
+	it('typography: leftArrow', () => testPlainInputRule('<- ', '←'))
+	it('typography: rightArrow', () => testPlainInputRule('->', '→'))
+	it('typography: leftRightArrow', () => testPlainInputRule('<->', '↔'))
+	it('typography: leftRightDoubleArrow', () => testPlainInputRule('<=>', '⇔'))
+	it('typography: leftRightLongArrow', () => testPlainInputRule('<-->', '⟷'))
+})

cypress/e2e/openreadonly.spec.js

@@ -72,6 +72,10 @@ describe('Open read-only mode', function () {
 			cy.visit('/apps/files')
 		})
 
+		after(function () {
+			setReadOnlyMode(0)
+		})
+
 		it('Test read-only markdown file', function () {
 			cy.openFile('test.md')
 

package-lock.json

@@ -76,6 +76,7 @@
     "@tiptap/extension-task-item": "^2.26.1",
     "@tiptap/extension-task-list": "^2.26.1",
     "@tiptap/extension-text": "^2.26.1",
+    "@tiptap/extension-typography": "^2.26.1",
     "@tiptap/extension-underline": "^2.26.1",
     "@tiptap/pm": "^2.26.1",
     "@tiptap/suggestion": "^2.26.1",

package.json

@@ -25,6 +25,7 @@ import Markdown from './../extensions/Markdown.js'
 import Mention from './../extensions/Mention.js'
 import Search from './../extensions/Search.js'
 import TextDirection from './../extensions/TextDirection.ts'
+import Typography from './../extensions/Typography.ts'
 import BulletList from './../nodes/BulletList.js'
 import Callouts from './../nodes/Callouts.js'
 import CodeBlock from './../nodes/CodeBlock.js'
@@ -132,6 +133,7 @@ export default Extension.create({
 					'taskItem',
 				],
 			}),
+			Typography,
 		]
 		const additionalExtensionNames = this.options.extensions.map((e) => e.name)
 		return [

src/extensions/RichText.js

@@ -0,0 +1,94 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { textInputRule } from '@tiptap/core'
+import { Typography as TiptapTypography } from '@tiptap/extension-typography'
+
+export const emDash = () =>
+	textInputRule({
+		find: /(?<![<])-- $/,
+		replace: '— ',
+	})
+
+export const leftRightArrow = () =>
+	textInputRule({
+		find: /<->$/,
+		replace: '↔',
+	})
+
+export const leftArrow = () =>
+	textInputRule({
+		find: /<- $/,
+		replace: '← ',
+	})
+
+export const rightArrow = () =>
+	textInputRule({
+		find: /(?<![<-])->$/,
+		replace: '→',
+	})
+
+export const leftRightDoubleArrow = () =>
+	textInputRule({
+		find: /<=>$/,
+		replace: '⇔',
+	})
+
+export const leftDoubleArrow = () =>
+	textInputRule({
+		find: /<= $/,
+		replace: '⇐ ',
+	})
+
+export const rightDoubleArrow = () =>
+	textInputRule({
+		find: /(?<![<=])=>$/,
+		replace: '⇒',
+	})
+
+export const leftRightLongArrow = () =>
+	textInputRule({
+		find: /<-->$/,
+		replace: '⟷',
+	})
+
+export const leftLongArrow = () =>
+	textInputRule({
+		find: /<-- $/,
+		replace: '⟵ ',
+	})
+
+export const rightLongArrow = () =>
+	textInputRule({
+		find: /(?<!<)-->$/,
+		replace: '⟶',
+	})
+
+const Typography = TiptapTypography.extend({
+	addOptions() {
+		const options = { ...this.parent?.() }
+		options.emDash = false
+		options.leftArrow = false
+		options.rightArrow = false
+		return options
+	},
+
+	addInputRules() {
+		const rules = this.parent?.() || []
+		rules.push(emDash())
+		rules.push(leftArrow())
+		rules.push(rightArrow())
+		rules.push(leftRightArrow())
+		rules.push(leftRightDoubleArrow())
+		rules.push(leftDoubleArrow())
+		rules.push(rightDoubleArrow())
+		rules.push(leftRightLongArrow())
+		rules.push(leftLongArrow())
+		rules.push(rightLongArrow())
+		return rules
+	},
+})
+
+export default Typography