Skip to content

Commit 9f76f53

Browse files
denisebroekmandenisebroekman
committed
fix: correct implentation of gap match and divider
1 parent dba467e commit 9f76f53

8 files changed

Lines changed: 272 additions & 399 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@qti-editor/interaction-associate": "^1.0.0",
2626
"@qti-editor/interaction-choice": "^1.0.0",
2727
"@qti-editor/interaction-extended-text": "^1.0.0",
28+
"@qti-editor/interaction-gap-match": "^1.1.0",
2829
"@qti-editor/interaction-hottext": "^1.0.0",
2930
"@qti-editor/interaction-inline-choice": "^1.0.0",
3031
"@qti-editor/interaction-match": "^1.0.0",
@@ -36,9 +37,10 @@
3637
"@qti-editor/prosemirror": "^0.1.0",
3738
"@qti-editor/prosemirror-attributes": "^0.1.0",
3839
"@qti-editor/prosemirror-attributes-ui-prosekit": "^0.1.0",
40+
"@qti-editor/qti-item-divider": "^1.1.0",
3941
"daisyui": "^5.1.6",
4042
"lit": "^3.3.2",
41-
"prosekit": "^0.18.4",
43+
"prosekit": "^0.20.1",
4244
"rxjs": "~7.8.0",
4345
"tslib": "^2.3.0"
4446
},

‎pnpm-lock.yaml‎

Lines changed: 216 additions & 346 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/blocks/convert-menu/index.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
44
import { QtiI18nController, translateQti } from '@qti-editor/interaction-shared/i18n/index.js';
55
import { defineUpdateHandler, type Editor } from 'prosekit/core';
66
import { Selection } from 'prosekit/pm/state';
7-
import { PopoverContent, PopoverRoot, PopoverTrigger } from 'prosekit/lit/popover';
7+
import { PopoverPopup, PopoverRoot, PopoverTrigger } from 'prosekit/lit/popover';
88
import {
99
canConvertFlatListToChoiceInteraction,
1010
convertFlatListToChoiceInteraction,
@@ -18,8 +18,8 @@ if (!customElements.get('prosekit-popover-root')) {
1818
if (!customElements.get('prosekit-popover-trigger')) {
1919
customElements.define('prosekit-popover-trigger', PopoverTrigger);
2020
}
21-
if (!customElements.get('prosekit-popover-content')) {
22-
customElements.define('prosekit-popover-content', PopoverContent);
21+
if (!customElements.get('prosekit-popover-popup')) {
22+
customElements.define('prosekit-popover-popup', PopoverPopup);
2323
}
2424

2525
export interface ConvertMenuItem {
@@ -145,7 +145,7 @@ export class QtiConvertMenu extends LitElement {
145145
<span>${this.i18n.t('convert.trigger')}</span>
146146
</button>
147147
</prosekit-popover-trigger>
148-
<prosekit-popover-content class="flex min-w-64 flex-col gap-1 rounded-lg border border-gray-200 bg-white p-2 text-sm shadow-lg dark:border-gray-800 dark:bg-gray-950 [&:not([data-state])]:hidden">
148+
<prosekit-popover-popup class="flex min-w-64 flex-col gap-1 rounded-lg border border-gray-200 bg-white p-2 text-sm shadow-lg dark:border-gray-800 dark:bg-gray-950 [&:not([data-state])]:hidden">
149149
${items.map(
150150
item => html`
151151
<button
@@ -159,7 +159,7 @@ export class QtiConvertMenu extends LitElement {
159159
</button>
160160
`,
161161
)}
162-
</prosekit-popover-content>
162+
</prosekit-popover-popup>
163163
</prosekit-popover-root>
164164
`;
165165
}

‎src/components/blocks/interaction-insert-menu/index.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
44
import { translateQti, QtiI18nController } from '@qti-editor/interaction-shared/i18n/index.js';
55
import { defineUpdateHandler, type Editor } from 'prosekit/core';
66
import { Selection } from 'prosekit/pm/state';
7-
import { PopoverContent, PopoverRoot, PopoverTrigger } from 'prosekit/lit/popover';
7+
import { PopoverPopup, PopoverRoot, PopoverTrigger } from 'prosekit/lit/popover';
88
import { insertChoiceInteraction } from '@qti-editor/interaction-choice';
99
import { insertExtendedTextInteraction } from '@qti-editor/interaction-extended-text';
1010
import { insertMatchInteraction } from '@qti-editor/interaction-match';
@@ -13,8 +13,8 @@ import { insertSelectPointInteraction } from '@qti-editor/interaction-select-poi
1313
import { insertInlineChoiceInteraction } from '@qti-editor/interaction-inline-choice';
1414
import { insertAssociateInteraction } from '@qti-editor/interaction-associate';
1515
import { insertHottextInteraction } from '@qti-editor/interaction-hottext';
16-
import { insertGap, insertGapMatchInteraction } from '../../../vendor/interaction-gap-match/dist/index.js';
17-
import { insertItemDivider } from '../../../vendor/qti-item-divider/dist/index.js';
16+
import { insertGap, insertGapMatchInteraction } from '@qti-editor/interaction-gap-match';
17+
import { insertItemDivider } from '@qti-editor/qti-item-divider';
1818

1919
import type { EditorView } from 'prosekit/pm/view';
2020

@@ -24,8 +24,8 @@ if (!customElements.get('prosekit-popover-root')) {
2424
if (!customElements.get('prosekit-popover-trigger')) {
2525
customElements.define('prosekit-popover-trigger', PopoverTrigger);
2626
}
27-
if (!customElements.get('prosekit-popover-content')) {
28-
customElements.define('prosekit-popover-content', PopoverContent);
27+
if (!customElements.get('prosekit-popover-popup')) {
28+
customElements.define('prosekit-popover-popup', PopoverPopup);
2929
}
3030

3131
export interface InteractionInsertItem {
@@ -328,7 +328,7 @@ export class QtiInteractionInsertMenu extends LitElement {
328328
<span>${this.i18n.t('interactionInsert.trigger')}</span>
329329
</button>
330330
</prosekit-popover-trigger>
331-
<prosekit-popover-content class="flex min-w-56 flex-col gap-1 rounded-lg border border-gray-200 bg-white p-2 text-sm shadow-lg dark:border-gray-800 dark:bg-gray-950 [&:not([data-state])]:hidden">
331+
<prosekit-popover-popup class="flex min-w-56 flex-col gap-1 rounded-lg border border-gray-200 bg-white p-2 text-sm shadow-lg dark:border-gray-800 dark:bg-gray-950 [&:not([data-state])]:hidden">
332332
${items.map(
333333
item => html`
334334
<button
@@ -342,7 +342,7 @@ export class QtiInteractionInsertMenu extends LitElement {
342342
</button>
343343
`,
344344
)}
345-
</prosekit-popover-content>
345+
</prosekit-popover-popup>
346346
</prosekit-popover-root>
347347
`;
348348
}

‎src/components/editor/ui/image-upload-popover/image-upload-popover.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ class LitImageUploadPopover extends LitElement {
113113
></lit-editor-button>
114114
</prosekit-popover-trigger>
115115
116-
<prosekit-popover-content class="flex flex-col gap-y-4 p-6 text-sm w-sm z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden will-change-transform motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-duration-150 motion-safe:data-[state=closed]:animate-duration-200 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=bottom]:slide-out-to-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=left]:slide-out-to-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=right]:slide-out-to-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[side=top]:slide-out-to-bottom-2">
116+
<prosekit-popover-popup class="flex flex-col gap-y-4 p-6 text-sm w-sm z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden will-change-transform motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-duration-150 motion-safe:data-[state=closed]:animate-duration-200 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=bottom]:slide-out-to-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=left]:slide-out-to-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=right]:slide-out-to-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[side=top]:slide-out-to-bottom-2">
117117
${
118118
!this.file
119119
? html`
@@ -164,7 +164,7 @@ class LitImageUploadPopover extends LitElement {
164164
`
165165
: nothing
166166
}
167-
</prosekit-popover-content>
167+
</prosekit-popover-popup>
168168
</prosekit-popover-root>
169169
`;
170170
}

‎src/components/editor/ui/slash-menu/slash-menu.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { AutocompleteEmpty, AutocompleteItem, AutocompleteList, AutocompletePopover } from 'prosekit/lit/autocomplete'
1+
import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompleteRoot } from 'prosekit/lit/autocomplete'
22

33
// prosekit sets sideEffects:false, causing bare imports to be removed by esbuild in
44
// production builds. Referencing the constructors forces inclusion of the element
55
// registration code from @prosekit/web/autocomplete (which sets sideEffects:true).
6-
if (!customElements.get('prosekit-autocomplete-popover')) customElements.define('prosekit-autocomplete-popover', AutocompletePopover)
7-
if (!customElements.get('prosekit-autocomplete-list')) customElements.define('prosekit-autocomplete-list', AutocompleteList)
6+
if (!customElements.get('prosekit-autocomplete-root')) customElements.define('prosekit-autocomplete-root', AutocompleteRoot)
7+
if (!customElements.get('prosekit-autocomplete-popup')) customElements.define('prosekit-autocomplete-popup', AutocompletePopup)
88
if (!customElements.get('prosekit-autocomplete-item')) customElements.define('prosekit-autocomplete-item', AutocompleteItem)
99
if (!customElements.get('prosekit-autocomplete-empty')) customElements.define('prosekit-autocomplete-empty', AutocompleteEmpty)
1010

@@ -19,8 +19,8 @@ import { insertHottextInteraction } from '@qti-editor/interaction-hottext';
1919
import { insertMatchInteraction } from '@qti-editor/interaction-match';
2020
import { insertOrderInteraction } from '@qti-editor/interaction-order';
2121
import { insertSelectPointInteraction } from '@qti-editor/interaction-select-point';
22-
import { insertGapMatchInteraction } from '../../../../vendor/interaction-gap-match/dist/index.js';
23-
import { insertItemDivider } from '../../../../vendor/qti-item-divider/dist/index.js';
22+
import { insertGapMatchInteraction } from '@qti-editor/interaction-gap-match';
23+
import { insertItemDivider } from '@qti-editor/qti-item-divider';
2424

2525
// Match inputs like "/", "/table", "/heading 1" etc. Do not match "/ heading".
2626
const regex = canUseRegexLookbehind() ? /(?<!\S)\/(\S.*)?$/u : /\/(\S.*)?$/u
@@ -170,12 +170,12 @@ class SlashMenuElement extends LitElement {
170170
const view = this.getView()
171171
const schema = view?.state.schema
172172

173-
return html`<prosekit-autocomplete-popover
173+
return html`<prosekit-autocomplete-root
174174
.editor=${editor}
175175
.regex=${this.disabled ? null : regex}
176176
class="relative block max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden"
177177
>
178-
<prosekit-autocomplete-list .editor=${editor}>
178+
<prosekit-autocomplete-popup .editor=${editor}>
179179
<div class="px-3 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-gray-400">
180180
Interactions
181181
</div>
@@ -367,8 +367,8 @@ class SlashMenuElement extends LitElement {
367367
></lit-editor-slash-menu-item>
368368
369369
<lit-editor-slash-menu-empty class="contents"></lit-editor-slash-menu-empty>
370-
</prosekit-autocomplete-list>
371-
</prosekit-autocomplete-popover>`;
370+
</prosekit-autocomplete-popup>
371+
</prosekit-autocomplete-root>`;
372372
}
373373
}
374374

‎src/components/editor/ui/table-handle/table-handle.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import {
2-
TableHandleColumnRoot,
3-
TableHandleColumnTrigger,
4-
TableHandlePopoverContent,
5-
TableHandlePopoverItem,
2+
TableHandleColumnMenuRoot,
3+
TableHandleColumnMenuTrigger,
4+
TableHandleColumnPopup,
65
TableHandleRoot,
7-
TableHandleRowRoot,
8-
TableHandleRowTrigger,
6+
TableHandleRowMenuRoot,
7+
TableHandleRowMenuTrigger,
8+
TableHandleRowPopup,
99
} from 'prosekit/lit/table-handle'
1010

1111
if (!customElements.get('prosekit-table-handle-root')) customElements.define('prosekit-table-handle-root', TableHandleRoot)
12-
if (!customElements.get('prosekit-table-handle-column-root')) customElements.define('prosekit-table-handle-column-root', TableHandleColumnRoot)
13-
if (!customElements.get('prosekit-table-handle-column-trigger')) customElements.define('prosekit-table-handle-column-trigger', TableHandleColumnTrigger)
14-
if (!customElements.get('prosekit-table-handle-row-root')) customElements.define('prosekit-table-handle-row-root', TableHandleRowRoot)
15-
if (!customElements.get('prosekit-table-handle-row-trigger')) customElements.define('prosekit-table-handle-row-trigger', TableHandleRowTrigger)
16-
if (!customElements.get('prosekit-table-handle-popover-content')) customElements.define('prosekit-table-handle-popover-content', TableHandlePopoverContent)
17-
if (!customElements.get('prosekit-table-handle-popover-item')) customElements.define('prosekit-table-handle-popover-item', TableHandlePopoverItem)
12+
if (!customElements.get('prosekit-table-handle-column-menu-root')) customElements.define('prosekit-table-handle-column-menu-root', TableHandleColumnMenuRoot)
13+
if (!customElements.get('prosekit-table-handle-column-menu-trigger')) customElements.define('prosekit-table-handle-column-menu-trigger', TableHandleColumnMenuTrigger)
14+
if (!customElements.get('prosekit-table-handle-column-popup')) customElements.define('prosekit-table-handle-column-popup', TableHandleColumnPopup)
15+
if (!customElements.get('prosekit-table-handle-row-menu-root')) customElements.define('prosekit-table-handle-row-menu-root', TableHandleRowMenuRoot)
16+
if (!customElements.get('prosekit-table-handle-row-menu-trigger')) customElements.define('prosekit-table-handle-row-menu-trigger', TableHandleRowMenuTrigger)
17+
if (!customElements.get('prosekit-table-handle-row-popup')) customElements.define('prosekit-table-handle-row-popup', TableHandleRowPopup)
1818

1919
import { html, LitElement, nothing } from 'lit'
2020
import { defineUpdateHandler } from 'prosekit/core'
@@ -108,13 +108,14 @@ class LitEditorTableHandle extends LitElement {
108108
if (!item?.canExec) return nothing
109109

110110
return html`
111-
<prosekit-table-handle-popover-item
111+
<button
112112
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
113-
@select=${item.command}
113+
@mousedown=${(event) => event.preventDefault()}
114+
@click=${item.command}
114115
>
115116
<span>${label}</span>
116117
${shortcut ? html`<span class="text-xs tracking-widest text-gray-500 dark:text-gray-500">${shortcut}</span>` : nothing}
117-
</prosekit-table-handle-popover-item>
118+
</button>
118119
`
119120
}
120121

@@ -126,39 +127,39 @@ class LitEditorTableHandle extends LitElement {
126127

127128
return html`
128129
<prosekit-table-handle-root .editor=${editor} class="contents">
129-
<prosekit-table-handle-column-root
130+
<prosekit-table-handle-column-menu-root
130131
.editor=${editor}
131132
class="flex items-center box-border justify-center h-[1.2em] w-[1.5em] bg-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 translate-y-3 border border-gray-200 dark:border-gray-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200"
132133
>
133-
<prosekit-table-handle-column-trigger .editor=${editor}>
134+
<prosekit-table-handle-column-menu-trigger .editor=${editor}>
134135
<div class="i-lucide-grip-horizontal h-5 w-5"></div>
135-
</prosekit-table-handle-column-trigger>
136-
<prosekit-table-handle-popover-content
136+
</prosekit-table-handle-column-menu-trigger>
137+
<prosekit-table-handle-column-popup
137138
class="relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden"
138139
>
139140
${this.renderPopoverItem(state.addTableColumnBefore, 'Insert Left')}
140141
${this.renderPopoverItem(state.addTableColumnAfter, 'Insert Right')}
141142
${this.renderPopoverItem(state.deleteCellSelection, 'Clear Contents', 'Del')}
142143
${this.renderPopoverItem(state.deleteTableColumn, 'Delete Column')}
143-
</prosekit-table-handle-popover-content>
144-
</prosekit-table-handle-column-root>
144+
</prosekit-table-handle-column-popup>
145+
</prosekit-table-handle-column-menu-root>
145146
146-
<prosekit-table-handle-row-root
147+
<prosekit-table-handle-row-menu-root
147148
.editor=${editor}
148149
class="flex items-center box-border justify-center h-[1.5em] w-[1.2em] bg-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 translate-x-3 border border-gray-200 dark:border-gray-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200"
149150
>
150-
<prosekit-table-handle-row-trigger .editor=${editor}>
151+
<prosekit-table-handle-row-menu-trigger .editor=${editor}>
151152
<div class="i-lucide-grip-vertical h-5 w-5"></div>
152-
</prosekit-table-handle-row-trigger>
153-
<prosekit-table-handle-popover-content
153+
</prosekit-table-handle-row-menu-trigger>
154+
<prosekit-table-handle-row-popup
154155
class="relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden"
155156
>
156157
${this.renderPopoverItem(state.addTableRowAbove, 'Insert Above')}
157158
${this.renderPopoverItem(state.addTableRowBelow, 'Insert Below')}
158159
${this.renderPopoverItem(state.deleteCellSelection, 'Clear Contents', 'Del')}
159160
${this.renderPopoverItem(state.deleteTableRow, 'Delete Row')}
160-
</prosekit-table-handle-popover-content>
161-
</prosekit-table-handle-row-root>
161+
</prosekit-table-handle-row-popup>
162+
</prosekit-table-handle-row-menu-root>
162163
</prosekit-table-handle-root>
163164
`
164165
}

‎src/lib/qti-prosekit-integration/interactions-prosekit.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { qtiMatchEnterCommand } from '@qti-editor/interaction-match';
33
import { defineBasicExtension } from 'prosekit/basic';
44
import { defineKeymap, defineNodeSpec, definePlugin, union, type Extension } from 'prosekit/core';
55
import { splitBlock } from 'prosekit/pm/commands';
6-
import { gapMatchInteractionDescriptor } from '../../vendor/interaction-gap-match/dist/index.js';
7-
import { qtiItemDividerDescriptor } from '../../vendor/qti-item-divider/dist/index.js';
6+
import { gapMatchInteractionDescriptor } from '@qti-editor/interaction-gap-match';
7+
import { qtiItemDividerDescriptor } from '@qti-editor/qti-item-divider';
88

99
import type { Command } from 'prosekit/pm/state';
1010
import type { InteractionDescriptor } from '@qti-editor/interfaces';

0 commit comments

Comments
 (0)