From e80ba58805ad5c5df6cac52cf255bbdc4ec6c467 Mon Sep 17 00:00:00 2001 From: Nick Perez Date: Tue, 28 Jan 2025 16:57:23 +0100 Subject: [PATCH] test: update examples for trailing-node and selection extension (#6065) --- .../TrailingNode/Vue/trailing-node.ts | 70 -------------- .../Selection/React}/index.html | 0 .../Extensions/Selection/React/index.spec.js | 9 ++ .../src/Extensions/Selection/React/index.tsx | 37 ++++++++ .../Extensions/Selection/React/styles.scss | 33 +++++++ demos/src/Extensions/Selection/Vue/index.html | 0 .../Extensions/Selection/Vue/index.spec.js | 9 ++ demos/src/Extensions/Selection/Vue/index.vue | 88 ++++++++++++++++++ .../Extensions/TrailingNode/React/index.html | 0 .../Extensions/TrailingNode/React/index.tsx | 23 +++++ .../Extensions/TrailingNode/React/styles.scss | 92 +++++++++++++++++++ .../Extensions/TrailingNode/Vue/index.html | 0 .../TrailingNode/Vue/index.vue | 16 ++-- 13 files changed, 301 insertions(+), 76 deletions(-) delete mode 100644 demos/src/Experiments/TrailingNode/Vue/trailing-node.ts rename demos/src/{Experiments/TrailingNode/Vue => Extensions/Selection/React}/index.html (100%) create mode 100644 demos/src/Extensions/Selection/React/index.spec.js create mode 100644 demos/src/Extensions/Selection/React/index.tsx create mode 100644 demos/src/Extensions/Selection/React/styles.scss create mode 100644 demos/src/Extensions/Selection/Vue/index.html create mode 100644 demos/src/Extensions/Selection/Vue/index.spec.js create mode 100644 demos/src/Extensions/Selection/Vue/index.vue create mode 100644 demos/src/Extensions/TrailingNode/React/index.html create mode 100644 demos/src/Extensions/TrailingNode/React/index.tsx create mode 100644 demos/src/Extensions/TrailingNode/React/styles.scss create mode 100644 demos/src/Extensions/TrailingNode/Vue/index.html rename demos/src/{Experiments => Extensions}/TrailingNode/Vue/index.vue (74%) diff --git a/demos/src/Experiments/TrailingNode/Vue/trailing-node.ts b/demos/src/Experiments/TrailingNode/Vue/trailing-node.ts deleted file mode 100644 index ce52dedcc4..0000000000 --- a/demos/src/Experiments/TrailingNode/Vue/trailing-node.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Extension } from '@tiptap/core' -import { Plugin, PluginKey } from '@tiptap/pm/state' - -// @ts-ignore -function nodeEqualsType({ types, node }) { - return (Array.isArray(types) && types.includes(node.type)) || node.type === types -} - -/** - * Extension based on: - * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js - * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts - */ - -export interface TrailingNodeOptions { - node: string - notAfter: string[] -} - -export const TrailingNode = Extension.create({ - name: 'trailingNode', - - addOptions() { - return { - node: 'paragraph', - notAfter: ['paragraph'], - } - }, - - addProseMirrorPlugins() { - const plugin = new PluginKey(this.name) - const disabledNodes = Object.entries(this.editor.schema.nodes) - .map(([, value]) => value) - .filter(node => this.options.notAfter.includes(node.name)) - - return [ - new Plugin({ - key: plugin, - appendTransaction: (_, __, state) => { - const { doc, tr, schema } = state - const shouldInsertNodeAtEnd = plugin.getState(state) - const endPosition = doc.content.size - const type = schema.nodes[this.options.node] - - if (!shouldInsertNodeAtEnd) { - return - } - - return tr.insert(endPosition, type.create()) - }, - state: { - init: (_, state) => { - const lastNode = state.tr.doc.lastChild - - return !nodeEqualsType({ node: lastNode, types: disabledNodes }) - }, - apply: (tr, value) => { - if (!tr.docChanged) { - return value - } - - const lastNode = tr.doc.lastChild - - return !nodeEqualsType({ node: lastNode, types: disabledNodes }) - }, - }, - }), - ] - }, -}) diff --git a/demos/src/Experiments/TrailingNode/Vue/index.html b/demos/src/Extensions/Selection/React/index.html similarity index 100% rename from demos/src/Experiments/TrailingNode/Vue/index.html rename to demos/src/Extensions/Selection/React/index.html diff --git a/demos/src/Extensions/Selection/React/index.spec.js b/demos/src/Extensions/Selection/React/index.spec.js new file mode 100644 index 0000000000..4021043e39 --- /dev/null +++ b/demos/src/Extensions/Selection/React/index.spec.js @@ -0,0 +1,9 @@ +context('/src/Extensions/Selection/React/', () => { + beforeEach(() => { + cy.visit('/src/Extensions/Selection/React/') + }) + + it('should have class', () => { + cy.get('.tiptap span:first').should('have.class', 'selection') + }) +}) diff --git a/demos/src/Extensions/Selection/React/index.tsx b/demos/src/Extensions/Selection/React/index.tsx new file mode 100644 index 0000000000..a227481dfe --- /dev/null +++ b/demos/src/Extensions/Selection/React/index.tsx @@ -0,0 +1,37 @@ +import './styles.scss' + +import Code from '@tiptap/extension-code' +import Document from '@tiptap/extension-document' +import { BulletList, ListItem } from '@tiptap/extension-list' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import { Selection } from '@tiptap/extensions' +import { EditorContent, useEditor } from '@tiptap/react' +import React from 'react' + +export default () => { + const editor = useEditor({ + extensions: [ + Document, + Paragraph, + Text, + Selection.configure({ + className: 'selection', + }), + Code, + BulletList, + ListItem, + ], + content: ` +

+ The selection extension adds a class to the selection when the editor is blurred. That enables you to visually preserve the selection even though the editor is blurred. By default, it’ll add .selection classname. +

+ `, + + onCreate: ctx => { + ctx.editor.commands.setTextSelection({ from: 5, to: 30 }) + }, + }) + + return +} diff --git a/demos/src/Extensions/Selection/React/styles.scss b/demos/src/Extensions/Selection/React/styles.scss new file mode 100644 index 0000000000..8f9811c03d --- /dev/null +++ b/demos/src/Extensions/Selection/React/styles.scss @@ -0,0 +1,33 @@ +/* Basic editor styles */ +.tiptap { + :first-child { + margin-top: 0; + } + + /* List styles */ + ul, + ol { + padding: 0 1rem; + margin: 1.25rem 1rem 1.25rem 0.4rem; + + li p { + margin-top: 0.25em; + margin-bottom: 0.25em; + } + } + + /* Code and preformatted text styles */ + code { + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--black); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + + // Selection styles + .selection { + box-shadow: 0 0 0 2px var(--purple); + } +} diff --git a/demos/src/Extensions/Selection/Vue/index.html b/demos/src/Extensions/Selection/Vue/index.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/src/Extensions/Selection/Vue/index.spec.js b/demos/src/Extensions/Selection/Vue/index.spec.js new file mode 100644 index 0000000000..0ffdabcf01 --- /dev/null +++ b/demos/src/Extensions/Selection/Vue/index.spec.js @@ -0,0 +1,9 @@ +context('/src/Extensions/Selection/Vue/', () => { + beforeEach(() => { + cy.visit('/src/Extensions/Selection/Vue/') + }) + + it('should have class', () => { + cy.get('.tiptap span:first').should('have.class', 'selection') + }) +}) diff --git a/demos/src/Extensions/Selection/Vue/index.vue b/demos/src/Extensions/Selection/Vue/index.vue new file mode 100644 index 0000000000..4b8d79945b --- /dev/null +++ b/demos/src/Extensions/Selection/Vue/index.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/demos/src/Extensions/TrailingNode/React/index.html b/demos/src/Extensions/TrailingNode/React/index.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/src/Extensions/TrailingNode/React/index.tsx b/demos/src/Extensions/TrailingNode/React/index.tsx new file mode 100644 index 0000000000..bc11c2cdd9 --- /dev/null +++ b/demos/src/Extensions/TrailingNode/React/index.tsx @@ -0,0 +1,23 @@ +import './styles.scss' + +import Code from '@tiptap/extension-code' +import CodeBlock from '@tiptap/extension-code-block' +import Document from '@tiptap/extension-document' +import { BulletList, ListItem } from '@tiptap/extension-list' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import { TrailingNode } from '@tiptap/extensions' +import { EditorContent, useEditor } from '@tiptap/react' +import React from 'react' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, TrailingNode, Code, BulletList, ListItem, CodeBlock], + content: ` +

A paragraph

+ 
There should be a paragraph right after this one, because it is a code-block
+ `, + }) + + return +} diff --git a/demos/src/Extensions/TrailingNode/React/styles.scss b/demos/src/Extensions/TrailingNode/React/styles.scss new file mode 100644 index 0000000000..47018d0be0 --- /dev/null +++ b/demos/src/Extensions/TrailingNode/React/styles.scss @@ -0,0 +1,92 @@ + +/* Basic editor styles */ +.tiptap { + :first-child { + margin-top: 0; + } + + /* List styles */ + ul, + ol { + padding: 0 1rem; + margin: 1.25rem 1rem 1.25rem 0.4rem; + + li p { + margin-top: 0.25em; + margin-bottom: 0.25em; + } + } + + /* Heading styles */ + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.1; + margin-top: 2.5rem; + text-wrap: pretty; + } + + h1, + h2 { + margin-top: 3.5rem; + margin-bottom: 1.5rem; + } + + h1 { + font-size: 1.4rem; + } + + h2 { + font-size: 1.2rem; + } + + h3 { + font-size: 1.1rem; + } + + h4, + h5, + h6 { + font-size: 1rem; + } + + /* Code and preformatted text styles */ + code { + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--black); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + pre { + background: var(--black); + border-radius: 0.5rem; + color: var(--white); + font-family: 'JetBrainsMono', monospace; + margin: 1.5rem 0; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } + } + + blockquote { + border-left: 3px solid var(--gray-3); + margin: 1.5rem 0; + padding-left: 1rem; + } + + hr { + border: none; + border-top: 1px solid var(--gray-2); + margin: 2rem 0; + } +} diff --git a/demos/src/Extensions/TrailingNode/Vue/index.html b/demos/src/Extensions/TrailingNode/Vue/index.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demos/src/Experiments/TrailingNode/Vue/index.vue b/demos/src/Extensions/TrailingNode/Vue/index.vue similarity index 74% rename from demos/src/Experiments/TrailingNode/Vue/index.vue rename to demos/src/Extensions/TrailingNode/Vue/index.vue index 43725b0363..fdf5414b42 100644 --- a/demos/src/Experiments/TrailingNode/Vue/index.vue +++ b/demos/src/Extensions/TrailingNode/Vue/index.vue @@ -5,11 +5,15 @@