Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Fix broken inline image upload story #705

Merged
merged 1 commit into from Mar 21, 2024
Merged

chore: Fix broken inline image upload story #705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
136 changes: 75 additions & 61 deletions stories/typist-editor/decorators/typist-editor-decorator/typist-editor-decorator.tsx
View file
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
Expand Up @@ -139,9 +139,9 @@ export const Default: StoryObj<typeof TypistEditor> = {
args={{
...context.args,
extensions,
ref: typistEditorRef,
}}
withToolbar={true}
ref={typistEditorRef}
/>
)
},
Expand Down