{"id":22218570,"url":"https://github.com/megahertz/react-simple-wysiwyg","last_synced_at":"2025-05-15T12:02:38.799Z","repository":{"id":53498439,"uuid":"185682966","full_name":"megahertz/react-simple-wysiwyg","owner":"megahertz","description":"Simple and lightweight React WYSIWYG editor","archived":false,"fork":false,"pushed_at":"2025-03-24T02:10:03.000Z","size":540,"stargazers_count":201,"open_issues_count":7,"forks_count":32,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-15T12:02:28.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://megahertz.github.io/react-simple-wysiwyg/","language":"TypeScript","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/megahertz.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-08T21:40:05.000Z","updated_at":"2025-05-14T20:23:38.000Z","dependencies_parsed_at":"2023-01-30T20:15:31.040Z","dependency_job_id":"8cb1f0bb-108e-4c57-80bc-20478a8471ab","html_url":"https://github.com/megahertz/react-simple-wysiwyg","commit_stats":{"total_commits":82,"total_committers":3,"mean_commits":"27.333333333333332","dds":"0.024390243902439046","last_synced_commit":"89bfc646b74af0e77c0504622f6a5d288caf52e6"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-simple-wysiwyg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-simple-wysiwyg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-simple-wysiwyg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-simple-wysiwyg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/megahertz","download_url":"https://codeload.github.com/megahertz/react-simple-wysiwyg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"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-12-02T22:27:10.237Z","updated_at":"2025-05-15T12:02:38.770Z","avatar_url":"https://github.com/megahertz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-simple-wysiwyg\n[![Tests](https://github.com/megahertz/react-simple-wysiwyg/actions/workflows/tests.yml/badge.svg)](https://github.com/megahertz/react-simple-wysiwyg/actions/workflows/tests.yml)\n[![NPM version](https://badge.fury.io/js/react-simple-wysiwyg.svg)](https://badge.fury.io/js/react-simple-wysiwyg)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-simple-wysiwyg.svg?color=rgb%2868%2C%20204%2C%2017%29)](https://bundlephobia.com/result?p=react-simple-wysiwyg)\n\nSimple and lightweight React WYSIWYG editor. [Demo](https://megahertz.github.io/react-simple-wysiwyg/).\n\n## Description\n\n[![Screenshot](docs/resources/screenshot.png)](https://megahertz.github.io/react-simple-wysiwyg/)\n\nKey features:\n\n- pretty small (~9kb, ~4kb gzipped)\n- fast\n- simple to configure\n- simple to extend\n- support automatic LTR and RTL text direction switching for Arabic languages\n\nOf course, it's not so powerful as other complex editors. It DOES NOT:\n\n- ✗ change HTML generated by a browser (sometimes it can be dirty)\n- ✗ sanitize HTML (you can use [sanitize-html](https://www.npmjs.com/package/sanitize-html))\n- ✗ contain advanced features as others (like table editor, image editor and so on)\n- ✗ support old browsers (IE 11 is minimal)\n\nIf you need a more powerful solution for React, you'd better take a look at more \npowerful editors like Slate.js, Tiptap, CKEditor, TinyMCE, Quill or Summernote \nand so on.\n\n## Usage\n\n 1. Install with [npm](https://npmjs.org/package/react-simple-wysiwyg):\n\n    `npm install react-simple-wysiwyg`\n    \n    or [CDN (unpkg.com)](https://unpkg.com/react-simple-wysiwyg/)\n   \n    `\u003cscript src=\"//unpkg.com/react-simple-wysiwyg\"\u003e\u003c/script\u003e`\n    \n 2. Use the component\n \n    ```jsx\n    import { useState } from 'react';\n    import Editor from 'react-simple-wysiwyg';\n    \n    function App() {\n      const [html, setHtml] = useState('my \u003cb\u003eHTML\u003c/b\u003e');\n      \n      function onChange(e) {\n        setHtml(e.target.value);\n      }\n    \n      return (\n        \u003cEditor value={html} onChange={onChange} /\u003e\n      );\n    }\n    ```\n    \n### Component Props\n\nGenerally, all props as well as a ref are passed to the content editable \nelement, which is a div element. It also supports a few additional properties \nto act like an input element:\n\n- **autoFocus**\n- **disabled** for read-only mode\n- **name** for onChange event\n- **placeholder**\n- **tagName** 'div' ny default\n- **value**\n\nYou can also set the root container props using `containerProps` property.\n\n### Custom toolbar\n\n```tsx\nimport { useState } from 'react';\nimport Editor, { \n  BtnBold,\n  BtnItalic,\n  Toolbar\n} from 'react-simple-wysiwyg';\n\nexport default function CustomEditor() {\n  const [value, setValue] = useState('simple text');\n\n  function onChange(e) {\n    setValue(e.target.value);\n  }\n\n  return (\n    \u003cEditor value={value} onChange={onChange}\u003e\n      \u003cToolbar\u003e\n        \u003cBtnBold /\u003e\n        \u003cBtnItalic /\u003e\n      \u003c/Toolbar\u003e\n    \u003c/Editor\u003e\n  );\n}\n```\n\nCheck [DefaultEditor.tsx](src/editor/DefaultEditor.tsx) for details.\n\n### Custom buttons\n\nThis library contains only a basic set of buttons, but it can be extended\neasily. Check [buttons.ts](src/toolbar/buttons.tsx) and \n[dropdowns.ts](src/toolbar/dropdowns.tsx) for example. Most of the buttons use\n[document.execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).\nYou can find a list of all available commands there. This API is deprecated,\nbut there is still no alternative and there are no plans to remove it from\nbrowsers. Most of the popular WYSIWYG editors continue using it.\n\n```tsx\nimport Editor, { \n  BtnBold, \n  BtnItalic, \n  createButton,\n  EditorProvider, \n  Toolbar\n} from 'react-simple-wysiwyg';\n\nconst BtnAlignCenter = createButton('Align center', '≡', 'justifyCenter');\n\nexport default function CustomEditor({ value, onChange }) {\n  return (\n    \u003cEditor value={value} onChange={onChange}\u003e\n      \u003cToolbar\u003e\n        \u003cBtnBold /\u003e\n        \u003cBtnItalic /\u003e\n        \u003cBtnAlignCenter /\u003e\n      \u003c/Toolbar\u003e\n    \u003c/Editor\u003e\n  );\n}\n```\n\n### Editor style and size\n\nBy default, it fills the whole width of the parent element, and the height\ndepends on a content height. It could be customized easily. The root element\nof the editor has `rsw-editor` css class, so you could use it in your styles.\n\nAlso, you can pass `containerProps` to customize editor appearance. Here's an\nexample how make the editor resizable:\n\n```tsx\n\u003cEditor \n  containerProps={{ style: { resize: 'vertical' } }}\n  value={html}\n  onChange={onChange}\n/\u003e\n```\n\nAll css classes are consistent, so feel free to use these names in your css:\n\n- `rsw-editor` (root container)\n- `rsw-ce` (editable area)\n- `rsw-toolbar`\n  - `rsw-btn`\n  - `rsw-separator`\n  - `rsw-dd` (drop down list)\n  \n## Troubleshooting\n\n### Style issues: no list item bullets, wrong link styles and so on\n\n[#31](https://github.com/megahertz/react-simple-wysiwyg/issues/31),\n[#44](https://github.com/megahertz/react-simple-wysiwyg/issues/44),\n[#45](https://github.com/megahertz/react-simple-wysiwyg/issues/45)\n\nRSW editor doesn't isolate its styles from the parent styles. \nIt's a pretty common case when you use a global reset or normalize styles which\nremove bullets or numbers for lists. \nTo fix that, you should redefine these styles again:\n\n```css\n.rsw-ce ul {\n  list-style: disc;\n  padding-left: 2em;\n}\n\n.rsw-ce ol {\n  list-style: decimal;\n  padding-left: 2em;\n}\n```\n\n### Insert a link which target=\"_blank\"\n\n[#55](https://github.com/megahertz/react-simple-wysiwyg/issues/55). Also, it's a\ngood example of inserting a custom HTML element.\n\n## Credits\n\n - Based on \n   [lovasoa/react-contenteditable](https://github.com/lovasoa/react-contenteditable)\n - Uses [Material Design Icons](http://materialdesignicons.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegahertz%2Freact-simple-wysiwyg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmegahertz%2Freact-simple-wysiwyg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegahertz%2Freact-simple-wysiwyg/lists"}