https://github.com/mh4gf/prosemirror-details

ProseMirror's open/close details list component
https://github.com/mh4gf/prosemirror-details

Last synced: about 1 year ago
JSON representation

ProseMirror's open/close details list component

• Host: GitHub
• URL: https://github.com/mh4gf/prosemirror-details
• Owner: MH4GF
• License: mit
• Created: 2022-10-01T04:58:29.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-08T05:23:01.000Z (over 3 years ago)
• Last Synced: 2025-02-06T16:54:20.170Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://prosemirror-details-list.vercel.app
• Size: 218 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ProseMirror details module

This module defines an open/closeable [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) element that works with rich text editor based on ProseMirror.

## Documentation

### `detailsNodes` (options: DetailsNodesOptions) → Object

This function creates a set of [node specs](https://prosemirror.net/docs/ref/#model.SchemaSpec.nodes) for details and summary.

### `DetailsNodesOptions`

- `detailsGroup`: string

  - A group name (something like "block") to add to the details node type.

- `detailsContent`: string

  - The content expression for details node. The first child is already added in summary, and summary is optional.

- `summaryContent`: string

  - The content expression for summary node. A text or inline group would be specified. Check to see if the element can be included internally as part of the HTML specification for [summary element](https://developer.mozilla.org/ja/docs/Web/HTML/Element/summary).

### `DetailsNode` class implements [NodeView](https://prosemirror.net/docs/ref/#view.NodeView)

[NodeView](https://prosemirror.net/docs/ref/#view.NodeView) for open/close interaction. Use it in EditorView as follows:

```typescript

new EditorView(document.querySelector('#editor'), {

  state,

  nodeViews: {

    details: (node, view, getPos) => new DetailsView(node, view, getPos),

  },

})

```