{"id":21699983,"url":"https://github.com/opuscapita/react-markdown","last_synced_at":"2025-04-13T08:41:18.528Z","repository":{"id":49190054,"uuid":"92939892","full_name":"OpusCapita/react-markdown","owner":"OpusCapita","description":"Markdown editor (input) based on React","archived":false,"fork":false,"pushed_at":"2023-10-26T00:36:01.000Z","size":16733,"stargazers_count":112,"open_issues_count":7,"forks_count":10,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-04-07T00:38:03.078Z","etag":null,"topics":["component","editor","javascript","js","library","markdown","react"],"latest_commit_sha":null,"homepage":"https://opuscapita.github.io/react-markdown","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpusCapita.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-31T11:36:01.000Z","updated_at":"2024-07-19T17:55:15.000Z","dependencies_parsed_at":"2024-06-18T23:00:23.837Z","dependency_job_id":"b9a3b9e1-f6a7-4112-8d2e-38d3a5593d48","html_url":"https://github.com/OpusCapita/react-markdown","commit_stats":{"total_commits":409,"total_committers":27,"mean_commits":"15.148148148148149","dds":0.7995110024449877,"last_synced_commit":"9d45a78bd494e35a9d6b50b224fc5010325383e5"},"previous_names":["opuscapita/react-markdown-editor"],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Freact-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Freact-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Freact-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Freact-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpusCapita","download_url":"https://codeload.github.com/OpusCapita/react-markdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248686580,"owners_count":21145520,"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","editor","javascript","js","library","markdown","react"],"created_at":"2024-11-25T20:12:21.951Z","updated_at":"2025-04-13T08:41:18.491Z","avatar_url":"https://github.com/OpusCapita.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Markdown\n\n[![CircleCI Status](https://circleci.com/gh/OpusCapita/react-markdown/tree/master.svg?style=shield\u0026circle-token=:circle-token)](https://circleci.com/gh/OpusCapita/react-markdown)\n![badge-npm-version](https://img.shields.io/npm/v/@opuscapita/react-markdown.svg) \n![badge-license](https://img.shields.io/github/license/OpusCapita/react-markdown.svg)\n![NPM Downloads](https://img.shields.io/npm/dm/@opuscapita/react-markdown.svg)\n\n![demo](https://raw.githubusercontent.com/OpusCapita/react-markdown/master/demo.gif)\n\nBuilt using [slate-js](https://github.com/ianstormtaylor/slate)\n\n## Usage\n\nInstall npm package:\n\n`npm install -E @opuscapita/react-markdown`\n\nImport it to your application\n\n`import MarkdownInput from '@opuscapita/react-markdown`\n\nSee interactive example for more details: https://opuscapita.github.io/react-markdown\n\n\u003e Demo powered by [React Showroom](https://github.com/OpusCapita/react-showroom-client)\n\nIf you want to use together with Bootstrap Modal, you need to add styles:\n\n```\n.markdown-input_fullscreen { // pass this class to Modal component\n  overflow: hidden;\n}\n.markdown-input_fullscreen.modal.in .modal-dialog {\n  transform: none;\n}\n```\n\n## How it works\n\nMarkdownEditor supports the following decorators: \n\n- `bold` \n- `italic` \n- `strikethrough` \n- `heading-1` \n- `heading-2` \n- `heading-3`\n- `heading-4` \n- `heading-5` \n- `heading-6`\n- `list` \n- `ordered-list`\n\n### Buttons (their groups, sequence)\n\n\\[B, I, S\\] \\[A\\] \\[H1, H2, H3, H4, H5, H6\\], \\[UL, OL\\]\n- inline text actions\n  - \\[B\\] - bold mark\n  - \\[I\\] - italic mark\n  - \\[S\\] - strikethrough mark\n- link\n  - \\[A\\] - anchor insert\n- text block actions \n  - \\[H1\\] - header 1 block\n  - \\[H2\\] - header 2 block\n  - \\[H3\\] - header 3 block\n  - \\[H4\\] - header 4 block\n  - \\[H5\\] - header 5 block\n  - \\[H6\\] - header 6 block\n- lists\n  - \\[UL\\] - list block\n  - \\[OL\\] - ordered list block\n  \n**Note for multi-line selection**: only `list` and `ordered list` are available for multi-line selection, other buttons in a toolbar are disabled, because otherwise markdown highlighting becomes inconsistent.\n\n### Behaviour\n\n#### Block elements\n\n##### List [UL] button\nHere is specification by video example for this button\n\n![list-button-optimized](https://user-images.githubusercontent.com/24603787/28166906-5d5a7ad6-67e2-11e7-9dd6-5f054a7c3431.gif)\n\n- Insert marker '* ' at the beginning of the line if line does not start with ['{number}. ', '# ', '## ', '### ', '#### ', '##### ', '###### ']\n- Replace with marker '* ' if line starts with  ['{number}. ', '# ', '## ', '### ', '#### ', '##### ', '###### ']\n- Insert marker '* ' at the beginning of the next line if `enter` is pressed at the end of the line that is marked as list item if item contain any text\n- Clear line from '* ' and put cursor to a new line if user pressed `enter` at the end of the line that marked as list item but does not contain any text\n\n##### Ordered list [OL] button\nHere is specification by video example for this button\n\n![ordered-list-button-optimized](https://user-images.githubusercontent.com/24603787/28167332-ecdaa7e8-67e3-11e7-9da3-b41de506deed.gif)\n\n  - Insert marker '1. ' at start of the line if it does not start with ['* ', '# ', '## ', '### ', '#### ', '##### ', '###### ']\n  - Replace with marker '1. ' if line starts with  ['* ', '# ', '## ', '### ', '#### ', '##### ', '###### ']\n  - Insert marker '{number+1} ' at the beginning of in the next line if `enter` is pressed at the end of the line that is marked as list item if item contains any text\n  - Clear line from '{number} ' and put cursor to a new line if user pressed `enter` at the end of the line that is marked as ordered list item but does not contain any text\n  \n##### Header item [h1-h6] buttons\nHere is specification by video example for \\[H2\\] button (other header buttons work correspondingly)\n\n![h2-button-optimized](https://user-images.githubusercontent.com/24603787/28199634-d3d3cbbc-686f-11e7-9fd6-3da0e41fe3b9.gif)\n\n  - Insert marker '# ' - '###### ' (in depends on button) at start of the line if it does not start with ['* ', '{number}. ']\n  - Replace with marker '# ' - '###### ' (in depends on button) if line stars with ['* ', '{number}. ']\n  - Remove existing header marker if corresponding header button is clicked\n  - Update existing header marker to another header marker one if current header marker does not correspond to pressed header button\n\n#### Marked elements\nHere is specification by video example for these buttons\n\n![bold-italic-strikethrough-optimized](https://user-images.githubusercontent.com/24603787/28200156-0128f076-6873-11e7-95cc-46944c548800.gif)\n\n##### Bold [B] button\n  - Selected text is wrapped with '\\*\\*', e.g.  {selected\\_text} -\u003e \\*\\*{selected_text}\\*\\*\n  - If selected text contains bold text then it is unwrapped, for example  \\*\\*{selected\\_text}\\*\\* -\u003e {selected\\_text}\n  - Inserts '\\*\\*{cursor}\\*\\*' into cursor position if text is not selected, and cursor is placed inside\n##### Italic [I] button\n  - Selected text is wrapped with '\\_', e.g.  {selected\\_text} -\u003e \\_{selected_text}\\_\n  - If selected text is marked as italic then it is unwrapped, for example  \\_{selected\\_text}\\_ -\u003e {selected\\_text}\n  - Inserts '\\_{cursor}\\_' into cursor position if text is not selected, and cursor is placed inside\n##### Strikethrough [S]  button\n  - Selected text is wrapped with '\\~\\~', e.g.  {selected\\_text} -\u003e \\~\\~{selected_text}\\~\\~\n  - If selected text is marked as strikethrough then it is unwrapped, for example  \\~\\~{selected\\_text}\\~\\~ -\u003e {selected\\_text}\n  - Inserts '\\~\\~{cursor}\\~~' into cursor position if text is not selected, and cursor is placed inside\n\n#### Inline elements\n##### External anchor [A] button\nHere is specification by video example for this button\n\n![link-button-optimized](https://user-images.githubusercontent.com/24603787/28200219-5d42085c-6873-11e7-9071-3140c8c2ad53.gif)\n\n  - Wraps selected text with '\\[' and '\\](http://example.com)', for example {selected\\_text} -\u003e \\[{selected\\_text}\\](http://example.com)\n  - Inserts text \\[link text\\](http://example.com) into cursor position if text is not selected.\n\n## Known issues\n* In case of multi line selection toolbar all buttons except `list` and `ordered list` are not available (no action is supported)\n* Code blocks are not supported\n\n## Contributors\n\n| [\u003cimg src=\"https://avatars.githubusercontent.com/u/24603787?v=3\" width=\"100px;\"/\u003e](https://github.com/asergeev-sc) | [**Alexey Sergeev**](https://github.com/asergeev-sc)     |\n| :---: | :---: |\n [\u003cimg src=\"https://avatars.githubusercontent.com/u/24733803?v=3\" width=\"100px;\"/\u003e](https://github.com/ddivin-sc) | [**Dmitry Divin**](https://github.com/ddivin-sc) |\n [\u003cimg src=\"https://avatars.githubusercontent.com/u/25082620?v=3\" width=\"100px;\"/\u003e](https://github.com/dsanko-sc) | [**Dmitry Sanko**](https://github.com/dsanko-sc) |\n  [\u003cimg src=\"https://avatars.githubusercontent.com/u/28590602?v=3\" width=\"100px;\"/\u003e](https://github.com/abaliunov-sc) | [**Aleksandr Baliunov**](https://github.com/abaliunov-sc) |\n| [\u003cimg src=\"https://avatars.githubusercontent.com/u/24652543?v=3\" width=\"100px;\"/\u003e](https://github.com/kvolkovich-sc) | [**Kirill Volkovich**](https://github.com/kvolkovich-sc) |\n\n## License\n\nLicensed under the Apache License, Version 2.0. See [LICENSE](./LICENSE) for the full license text.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopuscapita%2Freact-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopuscapita%2Freact-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopuscapita%2Freact-markdown/lists"}