From e2c83f5f9f83cae9f57b4fad91880e27d7e94e6d Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Fri, 4 Jul 2025 16:57:50 +0200 Subject: [PATCH] chore: updated custom toolbar story --- demo/stories/presets/Preset.tsx | 8 ++++++++ demo/stories/presets/Presets.stories.tsx | 23 +++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/demo/stories/presets/Preset.tsx b/demo/stories/presets/Preset.tsx index c0e77b67f..ca31ef980 100644 --- a/demo/stories/presets/Preset.tsx +++ b/demo/stories/presets/Preset.tsx @@ -1,9 +1,11 @@ import {StrictMode, memo, useCallback, useEffect, useState} from 'react'; import { + type MarkdownEditorMarkupConfig, type MarkdownEditorMode, type MarkdownEditorPreset, MarkdownEditorView, + type MarkdownEditorWysiwygConfig, type MarkupString, type RenderPreview, useMarkdownEditor, @@ -41,6 +43,8 @@ export type PresetDemoProps = { stickyToolbar?: boolean; height?: React.CSSProperties['height']; toolbarsPreset?: ToolbarsPreset; + wysiwygConfig?: MarkdownEditorWysiwygConfig; + markupConfig?: MarkdownEditorMarkupConfig; }; export const Preset = memo((props) => { @@ -55,6 +59,8 @@ export const Preset = memo((props) => { stickyToolbar, height, toolbarsPreset, + wysiwygConfig, + markupConfig, } = props; const [editorMode, setEditorMode] = useState('wysiwyg'); const [mdRaw, setMdRaw] = useState(''); @@ -96,11 +102,13 @@ export const Preset = memo((props) => { parseInsertedUrlAsImage, }, }, + ...wysiwygConfig, }, markupConfig: { splitMode: splitModeOrientation, renderPreview, parseInsertedUrlAsImage, + ...markupConfig, }, }); diff --git a/demo/stories/presets/Presets.stories.tsx b/demo/stories/presets/Presets.stories.tsx index 57579b569..b64515995 100644 --- a/demo/stories/presets/Presets.stories.tsx +++ b/demo/stories/presets/Presets.stories.tsx @@ -1,5 +1,15 @@ import type {StoryObj} from '@storybook/react'; +import { + textContextItemData, + wBoldItemData, + wHeading1ItemData, + wHeading2ItemData, + wItalicItemData, + wTextItemData, + wToggleHeadingFoldingItemData, +} from 'src/bundle'; + import {Preset as component} from './Preset'; import {toolbarPresets} from './presets'; @@ -28,6 +38,19 @@ export const Full: StoryObj = { export const Custom: StoryObj = { args: { toolbarsPreset: custom, + wysiwygConfig: { + extensionOptions: { + commandMenu: { + actions: [wTextItemData, wHeading1ItemData, wHeading2ItemData], + }, + selectionContext: { + config: [ + [wToggleHeadingFoldingItemData, textContextItemData], + [wBoldItemData, wItalicItemData], + ], + }, + }, + }, }, };