(null);
const getLineAndCursorCallback = useCallback((position: Position) => {
setLineAndCursor(position);
}, []);
useEffect(() => {
lineAndCursor &&
console.info("Hey I'm line and cursor info!", lineAndCursor);
}, [lineAndCursor]);
return (
Getting instance of Mde and codemirror and line and cursor info
);
};
```
### Basic testing
Here is how you do it. It requires mock of certain browser pieces to work, but this is whole example.
```tsx
import { act, render, screen } from "@testing-library/react";
import { useState } from "react";
import { SimpleMdeReact } from "react-simplemde-editor";
import userEvent from "@testing-library/user-event";
// @ts-ignore
Document.prototype.createRange = function () {
return {
setEnd: function () {},
setStart: function () {},
getBoundingClientRect: function () {
return { right: 0 };
},
getClientRects: function () {
return {
length: 0,
left: 0,
right: 0,
};
},
};
};
const Editor = () => {
const [value, setValue] = useState("");
return ;
};
describe("Renders", () => {
it("succesfully", async () => {
act(() => {
render();
});
const editor = await screen.findByRole("textbox");
userEvent.type(editor, "hello");
expect(screen.getByText("hello")).toBeDefined();
});
});
```
## API
### Props
```tsx
export interface SimpleMDEReactProps
extends Omit, "onChange"> {
id?: string;
onChange?: (value: string, changeObject?: EditorChange) => void;
value?: string;
extraKeys?: KeyMap;
options?: SimpleMDE.Options;
events?: SimpleMdeToCodemirrorEvents;
getMdeInstance?: GetMdeInstance;
getCodemirrorInstance?: GetCodemirrorInstance;
getLineAndCursor?: GetLineAndCursor;
placeholder?: string;
textareaProps?: Omit<
React.HTMLAttributes,
"id" | "style" | "placeholder"
>;
}
```
### All exports list
`default` - SimpleMdeReact
`SimpleMdeReact` - same as `default` but named
**Types:**
`SimpleMdeReactProps` - props of the component
`DOMEvent` - certain events that are used to get events exported below
`CopyEvents` - only copy codemirror events
`GlobalEvents` - some other global codemirror events
`DefaultEvent` - default codemirror event handler function
`IndexEventsSignature` - index signature that expects string as key and returns `DefaultEvent`
`SimpleMdeToCodemirrorEvents` - manually crafted events (based off `@types/codemirror@0.0.109` that `easymde` uses internally) +
all the above merged together into whole mapping between Codemirror event names and actual handlers for
`events` prop
`GetMdeInstance` - signature of the callback function that retrieves mde instance
`GetCodemirrorInstance` - signature of the callback function that retrieves codemirror instance
`GetLineAndCursor` - signature of the callback function that retrieves line and cursor info
## Changelog
## New in v4
- Now uses [EasyMDE (the most fresh SimpleMDE fork)](https://github.com/Ionaru/easy-markdown-editor)
instead of `simplemde` itself. Possible breaking changes, so I bumped version to v4.
- One obvious breaking change. Is how CSS is have to be imported. It used to be `simplemde/dist/simplemde.min.css` now it will be `easymde/dist/easymde.min.css`
## New in v3
- The `initialValue` prop has been removed and replaced with a `value` prop, allowing direct changes to the value to be made after the component mounts.
- v3.6.8 if rendering server-side, you can set static ids to avoid errors in rendering synchronization.
- v3.6.17 TypeScript typings added.
- v3.6.19 All props will be passed to the wrapper now (except a id, onChange and few others that are ignored)
- v3.6.21 React 17 support (UNSAFE methods are no longer used)
## New in v2
Version 1.0 did not have SimpleMDE options configured well, this readme reflects the changes made to better include options.
This is still a very new project. Testing, feedback and PRs are welcome and appreciated.
[npm-badge]: http://badge.fury.io/js/react-simplemde-editor.svg
[npm]: http://badge.fury.io/js/react-simplemde-editor