@portabletext/editor 1.1.4 → 1.1.5
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/lib/index.d.mts +228 -30
- package/lib/index.d.ts +228 -30
- package/lib/index.esm.js +88 -100
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +88 -100
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +88 -100
- package/lib/index.mjs.map +1 -1
- package/package.json +24 -19
- package/src/editor/Editable.tsx +6 -11
- package/src/editor/PortableTextEditor.tsx +26 -30
- package/src/editor/__tests__/self-solving.test.tsx +1 -1
- package/src/editor/components/SlateContainer.tsx +2 -13
- package/src/editor/components/Synchronizer.tsx +0 -3
- package/src/editor/editor-machine.ts +7 -2
- 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 -0
- 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 +4 -5
- 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 +2 -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/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"), isHotkeyEsm = require("is-hotkey-esm"), blockTools = require("@sanity/block-tools"), isPlainObject = require("lodash/isPlainObject.js"), throttle = require("lodash/throttle.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"), patches = require("@portabletext/patches"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), flatten = require("lodash/flatten.js"), isHotkeyEsm = require("is-hotkey-esm"), 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
|
}
|
|
@@ -1067,7 +1067,7 @@ function createOperationToPatches(types2) {
|
|
|
1067
1067
|
};
|
|
1068
1068
|
}
|
|
1069
1069
|
const debug$j = debugWithName("API:editable");
|
|
1070
|
-
function createWithEditableAPI(portableTextEditor, types$1
|
|
1070
|
+
function createWithEditableAPI(editorActor, portableTextEditor, types$1) {
|
|
1071
1071
|
return function(editor) {
|
|
1072
1072
|
return portableTextEditor.setEditable({
|
|
1073
1073
|
focus: () => {
|
|
@@ -1147,11 +1147,11 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1147
1147
|
const child = toSlateValue(
|
|
1148
1148
|
[
|
|
1149
1149
|
{
|
|
1150
|
-
_key: keyGenerator(),
|
|
1150
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
1151
1151
|
_type: types$1.block.name,
|
|
1152
1152
|
children: [
|
|
1153
1153
|
{
|
|
1154
|
-
_key: keyGenerator(),
|
|
1154
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
1155
1155
|
_type: type.name,
|
|
1156
1156
|
...value || {}
|
|
1157
1157
|
}
|
|
@@ -1179,7 +1179,7 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1179
1179
|
const block = toSlateValue(
|
|
1180
1180
|
[
|
|
1181
1181
|
{
|
|
1182
|
-
_key: keyGenerator(),
|
|
1182
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
1183
1183
|
_type: type.name,
|
|
1184
1184
|
...value || {}
|
|
1185
1185
|
}
|
|
@@ -1343,7 +1343,7 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1343
1343
|
for (const [block, blockPath] of selectedBlocks) {
|
|
1344
1344
|
if (block.children.length === 0 || block.children.length === 1 && block.children[0].text === "")
|
|
1345
1345
|
continue;
|
|
1346
|
-
const annotationKey = keyGenerator(), markDefs = block.markDefs ?? [];
|
|
1346
|
+
const annotationKey = editorActor.getSnapshot().context.keyGenerator(), markDefs = block.markDefs ?? [];
|
|
1347
1347
|
markDefs.find(
|
|
1348
1348
|
(markDef) => markDef._type === type.name && markDef._key === annotationKey
|
|
1349
1349
|
) === void 0 && (slate.Transforms.setNodes(
|
|
@@ -1552,7 +1552,7 @@ function createWithEditableAPI(portableTextEditor, types$1, keyGenerator) {
|
|
|
1552
1552
|
}), editor;
|
|
1553
1553
|
};
|
|
1554
1554
|
}
|
|
1555
|
-
function createWithInsertBreak(
|
|
1555
|
+
function createWithInsertBreak(editorActor, types2) {
|
|
1556
1556
|
return function(editor) {
|
|
1557
1557
|
const { insertBreak } = editor;
|
|
1558
1558
|
return editor.insertBreak = () => {
|
|
@@ -1641,7 +1641,10 @@ function createWithInsertBreak(types2, keyGenerator) {
|
|
|
1641
1641
|
(decorator) => decorator.value === mark
|
|
1642
1642
|
) || prevNodeSpans.some(
|
|
1643
1643
|
(prevNodeSpan) => prevNodeSpan.marks?.includes(mark)
|
|
1644
|
-
) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(
|
|
1644
|
+
) && !newMarkDefKeys.has(mark) && newMarkDefKeys.set(
|
|
1645
|
+
mark,
|
|
1646
|
+
editorActor.getSnapshot().context.keyGenerator()
|
|
1647
|
+
);
|
|
1645
1648
|
const newMarks = marks.map(
|
|
1646
1649
|
(mark) => newMarkDefKeys.get(mark) ?? mark
|
|
1647
1650
|
);
|
|
@@ -1722,7 +1725,7 @@ function createWithMaxBlocks(maxBlocks) {
|
|
|
1722
1725
|
}, editor;
|
|
1723
1726
|
};
|
|
1724
1727
|
}
|
|
1725
|
-
function createWithObjectKeys(editorActor, schemaTypes
|
|
1728
|
+
function createWithObjectKeys(editorActor, schemaTypes) {
|
|
1726
1729
|
return function(editor) {
|
|
1727
1730
|
const { apply: apply2, normalizeNode } = editor;
|
|
1728
1731
|
return editor.apply = (operation) => {
|
|
@@ -1739,7 +1742,7 @@ function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
|
|
|
1739
1742
|
...operation,
|
|
1740
1743
|
properties: {
|
|
1741
1744
|
...operation.properties,
|
|
1742
|
-
_key: keyGenerator()
|
|
1745
|
+
_key: editorActor.getSnapshot().context.keyGenerator()
|
|
1743
1746
|
}
|
|
1744
1747
|
});
|
|
1745
1748
|
return;
|
|
@@ -1749,7 +1752,7 @@ function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
|
|
|
1749
1752
|
...operation,
|
|
1750
1753
|
node: {
|
|
1751
1754
|
...operation.node,
|
|
1752
|
-
_key: keyGenerator()
|
|
1755
|
+
_key: editorActor.getSnapshot().context.keyGenerator()
|
|
1753
1756
|
}
|
|
1754
1757
|
});
|
|
1755
1758
|
return;
|
|
@@ -1759,12 +1762,20 @@ function createWithObjectKeys(editorActor, schemaTypes, keyGenerator) {
|
|
|
1759
1762
|
const [node, path] = entry;
|
|
1760
1763
|
if (slate.Element.isElement(node) && node._type === schemaTypes.block.name) {
|
|
1761
1764
|
if (!node._key) {
|
|
1762
|
-
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1765
|
+
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1766
|
+
editor,
|
|
1767
|
+
{ _key: editorActor.getSnapshot().context.keyGenerator() },
|
|
1768
|
+
{ at: path }
|
|
1769
|
+
), editorActor.send({ type: "done normalizing" });
|
|
1763
1770
|
return;
|
|
1764
1771
|
}
|
|
1765
1772
|
for (const [child, childPath] of slate.Node.children(editor, path))
|
|
1766
1773
|
if (!child._key) {
|
|
1767
|
-
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1774
|
+
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
1775
|
+
editor,
|
|
1776
|
+
{ _key: editorActor.getSnapshot().context.keyGenerator() },
|
|
1777
|
+
{ at: childPath }
|
|
1778
|
+
), editorActor.send({ type: "done normalizing" });
|
|
1768
1779
|
return;
|
|
1769
1780
|
}
|
|
1770
1781
|
}
|
|
@@ -3256,7 +3267,7 @@ function isPortableTextBlock(node) {
|
|
|
3256
3267
|
);
|
|
3257
3268
|
}
|
|
3258
3269
|
const debug$c = debugWithName("plugin:withPortableTextMarkModel");
|
|
3259
|
-
function createWithPortableTextMarkModel(editorActor, types2
|
|
3270
|
+
function createWithPortableTextMarkModel(editorActor, types2) {
|
|
3260
3271
|
return function(editor) {
|
|
3261
3272
|
const { apply: apply2, normalizeNode } = editor, decorators = types2.decorators.map((t) => t.value), forceNewSelection = () => {
|
|
3262
3273
|
editor.selection && (slate.Transforms.select(editor, { ...editor.selection }), editor.selection = { ...editor.selection });
|
|
@@ -3417,12 +3428,12 @@ function createWithPortableTextMarkModel(editorActor, types2, keyGenerator) {
|
|
|
3417
3428
|
if (atTheBeginningOfSpan) {
|
|
3418
3429
|
previousSpanHasSameMarks ? slate.Transforms.insertNodes(editor, {
|
|
3419
3430
|
_type: "span",
|
|
3420
|
-
_key: keyGenerator(),
|
|
3431
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3421
3432
|
text: op.text,
|
|
3422
3433
|
marks: previousSpan?.marks ?? []
|
|
3423
3434
|
}) : previousSpanHasSameAnnotation ? apply2(op) : slate.Transforms.insertNodes(editor, {
|
|
3424
3435
|
_type: "span",
|
|
3425
|
-
_key: keyGenerator(),
|
|
3436
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3426
3437
|
text: op.text,
|
|
3427
3438
|
marks: []
|
|
3428
3439
|
});
|
|
@@ -3431,12 +3442,12 @@ function createWithPortableTextMarkModel(editorActor, types2, keyGenerator) {
|
|
|
3431
3442
|
if (atTheEndOfSpan) {
|
|
3432
3443
|
nextSpanHasSameMarks ? slate.Transforms.insertNodes(editor, {
|
|
3433
3444
|
_type: "span",
|
|
3434
|
-
_key: keyGenerator(),
|
|
3445
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3435
3446
|
text: op.text,
|
|
3436
3447
|
marks: nextSpan?.marks ?? []
|
|
3437
3448
|
}) : nextSpanHasSameAnnotation ? apply2(op) : slate.Transforms.insertNodes(editor, {
|
|
3438
3449
|
_type: "span",
|
|
3439
|
-
_key: keyGenerator(),
|
|
3450
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3440
3451
|
text: op.text,
|
|
3441
3452
|
marks: []
|
|
3442
3453
|
});
|
|
@@ -3669,8 +3680,7 @@ function createWithPortableTextSelections(editorActor, types2) {
|
|
|
3669
3680
|
const debug$a = debugWithName("plugin:withSchemaTypes");
|
|
3670
3681
|
function createWithSchemaTypes({
|
|
3671
3682
|
editorActor,
|
|
3672
|
-
schemaTypes
|
|
3673
|
-
keyGenerator
|
|
3683
|
+
schemaTypes
|
|
3674
3684
|
}) {
|
|
3675
3685
|
return function(editor) {
|
|
3676
3686
|
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 +3689,7 @@ function createWithSchemaTypes({
|
|
|
3679
3689
|
const [node, path] = entry;
|
|
3680
3690
|
if (node._type === void 0 && path.length === 2) {
|
|
3681
3691
|
debug$a("Setting span type on text node without a type");
|
|
3682
|
-
const span = node, key = span._key || keyGenerator();
|
|
3692
|
+
const span = node, key = span._key || editorActor.getSnapshot().context.keyGenerator();
|
|
3683
3693
|
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(
|
|
3684
3694
|
editor,
|
|
3685
3695
|
{ ...span, _type: schemaTypes.span.name, _key: key },
|
|
@@ -3689,7 +3699,7 @@ function createWithSchemaTypes({
|
|
|
3689
3699
|
}
|
|
3690
3700
|
if (node._key === void 0 && (path.length === 1 || path.length === 2)) {
|
|
3691
3701
|
debug$a("Setting missing key on child node without a key");
|
|
3692
|
-
const key = keyGenerator();
|
|
3702
|
+
const key = editorActor.getSnapshot().context.keyGenerator();
|
|
3693
3703
|
editorActor.send({ type: "normalizing" }), slate.Transforms.setNodes(editor, { _key: key }, { at: path }), editorActor.send({ type: "done normalizing" });
|
|
3694
3704
|
return;
|
|
3695
3705
|
}
|
|
@@ -3699,8 +3709,8 @@ function createWithSchemaTypes({
|
|
|
3699
3709
|
}
|
|
3700
3710
|
const debug$9 = debugWithName("plugin:withUtils");
|
|
3701
3711
|
function createWithUtils({
|
|
3712
|
+
editorActor,
|
|
3702
3713
|
schemaTypes,
|
|
3703
|
-
keyGenerator,
|
|
3704
3714
|
portableTextEditor
|
|
3705
3715
|
}) {
|
|
3706
3716
|
return function(editor) {
|
|
@@ -3726,13 +3736,13 @@ function createWithUtils({
|
|
|
3726
3736
|
[
|
|
3727
3737
|
{
|
|
3728
3738
|
_type: schemaTypes.block.name,
|
|
3729
|
-
_key: keyGenerator(),
|
|
3739
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3730
3740
|
style: schemaTypes.styles[0].value || "normal",
|
|
3731
3741
|
markDefs: [],
|
|
3732
3742
|
children: [
|
|
3733
3743
|
{
|
|
3734
3744
|
_type: "span",
|
|
3735
|
-
_key: keyGenerator(),
|
|
3745
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3736
3746
|
text: "",
|
|
3737
3747
|
marks: options.decorators.filter(
|
|
3738
3748
|
(decorator) => schemaTypes.decorators.find(({ value }) => value === decorator)
|
|
@@ -3800,7 +3810,7 @@ function createWithHotkeys(types$1, portableTextEditor, hotkeysFromOptions) {
|
|
|
3800
3810
|
{
|
|
3801
3811
|
at: nextPath
|
|
3802
3812
|
}
|
|
3803
|
-
), editor.onChange();
|
|
3813
|
+
), slate.Transforms.select(editor, { path: [...nextPath, 0], offset: 0 }), editor.onChange();
|
|
3804
3814
|
return;
|
|
3805
3815
|
}
|
|
3806
3816
|
}
|
|
@@ -4143,7 +4153,7 @@ function validateValue(value, types$1, keyGenerator) {
|
|
|
4143
4153
|
}) && (valid = !1), { valid, resolution, value });
|
|
4144
4154
|
}
|
|
4145
4155
|
const debug$7 = debugWithName("plugin:withInsertData");
|
|
4146
|
-
function createWithInsertData(editorActor, schemaTypes
|
|
4156
|
+
function createWithInsertData(editorActor, schemaTypes) {
|
|
4147
4157
|
return function(editor) {
|
|
4148
4158
|
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
4159
|
|
|
@@ -4191,10 +4201,14 @@ function createWithInsertData(editorActor, schemaTypes, keyGenerator) {
|
|
|
4191
4201
|
const slateValue = _regenerateKeys(
|
|
4192
4202
|
editor,
|
|
4193
4203
|
toSlateValue(parsed, { schemaTypes }),
|
|
4194
|
-
keyGenerator,
|
|
4204
|
+
editorActor.getSnapshot().context.keyGenerator,
|
|
4195
4205
|
spanTypeName,
|
|
4196
4206
|
schemaTypes
|
|
4197
|
-
), validation = validateValue(
|
|
4207
|
+
), validation = validateValue(
|
|
4208
|
+
parsed,
|
|
4209
|
+
schemaTypes,
|
|
4210
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4211
|
+
);
|
|
4198
4212
|
if (!validation.valid && !validation.resolution?.autoResolve) {
|
|
4199
4213
|
const errorDescription = `${validation.resolution?.description}`;
|
|
4200
4214
|
return editorActor.send({
|
|
@@ -4235,7 +4249,7 @@ function createWithInsertData(editorActor, schemaTypes, keyGenerator) {
|
|
|
4235
4249
|
const validation = validateValue(
|
|
4236
4250
|
portableText,
|
|
4237
4251
|
schemaTypes,
|
|
4238
|
-
keyGenerator
|
|
4252
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4239
4253
|
);
|
|
4240
4254
|
if (!validation.valid) {
|
|
4241
4255
|
const errorDescription = `Could not validate the resulting portable text to insert.
|
|
@@ -4339,27 +4353,21 @@ function _insertFragment(editor, fragment, schemaTypes) {
|
|
|
4339
4353
|
}), editor.onChange();
|
|
4340
4354
|
}
|
|
4341
4355
|
const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, options) => {
|
|
4342
|
-
const e = editor, {
|
|
4356
|
+
const e = editor, { portableTextEditor, patches$, readOnly, maxBlocks } = options, { editorActor, schemaTypes } = portableTextEditor;
|
|
4343
4357
|
e.subscriptions = [], e.destroy ? e.destroy() : originalFnMap.set(e, {
|
|
4344
4358
|
apply: e.apply,
|
|
4345
4359
|
onChange: e.onChange,
|
|
4346
4360
|
normalizeNode: e.normalizeNode
|
|
4347
4361
|
});
|
|
4348
|
-
const operationToPatches = createOperationToPatches(schemaTypes), withObjectKeys = createWithObjectKeys(
|
|
4349
|
-
editorActor,
|
|
4350
|
-
schemaTypes,
|
|
4351
|
-
keyGenerator
|
|
4352
|
-
), withSchemaTypes = createWithSchemaTypes({
|
|
4362
|
+
const operationToPatches = createOperationToPatches(schemaTypes), withObjectKeys = createWithObjectKeys(editorActor, schemaTypes), withSchemaTypes = createWithSchemaTypes({
|
|
4353
4363
|
editorActor,
|
|
4354
|
-
schemaTypes
|
|
4355
|
-
keyGenerator
|
|
4364
|
+
schemaTypes
|
|
4356
4365
|
}), withEditableAPI = createWithEditableAPI(
|
|
4366
|
+
editorActor,
|
|
4357
4367
|
portableTextEditor,
|
|
4358
|
-
schemaTypes
|
|
4359
|
-
keyGenerator
|
|
4368
|
+
schemaTypes
|
|
4360
4369
|
), withPatches = createWithPatches({
|
|
4361
4370
|
editorActor,
|
|
4362
|
-
keyGenerator,
|
|
4363
4371
|
patches$,
|
|
4364
4372
|
patchFunctions: operationToPatches,
|
|
4365
4373
|
readOnly,
|
|
@@ -4370,13 +4378,12 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4370
4378
|
blockSchemaType: schemaTypes.block
|
|
4371
4379
|
}), withPortableTextMarkModel = createWithPortableTextMarkModel(
|
|
4372
4380
|
editorActor,
|
|
4373
|
-
schemaTypes
|
|
4374
|
-
keyGenerator
|
|
4381
|
+
schemaTypes
|
|
4375
4382
|
), withPortableTextBlockStyle = createWithPortableTextBlockStyle(
|
|
4376
4383
|
editorActor,
|
|
4377
4384
|
schemaTypes
|
|
4378
|
-
), withPlaceholderBlock = createWithPlaceholderBlock(), withInsertBreak = createWithInsertBreak(
|
|
4379
|
-
|
|
4385
|
+
), withPlaceholderBlock = createWithPlaceholderBlock(), withInsertBreak = createWithInsertBreak(editorActor, schemaTypes), withUtils = createWithUtils({
|
|
4386
|
+
editorActor,
|
|
4380
4387
|
schemaTypes,
|
|
4381
4388
|
portableTextEditor
|
|
4382
4389
|
}), withPortableTextSelections = createWithPortableTextSelections(
|
|
@@ -4444,10 +4451,9 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4444
4451
|
};
|
|
4445
4452
|
}, debug$6 = debugWithName("component:PortableTextEditor:SlateContainer");
|
|
4446
4453
|
function SlateContainer(props) {
|
|
4447
|
-
const { patches$, portableTextEditor, readOnly, maxBlocks
|
|
4454
|
+
const { patches$, portableTextEditor, readOnly, maxBlocks } = props, [[slateEditor, subscribe]] = react.useState(() => {
|
|
4448
4455
|
debug$6("Creating new Slate editor instance");
|
|
4449
4456
|
const { editor, subscribe: _sub } = withPlugins(slateReact.withReact(slate.createEditor()), {
|
|
4450
|
-
keyGenerator,
|
|
4451
4457
|
maxBlocks,
|
|
4452
4458
|
patches$,
|
|
4453
4459
|
portableTextEditor,
|
|
@@ -4462,33 +4468,18 @@ function SlateContainer(props) {
|
|
|
4462
4468
|
};
|
|
4463
4469
|
}, [subscribe]), react.useEffect(() => {
|
|
4464
4470
|
debug$6("Re-initializing plugin chain"), withPlugins(slateEditor, {
|
|
4465
|
-
keyGenerator,
|
|
4466
4471
|
maxBlocks,
|
|
4467
4472
|
patches$,
|
|
4468
4473
|
portableTextEditor,
|
|
4469
4474
|
readOnly
|
|
4470
4475
|
});
|
|
4471
|
-
}, [
|
|
4472
|
-
keyGenerator,
|
|
4473
|
-
portableTextEditor,
|
|
4474
|
-
maxBlocks,
|
|
4475
|
-
readOnly,
|
|
4476
|
-
patches$,
|
|
4477
|
-
slateEditor
|
|
4478
|
-
]);
|
|
4476
|
+
}, [portableTextEditor, maxBlocks, readOnly, patches$, slateEditor]);
|
|
4479
4477
|
const initialValue = react.useMemo(() => [slateEditor.pteCreateTextBlock({ decorators: [] })], [slateEditor]);
|
|
4480
4478
|
return react.useEffect(() => () => {
|
|
4481
4479
|
debug$6("Destroying Slate editor"), slateEditor.destroy();
|
|
4482
4480
|
}, [slateEditor]), /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, { editor: slateEditor, initialValue, children: props.children });
|
|
4483
4481
|
}
|
|
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 = () => {
|
|
4482
|
+
const PortableTextEditorReadOnlyContext = react.createContext(!1), usePortableTextEditorReadOnlyStatus = () => {
|
|
4492
4483
|
const readOnly = react.useContext(PortableTextEditorReadOnlyContext);
|
|
4493
4484
|
if (readOnly === void 0)
|
|
4494
4485
|
throw new Error(
|
|
@@ -4497,7 +4488,7 @@ const defaultKeyGenerator = () => content.randomKey(12), PortableTextEditorKeyGe
|
|
|
4497
4488
|
return readOnly;
|
|
4498
4489
|
}, debug$5 = debugWithName("hook:useSyncValue"), CURRENT_VALUE = /* @__PURE__ */ new WeakMap();
|
|
4499
4490
|
function useSyncValue(props) {
|
|
4500
|
-
const { editorActor, portableTextEditor, readOnly
|
|
4491
|
+
const { editorActor, portableTextEditor, readOnly } = props, { schemaTypes } = portableTextEditor, previousValue = react.useRef(), slateEditor = slateReact.useSlate(), updateValueFunctionRef = react.useRef(), updateFromCurrentValue = react.useCallback(() => {
|
|
4501
4492
|
const currentValue = CURRENT_VALUE.get(portableTextEditor);
|
|
4502
4493
|
if (previousValue.current === currentValue) {
|
|
4503
4494
|
debug$5("Value is the same object as previous, not need to sync");
|
|
@@ -4563,7 +4554,7 @@ function useSyncValue(props) {
|
|
|
4563
4554
|
const validationValue = [value[currentBlockIndex]], validation = validateValue(
|
|
4564
4555
|
validationValue,
|
|
4565
4556
|
schemaTypes,
|
|
4566
|
-
keyGenerator
|
|
4557
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4567
4558
|
);
|
|
4568
4559
|
!validation.valid && validation.resolution?.autoResolve && validation.resolution?.patches.length > 0 && !readOnly && previousValue.current && previousValue.current !== value && (console.warn(
|
|
4569
4560
|
`${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`
|
|
@@ -4588,7 +4579,7 @@ function useSyncValue(props) {
|
|
|
4588
4579
|
const validationValue = [value[currentBlockIndex]], validation = validateValue(
|
|
4589
4580
|
validationValue,
|
|
4590
4581
|
schemaTypes,
|
|
4591
|
-
keyGenerator
|
|
4582
|
+
editorActor.getSnapshot().context.keyGenerator
|
|
4592
4583
|
);
|
|
4593
4584
|
debug$5.enabled && debug$5(
|
|
4594
4585
|
"Validating and inserting new block in the end of the value",
|
|
@@ -4635,7 +4626,6 @@ function useSyncValue(props) {
|
|
|
4635
4626
|
return updateValueFunctionRef.current = updateFunction, updateFunction;
|
|
4636
4627
|
}, [
|
|
4637
4628
|
editorActor,
|
|
4638
|
-
keyGenerator,
|
|
4639
4629
|
portableTextEditor,
|
|
4640
4630
|
readOnly,
|
|
4641
4631
|
schemaTypes,
|
|
@@ -4703,9 +4693,8 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
|
|
|
4703
4693
|
}
|
|
4704
4694
|
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
4695
|
function Synchronizer(props) {
|
|
4706
|
-
const portableTextEditor = usePortableTextEditor(),
|
|
4696
|
+
const portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), { editorActor, getValue, onChange, value } = props, pendingPatches = react.useRef([]), syncValue = useSyncValue({
|
|
4707
4697
|
editorActor,
|
|
4708
|
-
keyGenerator,
|
|
4709
4698
|
portableTextEditor,
|
|
4710
4699
|
readOnly
|
|
4711
4700
|
}), slateEditor = slateReact.useSlate();
|
|
@@ -4819,7 +4808,8 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
|
4819
4808
|
types: {
|
|
4820
4809
|
context: {},
|
|
4821
4810
|
events: {},
|
|
4822
|
-
emitted: {}
|
|
4811
|
+
emitted: {},
|
|
4812
|
+
input: {}
|
|
4823
4813
|
},
|
|
4824
4814
|
actions: {
|
|
4825
4815
|
"emit patch event": xstate.emit(({ event }) => (xstate.assertEvent(event, "patch"), event)),
|
|
@@ -4840,9 +4830,10 @@ const networkLogic = xstate.fromCallback(({ sendBack }) => {
|
|
|
4840
4830
|
}
|
|
4841
4831
|
}).createMachine({
|
|
4842
4832
|
id: "editor",
|
|
4843
|
-
context: {
|
|
4833
|
+
context: ({ input }) => ({
|
|
4834
|
+
keyGenerator: input.keyGenerator,
|
|
4844
4835
|
pendingEvents: []
|
|
4845
|
-
},
|
|
4836
|
+
}),
|
|
4846
4837
|
invoke: {
|
|
4847
4838
|
id: "networkLogic",
|
|
4848
4839
|
src: "networkLogic"
|
|
@@ -4930,7 +4921,7 @@ function PortableTextEditorSelectionProvider(props) {
|
|
|
4930
4921
|
};
|
|
4931
4922
|
}, [props.editorActor]), /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorSelectionContext.Provider, { value: selection, children: props.children });
|
|
4932
4923
|
}
|
|
4933
|
-
const debug$2 = debugWithName("component:PortableTextEditor");
|
|
4924
|
+
const defaultKeyGenerator = () => content.randomKey(12), debug$2 = debugWithName("component:PortableTextEditor");
|
|
4934
4925
|
class PortableTextEditor extends react.Component {
|
|
4935
4926
|
/**
|
|
4936
4927
|
* @internal
|
|
@@ -4954,7 +4945,11 @@ class PortableTextEditor extends react.Component {
|
|
|
4954
4945
|
throw new Error('PortableTextEditor: missing "schemaType" property');
|
|
4955
4946
|
props.incomingPatches$ && console.warn(
|
|
4956
4947
|
"The prop 'incomingPatches$' is deprecated and renamed to 'patches$'"
|
|
4957
|
-
), this.editorActor = xstate.createActor(editorMachine
|
|
4948
|
+
), this.editorActor = xstate.createActor(editorMachine, {
|
|
4949
|
+
input: {
|
|
4950
|
+
keyGenerator: props.keyGenerator || defaultKeyGenerator
|
|
4951
|
+
}
|
|
4952
|
+
}), this.editorActor.start(), this.schemaTypes = getPortableTextMemberSchemaTypes(
|
|
4958
4953
|
props.schemaType.hasOwnProperty("jsonType") ? props.schemaType : compileType(props.schemaType)
|
|
4959
4954
|
);
|
|
4960
4955
|
}
|
|
@@ -4971,35 +4966,28 @@ class PortableTextEditor extends react.Component {
|
|
|
4971
4966
|
return this.editable.getValue();
|
|
4972
4967
|
};
|
|
4973
4968
|
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
|
|
4969
|
+
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
4970
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4976
4971
|
SlateContainer,
|
|
4977
4972
|
{
|
|
4978
|
-
keyGenerator,
|
|
4979
4973
|
maxBlocks,
|
|
4980
4974
|
patches$: _patches$,
|
|
4981
4975
|
portableTextEditor: this,
|
|
4982
4976
|
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
|
-
) }) }) })
|
|
4977
|
+
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: [
|
|
4978
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4979
|
+
Synchronizer,
|
|
4980
|
+
{
|
|
4981
|
+
editorActor: this.editorActor,
|
|
4982
|
+
getValue: this.getValue,
|
|
4983
|
+
onChange: (change) => {
|
|
4984
|
+
this.props.onChange(change), this.change$.next(change);
|
|
4985
|
+
},
|
|
4986
|
+
value
|
|
4987
|
+
}
|
|
4988
|
+
),
|
|
4989
|
+
children
|
|
4990
|
+
] }) }) })
|
|
5003
4991
|
}
|
|
5004
4992
|
);
|
|
5005
4993
|
}
|
|
@@ -5265,7 +5253,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5265
5253
|
scrollSelectionIntoView,
|
|
5266
5254
|
spellCheck,
|
|
5267
5255
|
...restProps
|
|
5268
|
-
} = props, portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(),
|
|
5256
|
+
} = props, portableTextEditor = usePortableTextEditor(), readOnly = usePortableTextEditorReadOnlyStatus(), ref = react.useRef(null), [editableElement, setEditableElement] = react.useState(
|
|
5269
5257
|
null
|
|
5270
5258
|
), [hasInvalidValue, setHasInvalidValue] = react.useState(!1), [rangeDecorationState, setRangeDecorationsState] = react.useState([]);
|
|
5271
5259
|
react.useImperativeHandle(
|
|
@@ -5273,8 +5261,8 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5273
5261
|
() => ref.current
|
|
5274
5262
|
);
|
|
5275
5263
|
const rangeDecorationsRef = react.useRef(rangeDecorations), { editorActor, schemaTypes } = portableTextEditor, slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name, withInsertData = react.useMemo(
|
|
5276
|
-
() => createWithInsertData(editorActor, schemaTypes
|
|
5277
|
-
[editorActor,
|
|
5264
|
+
() => createWithInsertData(editorActor, schemaTypes),
|
|
5265
|
+
[editorActor, schemaTypes]
|
|
5278
5266
|
), withHotKeys = react.useMemo(
|
|
5279
5267
|
() => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
|
|
5280
5268
|
[hotkeys, portableTextEditor, schemaTypes]
|