feat: add previewWidth props (#192).

Author: jaywcjlove

src/commands/preview.tsx

@@ -4,7 +4,7 @@ import { IMarkdownEditor, ToolBarProps } from '../';
 
 const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
  const { editorProps } = props;
- const { containerEditor, preview } = editorProps;
+ const { containerEditor, preview, previewWidth = '50%' } = editorProps;
  const [visible, setVisible] = useState(props.editorProps.visible);
  useEffect(() => setVisible(props.editorProps.visible), [props.editorProps.visible]);
  useEffect(() => {
@@ -14,12 +14,14 @@ const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Tool
  $preview.style.borderBottomRightRadius = '3px';
  }
  if ($preview && visible) {
- $preview.style.width = '50%';
+ $preview.style.width = previewWidth;
  $preview.style.overflow = 'auto';
- $preview.style.borderLeft = '1px solid var(--color-border-muted)';
+ if (previewWidth !== '100%') {
+ $preview.style.borderLeft = '1px solid var(--color-border-muted)';
+ }
  $preview.style.padding = '20px';
  if (containerEditor.current) {
- containerEditor.current.style.width = '50%';
+ containerEditor.current.style.width = `calc(100% - ${previewWidth})`;
  }
  } else if ($preview) {
  $preview.style.width = '0%';
@@ -31,7 +33,7 @@ const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Tool
  }
  }
  }
- }, [visible, containerEditor, preview]);
+ }, [visible, containerEditor, preview, previewWidth]);
 
  return (
  <button onClick={() => setVisible(!visible)} type="button" className={visible ? 'active' : ''}>

src/index.tsx

@@ -32,6 +32,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
  hideToolbar?: boolean;
  /** Override the default preview component */
  renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
+ /** Preview expanded width @default `50%` */
+ previewWidth?: string;
  /** Tool display settings. */
  toolbars?: IToolBarProps['toolbars'];
  /** Tool display settings. */
@@ -82,6 +84,7 @@ function MarkdownEditorInternal(
  hideToolbar = true,
  previewProps = {},
  extensions = [],
+ previewWidth = '50%',
  reExtensions,
  ...codemirrorProps
  } = props;
@@ -105,7 +108,7 @@ function MarkdownEditorInternal(
  editor: codeMirror,
  container: container,
  containerEditor: containerEditor,
- editorProps: props,
+ editorProps: { ...props, previewWidth },
  };
  const height = typeof codemirrorProps.height === 'number' ? `${codemirrorProps.height}px` : codemirrorProps.height;
  const extensionsData: IMarkdownEditor['extensions'] = reExtensions

website/Example.tsx

@@ -12,7 +12,7 @@ export function Example() {
  const [hideToolbar, setHideToolbar] = useState(true);
  return (
  <div className={styles.editor}>
- <MarkdownEditor visible={visible} height="500px" value={mdstr} hideToolbar={hideToolbar} />
+ <MarkdownEditor visible={visible} previewWidth="100%" height="500px" value={mdstr} hideToolbar={hideToolbar} />
  <div style={{ marginTop: 10, display: 'flex', gap: '10px' }}>
  <button
  onClick={() => {