diff --git a/demo/stories/experiments/empty-row/EmptyRow.stories.tsx b/demo/stories/experiments/empty-row/EmptyRow.stories.tsx index c24a6735..c20ffdee 100644 --- a/demo/stories/experiments/empty-row/EmptyRow.stories.tsx +++ b/demo/stories/experiments/empty-row/EmptyRow.stories.tsx @@ -10,6 +10,6 @@ export const Story: StoryObj = { Story.storyName = 'Preserve Empty Rows'; export default { - title: 'Experiments', + title: 'Experiments / Preserve Empty Rows', component, }; diff --git a/demo/stories/experiments/store-raw/StoreRawMarkup.stories.tsx b/demo/stories/experiments/store-raw/StoreRawMarkup.stories.tsx new file mode 100644 index 00000000..8faf72b0 --- /dev/null +++ b/demo/stories/experiments/store-raw/StoreRawMarkup.stories.tsx @@ -0,0 +1,13 @@ +import type {StoryObj} from '@storybook/react'; + +import {StoreRawMarkupDemo as component} from './StoreRawMarkup'; + +export const Story: StoryObj = { + args: {}, +}; +Story.storyName = 'Store Raw Markup'; + +export default { + title: 'Experiments', + component, +}; diff --git a/demo/stories/experiments/store-raw/StoreRawMarkup.tsx b/demo/stories/experiments/store-raw/StoreRawMarkup.tsx new file mode 100644 index 00000000..48e0c0b1 --- /dev/null +++ b/demo/stories/experiments/store-raw/StoreRawMarkup.tsx @@ -0,0 +1,103 @@ +import React, {useCallback, useLayoutEffect, useState} from 'react'; + +import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18'; + +import {MarkdownEditorView, type RenderPreview, useMarkdownEditor} from '../../../../src'; +import {PlaygroundLayout} from '../../../components/PlaygroundLayout'; +import {SplitModePreview} from '../../../components/SplitModePreview'; +import {plugins} from '../../../defaults/md-plugins'; +import {useMarkdownEditorValue} from '../../../hooks/useMarkdownEditorValue'; + +const initialMarkup = ` +## YFM Table + +### Simple table + +#| +|| **Header1** | **Header2** || +|| Text | Text || +|# + +### Multiline content + +#| +|| +Text +on two lines +| +- Potatoes +- Carrot +- Onion +- Cucumber +|| +|# + +### Nested tables + +#| +|| 1 | Text before other table + +#| +|| 5 | 6 || +|| 7 | 8 || +|# + +Text after other table + +|| +|| 3 | 4 || +|# +`; + +type StoreRawMarkupDemoProps = {}; + +export const StoreRawMarkupDemo = React.memo(() => { + const [mdMarkup, setMdMarkup] = useState(initialMarkup); + + const renderPreview = useCallback( + ({getValue, md}) => ( + + ), + [], + ); + + const editor = useMarkdownEditor( + { + initial: {markup: mdMarkup}, + markupConfig: {renderPreview}, + }, + [], + ); + + // for preserve edited content + const value = useMarkdownEditorValue(editor); + useLayoutEffect(() => { + setMdMarkup(value); + }, [value]); + + return ( + ( + + )} + /> + ); +}); + +StoreRawMarkupDemo.displayName = 'Experiments / StoreRawMarkup';