{"id":13422180,"url":"https://github.com/jrm2k6/react-markdown-editor","last_synced_at":"2025-04-05T19:09:33.122Z","repository":{"id":29668256,"uuid":"33210456","full_name":"jrm2k6/react-markdown-editor","owner":"jrm2k6","description":"A markdown editor using React/Reflux","archived":false,"fork":false,"pushed_at":"2018-06-26T14:56:54.000Z","size":613,"stargazers_count":215,"open_issues_count":18,"forks_count":27,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T01:04:37.430Z","etag":null,"topics":["markdown","markdowneditor","react","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jrm2k6.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}},"created_at":"2015-03-31T21:17:32.000Z","updated_at":"2025-03-16T17:28:37.000Z","dependencies_parsed_at":"2022-08-31T04:22:36.291Z","dependency_job_id":null,"html_url":"https://github.com/jrm2k6/react-markdown-editor","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrm2k6%2Freact-markdown-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrm2k6%2Freact-markdown-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrm2k6%2Freact-markdown-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrm2k6%2Freact-markdown-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jrm2k6","download_url":"https://codeload.github.com/jrm2k6/react-markdown-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386263,"owners_count":20930618,"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":["markdown","markdowneditor","react","reactjs"],"created_at":"2024-07-30T23:00:38.627Z","updated_at":"2025-04-05T19:09:33.080Z","avatar_url":"https://github.com/jrm2k6.png","language":"JavaScript","readme":"# react-markdown-editor\nA markdown editor using React/Reflux.\n\n\n[![Build Status](http://img.shields.io/travis/jrm2k6/react-markdown-editor/master.svg?style=flat-square)](https://travis-ci.org/jrm2k6/react-markdown-editor)\n[![Code Climate](https://img.shields.io/codeclimate/github/kabisaict/flow.svg?style=flat-square)](https://codeclimate.com/github/jrm2k6/react-markdown-editor)\n[![License](https://img.shields.io/npm/l/express.svg?style=flat-square)](http://www.opensource.org/licenses/MIT)\n[![Latest Version](https://img.shields.io/npm/v/react-markdown-editor.svg?style=flat-square)](https://www.npmjs.com/package/react-markdown-editor)\n[![Total Downloads](https://img.shields.io/npm/dm/react-markdown-editor.svg?style=flat-square)](https://www.npmjs.com/package/react-markdown-editor)\n\n##TLDR\nDemo here: http://jrm2k6.github.io/react-markdown-editor/\n\n## Installation\n``` npm install --save react-markdown-editor ``` or ```yarn add react-markdown-editor```\n\n## Features\nFrom the UI:\n\n- Bold\n- Italic\n- Header\n- Subheader\n- Link\n- Unordered List\n- Inline Images\n\nOf course it is a regular markdown editor (using the nice [markdown-js](https://github.com/evilstreak/markdown-js) library), so you are not limited to the UI.\n\n## Usage\nTo render the component:\n```\nvar React = require('react');\nvar MarkdownEditor = require('react-markdown-editor').MarkdownEditor;\n\nvar TestComponent = React.createClass({\n\trender: function() {\n\t\treturn (\n\t\t\t\u003cMarkdownEditor initialContent=\"Test\" iconsSet=\"font-awesome\"/\u003e\n\t\t);\n\t}\n});\n\nReact.render(\u003cTestComponent /\u003e, document.getElementById('content'));\n```\n\n```\u003cMarkdownEditor /\u003e ``` takes two required props:\n\n    - initialContent which is the text you want the textarea to contain on initialization.\n    - iconsSet which is the icons provider you want to use. It can either be font-awesome or materialize-ui\n\nOptional props:\n\n   - ```onContentChange```, function to be called on each content change, getting the new content as an argument (as the property name says!)\n   - ```styles```, see [Styling](#styling) below\n\nYou can also listen to content changes on the editor. If you are using Reflux, by listening to the changes on ```MarkdownEditorContentStore```.\nTo be able to do so, just ```require('react-markdown-editor').MarkdownEditorContentStore;```\n\n## Dependencies\nYou can modify the styles directly by modifying the styles declared in ```dist/MarkdownEditor.js```. The pre-existing styles assume that you are using Bootstrap and Font Awesome.\n\n## Styling\u003ca name=\"styling\"\u003e\u003c/a\u003e\n```\u003cMarkdownEditor /\u003e``` is styled using React's inline styling and can be styled by supplying a ```styles``` prop. The following keys are used to style each component, below are their default values:\n\n\t- styleMarkdownEditorHeader : \n\t\t- display: 'flex'\n\t\t- flexDirection: 'column'\n\t\t- borderBottom: '1px solid #ddd'\n\t\t- marginLeft: '0px'\n\t\t- marginRight: '0px'\n\t\t- minHeight: '50px'\n\t\t- justifyContent: 'center'\n\t\t- position: 'relative'\n\t- styleMarkdownEditorContainer :\n\t\t- display: 'flex'\n\t\t- flexDirection: 'column'\n\t\t- marginTop: '2px'\n\t\t- paddingTop: '10px'\n\t\t- border: '1px solid #ddd'\n\t\t- backgroundColor: '#f7f7f7'\n\t- styleMarkdownMenu :\n\t\t- margin: '5px 0'\n\t\t- flex: '1'\n\t\t- display: 'flex'\n\t\t- position: 'absolute'\n\t\t- right: '20px'\n\t\t- top: '10px'\n\t- styleMarkdownTextArea : \n\t\t- height: '90%'\n\t\t- width: '100%'\n\t\t- padding: '30px 10px'\n\t\t- border: 'none'\n\t- styleMarkdownPreviewArea : \n\t\t- height: '90%'\n\t\t- width: '100%'\n\t\t- padding: '30px 10px'\n\t\t- backgroundColor: '#fff'\n\t\t- border: 'none'\n\t- styleMarkdownEditorTabs : \n\t\t- border: 'none'\n\t\t- display: 'flex'\n\t\t- justifyContent: 'flex-start'\n    - styleTab :\n\t\t- padding: '0px 20px'\n\t\t- cursor: 'pointer'\n\t\t- display: 'flex'\n\t\t- justifyContent: 'center'\n\t\t- alignItems: 'center'\n\t\t- height: '50px'\n\t- styleActiveTab :\n\t\t- padding: '0px 20px'\n\t\t- cursor: 'pointer'\n\t\t- display: 'flex'\n\t\t- justifyContent: 'center'\n\t\t- alignItems: 'center'\n\t\t- height: '50px'\n\t\t- borderLeft: '1px solid #ddd'\n\t\t- borderRight: '1px solid #ddd'\n\t\t- borderTop: '1px solid #ddd'\n\t\t- backgroundColor: '#fff'\n\t\t- borderRadius: '3px'\n\n## TODO\n- [ ] Cross-browsers testing\n- [ ] Move to Redux\n\n## Example\n\n```\ncd Example\nnpm install\nwebpack\nopen index.html\n```\n\n## Issues/Contribution\nYou can open an issue on the github repo, or contact me directly by email.\n\n## Help\nPlease, if you are using this package, let me know. I am interested to know what you think of it, even if it was on a tiny side-project.\n\n## Screenshots\n![Editing tab](http://i.imgur.com/XPdJmqm.png \"Editing tab\")\n![Editing tab with custom styles](http://imgur.com/a/pLuLd \"Editing tab with custom styles\")\n![Preview tab](http://i.imgur.com/uavBSUN.png \"Preview tab\")\n","funding_links":[],"categories":["UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Form Components","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrm2k6%2Freact-markdown-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjrm2k6%2Freact-markdown-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrm2k6%2Freact-markdown-editor/lists"}