Merge pull request #10 from ueberdosis/feature/add-paragraph-command

add paragraph command and keyboard shortcut

docs/src/demos/Examples/Basic/index.vue

@@ -28,6 +28,9 @@
       <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
         code block
       </button>
+      <button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+        paragraph
+      </button>
       <button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         h1
       </button>

docs/src/docPages/api/extensions/ordered-list.md

@@ -22,8 +22,8 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command     | Options | Description           |
+| Command      | Options | Description            |
-| ----------- | ------- | --------------------- |
+| ------------ | ------- | ---------------------- |
 | ordered_list | —       | Toggle a ordered list. |
 
 ## Keyboard shortcuts

docs/src/docPages/api/extensions/paragraph.md

@@ -20,10 +20,13 @@ yarn add @tiptap/extension-paragraph
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-*None*
+| Command   | Options | Description                                  |
+| --------- | ------- | -------------------------------------------- |
+| paragraph | —       | Transforms all selected nodes to paragraphs. |
 
 ## Keyboard shortcuts
-*None*
+* Windows & Linux: `Control` `Alt` `0`
+* macOS: `Cmd` `Alt` `0`
 
 ## Source code
 [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)

packages/extension-paragraph/index.ts

@@ -1,6 +1,14 @@
-import { Node } from '@tiptap/core'
+import { Command, Node } from '@tiptap/core'
 // import ParagraphComponent from './paragraph.vue'
 
+export type ParagraphCommand = () => Command
+
+declare module '@tiptap/core/src/Editor' {
+  interface Commands {
+    paragraph: ParagraphCommand,
+  }
+}
+
 export default new Node()
   .name('paragraph')
   .schema(() => ({
@@ -10,4 +18,12 @@ export default new Node()
     toDOM: () => ['p', 0],
     // toVue: ParagraphComponent,
   }))
+  .commands(({ name }) => ({
+    [name]: () => ({ commands }) => {
+      return commands.toggleNode(name, 'paragraph')
+    },
+  }))
+  .keys(({ editor }) => ({
+    'Mod-Alt-0': () => editor.paragraph(),
+  }))
   .create()