9 | 10 | prosemirror-dev-toolkit 11 | 12 |
13 |This page has no editor to test whether devTools unmounts properly.
14 |11 | 12 | Original prosemirror-dev-tools 13 | 14 |
15 |16 | Github repo 17 |
18 |11 | 12 | prosemirror-dev-toolkit 13 | 14 |
15 |16 | Github repo 17 |
18 |An example React app with ProseMirror editor that uses prosemirror-dev-toolkit.
19 |-
21 |
19 | 20 | prosemirror-dev-toolkit 21 | 22 |
23 |24 | This page mounts a ProseMirror editor without any extra props and it's used in Cypress 25 | tests 26 |
27 |13 | 14 | prosemirror-dev-toolkit 15 | 16 |
17 |18 | This page contains ProseMirror instances, two of them inside iframe to debug the Chrome 19 | extension. 20 |
21 |-
8 | {#each listItems as item}
9 |
- 10 | 15 | 16 | {/each} 17 |
16 |
30 |
17 |
20 | Nodes
18 | 19 |
31 |
45 |
32 |
35 | Marks
33 | 34 |
28 | {#if $snapshots.length === 0}
29 | toggleViewSnapshot(view, snap)}
36 | onRestore={handleRestoreSnapshot}
37 | onExport={exportSnapshot}
38 | onDelete={deleteSnapshot}
39 | />
40 | {/if}
41 |
42 | Save snapshots by clicking "Save" button.
30 | {:else}
31 |
26 |
27 |
36 |
37 |
38 |
89 |
--------------------------------------------------------------------------------
/packages/site/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # site
2 |
3 | ## 0.0.15
4 |
5 | ### Patch Changes
6 |
7 | - Updated dependencies [d7f1d88]
8 | - prosemirror-dev-toolkit@1.1.8
9 |
10 | ## 0.0.14
11 |
12 | ### Patch Changes
13 |
14 | - Updated dependencies [e0b293a]
15 | - prosemirror-dev-toolkit@1.1.7
16 |
17 | ## 0.0.13
18 |
19 | ### Patch Changes
20 |
21 | - Updated dependencies [cb08e82]
22 | - prosemirror-dev-toolkit@1.1.6
23 |
24 | ## 0.0.12
25 |
26 | ### Patch Changes
27 |
28 | - Updated dependencies [ce24336]
29 | - Updated dependencies [ce24336]
30 | - prosemirror-dev-toolkit@1.1.5
31 |
32 | ## 0.0.11
33 |
34 | ### Patch Changes
35 |
36 | - Updated dependencies [c8be8b7]
37 | - prosemirror-dev-toolkit@1.1.4
38 |
39 | ## 0.0.10
40 |
41 | ### Patch Changes
42 |
43 | - Updated dependencies [2cd2d91]
44 | - Updated dependencies [2cd2d91]
45 | - prosemirror-dev-toolkit@1.1.3
46 |
47 | ## 0.0.9
48 |
49 | ### Patch Changes
50 |
51 | - Updated dependencies [9e01617]
52 | - prosemirror-dev-toolkit@1.1.2
53 |
54 | ## 0.0.8
55 |
56 | ### Patch Changes
57 |
58 | - Updated dependencies [0f629e4]
59 | - prosemirror-dev-toolkit@1.1.1
60 |
61 | ## 0.0.7
62 |
63 | ### Patch Changes
64 |
65 | - Updated dependencies [55a651c]
66 | - prosemirror-dev-toolkit@1.1.0
67 |
68 | ## 0.0.6
69 |
70 | ### Patch Changes
71 |
72 | - Updated dependencies [60b4483]
73 | - Updated dependencies [42e2871]
74 | - Updated dependencies [989590d]
75 | - prosemirror-dev-toolkit@1.0.7
76 |
77 | ## 0.0.5
78 |
79 | ### Patch Changes
80 |
81 | - Updated dependencies [3972cdf]
82 | - Updated dependencies [0fbd67e]
83 | - prosemirror-dev-toolkit@1.0.6
84 |
85 | ## 0.0.4
86 |
87 | ### Patch Changes
88 |
89 | - Updated dependencies [96b1137]
90 | - prosemirror-dev-toolkit@1.0.5
91 |
92 | ## 0.0.3
93 |
94 | ### Patch Changes
95 |
96 | - Updated dependencies [09f2fe9]
97 | - prosemirror-dev-toolkit@1.0.4
98 |
99 | ## 0.0.2
100 |
101 | ### Patch Changes
102 |
103 | - Updated dependencies [9583d49]
104 | - prosemirror-dev-toolkit@1.0.3
105 |
--------------------------------------------------------------------------------
/packages/prosemirror-dev-toolkit/cypress/e2e/plugins-tab.spec.cy.ts:
--------------------------------------------------------------------------------
1 | const TEST_TEXT1 = 'asdf qwer'
2 |
3 | describe('# Plugins tab', () => {
4 | before(() => {
5 | cy.visit('/')
6 | })
7 |
8 | it('Should show the default plugins and allow inspecting them', () => {
9 | cy.devTools().find('ul.tabs-menu li button').contains('PLUGINS').click()
10 | cy.devTools()
11 | .find('.floating-dock')
12 | .includesStringCount('Plugin has no state')
13 | .should('equal', 1)
14 | // There should be 9 plugins in total
15 | cy.devTools().find('.left-panel').find('li').should('have.length', 9)
16 |
17 | cy.devTools().find('li button').contains('HISTORY$').click()
18 | cy.devTools().find('h2').contains('Plugin state').should('exist')
19 |
20 | // The history plugin's tree-view should show only four nodes
21 | cy.devTools().find('.svelte-tree-view').eq(0).find('li').should('have.length', 4)
22 | // Clicking expand should auto-expand all nodes
23 | cy.devTools().find('button').contains('expand').click()
24 | cy.devTools().find('.svelte-tree-view').eq(0).find('li').should('have.length', 9)
25 |
26 | // Dispatch a transaction to see that the history plugin state changes
27 | cy.window().then(window => {
28 | const { editorView: view } = window
29 | const tr = view.state.tr
30 | const schema = view.state.schema
31 | tr.insert(1, schema.nodes.paragraph.create(null, schema.text(TEST_TEXT1)))
32 | view.dispatch(tr)
33 | })
34 |
35 | cy.devTools().find('.svelte-tree-view').eq(0).find('li').should('have.length', 53)
36 | cy.devTools().find('button').contains('collapse').click()
37 | cy.devTools().find('.svelte-tree-view').eq(0).find('li').should('have.length', 4)
38 |
39 | // Must change the shown plugin since history plugin contains non-mocked timestamps
40 | cy.devTools().find('li button').contains('EXAMPLE-PLUGIN$').click()
41 | cy.devTools()
42 | .find('.floating-dock')
43 | .matchImage({
44 | screenshotConfig: {
45 | capture: 'viewport'
46 | },
47 | maxDiffThreshold: 0.04,
48 | diffConfig: {
49 | threshold: 0.01,
50 | alpha: 0.2
51 | }
52 | })
53 | })
54 | })
55 |
--------------------------------------------------------------------------------
/.github/workflows/version-publish.yml:
--------------------------------------------------------------------------------
1 | name: Version and publish packages with changesets
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | workflow_dispatch:
8 |
9 | jobs:
10 | version:
11 | timeout-minutes: 15
12 | runs-on: ubuntu-latest
13 | strategy:
14 | matrix:
15 | node-version: [16.x]
16 | steps:
17 | - name: Checkout Repo
18 | uses: actions/checkout@v3
19 | with:
20 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
21 | fetch-depth: 0
22 |
23 | - name: Setup node
24 | uses: actions/setup-node@v3
25 | with:
26 | node-version: ${{ matrix.node_version }}
27 |
28 | - name: Install dependencies with pnpm
29 | uses: ./.github/actions/pnpm
30 |
31 | - name: Build & test
32 | uses: ./.github/actions/build-test
33 |
34 | - name: Setup .npmrc
35 | run: |
36 | cat << EOF > "$HOME/.npmrc"
37 | //registry.npmjs.org/:_authToken=$NPM_TOKEN
38 | EOF
39 | env:
40 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
41 | GH_TOKEN: ${{ secrets.GH_PAT }}
42 | HOME: ${{ github.workspace }}
43 |
44 | - name: Update Chrome extension version
45 | run: |
46 | export VERSION=$(cat ./packages/extension/package.json | grep version | awk -F'[ "]' 'NR==1{print $7}') &&
47 | sed -i 's/"version": "*.*.*"/"version": "'$VERSION'"/' ./packages/extension/public/manifest.json
48 | sed -i 's/"version": "*.*.*"/"version": "'$VERSION'"/' ./packages/extension/dist/manifest.json
49 |
50 | - name: Create and publish versions
51 | uses: changesets/action@v1
52 | with:
53 | version: pnpm ci:version
54 | commit: 'chore(changeset): version update'
55 | title: 'chore(changeset): version update'
56 | publish: pnpm ci:publish
57 | env:
58 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
59 | HOME: ${{ github.workspace }}
60 |
61 | - name: Archive Chrome Extension
62 | uses: actions/upload-artifact@v3
63 | with:
64 | name: chrome
65 | path: ./packages/extension/dist
66 |
--------------------------------------------------------------------------------
/packages/site/src/pm/example-plugin/index.ts:
--------------------------------------------------------------------------------
1 | import { Plugin, PluginKey } from 'prosemirror-state'
2 | import { DecorationSet } from 'prosemirror-view'
3 |
4 | import { findAddedOrRemovedNodes } from './findChangedNodes'
5 |
6 | import { DummyClass } from './types'
7 | import type { TrackedNodes, PluginState } from './types'
8 |
9 | export const examplePluginKey = new PluginKeyLike this one!
Try it out by typing in here or see more examples.
' 29 | }, 30 | { 31 | size: 240, 32 | element: 33 | 'Like this one!
Try it out by typing in here or see more examples.
' 34 | } 35 | ] 36 | } 37 | } as PopUpState 38 | } 39 | 40 | export function init() { 41 | if (chrome.runtime) { 42 | const created = chrome.runtime.connect({ 43 | name: 'pm-devtools-pop-up' 44 | }) 45 | created.onMessage.addListener(listenPort) 46 | created.onDisconnect.addListener(() => { 47 | port.set(undefined) 48 | }) 49 | port.set(created) 50 | } else { 51 | listenPort(EXAMPLE) 52 | } 53 | } 54 | 55 | export function send61 | 62 | prosemirror-dev-toolkit 63 | 64 |
65 |This editor uses Yjs collaboration which handles the updates to the editor state
66 |-
21 | {#each listItems as group, groupIdx (group.id)}
22 |
- 23 | 42 | 43 | {#if group.isGroup && group.expanded} 44 | {#each group.entries as subEntry (subEntry?.id)} 45 |
- 46 | 53 | 54 | {/each} 55 | {/if} 56 | {/each} 57 |
57 |
59 |
60 | {#if pluginState}
61 |
77 |
62 |
70 | {/if}
71 | {#if pluginState}
72 | Plugin state
63 |
64 |
67 |
68 |
69 | Plugin has no state
75 | {/if}
76 |
42 |
53 | {startPos}
43 |
44 |
50 |
51 | {endPos}
52 | - = 1}>
54 | {#each fragment.content as child, i}
55 |
55 |
67 |
56 |
59 | Current doc
57 | 58 |
68 |
94 |
69 |
74 | Selection
70 | 73 |
76 |
83 | Active marks
77 | {#if activeMarks.length === 0} 78 |No active marks
79 | {:else}
80 |
84 |
93 | Document stats
85 |-
68 | {#each snapshots as snap}
69 |
- 70 | {#if editedSnap && editedSnap.timestamp === snap.timestamp} 71 | 76 | {:else} 77 | 82 | {/if} 83 | 90 | 91 | 92 | 99 | 100 | {/each} 101 |