feat(Typography): Custom Typography extension

* Add input rules for ↔, ⇔, ⇐, ⇒, ⟷, ⟵, ⟶
* Adjust input rules for —, ←, → to not interfere with other input rules

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

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('<-->', '⟷'))
+})

src/extensions/RichText.js

@@ -16,7 +16,6 @@ import Gapcursor from '@tiptap/extension-gapcursor'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import ListItem from '@tiptap/extension-list-item'
 import Text from '@tiptap/extension-text'
-import Typography from '@tiptap/extension-typography'
 import MentionSuggestion from '../components/Suggestion/Mention/suggestions.js'
 import Heading from '../nodes/Heading.js'
 import EmojiSuggestion from './../components/Suggestion/Emoji/suggestions.js'
@@ -26,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'

src/extensions/Typography.ts

@@ -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