{"library":"react-mde","title":"React Markdown Editor Component","description":"react-mde is a React component that provides a feature-rich Markdown editor, aiming for parity with the GitHub Markdown editor experience. It functions as a controlled component, requiring both a `value` prop for the Markdown content and an `onChange` handler for updates. A key differentiator is its extensibility; it allows developers to provide a custom `generateMarkdownPreview` function, making it agnostic to the chosen Markdown parsing library (e.g., Showdown or react-markdown). The component also supports custom icons and configurable toolbar commands. It relies on Draft.js for advanced text editing features like history management and mentions. The current stable version is 11.5.0, published approximately five years ago. Due to the lack of recent updates and noted unresolved issues, such as mobile compatibility tied to an unaddressed Draft.js problem, the project appears to be unmaintained.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-mde"],"cli":null},"imports":["import ReactMde from 'react-mde';","import 'react-mde/lib/styles/css/react-mde-all.css';","import * as Showdown from 'showdown';\nconst converter = new Showdown.Converter({ tables: true, simplifiedAutoLink: true });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useCallback } 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\nfunction MyMarkdownEditor() {\n  const [value, setValue] = useState('**Hello world!!!**');\n  const [selectedTab, setSelectedTab] = useState<'write' | 'preview'>('write');\n\n  const generatePreview = useCallback((markdown) => {\n    return Promise.resolve(converter.makeHtml(markdown));\n  }, []);\n\n  return (\n    <div style={{ maxWidth: 800, margin: 'auto', padding: '20px' }}>\n      <ReactMde\n        value={value}\n        onChange={setValue}\n        selectedTab={selectedTab}\n        onTabChange={setSelectedTab}\n        generateMarkdownPreview={generatePreview}\n        minEditorHeight={200}\n        minPreviewHeight={200}\n      />\n    </div>\n  );\n}\n\nexport default MyMarkdownEditor;","lang":"typescript","description":"Demonstrates a basic controlled `ReactMde` component, managing Markdown content and tab selection with React hooks and integrating Showdown for preview generation.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}