diff --git a/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx b/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx
index 714a1a27..9eab77b8 100644
--- a/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx
+++ b/stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useState } from 'react'
 
 import { Box, Column, Columns } from '@doist/reactist'
 
@@ -12,81 +12,95 @@ import type { PartialStoryFn } from '@storybook/csf'
 import type { ReactRenderer } from '@storybook/react'
 import type { CoreEditor, TypistEditorProps, TypistEditorRef, UpdateProps } from '../../../../src'
 
-type TypistEditorArgs = Partial<
+type TypistEditorPropsWithRef = Partial<
     TypistEditorProps & {
         ref: React.LegacyRef<TypistEditorRef>
     }
 >
 
 type TypistEditorDecoratorProps = {
-    Story: PartialStoryFn<ReactRenderer, TypistEditorArgs>
-    args: TypistEditorArgs
+    Story: PartialStoryFn<ReactRenderer, TypistEditorPropsWithRef>
+    args: TypistEditorProps
     withToolbar?: boolean
     renderBottomFunctions?: () => JSX.Element
 }
 
-function TypistEditorDecorator({
-    Story,
-    args,
-    withToolbar = false,
-    renderBottomFunctions,
-}: TypistEditorDecoratorProps) {
-    const [typistEditor, setTypistEditor] = useState<CoreEditor | null>(null)
-    const [markdownOutput, setMarkdownOutput] = useState(args.content)
+const TypistEditorDecorator = forwardRef<TypistEditorRef, TypistEditorDecoratorProps>(
+    function TypistEditorDecorator(
+        { Story, args, withToolbar = false, renderBottomFunctions },
+        forwardedRef,
+    ) {
+        const [typistEditor, setTypistEditor] = useState<CoreEditor | null>(null)
+        const [markdownOutput, setMarkdownOutput] = useState(args.content)
 
-    const storyClassName = classNames('markdown-body', args.className)
+        const storyClassName = classNames('markdown-body', args.className)
 
-    const shouldRenderToolbar = typistEditor && withToolbar
+        const shouldRenderToolbar = typistEditor && withToolbar
 
-    const handleUpdate = useCallback((props: UpdateProps) => {
-        setMarkdownOutput(props.getMarkdown())
-    }, [])
+        const handleUpdate = useCallback((props: UpdateProps) => {
+            setMarkdownOutput(props.getMarkdown())
+        }, [])
 
-    useEffect(
-        function updateMarkdownOutputOnContentControlChange() {
-            setMarkdownOutput(args.content)
-        },
-        [args.content],
-    )
+        useEffect(
+            function updateMarkdownOutputOnContentControlChange() {
+                setMarkdownOutput(args.content)
+            },
+            [args.content],
+        )
 
-    return (
-        <Box display="flex" flexDirection="column" height="full">
-            <Columns exceptionallySetClassName={styles.topContainer}>
-                <Column width="1/2">
-                    <h3>Typist Editor</h3>
-                    {shouldRenderToolbar ? <TypistEditorToolbar editor={typistEditor} /> : null}
-                    <Box className={styles.editorContainer} marginX="large" marginBottom="large">
-                        <Story
-                            args={{
-                                ...args,
-                                className: storyClassName,
-                                onUpdate: handleUpdate,
-                                ref: (instance) => {
-                                    setTypistEditor(instance?.getEditor() || null)
-                                },
-                            }}
-                        />
-                    </Box>
-                </Column>
-                <Column width="1/2">
-                    <h3>Markdown Output</h3>
-                    <Box className={styles.outputContainer} marginX="large" marginBottom="large">
-                        <pre>{markdownOutput}</pre>
+        return (
+            <Box display="flex" flexDirection="column" height="full">
+                <Columns exceptionallySetClassName={styles.topContainer}>
+                    <Column width="1/2">
+                        <h3>Typist Editor</h3>
+                        {shouldRenderToolbar ? <TypistEditorToolbar editor={typistEditor} /> : null}
+                        <Box
+                            className={styles.editorContainer}
+                            marginX="large"
+                            marginBottom="large"
+                        >
+                            <Story
+                                args={{
+                                    ...args,
+                                    className: storyClassName,
+                                    onUpdate: handleUpdate,
+                                    ref: (instance) => {
+                                        setTypistEditor(instance?.getEditor() || null)
+
+                                        if (typeof forwardedRef === 'function') {
+                                            forwardedRef(instance)
+                                        } else if (forwardedRef) {
+                                            forwardedRef.current = instance
+                                        }
+                                    },
+                                }}
+                            />
+                        </Box>
+                    </Column>
+                    <Column width="1/2">
+                        <h3>Markdown Output</h3>
+                        <Box
+                            className={styles.outputContainer}
+                            marginX="large"
+                            marginBottom="large"
+                        >
+                            <pre>{markdownOutput}</pre>
+                        </Box>
+                    </Column>
+                </Columns>
+                {renderBottomFunctions ? (
+                    <Box
+                        display="flex"
+                        justifyContent="center"
+                        flexWrap="wrap"
+                        className={styles.bottomFunctionsContainer}
+                    >
+                        {renderBottomFunctions()}
                     </Box>
-                </Column>
-            </Columns>
-            {renderBottomFunctions ? (
-                <Box
-                    display="flex"
-                    justifyContent="center"
-                    flexWrap="wrap"
-                    className={styles.bottomFunctionsContainer}
-                >
-                    {renderBottomFunctions()}
-                </Box>
-            ) : null}
-        </Box>
-    )
-}
+                ) : null}
+            </Box>
+        )
+    },
+)
 
 export { TypistEditorDecorator }
diff --git a/stories/typist-editor/plain-text-functions.stories.tsx b/stories/typist-editor/plain-text-functions.stories.tsx
index dc7698a6..101cdd61 100644
--- a/stories/typist-editor/plain-text-functions.stories.tsx
+++ b/stories/typist-editor/plain-text-functions.stories.tsx
@@ -60,35 +60,32 @@ export const Commands: StoryObj<typeof TypistEditor> = {
                     .run()
             }, [])
 
+            function renderBottomFunctions() {
+                return (
+                    <>
+                        <Button variant="secondary" onClick={handleCreateParagraphEndClick}>
+                            createParagraphEnd
+                        </Button>
+                        <Button variant="secondary" onClick={handleExtendWordRangeClick}>
+                            extendWordRange
+                        </Button>
+                        <Button variant="secondary" onClick={handleInsertMarkdownContentClick}>
+                            insertMarkdownContent
+                        </Button>
+                        <Button variant="secondary" onClick={handleInsertMarkdownContentAtClick}>
+                            insertMarkdownContentAt
+                        </Button>
+                    </>
+                )
+            }
+
             return (
                 <TypistEditorDecorator
                     Story={Story}
-                    args={{ ...context.args, ref: typistEditorRef }}
+                    args={{ ...context.args }}
                     withToolbar={true}
-                    renderBottomFunctions={() => {
-                        return (
-                            <>
-                                <Button variant="secondary" onClick={handleCreateParagraphEndClick}>
-                                    createParagraphEnd
-                                </Button>
-                                <Button variant="secondary" onClick={handleExtendWordRangeClick}>
-                                    extendWordRange
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    onClick={handleInsertMarkdownContentClick}
-                                >
-                                    insertMarkdownContent
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    onClick={handleInsertMarkdownContentAtClick}
-                                >
-                                    insertMarkdownContentAt
-                                </Button>
-                            </>
-                        )
-                    }}
+                    renderBottomFunctions={renderBottomFunctions}
+                    ref={typistEditorRef}
                 />
             )
         },
@@ -115,29 +112,32 @@ export const Helpers: StoryObj<typeof TypistEditor> = {
                 )
             }, [])
 
+            function renderBottomFunctions() {
+                return (
+                    <>
+                        <Button variant="secondary" onClick={handleGetEditorClick}>
+                            getEditor
+                        </Button>
+                        <Button variant="secondary" onClick={handleGetMarkdownClick}>
+                            getMarkdown
+                        </Button>
+                        <Button
+                            variant="secondary"
+                            onClick={handleGetAllNodesAttributesByTypeClick}
+                        >
+                            {"getAllNodesAttributesByType('mentionSuggestion')"}
+                        </Button>
+                    </>
+                )
+            }
+
             return (
                 <TypistEditorDecorator
                     Story={Story}
-                    args={{ ...context.args, ref: typistEditorRef }}
+                    args={{ ...context.args }}
                     withToolbar={true}
-                    renderBottomFunctions={() => {
-                        return (
-                            <>
-                                <Button variant="secondary" onClick={handleGetEditorClick}>
-                                    getEditor
-                                </Button>
-                                <Button variant="secondary" onClick={handleGetMarkdownClick}>
-                                    getMarkdown
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    onClick={handleGetAllNodesAttributesByTypeClick}
-                                >
-                                    {"getAllNodesAttributesByType('mentionSuggestion')"}
-                                </Button>
-                            </>
-                        )
-                    }}
+                    renderBottomFunctions={renderBottomFunctions}
+                    ref={typistEditorRef}
                 />
             )
         },
diff --git a/stories/typist-editor/rich-text-functions.stories.tsx b/stories/typist-editor/rich-text-functions.stories.tsx
index bc2c21a3..76bc4646 100644
--- a/stories/typist-editor/rich-text-functions.stories.tsx
+++ b/stories/typist-editor/rich-text-functions.stories.tsx
@@ -60,35 +60,32 @@ export const Commands: StoryObj<typeof TypistEditor> = {
                     .run()
             }, [])
 
+            function renderBottomFunctions() {
+                return (
+                    <>
+                        <Button variant="secondary" onClick={handleCreateParagraphEndClick}>
+                            createParagraphEnd
+                        </Button>
+                        <Button variant="secondary" onClick={handleExtendWordRangeClick}>
+                            extendWordRange
+                        </Button>
+                        <Button variant="secondary" onClick={handleInsertMarkdownContentClick}>
+                            insertMarkdownContent
+                        </Button>
+                        <Button variant="secondary" onClick={handleInsertMarkdownContentAtClick}>
+                            insertMarkdownContentAt
+                        </Button>
+                    </>
+                )
+            }
+
             return (
                 <TypistEditorDecorator
                     Story={Story}
-                    args={{ ...context.args, ref: typistEditorRef }}
+                    args={{ ...context.args }}
                     withToolbar={true}
-                    renderBottomFunctions={() => {
-                        return (
-                            <>
-                                <Button variant="secondary" onClick={handleCreateParagraphEndClick}>
-                                    createParagraphEnd
-                                </Button>
-                                <Button variant="secondary" onClick={handleExtendWordRangeClick}>
-                                    extendWordRange
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    onClick={handleInsertMarkdownContentClick}
-                                >
-                                    insertMarkdownContent
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    onClick={handleInsertMarkdownContentAtClick}
-                                >
-                                    insertMarkdownContentAt
-                                </Button>
-                            </>
-                        )
-                    }}
+                    renderBottomFunctions={renderBottomFunctions}
+                    ref={typistEditorRef}
                 />
             )
         },
@@ -115,29 +112,32 @@ export const Helpers: StoryObj<typeof TypistEditor> = {
                 )
             }, [])
 
+            function renderBottomFunctions() {
+                return (
+                    <>
+                        <Button variant="secondary" onClick={handleGetEditorClick}>
+                            getEditor
+                        </Button>
+                        <Button variant="secondary" onClick={handleGetMarkdownClick}>
+                            getMarkdown
+                        </Button>
+                        <Button
+                            variant="secondary"
+                            onClick={handleGetAllNodesAttributesByTypeClick}
+                        >
+                            {"getAllNodesAttributesByType('mentionSuggestion')"}
+                        </Button>
+                    </>
+                )
+            }
+
             return (
                 <TypistEditorDecorator
                     Story={Story}
-                    args={{ ...context.args, ref: typistEditorRef }}
+                    args={{ ...context.args }}
                     withToolbar={true}
-                    renderBottomFunctions={() => {
-                        return (
-                            <>
-                                <Button variant="secondary" onClick={handleGetEditorClick}>
-                                    getEditor
-                                </Button>
-                                <Button variant="secondary" onClick={handleGetMarkdownClick}>
-                                    getMarkdown
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    onClick={handleGetAllNodesAttributesByTypeClick}
-                                >
-                                    {"getAllNodesAttributesByType('mentionSuggestion')"}
-                                </Button>
-                            </>
-                        )
-                    }}
+                    renderBottomFunctions={renderBottomFunctions}
+                    ref={typistEditorRef}
                 />
             )
         },
diff --git a/stories/typist-editor/rich-text.stories.tsx b/stories/typist-editor/rich-text.stories.tsx
index fb431404..9db021eb 100644
--- a/stories/typist-editor/rich-text.stories.tsx
+++ b/stories/typist-editor/rich-text.stories.tsx
@@ -139,9 +139,9 @@ export const Default: StoryObj<typeof TypistEditor> = {
                     args={{
                         ...context.args,
                         extensions,
-                        ref: typistEditorRef,
                     }}
                     withToolbar={true}
+                    ref={typistEditorRef}
                 />
             )
         },