{"id":16888655,"url":"https://github.com/brianhung/editor","last_synced_at":"2025-07-08T19:36:15.758Z","repository":{"id":162737202,"uuid":"309210511","full_name":"BrianHung/editor","owner":"BrianHung","description":"public mirror of a (WIP) rich text editor; demo: https://editor-brianhung.vercel.app/","archived":false,"fork":false,"pushed_at":"2024-05-21T06:45:32.000Z","size":710,"stargazers_count":24,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T09:51:38.811Z","etag":null,"topics":["editor","prosemirror","wysiwyg"],"latest_commit_sha":null,"homepage":"https://editor-brianhung.vercel.app/","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/BrianHung.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":"2020-11-01T23:33:54.000Z","updated_at":"2025-03-07T12:36:34.000Z","dependencies_parsed_at":"2024-05-21T08:03:06.359Z","dependency_job_id":null,"html_url":"https://github.com/BrianHung/editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2Feditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2Feditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2Feditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2Feditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrianHung","download_url":"https://codeload.github.com/BrianHung/editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931455,"owners_count":20534007,"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":["editor","prosemirror","wysiwyg"],"created_at":"2024-10-13T16:53:00.361Z","updated_at":"2025-03-22T08:31:00.267Z","avatar_url":"https://github.com/BrianHung.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## editor\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ca href=\"https://editor-brianhung.vercel.app/\"\u003e\n\t\t\u003cimg width=\"632px\" src=\"./demo.png\" alt=\"image of editor demo\" title=\"click to navigate to demo\"\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n\nThis is a rich text editor built upon the [ProseMirror](https://prosemirror.net/) framework.\nIt is based off [tiptap](https://tiptap.dev/) and [rich-markdown-editor](https://github.com/outline/rich-markdown-editor), but tries to stay agnostic to Vue and React.\n\nTo see the editor in action, visit the [demo](https://editor-brianhung.vercel.app/).\n\n**This repo is a public mirror of private development branch, and is not intended for production use.** The recommended way to use this editor is to fork this repo or use it as a reference in building your own rich text editor; consider it a more extensive version of [ProseMirror Cookbook](https://github.com/PierBover/prosemirror-cookbook). There is no substitute to learning [ProseMirror](https://prosemirror.net/docs/ref/) or for reading the docs.\n\n### usage\n\nTo use with plain JavaScript, pass in the DOM element where you'd want to mount as `place` and an array of extensions to use.\n\n```js\nimport { Editor } from '@brianhung/editor';\nimport { Text } from '@brianhung/editor-text';\nimport { Paragraph } from '@brianhung/editor-paragraph';\nimport { Doc } from '@brianhung/editor-doc';\nimport '@brianhung/editor/style/core.css';\n\nlet place = document.querySelector('#editor');\nlet editor = new Editor({\n\tplace,\n\textensions: [Text(), Paragraph(), Doc()],\n});\n```\n\nTo use with React,\n\n```tsx\nimport { Editor, editorPropsToViewProps } from '@brianhung/editor';\nimport { Text } from '@brianhung/editor-text';\nimport { Paragraph } from '@brianhung/editor-paragraph';\nimport { Doc } from '@brianhung/editor-doc';\nimport { ProseMirror } from '@brianhung/editor-react';\nimport '@brianhung/editor/style/core.css';\n\nexport const EditorDemo = React.memo(() =\u003e {\n\tconst [mount, setMount] = React.useState\u003cHTMLElement | null\u003e(null);\n\tconst [editorState] = React.useState(\n\t\t() =\u003e\n\t\t\teditorPropsToViewProps({\n\t\t\t\tcontent: JSON.parse(localStorage.getItem('content')),\n\t\t\t\textensions: [Text(), Paragraph(), Doc()],\n\t\t\t}).state\n\t);\n\treturn (\n\t\t\u003cProseMirror\n\t\t\tmount={mount}\n\t\t\tdefaultState={editorState}\n\t\t\tdispatchTransaction={function dispatch(this: EditorView, tr) {\n\t\t\t\tthis.updateState(this.state.apply(tr));\n\t\t\t\tlocalStorage.setItem('content', JSON.stringify(this.state.doc.toJSON()));\n\t\t\t}}\n\t\t\u003e\n\t\t\t\u003cdiv ref={setMount} /\u003e\n\t\t\u003c/ProseMirror\u003e\n\t);\n});\n```\n\n### similar libraries\n\n- [tiptap](https://tiptap.dev/)\n- [prosekit](https://github.com/ocavue/prosekit)\n- [remirror](https://github.com/remirror/remirror)\n- [novel](https://github.com/steven-tey/novel)\n- [rich-markdown-editor](https://github.com/outline/outline/tree/main/shared/editor)\n- [stacks-editor](https://github.com/StackExchange/Stacks-Editor)\n- [atlaskit](https://bitbucket.org/atlassian/atlassian-frontend-mirror/src/master/editor/editor-core/)\n- [milkdown](https://github.com/Milkdown/milkdown)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianhung%2Feditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianhung%2Feditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianhung%2Feditor/lists"}