{"id":13449846,"url":"https://github.com/webkom/lego-editor","last_synced_at":"2025-03-12T10:18:27.594Z","repository":{"id":34918351,"uuid":"190024976","full_name":"webkom/lego-editor","owner":"webkom","description":"📝 A React rich text editor written in TS with Slate.js for lego-webapp","archived":false,"fork":false,"pushed_at":"2024-04-12T10:24:05.000Z","size":2857,"stargazers_count":6,"open_issues_count":24,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-12T18:43:34.721Z","etag":null,"topics":["hacktoberfest","lego-webapp","react","slate","vite","wysiwyg"],"latest_commit_sha":null,"homepage":"","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/webkom.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}},"created_at":"2019-06-03T14:46:11.000Z","updated_at":"2024-04-15T11:47:43.052Z","dependencies_parsed_at":"2024-01-16T03:45:54.950Z","dependency_job_id":"e4cebb7a-faac-4ecf-b7ae-abdc356b16e9","html_url":"https://github.com/webkom/lego-editor","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webkom","download_url":"https://codeload.github.com/webkom/lego-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243196623,"owners_count":20251861,"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":["hacktoberfest","lego-webapp","react","slate","vite","wysiwyg"],"created_at":"2024-07-31T06:00:58.314Z","updated_at":"2025-03-12T10:18:27.573Z","avatar_url":"https://github.com/webkom.png","language":"TypeScript","funding_links":[],"categories":["Running the update"],"sub_categories":["By Popularity"],"readme":"# lego-editor\n\n[![Build Status](https://ci.webkom.dev/api/badges/webkom/lego-editor/status.svg)](https://ci.webkom.dev/webkom/lego-editor) ![npm (scoped)](https://img.shields.io/npm/v/@webkom/lego-editor?style=flat-square) [![Dependabot](https://badgen.net/dependabot/webkom/lego-editor/?icon=dependabot)](https://github.com/webkom/lego-editor/pulls?q=is%3Aopen+is%3Apr+label%3Adependencies) ![Dependencies](https://badgen.net/david/dep/webkom/lego-editor/)\n\n\u003e Editor made for [lego-webapp](https://github.com/webkom/lego-webapp) written with [Slate.js](https://docs.slatejs.org)\n\n\u003cimg src=\"https://i.imgur.com/6zIQhYm.png\" /\u003e\n\n## Installation\n\n- Add the package\n  ```sh\n  $ yarn add @webkom/lego-editor\n  ```\n- Import the component in your project\n\n  ```JSX\n  import Editor from '@webkom/lego-editor'\n  // Add the stylesheet\n  import '@webkom/lego-editor/dist/style.css'\n  // Also add the stylesheet from react-image-crop\n  import 'react-image-crop/dist/ReactCrop.css'\n\n  const YourComponent = () =\u003e (\n    \u003cdiv\u003e\n      \u003cEditor placeholder=\"Let the words flow!\"/\u003e\n    \u003c/div\u003e\n  )\n  ```\n\n## Extending the editor\n\nLego-editor uses [Slate.js](https://github.com/ianstormtaylor/slate) version [0.81](https://docs.slatejs.org/general/changelog). You can therefore add any plugins as described in this version of Slate.\nThe `\u003cEditor /\u003e` component accepts the prop `plugins`, which takes an array of plugins\n(`plugins: (Editor =\u003e Editor)[]`).\n\n## Props\n\n| name          | Type                                  | Default | Description                                                                                                                                                                     |\n| ------------- | ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `value`       | `string`                              |         | The editors value/default value                                                                                                                                                 |\n| `disabled`    | `Boolean`                             | `False` | Disables the ability to edit the content                                                                                                                                        |\n| `simple`      | `Boolean`                             | `False` | Removes the toolbar.                                                                                                                                                            |\n| `onChange`    | `string =\u003e void`                      |         | Handler called when the editor value changes. Takes the serialized value                                                                                                        |\n| `onBlur`      | `event =\u003e void`                       |         | Handler called on blur                                                                                                                                                          |\n| `onFocus`     | `event =\u003e void`                       |         | Handler called on focus                                                                                                                                                         |\n| `autoFocus`   | `Boolean`                             | `False` | Enables autoFocus                                                                                                                                                               |\n| `placeholder` | `string`                              |         | A placeholder shown when the editor is empty                                                                                                                                    |\n| `imageUpload` | `Blob =\u003e Promise\u003cRecord\u003cstring,any\u003e\u003e` |         | A function for uploading images. Should contain `src` in the promise object.                                                                                                    |\n| `plugins`     | `(Editor =\u003e Editor)[]`                |         | An array of plugins to load. The first plugin will be applied first (the last one will override any other plugins)                                                              |\n| `domParser`   | `string =\u003e HTMLDocument`              |         | Custom function that the deserializer will use to parse the input value to a HTML document. Can be useful for environments where the browser API is not available, like Node.js |\n\n\u003e See type definitions for more detailed types\n\n## Example app\n\nTo test out the editor using the development application:\n\n```sh\n$ yarn dev\n```\n\n## Development\n\n#### Installing dependencies\n\n```sh\n$ yarn\n```\n\n#### Building the module\n\n```sh\n$ yarn build\n```\n\n#### Linting \u0026 formatting\n\nTo run the linter \u0026 check formatting\n\n```sh\n$ yarn lint\n```\n\nFormatting with prettier\n\n```sh\n$ yarn prettier\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkom%2Flego-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebkom%2Flego-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkom%2Flego-editor/lists"}