Skip to content

Commit

Permalink
chore: Fix broken inline image upload story (#705)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rfgamaral
rfgamaral committed Mar 21, 2024
1 parent a8e3b3d commit 3f376fb
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 150 deletions.
136 changes: 75 additions & 61 deletions stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx
View file
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react'
import { forwardRef, useCallback, useEffect, useState } from 'react'

import { Box, Column, Columns } from '@doist/reactist'

Expand All @@ -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 }
88 changes: 44 additions & 44 deletions stories/typist-editor/plain-text-functions.stories.tsx
View file
Expand Up @@ -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}
/>
)
},
Expand All @@ -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}
/>
)
},
Expand Down
88 changes: 44 additions & 44 deletions stories/typist-editor/rich-text-functions.stories.tsx
View file
Expand Up @@ -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}
/>
)
},
Expand All @@ -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}
/>
)
},
Expand Down
2 changes: 1 addition & 1 deletion stories/typist-editor/rich-text.stories.tsx
View file
Expand Up @@ -139,9 +139,9 @@ export const Default: StoryObj<typeof TypistEditor> = {
args={{
...context.args,
extensions,
ref: typistEditorRef,
}}
withToolbar={true}
ref={typistEditorRef}
/>
)
},
Expand Down

0 comments on commit 3f376fb

Please sign in to comment.