@portabletext/toolbar 8.0.43 → 8.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +376 -523
  2. package/dist/index.d.ts.map +1 -0
  3. package/dist/index.js +1300 -1953
  4. package/dist/index.js.map +1 -1
  5. package/package.json +15 -13
package/dist/index.js CHANGED
@@ -1,2032 +1,1379 @@
1
1
  import { useEditor, useEditorSelector } from "@portabletext/editor";
2
2
  import * as selectors from "@portabletext/editor/selectors";
3
- import { getApplicableSchema, compareApplicableSchema, isSelectionExpanded } from "@portabletext/editor/selectors";
3
+ import { compareApplicableSchema, getApplicableSchema, isSelectionExpanded } from "@portabletext/editor/selectors";
4
4
  import { c } from "react/compiler-runtime";
5
5
  import { getUnionSchema } from "@portabletext/editor/traversal";
6
- import { defineBehavior, execute, raise, effect, forward } from "@portabletext/editor/behaviors";
6
+ import { defineBehavior, effect, execute, forward, raise } from "@portabletext/editor/behaviors";
7
7
  import { useActor, useActorRef } from "@xstate/react";
8
- import { fromCallback, setup, assign } from "xstate";
8
+ import { assign, fromCallback, setup } from "xstate";
9
9
  import * as React from "react";
10
10
  import { useEffect } from "react";
11
+ /**
12
+ * @beta
13
+ *
14
+ * React hook that subscribes to {@link getApplicableSchema} for the active
15
+ * editor and returns a stable reference across editor ticks while the
16
+ * applicable set is unchanged.
17
+ *
18
+ * Pair with {@link useToolbarSchema} to render a static toolbar whose
19
+ * buttons stay stable across selection moves and gate their enabled state
20
+ * on whether the corresponding name is in the relevant set.
21
+ */
11
22
  function useApplicableSchema() {
12
- const editor = useEditor();
13
- return useEditorSelector(editor, getApplicableSchema, compareApplicableSchema);
23
+ let editor = useEditor();
24
+ return useEditorSelector(editor, getApplicableSchema, compareApplicableSchema);
14
25
  }
26
+ /**
27
+ * @beta
28
+ *
29
+ * Resolve the editor's full toolbar schema. Returns the union of every
30
+ * decorator, annotation, list, style, block object and inline object declared
31
+ * anywhere in the editor's schema graph that is reachable from a position
32
+ * where text is edited - the root schema merged with the sub-schema of every
33
+ * registered container whose field accepts text blocks. Useful for rendering
34
+ * a static toolbar whose buttons stay stable across selection moves.
35
+ *
36
+ * Re-renders only when the schema graph or the extension callbacks change.
37
+ * Pair with {@link useApplicableSchema} to determine which entries are
38
+ * applicable at the current selection (which buttons should be enabled vs.
39
+ * disabled).
40
+ */
15
41
  function useToolbarSchema(props) {
16
- const $ = c(37), editor = useEditor(), union = useEditorSelector(editor, _temp$2, compareSchemas);
17
- let t0;
18
- if ($[0] !== props || $[1] !== union.decorators) {
19
- let t12;
20
- $[3] !== props ? (t12 = (decorator) => props.extendDecorator?.(decorator) ?? decorator, $[3] = props, $[4] = t12) : t12 = $[4], t0 = union.decorators.map(t12), $[0] = props, $[1] = union.decorators, $[2] = t0;
21
- } else
22
- t0 = $[2];
23
- let t1;
24
- if ($[5] !== props || $[6] !== union.annotations) {
25
- let t22;
26
- $[8] !== props ? (t22 = (annotation) => props.extendAnnotation?.(annotation) ?? annotation, $[8] = props, $[9] = t22) : t22 = $[9], t1 = union.annotations.map(t22), $[5] = props, $[6] = union.annotations, $[7] = t1;
27
- } else
28
- t1 = $[7];
29
- let t2;
30
- if ($[10] !== props || $[11] !== union.lists) {
31
- let t32;
32
- $[13] !== props ? (t32 = (list) => props.extendList?.(list) ?? list, $[13] = props, $[14] = t32) : t32 = $[14], t2 = union.lists.map(t32), $[10] = props, $[11] = union.lists, $[12] = t2;
33
- } else
34
- t2 = $[12];
35
- let t3;
36
- if ($[15] !== props || $[16] !== union.blockObjects) {
37
- let t42;
38
- $[18] !== props ? (t42 = (blockObject) => props.extendBlockObject?.(blockObject) ?? blockObject, $[18] = props, $[19] = t42) : t42 = $[19], t3 = union.blockObjects.map(t42), $[15] = props, $[16] = union.blockObjects, $[17] = t3;
39
- } else
40
- t3 = $[17];
41
- let t4;
42
- if ($[20] !== props || $[21] !== union.inlineObjects) {
43
- let t52;
44
- $[23] !== props ? (t52 = (inlineObject) => props.extendInlineObject?.(inlineObject) ?? inlineObject, $[23] = props, $[24] = t52) : t52 = $[24], t4 = union.inlineObjects.map(t52), $[20] = props, $[21] = union.inlineObjects, $[22] = t4;
45
- } else
46
- t4 = $[22];
47
- let t5;
48
- if ($[25] !== props || $[26] !== union.styles) {
49
- let t62;
50
- $[28] !== props ? (t62 = (style) => props.extendStyle?.(style) ?? style, $[28] = props, $[29] = t62) : t62 = $[29], t5 = union.styles.map(t62), $[25] = props, $[26] = union.styles, $[27] = t5;
51
- } else
52
- t5 = $[27];
53
- let t6;
54
- return $[30] !== t0 || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 ? (t6 = {
55
- decorators: t0,
56
- annotations: t1,
57
- lists: t2,
58
- blockObjects: t3,
59
- inlineObjects: t4,
60
- styles: t5
61
- }, $[30] = t0, $[31] = t1, $[32] = t2, $[33] = t3, $[34] = t4, $[35] = t5, $[36] = t6) : t6 = $[36], t6;
42
+ let $ = c(37), editor = useEditor(), union = useEditorSelector(editor, _temp$2, compareSchemas), t0;
43
+ if ($[0] !== props || $[1] !== union.decorators) {
44
+ let t1;
45
+ $[3] === props ? t1 = $[4] : (t1 = (decorator) => props.extendDecorator?.(decorator) ?? decorator, $[3] = props, $[4] = t1), t0 = union.decorators.map(t1), $[0] = props, $[1] = union.decorators, $[2] = t0;
46
+ } else t0 = $[2];
47
+ let t1;
48
+ if ($[5] !== props || $[6] !== union.annotations) {
49
+ let t2;
50
+ $[8] === props ? t2 = $[9] : (t2 = (annotation) => props.extendAnnotation?.(annotation) ?? annotation, $[8] = props, $[9] = t2), t1 = union.annotations.map(t2), $[5] = props, $[6] = union.annotations, $[7] = t1;
51
+ } else t1 = $[7];
52
+ let t2;
53
+ if ($[10] !== props || $[11] !== union.lists) {
54
+ let t3;
55
+ $[13] === props ? t3 = $[14] : (t3 = (list) => props.extendList?.(list) ?? list, $[13] = props, $[14] = t3), t2 = union.lists.map(t3), $[10] = props, $[11] = union.lists, $[12] = t2;
56
+ } else t2 = $[12];
57
+ let t3;
58
+ if ($[15] !== props || $[16] !== union.blockObjects) {
59
+ let t4;
60
+ $[18] === props ? t4 = $[19] : (t4 = (blockObject) => props.extendBlockObject?.(blockObject) ?? blockObject, $[18] = props, $[19] = t4), t3 = union.blockObjects.map(t4), $[15] = props, $[16] = union.blockObjects, $[17] = t3;
61
+ } else t3 = $[17];
62
+ let t4;
63
+ if ($[20] !== props || $[21] !== union.inlineObjects) {
64
+ let t5;
65
+ $[23] === props ? t5 = $[24] : (t5 = (inlineObject) => props.extendInlineObject?.(inlineObject) ?? inlineObject, $[23] = props, $[24] = t5), t4 = union.inlineObjects.map(t5), $[20] = props, $[21] = union.inlineObjects, $[22] = t4;
66
+ } else t4 = $[22];
67
+ let t5;
68
+ if ($[25] !== props || $[26] !== union.styles) {
69
+ let t6;
70
+ $[28] === props ? t6 = $[29] : (t6 = (style) => props.extendStyle?.(style) ?? style, $[28] = props, $[29] = t6), t5 = union.styles.map(t6), $[25] = props, $[26] = union.styles, $[27] = t5;
71
+ } else t5 = $[27];
72
+ let t6;
73
+ return $[30] !== t0 || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 ? (t6 = {
74
+ decorators: t0,
75
+ annotations: t1,
76
+ lists: t2,
77
+ blockObjects: t3,
78
+ inlineObjects: t4,
79
+ styles: t5
80
+ }, $[30] = t0, $[31] = t1, $[32] = t2, $[33] = t3, $[34] = t4, $[35] = t5, $[36] = t6) : t6 = $[36], t6;
62
81
  }
82
+ /**
83
+ * @beta
84
+ */
63
85
  function _temp$2(snapshot) {
64
- return getUnionSchema(snapshot.context.schema, snapshot.context.containers);
86
+ return getUnionSchema(snapshot.context.schema, snapshot.context.containers);
65
87
  }
66
88
  function compareSchemas(a, b) {
67
- return a === b ? !0 : compareNamed(a.decorators, b.decorators) && compareNamed(a.annotations, b.annotations) && compareNamed(a.lists, b.lists) && compareNamed(a.styles, b.styles) && compareNamed(a.blockObjects, b.blockObjects) && compareNamed(a.inlineObjects, b.inlineObjects);
89
+ return a === b || compareNamed(a.decorators, b.decorators) && compareNamed(a.annotations, b.annotations) && compareNamed(a.lists, b.lists) && compareNamed(a.styles, b.styles) && compareNamed(a.blockObjects, b.blockObjects) && compareNamed(a.inlineObjects, b.inlineObjects);
68
90
  }
69
91
  function compareNamed(a, b) {
70
- if (a === b)
71
- return !0;
72
- if (a.length !== b.length)
73
- return !1;
74
- for (let i = 0; i < a.length; i++)
75
- if (a[i].name !== b[i].name)
76
- return !1;
77
- return !0;
92
+ if (a === b) return !0;
93
+ if (a.length !== b.length) return !1;
94
+ for (let i = 0; i < a.length; i++) if (a[i].name !== b[i].name) return !1;
95
+ return !0;
78
96
  }
79
- const disableListener = fromCallback(({
80
- input,
81
- sendBack
82
- }) => (input.editor.getSnapshot().context.readOnly ? sendBack({
83
- type: "disable"
84
- }) : sendBack({
85
- type: "enable"
86
- }), input.editor.on("*", () => {
87
- input.editor.getSnapshot().context.readOnly ? sendBack({
88
- type: "disable"
89
- }) : sendBack({
90
- type: "enable"
91
- });
92
- }, {
93
- batch: !0
94
- }).unsubscribe));
97
+ const disableListener = fromCallback(({ input, sendBack }) => (input.editor.getSnapshot().context.readOnly ? sendBack({ type: "disable" }) : sendBack({ type: "enable" }), input.editor.on("*", () => {
98
+ input.editor.getSnapshot().context.readOnly ? sendBack({ type: "disable" }) : sendBack({ type: "enable" });
99
+ }, { batch: !0 }).unsubscribe));
95
100
  function useMutuallyExclusiveAnnotation(props) {
96
- const $ = c(5), editor = useEditor();
97
- let t0, t1;
98
- $[0] !== editor || $[1] !== props.schemaType.mutuallyExclusive || $[2] !== props.schemaType.name ? (t0 = () => {
99
- const mutuallyExclusive = props.schemaType.mutuallyExclusive;
100
- if (mutuallyExclusive)
101
- return editor.registerBehavior({
102
- behavior: defineBehavior({
103
- on: "annotation.add",
104
- guard: (t2) => {
105
- const {
106
- snapshot,
107
- event
108
- } = t2;
109
- return event.annotation.name !== props.schemaType.name ? !1 : isSelectionExpanded(snapshot);
110
- },
111
- actions: [(t3) => {
112
- const {
113
- event: event_0
114
- } = t3;
115
- return [...mutuallyExclusive.map(_temp$1), execute(event_0)];
116
- }]
117
- })
118
- });
119
- }, t1 = [editor, props.schemaType.name, props.schemaType.mutuallyExclusive], $[0] = editor, $[1] = props.schemaType.mutuallyExclusive, $[2] = props.schemaType.name, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), useEffect(t0, t1);
101
+ let $ = c(5), editor = useEditor(), t0, t1;
102
+ $[0] !== editor || $[1] !== props.schemaType.mutuallyExclusive || $[2] !== props.schemaType.name ? (t0 = () => {
103
+ let mutuallyExclusive = props.schemaType.mutuallyExclusive;
104
+ if (mutuallyExclusive) return editor.registerBehavior({ behavior: defineBehavior({
105
+ on: "annotation.add",
106
+ guard: (t2) => {
107
+ let { snapshot, event } = t2;
108
+ return event.annotation.name === props.schemaType.name && isSelectionExpanded(snapshot);
109
+ },
110
+ actions: [(t3) => {
111
+ let { event: event_0 } = t3;
112
+ return [...mutuallyExclusive.map(_temp$1), execute(event_0)];
113
+ }]
114
+ }) });
115
+ }, t1 = [
116
+ editor,
117
+ props.schemaType.name,
118
+ props.schemaType.mutuallyExclusive
119
+ ], $[0] = editor, $[1] = props.schemaType.mutuallyExclusive, $[2] = props.schemaType.name, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), useEffect(t0, t1);
120
120
  }
121
121
  function _temp$1(annotation) {
122
- return raise({
123
- type: "annotation.remove",
124
- annotation: {
125
- name: annotation
126
- }
127
- });
122
+ return raise({
123
+ type: "annotation.remove",
124
+ annotation: { name: annotation }
125
+ });
128
126
  }
129
- const activeListener$6 = fromCallback(({
130
- input,
131
- sendBack
132
- }) => (selectors.isActiveAnnotation(input.schemaType.name)(input.editor.getSnapshot()) ? sendBack({
133
- type: "set active"
134
- }) : sendBack({
135
- type: "set inactive"
136
- }), input.editor.on("*", () => {
137
- const snapshot = input.editor.getSnapshot();
138
- selectors.isActiveAnnotation(input.schemaType.name)(snapshot) ? sendBack({
139
- type: "set active"
140
- }) : sendBack({
141
- type: "set inactive"
142
- });
143
- }, {
144
- batch: !0
145
- }).unsubscribe)), keyboardShortcutRemove = fromCallback(({
146
- input
147
- }) => {
148
- const shortcut = input.schemaType.shortcut;
149
- if (shortcut)
150
- return input.editor.registerBehavior({
151
- behavior: defineBehavior({
152
- on: "keyboard.keydown",
153
- guard: ({
154
- event
155
- }) => shortcut.guard(event.originEvent),
156
- actions: [() => [raise({
157
- type: "annotation.remove",
158
- annotation: {
159
- name: input.schemaType.name
160
- }
161
- }), effect(() => {
162
- input.editor.send({
163
- type: "focus"
164
- });
165
- })]]
166
- })
167
- });
168
- }), keyboardShortcutShowInsertDialog = fromCallback(({
169
- input,
170
- sendBack
171
- }) => {
172
- const shortcut = input.schemaType.shortcut;
173
- if (shortcut)
174
- return input.editor.registerBehavior({
175
- behavior: defineBehavior({
176
- on: "keyboard.keydown",
177
- guard: ({
178
- event
179
- }) => shortcut.guard(event.originEvent),
180
- actions: [() => [effect(() => {
181
- sendBack({
182
- type: "open dialog"
183
- });
184
- })]]
185
- })
186
- });
127
+ const activeListener$6 = fromCallback(({ input, sendBack }) => (selectors.isActiveAnnotation(input.schemaType.name)(input.editor.getSnapshot()) ? sendBack({ type: "set active" }) : sendBack({ type: "set inactive" }), input.editor.on("*", () => {
128
+ let snapshot = input.editor.getSnapshot();
129
+ selectors.isActiveAnnotation(input.schemaType.name)(snapshot) ? sendBack({ type: "set active" }) : sendBack({ type: "set inactive" });
130
+ }, { batch: !0 }).unsubscribe)), keyboardShortcutRemove = fromCallback(({ input }) => {
131
+ let shortcut = input.schemaType.shortcut;
132
+ if (shortcut) return input.editor.registerBehavior({ behavior: defineBehavior({
133
+ on: "keyboard.keydown",
134
+ guard: ({ event }) => shortcut.guard(event.originEvent),
135
+ actions: [() => [raise({
136
+ type: "annotation.remove",
137
+ annotation: { name: input.schemaType.name }
138
+ }), effect(() => {
139
+ input.editor.send({ type: "focus" });
140
+ })]]
141
+ }) });
142
+ }), keyboardShortcutShowInsertDialog = fromCallback(({ input, sendBack }) => {
143
+ let shortcut = input.schemaType.shortcut;
144
+ if (shortcut) return input.editor.registerBehavior({ behavior: defineBehavior({
145
+ on: "keyboard.keydown",
146
+ guard: ({ event }) => shortcut.guard(event.originEvent),
147
+ actions: [() => [effect(() => {
148
+ sendBack({ type: "open dialog" });
149
+ })]]
150
+ }) });
187
151
  }), annotationButtonMachine = setup({
188
- types: {
189
- context: {},
190
- input: {},
191
- events: {}
192
- },
193
- actions: {
194
- "add annotation": ({
195
- context,
196
- event
197
- }) => {
198
- event.type === "add" && (context.editor.send({
199
- type: "annotation.add",
200
- annotation: {
201
- name: context.schemaType.name,
202
- value: event.annotation.value
203
- }
204
- }), context.editor.send({
205
- type: "focus"
206
- }));
207
- },
208
- "remove annotation": ({
209
- context
210
- }) => {
211
- context.editor.send({
212
- type: "annotation.remove",
213
- annotation: {
214
- name: context.schemaType.name
215
- }
216
- }), context.editor.send({
217
- type: "focus"
218
- });
219
- }
220
- },
221
- actors: {
222
- "active listener": activeListener$6,
223
- "disable listener": disableListener,
224
- "keyboard shortcut.remove": keyboardShortcutRemove,
225
- "keyboard shortcut.show insert dialog": keyboardShortcutShowInsertDialog
226
- }
152
+ types: {
153
+ context: {},
154
+ input: {},
155
+ events: {}
156
+ },
157
+ actions: {
158
+ "add annotation": ({ context, event }) => {
159
+ event.type === "add" && (context.editor.send({
160
+ type: "annotation.add",
161
+ annotation: {
162
+ name: context.schemaType.name,
163
+ value: event.annotation.value
164
+ }
165
+ }), context.editor.send({ type: "focus" }));
166
+ },
167
+ "remove annotation": ({ context }) => {
168
+ context.editor.send({
169
+ type: "annotation.remove",
170
+ annotation: { name: context.schemaType.name }
171
+ }), context.editor.send({ type: "focus" });
172
+ }
173
+ },
174
+ actors: {
175
+ "active listener": activeListener$6,
176
+ "disable listener": disableListener,
177
+ "keyboard shortcut.remove": keyboardShortcutRemove,
178
+ "keyboard shortcut.show insert dialog": keyboardShortcutShowInsertDialog
179
+ }
227
180
  }).createMachine({
228
- id: "annotation button",
229
- context: ({
230
- input
231
- }) => ({
232
- editor: input.editor,
233
- schemaType: input.schemaType
234
- }),
235
- invoke: [{
236
- src: "active listener",
237
- input: ({
238
- context
239
- }) => ({
240
- editor: context.editor,
241
- schemaType: context.schemaType
242
- })
243
- }, {
244
- src: "disable listener",
245
- input: ({
246
- context
247
- }) => ({
248
- editor: context.editor,
249
- schemaType: context.schemaType
250
- })
251
- }],
252
- initial: "disabled",
253
- states: {
254
- disabled: {
255
- initial: "inactive",
256
- states: {
257
- inactive: {
258
- on: {
259
- enable: {
260
- target: "#annotation button.enabled.inactive"
261
- },
262
- "set active": {
263
- target: "active"
264
- }
265
- }
266
- },
267
- active: {
268
- on: {
269
- enable: {
270
- target: "#annotation button.enabled.active"
271
- },
272
- "set inactive": {
273
- target: "inactive"
274
- }
275
- }
276
- }
277
- }
278
- },
279
- enabled: {
280
- initial: "inactive",
281
- states: {
282
- inactive: {
283
- initial: "idle",
284
- on: {
285
- disable: {
286
- target: "#annotation button.disabled.inactive"
287
- },
288
- "set active": {
289
- target: "#annotation button.enabled.active"
290
- },
291
- add: {
292
- actions: "add annotation"
293
- }
294
- },
295
- states: {
296
- idle: {
297
- invoke: {
298
- src: "keyboard shortcut.show insert dialog",
299
- input: ({
300
- context
301
- }) => ({
302
- editor: context.editor,
303
- schemaType: context.schemaType
304
- })
305
- },
306
- on: {
307
- "open dialog": {
308
- target: "showing dialog"
309
- }
310
- }
311
- },
312
- "showing dialog": {
313
- on: {
314
- "close dialog": {
315
- target: "idle"
316
- }
317
- }
318
- }
319
- }
320
- },
321
- active: {
322
- invoke: {
323
- src: "keyboard shortcut.remove",
324
- input: ({
325
- context
326
- }) => ({
327
- editor: context.editor,
328
- schemaType: context.schemaType
329
- })
330
- },
331
- on: {
332
- "set inactive": {
333
- target: "#annotation button.enabled.inactive"
334
- },
335
- disable: {
336
- target: "#annotation button.disabled.active"
337
- },
338
- remove: {
339
- actions: "remove annotation"
340
- }
341
- }
342
- }
343
- }
344
- }
345
- }
181
+ id: "annotation button",
182
+ context: ({ input }) => ({
183
+ editor: input.editor,
184
+ schemaType: input.schemaType
185
+ }),
186
+ invoke: [{
187
+ src: "active listener",
188
+ input: ({ context }) => ({
189
+ editor: context.editor,
190
+ schemaType: context.schemaType
191
+ })
192
+ }, {
193
+ src: "disable listener",
194
+ input: ({ context }) => ({
195
+ editor: context.editor,
196
+ schemaType: context.schemaType
197
+ })
198
+ }],
199
+ initial: "disabled",
200
+ states: {
201
+ disabled: {
202
+ initial: "inactive",
203
+ states: {
204
+ inactive: { on: {
205
+ enable: { target: "#annotation button.enabled.inactive" },
206
+ "set active": { target: "active" }
207
+ } },
208
+ active: { on: {
209
+ enable: { target: "#annotation button.enabled.active" },
210
+ "set inactive": { target: "inactive" }
211
+ } }
212
+ }
213
+ },
214
+ enabled: {
215
+ initial: "inactive",
216
+ states: {
217
+ inactive: {
218
+ initial: "idle",
219
+ on: {
220
+ disable: { target: "#annotation button.disabled.inactive" },
221
+ "set active": { target: "#annotation button.enabled.active" },
222
+ add: { actions: "add annotation" }
223
+ },
224
+ states: {
225
+ idle: {
226
+ invoke: {
227
+ src: "keyboard shortcut.show insert dialog",
228
+ input: ({ context }) => ({
229
+ editor: context.editor,
230
+ schemaType: context.schemaType
231
+ })
232
+ },
233
+ on: { "open dialog": { target: "showing dialog" } }
234
+ },
235
+ "showing dialog": { on: { "close dialog": { target: "idle" } } }
236
+ }
237
+ },
238
+ active: {
239
+ invoke: {
240
+ src: "keyboard shortcut.remove",
241
+ input: ({ context }) => ({
242
+ editor: context.editor,
243
+ schemaType: context.schemaType
244
+ })
245
+ },
246
+ on: {
247
+ "set inactive": { target: "#annotation button.enabled.inactive" },
248
+ disable: { target: "#annotation button.disabled.active" },
249
+ remove: { actions: "remove annotation" }
250
+ }
251
+ }
252
+ }
253
+ }
254
+ }
346
255
  });
256
+ /**
257
+ * @beta
258
+ * Manages the state, keyboard shortcut and available events for an annotation
259
+ * button.
260
+ *
261
+ * Note: This hook assumes that the button triggers a dialog for inputting
262
+ * the annotation value.
263
+ */
347
264
  function useAnnotationButton(props) {
348
- const $ = c(8), editor = useEditor();
349
- let t0;
350
- $[0] !== editor || $[1] !== props.schemaType ? (t0 = {
351
- input: {
352
- editor,
353
- schemaType: props.schemaType
354
- }
355
- }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
356
- const [snapshot, send] = useActor(annotationButtonMachine, t0);
357
- useMutuallyExclusiveAnnotation(props);
358
- let t1;
359
- $[3] !== snapshot ? (t1 = {
360
- matches: (state) => snapshot.matches(state)
361
- }, $[3] = snapshot, $[4] = t1) : t1 = $[4];
362
- let t2;
363
- return $[5] !== send || $[6] !== t1 ? (t2 = {
364
- snapshot: t1,
365
- send
366
- }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
265
+ let $ = c(8), editor = useEditor(), t0;
266
+ $[0] !== editor || $[1] !== props.schemaType ? (t0 = { input: {
267
+ editor,
268
+ schemaType: props.schemaType
269
+ } }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
270
+ let [snapshot, send] = useActor(annotationButtonMachine, t0);
271
+ useMutuallyExclusiveAnnotation(props);
272
+ let t1;
273
+ $[3] === snapshot ? t1 = $[4] : (t1 = { matches: (state) => snapshot.matches(state) }, $[3] = snapshot, $[4] = t1);
274
+ let t2;
275
+ return $[5] !== send || $[6] !== t1 ? (t2 = {
276
+ snapshot: t1,
277
+ send
278
+ }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
367
279
  }
368
- const activeListener$5 = fromCallback(({
369
- input,
370
- sendBack
371
- }) => input.editor.on("*", () => {
372
- const snapshot = input.editor.getSnapshot(), activeAnnotations = selectors.getActiveAnnotations(snapshot), focusBlock = selectors.getFocusBlock(snapshot);
373
- if (activeAnnotations.length === 0 || !focusBlock) {
374
- sendBack({
375
- type: "set inactive"
376
- });
377
- return;
378
- }
379
- const firstSelectedChild = input.editor.dom.getChildNodes(snapshot).at(0);
380
- if (!firstSelectedChild || !(firstSelectedChild instanceof Element)) {
381
- sendBack({
382
- type: "set inactive"
383
- });
384
- return;
385
- }
386
- const elementRef = React.createRef();
387
- elementRef.current = firstSelectedChild, sendBack({
388
- type: "set active",
389
- annotations: activeAnnotations.flatMap((annotation) => {
390
- const schemaType = input.schemaTypes.find((schemaType2) => schemaType2.name === annotation._type);
391
- return schemaType ? {
392
- value: annotation,
393
- schemaType,
394
- at: [...focusBlock.path, "markDefs", {
395
- _key: annotation._key
396
- }]
397
- } : [];
398
- }),
399
- elementRef
400
- });
401
- }, {
402
- batch: !0
403
- }).unsubscribe), annotationPopoverMachine = setup({
404
- types: {
405
- context: {},
406
- input: {},
407
- events: {}
408
- },
409
- actions: {
410
- reset: assign({
411
- annotations: [],
412
- elementRef: React.createRef()
413
- }),
414
- remove: ({
415
- context,
416
- event
417
- }) => {
418
- event.type === "remove" && (context.editor.send({
419
- type: "annotation.remove",
420
- annotation: {
421
- name: event.schemaType.name
422
- }
423
- }), context.editor.send({
424
- type: "focus"
425
- }));
426
- }
427
- },
428
- actors: {
429
- "disable listener": disableListener,
430
- "active listener": activeListener$5
431
- }
280
+ const activeListener$5 = fromCallback(({ input, sendBack }) => input.editor.on("*", () => {
281
+ let snapshot = input.editor.getSnapshot(), activeAnnotations = selectors.getActiveAnnotations(snapshot), focusBlock = selectors.getFocusBlock(snapshot);
282
+ if (activeAnnotations.length === 0 || !focusBlock) {
283
+ sendBack({ type: "set inactive" });
284
+ return;
285
+ }
286
+ let firstSelectedChild = input.editor.dom.getChildNodes(snapshot).at(0);
287
+ if (!firstSelectedChild || !(firstSelectedChild instanceof Element)) {
288
+ sendBack({ type: "set inactive" });
289
+ return;
290
+ }
291
+ let elementRef = React.createRef();
292
+ elementRef.current = firstSelectedChild, sendBack({
293
+ type: "set active",
294
+ annotations: activeAnnotations.flatMap((annotation) => {
295
+ let schemaType = input.schemaTypes.find((schemaType) => schemaType.name === annotation._type);
296
+ return schemaType ? {
297
+ value: annotation,
298
+ schemaType,
299
+ at: [
300
+ ...focusBlock.path,
301
+ "markDefs",
302
+ { _key: annotation._key }
303
+ ]
304
+ } : [];
305
+ }),
306
+ elementRef
307
+ });
308
+ }, { batch: !0 }).unsubscribe), annotationPopoverMachine = setup({
309
+ types: {
310
+ context: {},
311
+ input: {},
312
+ events: {}
313
+ },
314
+ actions: {
315
+ reset: assign({
316
+ annotations: [],
317
+ elementRef: React.createRef()
318
+ }),
319
+ remove: ({ context, event }) => {
320
+ event.type === "remove" && (context.editor.send({
321
+ type: "annotation.remove",
322
+ annotation: { name: event.schemaType.name }
323
+ }), context.editor.send({ type: "focus" }));
324
+ }
325
+ },
326
+ actors: {
327
+ "disable listener": disableListener,
328
+ "active listener": activeListener$5
329
+ }
432
330
  }).createMachine({
433
- id: "annotation popover",
434
- context: ({
435
- input
436
- }) => ({
437
- editor: input.editor,
438
- schemaTypes: input.schemaTypes,
439
- annotations: [],
440
- elementRef: React.createRef()
441
- }),
442
- invoke: [{
443
- src: "disable listener",
444
- input: ({
445
- context
446
- }) => ({
447
- editor: context.editor
448
- })
449
- }],
450
- initial: "disabled",
451
- states: {
452
- disabled: {
453
- initial: "inactive",
454
- states: {
455
- inactive: {
456
- entry: ["reset"],
457
- on: {
458
- "set active": {
459
- actions: assign({
460
- annotations: ({
461
- event
462
- }) => event.annotations,
463
- elementRef: ({
464
- event
465
- }) => event.elementRef
466
- }),
467
- target: "active"
468
- },
469
- enable: {
470
- target: "#annotation popover.enabled.inactive"
471
- }
472
- }
473
- },
474
- active: {
475
- on: {
476
- "set inactive": {
477
- target: "inactive"
478
- },
479
- enable: {
480
- target: "#annotation popover.enabled.active"
481
- }
482
- }
483
- }
484
- }
485
- },
486
- enabled: {
487
- invoke: [{
488
- src: "active listener",
489
- input: ({
490
- context
491
- }) => ({
492
- editor: context.editor,
493
- schemaTypes: context.schemaTypes
494
- })
495
- }],
496
- initial: "inactive",
497
- states: {
498
- inactive: {
499
- entry: ["reset"],
500
- on: {
501
- "set active": {
502
- target: "active",
503
- actions: assign({
504
- annotations: ({
505
- event
506
- }) => event.annotations,
507
- elementRef: ({
508
- event
509
- }) => event.elementRef
510
- })
511
- },
512
- disable: {
513
- target: "#annotation popover.disabled.inactive"
514
- }
515
- }
516
- },
517
- active: {
518
- on: {
519
- "set inactive": {
520
- target: "inactive"
521
- },
522
- disable: {
523
- target: "#annotation popover.disabled.active"
524
- },
525
- "set active": {
526
- actions: assign({
527
- annotations: ({
528
- event
529
- }) => event.annotations,
530
- elementRef: ({
531
- event
532
- }) => event.elementRef
533
- })
534
- },
535
- edit: {
536
- actions: ({
537
- context,
538
- event
539
- }) => {
540
- context.editor.send({
541
- type: "annotation.set",
542
- at: event.at,
543
- props: event.props
544
- }), context.editor.send({
545
- type: "focus"
546
- });
547
- }
548
- },
549
- remove: {
550
- actions: ({
551
- context,
552
- event
553
- }) => {
554
- context.editor.send({
555
- type: "annotation.remove",
556
- annotation: {
557
- name: event.schemaType.name
558
- }
559
- }), context.editor.send({
560
- type: "focus"
561
- });
562
- }
563
- },
564
- close: {
565
- actions: ({
566
- context
567
- }) => {
568
- context.editor.send({
569
- type: "focus"
570
- });
571
- },
572
- target: "inactive"
573
- }
574
- }
575
- }
576
- }
577
- }
578
- }
331
+ id: "annotation popover",
332
+ context: ({ input }) => ({
333
+ editor: input.editor,
334
+ schemaTypes: input.schemaTypes,
335
+ annotations: [],
336
+ elementRef: React.createRef()
337
+ }),
338
+ invoke: [{
339
+ src: "disable listener",
340
+ input: ({ context }) => ({ editor: context.editor })
341
+ }],
342
+ initial: "disabled",
343
+ states: {
344
+ disabled: {
345
+ initial: "inactive",
346
+ states: {
347
+ inactive: {
348
+ entry: ["reset"],
349
+ on: {
350
+ "set active": {
351
+ actions: assign({
352
+ annotations: ({ event }) => event.annotations,
353
+ elementRef: ({ event }) => event.elementRef
354
+ }),
355
+ target: "active"
356
+ },
357
+ enable: { target: "#annotation popover.enabled.inactive" }
358
+ }
359
+ },
360
+ active: { on: {
361
+ "set inactive": { target: "inactive" },
362
+ enable: { target: "#annotation popover.enabled.active" }
363
+ } }
364
+ }
365
+ },
366
+ enabled: {
367
+ invoke: [{
368
+ src: "active listener",
369
+ input: ({ context }) => ({
370
+ editor: context.editor,
371
+ schemaTypes: context.schemaTypes
372
+ })
373
+ }],
374
+ initial: "inactive",
375
+ states: {
376
+ inactive: {
377
+ entry: ["reset"],
378
+ on: {
379
+ "set active": {
380
+ target: "active",
381
+ actions: assign({
382
+ annotations: ({ event }) => event.annotations,
383
+ elementRef: ({ event }) => event.elementRef
384
+ })
385
+ },
386
+ disable: { target: "#annotation popover.disabled.inactive" }
387
+ }
388
+ },
389
+ active: { on: {
390
+ "set inactive": { target: "inactive" },
391
+ disable: { target: "#annotation popover.disabled.active" },
392
+ "set active": { actions: assign({
393
+ annotations: ({ event }) => event.annotations,
394
+ elementRef: ({ event }) => event.elementRef
395
+ }) },
396
+ edit: { actions: ({ context, event }) => {
397
+ context.editor.send({
398
+ type: "annotation.set",
399
+ at: event.at,
400
+ props: event.props
401
+ }), context.editor.send({ type: "focus" });
402
+ } },
403
+ remove: { actions: ({ context, event }) => {
404
+ context.editor.send({
405
+ type: "annotation.remove",
406
+ annotation: { name: event.schemaType.name }
407
+ }), context.editor.send({ type: "focus" });
408
+ } },
409
+ close: {
410
+ actions: ({ context }) => {
411
+ context.editor.send({ type: "focus" });
412
+ },
413
+ target: "inactive"
414
+ }
415
+ } }
416
+ }
417
+ }
418
+ }
579
419
  });
420
+ /**
421
+ * @beta
422
+ * Manages the state and available events for an annotation popover.
423
+ */
580
424
  function useAnnotationPopover(props) {
581
- const $ = c(14), editor = useEditor();
582
- let t0;
583
- $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = {
584
- input: {
585
- editor,
586
- schemaTypes: props.schemaTypes
587
- }
588
- }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
589
- const [actorSnapshot, send] = useActor(annotationPopoverMachine, t0);
590
- let t1;
591
- $[3] !== actorSnapshot.context.annotations || $[4] !== actorSnapshot.context.elementRef ? (t1 = {
592
- annotations: actorSnapshot.context.annotations,
593
- elementRef: actorSnapshot.context.elementRef
594
- }, $[3] = actorSnapshot.context.annotations, $[4] = actorSnapshot.context.elementRef, $[5] = t1) : t1 = $[5];
595
- let t2;
596
- $[6] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2) : t2 = $[7];
597
- let t3;
598
- $[8] !== t1 || $[9] !== t2 ? (t3 = {
599
- context: t1,
600
- matches: t2
601
- }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
602
- let t4;
603
- return $[11] !== send || $[12] !== t3 ? (t4 = {
604
- snapshot: t3,
605
- send
606
- }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
425
+ let $ = c(14), editor = useEditor(), t0;
426
+ $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = { input: {
427
+ editor,
428
+ schemaTypes: props.schemaTypes
429
+ } }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
430
+ let [actorSnapshot, send] = useActor(annotationPopoverMachine, t0), t1;
431
+ $[3] !== actorSnapshot.context.annotations || $[4] !== actorSnapshot.context.elementRef ? (t1 = {
432
+ annotations: actorSnapshot.context.annotations,
433
+ elementRef: actorSnapshot.context.elementRef
434
+ }, $[3] = actorSnapshot.context.annotations, $[4] = actorSnapshot.context.elementRef, $[5] = t1) : t1 = $[5];
435
+ let t2;
436
+ $[6] === actorSnapshot ? t2 = $[7] : (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2);
437
+ let t3;
438
+ $[8] !== t1 || $[9] !== t2 ? (t3 = {
439
+ context: t1,
440
+ matches: t2
441
+ }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
442
+ let t4;
443
+ return $[11] !== send || $[12] !== t3 ? (t4 = {
444
+ snapshot: t3,
445
+ send
446
+ }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
607
447
  }
608
- const keyboardShortcutListener$2 = fromCallback(({
609
- input,
610
- sendBack
611
- }) => {
612
- const shortcut = input.schemaType.shortcut;
613
- if (shortcut)
614
- return input.editor.registerBehavior({
615
- behavior: defineBehavior({
616
- on: "keyboard.keydown",
617
- guard: ({
618
- event
619
- }) => shortcut.guard(event.originEvent),
620
- actions: [() => [effect(() => {
621
- sendBack({
622
- type: "open dialog"
623
- });
624
- })]]
625
- })
626
- });
448
+ const keyboardShortcutListener$2 = fromCallback(({ input, sendBack }) => {
449
+ let shortcut = input.schemaType.shortcut;
450
+ if (shortcut) return input.editor.registerBehavior({ behavior: defineBehavior({
451
+ on: "keyboard.keydown",
452
+ guard: ({ event }) => shortcut.guard(event.originEvent),
453
+ actions: [() => [effect(() => {
454
+ sendBack({ type: "open dialog" });
455
+ })]]
456
+ }) });
627
457
  }), blockObjectButtonMachine = setup({
628
- types: {
629
- context: {},
630
- input: {},
631
- events: {}
632
- },
633
- actions: {
634
- insert: ({
635
- context,
636
- event
637
- }) => {
638
- event.type === "insert" && (context.editor.send({
639
- type: "insert.block object",
640
- blockObject: {
641
- name: context.schemaType.name,
642
- value: event.value
643
- },
644
- placement: event.placement ?? "auto"
645
- }), context.editor.send({
646
- type: "focus"
647
- }));
648
- }
649
- },
650
- actors: {
651
- "disable listener": disableListener,
652
- "keyboard shortcut listener": keyboardShortcutListener$2
653
- }
458
+ types: {
459
+ context: {},
460
+ input: {},
461
+ events: {}
462
+ },
463
+ actions: { insert: ({ context, event }) => {
464
+ event.type === "insert" && (context.editor.send({
465
+ type: "insert.block object",
466
+ blockObject: {
467
+ name: context.schemaType.name,
468
+ value: event.value
469
+ },
470
+ placement: event.placement ?? "auto"
471
+ }), context.editor.send({ type: "focus" }));
472
+ } },
473
+ actors: {
474
+ "disable listener": disableListener,
475
+ "keyboard shortcut listener": keyboardShortcutListener$2
476
+ }
654
477
  }).createMachine({
655
- id: "block object button",
656
- context: ({
657
- input
658
- }) => ({
659
- editor: input.editor,
660
- schemaType: input.schemaType
661
- }),
662
- invoke: [{
663
- src: "disable listener",
664
- input: ({
665
- context
666
- }) => ({
667
- editor: context.editor
668
- })
669
- }],
670
- initial: "disabled",
671
- states: {
672
- disabled: {
673
- on: {
674
- enable: {
675
- target: "enabled"
676
- }
677
- }
678
- },
679
- enabled: {
680
- on: {
681
- disable: {
682
- target: "disabled"
683
- }
684
- },
685
- initial: "idle",
686
- states: {
687
- idle: {
688
- invoke: [{
689
- src: "keyboard shortcut listener",
690
- input: ({
691
- context
692
- }) => ({
693
- editor: context.editor,
694
- schemaType: context.schemaType
695
- })
696
- }],
697
- on: {
698
- "open dialog": {
699
- target: "showing dialog"
700
- }
701
- }
702
- },
703
- "showing dialog": {
704
- on: {
705
- "close dialog": {
706
- target: "idle"
707
- },
708
- insert: {
709
- actions: ["insert"],
710
- target: "idle"
711
- }
712
- }
713
- }
714
- }
715
- }
716
- }
478
+ id: "block object button",
479
+ context: ({ input }) => ({
480
+ editor: input.editor,
481
+ schemaType: input.schemaType
482
+ }),
483
+ invoke: [{
484
+ src: "disable listener",
485
+ input: ({ context }) => ({ editor: context.editor })
486
+ }],
487
+ initial: "disabled",
488
+ states: {
489
+ disabled: { on: { enable: { target: "enabled" } } },
490
+ enabled: {
491
+ on: { disable: { target: "disabled" } },
492
+ initial: "idle",
493
+ states: {
494
+ idle: {
495
+ invoke: [{
496
+ src: "keyboard shortcut listener",
497
+ input: ({ context }) => ({
498
+ editor: context.editor,
499
+ schemaType: context.schemaType
500
+ })
501
+ }],
502
+ on: { "open dialog": { target: "showing dialog" } }
503
+ },
504
+ "showing dialog": { on: {
505
+ "close dialog": { target: "idle" },
506
+ insert: {
507
+ actions: ["insert"],
508
+ target: "idle"
509
+ }
510
+ } }
511
+ }
512
+ }
513
+ }
717
514
  });
515
+ /**
516
+ * @beta
517
+ * Manages the state, keyboard shortcut and available events for a block
518
+ * object button.
519
+ *
520
+ * Note: This hook assumes that the button triggers a dialog for inputting
521
+ * the block object value.
522
+ */
718
523
  function useBlockObjectButton(props) {
719
- const $ = c(8), editor = useEditor();
720
- let t0;
721
- $[0] !== editor || $[1] !== props.schemaType ? (t0 = {
722
- input: {
723
- editor,
724
- schemaType: props.schemaType
725
- }
726
- }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
727
- const [actorSnapshot, send] = useActor(blockObjectButtonMachine, t0);
728
- let t1;
729
- $[3] !== actorSnapshot ? (t1 = {
730
- matches: (state) => actorSnapshot.matches(state)
731
- }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
732
- let t2;
733
- return $[5] !== send || $[6] !== t1 ? (t2 = {
734
- snapshot: t1,
735
- send
736
- }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
524
+ let $ = c(8), editor = useEditor(), t0;
525
+ $[0] !== editor || $[1] !== props.schemaType ? (t0 = { input: {
526
+ editor,
527
+ schemaType: props.schemaType
528
+ } }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
529
+ let [actorSnapshot, send] = useActor(blockObjectButtonMachine, t0), t1;
530
+ $[3] === actorSnapshot ? t1 = $[4] : (t1 = { matches: (state) => actorSnapshot.matches(state) }, $[3] = actorSnapshot, $[4] = t1);
531
+ let t2;
532
+ return $[5] !== send || $[6] !== t1 ? (t2 = {
533
+ snapshot: t1,
534
+ send
535
+ }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
737
536
  }
738
- const activeListener$4 = fromCallback(({
739
- input,
740
- sendBack
741
- }) => input.editor.on("selection", () => {
742
- const snapshot = input.editor.getSnapshot();
743
- if (!selectors.isSelectionCollapsed(snapshot)) {
744
- sendBack({
745
- type: "set inactive"
746
- });
747
- return;
748
- }
749
- const focusBlockObject = selectors.getFocusBlockObject(snapshot);
750
- if (!focusBlockObject) {
751
- sendBack({
752
- type: "set inactive"
753
- });
754
- return;
755
- }
756
- const schemaType = input.schemaTypes.find((schemaType2) => schemaType2.name === focusBlockObject.node._type);
757
- if (!schemaType) {
758
- sendBack({
759
- type: "set inactive"
760
- });
761
- return;
762
- }
763
- const firstSelectedNode = input.editor.dom.getBlockNodes(snapshot).at(0);
764
- if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
765
- sendBack({
766
- type: "set inactive"
767
- });
768
- return;
769
- }
770
- const elementRef = React.createRef();
771
- elementRef.current = firstSelectedNode, sendBack({
772
- type: "set active",
773
- blockObjects: [{
774
- value: focusBlockObject.node,
775
- schemaType,
776
- at: focusBlockObject.path
777
- }],
778
- elementRef
779
- });
780
- }, {
781
- batch: !0
782
- }).unsubscribe), blockObjectPopoverMachine = setup({
783
- types: {
784
- context: {},
785
- input: {},
786
- events: {}
787
- },
788
- actions: {
789
- reset: assign({
790
- blockObjects: [],
791
- elementRef: React.createRef()
792
- })
793
- },
794
- actors: {
795
- "disable listener": disableListener,
796
- "active listener": activeListener$4
797
- }
537
+ const activeListener$4 = fromCallback(({ input, sendBack }) => input.editor.on("selection", () => {
538
+ let snapshot = input.editor.getSnapshot();
539
+ if (!selectors.isSelectionCollapsed(snapshot)) {
540
+ sendBack({ type: "set inactive" });
541
+ return;
542
+ }
543
+ let focusBlockObject = selectors.getFocusBlockObject(snapshot);
544
+ if (!focusBlockObject) {
545
+ sendBack({ type: "set inactive" });
546
+ return;
547
+ }
548
+ let schemaType = input.schemaTypes.find((schemaType) => schemaType.name === focusBlockObject.node._type);
549
+ if (!schemaType) {
550
+ sendBack({ type: "set inactive" });
551
+ return;
552
+ }
553
+ let firstSelectedNode = input.editor.dom.getBlockNodes(snapshot).at(0);
554
+ if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
555
+ sendBack({ type: "set inactive" });
556
+ return;
557
+ }
558
+ let elementRef = React.createRef();
559
+ elementRef.current = firstSelectedNode, sendBack({
560
+ type: "set active",
561
+ blockObjects: [{
562
+ value: focusBlockObject.node,
563
+ schemaType,
564
+ at: focusBlockObject.path
565
+ }],
566
+ elementRef
567
+ });
568
+ }, { batch: !0 }).unsubscribe), blockObjectPopoverMachine = setup({
569
+ types: {
570
+ context: {},
571
+ input: {},
572
+ events: {}
573
+ },
574
+ actions: { reset: assign({
575
+ blockObjects: [],
576
+ elementRef: React.createRef()
577
+ }) },
578
+ actors: {
579
+ "disable listener": disableListener,
580
+ "active listener": activeListener$4
581
+ }
798
582
  }).createMachine({
799
- id: "block object popover",
800
- context: ({
801
- input
802
- }) => ({
803
- editor: input.editor,
804
- schemaTypes: input.schemaTypes,
805
- blockObjects: [],
806
- elementRef: React.createRef()
807
- }),
808
- invoke: [{
809
- src: "disable listener",
810
- input: ({
811
- context
812
- }) => ({
813
- editor: context.editor
814
- })
815
- }, {
816
- src: "active listener",
817
- input: ({
818
- context
819
- }) => ({
820
- editor: context.editor,
821
- schemaTypes: context.schemaTypes
822
- })
823
- }],
824
- initial: "disabled",
825
- states: {
826
- disabled: {
827
- initial: "inactive",
828
- states: {
829
- inactive: {
830
- entry: ["reset"],
831
- on: {
832
- "set active": {
833
- actions: assign({
834
- blockObjects: ({
835
- event
836
- }) => event.blockObjects,
837
- elementRef: ({
838
- event
839
- }) => event.elementRef
840
- }),
841
- target: "active"
842
- },
843
- enable: {
844
- target: "#block object popover.enabled.inactive"
845
- }
846
- }
847
- },
848
- active: {
849
- on: {
850
- "set inactive": {
851
- target: "inactive"
852
- },
853
- enable: {
854
- target: "#block object popover.enabled.active"
855
- }
856
- }
857
- }
858
- }
859
- },
860
- enabled: {
861
- initial: "inactive",
862
- states: {
863
- inactive: {
864
- entry: ["reset"],
865
- on: {
866
- "set active": {
867
- target: "active",
868
- actions: assign({
869
- blockObjects: ({
870
- event
871
- }) => event.blockObjects,
872
- elementRef: ({
873
- event
874
- }) => event.elementRef
875
- })
876
- },
877
- disable: {
878
- target: "#block object popover.disabled.inactive"
879
- }
880
- }
881
- },
882
- active: {
883
- on: {
884
- "set inactive": {
885
- target: "inactive"
886
- },
887
- disable: {
888
- target: "#block object popover.disabled.active"
889
- },
890
- "set active": {
891
- actions: assign({
892
- blockObjects: ({
893
- event
894
- }) => event.blockObjects,
895
- elementRef: ({
896
- event
897
- }) => event.elementRef
898
- })
899
- },
900
- edit: {
901
- actions: ({
902
- context,
903
- event
904
- }) => {
905
- context.editor.send({
906
- type: "block.set",
907
- at: event.at,
908
- props: event.props
909
- }), context.editor.send({
910
- type: "focus"
911
- });
912
- }
913
- },
914
- remove: {
915
- actions: ({
916
- context,
917
- event
918
- }) => {
919
- context.editor.send({
920
- type: "delete.block",
921
- at: event.at
922
- }), context.editor.send({
923
- type: "focus"
924
- });
925
- }
926
- },
927
- close: {
928
- actions: ({
929
- context
930
- }) => {
931
- context.editor.send({
932
- type: "focus"
933
- });
934
- },
935
- target: "inactive"
936
- }
937
- }
938
- }
939
- }
940
- }
941
- }
583
+ id: "block object popover",
584
+ context: ({ input }) => ({
585
+ editor: input.editor,
586
+ schemaTypes: input.schemaTypes,
587
+ blockObjects: [],
588
+ elementRef: React.createRef()
589
+ }),
590
+ invoke: [{
591
+ src: "disable listener",
592
+ input: ({ context }) => ({ editor: context.editor })
593
+ }, {
594
+ src: "active listener",
595
+ input: ({ context }) => ({
596
+ editor: context.editor,
597
+ schemaTypes: context.schemaTypes
598
+ })
599
+ }],
600
+ initial: "disabled",
601
+ states: {
602
+ disabled: {
603
+ initial: "inactive",
604
+ states: {
605
+ inactive: {
606
+ entry: ["reset"],
607
+ on: {
608
+ "set active": {
609
+ actions: assign({
610
+ blockObjects: ({ event }) => event.blockObjects,
611
+ elementRef: ({ event }) => event.elementRef
612
+ }),
613
+ target: "active"
614
+ },
615
+ enable: { target: "#block object popover.enabled.inactive" }
616
+ }
617
+ },
618
+ active: { on: {
619
+ "set inactive": { target: "inactive" },
620
+ enable: { target: "#block object popover.enabled.active" }
621
+ } }
622
+ }
623
+ },
624
+ enabled: {
625
+ initial: "inactive",
626
+ states: {
627
+ inactive: {
628
+ entry: ["reset"],
629
+ on: {
630
+ "set active": {
631
+ target: "active",
632
+ actions: assign({
633
+ blockObjects: ({ event }) => event.blockObjects,
634
+ elementRef: ({ event }) => event.elementRef
635
+ })
636
+ },
637
+ disable: { target: "#block object popover.disabled.inactive" }
638
+ }
639
+ },
640
+ active: { on: {
641
+ "set inactive": { target: "inactive" },
642
+ disable: { target: "#block object popover.disabled.active" },
643
+ "set active": { actions: assign({
644
+ blockObjects: ({ event }) => event.blockObjects,
645
+ elementRef: ({ event }) => event.elementRef
646
+ }) },
647
+ edit: { actions: ({ context, event }) => {
648
+ context.editor.send({
649
+ type: "block.set",
650
+ at: event.at,
651
+ props: event.props
652
+ }), context.editor.send({ type: "focus" });
653
+ } },
654
+ remove: { actions: ({ context, event }) => {
655
+ context.editor.send({
656
+ type: "delete.block",
657
+ at: event.at
658
+ }), context.editor.send({ type: "focus" });
659
+ } },
660
+ close: {
661
+ actions: ({ context }) => {
662
+ context.editor.send({ type: "focus" });
663
+ },
664
+ target: "inactive"
665
+ }
666
+ } }
667
+ }
668
+ }
669
+ }
942
670
  });
671
+ /**
672
+ * @beta
673
+ * Manages the state and available events for a block object popover.
674
+ */
943
675
  function useBlockObjectPopover(props) {
944
- const $ = c(14), editor = useEditor();
945
- let t0;
946
- $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = {
947
- input: {
948
- editor,
949
- schemaTypes: props.schemaTypes
950
- }
951
- }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
952
- const [actorSnapshot, send] = useActor(blockObjectPopoverMachine, t0);
953
- let t1;
954
- $[3] !== actorSnapshot.context.blockObjects || $[4] !== actorSnapshot.context.elementRef ? (t1 = {
955
- blockObjects: actorSnapshot.context.blockObjects,
956
- elementRef: actorSnapshot.context.elementRef
957
- }, $[3] = actorSnapshot.context.blockObjects, $[4] = actorSnapshot.context.elementRef, $[5] = t1) : t1 = $[5];
958
- let t2;
959
- $[6] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2) : t2 = $[7];
960
- let t3;
961
- $[8] !== t1 || $[9] !== t2 ? (t3 = {
962
- context: t1,
963
- matches: t2
964
- }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
965
- let t4;
966
- return $[11] !== send || $[12] !== t3 ? (t4 = {
967
- snapshot: t3,
968
- send
969
- }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
676
+ let $ = c(14), editor = useEditor(), t0;
677
+ $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = { input: {
678
+ editor,
679
+ schemaTypes: props.schemaTypes
680
+ } }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
681
+ let [actorSnapshot, send] = useActor(blockObjectPopoverMachine, t0), t1;
682
+ $[3] !== actorSnapshot.context.blockObjects || $[4] !== actorSnapshot.context.elementRef ? (t1 = {
683
+ blockObjects: actorSnapshot.context.blockObjects,
684
+ elementRef: actorSnapshot.context.elementRef
685
+ }, $[3] = actorSnapshot.context.blockObjects, $[4] = actorSnapshot.context.elementRef, $[5] = t1) : t1 = $[5];
686
+ let t2;
687
+ $[6] === actorSnapshot ? t2 = $[7] : (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2);
688
+ let t3;
689
+ $[8] !== t1 || $[9] !== t2 ? (t3 = {
690
+ context: t1,
691
+ matches: t2
692
+ }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
693
+ let t4;
694
+ return $[11] !== send || $[12] !== t3 ? (t4 = {
695
+ snapshot: t3,
696
+ send
697
+ }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
970
698
  }
971
- const keyboardShortcutListener$1 = fromCallback(({
972
- input
973
- }) => {
974
- const shortcut = input.schemaType.shortcut;
975
- if (shortcut)
976
- return input.editor.registerBehavior({
977
- behavior: defineBehavior({
978
- on: "keyboard.keydown",
979
- guard: ({
980
- event
981
- }) => shortcut.guard(event.originEvent),
982
- actions: [() => [raise({
983
- type: "decorator.toggle",
984
- decorator: input.schemaType.name
985
- })]]
986
- })
987
- });
699
+ const keyboardShortcutListener$1 = fromCallback(({ input }) => {
700
+ let shortcut = input.schemaType.shortcut;
701
+ if (shortcut) return input.editor.registerBehavior({ behavior: defineBehavior({
702
+ on: "keyboard.keydown",
703
+ guard: ({ event }) => shortcut.guard(event.originEvent),
704
+ actions: [() => [raise({
705
+ type: "decorator.toggle",
706
+ decorator: input.schemaType.name
707
+ })]]
708
+ }) });
988
709
  }), decoratorKeyboardShortcutMachine = setup({
989
- types: {
990
- context: {},
991
- input: {},
992
- events: {}
993
- },
994
- actors: {
995
- "disable listener": disableListener,
996
- "keyboard shortcut listener": keyboardShortcutListener$1
997
- }
710
+ types: {
711
+ context: {},
712
+ input: {},
713
+ events: {}
714
+ },
715
+ actors: {
716
+ "disable listener": disableListener,
717
+ "keyboard shortcut listener": keyboardShortcutListener$1
718
+ }
998
719
  }).createMachine({
999
- id: "decorator keyboard shortcut",
1000
- context: ({
1001
- input
1002
- }) => ({
1003
- editor: input.editor,
1004
- schemaType: input.schemaType
1005
- }),
1006
- invoke: {
1007
- src: "disable listener",
1008
- input: ({
1009
- context
1010
- }) => ({
1011
- editor: context.editor
1012
- })
1013
- },
1014
- initial: "disabled",
1015
- states: {
1016
- disabled: {
1017
- on: {
1018
- enable: {
1019
- target: "enabled"
1020
- }
1021
- }
1022
- },
1023
- enabled: {
1024
- invoke: {
1025
- src: "keyboard shortcut listener",
1026
- input: ({
1027
- context
1028
- }) => ({
1029
- editor: context.editor,
1030
- schemaType: context.schemaType
1031
- })
1032
- },
1033
- on: {
1034
- disable: {
1035
- target: "disabled"
1036
- }
1037
- }
1038
- }
1039
- }
720
+ id: "decorator keyboard shortcut",
721
+ context: ({ input }) => ({
722
+ editor: input.editor,
723
+ schemaType: input.schemaType
724
+ }),
725
+ invoke: {
726
+ src: "disable listener",
727
+ input: ({ context }) => ({ editor: context.editor })
728
+ },
729
+ initial: "disabled",
730
+ states: {
731
+ disabled: { on: { enable: { target: "enabled" } } },
732
+ enabled: {
733
+ invoke: {
734
+ src: "keyboard shortcut listener",
735
+ input: ({ context }) => ({
736
+ editor: context.editor,
737
+ schemaType: context.schemaType
738
+ })
739
+ },
740
+ on: { disable: { target: "disabled" } }
741
+ }
742
+ }
1040
743
  });
1041
744
  function useDecoratorKeyboardShortcut(props) {
1042
- const $ = c(3), editor = useEditor();
1043
- let t0;
1044
- $[0] !== editor || $[1] !== props.schemaType ? (t0 = {
1045
- input: {
1046
- editor,
1047
- schemaType: props.schemaType
1048
- }
1049
- }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2], useActorRef(decoratorKeyboardShortcutMachine, t0);
745
+ let $ = c(3), editor = useEditor(), t0;
746
+ $[0] !== editor || $[1] !== props.schemaType ? (t0 = { input: {
747
+ editor,
748
+ schemaType: props.schemaType
749
+ } }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2], useActorRef(decoratorKeyboardShortcutMachine, t0);
1050
750
  }
1051
751
  function useMutuallyExclusiveDecorator(props) {
1052
- const $ = c(5), editor = useEditor();
1053
- let t0, t1;
1054
- $[0] !== editor || $[1] !== props.schemaType.mutuallyExclusive || $[2] !== props.schemaType.name ? (t0 = () => {
1055
- const mutuallyExclusive = props.schemaType.mutuallyExclusive;
1056
- if (mutuallyExclusive)
1057
- return editor.registerBehavior({
1058
- behavior: defineBehavior({
1059
- on: "decorator.add",
1060
- guard: (t2) => {
1061
- const {
1062
- event
1063
- } = t2;
1064
- return event.decorator === props.schemaType.name;
1065
- },
1066
- actions: [(t3) => {
1067
- const {
1068
- event: event_0
1069
- } = t3;
1070
- return [forward(event_0), ...mutuallyExclusive.map(_temp)];
1071
- }]
1072
- })
1073
- });
1074
- }, t1 = [editor, props.schemaType.name, props.schemaType.mutuallyExclusive], $[0] = editor, $[1] = props.schemaType.mutuallyExclusive, $[2] = props.schemaType.name, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), useEffect(t0, t1);
752
+ let $ = c(5), editor = useEditor(), t0, t1;
753
+ $[0] !== editor || $[1] !== props.schemaType.mutuallyExclusive || $[2] !== props.schemaType.name ? (t0 = () => {
754
+ let mutuallyExclusive = props.schemaType.mutuallyExclusive;
755
+ if (mutuallyExclusive) return editor.registerBehavior({ behavior: defineBehavior({
756
+ on: "decorator.add",
757
+ guard: (t2) => {
758
+ let { event } = t2;
759
+ return event.decorator === props.schemaType.name;
760
+ },
761
+ actions: [(t3) => {
762
+ let { event: event_0 } = t3;
763
+ return [forward(event_0), ...mutuallyExclusive.map(_temp)];
764
+ }]
765
+ }) });
766
+ }, t1 = [
767
+ editor,
768
+ props.schemaType.name,
769
+ props.schemaType.mutuallyExclusive
770
+ ], $[0] = editor, $[1] = props.schemaType.mutuallyExclusive, $[2] = props.schemaType.name, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), useEffect(t0, t1);
1075
771
  }
1076
772
  function _temp(decorator) {
1077
- return raise({
1078
- type: "decorator.remove",
1079
- decorator
1080
- });
773
+ return raise({
774
+ type: "decorator.remove",
775
+ decorator
776
+ });
1081
777
  }
1082
- const activeListener$3 = fromCallback(({
1083
- input,
1084
- sendBack
1085
- }) => (selectors.isActiveDecorator(input.schemaType.name)(input.editor.getSnapshot()) ? sendBack({
1086
- type: "set active"
1087
- }) : sendBack({
1088
- type: "set inactive"
1089
- }), input.editor.on("*", () => {
1090
- const snapshot = input.editor.getSnapshot();
1091
- selectors.isActiveDecorator(input.schemaType.name)(snapshot) ? sendBack({
1092
- type: "set active"
1093
- }) : sendBack({
1094
- type: "set inactive"
1095
- });
1096
- }, {
1097
- batch: !0
1098
- }).unsubscribe)), decoratorButtonMachine = setup({
1099
- types: {
1100
- context: {},
1101
- input: {},
1102
- events: {}
1103
- },
1104
- actions: {
1105
- toggle: ({
1106
- context,
1107
- event
1108
- }) => {
1109
- event.type === "toggle" && (context.editor.send({
1110
- type: "decorator.toggle",
1111
- decorator: context.schemaType.name
1112
- }), context.editor.send({
1113
- type: "focus"
1114
- }));
1115
- }
1116
- },
1117
- actors: {
1118
- "disable listener": disableListener,
1119
- "active listener": activeListener$3
1120
- }
778
+ const activeListener$3 = fromCallback(({ input, sendBack }) => (selectors.isActiveDecorator(input.schemaType.name)(input.editor.getSnapshot()) ? sendBack({ type: "set active" }) : sendBack({ type: "set inactive" }), input.editor.on("*", () => {
779
+ let snapshot = input.editor.getSnapshot();
780
+ selectors.isActiveDecorator(input.schemaType.name)(snapshot) ? sendBack({ type: "set active" }) : sendBack({ type: "set inactive" });
781
+ }, { batch: !0 }).unsubscribe)), decoratorButtonMachine = setup({
782
+ types: {
783
+ context: {},
784
+ input: {},
785
+ events: {}
786
+ },
787
+ actions: { toggle: ({ context, event }) => {
788
+ event.type === "toggle" && (context.editor.send({
789
+ type: "decorator.toggle",
790
+ decorator: context.schemaType.name
791
+ }), context.editor.send({ type: "focus" }));
792
+ } },
793
+ actors: {
794
+ "disable listener": disableListener,
795
+ "active listener": activeListener$3
796
+ }
1121
797
  }).createMachine({
1122
- id: "decorator button",
1123
- context: ({
1124
- input
1125
- }) => ({
1126
- editor: input.editor,
1127
- schemaType: input.schemaType
1128
- }),
1129
- invoke: [{
1130
- src: "disable listener",
1131
- input: ({
1132
- context
1133
- }) => ({
1134
- editor: context.editor
1135
- })
1136
- }, {
1137
- src: "active listener",
1138
- input: ({
1139
- context
1140
- }) => ({
1141
- editor: context.editor,
1142
- schemaType: context.schemaType
1143
- })
1144
- }],
1145
- initial: "disabled",
1146
- states: {
1147
- disabled: {
1148
- initial: "inactive",
1149
- states: {
1150
- inactive: {
1151
- on: {
1152
- enable: {
1153
- target: "#decorator button.enabled.inactive"
1154
- },
1155
- "set active": {
1156
- target: "active"
1157
- }
1158
- }
1159
- },
1160
- active: {
1161
- on: {
1162
- enable: {
1163
- target: "#decorator button.enabled.active"
1164
- },
1165
- "set inactive": {
1166
- target: "inactive"
1167
- }
1168
- }
1169
- }
1170
- }
1171
- },
1172
- enabled: {
1173
- on: {
1174
- toggle: {
1175
- actions: ["toggle"]
1176
- }
1177
- },
1178
- initial: "inactive",
1179
- states: {
1180
- inactive: {
1181
- on: {
1182
- disable: {
1183
- target: "#decorator button.disabled.inactive"
1184
- },
1185
- "set active": {
1186
- target: "active"
1187
- }
1188
- }
1189
- },
1190
- active: {
1191
- on: {
1192
- disable: {
1193
- target: "#decorator button.disabled.active"
1194
- },
1195
- "set inactive": {
1196
- target: "inactive"
1197
- }
1198
- }
1199
- }
1200
- }
1201
- }
1202
- }
798
+ id: "decorator button",
799
+ context: ({ input }) => ({
800
+ editor: input.editor,
801
+ schemaType: input.schemaType
802
+ }),
803
+ invoke: [{
804
+ src: "disable listener",
805
+ input: ({ context }) => ({ editor: context.editor })
806
+ }, {
807
+ src: "active listener",
808
+ input: ({ context }) => ({
809
+ editor: context.editor,
810
+ schemaType: context.schemaType
811
+ })
812
+ }],
813
+ initial: "disabled",
814
+ states: {
815
+ disabled: {
816
+ initial: "inactive",
817
+ states: {
818
+ inactive: { on: {
819
+ enable: { target: "#decorator button.enabled.inactive" },
820
+ "set active": { target: "active" }
821
+ } },
822
+ active: { on: {
823
+ enable: { target: "#decorator button.enabled.active" },
824
+ "set inactive": { target: "inactive" }
825
+ } }
826
+ }
827
+ },
828
+ enabled: {
829
+ on: { toggle: { actions: ["toggle"] } },
830
+ initial: "inactive",
831
+ states: {
832
+ inactive: { on: {
833
+ disable: { target: "#decorator button.disabled.inactive" },
834
+ "set active": { target: "active" }
835
+ } },
836
+ active: { on: {
837
+ disable: { target: "#decorator button.disabled.active" },
838
+ "set inactive": { target: "inactive" }
839
+ } }
840
+ }
841
+ }
842
+ }
1203
843
  });
844
+ /**
845
+ * @beta
846
+ * Manages the state, keyboard shortcuts and available events for a decorator
847
+ * button and sets up mutually exclusive decorator behaviors.
848
+ */
1204
849
  function useDecoratorButton(props) {
1205
- const $ = c(8), editor = useEditor();
1206
- let t0;
1207
- $[0] !== editor || $[1] !== props.schemaType ? (t0 = {
1208
- input: {
1209
- editor,
1210
- schemaType: props.schemaType
1211
- }
1212
- }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
1213
- const [actorSnapshot, send] = useActor(decoratorButtonMachine, t0);
1214
- useDecoratorKeyboardShortcut(props), useMutuallyExclusiveDecorator(props);
1215
- let t1;
1216
- $[3] !== actorSnapshot ? (t1 = {
1217
- matches: (state) => actorSnapshot.matches(state)
1218
- }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
1219
- let t2;
1220
- return $[5] !== send || $[6] !== t1 ? (t2 = {
1221
- snapshot: t1,
1222
- send
1223
- }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
850
+ let $ = c(8), editor = useEditor(), t0;
851
+ $[0] !== editor || $[1] !== props.schemaType ? (t0 = { input: {
852
+ editor,
853
+ schemaType: props.schemaType
854
+ } }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
855
+ let [actorSnapshot, send] = useActor(decoratorButtonMachine, t0);
856
+ useDecoratorKeyboardShortcut(props), useMutuallyExclusiveDecorator(props);
857
+ let t1;
858
+ $[3] === actorSnapshot ? t1 = $[4] : (t1 = { matches: (state) => actorSnapshot.matches(state) }, $[3] = actorSnapshot, $[4] = t1);
859
+ let t2;
860
+ return $[5] !== send || $[6] !== t1 ? (t2 = {
861
+ snapshot: t1,
862
+ send
863
+ }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
1224
864
  }
1225
865
  const historyButtonsMachine = setup({
1226
- types: {
1227
- context: {},
1228
- input: {},
1229
- events: {}
1230
- },
1231
- actors: {
1232
- "disable listener": disableListener
1233
- }
866
+ types: {
867
+ context: {},
868
+ input: {},
869
+ events: {}
870
+ },
871
+ actors: { "disable listener": disableListener }
1234
872
  }).createMachine({
1235
- id: "history buttons",
1236
- context: ({
1237
- input
1238
- }) => ({
1239
- editor: input.editor
1240
- }),
1241
- invoke: {
1242
- src: "disable listener",
1243
- input: ({
1244
- context
1245
- }) => ({
1246
- editor: context.editor
1247
- })
1248
- },
1249
- initial: "disabled",
1250
- states: {
1251
- disabled: {
1252
- on: {
1253
- enable: {
1254
- target: "enabled"
1255
- }
1256
- }
1257
- },
1258
- enabled: {
1259
- on: {
1260
- disable: {
1261
- target: "disabled"
1262
- },
1263
- "history.undo": {
1264
- actions: ({
1265
- context
1266
- }) => {
1267
- context.editor.send({
1268
- type: "history.undo"
1269
- }), context.editor.send({
1270
- type: "focus"
1271
- });
1272
- }
1273
- },
1274
- "history.redo": {
1275
- actions: ({
1276
- context
1277
- }) => {
1278
- context.editor.send({
1279
- type: "history.redo"
1280
- }), context.editor.send({
1281
- type: "focus"
1282
- });
1283
- }
1284
- }
1285
- }
1286
- }
1287
- }
873
+ id: "history buttons",
874
+ context: ({ input }) => ({ editor: input.editor }),
875
+ invoke: {
876
+ src: "disable listener",
877
+ input: ({ context }) => ({ editor: context.editor })
878
+ },
879
+ initial: "disabled",
880
+ states: {
881
+ disabled: { on: { enable: { target: "enabled" } } },
882
+ enabled: { on: {
883
+ disable: { target: "disabled" },
884
+ "history.undo": { actions: ({ context }) => {
885
+ context.editor.send({ type: "history.undo" }), context.editor.send({ type: "focus" });
886
+ } },
887
+ "history.redo": { actions: ({ context }) => {
888
+ context.editor.send({ type: "history.redo" }), context.editor.send({ type: "focus" });
889
+ } }
890
+ } }
891
+ }
1288
892
  });
893
+ /**
894
+ * @beta
895
+ */
1289
896
  function useHistoryButtons() {
1290
- const $ = c(7), editor = useEditor();
1291
- let t0;
1292
- $[0] !== editor ? (t0 = {
1293
- input: {
1294
- editor
1295
- }
1296
- }, $[0] = editor, $[1] = t0) : t0 = $[1];
1297
- const [actorSnapshot, send] = useActor(historyButtonsMachine, t0);
1298
- let t1;
1299
- $[2] !== actorSnapshot ? (t1 = {
1300
- matches: (state) => actorSnapshot.matches(state)
1301
- }, $[2] = actorSnapshot, $[3] = t1) : t1 = $[3];
1302
- let t2;
1303
- return $[4] !== send || $[5] !== t1 ? (t2 = {
1304
- snapshot: t1,
1305
- send
1306
- }, $[4] = send, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
897
+ let $ = c(7), editor = useEditor(), t0;
898
+ $[0] === editor ? t0 = $[1] : (t0 = { input: { editor } }, $[0] = editor, $[1] = t0);
899
+ let [actorSnapshot, send] = useActor(historyButtonsMachine, t0), t1;
900
+ $[2] === actorSnapshot ? t1 = $[3] : (t1 = { matches: (state) => actorSnapshot.matches(state) }, $[2] = actorSnapshot, $[3] = t1);
901
+ let t2;
902
+ return $[4] !== send || $[5] !== t1 ? (t2 = {
903
+ snapshot: t1,
904
+ send
905
+ }, $[4] = send, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
1307
906
  }
1308
- const keyboardShortcutListener = fromCallback(({
1309
- input,
1310
- sendBack
1311
- }) => {
1312
- const shortcut = input.schemaType.shortcut;
1313
- if (shortcut)
1314
- return input.editor.registerBehavior({
1315
- behavior: defineBehavior({
1316
- on: "keyboard.keydown",
1317
- guard: ({
1318
- event
1319
- }) => shortcut.guard(event.originEvent),
1320
- actions: [() => [effect(() => {
1321
- sendBack({
1322
- type: "open dialog"
1323
- });
1324
- })]]
1325
- })
1326
- });
907
+ const keyboardShortcutListener = fromCallback(({ input, sendBack }) => {
908
+ let shortcut = input.schemaType.shortcut;
909
+ if (shortcut) return input.editor.registerBehavior({ behavior: defineBehavior({
910
+ on: "keyboard.keydown",
911
+ guard: ({ event }) => shortcut.guard(event.originEvent),
912
+ actions: [() => [effect(() => {
913
+ sendBack({ type: "open dialog" });
914
+ })]]
915
+ }) });
1327
916
  }), inlineObjectButtonMachine = setup({
1328
- types: {
1329
- context: {},
1330
- input: {},
1331
- events: {}
1332
- },
1333
- actions: {
1334
- insert: ({
1335
- context,
1336
- event
1337
- }) => {
1338
- event.type === "insert" && (context.editor.send({
1339
- type: "insert.inline object",
1340
- inlineObject: {
1341
- name: context.schemaType.name,
1342
- value: event.value
1343
- }
1344
- }), context.editor.send({
1345
- type: "focus"
1346
- }));
1347
- }
1348
- },
1349
- actors: {
1350
- "disable listener": disableListener,
1351
- "keyboard shortcut listener": keyboardShortcutListener
1352
- }
917
+ types: {
918
+ context: {},
919
+ input: {},
920
+ events: {}
921
+ },
922
+ actions: { insert: ({ context, event }) => {
923
+ event.type === "insert" && (context.editor.send({
924
+ type: "insert.inline object",
925
+ inlineObject: {
926
+ name: context.schemaType.name,
927
+ value: event.value
928
+ }
929
+ }), context.editor.send({ type: "focus" }));
930
+ } },
931
+ actors: {
932
+ "disable listener": disableListener,
933
+ "keyboard shortcut listener": keyboardShortcutListener
934
+ }
1353
935
  }).createMachine({
1354
- id: "inline object button",
1355
- context: ({
1356
- input
1357
- }) => ({
1358
- editor: input.editor,
1359
- schemaType: input.schemaType
1360
- }),
1361
- invoke: [{
1362
- src: "disable listener",
1363
- input: ({
1364
- context
1365
- }) => ({
1366
- editor: context.editor
1367
- })
1368
- }],
1369
- initial: "disabled",
1370
- states: {
1371
- disabled: {
1372
- on: {
1373
- enable: {
1374
- target: "enabled"
1375
- }
1376
- }
1377
- },
1378
- enabled: {
1379
- on: {
1380
- disable: {
1381
- target: "disabled"
1382
- }
1383
- },
1384
- initial: "idle",
1385
- states: {
1386
- idle: {
1387
- invoke: [{
1388
- src: "keyboard shortcut listener",
1389
- input: ({
1390
- context
1391
- }) => ({
1392
- editor: context.editor,
1393
- schemaType: context.schemaType
1394
- })
1395
- }],
1396
- on: {
1397
- "open dialog": {
1398
- target: "showing dialog"
1399
- }
1400
- }
1401
- },
1402
- "showing dialog": {
1403
- on: {
1404
- "close dialog": {
1405
- target: "idle"
1406
- },
1407
- insert: {
1408
- actions: ["insert"],
1409
- target: "idle"
1410
- }
1411
- }
1412
- }
1413
- }
1414
- }
1415
- }
936
+ id: "inline object button",
937
+ context: ({ input }) => ({
938
+ editor: input.editor,
939
+ schemaType: input.schemaType
940
+ }),
941
+ invoke: [{
942
+ src: "disable listener",
943
+ input: ({ context }) => ({ editor: context.editor })
944
+ }],
945
+ initial: "disabled",
946
+ states: {
947
+ disabled: { on: { enable: { target: "enabled" } } },
948
+ enabled: {
949
+ on: { disable: { target: "disabled" } },
950
+ initial: "idle",
951
+ states: {
952
+ idle: {
953
+ invoke: [{
954
+ src: "keyboard shortcut listener",
955
+ input: ({ context }) => ({
956
+ editor: context.editor,
957
+ schemaType: context.schemaType
958
+ })
959
+ }],
960
+ on: { "open dialog": { target: "showing dialog" } }
961
+ },
962
+ "showing dialog": { on: {
963
+ "close dialog": { target: "idle" },
964
+ insert: {
965
+ actions: ["insert"],
966
+ target: "idle"
967
+ }
968
+ } }
969
+ }
970
+ }
971
+ }
1416
972
  });
973
+ /**
974
+ * @beta
975
+ * Manages the state, keyboard shortcut and available events for an inline
976
+ * object button.
977
+ *
978
+ * Note: This hook assumes that the button triggers a dialog for inputting
979
+ * the inline object value.
980
+ */
1417
981
  function useInlineObjectButton(props) {
1418
- const $ = c(8), editor = useEditor();
1419
- let t0;
1420
- $[0] !== editor || $[1] !== props.schemaType ? (t0 = {
1421
- input: {
1422
- editor,
1423
- schemaType: props.schemaType
1424
- }
1425
- }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
1426
- const [actorSnapshot, send] = useActor(inlineObjectButtonMachine, t0);
1427
- let t1;
1428
- $[3] !== actorSnapshot ? (t1 = {
1429
- matches: (state) => actorSnapshot.matches(state)
1430
- }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
1431
- let t2;
1432
- return $[5] !== send || $[6] !== t1 ? (t2 = {
1433
- snapshot: t1,
1434
- send
1435
- }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
982
+ let $ = c(8), editor = useEditor(), t0;
983
+ $[0] !== editor || $[1] !== props.schemaType ? (t0 = { input: {
984
+ editor,
985
+ schemaType: props.schemaType
986
+ } }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
987
+ let [actorSnapshot, send] = useActor(inlineObjectButtonMachine, t0), t1;
988
+ $[3] === actorSnapshot ? t1 = $[4] : (t1 = { matches: (state) => actorSnapshot.matches(state) }, $[3] = actorSnapshot, $[4] = t1);
989
+ let t2;
990
+ return $[5] !== send || $[6] !== t1 ? (t2 = {
991
+ snapshot: t1,
992
+ send
993
+ }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
1436
994
  }
1437
- const activeListener$2 = fromCallback(({
1438
- input,
1439
- sendBack
1440
- }) => input.editor.on("selection", () => {
1441
- const snapshot = input.editor.getSnapshot();
1442
- if (!selectors.isSelectionCollapsed(snapshot)) {
1443
- sendBack({
1444
- type: "set inactive"
1445
- });
1446
- return;
1447
- }
1448
- const focusInlineObject = selectors.getFocusInlineObject(snapshot);
1449
- if (!focusInlineObject) {
1450
- sendBack({
1451
- type: "set inactive"
1452
- });
1453
- return;
1454
- }
1455
- const schemaType = input.schemaTypes.find((schemaType2) => schemaType2.name === focusInlineObject.node._type);
1456
- if (!schemaType) {
1457
- sendBack({
1458
- type: "set inactive"
1459
- });
1460
- return;
1461
- }
1462
- const firstSelectedNode = input.editor.dom.getChildNodes(snapshot).at(0);
1463
- if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
1464
- sendBack({
1465
- type: "set inactive"
1466
- });
1467
- return;
1468
- }
1469
- const elementRef = React.createRef();
1470
- elementRef.current = firstSelectedNode, sendBack({
1471
- type: "set active",
1472
- inlineObjects: [{
1473
- value: focusInlineObject.node,
1474
- schemaType,
1475
- at: focusInlineObject.path
1476
- }],
1477
- elementRef
1478
- });
1479
- }, {
1480
- batch: !0
1481
- }).unsubscribe), inlineObjectPopoverMachine = setup({
1482
- types: {
1483
- context: {},
1484
- input: {},
1485
- events: {}
1486
- },
1487
- actions: {
1488
- reset: assign({
1489
- inlineObjects: [],
1490
- elementRef: React.createRef()
1491
- })
1492
- },
1493
- actors: {
1494
- "disable listener": disableListener,
1495
- "active listener": activeListener$2
1496
- }
995
+ const activeListener$2 = fromCallback(({ input, sendBack }) => input.editor.on("selection", () => {
996
+ let snapshot = input.editor.getSnapshot();
997
+ if (!selectors.isSelectionCollapsed(snapshot)) {
998
+ sendBack({ type: "set inactive" });
999
+ return;
1000
+ }
1001
+ let focusInlineObject = selectors.getFocusInlineObject(snapshot);
1002
+ if (!focusInlineObject) {
1003
+ sendBack({ type: "set inactive" });
1004
+ return;
1005
+ }
1006
+ let schemaType = input.schemaTypes.find((schemaType) => schemaType.name === focusInlineObject.node._type);
1007
+ if (!schemaType) {
1008
+ sendBack({ type: "set inactive" });
1009
+ return;
1010
+ }
1011
+ let firstSelectedNode = input.editor.dom.getChildNodes(snapshot).at(0);
1012
+ if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
1013
+ sendBack({ type: "set inactive" });
1014
+ return;
1015
+ }
1016
+ let elementRef = React.createRef();
1017
+ elementRef.current = firstSelectedNode, sendBack({
1018
+ type: "set active",
1019
+ inlineObjects: [{
1020
+ value: focusInlineObject.node,
1021
+ schemaType,
1022
+ at: focusInlineObject.path
1023
+ }],
1024
+ elementRef
1025
+ });
1026
+ }, { batch: !0 }).unsubscribe), inlineObjectPopoverMachine = setup({
1027
+ types: {
1028
+ context: {},
1029
+ input: {},
1030
+ events: {}
1031
+ },
1032
+ actions: { reset: assign({
1033
+ inlineObjects: [],
1034
+ elementRef: React.createRef()
1035
+ }) },
1036
+ actors: {
1037
+ "disable listener": disableListener,
1038
+ "active listener": activeListener$2
1039
+ }
1497
1040
  }).createMachine({
1498
- id: "inline object popover",
1499
- context: ({
1500
- input
1501
- }) => ({
1502
- editor: input.editor,
1503
- schemaTypes: input.schemaTypes,
1504
- inlineObjects: [],
1505
- elementRef: React.createRef()
1506
- }),
1507
- invoke: [{
1508
- src: "disable listener",
1509
- input: ({
1510
- context
1511
- }) => ({
1512
- editor: context.editor
1513
- })
1514
- }, {
1515
- src: "active listener",
1516
- input: ({
1517
- context
1518
- }) => ({
1519
- editor: context.editor,
1520
- schemaTypes: context.schemaTypes
1521
- })
1522
- }],
1523
- initial: "disabled",
1524
- states: {
1525
- disabled: {
1526
- initial: "inactive",
1527
- states: {
1528
- inactive: {
1529
- entry: ["reset"],
1530
- on: {
1531
- "set active": {
1532
- actions: assign({
1533
- inlineObjects: ({
1534
- event
1535
- }) => event.inlineObjects,
1536
- elementRef: ({
1537
- event
1538
- }) => event.elementRef
1539
- }),
1540
- target: "active"
1541
- },
1542
- enable: {
1543
- target: "#inline object popover.enabled.inactive"
1544
- }
1545
- }
1546
- },
1547
- active: {
1548
- on: {
1549
- "set inactive": {
1550
- target: "inactive"
1551
- },
1552
- enable: {
1553
- target: "#inline object popover.enabled.active"
1554
- }
1555
- }
1556
- }
1557
- }
1558
- },
1559
- enabled: {
1560
- initial: "inactive",
1561
- states: {
1562
- inactive: {
1563
- entry: ["reset"],
1564
- on: {
1565
- "set active": {
1566
- target: "active",
1567
- actions: assign({
1568
- inlineObjects: ({
1569
- event
1570
- }) => event.inlineObjects,
1571
- elementRef: ({
1572
- event
1573
- }) => event.elementRef
1574
- })
1575
- },
1576
- disable: {
1577
- target: "#inline object popover.disabled.inactive"
1578
- }
1579
- }
1580
- },
1581
- active: {
1582
- on: {
1583
- "set inactive": {
1584
- target: "inactive"
1585
- },
1586
- disable: {
1587
- target: "#inline object popover.disabled.active"
1588
- },
1589
- "set active": {
1590
- actions: assign({
1591
- inlineObjects: ({
1592
- event
1593
- }) => event.inlineObjects,
1594
- elementRef: ({
1595
- event
1596
- }) => event.elementRef
1597
- })
1598
- },
1599
- edit: {
1600
- actions: ({
1601
- context,
1602
- event
1603
- }) => {
1604
- context.editor.send({
1605
- type: "child.set",
1606
- at: event.at,
1607
- props: event.props
1608
- }), context.editor.send({
1609
- type: "focus"
1610
- });
1611
- }
1612
- },
1613
- remove: {
1614
- actions: ({
1615
- context,
1616
- event
1617
- }) => {
1618
- context.editor.send({
1619
- type: "delete.child",
1620
- at: event.at
1621
- }), context.editor.send({
1622
- type: "focus"
1623
- });
1624
- }
1625
- },
1626
- close: {
1627
- actions: ({
1628
- context
1629
- }) => {
1630
- context.editor.send({
1631
- type: "focus"
1632
- });
1633
- },
1634
- target: "inactive"
1635
- }
1636
- }
1637
- }
1638
- }
1639
- }
1640
- }
1041
+ id: "inline object popover",
1042
+ context: ({ input }) => ({
1043
+ editor: input.editor,
1044
+ schemaTypes: input.schemaTypes,
1045
+ inlineObjects: [],
1046
+ elementRef: React.createRef()
1047
+ }),
1048
+ invoke: [{
1049
+ src: "disable listener",
1050
+ input: ({ context }) => ({ editor: context.editor })
1051
+ }, {
1052
+ src: "active listener",
1053
+ input: ({ context }) => ({
1054
+ editor: context.editor,
1055
+ schemaTypes: context.schemaTypes
1056
+ })
1057
+ }],
1058
+ initial: "disabled",
1059
+ states: {
1060
+ disabled: {
1061
+ initial: "inactive",
1062
+ states: {
1063
+ inactive: {
1064
+ entry: ["reset"],
1065
+ on: {
1066
+ "set active": {
1067
+ actions: assign({
1068
+ inlineObjects: ({ event }) => event.inlineObjects,
1069
+ elementRef: ({ event }) => event.elementRef
1070
+ }),
1071
+ target: "active"
1072
+ },
1073
+ enable: { target: "#inline object popover.enabled.inactive" }
1074
+ }
1075
+ },
1076
+ active: { on: {
1077
+ "set inactive": { target: "inactive" },
1078
+ enable: { target: "#inline object popover.enabled.active" }
1079
+ } }
1080
+ }
1081
+ },
1082
+ enabled: {
1083
+ initial: "inactive",
1084
+ states: {
1085
+ inactive: {
1086
+ entry: ["reset"],
1087
+ on: {
1088
+ "set active": {
1089
+ target: "active",
1090
+ actions: assign({
1091
+ inlineObjects: ({ event }) => event.inlineObjects,
1092
+ elementRef: ({ event }) => event.elementRef
1093
+ })
1094
+ },
1095
+ disable: { target: "#inline object popover.disabled.inactive" }
1096
+ }
1097
+ },
1098
+ active: { on: {
1099
+ "set inactive": { target: "inactive" },
1100
+ disable: { target: "#inline object popover.disabled.active" },
1101
+ "set active": { actions: assign({
1102
+ inlineObjects: ({ event }) => event.inlineObjects,
1103
+ elementRef: ({ event }) => event.elementRef
1104
+ }) },
1105
+ edit: { actions: ({ context, event }) => {
1106
+ context.editor.send({
1107
+ type: "child.set",
1108
+ at: event.at,
1109
+ props: event.props
1110
+ }), context.editor.send({ type: "focus" });
1111
+ } },
1112
+ remove: { actions: ({ context, event }) => {
1113
+ context.editor.send({
1114
+ type: "delete.child",
1115
+ at: event.at
1116
+ }), context.editor.send({ type: "focus" });
1117
+ } },
1118
+ close: {
1119
+ actions: ({ context }) => {
1120
+ context.editor.send({ type: "focus" });
1121
+ },
1122
+ target: "inactive"
1123
+ }
1124
+ } }
1125
+ }
1126
+ }
1127
+ }
1641
1128
  });
1129
+ /**
1130
+ * @beta
1131
+ * Manages the state and available events for an inline object popover.
1132
+ */
1642
1133
  function useInlineObjectPopover(props) {
1643
- const $ = c(14), editor = useEditor();
1644
- let t0;
1645
- $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = {
1646
- input: {
1647
- editor,
1648
- schemaTypes: props.schemaTypes
1649
- }
1650
- }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
1651
- const [actorSnapshot, send] = useActor(inlineObjectPopoverMachine, t0);
1652
- let t1;
1653
- $[3] !== actorSnapshot.context.elementRef || $[4] !== actorSnapshot.context.inlineObjects ? (t1 = {
1654
- inlineObjects: actorSnapshot.context.inlineObjects,
1655
- elementRef: actorSnapshot.context.elementRef
1656
- }, $[3] = actorSnapshot.context.elementRef, $[4] = actorSnapshot.context.inlineObjects, $[5] = t1) : t1 = $[5];
1657
- let t2;
1658
- $[6] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2) : t2 = $[7];
1659
- let t3;
1660
- $[8] !== t1 || $[9] !== t2 ? (t3 = {
1661
- context: t1,
1662
- matches: t2
1663
- }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
1664
- let t4;
1665
- return $[11] !== send || $[12] !== t3 ? (t4 = {
1666
- snapshot: t3,
1667
- send
1668
- }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
1134
+ let $ = c(14), editor = useEditor(), t0;
1135
+ $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = { input: {
1136
+ editor,
1137
+ schemaTypes: props.schemaTypes
1138
+ } }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
1139
+ let [actorSnapshot, send] = useActor(inlineObjectPopoverMachine, t0), t1;
1140
+ $[3] !== actorSnapshot.context.elementRef || $[4] !== actorSnapshot.context.inlineObjects ? (t1 = {
1141
+ inlineObjects: actorSnapshot.context.inlineObjects,
1142
+ elementRef: actorSnapshot.context.elementRef
1143
+ }, $[3] = actorSnapshot.context.elementRef, $[4] = actorSnapshot.context.inlineObjects, $[5] = t1) : t1 = $[5];
1144
+ let t2;
1145
+ $[6] === actorSnapshot ? t2 = $[7] : (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2);
1146
+ let t3;
1147
+ $[8] !== t1 || $[9] !== t2 ? (t3 = {
1148
+ context: t1,
1149
+ matches: t2
1150
+ }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
1151
+ let t4;
1152
+ return $[11] !== send || $[12] !== t3 ? (t4 = {
1153
+ snapshot: t3,
1154
+ send
1155
+ }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
1669
1156
  }
1670
- const activeListener$1 = fromCallback(({
1671
- input,
1672
- sendBack
1673
- }) => (selectors.isActiveListItem(input.schemaType.name)(input.editor.getSnapshot()) ? sendBack({
1674
- type: "set active"
1675
- }) : sendBack({
1676
- type: "set inactive"
1677
- }), input.editor.on("*", () => {
1678
- const snapshot = input.editor.getSnapshot();
1679
- selectors.isActiveListItem(input.schemaType.name)(snapshot) ? sendBack({
1680
- type: "set active"
1681
- }) : sendBack({
1682
- type: "set inactive"
1683
- });
1684
- }, {
1685
- batch: !0
1686
- }).unsubscribe)), listButtonMachine = setup({
1687
- types: {
1688
- context: {},
1689
- input: {},
1690
- events: {}
1691
- },
1692
- actions: {
1693
- toggle: ({
1694
- context,
1695
- event
1696
- }) => {
1697
- event.type === "toggle" && (context.editor.send({
1698
- type: "list item.toggle",
1699
- listItem: context.schemaType.name
1700
- }), context.editor.send({
1701
- type: "focus"
1702
- }));
1703
- }
1704
- },
1705
- actors: {
1706
- "disable listener": disableListener,
1707
- "active listener": activeListener$1
1708
- }
1157
+ const activeListener$1 = fromCallback(({ input, sendBack }) => (selectors.isActiveListItem(input.schemaType.name)(input.editor.getSnapshot()) ? sendBack({ type: "set active" }) : sendBack({ type: "set inactive" }), input.editor.on("*", () => {
1158
+ let snapshot = input.editor.getSnapshot();
1159
+ selectors.isActiveListItem(input.schemaType.name)(snapshot) ? sendBack({ type: "set active" }) : sendBack({ type: "set inactive" });
1160
+ }, { batch: !0 }).unsubscribe)), listButtonMachine = setup({
1161
+ types: {
1162
+ context: {},
1163
+ input: {},
1164
+ events: {}
1165
+ },
1166
+ actions: { toggle: ({ context, event }) => {
1167
+ event.type === "toggle" && (context.editor.send({
1168
+ type: "list item.toggle",
1169
+ listItem: context.schemaType.name
1170
+ }), context.editor.send({ type: "focus" }));
1171
+ } },
1172
+ actors: {
1173
+ "disable listener": disableListener,
1174
+ "active listener": activeListener$1
1175
+ }
1709
1176
  }).createMachine({
1710
- id: "list button",
1711
- context: ({
1712
- input
1713
- }) => ({
1714
- editor: input.editor,
1715
- schemaType: input.schemaType
1716
- }),
1717
- invoke: [{
1718
- src: "disable listener",
1719
- input: ({
1720
- context
1721
- }) => ({
1722
- editor: context.editor
1723
- })
1724
- }, {
1725
- src: "active listener",
1726
- input: ({
1727
- context
1728
- }) => ({
1729
- editor: context.editor,
1730
- schemaType: context.schemaType
1731
- })
1732
- }],
1733
- initial: "disabled",
1734
- states: {
1735
- disabled: {
1736
- initial: "inactive",
1737
- states: {
1738
- inactive: {
1739
- on: {
1740
- enable: {
1741
- target: "#list button.enabled.inactive"
1742
- },
1743
- "set active": {
1744
- target: "active"
1745
- }
1746
- }
1747
- },
1748
- active: {
1749
- on: {
1750
- enable: {
1751
- target: "#list button.enabled.active"
1752
- },
1753
- "set inactive": {
1754
- target: "inactive"
1755
- }
1756
- }
1757
- }
1758
- }
1759
- },
1760
- enabled: {
1761
- on: {
1762
- toggle: {
1763
- actions: ["toggle"]
1764
- }
1765
- },
1766
- initial: "inactive",
1767
- states: {
1768
- inactive: {
1769
- on: {
1770
- disable: {
1771
- target: "#list button.disabled.inactive"
1772
- },
1773
- "set active": {
1774
- target: "active"
1775
- }
1776
- }
1777
- },
1778
- active: {
1779
- on: {
1780
- disable: {
1781
- target: "#list button.disabled.active"
1782
- },
1783
- "set inactive": {
1784
- target: "inactive"
1785
- }
1786
- }
1787
- }
1788
- }
1789
- }
1790
- }
1177
+ id: "list button",
1178
+ context: ({ input }) => ({
1179
+ editor: input.editor,
1180
+ schemaType: input.schemaType
1181
+ }),
1182
+ invoke: [{
1183
+ src: "disable listener",
1184
+ input: ({ context }) => ({ editor: context.editor })
1185
+ }, {
1186
+ src: "active listener",
1187
+ input: ({ context }) => ({
1188
+ editor: context.editor,
1189
+ schemaType: context.schemaType
1190
+ })
1191
+ }],
1192
+ initial: "disabled",
1193
+ states: {
1194
+ disabled: {
1195
+ initial: "inactive",
1196
+ states: {
1197
+ inactive: { on: {
1198
+ enable: { target: "#list button.enabled.inactive" },
1199
+ "set active": { target: "active" }
1200
+ } },
1201
+ active: { on: {
1202
+ enable: { target: "#list button.enabled.active" },
1203
+ "set inactive": { target: "inactive" }
1204
+ } }
1205
+ }
1206
+ },
1207
+ enabled: {
1208
+ on: { toggle: { actions: ["toggle"] } },
1209
+ initial: "inactive",
1210
+ states: {
1211
+ inactive: { on: {
1212
+ disable: { target: "#list button.disabled.inactive" },
1213
+ "set active": { target: "active" }
1214
+ } },
1215
+ active: { on: {
1216
+ disable: { target: "#list button.disabled.active" },
1217
+ "set inactive": { target: "inactive" }
1218
+ } }
1219
+ }
1220
+ }
1221
+ }
1791
1222
  });
1223
+ /**
1224
+ * @beta
1225
+ * Manages the state, keyboard shortcuts and available events for a list button.
1226
+ */
1792
1227
  function useListButton(props) {
1793
- const $ = c(8), editor = useEditor();
1794
- let t0;
1795
- $[0] !== editor || $[1] !== props.schemaType ? (t0 = {
1796
- input: {
1797
- editor,
1798
- schemaType: props.schemaType
1799
- }
1800
- }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
1801
- const [actorSnapshot, send] = useActor(listButtonMachine, t0);
1802
- let t1;
1803
- $[3] !== actorSnapshot ? (t1 = {
1804
- matches: (state) => actorSnapshot.matches(state)
1805
- }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
1806
- let t2;
1807
- return $[5] !== send || $[6] !== t1 ? (t2 = {
1808
- snapshot: t1,
1809
- send
1810
- }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
1228
+ let $ = c(8), editor = useEditor(), t0;
1229
+ $[0] !== editor || $[1] !== props.schemaType ? (t0 = { input: {
1230
+ editor,
1231
+ schemaType: props.schemaType
1232
+ } }, $[0] = editor, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
1233
+ let [actorSnapshot, send] = useActor(listButtonMachine, t0), t1;
1234
+ $[3] === actorSnapshot ? t1 = $[4] : (t1 = { matches: (state) => actorSnapshot.matches(state) }, $[3] = actorSnapshot, $[4] = t1);
1235
+ let t2;
1236
+ return $[5] !== send || $[6] !== t1 ? (t2 = {
1237
+ snapshot: t1,
1238
+ send
1239
+ }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
1811
1240
  }
1812
- const styleKeyboardShortcutsListener = fromCallback(({
1813
- input
1814
- }) => {
1815
- const unregisterBehaviors = input.schemaTypes.flatMap((schemaType) => {
1816
- const shortcut = schemaType.shortcut;
1817
- return shortcut ? [input.editor.registerBehavior({
1818
- behavior: defineBehavior({
1819
- on: "keyboard.keydown",
1820
- guard: ({
1821
- event
1822
- }) => shortcut.guard(event.originEvent),
1823
- actions: [() => [raise({
1824
- type: "style.toggle",
1825
- style: schemaType.name
1826
- })]]
1827
- })
1828
- })] : [];
1829
- });
1830
- return () => {
1831
- for (const unregisterBehavior of unregisterBehaviors)
1832
- unregisterBehavior();
1833
- };
1241
+ const styleKeyboardShortcutsListener = fromCallback(({ input }) => {
1242
+ let unregisterBehaviors = input.schemaTypes.flatMap((schemaType) => {
1243
+ let shortcut = schemaType.shortcut;
1244
+ return shortcut ? [input.editor.registerBehavior({ behavior: defineBehavior({
1245
+ on: "keyboard.keydown",
1246
+ guard: ({ event }) => shortcut.guard(event.originEvent),
1247
+ actions: [() => [raise({
1248
+ type: "style.toggle",
1249
+ style: schemaType.name
1250
+ })]]
1251
+ }) })] : [];
1252
+ });
1253
+ return () => {
1254
+ for (let unregisterBehavior of unregisterBehaviors) unregisterBehavior();
1255
+ };
1834
1256
  }), styleKeyboardShortcutsMachine = setup({
1835
- types: {
1836
- context: {},
1837
- input: {},
1838
- events: {}
1839
- },
1840
- actors: {
1841
- "disable listener": disableListener,
1842
- "style keyboard shortcuts listener": styleKeyboardShortcutsListener
1843
- }
1257
+ types: {
1258
+ context: {},
1259
+ input: {},
1260
+ events: {}
1261
+ },
1262
+ actors: {
1263
+ "disable listener": disableListener,
1264
+ "style keyboard shortcuts listener": styleKeyboardShortcutsListener
1265
+ }
1844
1266
  }).createMachine({
1845
- id: "style keyboard shortcuts",
1846
- context: ({
1847
- input
1848
- }) => ({
1849
- editor: input.editor,
1850
- schemaTypes: input.schemaTypes
1851
- }),
1852
- invoke: {
1853
- src: "disable listener",
1854
- input: ({
1855
- context
1856
- }) => ({
1857
- editor: context.editor
1858
- })
1859
- },
1860
- initial: "disabled",
1861
- states: {
1862
- disabled: {
1863
- on: {
1864
- enable: {
1865
- target: "enabled"
1866
- }
1867
- }
1868
- },
1869
- enabled: {
1870
- invoke: {
1871
- src: "style keyboard shortcuts listener",
1872
- input: ({
1873
- context
1874
- }) => ({
1875
- editor: context.editor,
1876
- schemaTypes: context.schemaTypes
1877
- })
1878
- },
1879
- on: {
1880
- disable: {
1881
- target: "disabled"
1882
- }
1883
- }
1884
- }
1885
- }
1267
+ id: "style keyboard shortcuts",
1268
+ context: ({ input }) => ({
1269
+ editor: input.editor,
1270
+ schemaTypes: input.schemaTypes
1271
+ }),
1272
+ invoke: {
1273
+ src: "disable listener",
1274
+ input: ({ context }) => ({ editor: context.editor })
1275
+ },
1276
+ initial: "disabled",
1277
+ states: {
1278
+ disabled: { on: { enable: { target: "enabled" } } },
1279
+ enabled: {
1280
+ invoke: {
1281
+ src: "style keyboard shortcuts listener",
1282
+ input: ({ context }) => ({
1283
+ editor: context.editor,
1284
+ schemaTypes: context.schemaTypes
1285
+ })
1286
+ },
1287
+ on: { disable: { target: "disabled" } }
1288
+ }
1289
+ }
1886
1290
  });
1291
+ /**
1292
+ * @beta
1293
+ * Registers keyboard shortcuts for a set of style schema types.
1294
+ */
1887
1295
  function useStyleKeyboardShortcuts(props) {
1888
- const $ = c(3), editor = useEditor();
1889
- let t0;
1890
- $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = {
1891
- input: {
1892
- editor,
1893
- schemaTypes: props.schemaTypes
1894
- }
1895
- }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2], useActorRef(styleKeyboardShortcutsMachine, t0);
1296
+ let $ = c(3), editor = useEditor(), t0;
1297
+ $[0] !== editor || $[1] !== props.schemaTypes ? (t0 = { input: {
1298
+ editor,
1299
+ schemaTypes: props.schemaTypes
1300
+ } }, $[0] = editor, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2], useActorRef(styleKeyboardShortcutsMachine, t0);
1896
1301
  }
1897
- const activeListener = fromCallback(({
1898
- input,
1899
- sendBack
1900
- }) => {
1901
- const activeStyle = selectors.getActiveStyle(input.editor.getSnapshot());
1902
- return sendBack({
1903
- type: "set active style",
1904
- style: activeStyle
1905
- }), input.editor.on("*", () => {
1906
- const snapshot = input.editor.getSnapshot(), activeStyle2 = selectors.getActiveStyle(snapshot);
1907
- sendBack({
1908
- type: "set active style",
1909
- style: activeStyle2
1910
- });
1911
- }, {
1912
- batch: !0
1913
- }).unsubscribe;
1914
- }), styleSelectorMachine = setup({
1915
- types: {
1916
- context: {},
1917
- input: {},
1918
- events: {}
1919
- },
1920
- actors: {
1921
- "disable listener": disableListener,
1922
- "active listener": activeListener
1923
- }
1302
+ const activeListener = fromCallback(({ input, sendBack }) => (sendBack({
1303
+ type: "set active style",
1304
+ style: selectors.getActiveStyle(input.editor.getSnapshot())
1305
+ }), input.editor.on("*", () => {
1306
+ let snapshot = input.editor.getSnapshot();
1307
+ sendBack({
1308
+ type: "set active style",
1309
+ style: selectors.getActiveStyle(snapshot)
1310
+ });
1311
+ }, { batch: !0 }).unsubscribe)), styleSelectorMachine = setup({
1312
+ types: {
1313
+ context: {},
1314
+ input: {},
1315
+ events: {}
1316
+ },
1317
+ actors: {
1318
+ "disable listener": disableListener,
1319
+ "active listener": activeListener
1320
+ }
1924
1321
  }).createMachine({
1925
- id: "style selector",
1926
- context: ({
1927
- input
1928
- }) => ({
1929
- editor: input.editor,
1930
- activeStyle: void 0
1931
- }),
1932
- invoke: [{
1933
- src: "disable listener",
1934
- input: ({
1935
- context
1936
- }) => ({
1937
- editor: context.editor
1938
- })
1939
- }, {
1940
- src: "active listener",
1941
- input: ({
1942
- context
1943
- }) => ({
1944
- editor: context.editor
1945
- })
1946
- }],
1947
- on: {
1948
- "set active style": {
1949
- guard: ({
1950
- context,
1951
- event
1952
- }) => context.activeStyle !== event.style,
1953
- actions: assign({
1954
- activeStyle: ({
1955
- event
1956
- }) => event.style
1957
- })
1958
- }
1959
- },
1960
- initial: "disabled",
1961
- states: {
1962
- disabled: {
1963
- on: {
1964
- enable: {
1965
- target: "enabled"
1966
- }
1967
- }
1968
- },
1969
- enabled: {
1970
- on: {
1971
- disable: {
1972
- target: "disabled"
1973
- },
1974
- toggle: {
1975
- actions: [({
1976
- context,
1977
- event
1978
- }) => {
1979
- context.editor.send({
1980
- type: "style.toggle",
1981
- style: event.style
1982
- }), context.editor.send({
1983
- type: "focus"
1984
- });
1985
- }]
1986
- }
1987
- }
1988
- }
1989
- }
1322
+ id: "style selector",
1323
+ context: ({ input }) => ({
1324
+ editor: input.editor,
1325
+ activeStyle: void 0
1326
+ }),
1327
+ invoke: [{
1328
+ src: "disable listener",
1329
+ input: ({ context }) => ({ editor: context.editor })
1330
+ }, {
1331
+ src: "active listener",
1332
+ input: ({ context }) => ({ editor: context.editor })
1333
+ }],
1334
+ on: { "set active style": {
1335
+ guard: ({ context, event }) => context.activeStyle !== event.style,
1336
+ actions: assign({ activeStyle: ({ event }) => event.style })
1337
+ } },
1338
+ initial: "disabled",
1339
+ states: {
1340
+ disabled: { on: { enable: { target: "enabled" } } },
1341
+ enabled: { on: {
1342
+ disable: { target: "disabled" },
1343
+ toggle: { actions: [({ context, event }) => {
1344
+ context.editor.send({
1345
+ type: "style.toggle",
1346
+ style: event.style
1347
+ }), context.editor.send({ type: "focus" });
1348
+ }] }
1349
+ } }
1350
+ }
1990
1351
  });
1352
+ /**
1353
+ * @beta
1354
+ * Manages the state, keyboard shortcuts and available events for a style
1355
+ * selector.
1356
+ */
1991
1357
  function useStyleSelector(props) {
1992
- const $ = c(12), editor = useEditor();
1993
- let t0;
1994
- $[0] !== editor ? (t0 = {
1995
- input: {
1996
- editor
1997
- }
1998
- }, $[0] = editor, $[1] = t0) : t0 = $[1];
1999
- const [actorSnapshot, send] = useActor(styleSelectorMachine, t0);
2000
- useStyleKeyboardShortcuts(props);
2001
- let t1;
2002
- $[2] !== actorSnapshot ? (t1 = (state) => actorSnapshot.matches(state), $[2] = actorSnapshot, $[3] = t1) : t1 = $[3];
2003
- let t2;
2004
- $[4] !== actorSnapshot.context.activeStyle ? (t2 = {
2005
- activeStyle: actorSnapshot.context.activeStyle
2006
- }, $[4] = actorSnapshot.context.activeStyle, $[5] = t2) : t2 = $[5];
2007
- let t3;
2008
- $[6] !== t1 || $[7] !== t2 ? (t3 = {
2009
- matches: t1,
2010
- context: t2
2011
- }, $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8];
2012
- let t4;
2013
- return $[9] !== send || $[10] !== t3 ? (t4 = {
2014
- snapshot: t3,
2015
- send
2016
- }, $[9] = send, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
1358
+ let $ = c(12), editor = useEditor(), t0;
1359
+ $[0] === editor ? t0 = $[1] : (t0 = { input: { editor } }, $[0] = editor, $[1] = t0);
1360
+ let [actorSnapshot, send] = useActor(styleSelectorMachine, t0);
1361
+ useStyleKeyboardShortcuts(props);
1362
+ let t1;
1363
+ $[2] === actorSnapshot ? t1 = $[3] : (t1 = (state) => actorSnapshot.matches(state), $[2] = actorSnapshot, $[3] = t1);
1364
+ let t2;
1365
+ $[4] === actorSnapshot.context.activeStyle ? t2 = $[5] : (t2 = { activeStyle: actorSnapshot.context.activeStyle }, $[4] = actorSnapshot.context.activeStyle, $[5] = t2);
1366
+ let t3;
1367
+ $[6] !== t1 || $[7] !== t2 ? (t3 = {
1368
+ matches: t1,
1369
+ context: t2
1370
+ }, $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8];
1371
+ let t4;
1372
+ return $[9] !== send || $[10] !== t3 ? (t4 = {
1373
+ snapshot: t3,
1374
+ send
1375
+ }, $[9] = send, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
2017
1376
  }
2018
- export {
2019
- useAnnotationButton,
2020
- useAnnotationPopover,
2021
- useApplicableSchema,
2022
- useBlockObjectButton,
2023
- useBlockObjectPopover,
2024
- useDecoratorButton,
2025
- useHistoryButtons,
2026
- useInlineObjectButton,
2027
- useInlineObjectPopover,
2028
- useListButton,
2029
- useStyleSelector,
2030
- useToolbarSchema
2031
- };
2032
- //# sourceMappingURL=index.js.map
1377
+ export { useAnnotationButton, useAnnotationPopover, useApplicableSchema, useBlockObjectButton, useBlockObjectPopover, useDecoratorButton, useHistoryButtons, useInlineObjectButton, useInlineObjectPopover, useListButton, useStyleSelector, useToolbarSchema };
1378
+
1379
+ //# sourceMappingURL=index.js.map