├── .eslintrc.cjs
├── .github
└── workflows
│ └── ci.yml
├── .gitignore
├── LICENSE
├── README.md
├── demo
├── demo.ts
├── index.html
├── package.json
└── yarn.lock
├── jest-setup.ts
├── jest.config.cjs
├── package.json
├── src
├── DetailsView.ts
├── __tests__
│ ├── DetailsView.test.ts
│ ├── schema.test.ts
│ └── util.ts
├── index.ts
└── schema.ts
├── tsconfig.json
├── yarn-error.log
└── yarn.lock
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | },
6 | extends: [
7 | 'eslint:recommended',
8 | 'plugin:@typescript-eslint/recommended',
9 | 'plugin:import/recommended',
10 | 'plugin:import/typescript',
11 | 'plugin:testing-library/dom',
12 | 'plugin:jest-dom/recommended',
13 | ],
14 | parser: '@typescript-eslint/parser',
15 | parserOptions: {
16 | ecmaVersion: 'latest',
17 | sourceType: 'module',
18 | },
19 | plugins: ['@typescript-eslint', 'unused-imports', 'testing-library', 'jest-dom'],
20 | rules: {
21 | 'no-unused-vars': 'off',
22 | '@typescript-eslint/no-unused-vars': ['error'],
23 | 'unused-imports/no-unused-imports': 'error',
24 | 'unused-imports/no-unused-vars': [
25 | 'warn',
26 | {
27 | vars: 'all',
28 | varsIgnorePattern: '^_',
29 | args: 'after-used',
30 | argsIgnorePattern: '^_',
31 | },
32 | ],
33 | 'import/order': [
34 | 'error',
35 | {
36 | 'newlines-between': 'always',
37 | groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
38 | alphabetize: {
39 | order: 'asc',
40 | caseInsensitive: true,
41 | },
42 | },
43 | ],
44 | '@typescript-eslint/consistent-type-imports': 'error',
45 | },
46 | }
47 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: ci
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | pull_request:
8 | branches:
9 | - main
10 |
11 | jobs:
12 | ci:
13 | runs-on: ${{ matrix.os }}
14 | strategy:
15 | matrix:
16 | os: [ubuntu-latest]
17 | node: [16]
18 | steps:
19 | - name: Checkout 🛎
20 | uses: actions/checkout@v3
21 | - name: Setup node env 🏗
22 | uses: actions/setup-node@v3.2.0
23 | with:
24 | node-version: ${{ matrix.node }}
25 | cache: yarn
26 | - name: Install dependencies 👨🏻💻
27 | run: yarn
28 | - name: Run linter 👀
29 | run: yarn lint
30 | - name: Check format 👀
31 | run: |
32 | yarn format
33 | git diff --exit-code
34 | - name: Run tests 🧪
35 | run: yarn test
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | yarn-error.log
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) [year] [fullname]
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ProseMirror details module
2 |
3 | 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.
4 |
5 | ## Documentation
6 |
7 | ### `detailsNodes` (options: DetailsNodesOptions) → Object
8 |
9 | This function creates a set of [node specs](https://prosemirror.net/docs/ref/#model.SchemaSpec.nodes) for details and summary.
10 |
11 | ### `DetailsNodesOptions`
12 |
13 | - `detailsGroup`: string
14 | - A group name (something like "block") to add to the details node type.
15 | - `detailsContent`: string
16 | - The content expression for details node. The first child is already added in summary, and summary is optional.
17 | - `summaryContent`: string
18 | - 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).
19 |
20 | ### `DetailsNode` class implements [NodeView](https://prosemirror.net/docs/ref/#view.NodeView)
21 |
22 | [NodeView](https://prosemirror.net/docs/ref/#view.NodeView) for open/close interaction. Use it in EditorView as follows:
23 |
24 | ```typescript
25 | new EditorView(document.querySelector('#editor'), {
26 | state,
27 | nodeViews: {
28 | details: (node, view, getPos) => new DetailsView(node, view, getPos),
29 | },
30 | })
31 | ```
32 |
--------------------------------------------------------------------------------
/demo/demo.ts:
--------------------------------------------------------------------------------
1 | import { detailsNodes, DetailsView } from '@mh4gf/prosemirror-details'
2 | import devTools from 'prosemirror-dev-tools'
3 | import { buildMenuItems, exampleSetup } from 'prosemirror-example-setup'
4 | import { Dropdown, MenuItem } from 'prosemirror-menu'
5 | import { Schema, DOMParser } from 'prosemirror-model'
6 | import { nodes, marks } from 'prosemirror-schema-basic'
7 | import type { Command } from 'prosemirror-state'
8 | import { EditorState } from 'prosemirror-state'
9 | import { EditorView } from 'prosemirror-view'
10 |
11 | const schema = new Schema({
12 | nodes: {
13 | ...nodes,
14 | ...detailsNodes({
15 | detailsGroup: 'block',
16 | detailsContent: 'block+',
17 | summaryContent: 'text*',
18 | }),
19 | },
20 | marks,
21 | })
22 |
23 | const insertDetails = ({
24 | open,
25 | withSummary = true,
26 | }: {
27 | open: boolean
28 | withSummary?: boolean
29 | }): Command => {
30 | return (state, dispatch) => {
31 | const summary = schema.nodes.summary.createAndFill({}, schema.text('Summary'))
32 | if (!summary) return false
33 |
34 | const details = schema.nodes.details.createAndFill({ open }, withSummary ? [summary] : [])
35 | if (!details) return false
36 |
37 | if (dispatch) {
38 | dispatch(state.tr.replaceSelectionWith(details))
39 | }
40 |
41 | return true
42 | }
43 | }
44 |
45 | const item = (label: string, cmd: Command) => new MenuItem({ label, select: cmd, run: cmd })
46 |
47 | const detailsMenu = [
48 | item('Insert closed details', insertDetails({ open: false })),
49 | item('Insert opened details', insertDetails({ open: true })),
50 | item('Insert details without summary', insertDetails({ open: true, withSummary: false })),
51 | ]
52 | const menuContent = buildMenuItems(schema).fullMenu
53 | menuContent.splice(2, 0, [new Dropdown(detailsMenu, { label: 'details' })])
54 |
55 | const dom = document.querySelector('#content')
56 | if (!dom) {
57 | throw new Error('No #content element found')
58 | }
59 |
60 | const doc = DOMParser.fromSchema(schema).parse(dom)
61 | const state = EditorState.create({
62 | doc,
63 | plugins: exampleSetup({
64 | schema,
65 | menuContent: menuContent as MenuItem[][],
66 | }),
67 | })
68 |
69 | const view = new EditorView(document.querySelector('#editor'), {
70 | state,
71 | nodeViews: {
72 | details: (node, view, getPos) => new DetailsView(node, view, getPos),
73 | },
74 | })
75 |
76 | devTools(view)
77 |
78 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
79 | // @ts-ignore
80 | window.view = view
81 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | prosemirror-details demo
4 |
5 |
6 |
7 |
8 |
21 |
22 | prosemirror-details demo
23 |
24 |
25 |
Example content
26 |
27 | open toggle
28 | hello😄
29 |
30 | - list item
31 | - list item
32 |
33 |
34 |
outside text
35 |