{"id":20820631,"url":"https://github.com/hubgit/react-prosemirror","last_synced_at":"2025-04-07T19:16:01.952Z","repository":{"id":26425289,"uuid":"108848824","full_name":"hubgit/react-prosemirror","owner":"hubgit","description":"A React component for ProseMirror","archived":false,"fork":false,"pushed_at":"2023-03-04T03:50:07.000Z","size":1660,"stargazers_count":249,"open_issues_count":10,"forks_count":51,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-06T22:14:14.185Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ow1qi.csb.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/hubgit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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":"2017-10-30T12:37:48.000Z","updated_at":"2025-01-22T13:47:58.000Z","dependencies_parsed_at":"2025-01-16T03:12:26.468Z","dependency_job_id":"3b2e6244-7d54-4a4a-84ce-910bb575209e","html_url":"https://github.com/hubgit/react-prosemirror","commit_stats":null,"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubgit%2Freact-prosemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubgit%2Freact-prosemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubgit%2Freact-prosemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubgit%2Freact-prosemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hubgit","download_url":"https://codeload.github.com/hubgit/react-prosemirror/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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-11-17T22:09:41.717Z","updated_at":"2025-04-07T19:16:01.918Z","avatar_url":"https://github.com/hubgit.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-prosemirror\n\nA React component for [ProseMirror](http://prosemirror.net/).\n\n\u003e **Note**\n\u003e This package provides a solution for efficiently integrating ProseMirror with React, without creating a new API. \n\u003e If you're looking for something easy to use, you might like to try [Tiptap](https://tiptap.dev/) or [Remirror](https://remirror.io/).\n\n## Packages\n\n* [@aeaton/react-prosemirror](packages/react) - React components\n* [@aeaton/prosemirror-commands](packages/commands) - ProseMirror commands\n* [@aeaton/prosemirror-schema](packages/schema) - ProseMirror schema definitions (marks and nodes)\n* [@aeaton/prosemirror-transformers](packages/transformers) - conversion to/from ProseMirror\n* [@aeaton/react-prosemirror-config-default](packages/config-default) - an example configuration ready for use\n* [@aeaton/prosemirror-placeholder](packages/placeholder) - ProseMirror placeholder plugin (decoration and style)\n* [@aeaton/prosemirror-footnotes](packages/footnotes) - ProseMirror footnotes plugin (schema and node view)\n\n## Demo\n\n* [demo](demo) - a fully-configured editor\n\n## Usage\n\n### Quickstart: HTML Editor\n\n```js\nimport { useState } from 'react'\nimport { HtmlEditor, Toolbar, Editor } from '@aeaton/react-prosemirror'\nimport { plugins, schema, toolbar } from '@aeaton/react-prosemirror-config-default'\n\nconst initialValue = '\u003cp\u003e\u003c/p\u003e'\n\nexport const App = () =\u003e {\n  const [value, setValue] = useState(initialValue)\n\n  console.log({ value })\n\n  return (\n    \u003cHtmlEditor\n      schema={schema}\n      plugins={plugins}\n      value={initialValue}\n      handleChange={setValue}\n      debounce={250}\n    \u003e\n      \u003cToolbar toolbar={toolbar} /\u003e\n      \u003cEditor autoFocus /\u003e\n    \u003c/HtmlEditor\u003e\n  )\n}\n```\n\n### Custom Editor\n\nCreate a schema:\n\n```js\nimport { Schema } from 'prosemirror-model'\n\nconst schema = new Schema({\n  nodes: {\n    // a text node\n    text: {},\n    // a top-level doc node, which can contain at least one paragraph\n    doc: { \n      content: 'paragraph+'\n    },\n    // a paragraph node, which can contain some text nodes, represented in HTML as `\u003cp\u003e`\n    paragraph: { \n      content: 'text*',\n      parseDOM: [{ tag: 'p' }],\n      toDOM: () =\u003e ['p', 0],\n    },\n  },\n  marks: {\n    // a strong mark, represented in HTML as `\u003cstrong\u003e`\n    strong: {\n      parseDOM: [{ tag: 'strong' }],\n      toDOM: () =\u003e ['strong', 0],\n    },\n    // an emphasis mark, represented in HTML as `\u003cem\u003e`\n    emphasis: {\n      parseDOM: [{ tag: 'em' }],\n      toDOM: () =\u003e ['em', 0],\n    }\n  }\n})\n```\n\nCreate some commands:\n\n```js\nimport { toggleMark } from 'prosemirror-commands'\n\nconst toggleMarkStrong = toggleMark(schema.marks.strong)\nconst toggleMarkEmphasis = toggleMark(schema.marks.emphasis)\n```\n\n\nCreate plugins for handling history and key presses:\n\n```js\nimport { baseKeymap } from 'prosemirror-commands'\nimport { keymap } from 'prosemirror-keymap'\nimport { history, undo, redo } from 'prosemirror-history'\n\nconst plugins = [\n  history(),\n  keymap({\n    'Mod-z': undo,\n    'Shift-Mod-z': redo,\n    'Meta-b': toggleMarkStrong,\n    'Meta-i': toggleMarkEmphasis,\n  }),\n  keymap(baseKeymap),\n]\n```\n\nCreate a toolbar definition:\n\n```js\nimport { isMarkActive } from '@aeaton/prosemirror-commands'\n\nconst toolbar = [\n  {\n    id: 'marks',\n    items: [\n      {\n        id: 'toggle-strong',\n        content: icons.strong,\n        action: toggleMarkStrong,\n        enable: toggleMarkStrong,\n        active: isMarkActive(schema.marks.strong),\n      },\n      {\n        id: 'toggle-emphasis',\n        title: 'Toggle emphasis',\n        content: icons.emphasis,\n        action: toggleMarkEmphasis,\n        enable: toggleMarkEmphasis,\n        active: isMarkActive(schema.marks.emphasis),\n      },\n    ]\n  }\n]\n```\n\nCreate a doc by parsing some HTML:\n\n```js\nimport { createHTMLTransformer } from '@aeaton/prosemirror-transformers'\n\nconst transformer = createHTMLTransformer(schema)\n\nconst doc = transformer.parse('\u003cp\u003eHello World!\u003c/p\u003e')\n```\n\nConnect everything together to make your editor:\n\n```jsx\nconst CustomEditor = () =\u003e {\n  return (\n    \u003cEditorProvider doc={doc} plugins={plugins}\u003e\n      \u003cToolbar toolbar={toolbar} /\u003e\n      \u003cEditor /\u003e\n    \u003c/EditorProvider\u003e\n  )\n}\n```\n\nThe editor state is available in descendants of `EditorProvider` via a `useEditorState` hook:\n\n```js\nimport { useEditorState } from '@aeaton/react-prosemirror'\n\nconst ExampleComponent = () =\u003e {\n  const state = useEditorState()\n  \n  // do something with the current state\n}\n```\n\nThe editor view is available in descendants of `EditorProvider` via a `useEditorView` hook:\n\n```js\nimport { useEditorView } from '@aeaton/react-prosemirror'\n\nconst ExampleComponent = () =\u003e {\n  const view = useEditorView()\n  \n  // do something with the view\n}\n```\n\n## Components\n\n### EditorProvider\n\nThe `EditorProvider` component takes optional `schema` (or `doc`), `plugins` and `editorProps` props, uses them to create a new ProseMirror state and view, then makes the state and view available in React's context via `useEditorState` and `useEditorView` hooks.\n\n### Editor\n\nThe `Editor` component renders the ProseMirror view into a DOM element.\n\n### Toolbar\n\nThe `Toolbar` component takes a `toolbar` prop describing the toolbar (an array of grouped toolbar items) and renders a toolbar.\n\nEach toolbar item has `content` (e.g. an icon), `action` (a command that's run when the button is pressed), plus optional `active` (whether the item is currently active) and `enable` (whether the item is currently enabled) props.\n\n### ChangeHandler\n\nThe `ChangeHandler` component makes it easy to listen for changes to the ProseMirror document.\n\nWhen the document changes, after an optional `debounce`, it's run through the `transformer` then passed to the `handleChange` callback.\n\n## Styles\n\nEach component has a class so it can be styled with CSS, and several of the styles can also be altered using CSS variables. \n\nSee [the demo styles](https://github.com/hubgit/react-prosemirror/tree/main/demo/styles) for examples of this.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubgit%2Freact-prosemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhubgit%2Freact-prosemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubgit%2Freact-prosemirror/lists"}