@portabletext/editor 1.1.4 → 1.1.6
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.
- package/README.md +4 -0
- package/lib/index.d.mts +631 -30
- package/lib/index.d.ts +631 -30
- package/lib/index.esm.js +303 -200
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +295 -192
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +303 -200
- package/lib/index.mjs.map +1 -1
- package/package.json +30 -25
- package/src/editor/Editable.tsx +11 -11
- package/src/editor/PortableTextEditor.tsx +37 -32
- package/src/editor/__tests__/self-solving.test.tsx +1 -1
- package/src/editor/behavior/behavior.actions.ts +39 -0
- package/src/editor/behavior/behavior.core.ts +37 -0
- package/src/editor/behavior/behavior.types.ts +106 -0
- package/src/editor/behavior/behavior.utils.ts +34 -0
- package/src/editor/components/SlateContainer.tsx +2 -13
- package/src/editor/components/Synchronizer.tsx +0 -3
- package/src/editor/editor-machine.ts +120 -3
- package/src/editor/hooks/useSyncValue.ts +3 -5
- package/src/editor/key-generator.ts +6 -0
- package/src/editor/plugins/createWithEditableAPI.ts +8 -5
- package/src/editor/plugins/createWithHotKeys.ts +1 -32
- package/src/editor/plugins/createWithInsertBreak.ts +6 -2
- package/src/editor/plugins/createWithInsertData.ts +7 -4
- package/src/editor/plugins/createWithObjectKeys.ts +12 -5
- package/src/editor/plugins/createWithPatches.ts +0 -1
- package/src/editor/plugins/createWithPortableTextMarkModel.ts +85 -114
- package/src/editor/plugins/createWithSchemaTypes.ts +3 -4
- package/src/editor/plugins/createWithUtils.ts +5 -4
- package/src/editor/plugins/index.ts +5 -13
- package/src/index.ts +11 -2
- package/src/types/options.ts +0 -1
- package/src/utils/__tests__/operationToPatches.test.ts +0 -2
- package/src/utils/__tests__/patchToOperations.test.ts +1 -2
- package/src/utils/sibling-utils.ts +55 -0
- package/src/editor/hooks/usePortableTextEditorKeyGenerator.ts +0 -27
package/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
-
var jsxRuntime = require("react/jsx-runtime"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), react = require("react"), slate = require("slate"), slateReact = require("slate-react"), debug$m = require("debug"), types = require("@sanity/types"), styledComponents = require("styled-components"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), schema = require("@sanity/schema"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), flatten = require("lodash/flatten.js"),
|
|
3
|
+
var jsxRuntime = require("react/jsx-runtime"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), react = require("react"), slate = require("slate"), slateReact = require("slate-react"), debug$m = require("debug"), types = require("@sanity/types"), styledComponents = require("styled-components"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), xstate = require("xstate"), schema = require("@sanity/schema"), isHotkeyEsm = require("is-hotkey-esm"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), flatten = require("lodash/flatten.js"), blockTools = require("@sanity/block-tools"), isPlainObject = require("lodash/isPlainObject.js"), throttle = require("lodash/throttle.js"), debounce = require("lodash/debounce.js"), content = require("@sanity/util/content");
|
|
4
4
|
function _interopDefaultCompat(e) {
|
|
5
5
|
return e && typeof e == "object" && "default" in e ? e : { default: e };
|
|
6
6
|
}
|
|
@@ -791,7 +791,28 @@ function compileType(rawType) {
|
|
|
791
791
|
types: [rawType]
|
|
792
792
|
}).get(rawType.name);
|
|
793
793
|
}
|
|
794
|
-
|
|
794
|
+
function getFocusBlock(context) {
|
|
795
|
+
const key = context.selection && types.isKeySegment(context.selection.focus.path[0]) ? context.selection.focus.path[0]._key : void 0, node = key ? context.value.find((block) => block._key === key) : void 0;
|
|
796
|
+
return node && key ? { node, path: [{ _key: key }] } : void 0;
|
|
797
|
+
}
|
|
798
|
+
function getFocusBlockObject(context) {
|
|
799
|
+
const focusBlock = getFocusBlock(context);
|
|
800
|
+
return focusBlock && !types.isPortableTextTextBlock(focusBlock.node) ? { node: focusBlock.node, path: focusBlock.path } : void 0;
|
|
801
|
+
}
|
|
802
|
+
const overwriteSoftReturn = {
|
|
803
|
+
on: "key down",
|
|
804
|
+
guard: ({ event }) => isHotkeyEsm.isHotkey("shift+enter", event.nativeEvent),
|
|
805
|
+
actions: [
|
|
806
|
+
({ event }) => (event.nativeEvent.preventDefault(), { type: "insert text", text: `
|
|
807
|
+
` })
|
|
808
|
+
]
|
|
809
|
+
}, enterOnVoidBlock = {
|
|
810
|
+
on: "key down",
|
|
811
|
+
guard: ({ context, event }) => isHotkeyEsm.isHotkey("enter", event.nativeEvent) ? !!getFocusBlockObject(context) : !1,
|
|
812
|
+
actions: [
|
|
813
|
+
({ event }) => (event.nativeEvent.preventDefault(), { type: "insert text block", decorators: [] })
|
|
814
|
+
]
|
|
815
|
+
}, coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock], debug$k = debugWithName("operationToPatches");
|
|
795
816
|
function createOperationToPatches(types2) {
|
|
796
817
|
const textBlockName = types2.block.name;
|
|
797
818
|
function insertTextPatch(editor, operation, beforeValue) {
|
|
@@ -1067,7 +1088,7 @@ function createOperationToPatches(types2) {
|
|
|
1067
1088
|
};
|
|
1068
1089
|
}
|
|
1069
1090
|
const debug$j = debugWithName("API:editable");
|
|
1070
|
-
function createWithEditableAPI(portableTextEditor, types$1
|
|
1091
|
+
function createWithEditableAPI(editorActor, portableTextEditor, types$1) {
|
|
1071
1092
|
return function(editor) {
|
|
1072
1093
|
return portableTextEditor.setEditable({
|
|
1073
1094
|
focus: () => {
|
|
@@ -1147,11 +1168,11 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1147
1168
|
const child = toSlateValue(
|
|
1148
1169
|
[
|
|
1149
1170
|
{
|
|
1150
|
-
_key: keyGenerator(),
|
|
1171
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
1151
1172
|
_type: types$1.block.name,
|
|
1152
1173
|
children: [
|
|
1153
1174
|
{
|
|
1154
|
-
_key: keyGenerator(),
|
|
1175
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
1155
1176
|
_type: type.name,
|
|
1156
1177
|
...value || {}
|
|
1157
1178
|
}
|
|
@@ -1179,7 +1200,7 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1179
1200
|
const block = toSlateValue(
|
|
1180
1201
|
[
|
|
1181
1202
|
{
|
|
1182
|
-
_key: keyGenerator(),
|
|
1203
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
1183
1204
|
_type: type.name,
|
|
1184
1205
|
...value || {}
|
|
1185
1206
|
}
|
|
@@ -1343,7 +1364,7 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1343
1364
|
for (const [block, blockPath] of selectedBlocks) {
|
|
1344
1365
|
if (block.children.length === 0 || block.children.length === 1 && block.children[0].text === "")
|
|
1345
1366
|
continue;
|
|
1346
|
-
const annotationKey = keyGenerator(), markDefs = block.markDefs ?? [];
|
|
1367
|
+
const annotationKey = editorActor.getSnapshot().context.keyGenerator(), markDefs = block.markDefs ?? [];
|
|
1347
1368
|
markDefs.find(
|
|
1348
1369
|
(markDef) => markDef._type === type.name && markDef._key === annotationKey
|
|
1349
1370
|
) === void 0 && (slate.Transforms.setNodes(
|
|
@@ -1552,7 +1573,7 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1552
1573
|
}), editor;
|
|
1553
1574
|
};
|
|
1554
1575
|
}
|
|
1555
|
-
function createWithInsertBreak(
|
|
1576
|
+
function createWithInsertBreak(editorActor, types2) {
|
|
1556
1577
|
return function(editor) {
|
|
1557
1578
|
const { insertBreak } = editor;
|
|
1558
1579
|
return editor.insertBreak = () => {
|
|
@@ -1641,7 +1662,10 @@ function createWithInsertBreak(types2, keyGenerator) {
|
|
|
1641
1662
|
(decorator) => decorator.value === mark
|
|
1642
1663
|
) || prevNodeSpans.some(
|
|
1643
1664
|
(prevNodeSpan) => prevNodeSpan.marks?.includes(mark)
|
|
1644
|
-
) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(
|
|
1665
|
+
) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(
|
|
1666
|
+
mark,
|
|
1667
|
+
editorActor.getSnapshot().context.keyGenerator()
|
|
1668
|
+
);
|
|
1645
1669
|
const newMarks = marks.map(
|
|
1646
1670
|
(mark) => newMarkDefKeys.get(mark) ?? mark
|
|
1647
1671
|
);
|
|
@@ -1722,7 +1746,7 @@ function createWithMaxBlocks(maxBlocks) {
|
|
|
1722
1746
|
}, editor;
|
|
1723
1747
|
};
|
|
1724
1748
|
}
|
|
1725
|
-
function createWithObjectKeys(editorActor, schemaTypes
|
|
1749
|
+
function createWithObjectKeys(editorActor, schemaTypes) {
|
|
1726
1750
|
return function(editor) {
|
|
1727
1751
|
const { apply: apply2, normalizeNode } = editor;
|
|
1728
1752
|
return editor.apply = (operation) => {
|
|
@@ -1739,7 +1763,7 @@ function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
|
|
|
1739
1763
|
...operation,
|
|
1740
1764
|
properties: {
|
|
1741
1765
|
...operation.properties,
|
|
1742
|
-
_key: keyGenerator()
|
|
1766
|
+
_key: editorActor.getSnapshot().context.keyGenerator()
|
|
1743
1767
|
}
|
|
1744
1768
|
});
|
|
1745
1769
|
return;
|
|
@@ -1749,7 +1773,7 @@ function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
|
|
|
1749
1773
|
...operation,
|
|
1750
1774
|
node: {
|
|
1751
1775
|
...operation.node,
|
|
1752
|
-
_key: keyGenerator()
|
|
1776
|
+
_key: editorActor.getSnapshot().context.keyGenerator()
|
|
1753
1777
|
}
|
|
1754
1778
|
});
|
|
1755
1779
|
return;
|
|
@@ -1759,12 +1783,20 @@ function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
|
|
|
1759
1783
|
const [node, path] = entry;
|
|
1760
1784
|
if (slate.Element.isElement(node) && node._type === schemaTypes.block.name) {
|
|
1761
1785
|
if (!node._key) {
|
|
1762
|
-
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1786
|
+
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1787
|
+
editor,
|
|
1788
|
+
{ _key: editorActor.getSnapshot().context.keyGenerator() },
|
|
1789
|
+
{ at: path }
|
|
1790
|
+
), editorActor.send({ type: "done normalizing" });
|
|
1763
1791
|
return;
|
|
1764
1792
|
}
|
|
1765
1793
|
for (const [child, childPath] of slate.Node.children(editor, path))
|
|
1766
1794
|
if (!child._key) {
|
|
1767
|
-
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1795
|
+
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1796
|
+
editor,
|
|
1797
|
+
{ _key: editorActor.getSnapshot().context.keyGenerator() },
|
|
1798
|
+
{ at: childPath }
|
|
1799
|
+
), editorActor.send({ type: "done normalizing" });
|
|
1768
1800
|
return;
|
|
1769
1801
|
}
|
|
1770
1802
|
}
|
|
@@ -3240,9 +3272,6 @@ function createWithPortableTextLists(types2) {
|
|
|
3240
3272
|
}, editor;
|
|
3241
3273
|
};
|
|
3242
3274
|
}
|
|
3243
|
-
function isPortableTextSpan(node) {
|
|
3244
|
-
return node._type === "span" && "text" in node && typeof node.text == "string" && (typeof node.marks > "u" || Array.isArray(node.marks) && node.marks.every((mark) => typeof mark == "string"));
|
|
3245
|
-
}
|
|
3246
3275
|
function isPortableTextBlock(node) {
|
|
3247
3276
|
return (
|
|
3248
3277
|
// A block doesn't _have_ to be named 'block' - to differentiate between
|
|
@@ -3255,8 +3284,36 @@ function isPortableTextBlock(node) {
|
|
|
3255
3284
|
node.children.every((child) => typeof child == "object" && "_type" in child)
|
|
3256
3285
|
);
|
|
3257
3286
|
}
|
|
3287
|
+
function getPreviousSpan({
|
|
3288
|
+
editor,
|
|
3289
|
+
blockPath,
|
|
3290
|
+
spanPath
|
|
3291
|
+
}) {
|
|
3292
|
+
let previousSpan;
|
|
3293
|
+
for (const [child, childPath] of slate.Node.children(editor, blockPath, {
|
|
3294
|
+
reverse: !0
|
|
3295
|
+
}))
|
|
3296
|
+
if (editor.isTextSpan(child) && slate.Path.isBefore(childPath, spanPath)) {
|
|
3297
|
+
previousSpan = child;
|
|
3298
|
+
break;
|
|
3299
|
+
}
|
|
3300
|
+
return previousSpan;
|
|
3301
|
+
}
|
|
3302
|
+
function getNextSpan({
|
|
3303
|
+
editor,
|
|
3304
|
+
blockPath,
|
|
3305
|
+
spanPath
|
|
3306
|
+
}) {
|
|
3307
|
+
let nextSpan;
|
|
3308
|
+
for (const [child, childPath] of slate.Node.children(editor, blockPath))
|
|
3309
|
+
if (editor.isTextSpan(child) && slate.Path.isAfter(childPath, spanPath)) {
|
|
3310
|
+
nextSpan = child;
|
|
3311
|
+
break;
|
|
3312
|
+
}
|
|
3313
|
+
return nextSpan;
|
|
3314
|
+
}
|
|
3258
3315
|
const debug$c = debugWithName("plugin:withPortableTextMarkModel");
|
|
3259
|
-
function createWithPortableTextMarkModel(editorActor, types2
|
|
3316
|
+
function createWithPortableTextMarkModel(editorActor, types2) {
|
|
3260
3317
|
return function(editor) {
|
|
3261
3318
|
const { apply: apply2, normalizeNode } = editor, decorators = types2.decorators.map((t) => t.value), forceNewSelection = () => {
|
|
3262
3319
|
editor.selection && (slate.Transforms.select(editor, { ...editor.selection }), editor.selection = { ...editor.selection });
|
|
@@ -3394,98 +3451,85 @@ function createWithPortableTextMarkModel(editorActor, types2, keyGenerator) {
|
|
|
3394
3451
|
})
|
|
3395
3452
|
)[0] ?? [void 0, void 0], marks = span.marks ?? [], marksWithoutAnnotations = marks.filter(
|
|
3396
3453
|
(mark) => decorators.includes(mark)
|
|
3397
|
-
), spanHasAnnotations = marks.length > marksWithoutAnnotations.length, spanIsEmpty = span.text.length === 0, atTheBeginningOfSpan = selection.anchor.offset === 0, atTheEndOfSpan = selection.anchor.offset === span.text.length
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
reverse: !0
|
|
3401
|
-
}))
|
|
3402
|
-
if (editor.isTextSpan(child) && slate.Path.isBefore(childPath, spanPath)) {
|
|
3403
|
-
previousSpan = child;
|
|
3404
|
-
break;
|
|
3405
|
-
}
|
|
3406
|
-
for (const [child, childPath] of slate.Node.children(editor, blockPath))
|
|
3407
|
-
if (editor.isTextSpan(child) && slate.Path.isAfter(childPath, spanPath)) {
|
|
3408
|
-
nextSpan = child;
|
|
3409
|
-
break;
|
|
3410
|
-
}
|
|
3411
|
-
const previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
|
|
3412
|
-
(mark) => !decorators.includes(mark) && marks.includes(mark)
|
|
3413
|
-
) : !1, previousSpanHasSameMarks = previousSpan ? previousSpan.marks?.every((mark) => marks.includes(mark)) : !1, nextSpanHasSameAnnotation = nextSpan ? nextSpan.marks?.some(
|
|
3454
|
+
), spanHasAnnotations = marks.length > marksWithoutAnnotations.length, spanIsEmpty = span.text.length === 0, atTheBeginningOfSpan = selection.anchor.offset === 0, atTheEndOfSpan = selection.anchor.offset === span.text.length, previousSpan = getPreviousSpan({ editor, blockPath, spanPath }), nextSpan = getNextSpan({ editor, blockPath, spanPath }), nextSpanAnnotations = nextSpan?.marks?.filter((mark) => !decorators.includes(mark)) ?? [], spanAnnotations = marks.filter(
|
|
3455
|
+
(mark) => !decorators.includes(mark)
|
|
3456
|
+
), previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
|
|
3414
3457
|
(mark) => !decorators.includes(mark) && marks.includes(mark)
|
|
3415
|
-
) : !1,
|
|
3458
|
+
) : !1, previousSpanHasSameMarks = previousSpan ? previousSpan.marks?.every((mark) => marks.includes(mark)) : !1, nextSpanSharesSomeAnnotations = spanAnnotations.some(
|
|
3459
|
+
(mark) => nextSpanAnnotations?.includes(mark)
|
|
3460
|
+
);
|
|
3416
3461
|
if (spanHasAnnotations && !spanIsEmpty) {
|
|
3417
3462
|
if (atTheBeginningOfSpan) {
|
|
3418
3463
|
previousSpanHasSameMarks ? slate.Transforms.insertNodes(editor, {
|
|
3419
3464
|
_type: "span",
|
|
3420
|
-
_key: keyGenerator(),
|
|
3465
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3421
3466
|
text: op.text,
|
|
3422
3467
|
marks: previousSpan?.marks ?? []
|
|
3423
3468
|
}) : previousSpanHasSameAnnotation ? apply2(op) : slate.Transforms.insertNodes(editor, {
|
|
3424
3469
|
_type: "span",
|
|
3425
|
-
_key: keyGenerator(),
|
|
3470
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3426
3471
|
text: op.text,
|
|
3427
3472
|
marks: []
|
|
3428
3473
|
});
|
|
3429
3474
|
return;
|
|
3430
3475
|
}
|
|
3431
3476
|
if (atTheEndOfSpan) {
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3477
|
+
if (nextSpan && nextSpanSharesSomeAnnotations && nextSpanAnnotations.length < spanAnnotations.length || !nextSpanSharesSomeAnnotations) {
|
|
3478
|
+
slate.Transforms.insertNodes(editor, {
|
|
3479
|
+
_type: "span",
|
|
3480
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3481
|
+
text: op.text,
|
|
3482
|
+
marks: nextSpan?.marks ?? []
|
|
3483
|
+
});
|
|
3484
|
+
return;
|
|
3485
|
+
}
|
|
3486
|
+
if (!nextSpan) {
|
|
3487
|
+
slate.Transforms.insertNodes(editor, {
|
|
3488
|
+
_type: "span",
|
|
3489
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3490
|
+
text: op.text,
|
|
3491
|
+
marks: []
|
|
3492
|
+
});
|
|
3493
|
+
return;
|
|
3494
|
+
}
|
|
3444
3495
|
}
|
|
3445
3496
|
}
|
|
3446
3497
|
}
|
|
3447
3498
|
}
|
|
3448
3499
|
if (op.type === "remove_text") {
|
|
3449
|
-
const
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
)
|
|
3461
|
-
if (
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
}
|
|
3482
|
-
return;
|
|
3483
|
-
}
|
|
3484
|
-
if (node.marks !== void 0 && node.marks.length > 0 && deletingAllText) {
|
|
3485
|
-
slate.Editor.withoutNormalizing(editor, () => {
|
|
3486
|
-
apply2(op), slate.Transforms.setNodes(editor, { marks: [] }, { at: op.path });
|
|
3487
|
-
}), editor.onChange();
|
|
3488
|
-
return;
|
|
3500
|
+
const { selection } = editor;
|
|
3501
|
+
if (selection && slate.Range.isExpanded(selection)) {
|
|
3502
|
+
const [block, blockPath] = slate.Editor.node(editor, selection, {
|
|
3503
|
+
depth: 1
|
|
3504
|
+
}), [span, spanPath] = Array.from(
|
|
3505
|
+
slate.Editor.nodes(editor, {
|
|
3506
|
+
mode: "lowest",
|
|
3507
|
+
at: { path: op.path, offset: op.offset },
|
|
3508
|
+
match: (n) => editor.isTextSpan(n),
|
|
3509
|
+
voids: !1
|
|
3510
|
+
})
|
|
3511
|
+
)[0] ?? [void 0, void 0];
|
|
3512
|
+
if (span && block && isPortableTextBlock(block)) {
|
|
3513
|
+
const markDefs = block.markDefs ?? [], marks = span.marks ?? [], spanHasAnnotations = marks.some(
|
|
3514
|
+
(mark) => markDefs.find((markDef) => markDef._key === mark)
|
|
3515
|
+
), deletingFromTheEnd = op.offset + op.text.length === span.text.length, deletingAllText = op.offset === 0 && deletingFromTheEnd, previousSpan = getPreviousSpan({ editor, blockPath, spanPath }), nextSpan = getNextSpan({ editor, blockPath, spanPath }), previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
|
|
3516
|
+
(mark) => !decorators.includes(mark) && marks.includes(mark)
|
|
3517
|
+
) : !1, nextSpanHasSameAnnotation = nextSpan ? nextSpan.marks?.some(
|
|
3518
|
+
(mark) => !decorators.includes(mark) && marks.includes(mark)
|
|
3519
|
+
) : !1;
|
|
3520
|
+
if (spanHasAnnotations && deletingAllText && !previousSpanHasSameAnnotation && !nextSpanHasSameAnnotation) {
|
|
3521
|
+
const marksWithoutAnnotationMarks = ({
|
|
3522
|
+
...slate.Editor.marks(editor) || {}
|
|
3523
|
+
}.marks || []).filter((mark) => decorators.includes(mark));
|
|
3524
|
+
slate.Editor.withoutNormalizing(editor, () => {
|
|
3525
|
+
apply2(op), slate.Transforms.setNodes(
|
|
3526
|
+
editor,
|
|
3527
|
+
{ marks: marksWithoutAnnotationMarks },
|
|
3528
|
+
{ at: op.path }
|
|
3529
|
+
);
|
|
3530
|
+
}), editor.onChange();
|
|
3531
|
+
return;
|
|
3532
|
+
}
|
|
3489
3533
|
}
|
|
3490
3534
|
}
|
|
3491
3535
|
}
|
|
@@ -3669,8 +3713,7 @@ function createWithPortableTextSelections(editorActor, types2) {
|
|
|
3669
3713
|
const debug$a = debugWithName("plugin:withSchemaTypes");
|
|
3670
3714
|
function createWithSchemaTypes({
|
|
3671
3715
|
editorActor,
|
|
3672
|
-
schemaTypes
|
|
3673
|
-
keyGenerator
|
|
3716
|
+
schemaTypes
|
|
3674
3717
|
}) {
|
|
3675
3718
|
return function(editor) {
|
|
3676
3719
|
editor.isTextBlock = (value) => types.isPortableTextTextBlock(value) && value._type === schemaTypes.block.name, editor.isTextSpan = (value) => types.isPortableTextSpan(value) && value._type === schemaTypes.span.name, editor.isListBlock = (value) => types.isPortableTextListBlock(value) && value._type === schemaTypes.block.name, editor.isVoid = (element) => schemaTypes.block.name !== element._type && (schemaTypes.blockObjects.map((obj) => obj.name).includes(element._type) || schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type)), editor.isInline = (element) => schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type) && "__inline" in element && element.__inline === !0;
|
|
@@ -3679,7 +3722,7 @@ function createWithSchemaTypes({
|
|
|
3679
3722
|
const [node, path] = entry;
|
|
3680
3723
|
if (node._type === void 0 && path.length === 2) {
|
|
3681
3724
|
debug$a("Setting span type on text node without a type");
|
|
3682
|
-
const span = node, key = span._key || keyGenerator();
|
|
3725
|
+
const span = node, key = span._key || editorActor.getSnapshot().context.keyGenerator();
|
|
3683
3726
|
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
3684
3727
|
editor,
|
|
3685
3728
|
{ ...span, _type: schemaTypes.span.name, _key: key },
|
|
@@ -3689,7 +3732,7 @@ function createWithSchemaTypes({
|
|
|
3689
3732
|
}
|
|
3690
3733
|
if (node._key === void 0 && (path.length === 1 || path.length === 2)) {
|
|
3691
3734
|
debug$a("Setting missing key on child node without a key");
|
|
3692
|
-
const key = keyGenerator();
|
|
3735
|
+
const key = editorActor.getSnapshot().context.keyGenerator();
|
|
3693
3736
|
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(editor, { _key: key }, { at: path }), editorActor.send({ type: "done normalizing" });
|
|
3694
3737
|
return;
|
|
3695
3738
|
}
|
|
@@ -3699,8 +3742,8 @@ function createWithSchemaTypes({
|
|
|
3699
3742
|
}
|
|
3700
3743
|
const debug$9 = debugWithName("plugin:withUtils");
|
|
3701
3744
|
function createWithUtils({
|
|
3745
|
+
editorActor,
|
|
3702
3746
|
schemaTypes,
|
|
3703
|
-
keyGenerator,
|
|
3704
3747
|
portableTextEditor
|
|
3705
3748
|
}) {
|
|
3706
3749
|
return function(editor) {
|
|
@@ -3726,13 +3769,13 @@ function createWithUtils({
|
|
|
3726
3769
|
[
|
|
3727
3770
|
{
|
|
3728
3771
|
_type: schemaTypes.block.name,
|
|
3729
|
-
_key: keyGenerator(),
|
|
3772
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3730
3773
|
style: schemaTypes.styles[0].value || "normal",
|
|
3731
3774
|
markDefs: [],
|
|
3732
3775
|
children: [
|
|
3733
3776
|
{
|
|
3734
3777
|
_type: "span",
|
|
3735
|
-
_key: keyGenerator(),
|
|
3778
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3736
3779
|
text: "",
|
|
3737
3780
|
marks: options.decorators.filter(
|
|
3738
3781
|
(decorator) => schemaTypes.decorators.find(({ value }) => value === decorator)
|
|
@@ -3800,7 +3843,7 @@ function createWithHotkeys(types$1, portableTextEditor, hotkeysFromOptions) {
|
|
|
3800
3843
|
{
|
|
3801
3844
|
at: nextPath
|
|
3802
3845
|
}
|
|
3803
|
-
), editor.onChange();
|
|
3846
|
+
), slate.Transforms.select(editor, { path: [...nextPath, 0], offset: 0 }), editor.onChange();
|
|
3804
3847
|
return;
|
|
3805
3848
|
}
|
|
3806
3849
|
}
|
|
@@ -3845,22 +3888,7 @@ function createWithHotkeys(types$1, portableTextEditor, hotkeysFromOptions) {
|
|
|
3845
3888
|
return;
|
|
3846
3889
|
}
|
|
3847
3890
|
}
|
|
3848
|
-
if (focusBlock && slate.Editor.isVoid(editor, focusBlock)) {
|
|
3849
|
-
slate.Editor.insertNode(editor, editor.pteCreateTextBlock({ decorators: [] })), event.preventDefault(), editor.onChange();
|
|
3850
|
-
return;
|
|
3851
|
-
}
|
|
3852
|
-
event.preventDefault(), editor.insertBreak(), editor.onChange();
|
|
3853
3891
|
}
|
|
3854
|
-
if (isShiftEnter) {
|
|
3855
|
-
event.preventDefault(), editor.insertText(`
|
|
3856
|
-
`);
|
|
3857
|
-
return;
|
|
3858
|
-
}
|
|
3859
|
-
if (isHotkeyEsm.isHotkey("mod+z", event.nativeEvent)) {
|
|
3860
|
-
event.preventDefault(), editor.undo();
|
|
3861
|
-
return;
|
|
3862
|
-
}
|
|
3863
|
-
(isHotkeyEsm.isHotkey("mod+y", event.nativeEvent) || isHotkeyEsm.isHotkey("mod+shift+z", event.nativeEvent)) && (event.preventDefault(), editor.redo());
|
|
3864
3892
|
}, editor;
|
|
3865
3893
|
};
|
|
3866
3894
|
}
|
|
@@ -4143,7 +4171,7 @@ function validateValue(value, types$1, keyGenerator) {
|
|
|
4143
4171
|
}) && (valid = !1), { valid, resolution, value });
|
|
4144
4172
|
}
|
|
4145
4173
|
const debug$7 = debugWithName("plugin:withInsertData");
|
|
4146
|
-
function createWithInsertData(editorActor, schemaTypes
|
|
4174
|
+
function createWithInsertData(editorActor, schemaTypes) {
|
|
4147
4175
|
return function(editor) {
|
|
4148
4176
|
const blockTypeName = schemaTypes.block.name, spanTypeName = schemaTypes.span.name, whitespaceOnPasteMode = schemaTypes.block.options.unstable_whitespaceOnPasteMode, toPlainText = (blocks) => blocks.map((block) => editor.isTextBlock(block) ? block.children.map((child) => child._type === spanTypeName ? child.text : `[${schemaTypes.inlineObjects.find((t) => t.name === child._type)?.title || "Object"}]`).join("") : `[${schemaTypes.blockObjects.find((t) => t.name === block._type)?.title || "Object"}]`).join(`
|
|
4149
4177
|
|
|
@@ -4191,10 +4219,14 @@ function createWithInsertData(editorActor, schemaTypes, keyGenerator) {
|
|
|
4191
4219
|
const slateValue = _regenerateKeys(
|
|
4192
4220
|
editor,
|
|
4193
4221
|
toSlateValue(parsed, { schemaTypes }),
|
|
4194
|
-
keyGenerator,
|
|
4222
|
+
editorActor.getSnapshot().context.keyGenerator,
|
|
4195
4223
|
spanTypeName,
|
|
4196
4224
|
schemaTypes
|
|
4197
|
-
), validation = validateValue(
|
|
4225
|
+
), validation = validateValue(
|
|
4226
|
+
parsed,
|
|
4227
|
+
schemaTypes,
|
|
4228
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4229
|
+
);
|
|
4198
4230
|
if (!validation.valid && !validation.resolution?.autoResolve) {
|
|
4199
4231
|
const errorDescription = `${validation.resolution?.description}`;
|
|
4200
4232
|
return editorActor.send({
|
|
@@ -4235,7 +4267,7 @@ function createWithInsertData(editorActor, schemaTypes, keyGenerator) {
|
|
|
4235
4267
|
const validation = validateValue(
|
|
4236
4268
|
portableText,
|
|
4237
4269
|
schemaTypes,
|
|
4238
|
-
keyGenerator
|
|
4270
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4239
4271
|
);
|
|
4240
4272
|
if (!validation.valid) {
|
|
4241
4273
|
const errorDescription = `Could not validate the resulting portable text to insert.
|
|
@@ -4339,27 +4371,21 @@ function _insertFragment(editor, fragment, schemaTypes) {
|
|
|
4339
4371
|
}), editor.onChange();
|
|
4340
4372
|
}
|
|
4341
4373
|
const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, options) => {
|
|
4342
|
-
const e = editor, {
|
|
4374
|
+
const e = editor, { portableTextEditor, patches$, readOnly, maxBlocks } = options, { editorActor, schemaTypes } = portableTextEditor;
|
|
4343
4375
|
e.subscriptions = [], e.destroy ? e.destroy() : originalFnMap.set(e, {
|
|
4344
4376
|
apply: e.apply,
|
|
4345
4377
|
onChange: e.onChange,
|
|
4346
4378
|
normalizeNode: e.normalizeNode
|
|
4347
4379
|
});
|
|
4348
|
-
const operationToPatches = createOperationToPatches(schemaTypes), withObjectKeys = createWithObjectKeys(
|
|
4349
|
-
editorActor,
|
|
4350
|
-
schemaTypes,
|
|
4351
|
-
keyGenerator
|
|
4352
|
-
), withSchemaTypes = createWithSchemaTypes({
|
|
4380
|
+
const operationToPatches = createOperationToPatches(schemaTypes), withObjectKeys = createWithObjectKeys(editorActor, schemaTypes), withSchemaTypes = createWithSchemaTypes({
|
|
4353
4381
|
editorActor,
|
|
4354
|
-
schemaTypes
|
|
4355
|
-
keyGenerator
|
|
4382
|
+
schemaTypes
|
|
4356
4383
|
}), withEditableAPI = createWithEditableAPI(
|
|
4384
|
+
editorActor,
|
|
4357
4385
|
portableTextEditor,
|
|
4358
|
-
schemaTypes
|
|
4359
|
-
keyGenerator
|
|
4386
|
+
schemaTypes
|
|
4360
4387
|
), withPatches = createWithPatches({
|
|
4361
4388
|
editorActor,
|
|
4362
|
-
keyGenerator,
|
|
4363
4389
|
patches$,
|
|
4364
4390
|
patchFunctions: operationToPatches,
|
|
4365
4391
|
readOnly,
|
|
@@ -4370,13 +4396,12 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4370
4396
|
blockSchemaType: schemaTypes.block
|
|
4371
4397
|
}), withPortableTextMarkModel = createWithPortableTextMarkModel(
|
|
4372
4398
|
editorActor,
|
|
4373
|
-
schemaTypes
|
|
4374
|
-
keyGenerator
|
|
4399
|
+
schemaTypes
|
|
4375
4400
|
), withPortableTextBlockStyle = createWithPortableTextBlockStyle(
|
|
4376
4401
|
editorActor,
|
|
4377
4402
|
schemaTypes
|
|
4378
|
-
), withPlaceholderBlock = createWithPlaceholderBlock(), withInsertBreak = createWithInsertBreak(
|
|
4379
|
-
|
|
4403
|
+
), withPlaceholderBlock = createWithPlaceholderBlock(), withInsertBreak = createWithInsertBreak(editorActor, schemaTypes), withUtils = createWithUtils({
|
|
4404
|
+
editorActor,
|
|
4380
4405
|
schemaTypes,
|
|
4381
4406
|
portableTextEditor
|
|
4382
4407
|
}), withPortableTextSelections = createWithPortableTextSelections(
|
|
@@ -4444,10 +4469,9 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4444
4469
|
};
|
|
4445
4470
|
}, debug$6 = debugWithName("component:PortableTextEditor:SlateContainer");
|
|
4446
4471
|
function SlateContainer(props) {
|
|
4447
|
-
const { patches$, portableTextEditor, readOnly, maxBlocks
|
|
4472
|
+
const { patches$, portableTextEditor, readOnly, maxBlocks } = props, [[slateEditor, subscribe]] = react.useState(() => {
|
|
4448
4473
|
debug$6("Creating new Slate editor instance");
|
|
4449
4474
|
const { editor, subscribe: _sub } = withPlugins(slateReact.withReact(slate.createEditor()), {
|
|
4450
|
-
keyGenerator,
|
|
4451
4475
|
maxBlocks,
|
|
4452
4476
|
patches$,
|
|
4453
4477
|
portableTextEditor,
|
|
@@ -4462,33 +4486,18 @@ function SlateContainer(props) {
|
|
|
4462
4486
|
};
|
|
4463
4487
|
}, [subscribe]), react.useEffect(() => {
|
|
4464
4488
|
debug$6("Re-initializing plugin chain"), withPlugins(slateEditor, {
|
|
4465
|
-
keyGenerator,
|
|
4466
4489
|
maxBlocks,
|
|
4467
4490
|
patches$,
|
|
4468
4491
|
portableTextEditor,
|
|
4469
4492
|
readOnly
|
|
4470
4493
|
});
|
|
4471
|
-
}, [
|
|
4472
|
-
keyGenerator,
|
|
4473
|
-
portableTextEditor,
|
|
4474
|
-
maxBlocks,
|
|
4475
|
-
readOnly,
|
|
4476
|
-
patches$,
|
|
4477
|
-
slateEditor
|
|
4478
|
-
]);
|
|
4494
|
+
}, [portableTextEditor, maxBlocks, readOnly, patches$, slateEditor]);
|
|
4479
4495
|
const initialValue = react.useMemo(() => [slateEditor.pteCreateTextBlock({ decorators: [] })], [slateEditor]);
|
|
4480
4496
|
return react.useEffect(() => () => {
|
|
4481
4497
|
debug$6("Destroying Slate editor"), slateEditor.destroy();
|
|
4482
4498
|
}, [slateEditor]), /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, { editor: slateEditor, initialValue, children: props.children });
|
|
4483
4499
|
}
|
|
4484
|
-
const
|
|
4485
|
-
const keyGenerator = react.useContext(PortableTextEditorKeyGeneratorContext);
|
|
4486
|
-
if (keyGenerator === void 0)
|
|
4487
|
-
throw new Error(
|
|
4488
|
-
"The `usePortableTextEditorKeyGenerator` hook must be used inside the <PortableTextEditor> component's context."
|
|
4489
|
-
);
|
|
4490
|
-
return keyGenerator;
|
|
4491
|
-
}, PortableTextEditorReadOnlyContext = react.createContext(!1), usePortableTextEditorReadOnlyStatus = () => {
|
|
4500
|
+
const PortableTextEditorReadOnlyContext = react.createContext(!1), usePortableTextEditorReadOnlyStatus = () => {
|
|
4492
4501
|
const readOnly = react.useContext(PortableTextEditorReadOnlyContext);
|
|
4493
4502
|
if (readOnly === void 0)
|
|
4494
4503
|
throw new Error(
|
|
@@ -4497,7 +4506,7 @@ const defaultKeyGenerator = () => content.randomKey(12), PortableTextEditorKeyGe
|
|
|
4497
4506
|
return readOnly;
|
|
4498
4507
|
}, debug$5 = debugWithName("hook:useSyncValue"), CURRENT_VALUE = /* @__PURE__ */ new WeakMap();
|
|
4499
4508
|
function useSyncValue(props) {
|
|
4500
|
-
const { editorActor, portableTextEditor, readOnly
|
|
4509
|
+
const { editorActor, portableTextEditor, readOnly } = props, { schemaTypes } = portableTextEditor, previousValue = react.useRef(), slateEditor = slateReact.useSlate(), updateValueFunctionRef = react.useRef(), updateFromCurrentValue = react.useCallback(() => {
|
|
4501
4510
|
const currentValue = CURRENT_VALUE.get(portableTextEditor);
|
|
4502
4511
|
if (previousValue.current === currentValue) {
|
|
4503
4512
|
debug$5("Value is the same object as previous, not need to sync");
|
|
@@ -4563,7 +4572,7 @@ function useSyncValue(props) {
|
|
|
4563
4572
|
const validationValue = [value[currentBlockIndex]], validation = validateValue(
|
|
4564
4573
|
validationValue,
|
|
4565
4574
|
schemaTypes,
|
|
4566
|
-
keyGenerator
|
|
4575
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4567
4576
|
);
|
|
4568
4577
|
!validation.valid && validation.resolution?.autoResolve && validation.resolution?.patches.length > 0 && !readOnly && previousValue.current && previousValue.current !== value && (console.warn(
|
|
4569
4578
|
`${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`
|
|
@@ -4588,7 +4597,7 @@ function useSyncValue(props) {
|
|
|
4588
4597
|
const validationValue = [value[currentBlockIndex]], validation = validateValue(
|
|
4589
4598
|
validationValue,
|
|
4590
4599
|
schemaTypes,
|
|
4591
|
-
keyGenerator
|
|
4600
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4592
4601
|
);
|
|
4593
4602
|
debug$5.enabled && debug$5(
|
|
4594
4603
|
"Validating and inserting new block in the end of the value",
|
|
@@ -4635,7 +4644,6 @@ function useSyncValue(props) {
|
|
|
4635
4644
|
return updateValueFunctionRef.current = updateFunction, updateFunction;
|
|
4636
4645
|
}, [
|
|
4637
4646
|
editorActor,
|
|
4638
|
-
keyGenerator,
|
|
4639
4647
|
portableTextEditor,
|
|
4640
4648
|
readOnly,
|
|
4641
4649
|
schemaTypes,
|
|
@@ -4703,9 +4711,8 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
|
|
|
4703
4711
|
}
|
|
4704
4712
|
const debug$4 = debugWithName("component:PortableTextEditor:Synchronizer"), debugVerbose$1 = debug$4.enabled && !1, FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === "test" ? 500 : 1e3;
|
|
4705
4713
|
function Synchronizer(props) {
|
|
4706
|
-
const portableTextEditor = usePortableTextEditor(),
|
|
4714
|
+
const portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), { editorActor, getValue, onChange, value } = props, pendingPatches = react.useRef([]), syncValue = useSyncValue({
|
|
4707
4715
|
editorActor,
|
|
4708
|
-
keyGenerator,
|
|
4709
4716
|
portableTextEditor,
|
|
4710
4717
|
readOnly
|
|
4711
4718
|
}), slateEditor = slateReact.useSlate();
|
|
@@ -4806,6 +4813,29 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
|
|
|
4806
4813
|
debug$4("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (editorActor.send({ type: "ready" }), isInitialValueFromProps.current = !1);
|
|
4807
4814
|
}, [editorActor, syncValue, value]), null;
|
|
4808
4815
|
}
|
|
4816
|
+
function inserText({
|
|
4817
|
+
event
|
|
4818
|
+
}) {
|
|
4819
|
+
slate.Editor.insertText(event.editor, event.text);
|
|
4820
|
+
}
|
|
4821
|
+
function inserTextBlock({
|
|
4822
|
+
context,
|
|
4823
|
+
event
|
|
4824
|
+
}) {
|
|
4825
|
+
slate.Editor.insertNode(event.editor, {
|
|
4826
|
+
_key: context.keyGenerator(),
|
|
4827
|
+
_type: context.schema.block.name,
|
|
4828
|
+
style: context.schema.styles[0].value ?? "normal",
|
|
4829
|
+
markDefs: [],
|
|
4830
|
+
children: [
|
|
4831
|
+
{
|
|
4832
|
+
_key: context.keyGenerator(),
|
|
4833
|
+
_type: "span",
|
|
4834
|
+
text: ""
|
|
4835
|
+
}
|
|
4836
|
+
]
|
|
4837
|
+
});
|
|
4838
|
+
}
|
|
4809
4839
|
const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
4810
4840
|
const onlineHandler = () => {
|
|
4811
4841
|
sendBack({ type: "online" });
|
|
@@ -4819,9 +4849,19 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
|
4819
4849
|
types: {
|
|
4820
4850
|
context: {},
|
|
4821
4851
|
events: {},
|
|
4822
|
-
emitted: {}
|
|
4852
|
+
emitted: {},
|
|
4853
|
+
input: {}
|
|
4823
4854
|
},
|
|
4824
4855
|
actions: {
|
|
4856
|
+
"apply:insert text": ({ context, event }) => {
|
|
4857
|
+
xstate.assertEvent(event, "insert text"), inserText({ context, event });
|
|
4858
|
+
},
|
|
4859
|
+
"apply:insert text block": ({ context, event }) => {
|
|
4860
|
+
xstate.assertEvent(event, "insert text block"), inserTextBlock({ context, event });
|
|
4861
|
+
},
|
|
4862
|
+
"assign schema": xstate.assign({
|
|
4863
|
+
schema: ({ event }) => (xstate.assertEvent(event, "update schema"), event.schema)
|
|
4864
|
+
}),
|
|
4825
4865
|
"emit patch event": xstate.emit(({ event }) => (xstate.assertEvent(event, "patch"), event)),
|
|
4826
4866
|
"emit mutation event": xstate.emit(({ event }) => (xstate.assertEvent(event, "mutation"), event)),
|
|
4827
4867
|
"defer event": xstate.assign({
|
|
@@ -4833,6 +4873,50 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
|
4833
4873
|
}),
|
|
4834
4874
|
"clear pending events": xstate.assign({
|
|
4835
4875
|
pendingEvents: []
|
|
4876
|
+
}),
|
|
4877
|
+
"handle behavior event": xstate.enqueueActions(({ context, event, enqueue }) => {
|
|
4878
|
+
xstate.assertEvent(event, ["key down"]);
|
|
4879
|
+
const eventBehaviors = context.behaviors.filter(
|
|
4880
|
+
(behavior) => behavior.on === event.type
|
|
4881
|
+
);
|
|
4882
|
+
if (eventBehaviors.length === 0)
|
|
4883
|
+
return;
|
|
4884
|
+
const value = fromSlateValue(
|
|
4885
|
+
event.editor.children,
|
|
4886
|
+
context.schema.block.name,
|
|
4887
|
+
KEY_TO_VALUE_ELEMENT.get(event.editor)
|
|
4888
|
+
), selection = toPortableTextRange(
|
|
4889
|
+
value,
|
|
4890
|
+
event.editor.selection,
|
|
4891
|
+
context.schema
|
|
4892
|
+
);
|
|
4893
|
+
if (!selection) {
|
|
4894
|
+
console.warn(
|
|
4895
|
+
`Unable to handle event ${event.type} due to missing selection`
|
|
4896
|
+
);
|
|
4897
|
+
return;
|
|
4898
|
+
}
|
|
4899
|
+
const behaviorContext = {
|
|
4900
|
+
schema: context.schema,
|
|
4901
|
+
value,
|
|
4902
|
+
selection
|
|
4903
|
+
};
|
|
4904
|
+
for (const eventBehavior of eventBehaviors) {
|
|
4905
|
+
const shouldRun = eventBehavior.guard?.({
|
|
4906
|
+
context: behaviorContext,
|
|
4907
|
+
event
|
|
4908
|
+
}) ?? !0;
|
|
4909
|
+
if (!shouldRun)
|
|
4910
|
+
continue;
|
|
4911
|
+
const actions = eventBehavior.actions.map(
|
|
4912
|
+
(action) => action({ context: behaviorContext, event }, shouldRun)
|
|
4913
|
+
);
|
|
4914
|
+
for (const action of actions)
|
|
4915
|
+
typeof action == "object" && enqueue.raise({
|
|
4916
|
+
...action,
|
|
4917
|
+
editor: event.editor
|
|
4918
|
+
});
|
|
4919
|
+
}
|
|
4836
4920
|
})
|
|
4837
4921
|
},
|
|
4838
4922
|
actors: {
|
|
@@ -4840,9 +4924,12 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
|
4840
4924
|
}
|
|
4841
4925
|
}).createMachine({
|
|
4842
4926
|
id: "editor",
|
|
4843
|
-
context: {
|
|
4844
|
-
|
|
4845
|
-
|
|
4927
|
+
context: ({ input }) => ({
|
|
4928
|
+
behaviors: input.behaviors,
|
|
4929
|
+
keyGenerator: input.keyGenerator,
|
|
4930
|
+
pendingEvents: [],
|
|
4931
|
+
schema: input.schema
|
|
4932
|
+
}),
|
|
4846
4933
|
invoke: {
|
|
4847
4934
|
id: "networkLogic",
|
|
4848
4935
|
src: "networkLogic"
|
|
@@ -4859,7 +4946,17 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
|
4859
4946
|
online: { actions: xstate.emit({ type: "online" }) },
|
|
4860
4947
|
offline: { actions: xstate.emit({ type: "offline" }) },
|
|
4861
4948
|
loading: { actions: xstate.emit({ type: "loading" }) },
|
|
4862
|
-
"done loading": { actions: xstate.emit({ type: "done loading" }) }
|
|
4949
|
+
"done loading": { actions: xstate.emit({ type: "done loading" }) },
|
|
4950
|
+
"update schema": { actions: "assign schema" },
|
|
4951
|
+
"key down": {
|
|
4952
|
+
actions: ["handle behavior event"]
|
|
4953
|
+
},
|
|
4954
|
+
"insert text": {
|
|
4955
|
+
actions: ["apply:insert text"]
|
|
4956
|
+
},
|
|
4957
|
+
"insert text block": {
|
|
4958
|
+
actions: ["apply:insert text block"]
|
|
4959
|
+
}
|
|
4863
4960
|
},
|
|
4864
4961
|
initial: "pristine",
|
|
4865
4962
|
states: {
|
|
@@ -4930,7 +5027,7 @@ function PortableTextEditorSelectionProvider(props) {
|
|
|
4930
5027
|
};
|
|
4931
5028
|
}, [props.editorActor]), /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorSelectionContext.Provider, { value: selection, children: props.children });
|
|
4932
5029
|
}
|
|
4933
|
-
const debug$2 = debugWithName("component:PortableTextEditor");
|
|
5030
|
+
const defaultKeyGenerator = () => content.randomKey(12), debug$2 = debugWithName("component:PortableTextEditor");
|
|
4934
5031
|
class PortableTextEditor extends react.Component {
|
|
4935
5032
|
/**
|
|
4936
5033
|
* @internal
|
|
@@ -4954,14 +5051,23 @@ class PortableTextEditor extends react.Component {
|
|
|
4954
5051
|
throw new Error('PortableTextEditor: missing "schemaType" property');
|
|
4955
5052
|
props.incomingPatches$ && console.warn(
|
|
4956
5053
|
"The prop 'incomingPatches$' is deprecated and renamed to 'patches$'"
|
|
4957
|
-
), this.
|
|
5054
|
+
), this.schemaTypes = getPortableTextMemberSchemaTypes(
|
|
4958
5055
|
props.schemaType.hasOwnProperty("jsonType") ? props.schemaType : compileType(props.schemaType)
|
|
4959
|
-
)
|
|
5056
|
+
), this.editorActor = xstate.createActor(editorMachine, {
|
|
5057
|
+
input: {
|
|
5058
|
+
behaviors: coreBehaviors,
|
|
5059
|
+
keyGenerator: props.keyGenerator || defaultKeyGenerator,
|
|
5060
|
+
schema: this.schemaTypes
|
|
5061
|
+
}
|
|
5062
|
+
}), this.editorActor.start();
|
|
4960
5063
|
}
|
|
4961
5064
|
componentDidUpdate(prevProps) {
|
|
4962
5065
|
this.props.schemaType !== prevProps.schemaType && (this.schemaTypes = getPortableTextMemberSchemaTypes(
|
|
4963
5066
|
this.props.schemaType.hasOwnProperty("jsonType") ? this.props.schemaType : compileType(this.props.schemaType)
|
|
4964
|
-
)
|
|
5067
|
+
), this.editorActor.send({
|
|
5068
|
+
type: "update schema",
|
|
5069
|
+
schema: this.schemaTypes
|
|
5070
|
+
})), this.props.editorRef !== prevProps.editorRef && this.props.editorRef && (this.props.editorRef.current = this);
|
|
4965
5071
|
}
|
|
4966
5072
|
setEditable = (editable) => {
|
|
4967
5073
|
this.editable = { ...this.editable, ...editable };
|
|
@@ -4971,35 +5077,28 @@ class PortableTextEditor extends react.Component {
|
|
|
4971
5077
|
return this.editable.getValue();
|
|
4972
5078
|
};
|
|
4973
5079
|
render() {
|
|
4974
|
-
const { value, children, patches$, incomingPatches$ } = this.props, _patches$ = incomingPatches$ || patches$, maxBlocks = typeof this.props.maxBlocks > "u" ? void 0 : Number.parseInt(this.props.maxBlocks.toString(), 10) || void 0, readOnly = !!this.props.readOnly
|
|
5080
|
+
const { value, children, patches$, incomingPatches$ } = this.props, _patches$ = incomingPatches$ || patches$, maxBlocks = typeof this.props.maxBlocks > "u" ? void 0 : Number.parseInt(this.props.maxBlocks.toString(), 10) || void 0, readOnly = !!this.props.readOnly;
|
|
4975
5081
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4976
5082
|
SlateContainer,
|
|
4977
5083
|
{
|
|
4978
|
-
keyGenerator,
|
|
4979
5084
|
maxBlocks,
|
|
4980
5085
|
patches$: _patches$,
|
|
4981
5086
|
portableTextEditor: this,
|
|
4982
5087
|
readOnly,
|
|
4983
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4984
|
-
|
|
4985
|
-
|
|
4986
|
-
|
|
4987
|
-
|
|
4988
|
-
|
|
4989
|
-
|
|
4990
|
-
|
|
4991
|
-
|
|
4992
|
-
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
|
|
4997
|
-
}
|
|
4998
|
-
),
|
|
4999
|
-
children
|
|
5000
|
-
]
|
|
5001
|
-
}
|
|
5002
|
-
) }) }) })
|
|
5088
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsxRuntime.jsxs(PortableTextEditorSelectionProvider, { editorActor: this.editorActor, children: [
|
|
5089
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5090
|
+
Synchronizer,
|
|
5091
|
+
{
|
|
5092
|
+
editorActor: this.editorActor,
|
|
5093
|
+
getValue: this.getValue,
|
|
5094
|
+
onChange: (change) => {
|
|
5095
|
+
this.props.onChange(change), this.change$.next(change);
|
|
5096
|
+
},
|
|
5097
|
+
value
|
|
5098
|
+
}
|
|
5099
|
+
),
|
|
5100
|
+
children
|
|
5101
|
+
] }) }) })
|
|
5003
5102
|
}
|
|
5004
5103
|
);
|
|
5005
5104
|
}
|
|
@@ -5265,7 +5364,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5265
5364
|
scrollSelectionIntoView,
|
|
5266
5365
|
spellCheck,
|
|
5267
5366
|
...restProps
|
|
5268
|
-
} = props, portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(),
|
|
5367
|
+
} = props, portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), ref = react.useRef(null), [editableElement, setEditableElement] = react.useState(
|
|
5269
5368
|
null
|
|
5270
5369
|
), [hasInvalidValue, setHasInvalidValue] = react.useState(!1), [rangeDecorationState, setRangeDecorationsState] = react.useState([]);
|
|
5271
5370
|
react.useImperativeHandle(
|
|
@@ -5273,8 +5372,8 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5273
5372
|
() => ref.current
|
|
5274
5373
|
);
|
|
5275
5374
|
const rangeDecorationsRef = react.useRef(rangeDecorations), { editorActor, schemaTypes } = portableTextEditor, slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = react.useMemo(
|
|
5276
|
-
() => createWithInsertData(editorActor, schemaTypes
|
|
5277
|
-
[editorActor,
|
|
5375
|
+
() => createWithInsertData(editorActor, schemaTypes),
|
|
5376
|
+
[editorActor, schemaTypes]
|
|
5278
5377
|
), withHotKeys = react.useMemo(
|
|
5279
5378
|
() => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
|
|
5280
5379
|
[hotkeys, portableTextEditor, schemaTypes]
|
|
@@ -5525,7 +5624,11 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5525
5624
|
}, [validateSelection, editableElement]);
|
|
5526
5625
|
const handleKeyDown = react.useCallback(
|
|
5527
5626
|
(event) => {
|
|
5528
|
-
props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() ||
|
|
5627
|
+
props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() || (editorActor.send({
|
|
5628
|
+
type: "key down",
|
|
5629
|
+
nativeEvent: event.nativeEvent,
|
|
5630
|
+
editor: slateEditor
|
|
5631
|
+
}), slateEditor.pteWithHotKeys(event));
|
|
5529
5632
|
},
|
|
5530
5633
|
[props, slateEditor]
|
|
5531
5634
|
), scrollSelectionIntoViewToSlate = react.useMemo(() => {
|