@portabletext/editor 1.1.8 → 1.1.10
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 +717 -229
- package/lib/index.d.ts +717 -229
- package/lib/index.esm.js +124 -54
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +124 -54
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +124 -54
- package/lib/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/editor/Editable.tsx +0 -13
- package/src/editor/behavior/behavior.actions.ts +17 -0
- package/src/editor/behavior/behavior.core.ts +8 -26
- package/src/editor/behavior/behavior.types.ts +20 -9
- package/src/editor/editor-machine.ts +33 -11
- package/src/editor/plugins/create-with-event-listeners.ts +60 -0
- package/src/editor/plugins/createWithInsertBreak.ts +4 -0
- package/src/editor/plugins/createWithPortableTextMarkModel.ts +12 -0
- package/src/editor/plugins/createWithUtils.ts +7 -1
- package/src/editor/plugins/index.ts +16 -12
- package/src/types/editor.ts +5 -1
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"),
|
|
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
|
}
|
|
@@ -799,20 +799,15 @@ function getFocusBlockObject(context) {
|
|
|
799
799
|
const focusBlock = getFocusBlock(context);
|
|
800
800
|
return focusBlock && !types.isPortableTextTextBlock(focusBlock.node) ? { node: focusBlock.node, path: focusBlock.path } : void 0;
|
|
801
801
|
}
|
|
802
|
-
const
|
|
803
|
-
on: "
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
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");
|
|
802
|
+
const softReturn = {
|
|
803
|
+
on: "insert soft break",
|
|
804
|
+
actions: [() => ({ type: "insert text", text: `
|
|
805
|
+
` })]
|
|
806
|
+
}, breakingVoidBlock = {
|
|
807
|
+
on: "insert break",
|
|
808
|
+
guard: ({ context }) => !!getFocusBlockObject(context),
|
|
809
|
+
actions: [() => ({ type: "insert text block", decorators: [] })]
|
|
810
|
+
}, coreBehaviors = [softReturn, breakingVoidBlock], debug$k = debugWithName("operationToPatches");
|
|
816
811
|
function createOperationToPatches(types2) {
|
|
817
812
|
const textBlockName = types2.block.name;
|
|
818
813
|
function insertTextPatch(editor, operation, beforeValue) {
|
|
@@ -1087,6 +1082,50 @@ function createOperationToPatches(types2) {
|
|
|
1087
1082
|
splitNodePatch
|
|
1088
1083
|
};
|
|
1089
1084
|
}
|
|
1085
|
+
function createWithEventListeners(editorActor) {
|
|
1086
|
+
return function(editor) {
|
|
1087
|
+
const { deleteBackward, insertBreak, insertSoftBreak, insertText } = editor;
|
|
1088
|
+
return editor.deleteBackward = (unit) => {
|
|
1089
|
+
editorActor.send({
|
|
1090
|
+
type: "behavior event",
|
|
1091
|
+
behaviorEvent: {
|
|
1092
|
+
type: "delete backward",
|
|
1093
|
+
unit,
|
|
1094
|
+
default: () => deleteBackward(unit)
|
|
1095
|
+
},
|
|
1096
|
+
editor
|
|
1097
|
+
});
|
|
1098
|
+
}, editor.insertBreak = () => {
|
|
1099
|
+
editorActor.send({
|
|
1100
|
+
type: "behavior event",
|
|
1101
|
+
behaviorEvent: {
|
|
1102
|
+
type: "insert break",
|
|
1103
|
+
default: insertBreak
|
|
1104
|
+
},
|
|
1105
|
+
editor
|
|
1106
|
+
});
|
|
1107
|
+
}, editor.insertSoftBreak = () => {
|
|
1108
|
+
editorActor.send({
|
|
1109
|
+
type: "behavior event",
|
|
1110
|
+
behaviorEvent: {
|
|
1111
|
+
type: "insert soft break",
|
|
1112
|
+
default: insertSoftBreak
|
|
1113
|
+
},
|
|
1114
|
+
editor
|
|
1115
|
+
});
|
|
1116
|
+
}, editor.insertText = (text, options) => {
|
|
1117
|
+
editorActor.send({
|
|
1118
|
+
type: "behavior event",
|
|
1119
|
+
behaviorEvent: {
|
|
1120
|
+
type: "insert text",
|
|
1121
|
+
text,
|
|
1122
|
+
default: () => insertText(text, options)
|
|
1123
|
+
},
|
|
1124
|
+
editor
|
|
1125
|
+
});
|
|
1126
|
+
}, editor;
|
|
1127
|
+
};
|
|
1128
|
+
}
|
|
1090
1129
|
const debug$j = debugWithName("API:editable");
|
|
1091
1130
|
function createWithEditableAPI(editorActor, portableTextEditor, types$1) {
|
|
1092
1131
|
return function(editor) {
|
|
@@ -1602,7 +1641,9 @@ function createWithInsertBreak(editorActor, types2) {
|
|
|
1602
1641
|
slate.Editor.insertNode(
|
|
1603
1642
|
editor,
|
|
1604
1643
|
editor.pteCreateTextBlock({
|
|
1605
|
-
decorators: focusAnnotations.length === 0 ? focusDecorators : []
|
|
1644
|
+
decorators: focusAnnotations.length === 0 ? focusDecorators : [],
|
|
1645
|
+
listItem: focusBlock.listItem,
|
|
1646
|
+
level: focusBlock.level
|
|
1606
1647
|
})
|
|
1607
1648
|
);
|
|
1608
1649
|
const [nextBlockPath] = slate.Path.next(focusBlockPath);
|
|
@@ -1620,7 +1661,9 @@ function createWithInsertBreak(editorActor, types2) {
|
|
|
1620
1661
|
slate.Editor.insertNode(
|
|
1621
1662
|
editor,
|
|
1622
1663
|
editor.pteCreateTextBlock({
|
|
1623
|
-
decorators: []
|
|
1664
|
+
decorators: [],
|
|
1665
|
+
listItem: focusBlock.listItem,
|
|
1666
|
+
level: focusBlock.level
|
|
1624
1667
|
})
|
|
1625
1668
|
);
|
|
1626
1669
|
const [nextBlockPath] = slate.Path.next(focusBlockPath);
|
|
@@ -3490,6 +3533,17 @@ function createWithPortableTextMarkModel(editorActor, types2) {
|
|
|
3490
3533
|
}
|
|
3491
3534
|
}
|
|
3492
3535
|
}
|
|
3536
|
+
if (atTheBeginningOfSpan && !spanIsEmpty && previousSpan) {
|
|
3537
|
+
slate.Transforms.insertNodes(editor, {
|
|
3538
|
+
_type: "span",
|
|
3539
|
+
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3540
|
+
text: op.text,
|
|
3541
|
+
marks: (previousSpan.marks ?? []).filter(
|
|
3542
|
+
(mark) => decorators.includes(mark)
|
|
3543
|
+
)
|
|
3544
|
+
});
|
|
3545
|
+
return;
|
|
3546
|
+
}
|
|
3493
3547
|
}
|
|
3494
3548
|
}
|
|
3495
3549
|
if (op.type === "remove_text") {
|
|
@@ -3767,6 +3821,8 @@ function createWithUtils({
|
|
|
3767
3821
|
_type: schemaTypes.block.name,
|
|
3768
3822
|
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3769
3823
|
style: schemaTypes.styles[0].value || "normal",
|
|
3824
|
+
...options.listItem ? { listItem: options.listItem } : {},
|
|
3825
|
+
...options.level ? { level: options.level } : {},
|
|
3770
3826
|
markDefs: [],
|
|
3771
3827
|
children: [
|
|
3772
3828
|
{
|
|
@@ -4393,7 +4449,7 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4393
4449
|
}), withPortableTextSelections = createWithPortableTextSelections(
|
|
4394
4450
|
editorActor,
|
|
4395
4451
|
schemaTypes
|
|
4396
|
-
);
|
|
4452
|
+
), withEventListeners = createWithEventListeners(editorActor);
|
|
4397
4453
|
return e.destroy = () => {
|
|
4398
4454
|
const originalFunctions = originalFnMap.get(e);
|
|
4399
4455
|
if (!originalFunctions)
|
|
@@ -4419,18 +4475,20 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4419
4475
|
),
|
|
4420
4476
|
subscribe: () => noop__default.default
|
|
4421
4477
|
} : {
|
|
4422
|
-
editor:
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4478
|
+
editor: withEventListeners(
|
|
4479
|
+
withSchemaTypes(
|
|
4480
|
+
withObjectKeys(
|
|
4481
|
+
withPortableTextMarkModel(
|
|
4482
|
+
withPortableTextBlockStyle(
|
|
4483
|
+
withPortableTextLists(
|
|
4484
|
+
withPlaceholderBlock(
|
|
4485
|
+
withUtils(
|
|
4486
|
+
withMaxBlocks(
|
|
4487
|
+
withUndoRedo(
|
|
4488
|
+
withPatches(
|
|
4489
|
+
withPortableTextSelections(
|
|
4490
|
+
withEditableAPI(withInsertBreak(e))
|
|
4491
|
+
)
|
|
4434
4492
|
)
|
|
4435
4493
|
)
|
|
4436
4494
|
)
|
|
@@ -4811,11 +4869,20 @@ const EditorActorContext = react.createContext({}), behaviorActionImplementation
|
|
|
4811
4869
|
slate.Transforms.setNodes(event.editor, { style: event.style }, { at });
|
|
4812
4870
|
}
|
|
4813
4871
|
},
|
|
4872
|
+
"delete backward": ({ event }) => {
|
|
4873
|
+
slate.Editor.deleteBackward(event.editor, { unit: event.unit });
|
|
4874
|
+
},
|
|
4814
4875
|
"delete text": ({ event }) => {
|
|
4815
4876
|
slate.Transforms.delete(event.editor, {
|
|
4816
4877
|
at: toSlateRange(event.selection, event.editor)
|
|
4817
4878
|
});
|
|
4818
4879
|
},
|
|
4880
|
+
"insert break": ({ event }) => {
|
|
4881
|
+
slate.Editor.insertBreak(event.editor);
|
|
4882
|
+
},
|
|
4883
|
+
"insert soft break": ({ event }) => {
|
|
4884
|
+
slate.Editor.insertSoftBreak(event.editor);
|
|
4885
|
+
},
|
|
4819
4886
|
"insert text": ({ event }) => {
|
|
4820
4887
|
slate.Editor.insertText(event.editor, event.text);
|
|
4821
4888
|
},
|
|
@@ -4867,12 +4934,14 @@ const EditorActorContext = react.createContext({}), behaviorActionImplementation
|
|
|
4867
4934
|
pendingEvents: []
|
|
4868
4935
|
}),
|
|
4869
4936
|
"handle behavior event": xstate.enqueueActions(({ context, event, enqueue }) => {
|
|
4870
|
-
xstate.assertEvent(event, ["
|
|
4937
|
+
xstate.assertEvent(event, ["behavior event"]);
|
|
4871
4938
|
const eventBehaviors = context.behaviors.filter(
|
|
4872
|
-
(behavior) => behavior.on === event.type
|
|
4939
|
+
(behavior) => behavior.on === event.behaviorEvent.type
|
|
4873
4940
|
);
|
|
4874
|
-
if (eventBehaviors.length === 0)
|
|
4941
|
+
if (eventBehaviors.length === 0) {
|
|
4942
|
+
event.behaviorEvent.default();
|
|
4875
4943
|
return;
|
|
4944
|
+
}
|
|
4876
4945
|
const value = fromSlateValue(
|
|
4877
4946
|
event.editor.children,
|
|
4878
4947
|
context.schema.block.name,
|
|
@@ -4885,7 +4954,7 @@ const EditorActorContext = react.createContext({}), behaviorActionImplementation
|
|
|
4885
4954
|
if (!selection) {
|
|
4886
4955
|
console.warn(
|
|
4887
4956
|
`Unable to handle event ${event.type} due to missing selection`
|
|
4888
|
-
);
|
|
4957
|
+
), event.behaviorEvent.default();
|
|
4889
4958
|
return;
|
|
4890
4959
|
}
|
|
4891
4960
|
const behaviorContext = {
|
|
@@ -4893,22 +4962,27 @@ const EditorActorContext = react.createContext({}), behaviorActionImplementation
|
|
|
4893
4962
|
value,
|
|
4894
4963
|
selection
|
|
4895
4964
|
};
|
|
4965
|
+
let behaviorOverwritten = !1;
|
|
4896
4966
|
for (const eventBehavior of eventBehaviors) {
|
|
4897
4967
|
const shouldRun = eventBehavior.guard?.({
|
|
4898
4968
|
context: behaviorContext,
|
|
4899
|
-
event
|
|
4969
|
+
event: event.behaviorEvent
|
|
4900
4970
|
}) ?? !0;
|
|
4901
4971
|
if (!shouldRun)
|
|
4902
4972
|
continue;
|
|
4903
4973
|
const actions = eventBehavior.actions.map(
|
|
4904
|
-
(action) => action(
|
|
4974
|
+
(action) => action(
|
|
4975
|
+
{ context: behaviorContext, event: event.behaviorEvent },
|
|
4976
|
+
shouldRun
|
|
4977
|
+
)
|
|
4905
4978
|
);
|
|
4906
4979
|
for (const action of actions)
|
|
4907
|
-
typeof action == "object" && enqueue.raise({
|
|
4980
|
+
typeof action == "object" && (behaviorOverwritten = !0, enqueue.raise({
|
|
4908
4981
|
...action,
|
|
4909
4982
|
editor: event.editor
|
|
4910
|
-
});
|
|
4983
|
+
}));
|
|
4911
4984
|
}
|
|
4985
|
+
behaviorOverwritten || event.behaviorEvent.default();
|
|
4912
4986
|
})
|
|
4913
4987
|
},
|
|
4914
4988
|
actors: {
|
|
@@ -4940,18 +5014,22 @@ const EditorActorContext = react.createContext({}), behaviorActionImplementation
|
|
|
4940
5014
|
loading: { actions: xstate.emit({ type: "loading" }) },
|
|
4941
5015
|
"done loading": { actions: xstate.emit({ type: "done loading" }) },
|
|
4942
5016
|
"update schema": { actions: "assign schema" },
|
|
4943
|
-
"
|
|
4944
|
-
actions: ["handle behavior event"]
|
|
4945
|
-
},
|
|
4946
|
-
"before insert text": {
|
|
4947
|
-
actions: ["handle behavior event"]
|
|
4948
|
-
},
|
|
5017
|
+
"behavior event": { actions: "handle behavior event" },
|
|
4949
5018
|
"apply block style": {
|
|
4950
5019
|
actions: [behaviorActionImplementations["apply block style"]]
|
|
4951
5020
|
},
|
|
5021
|
+
"delete backward": {
|
|
5022
|
+
actions: [behaviorActionImplementations["delete backward"]]
|
|
5023
|
+
},
|
|
4952
5024
|
"delete text": {
|
|
4953
5025
|
actions: [behaviorActionImplementations["delete text"]]
|
|
4954
5026
|
},
|
|
5027
|
+
"insert break": {
|
|
5028
|
+
actions: [behaviorActionImplementations["insert break"]]
|
|
5029
|
+
},
|
|
5030
|
+
"insert soft break": {
|
|
5031
|
+
actions: [behaviorActionImplementations["insert soft break"]]
|
|
5032
|
+
},
|
|
4955
5033
|
"insert text": {
|
|
4956
5034
|
actions: [behaviorActionImplementations["insert text"]]
|
|
4957
5035
|
},
|
|
@@ -5588,11 +5666,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5588
5666
|
[editorActor, onBlur]
|
|
5589
5667
|
), handleOnBeforeInput = react.useCallback(
|
|
5590
5668
|
(event) => {
|
|
5591
|
-
onBeforeInput && onBeforeInput(event)
|
|
5592
|
-
type: "before insert text",
|
|
5593
|
-
nativeEvent: event,
|
|
5594
|
-
editor: slateEditor
|
|
5595
|
-
});
|
|
5669
|
+
onBeforeInput && onBeforeInput(event);
|
|
5596
5670
|
},
|
|
5597
5671
|
[onBeforeInput]
|
|
5598
5672
|
), validateSelection = react.useCallback(() => {
|
|
@@ -5631,11 +5705,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5631
5705
|
}, [validateSelection, editableElement]);
|
|
5632
5706
|
const handleKeyDown = react.useCallback(
|
|
5633
5707
|
(event) => {
|
|
5634
|
-
props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() ||
|
|
5635
|
-
type: "key down",
|
|
5636
|
-
nativeEvent: event.nativeEvent,
|
|
5637
|
-
editor: slateEditor
|
|
5638
|
-
}), slateEditor.pteWithHotKeys(event));
|
|
5708
|
+
props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() || slateEditor.pteWithHotKeys(event);
|
|
5639
5709
|
},
|
|
5640
5710
|
[props, slateEditor]
|
|
5641
5711
|
), scrollSelectionIntoViewToSlate = react.useMemo(() => {
|