{"id":15033135,"url":"https://github.com/andrerpena/react-mde","last_synced_at":"2025-04-10T19:33:20.965Z","repository":{"id":40551922,"uuid":"74842347","full_name":"andrerpena/react-mde","owner":"andrerpena","description":"📝  React Markdown Editor","archived":false,"fork":false,"pushed_at":"2023-09-01T11:44:05.000Z","size":8461,"stargazers_count":1446,"open_issues_count":20,"forks_count":178,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-09T19:39:25.598Z","etag":null,"topics":["component","javascript","markdown","markdown-editor","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrerpena.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-11-26T18:10:16.000Z","updated_at":"2025-04-03T11:18:15.000Z","dependencies_parsed_at":"2023-10-20T17:10:03.478Z","dependency_job_id":"0ba757dc-4434-4ed8-8b29-33871079a683","html_url":"https://github.com/andrerpena/react-mde","commit_stats":{"total_commits":667,"total_committers":51,"mean_commits":13.07843137254902,"dds":"0.23688155922038978","last_synced_commit":"d3508213cdb0e943abfb68fb77bae809307e77f3"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrerpena%2Freact-mde","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrerpena%2Freact-mde/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrerpena%2Freact-mde/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrerpena%2Freact-mde/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrerpena","download_url":"https://codeload.github.com/andrerpena/react-mde/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281417,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","javascript","markdown","markdown-editor","react","typescript"],"created_at":"2024-09-24T20:20:12.261Z","updated_at":"2025-04-10T19:33:20.942Z","avatar_url":"https://github.com/andrerpena.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"⚠️ Attention \n===\nThis repository is undergoing a huge refactoring and react-mde will now be headless, starting from version 12. Meaning, it won't be opinionated about styles anymore. The `master` branch now contains the new version. No updates to the 11.5.0 will ever come.\n\nYou can check out the headless version (12.*) with the `next` tag. [Here is a demo](https://codesandbox.io/s/keen-bash-9nv0q0?file=/src/index.tsx).\n\nI will close all issues related to the 11.* version since that's no longer being maintained.\n\n# 📝 react-mde (11.5.0)\n\n[![npm](https://img.shields.io/npm/dt/react-mde)](https://www.npmjs.com/package/react-mde)\n[![MinZipped](https://badgen.net/bundlephobia/minzip/react-mde)](https://bundlephobia.com/result?p=react-mde)\n[![twitter](https://img.shields.io/twitter/follow/andrerpena?style=social)](https://twitter.com/andrerpena)\n\nA simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor. React-mde has no 3rd party dependencies.\n\n## Demo\n\n- [Demo JSX ](https://codesandbox.io/s/react-mde-latest-5i5ov?file=/src/index.js)\n- [Demo JSX - Using ReactMarkdown instead of Showdown](https://codesandbox.io/s/react-mde-latest-forked-f9ti5?file=/src/index.js)\n- [Demo TSX ](https://codesandbox.io/s/react-typescript-i3wju?file=/src/index.tsx)\n- [Demo TSX - Customized toolbar](https://codesandbox.io/s/react-typescript-m7cbx?file=/src/index.tsx)\n- [Demo TSX - Custom command](https://codesandbox.io/s/react-typescript-icqgv?file=/src/index.tsx)\n\n\n## Installing\n\n    npm i react-mde\n\n## Using\n\nReact-mde is a completely controlled component.\n\nMinimal example using Showdown. [View live on CodeSandBox](https://codesandbox.io/s/react-mde-latest-bm6p3):\n```jsx\nimport * as React from \"react\";\nimport ReactMde from \"react-mde\";\nimport * as Showdown from \"showdown\";\nimport \"react-mde/lib/styles/css/react-mde-all.css\";\n\nconst converter = new Showdown.Converter({\n  tables: true,\n  simplifiedAutoLink: true,\n  strikethrough: true,\n  tasklists: true\n});\n\nexport default function App() {\n  const [value, setValue] = React.useState(\"**Hello world!!!**\");\n  const [selectedTab, setSelectedTab] = React.useState\u003c\"write\" | \"preview\"\u003e(\"write\");\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cReactMde\n        value={value}\n        onChange={setValue}\n        selectedTab={selectedTab}\n        onTabChange={setSelectedTab}\n        generateMarkdownPreview={markdown =\u003e\n          Promise.resolve(converter.makeHtml(markdown))\n        }\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Markdown Preview\n\nReact-mde is agnostic regarding how to preview Markdown. The prop `generateMarkdownPreview` should return a Promise of either a string or a `ReactElement`.\n- [Demo using Showdown ](https://codesandbox.io/s/react-mde-latest-5i5ov?file=/src/index.js)\n- [Demo using ReactMarkdown](https://codesandbox.io/s/react-mde-latest-forked-f9ti5?file=/src/index.js)\n\n\n### Customizing Icons\n\nReact-mde comes with SVG icons extracted from [FontAwesome](https://fontawesome.com/).\n\nYou can customize the way icons are resolved by passing your own `getIcon` that will return a ReactNode\ngiven a command name.\n\n```jsx\n\u003cReactMde\n    getIcon={(commandName) =\u003e \u003cMyCustomIcon name={commandName} /\u003e}\n    onChange={this.handleValueChange}\n    // ...\n/\u003e\n```\n\n## React-mde Props\n\nThe types are described below\n\n- **value: string**: The Markdown value.\n- **onChange: (value: string)**: Event handler for the `onChange` event.\n- **selectedTab: \"write\" | \"preview\"**: The currently selected tab.\n- **onTabChange: (tab) =\u003e void**: Function called when the selected tab changes.\n- **classes?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/classes.ts)**: An object containing the following optional properties: *reactMde*, *toolbar*, *preview*, *textArea* and *suggestionsDropdown*.\nThis allows for passing class names to each of the inner components of React-mde. Classes defined in the *classes* prop\nfollow the specification of [Jed Watson's classNames project](https://github.com/JedWatson/classnames).\n- **commands?: Record\u003cstring, Command\u003e**: An object with string properties representing keys, and a Command object as value for each key. These are custom commands. Commands are explained in more details below.\n- **toolbarCommands?: string[][]**: Array of array of strings, indicating which commands should be displayed. Each outer array is a group. Example: `[[\"code\", \"bold\"], [\"italic\"]]`. The default list can be obtained with `import { getDefaultToolbarCommands } from 'react-mde', getDefaultToolbarCommands()`\n- **generateMarkdownPreview: (markdown: string) =\u003e Promise\u003cstring | ReactElement\u003e;**: Function that should return a Promise to the generated HTML or a React element for the preview. If this `prop` is falsy, then no preview is going to be generated.\n- **getIcon?: (commandName: string) =\u003e React.ReactNode }** An optional set of button content options, including an `iconProvider` to allow custom icon rendering.\noptions. It is recommended to [inspect the layouts source code](https://github.com/andrerpena/react-mde/tree/master/src/components-layout) to see what options can be passed to each\nwhile the documentation is not complete.\n- **loadingPreview**: What to display in the preview while it is loading. Value can be string, React Element or anything React can render.\n- **readOnly?: boolean**: Flag to render the editor in read-only mode.\n- [**l18n?**](src/types/L18n.ts): A localization option. It contains the strings `write`, `preview`, `uploadingImage` and `pasteDropSelect`.\n- **minEditorHeight?: number**: The minimum height of the editor.\n- **maxEditorHeight?: number**: The max height of the editor (after that, it will scroll).\n- **minPreviewHeight?: number**: The minimum height of the preview.\n- **heightUnits?: string**: The height units, defaults to `px`.\n- **loadSuggestions?: (text: string, triggeredBy: string) =\u003e Promise\u003cSuggestion[]\u003e**: Function to load mention suggestions based on the\ngiven `text` and `triggeredBy` (character that triggered the suggestions). The result should be an array of `{preview: React.ReactNode, value: string}`.\nThe `preview` is what is going to be displayed in the suggestions box. The `value` is what is going to be inserted in the `textarea` on click or enter.\n- **suggestionTriggerCharacters (string[])**: Characters that will trigger mention suggestions to be loaded. This property is useless\nwithout `loadSuggestions`.\n- **suggestionsAutoplace?: boolean**: Try to move the suggestions popover around so that it fits in the viewport, defaults to false\n- **childProps?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/child-props.ts#L16)**: An object containing props to be passed to `writeButton`, `previewButton`, `commandButtons` and `textArea`.\n- **paste: [PasteOptions](https://github.com/andrerpena/react-mde/blob/master/src/commands/command.ts)**: Options for file upload. \n\n## Styling\n\nThe following styles from React-mde should be added: (Both .scss and .css files are available. No need to use sass-loader if you don't want)\n\nEasiest way: import `react-mde-all.css`:\n\n    import 'react-mde/lib/styles/css/react-mde-all.css';\n\nIf you want to have a more granular control over the styles, you can [import each individual file](https://github.com/andrerpena/react-mde/tree/master/src/styles).\n\nIf you're using SASS, you can override these variables: https://github.com/andrerpena/react-mde/blob/master/src/styles/variables.scss\n\n## XSS concerns\n\nReact-mde does not automatically sanitize the HTML preview. If your using Showdown,\nthis has been taken from [their documentation](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)):\n\n\u003e Cross-side scripting is a well known technique to gain access to private information of the users\nof a website. The attacker injects spurious HTML content (a script) on the web page which will read\nthe user’s cookies and do something bad with it (like steal credentials). As a countermeasure,\n you should filter any suspicious content coming from user input. Showdown doesn’t include an\n XSS filter, so you must provide your own. But be careful in how you do it…\n\nYou might want to take a look at [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).\n\nIt is also possible to return a Promise to a React Element from `generateMarkdownPreview`, which makes\nit possible to use [ReactMarkdown](https://github.com/rexxars/react-markdown) as a preview. [View issue](https://github.com/andrerpena/react-mde/issues/161).\nReactMarkdown has built-in XSS protection.\n\nPlease refer to the [commands source code](https://github.com/andrerpena/react-mde/tree/master/src/commands) to understand how they\nshould be implemented.\n\n## Change log / Migrating from older versions\n\n[Instructions here](https://github.com/andrerpena/react-mde/blob/master/docs-md/ChangeLogMigrating.md).\n\n## Licence\n\nReact-mde is [MIT licensed](https://github.com/andrerpena/react-mde/blob/master/LICENSE).\n\n## Third party\n\nIn order to make React-mde zero deps, I've embedded two small libraries:\n- https://github.com/grassator/insert-text-at-cursor by https://twitter.com/d_kubyshkin\n- https://github.com/JedWatson/classnames by https://twitter.com/JedWatson\n\n## About the author\n\nMade with :heart: by André Pena and [other awesome contributors](https://github.com/andrerpena/react-mde/graphs/contributors).\n\n[![twitter](https://img.shields.io/twitter/follow/andrerpena?style=social)](https://twitter.com/andrerpena)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrerpena%2Freact-mde","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrerpena%2Freact-mde","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrerpena%2Freact-mde/lists"}