{"id":13773366,"url":"https://github.com/webbrother/react-headless-mde","last_synced_at":"2025-04-10T01:34:00.493Z","repository":{"id":127119850,"uuid":"611185460","full_name":"Webbrother/react-headless-mde","owner":"Webbrother","description":"React headless markdown editor","archived":false,"fork":false,"pushed_at":"2023-04-16T11:25:40.000Z","size":838,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T03:12:01.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Webbrother.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-03-08T09:50:45.000Z","updated_at":"2024-12-24T14:15:20.000Z","dependencies_parsed_at":"2024-01-06T22:54:10.213Z","dependency_job_id":"533bfc65-aa73-4094-8e81-ee042c479ae4","html_url":"https://github.com/Webbrother/react-headless-mde","commit_stats":{"total_commits":50,"total_committers":2,"mean_commits":25.0,"dds":"0.16000000000000003","last_synced_commit":"27929b7a07c7d75814042f5943027c0cce98a778"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Webbrother%2Freact-headless-mde","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Webbrother%2Freact-headless-mde/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Webbrother%2Freact-headless-mde/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Webbrother%2Freact-headless-mde/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Webbrother","download_url":"https://codeload.github.com/Webbrother/react-headless-mde/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248140889,"owners_count":21054366,"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":[],"created_at":"2024-08-03T17:01:14.815Z","updated_at":"2025-04-10T01:34:00.465Z","avatar_url":"https://github.com/Webbrother.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"# Introduction\n\nA simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor.\nReact-mde-headless has **no 3rd party dependencies**.\n\n## [Demo](https://codesandbox.io/s/competent-jepsen-qyz51q?file=/src/index.tsx)\n\n## Installing\n\n    npm i react-headless-mde\n\n## Using\n\n```jsx\nimport { boldCommand, italicCommand, linkCommand, useTextAreaMarkdownEditor } from 'react-headless-mde';\n\nexport const MarkdownEditor = () =\u003e {\n  const { ref, commandController } = useTextAreaMarkdownEditor({\n    commandMap: {\n      bold: boldCommand,\n      italic: italicCommand,\n      link: linkCommand,\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          commandController.executeCommand('bold');\n        }}\n      \u003e\n        B\n      \u003c/button\u003e\n\n      \u003ctextarea ref={ref} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Supported commands\n\n- headingLevel1\n- headingLevel2\n- headingLevel3\n- headingLevel4\n- headingLevel5\n- headingLevel6\n- quote\n- checkedList\n- orderedList\n- unorderedList\n- bold\n- code\n- codeBlock\n- italic\n- strikethrough\n- image\n- link\n\n## New API discussion [here](https://github.com/Webbrother/react-headless-mde/issues/22)\n\n## Todo\n\n- Undo/Redo commands\n- Check execution on SSR (For example, Next.js) and, if necessary, regenerate eslint config, taking into account execution on node.js\n- peerDependencies React?\n- Undo for\n  - 1st priority\n    - all headers\n    - `quote`\n    - `strikethrough`\n  - 2nd priority\n    - `orderedList`\n    - `unorderedList`\n    - `checkedList`\n    - `codeBlock`\n\nPR's are welcome!\n\n### Third party\n\n- https://github.com/grassator/insert-text-at-cursor by https://twitter.com/d_kubyshkin\n\n### XSS concerns\n\nReact-mde-headless does not automatically sanitize the HTML preview. If you are using Showdown,\nthis has been taken from [their documentation](\u003chttps://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)\u003e):\n\n\u003e Cross-side scripting is a well known technique to gain access to private information of the users\n\u003e of a website. The attacker injects spurious HTML content (a script) on the web page which will read\n\u003e the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,\n\u003e you should filter any suspicious content coming from user input. Showdown does not include an\n\u003e 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\n\n- [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize).\n- [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).\n\n## Licence\n\nReact-mde-headless is [MIT licensed](https://github.com/andrerpena/react-mde/blob/master/LICENSE).\n\n## About the authors\n\nCreated by [André Pena](https://github.com/andrerpena). Maintained and developed by https://github.com/webbrother.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbrother%2Freact-headless-mde","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebbrother%2Freact-headless-mde","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbrother%2Freact-headless-mde/lists"}