{"id":18412705,"url":"https://github.com/platzidev/pulse-editor","last_synced_at":"2025-10-29T01:09:07.304Z","repository":{"id":65371529,"uuid":"90559690","full_name":"PlatziDev/pulse-editor","owner":"PlatziDev","description":"Tha Platzi Flavored Markdown extensible and customizable editor.","archived":false,"fork":false,"pushed_at":"2023-10-23T23:26:12.000Z","size":160,"stargazers_count":68,"open_issues_count":4,"forks_count":17,"subscribers_count":61,"default_branch":"master","last_synced_at":"2025-03-22T17:11:29.126Z","etag":null,"topics":["customizable","extensible","markdown","platzi","pulse","pulse-editor","react","react-components"],"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/PlatziDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-07T20:26:13.000Z","updated_at":"2023-08-31T00:43:27.000Z","dependencies_parsed_at":"2023-01-19T22:45:18.995Z","dependency_job_id":null,"html_url":"https://github.com/PlatziDev/pulse-editor","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Fpulse-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Fpulse-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Fpulse-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PlatziDev%2Fpulse-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PlatziDev","download_url":"https://codeload.github.com/PlatziDev/pulse-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247644535,"owners_count":20972307,"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":["customizable","extensible","markdown","platzi","pulse","pulse-editor","react","react-components"],"created_at":"2024-11-06T03:43:11.868Z","updated_at":"2025-10-29T01:09:07.209Z","avatar_url":"https://github.com/PlatziDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pulse Editor\nA React markdown editor, extensible and fully customizable\n\n## Installation\nTo install this editor just run:\n\n```bash\nyarn add pulse-editor\n```\n\nOr with npm:\n\n```bash\nnpm i -S pulse-editor\n```\n\n## Usage example\n```javascript\nimport React, { Component } from 'react'\nimport { Editor, ButtonBar, ButtonGroup, Field, Preview, EmojiBar } from 'pulse-editor'\nimport {\n  Base,\n  Bold,\n  Italic,\n  Underline,\n  Code,\n  Link,\n  Image,\n  OrderedList,\n  UnorderedList,\n  Quote,\n  Heading,\n  Youtube,\n} from 'pulse-editor/buttons'\n\nclass MyEditor extends Component {\n  handleChange = ({ selected, selection, markdown, html, native }) =\u003e {\n    console.group('Editor special change event')\n    console.log('With this event you can get the `selected` text.')\n    console.log('Along with the `selection` position inside the full value.')\n    console.log('Of course, you also get the original `markdown` and the parsed `html`.')\n    console.log('And since the changes are also triggered from a button click, text input, etc.')\n    console.log('You will also get the `native` DOM event.')\n    console.groupEnd('Editor special change event')\n  }\n\n  handleDrop = event =\u003e {\n    console.group('Editor custom (drop) event')\n    console.log('The editor is extensible!')\n    console.log('This event is not actually used by the editor.')\n    console.log('But you can use it to extend the editor features.')\n    console.log('And create your own custom editor on top of this one.')\n    console.groupEnd('Editor custom (drop) event')\n  }\n\n  handleSubmit = event =\u003e {\n    event.preventDefault()\n    console.group('Form submit')\n    console.log('Because the editor is just a textarea at the end of the day.')\n    console.log('You can wrap it in a HTML `\u003cform\u003e` tag and use it as part of a common form')\n    console.log('If you submit it, the editor field name it\\'s `value`.')\n    console.log('That name can be customized if you set it as a prop of the `Field` component.')\n    console.groupEnd('Form submit')\n  }\n\n  setRef = editor =\u003e {\n    console.group('Editor ref')\n    console.log('We can also get the editor instance ref.');\n    console.log('This can allow us to call editor methods to update the internal value.');\n    console.log('That way we can extend our editor.');\n    console.log('And implement features like Drag\u0026Drop of images.');\n    console.groupEnd('Editor ref')\n    this.editor = editor;\n  }\n\n  render() {\n    return (\n      \u003cform onSubmit={this.handleSubmit}\u003e\n        \u003cEditor\n          name=\"main-editor\"\n          defaultValue=\"**Initial _editor_ value**\"\n          onChange={this.handleChange}\n          onDrop={this.handleDrop}\n          editorRef={this.setRef}\n        \u003e\n          \u003cButtonBar\u003e\n            \u003cButtonGroup\u003e\n              \u003cBold\u003e\u003cstrong\u003eB\u003c/strong\u003e\u003c/Bold\u003e\n              \u003cItalic\u003e\u003cem\u003eI\u003c/em\u003e\u003c/Italic\u003e\n              \u003cUnderline\u003eU\u003c/Underline\u003e\n            \u003c/ButtonGroup\u003e\n\n            \u003cButtonGroup\u003e\n              \u003cCode\u003eInsert code\u003c/Code\u003e\n              \u003cLink\u003eLink\u003c/Link\u003e\n              \u003cImage\u003eImage\u003c/Image\u003e\n            \u003c/ButtonGroup\u003e\n\n            \u003cButtonGroup\u003e\n              \u003cOrderedList\u003eOL\u003c/OrderedList\u003e\n              \u003cUnorderedList\u003eUL\u003c/UnorderedList\u003e\n              \u003cQuote\u003eQ\u003c/Quote\u003e\n              \u003cHeading\u003eH\u003c/Heading\u003e\n              \u003cYoutube\u003eY\u003c/Youtube\u003e\n            \u003c/ButtonGroup\u003e\n          \u003c/ButtonBar\u003e\n\n          {/* you can use any DOM element or event custom components */}\n          \u003cdiv\u003e\n            \u003cPreview /\u003e\n            {/* you can force an initial height for the field if it's server rendered */}\n            \u003cField style={{ height: '39px' }} /\u003e\n          \u003c/div\u003e\n\n          \u003cEmojiBar /\u003e\n        \u003c/Editor\u003e\n        \u003cbutton type=\"submit\"\u003eSend form\u003c/button\u003e\n      \u003c/form\u003e\n    )\n  }\n}\n\nexport default MyEditor\n```\n\n## Authors\n- Sergio Daniel Xalambrí ([@sergiodxa](https://twitter.com/sergiodxa)) - Platzi\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplatzidev%2Fpulse-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplatzidev%2Fpulse-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplatzidev%2Fpulse-editor/lists"}