Aarni Halinen
42 lines
997 B
TypeScript
42 lines
997 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import ReactMde from "react-mde";
|
|
import { WidgetProps } from "@rjsf/core";
|
|
import MarkdownStyles from "@views/common/MarkdownStyles";
|
|
|
|
type MarkdownEditorWidgetProps = WidgetProps;
|
|
|
|
const Container = styled.div`
|
|
background: white;
|
|
color: black;
|
|
|
|
button {
|
|
color: black;
|
|
}
|
|
|
|
.mde-preview {
|
|
min-height: unset !important;
|
|
height: 200px;
|
|
overflow: scroll;
|
|
}
|
|
`;
|
|
|
|
const MarkdownEditorWidget: React.FC<MarkdownEditorWidgetProps> = ({ value, onChange }) => {
|
|
const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
|
|
return (
|
|
<Container>
|
|
<ReactMde
|
|
value={value}
|
|
onChange={onChange}
|
|
selectedTab={selectedTab}
|
|
onTabChange={setSelectedTab}
|
|
generateMarkdownPreview={(markdown) => Promise.resolve(
|
|
<MarkdownStyles>{markdown}</MarkdownStyles>,
|
|
)}
|
|
/>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default MarkdownEditorWidget;
|