feat: Add createEmptyParagraphEnd command

Doist · Sep 12, 2023 · 13d51ac · 13d51ac
1 parent ae4cd49
commit 13d51ac
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 0 deletions.
diff --git a/src/extensions/core/extra-editor-commands/commands/create-empty-paragraph-end.ts b/src/extensions/core/extra-editor-commands/commands/create-empty-paragraph-end.ts
@@ -0,0 +1,49 @@
+import { RawCommands } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
+
+/**
+ * Augment the official `@tiptap/core` module with extra commands so that the compiler knows about
+ * them. For this to work externally, a wildcard export needs to be added to the root `index.ts`.
+ */
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        createEmptyParagraphEnd: {
+            /**
+             * Creates an empty paragraph at the end of the document.
+             */
+            createEmptyParagraphEnd: () => ReturnType
+        }
+    }
+}
+
+/**
+ * Creates an empty paragraph at the end of the document.
+ *
+ * last node before creating the paragraph, using the build int fn
+ */
+function createEmptyParagraphEnd(): ReturnType<RawCommands['createEmptyParagraphEnd']> {
+    return ({ state, tr, chain, dispatch }) => {
+        // Check if the transaction should be dispatched
+        // ref: https://tiptap.dev/api/commands#dry-run-for-commands
+        if (dispatch) {
+            return chain()
+                .command(() => {
+                    tr.setSelection(
+                        TextSelection.create(
+                            tr.doc,
+                            state.doc.content.size,
+                            state.doc.content.size,
+                        ),
+                    )
+
+                    return true
+                })
+                .createParagraphNear()
+                .run()
+        }
+
+        return true
+    }
+}
+
+export { createEmptyParagraphEnd }
diff --git a/src/extensions/core/extra-editor-commands/extra-editor-commands.ts b/src/extensions/core/extra-editor-commands/extra-editor-commands.ts
@@ -1,5 +1,6 @@
 import { Extension } from '@tiptap/core'
 
+import { createEmptyParagraphEnd } from './commands/create-empty-paragraph-end'
 import { extendWordRange } from './commands/extend-word-range'
 import { insertMarkdownContent } from './commands/insert-markdown-content'
 
@@ -12,6 +13,7 @@ const ExtraEditorCommands = Extension.create({
     name: 'extraEditorCommands',
     addCommands() {
         return {
+            createEmptyParagraphEnd,
             extendWordRange,
             insertMarkdownContent,
         }

diff --git a/src/index.ts b/src/index.ts
@@ -12,6 +12,7 @@ export type {
 } from './components/typist-editor'
 export { TypistEditor } from './components/typist-editor'
 export * from './constants/extension-priorities'
+export * from './extensions/core/extra-editor-commands/commands/create-empty-paragraph-end'
 export * from './extensions/core/extra-editor-commands/commands/extend-word-range'
 export * from './extensions/core/extra-editor-commands/commands/insert-markdown-content'
 export { PlainTextKit } from './extensions/plain-text/plain-text-kit'

diff --git a/stories/typist-editor/plain-text-functions.stories.tsx b/stories/typist-editor/plain-text-functions.stories.tsx
@@ -28,6 +28,10 @@ export const Commands: StoryObj<typeof TypistEditor> = {
         (Story, context) => {
             const typistEditorRef = useRef<TypistEditorRef>(null)
 
+            const handleCreateEmptyParagraphEndClick = useCallback(() => {
+                typistEditorRef.current?.getEditor().chain().focus().createEmptyParagraphEnd().run()
+            }, [])
+
             const handleExtendWordRangeClick = useCallback(() => {
                 typistEditorRef.current?.getEditor().chain().focus().extendWordRange().run()
             }, [])
@@ -49,6 +53,12 @@ export const Commands: StoryObj<typeof TypistEditor> = {
                     renderBottomFunctions={() => {
                         return (
                             <>
+                                <Button
+                                    variant="secondary"
+                                    onClick={handleCreateEmptyParagraphEndClick}
+                                >
+                                    createEmptyParagraphEnd
+                                </Button>
                                 <Button variant="secondary" onClick={handleExtendWordRangeClick}>
                                     extendWordRange
                                 </Button>

diff --git a/stories/typist-editor/rich-text-functions.stories.tsx b/stories/typist-editor/rich-text-functions.stories.tsx
@@ -28,6 +28,10 @@ export const Commands: StoryObj<typeof TypistEditor> = {
         (Story, context) => {
             const typistEditorRef = useRef<TypistEditorRef>(null)
 
+            const handleCreateEmptyParagraphEndClick = useCallback(() => {
+                typistEditorRef.current?.getEditor().chain().focus().createEmptyParagraphEnd().run()
+            }, [])
+
             const handleExtendWordRangeClick = useCallback(() => {
                 typistEditorRef.current?.getEditor().chain().focus().extendWordRange().run()
             }, [])
@@ -49,6 +53,12 @@ export const Commands: StoryObj<typeof TypistEditor> = {
                     renderBottomFunctions={() => {
                         return (
                             <>
+                                <Button
+                                    variant="secondary"
+                                    onClick={handleCreateEmptyParagraphEndClick}
+                                >
+                                    createEmptyParagraphEnd
+                                </Button>
                                 <Button variant="secondary" onClick={handleExtendWordRangeClick}>
                                     extendWordRange
                                 </Button>