Skip to content

Commit be45571

Browse files
jaywcjlovejaywcjlove
committed
feat: add toolbarBottom props.
1 parent 6cff691 commit be45571

File tree

5 files changed

+80
-39
lines changed

5 files changed

+80
-39
lines changed

‎README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</p>
2424

2525
<!--rehype:ignore:start-->
26-
[![React Markdown Editor](https://user-images.githubusercontent.com/1680273/186128463-5f819e3f-926b-4dea-b5d8-e9d1d1a8d72e.png)](https://uiwjs.github.io/react-markdown-editor/)
26+
[![React Markdown Editor](https://user-images.githubusercontent.com/1680273/191638380-55abdad5-09b8-45f2-952e-6b9879fcf4fa.png)](https://uiwjs.github.io/react-markdown-editor/)
2727
<!--rehype:ignore:end-->
2828

2929
> Migrate from @uiw/react-markdown-editor [4.x to 5.x.](https://github.com/uiwjs/react-markdown-editor/releases/tag/v5.0.0)
@@ -242,16 +242,18 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
242242
/** Shows a preview that will be converted to html. */
243243
visible?: boolean;
244244
visibleEditor?: boolean;
245-
/** Option to hide the tool bar. */
246-
hideToolbar?: boolean;
247245
/** Override the default preview component */
248246
renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
249247
/** Preview expanded width @default `50%` */
250248
previewWidth?: string;
251249
/** Tool display settings. */
252250
toolbars?: IToolBarProps['toolbars'];
253-
/** Tool display settings. */
251+
/** The tool on the right shows the settings. */
254252
toolbarsMode?: IToolBarProps['toolbars'];
253+
/** Toolbar on bottom */
254+
toolbarBottom?: boolean;
255+
/** Option to hide the tool bar. */
256+
hideToolbar?: boolean;
255257
/** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */
256258
previewProps?: MarkdownPreviewProps;
257259
/** replace the default `extensions` */

‎src/components/ToolBar/index.less‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@
88
align-items: center;
99
user-select: none;
1010
flex-wrap: wrap;
11+
}
12+
&-warp:not(&-bottom) {
1113
border-bottom: 1px solid var(--color-border-muted);
1214
}
13-
background-color: var(--color-canvas-subtle);
15+
&-bottom {
16+
border-top: 1px solid var(--color-border-muted);
17+
border-radius: 0 0 3px 3px;
18+
}
1419
padding: 4px 2px 4px 5px;
1520
border-radius: 3px 3px 0 0;
1621
display: flex;

‎src/index.less‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22

33
[data-color-mode*='dark'] .@{editor-prefix} {
44
--color-border-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 0 0 rgb(255 255 255 / 0%), 0 1px 1px rgb(255 255 255 / 20%);
5-
// --color-mde-background: #000;
65
}
76
[data-color-mode*='light'] .@{editor-prefix} {
87
--color-border-shadow: 0 0 0 1px rgb(16 22 26 / 10%), 0 0 0 rgb(16 22 26 / 0%), 0 1px 1px rgb(16 22 26 / 20%);
9-
// --color-mde-background: #fff;
108
}
119

1210
.@{editor-prefix} {

‎src/index.tsx‎

Lines changed: 56 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useRef, useImperativeHandle } from 'react';
1+
import React, { useState, useRef, useImperativeHandle, Fragment } from 'react';
22
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
33
import { languages } from '@codemirror/language-data';
44
import { EditorView, ViewUpdate } from '@codemirror/view';
@@ -28,16 +28,18 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
2828
/** Shows a preview that will be converted to html. */
2929
visible?: boolean;
3030
visibleEditor?: boolean;
31-
/** Option to hide the tool bar. */
32-
hideToolbar?: boolean;
3331
/** Override the default preview component */
3432
renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
3533
/** Preview expanded width @default `50%` */
3634
previewWidth?: string;
3735
/** Tool display settings. */
3836
toolbars?: IToolBarProps['toolbars'];
39-
/** Tool display settings. */
37+
/** The tool on the right shows the settings. */
4038
toolbarsMode?: IToolBarProps['toolbars'];
39+
/** Toolbar on bottom */
40+
toolbarBottom?: boolean;
41+
/** Option to hide the tool bar. */
42+
hideToolbar?: boolean;
4143
/** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */
4244
previewProps?: MarkdownPreviewProps;
4345
/** replace the default `extensions` */
@@ -60,6 +62,7 @@ export interface MarkdownEditorRef {
6062
const MarkdownEditor: MarkdownEditorComponent = React.forwardRef<MarkdownEditorRef, IMarkdownEditor>(
6163
MarkdownEditorInternal,
6264
) as unknown as MarkdownEditorComponent;
65+
6366
type MarkdownEditorComponent = React.FC<React.PropsWithRef<IMarkdownEditor>> & {
6467
Markdown: typeof MarkdownPreview;
6568
};
@@ -82,6 +85,7 @@ function MarkdownEditorInternal(
8285
renderPreview,
8386
visibleEditor = true,
8487
hideToolbar = true,
88+
toolbarBottom = false,
8589
previewProps = {},
8690
extensions = [],
8791
previewWidth = '50%',
@@ -121,35 +125,56 @@ function MarkdownEditorInternal(
121125
setValue(value);
122126
onChange && onChange(value, viewUpdate);
123127
};
128+
const conentView = (
129+
<div className={`${prefixCls}-content`} style={{ height: codemirrorProps.height }}>
130+
<div className={`${prefixCls}-content-editor`} ref={containerEditor}>
131+
{visibleEditor && (
132+
<CodeMirror
133+
theme={defaultTheme}
134+
{...codemirrorProps}
135+
extensions={extensionsData}
136+
height={height}
137+
ref={codeMirror}
138+
onChange={handleChange}
139+
/>
140+
)}
141+
</div>
142+
<div className={clsPreview} ref={preview}>
143+
{renderPreview ? (
144+
renderPreview(previewProps, !!visible)
145+
) : (
146+
<MarkdownPreview {...previewProps} data-visible={!!visible} />
147+
)}
148+
</div>
149+
</div>
150+
);
151+
152+
const clsToolbar = [
153+
prefixCls && `${prefixCls}-toolbar-warp`,
154+
prefixCls && toolbarBottom && `${prefixCls}-toolbar-bottom`,
155+
]
156+
.filter(Boolean)
157+
.join(' ');
158+
const toolbarView = hideToolbar && (
159+
<div className={clsToolbar}>
160+
<ToolBar {...toolBarProps} toolbars={toolbars} />
161+
<ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
162+
</div>
163+
);
164+
const child = toolbarBottom ? (
165+
<Fragment>
166+
{conentView}
167+
{toolbarView}
168+
</Fragment>
169+
) : (
170+
<Fragment>
171+
{toolbarView}
172+
{conentView}
173+
</Fragment>
174+
);
124175
return (
125176
<div className={cls} ref={container}>
126-
{hideToolbar && (
127-
<div className={`${prefixCls}-toolbar-warp`}>
128-
<ToolBar {...toolBarProps} toolbars={toolbars} />
129-
<ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
130-
</div>
131-
)}
132-
<div className={`${prefixCls}-content`} style={{ height: codemirrorProps.height }}>
133-
<div className={`${prefixCls}-content-editor`} ref={containerEditor}>
134-
{visibleEditor && (
135-
<CodeMirror
136-
theme={defaultTheme}
137-
{...codemirrorProps}
138-
extensions={extensionsData}
139-
height={height}
140-
ref={codeMirror}
141-
onChange={handleChange}
142-
/>
143-
)}
144-
</div>
145-
<div className={clsPreview} ref={preview}>
146-
{renderPreview ? (
147-
renderPreview(previewProps, !!visible)
148-
) : (
149-
<MarkdownPreview {...previewProps} data-visible={!!visible} />
150-
)}
151-
</div>
152-
</div>
177+
{child}
153178
</div>
154179
);
155180
}

‎website/Example.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,16 @@ export function Example() {
1010
const [visible, setVisible] = useState(true);
1111
const [mdstr, setMdstr] = useState<string>(DocumentStrSource);
1212
const [hideToolbar, setHideToolbar] = useState(true);
13+
const [toolbarBottom, setToolbarBottom] = useState(false);
1314
return (
1415
<div className={styles.editor}>
15-
<MarkdownEditor visible={visible} height="500px" value={mdstr} hideToolbar={hideToolbar} />
16+
<MarkdownEditor
17+
visible={visible}
18+
height="500px"
19+
value={mdstr}
20+
hideToolbar={hideToolbar}
21+
toolbarBottom={toolbarBottom}
22+
/>
1623
<div style={{ marginTop: 10, display: 'flex', gap: '10px' }}>
1724
<button
1825
onClick={() => {
@@ -26,6 +33,10 @@ export function Example() {
2633
<input type="checkbox" checked={hideToolbar} onChange={(evn) => setHideToolbar(evn.target.checked)} />
2734
hideToolbar
2835
</label>
36+
<label>
37+
<input type="checkbox" checked={toolbarBottom} onChange={(evn) => setToolbarBottom(evn.target.checked)} />
38+
toolbarBottom
39+
</label>
2940
<button onClick={() => setVisible(!visible)}>{visible ? 'Show' : 'Hide'}</button>
3041
<span>v{VERSION}</span>
3142
</div>

0 commit comments

Comments
 (0)