@portabletext/editor 1.1.9 → 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 +113 -54
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +113 -54
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +113 -54
- package/lib/index.mjs.map +1 -1
- package/package.json +4 -4
- 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/createWithUtils.ts +7 -1
- package/src/editor/plugins/index.ts +16 -12
- package/src/types/editor.ts +5 -1
package/lib/index.esm.js
CHANGED
|
@@ -11,12 +11,12 @@ import uniq from "lodash/uniq.js";
|
|
|
11
11
|
import { Subject } from "rxjs";
|
|
12
12
|
import { fromCallback, setup, assign, assertEvent, emit, enqueueActions, createActor } from "xstate";
|
|
13
13
|
import { Schema } from "@sanity/schema";
|
|
14
|
-
import { isHotkey } from "is-hotkey-esm";
|
|
15
14
|
import { diffMatchPatch as diffMatchPatch$1, set, insert, setIfMissing, unset, applyAll } from "@portabletext/patches";
|
|
16
15
|
import get from "lodash/get.js";
|
|
17
16
|
import isUndefined from "lodash/isUndefined.js";
|
|
18
17
|
import omitBy from "lodash/omitBy.js";
|
|
19
18
|
import flatten from "lodash/flatten.js";
|
|
19
|
+
import { isHotkey } from "is-hotkey-esm";
|
|
20
20
|
import { htmlToBlocks, normalizeBlock } from "@sanity/block-tools";
|
|
21
21
|
import isPlainObject from "lodash/isPlainObject.js";
|
|
22
22
|
import throttle from "lodash/throttle.js";
|
|
@@ -816,20 +816,15 @@ function getFocusBlockObject(context) {
|
|
|
816
816
|
const focusBlock = getFocusBlock(context);
|
|
817
817
|
return focusBlock && !isPortableTextTextBlock(focusBlock.node) ? { node: focusBlock.node, path: focusBlock.path } : void 0;
|
|
818
818
|
}
|
|
819
|
-
const
|
|
820
|
-
on: "
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
guard: ({ context, event }) => isHotkey("enter", event.nativeEvent) ? !!getFocusBlockObject(context) : !1,
|
|
829
|
-
actions: [
|
|
830
|
-
({ event }) => (event.nativeEvent.preventDefault(), { type: "insert text block", decorators: [] })
|
|
831
|
-
]
|
|
832
|
-
}, coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock], debug$k = debugWithName("operationToPatches");
|
|
819
|
+
const softReturn = {
|
|
820
|
+
on: "insert soft break",
|
|
821
|
+
actions: [() => ({ type: "insert text", text: `
|
|
822
|
+
` })]
|
|
823
|
+
}, breakingVoidBlock = {
|
|
824
|
+
on: "insert break",
|
|
825
|
+
guard: ({ context }) => !!getFocusBlockObject(context),
|
|
826
|
+
actions: [() => ({ type: "insert text block", decorators: [] })]
|
|
827
|
+
}, coreBehaviors = [softReturn, breakingVoidBlock], debug$k = debugWithName("operationToPatches");
|
|
833
828
|
function createOperationToPatches(types) {
|
|
834
829
|
const textBlockName = types.block.name;
|
|
835
830
|
function insertTextPatch(editor, operation, beforeValue) {
|
|
@@ -1104,6 +1099,50 @@ function createOperationToPatches(types) {
|
|
|
1104
1099
|
splitNodePatch
|
|
1105
1100
|
};
|
|
1106
1101
|
}
|
|
1102
|
+
function createWithEventListeners(editorActor) {
|
|
1103
|
+
return function(editor) {
|
|
1104
|
+
const { deleteBackward, insertBreak, insertSoftBreak, insertText } = editor;
|
|
1105
|
+
return editor.deleteBackward = (unit) => {
|
|
1106
|
+
editorActor.send({
|
|
1107
|
+
type: "behavior event",
|
|
1108
|
+
behaviorEvent: {
|
|
1109
|
+
type: "delete backward",
|
|
1110
|
+
unit,
|
|
1111
|
+
default: () => deleteBackward(unit)
|
|
1112
|
+
},
|
|
1113
|
+
editor
|
|
1114
|
+
});
|
|
1115
|
+
}, editor.insertBreak = () => {
|
|
1116
|
+
editorActor.send({
|
|
1117
|
+
type: "behavior event",
|
|
1118
|
+
behaviorEvent: {
|
|
1119
|
+
type: "insert break",
|
|
1120
|
+
default: insertBreak
|
|
1121
|
+
},
|
|
1122
|
+
editor
|
|
1123
|
+
});
|
|
1124
|
+
}, editor.insertSoftBreak = () => {
|
|
1125
|
+
editorActor.send({
|
|
1126
|
+
type: "behavior event",
|
|
1127
|
+
behaviorEvent: {
|
|
1128
|
+
type: "insert soft break",
|
|
1129
|
+
default: insertSoftBreak
|
|
1130
|
+
},
|
|
1131
|
+
editor
|
|
1132
|
+
});
|
|
1133
|
+
}, editor.insertText = (text, options) => {
|
|
1134
|
+
editorActor.send({
|
|
1135
|
+
type: "behavior event",
|
|
1136
|
+
behaviorEvent: {
|
|
1137
|
+
type: "insert text",
|
|
1138
|
+
text,
|
|
1139
|
+
default: () => insertText(text, options)
|
|
1140
|
+
},
|
|
1141
|
+
editor
|
|
1142
|
+
});
|
|
1143
|
+
}, editor;
|
|
1144
|
+
};
|
|
1145
|
+
}
|
|
1107
1146
|
const debug$j = debugWithName("API:editable");
|
|
1108
1147
|
function createWithEditableAPI(editorActor, portableTextEditor, types) {
|
|
1109
1148
|
return function(editor) {
|
|
@@ -1619,7 +1658,9 @@ function createWithInsertBreak(editorActor, types) {
|
|
|
1619
1658
|
Editor.insertNode(
|
|
1620
1659
|
editor,
|
|
1621
1660
|
editor.pteCreateTextBlock({
|
|
1622
|
-
decorators: focusAnnotations.length === 0 ? focusDecorators : []
|
|
1661
|
+
decorators: focusAnnotations.length === 0 ? focusDecorators : [],
|
|
1662
|
+
listItem: focusBlock.listItem,
|
|
1663
|
+
level: focusBlock.level
|
|
1623
1664
|
})
|
|
1624
1665
|
);
|
|
1625
1666
|
const [nextBlockPath] = Path.next(focusBlockPath);
|
|
@@ -1637,7 +1678,9 @@ function createWithInsertBreak(editorActor, types) {
|
|
|
1637
1678
|
Editor.insertNode(
|
|
1638
1679
|
editor,
|
|
1639
1680
|
editor.pteCreateTextBlock({
|
|
1640
|
-
decorators: []
|
|
1681
|
+
decorators: [],
|
|
1682
|
+
listItem: focusBlock.listItem,
|
|
1683
|
+
level: focusBlock.level
|
|
1641
1684
|
})
|
|
1642
1685
|
);
|
|
1643
1686
|
const [nextBlockPath] = Path.next(focusBlockPath);
|
|
@@ -3795,6 +3838,8 @@ function createWithUtils({
|
|
|
3795
3838
|
_type: schemaTypes.block.name,
|
|
3796
3839
|
_key: editorActor.getSnapshot().context.keyGenerator(),
|
|
3797
3840
|
style: schemaTypes.styles[0].value || "normal",
|
|
3841
|
+
...options.listItem ? { listItem: options.listItem } : {},
|
|
3842
|
+
...options.level ? { level: options.level } : {},
|
|
3798
3843
|
markDefs: [],
|
|
3799
3844
|
children: [
|
|
3800
3845
|
{
|
|
@@ -4421,7 +4466,7 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4421
4466
|
}), withPortableTextSelections = createWithPortableTextSelections(
|
|
4422
4467
|
editorActor,
|
|
4423
4468
|
schemaTypes
|
|
4424
|
-
);
|
|
4469
|
+
), withEventListeners = createWithEventListeners(editorActor);
|
|
4425
4470
|
return e.destroy = () => {
|
|
4426
4471
|
const originalFunctions = originalFnMap.get(e);
|
|
4427
4472
|
if (!originalFunctions)
|
|
@@ -4447,18 +4492,20 @@ const originalFnMap = /* @__PURE__ */ new WeakMap(), withPlugins = (editor, opti
|
|
|
4447
4492
|
),
|
|
4448
4493
|
subscribe: () => noop
|
|
4449
4494
|
} : {
|
|
4450
|
-
editor:
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
|
|
4495
|
+
editor: withEventListeners(
|
|
4496
|
+
withSchemaTypes(
|
|
4497
|
+
withObjectKeys(
|
|
4498
|
+
withPortableTextMarkModel(
|
|
4499
|
+
withPortableTextBlockStyle(
|
|
4500
|
+
withPortableTextLists(
|
|
4501
|
+
withPlaceholderBlock(
|
|
4502
|
+
withUtils(
|
|
4503
|
+
withMaxBlocks(
|
|
4504
|
+
withUndoRedo(
|
|
4505
|
+
withPatches(
|
|
4506
|
+
withPortableTextSelections(
|
|
4507
|
+
withEditableAPI(withInsertBreak(e))
|
|
4508
|
+
)
|
|
4462
4509
|
)
|
|
4463
4510
|
)
|
|
4464
4511
|
)
|
|
@@ -4839,11 +4886,20 @@ const EditorActorContext = createContext({}), behaviorActionImplementations = {
|
|
|
4839
4886
|
Transforms.setNodes(event.editor, { style: event.style }, { at });
|
|
4840
4887
|
}
|
|
4841
4888
|
},
|
|
4889
|
+
"delete backward": ({ event }) => {
|
|
4890
|
+
Editor.deleteBackward(event.editor, { unit: event.unit });
|
|
4891
|
+
},
|
|
4842
4892
|
"delete text": ({ event }) => {
|
|
4843
4893
|
Transforms.delete(event.editor, {
|
|
4844
4894
|
at: toSlateRange(event.selection, event.editor)
|
|
4845
4895
|
});
|
|
4846
4896
|
},
|
|
4897
|
+
"insert break": ({ event }) => {
|
|
4898
|
+
Editor.insertBreak(event.editor);
|
|
4899
|
+
},
|
|
4900
|
+
"insert soft break": ({ event }) => {
|
|
4901
|
+
Editor.insertSoftBreak(event.editor);
|
|
4902
|
+
},
|
|
4847
4903
|
"insert text": ({ event }) => {
|
|
4848
4904
|
Editor.insertText(event.editor, event.text);
|
|
4849
4905
|
},
|
|
@@ -4895,12 +4951,14 @@ const EditorActorContext = createContext({}), behaviorActionImplementations = {
|
|
|
4895
4951
|
pendingEvents: []
|
|
4896
4952
|
}),
|
|
4897
4953
|
"handle behavior event": enqueueActions(({ context, event, enqueue }) => {
|
|
4898
|
-
assertEvent(event, ["
|
|
4954
|
+
assertEvent(event, ["behavior event"]);
|
|
4899
4955
|
const eventBehaviors = context.behaviors.filter(
|
|
4900
|
-
(behavior) => behavior.on === event.type
|
|
4956
|
+
(behavior) => behavior.on === event.behaviorEvent.type
|
|
4901
4957
|
);
|
|
4902
|
-
if (eventBehaviors.length === 0)
|
|
4958
|
+
if (eventBehaviors.length === 0) {
|
|
4959
|
+
event.behaviorEvent.default();
|
|
4903
4960
|
return;
|
|
4961
|
+
}
|
|
4904
4962
|
const value = fromSlateValue(
|
|
4905
4963
|
event.editor.children,
|
|
4906
4964
|
context.schema.block.name,
|
|
@@ -4913,7 +4971,7 @@ const EditorActorContext = createContext({}), behaviorActionImplementations = {
|
|
|
4913
4971
|
if (!selection) {
|
|
4914
4972
|
console.warn(
|
|
4915
4973
|
`Unable to handle event ${event.type} due to missing selection`
|
|
4916
|
-
);
|
|
4974
|
+
), event.behaviorEvent.default();
|
|
4917
4975
|
return;
|
|
4918
4976
|
}
|
|
4919
4977
|
const behaviorContext = {
|
|
@@ -4921,22 +4979,27 @@ const EditorActorContext = createContext({}), behaviorActionImplementations = {
|
|
|
4921
4979
|
value,
|
|
4922
4980
|
selection
|
|
4923
4981
|
};
|
|
4982
|
+
let behaviorOverwritten = !1;
|
|
4924
4983
|
for (const eventBehavior of eventBehaviors) {
|
|
4925
4984
|
const shouldRun = eventBehavior.guard?.({
|
|
4926
4985
|
context: behaviorContext,
|
|
4927
|
-
event
|
|
4986
|
+
event: event.behaviorEvent
|
|
4928
4987
|
}) ?? !0;
|
|
4929
4988
|
if (!shouldRun)
|
|
4930
4989
|
continue;
|
|
4931
4990
|
const actions = eventBehavior.actions.map(
|
|
4932
|
-
(action) => action(
|
|
4991
|
+
(action) => action(
|
|
4992
|
+
{ context: behaviorContext, event: event.behaviorEvent },
|
|
4993
|
+
shouldRun
|
|
4994
|
+
)
|
|
4933
4995
|
);
|
|
4934
4996
|
for (const action of actions)
|
|
4935
|
-
typeof action == "object" && enqueue.raise({
|
|
4997
|
+
typeof action == "object" && (behaviorOverwritten = !0, enqueue.raise({
|
|
4936
4998
|
...action,
|
|
4937
4999
|
editor: event.editor
|
|
4938
|
-
});
|
|
5000
|
+
}));
|
|
4939
5001
|
}
|
|
5002
|
+
behaviorOverwritten || event.behaviorEvent.default();
|
|
4940
5003
|
})
|
|
4941
5004
|
},
|
|
4942
5005
|
actors: {
|
|
@@ -4968,18 +5031,22 @@ const EditorActorContext = createContext({}), behaviorActionImplementations = {
|
|
|
4968
5031
|
loading: { actions: emit({ type: "loading" }) },
|
|
4969
5032
|
"done loading": { actions: emit({ type: "done loading" }) },
|
|
4970
5033
|
"update schema": { actions: "assign schema" },
|
|
4971
|
-
"
|
|
4972
|
-
actions: ["handle behavior event"]
|
|
4973
|
-
},
|
|
4974
|
-
"before insert text": {
|
|
4975
|
-
actions: ["handle behavior event"]
|
|
4976
|
-
},
|
|
5034
|
+
"behavior event": { actions: "handle behavior event" },
|
|
4977
5035
|
"apply block style": {
|
|
4978
5036
|
actions: [behaviorActionImplementations["apply block style"]]
|
|
4979
5037
|
},
|
|
5038
|
+
"delete backward": {
|
|
5039
|
+
actions: [behaviorActionImplementations["delete backward"]]
|
|
5040
|
+
},
|
|
4980
5041
|
"delete text": {
|
|
4981
5042
|
actions: [behaviorActionImplementations["delete text"]]
|
|
4982
5043
|
},
|
|
5044
|
+
"insert break": {
|
|
5045
|
+
actions: [behaviorActionImplementations["insert break"]]
|
|
5046
|
+
},
|
|
5047
|
+
"insert soft break": {
|
|
5048
|
+
actions: [behaviorActionImplementations["insert soft break"]]
|
|
5049
|
+
},
|
|
4983
5050
|
"insert text": {
|
|
4984
5051
|
actions: [behaviorActionImplementations["insert text"]]
|
|
4985
5052
|
},
|
|
@@ -5616,11 +5683,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5616
5683
|
[editorActor, onBlur]
|
|
5617
5684
|
), handleOnBeforeInput = useCallback(
|
|
5618
5685
|
(event) => {
|
|
5619
|
-
onBeforeInput && onBeforeInput(event)
|
|
5620
|
-
type: "before insert text",
|
|
5621
|
-
nativeEvent: event,
|
|
5622
|
-
editor: slateEditor
|
|
5623
|
-
});
|
|
5686
|
+
onBeforeInput && onBeforeInput(event);
|
|
5624
5687
|
},
|
|
5625
5688
|
[onBeforeInput]
|
|
5626
5689
|
), validateSelection = useCallback(() => {
|
|
@@ -5659,11 +5722,7 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
|
|
|
5659
5722
|
}, [validateSelection, editableElement]);
|
|
5660
5723
|
const handleKeyDown = useCallback(
|
|
5661
5724
|
(event) => {
|
|
5662
|
-
props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() ||
|
|
5663
|
-
type: "key down",
|
|
5664
|
-
nativeEvent: event.nativeEvent,
|
|
5665
|
-
editor: slateEditor
|
|
5666
|
-
}), slateEditor.pteWithHotKeys(event));
|
|
5725
|
+
props.onKeyDown && props.onKeyDown(event), event.isDefaultPrevented() || slateEditor.pteWithHotKeys(event);
|
|
5667
5726
|
},
|
|
5668
5727
|
[props, slateEditor]
|
|
5669
5728
|
), scrollSelectionIntoViewToSlate = useMemo(() => {
|