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