Function Example

www/src/Example.tsx:13–173

(props = {} as { mdStr: string })

let count = 1;

const Example = (props = {} as { mdStr: string }) => {
  const [state, setVisible] = React.useState<MDEditorProps>({
    visibleDragbar: true,
    hideToolbar: true,
    overflow: true,
    highlightEnable: true,
    enableScroll: true,
    value: props.mdStr || '',
    preview: 'live',
    toolbarBottom: false,
  });
  const upPreview = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVisible({ ...state, preview: e.target.value as MDEditorProps['preview'] });
  };
  const updateHandle = (str: string) => {
    setVisible({ ...state, value: str });
  };
  return (
    <Fragment>
      <MDEditor
        autoFocus
        value={state.value}
        overflow={state.overflow}
        previewOptions={{
          rehypePlugins: [
            [
              rehypeSanitize,
              {
                ...defaultSchema,
                attributes: {
                  ...defaultSchema.attributes,
                  span: [
                    // @ts-ignore
                    ...(defaultSchema.attributes.span || []),
                    // List of all allowed tokens:
                    ['className'],
                  ],
                  code: [['className']],
                },
              },
            ],
          ],
        }}
        height={400}
        highlightEnable={state.highlightEnable}
        hideToolbar={!state.hideToolbar}
        enableScroll={state.enableScroll}
        toolbarBottom={state.toolbarBottom}
        visibleDragbar={state.visibleDragbar}
        textareaProps={{
          placeholder: 'Please enter Markdown text',
        }}
        preview={state.preview}
        onChange={(newValue = '') => {
          setVisible({ ...state, value: newValue });
        }}
      />
      <Toolbar>