From e90934aa963ccab8c96e93a87cabfb45298bccd1 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 22:16:18 +0100 Subject: [PATCH 1/5] add more content --- docs/src/demos/Examples/TodoApp/index.spec.js | 5 ++ docs/src/demos/Examples/TodoApp/index.vue | 70 +++++++++++++++++++ docs/src/demos/Nodes/TaskItem/index.spec.js | 5 ++ docs/src/demos/Nodes/TaskItem/index.vue | 66 +++++++++++++++++ docs/src/docPages/api/keyboard-shortcuts.md | 7 +- docs/src/docPages/api/nodes/task-item.md | 7 +- docs/src/docPages/examples/todo-app.md | 3 + docs/src/links.yaml | 46 +----------- 8 files changed, 163 insertions(+), 46 deletions(-) create mode 100644 docs/src/demos/Examples/TodoApp/index.spec.js create mode 100644 docs/src/demos/Examples/TodoApp/index.vue create mode 100644 docs/src/demos/Nodes/TaskItem/index.spec.js create mode 100644 docs/src/demos/Nodes/TaskItem/index.vue create mode 100644 docs/src/docPages/examples/todo-app.md diff --git a/docs/src/demos/Examples/TodoApp/index.spec.js b/docs/src/demos/Examples/TodoApp/index.spec.js new file mode 100644 index 00000000..ee7cbc0b --- /dev/null +++ b/docs/src/demos/Examples/TodoApp/index.spec.js @@ -0,0 +1,5 @@ +context('/examples/todo-app', () => { + before(() => { + cy.visit('/examples/todo-app') + }) +}) diff --git a/docs/src/demos/Examples/TodoApp/index.vue b/docs/src/demos/Examples/TodoApp/index.vue new file mode 100644 index 00000000..9ebd584a --- /dev/null +++ b/docs/src/demos/Examples/TodoApp/index.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/docs/src/demos/Nodes/TaskItem/index.spec.js b/docs/src/demos/Nodes/TaskItem/index.spec.js new file mode 100644 index 00000000..eed0a538 --- /dev/null +++ b/docs/src/demos/Nodes/TaskItem/index.spec.js @@ -0,0 +1,5 @@ +context('/api/nodes/task-item', () => { + before(() => { + cy.visit('/api/nodes/task-item') + }) +}) diff --git a/docs/src/demos/Nodes/TaskItem/index.vue b/docs/src/demos/Nodes/TaskItem/index.vue new file mode 100644 index 00000000..db0385f3 --- /dev/null +++ b/docs/src/demos/Nodes/TaskItem/index.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/docs/src/docPages/api/keyboard-shortcuts.md b/docs/src/docPages/api/keyboard-shortcuts.md index d4db84bf..923e509c 100644 --- a/docs/src/docPages/api/keyboard-shortcuts.md +++ b/docs/src/docPages/api/keyboard-shortcuts.md @@ -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 diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md index be6e772c..97aab620 100644 --- a/docs/src/docPages/api/nodes/task-item.md +++ b/docs/src/docPages/api/nodes/task-item.md @@ -1,4 +1,7 @@ # TaskItem +This extension renders a task item list element, which is a `
  • ` 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/) diff --git a/docs/src/docPages/examples/todo-app.md b/docs/src/docPages/examples/todo-app.md new file mode 100644 index 00000000..ef46ec77 --- /dev/null +++ b/docs/src/docPages/examples/todo-app.md @@ -0,0 +1,3 @@ +# Todo App + + diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 4d18b0b5..f4fe86da 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -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 From dd3f84c4e3f3dece3130297fa4d04ba62782b4bb Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 22:47:44 +0100 Subject: [PATCH 2/5] add content to the typography extension page --- .../demos/Extensions/Typography/index.spec.js | 53 +++++++++++++++++++ .../src/demos/Extensions/Typography/index.vue | 44 +++++++++++++++ .../src/docPages/api/extensions/typography.md | 14 ++++- docs/src/links.yaml | 1 - 4 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 docs/src/demos/Extensions/Typography/index.spec.js create mode 100644 docs/src/demos/Extensions/Typography/index.vue diff --git a/docs/src/demos/Extensions/Typography/index.spec.js b/docs/src/demos/Extensions/Typography/index.spec.js new file mode 100644 index 00000000..a5431526 --- /dev/null +++ b/docs/src/demos/Extensions/Typography/index.spec.js @@ -0,0 +1,53 @@ +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') + .find('p') + .should('contain', '— emDash') + }) + + it('should make an ellipsis from three dots', () => { + cy.get('.ProseMirror') + .type('... ellipsis') + .find('p') + .should('contain', '… ellipsis') + }) + + it('should make an correct open double quote', () => { + cy.get('.ProseMirror') + .type('"openDoubleQuote"') + .find('p') + .should('contain', '“openDoubleQuote') + }) + + it('should make an correct close double quote', () => { + cy.get('.ProseMirror') + .type('"closeDoubleQuote"') + .find('p') + .should('contain', 'closeDoubleQuote”') + }) + + it('should make an correct open single quote', () => { + cy.get('.ProseMirror') + .type("'openSingleQuote'") + .find('p') + .should('contain', '‘openSingleQuote’') + }) + + it('should make an correct close single quote', () => { + cy.get('.ProseMirror') + .type("'closeSingleQuote'") + .find('p') + .should('contain', 'closeSingleQuote’') + }) +}) diff --git a/docs/src/demos/Extensions/Typography/index.vue b/docs/src/demos/Extensions/Typography/index.vue new file mode 100644 index 00000000..f4b01a5e --- /dev/null +++ b/docs/src/demos/Extensions/Typography/index.vue @@ -0,0 +1,44 @@ + + + diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md index 2cd372ea..857da46c 100644 --- a/docs/src/docPages/api/extensions/typography.md +++ b/docs/src/docPages/api/extensions/typography.md @@ -1,5 +1,5 @@ # Typography - +This extension tries to help with common text patterns with the correct typographic character. ## Installation ```bash @@ -10,8 +10,18 @@ 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. | + ## Source code [packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/) ## Usage - + diff --git a/docs/src/links.yaml b/docs/src/links.yaml index f4fe86da..fe1323d3 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -136,7 +136,6 @@ draft: true - title: Typography link: /api/extensions/typography - draft: true - title: Commands link: /api/commands - title: Events From 44865a2ea75e04b94d0b145eaef38bc4878e00a7 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 22:47:55 +0100 Subject: [PATCH 3/5] clean up the tests --- docs/src/demos/Extensions/Typography/index.spec.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/src/demos/Extensions/Typography/index.spec.js b/docs/src/demos/Extensions/Typography/index.spec.js index a5431526..9fbcc41d 100644 --- a/docs/src/demos/Extensions/Typography/index.spec.js +++ b/docs/src/demos/Extensions/Typography/index.spec.js @@ -12,42 +12,36 @@ context('/api/extensions/typography', () => { it('should make an em dash from two dashes', () => { cy.get('.ProseMirror') .type('-- emDash') - .find('p') .should('contain', '— emDash') }) it('should make an ellipsis from three dots', () => { cy.get('.ProseMirror') .type('... ellipsis') - .find('p') .should('contain', '… ellipsis') }) it('should make an correct open double quote', () => { cy.get('.ProseMirror') .type('"openDoubleQuote"') - .find('p') .should('contain', '“openDoubleQuote') }) it('should make an correct close double quote', () => { cy.get('.ProseMirror') .type('"closeDoubleQuote"') - .find('p') .should('contain', 'closeDoubleQuote”') }) it('should make an correct open single quote', () => { cy.get('.ProseMirror') .type("'openSingleQuote'") - .find('p') .should('contain', '‘openSingleQuote’') }) it('should make an correct close single quote', () => { cy.get('.ProseMirror') .type("'closeSingleQuote'") - .find('p') .should('contain', 'closeSingleQuote’') }) }) From 7a7e51757745eb2dd219b167cadf8d43ee30bde6 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 22:50:07 +0100 Subject: [PATCH 4/5] add arrows to the typography extension --- docs/src/demos/Extensions/Typography/index.spec.js | 12 ++++++++++++ docs/src/docPages/api/extensions/typography.md | 4 +++- packages/extension-typography/index.ts | 6 ++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/src/demos/Extensions/Typography/index.spec.js b/docs/src/demos/Extensions/Typography/index.spec.js index 9fbcc41d..e677b455 100644 --- a/docs/src/demos/Extensions/Typography/index.spec.js +++ b/docs/src/demos/Extensions/Typography/index.spec.js @@ -44,4 +44,16 @@ context('/api/extensions/typography', () => { .type("'closeSingleQuote'") .should('contain', 'closeSingleQuote’') }) + + it('should make a leftwards arrow', () => { + cy.get('.ProseMirror') + .type('<- leftwardsArrow') + .should('contain', '← leftwardsArrow') + }) + + it('should make a rightwards arrow', () => { + cy.get('.ProseMirror') + .type('-> rightwardsArrow') + .should('contain', '→ rightwardsArrow') + }) }) diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md index 857da46c..fb007fa7 100644 --- a/docs/src/docPages/api/extensions/typography.md +++ b/docs/src/docPages/api/extensions/typography.md @@ -1,5 +1,5 @@ # Typography -This extension tries to help with common text patterns with the correct typographic character. +This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules. ## Installation ```bash @@ -19,6 +19,8 @@ yarn add @tiptap/typography | closeDoubleQuote | “Smart`”` closing double quotes. | | openSingleQuote | `‘`Smart’ opening single quotes. | | closeSingleQuote | ‘Smart`’` closing single quotes. | +| leftwardsArrow | Converts <‐ to an arrow `←`. | +| leftwardsArrow | Converts ‐> to an arrow `→`. | ## Source code [packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/) diff --git a/packages/extension-typography/index.ts b/packages/extension-typography/index.ts index 199b74ad..e1e68d08 100644 --- a/packages/extension-typography/index.ts +++ b/packages/extension-typography/index.ts @@ -6,8 +6,12 @@ import { closeDoubleQuote, openSingleQuote, closeSingleQuote, + InputRule, } from 'prosemirror-inputrules' +export const leftwardsArrow = new InputRule(/<-$/, '←') +export const rightwardsArrow = new InputRule(/->$/, '→') + const Typography = createExtension({ addInputRules() { return [ @@ -17,6 +21,8 @@ const Typography = createExtension({ closeDoubleQuote, openSingleQuote, closeSingleQuote, + leftwardsArrow, + rightwardsArrow, ] }, }) From 7fa5ad5db483e9e10c4aa2a5d2e2fc9ab964819b Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 23:06:59 +0100 Subject: [PATCH 5/5] add mooore typography rules --- .../demos/Extensions/Typography/index.spec.js | 62 ++++++++++++++++--- .../src/docPages/api/extensions/typography.md | 27 +++++--- packages/extension-typography/index.ts | 22 +++++-- 3 files changed, 87 insertions(+), 24 deletions(-) diff --git a/docs/src/demos/Extensions/Typography/index.spec.js b/docs/src/demos/Extensions/Typography/index.spec.js index e677b455..0ac01fcf 100644 --- a/docs/src/demos/Extensions/Typography/index.spec.js +++ b/docs/src/demos/Extensions/Typography/index.spec.js @@ -21,39 +21,81 @@ context('/api/extensions/typography', () => { .should('contain', '… ellipsis') }) - it('should make an correct open double quote', () => { + it('should make a correct open double quote', () => { cy.get('.ProseMirror') .type('"openDoubleQuote"') .should('contain', '“openDoubleQuote') }) - it('should make an correct close double quote', () => { + it('should make a correct close double quote', () => { cy.get('.ProseMirror') .type('"closeDoubleQuote"') .should('contain', 'closeDoubleQuote”') }) - it('should make an correct open single quote', () => { + it('should make a correct open single quote', () => { cy.get('.ProseMirror') .type("'openSingleQuote'") .should('contain', '‘openSingleQuote’') }) - it('should make an correct close single quote', () => { + it('should make a correct close single quote', () => { cy.get('.ProseMirror') .type("'closeSingleQuote'") .should('contain', 'closeSingleQuote’') }) - it('should make a leftwards arrow', () => { + it('should make a left arrow', () => { cy.get('.ProseMirror') - .type('<- leftwardsArrow') - .should('contain', '← leftwardsArrow') + .type('<- leftArrow') + .should('contain', '← leftArrow') }) - it('should make a rightwards arrow', () => { + it('should make a right arrow', () => { cy.get('.ProseMirror') - .type('-> rightwardsArrow') - .should('contain', '→ rightwardsArrow') + .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') }) }) diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md index fb007fa7..9092ed65 100644 --- a/docs/src/docPages/api/extensions/typography.md +++ b/docs/src/docPages/api/extensions/typography.md @@ -11,16 +11,23 @@ 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. | -| leftwardsArrow | Converts <‐ to an arrow `←`. | -| leftwardsArrow | Converts ‐> to an arrow `→`. | +| 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 <‐ to an arrow `←` . | +| rightArrow | Converts ‐> 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/) diff --git a/packages/extension-typography/index.ts b/packages/extension-typography/index.ts index e1e68d08..db1a5c10 100644 --- a/packages/extension-typography/index.ts +++ b/packages/extension-typography/index.ts @@ -9,8 +9,15 @@ import { InputRule, } from 'prosemirror-inputrules' -export const leftwardsArrow = new InputRule(/<-$/, '←') -export const rightwardsArrow = new InputRule(/->$/, '→') +export const leftArrow = new InputRule(/<-$/, '←') +export const rightArrow = new InputRule(/->$/, '→') +export const copyright = new InputRule(/\(c\)$/, '©') +export const registeredTrademark = new InputRule(/\(r\)$/, '®') +export const oneHalf = new InputRule(/1\/2$/, '½') +export const plusMinus = new InputRule(/\+\/-$/, '±') +export const notEqual = new InputRule(/!=$/, '≠') +export const laquo = new InputRule(/<<$/, '«') +export const raquo = new InputRule(/>>$/, '»') const Typography = createExtension({ addInputRules() { @@ -21,8 +28,15 @@ const Typography = createExtension({ closeDoubleQuote, openSingleQuote, closeSingleQuote, - leftwardsArrow, - rightwardsArrow, + leftArrow, + rightArrow, + copyright, + registeredTrademark, + oneHalf, + plusMinus, + notEqual, + laquo, + raquo, ] }, })