Merge branch 'main' into feature/new-highlight-extension
This commit is contained in:
Philipp Kühn
5
docs/src/demos/Examples/TodoApp/index.spec.js
Normal file
5
docs/src/demos/Examples/TodoApp/index.spec.js
Normal file
@@ -0,0 +1,5 @@
|
||||
context('/examples/todo-app', () => {
|
||||
before(() => {
|
||||
cy.visit('/examples/todo-app')
|
||||
})
|
||||
})
|
||||
70
docs/src/demos/Examples/TodoApp/index.vue
Normal file
70
docs/src/demos/Examples/TodoApp/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { EditorContent } from '@tiptap/vue'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import TaskList from '@tiptap/extension-task-list'
|
||||
import TaskItem from '@tiptap/extension-task-item'
|
||||
|
||||
const CustomDocument = Document.extend({
|
||||
content: 'taskList',
|
||||
})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
CustomDocument(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
TaskList(),
|
||||
TaskItem(),
|
||||
],
|
||||
content: `
|
||||
<ul data-type="task_list">
|
||||
<li data-type="taskItem" data-checked="true">A list item</li>
|
||||
<li data-type="taskItem" data-checked="false">And another one</li>
|
||||
</ul>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
ul[data-type="taskList"] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> input {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
docs/src/demos/Extensions/Typography/index.spec.js
Normal file
101
docs/src/demos/Extensions/Typography/index.spec.js
Normal file
@@ -0,0 +1,101 @@
|
||||
context('/api/extensions/typography', () => {
|
||||
before(() => {
|
||||
cy.visit('/api/extensions/typography')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.clearContent()
|
||||
})
|
||||
})
|
||||
|
||||
it('should make an em dash from two dashes', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('-- emDash')
|
||||
.should('contain', '— emDash')
|
||||
})
|
||||
|
||||
it('should make an ellipsis from three dots', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('... ellipsis')
|
||||
.should('contain', '… ellipsis')
|
||||
})
|
||||
|
||||
it('should make a correct open double quote', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('"openDoubleQuote"')
|
||||
.should('contain', '“openDoubleQuote')
|
||||
})
|
||||
|
||||
it('should make a correct close double quote', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('"closeDoubleQuote"')
|
||||
.should('contain', 'closeDoubleQuote”')
|
||||
})
|
||||
|
||||
it('should make a correct open single quote', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type("'openSingleQuote'")
|
||||
.should('contain', '‘openSingleQuote’')
|
||||
})
|
||||
|
||||
it('should make a correct close single quote', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type("'closeSingleQuote'")
|
||||
.should('contain', 'closeSingleQuote’')
|
||||
})
|
||||
|
||||
it('should make a left arrow', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('<- leftArrow')
|
||||
.should('contain', '← leftArrow')
|
||||
})
|
||||
|
||||
it('should make a right arrow', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('-> rightArrow')
|
||||
.should('contain', '→ rightArrow')
|
||||
})
|
||||
|
||||
it('should make a copyright sign', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('(c) copyright')
|
||||
.should('contain', '© copyright')
|
||||
})
|
||||
|
||||
it('should make a registered trademark sign', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('(r) registeredTrademark')
|
||||
.should('contain', '® registeredTrademark')
|
||||
})
|
||||
|
||||
it('should make a one half', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('1/2 oneHalfw')
|
||||
.should('contain', '½ oneHalf')
|
||||
})
|
||||
|
||||
it('should make a plus/minus sign', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('+/- plusMinus')
|
||||
.should('contain', '± plusMinus')
|
||||
})
|
||||
|
||||
it('should make a not equal sign', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('!= notEqual')
|
||||
.should('contain', '≠ notEqual')
|
||||
})
|
||||
|
||||
it('should make a laquo', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('<< laquorow')
|
||||
.should('contain', '« laquo')
|
||||
})
|
||||
|
||||
it('should make a raquo', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('>> raquorow')
|
||||
.should('contain', '» raquo')
|
||||
})
|
||||
})
|
||||
44
docs/src/demos/Extensions/Typography/index.vue
Normal file
44
docs/src/demos/Extensions/Typography/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import Typography from '@tiptap/extension-typography'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
Typography(),
|
||||
],
|
||||
content: `
|
||||
<p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
|
||||
<p>— Erik Spiekermann, December 2008</p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
5
docs/src/demos/Nodes/TaskItem/index.spec.js
Normal file
5
docs/src/demos/Nodes/TaskItem/index.spec.js
Normal file
@@ -0,0 +1,5 @@
|
||||
context('/api/nodes/task-item', () => {
|
||||
before(() => {
|
||||
cy.visit('/api/nodes/task-item')
|
||||
})
|
||||
})
|
||||
66
docs/src/demos/Nodes/TaskItem/index.vue
Normal file
66
docs/src/demos/Nodes/TaskItem/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { EditorContent } from '@tiptap/vue'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import TaskList from '@tiptap/extension-task-list'
|
||||
import TaskItem from '@tiptap/extension-task-item'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
TaskList(),
|
||||
TaskItem(),
|
||||
],
|
||||
content: `
|
||||
<ul data-type="task_list">
|
||||
<li data-type="taskItem" data-checked="true">A list item</li>
|
||||
<li data-type="taskItem" data-checked="false">And another one</li>
|
||||
</ul>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
ul[data-type="taskList"] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> input {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
# Typography
|
||||
|
||||
This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
@@ -10,8 +10,27 @@ npm install @tiptap/typography
|
||||
yarn add @tiptap/typography
|
||||
```
|
||||
|
||||
## Rules
|
||||
| Name | Description |
|
||||
| ------------------- | ---------------------------------------------------------------- |
|
||||
| emDash | Converts double dashes `--` to an emdash `—`. |
|
||||
| ellipsis | Converts three dots `...` to an ellipsis character `…` |
|
||||
| openDoubleQuote | `“`Smart” opening double quotes. |
|
||||
| closeDoubleQuote | “Smart`”` closing double quotes. |
|
||||
| openSingleQuote | `‘`Smart’ opening single quotes. |
|
||||
| closeSingleQuote | ‘Smart`’` closing single quotes. |
|
||||
| leftArrow | Converts <code><‐</code> to an arrow `←` . |
|
||||
| rightArrow | Converts <code>‐></code> to an arrow `→`. |
|
||||
| copyright | Converts `(c)` to a copyright sign `©`. |
|
||||
| registeredTrademark | Converts `(r)` to registered trademark sign `®`. |
|
||||
| oneHalf | Converts `1/2` to one half `½`. |
|
||||
| plusMinus | Converts `+/-` to plus/minus sign `±`. |
|
||||
| notEqual | Converts `!=` to a not equal sign `≠`. |
|
||||
| laquo | Converts `<<` to left-pointing double angle quotation mark `«`. |
|
||||
| raquo | Converts `>>` to right-pointing double angle quotation mark `»`. |
|
||||
|
||||
## Source code
|
||||
[packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Typography" highlight="" />
|
||||
<demo name="Extensions/Typography" highlight="12,31" />
|
||||
|
||||
@@ -5,11 +5,16 @@
|
||||
## Introduction
|
||||
tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
|
||||
|
||||
Funfact: A while ago, we built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
|
||||
Funfact: We built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
|
||||
|
||||
## Predefined keyboard shortcuts
|
||||
Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.
|
||||
|
||||
### Ideas
|
||||
* Task List ⌥⌘L (iaWriter)
|
||||
* Mark Task Complete ⌘. (iaWriter)
|
||||
* Text Highlight ⌘E (Paper)
|
||||
|
||||
### Essentials
|
||||
❌ = untested
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# TaskItem
|
||||
This extension renders a task item list element, which is a `<li>` tag with a `data-type` attribute set to `taskItem`. It also renders a checkbox inside the list element, which updates a `checked` attribute.
|
||||
|
||||
This extension doesn’t require any JavaScript framework, it’s based on plain JavaScript.
|
||||
|
||||
## Installation
|
||||
::: warning Use with TaskList
|
||||
@@ -18,8 +21,8 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
*None*
|
||||
## Keyboard shortcuts
|
||||
* New list item: `Enter`
|
||||
|
||||
## Source code
|
||||
[packages/extension-task-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)
|
||||
|
||||
3
docs/src/docPages/examples/todo-app.md
Normal file
3
docs/src/docPages/examples/todo-app.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Todo App
|
||||
|
||||
<demo name="Examples/TodoApp" highlight="" />
|
||||
@@ -18,59 +18,20 @@
|
||||
link: /examples/collaborative-editing
|
||||
- title: Markdown shortcuts
|
||||
link: /examples/markdown-shortcuts
|
||||
# - title: Menu Bubble
|
||||
# link: /examples/menu-bubble
|
||||
# draft: true
|
||||
# - title: Floating Menu
|
||||
# link: /examples/floating-menu
|
||||
# draft: true
|
||||
- title: Formatting
|
||||
link: /examples/formatting
|
||||
- title: Links
|
||||
link: /examples/links
|
||||
draft: true
|
||||
# - title: Images
|
||||
# link: /examples/images
|
||||
# draft: true
|
||||
# - title: Hiding Menu Bar
|
||||
# link: /examples/hiding-menu-bar
|
||||
# draft: true
|
||||
# - title: Todo List
|
||||
# link: /examples/todo-list
|
||||
# draft: true
|
||||
# - title: Tables
|
||||
# link: /examples/tables
|
||||
# draft: true
|
||||
# - title: Search and Replace
|
||||
# link: /examples/search-and-replace
|
||||
# draft: true
|
||||
# - title: Suggestions
|
||||
# link: /examples/suggestions
|
||||
# draft: true
|
||||
# - title: Code Highlighting
|
||||
# link: /examples/code-highlighting
|
||||
# draft: true
|
||||
- title: Todo App
|
||||
link: /examples/todo-app
|
||||
draft: true
|
||||
- title: History
|
||||
link: /examples/history
|
||||
- title: Read-only
|
||||
link: /examples/read-only
|
||||
# - title: Embeds
|
||||
# link: /examples/embeds
|
||||
# draft: true
|
||||
# - title: Placeholder
|
||||
# link: /examples/placeholder
|
||||
# draft: true
|
||||
- title: Focus
|
||||
link: /examples/focus
|
||||
# - title: Title
|
||||
# link: /examples/title
|
||||
# draft: true
|
||||
# - title: Trailing Paragraph
|
||||
# link: /examples/trailing-paragraph
|
||||
# draft: true
|
||||
# - title: Drag Handle
|
||||
# link: /examples/drag-handle
|
||||
# draft: true
|
||||
- title: Minimalist
|
||||
link: /examples/minimalist
|
||||
- title: Export HTML or JSON
|
||||
@@ -136,7 +97,6 @@
|
||||
link: /api/nodes/task-list
|
||||
- title: TaskItem
|
||||
link: /api/nodes/task-item
|
||||
draft: true
|
||||
- title: Text
|
||||
link: /api/nodes/text
|
||||
- title: Marks
|
||||
@@ -178,7 +138,6 @@
|
||||
draft: true
|
||||
- title: Typography
|
||||
link: /api/extensions/typography
|
||||
draft: true
|
||||
- title: Commands
|
||||
link: /api/commands
|
||||
- title: Events
|
||||
|
||||
Reference in New Issue
Block a user