@portabletext/editor 1.10.0 → 1.10.2
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 +21 -6
- package/lib/index.d.mts +163 -653
- package/lib/index.d.ts +163 -653
- package/lib/index.esm.js +48 -91
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +47 -90
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +48 -91
- package/lib/index.mjs.map +1 -1
- package/package.json +4 -4
- package/src/editor/PortableTextEditor.tsx +26 -16
- package/src/editor/components/Synchronizer.tsx +2 -25
- package/src/editor/editor-machine.ts +8 -29
- package/src/editor/use-editor.ts +3 -0
package/lib/index.js
CHANGED
|
@@ -2936,11 +2936,10 @@ function _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex) {
|
|
|
2936
2936
|
}
|
|
2937
2937
|
const debug$i = debugWithName("component:PortableTextEditor:Synchronizer"), debugVerbose$3 = debug$i.enabled && !1, FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === "test" ? 500 : 1e3;
|
|
2938
2938
|
function Synchronizer(props) {
|
|
2939
|
-
const $ = reactCompilerRuntime.c(
|
|
2939
|
+
const $ = reactCompilerRuntime.c(28), portableTextEditor = usePortableTextEditor(), readOnly = react$1.useSelector(props.editorActor, _temp$1), value = react$1.useSelector(props.editorActor, _temp2), {
|
|
2940
2940
|
editorActor,
|
|
2941
2941
|
getValue,
|
|
2942
|
-
onChange
|
|
2943
|
-
value
|
|
2942
|
+
onChange
|
|
2944
2943
|
} = props;
|
|
2945
2944
|
let t0;
|
|
2946
2945
|
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
|
|
@@ -2992,52 +2991,38 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
|
|
|
2992
2991
|
});
|
|
2993
2992
|
debug$i("Subscribing to editor changes");
|
|
2994
2993
|
const sub = editorActor.on("*", (event) => {
|
|
2995
|
-
|
|
2994
|
+
bb22: switch (event.type) {
|
|
2996
2995
|
case "patch": {
|
|
2997
2996
|
IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, !0), pendingPatches.current.push(event.patch), onFlushPendingPatchesThrottled(), handleChange(event);
|
|
2998
|
-
break
|
|
2997
|
+
break bb22;
|
|
2999
2998
|
}
|
|
3000
2999
|
case "loading": {
|
|
3001
3000
|
handleChange({
|
|
3002
3001
|
type: "loading",
|
|
3003
3002
|
isLoading: !0
|
|
3004
3003
|
});
|
|
3005
|
-
break
|
|
3004
|
+
break bb22;
|
|
3006
3005
|
}
|
|
3007
3006
|
case "done loading": {
|
|
3008
3007
|
handleChange({
|
|
3009
3008
|
type: "loading",
|
|
3010
3009
|
isLoading: !1
|
|
3011
3010
|
});
|
|
3012
|
-
break
|
|
3011
|
+
break bb22;
|
|
3013
3012
|
}
|
|
3014
3013
|
case "focused": {
|
|
3015
3014
|
handleChange({
|
|
3016
3015
|
type: "focus",
|
|
3017
3016
|
event: event.event
|
|
3018
3017
|
});
|
|
3019
|
-
break
|
|
3020
|
-
}
|
|
3021
|
-
case "offline": {
|
|
3022
|
-
handleChange({
|
|
3023
|
-
type: "connection",
|
|
3024
|
-
value: "offline"
|
|
3025
|
-
});
|
|
3026
|
-
break bb20;
|
|
3027
|
-
}
|
|
3028
|
-
case "online": {
|
|
3029
|
-
handleChange({
|
|
3030
|
-
type: "connection",
|
|
3031
|
-
value: "online"
|
|
3032
|
-
});
|
|
3033
|
-
break bb20;
|
|
3018
|
+
break bb22;
|
|
3034
3019
|
}
|
|
3035
3020
|
case "value changed": {
|
|
3036
3021
|
handleChange({
|
|
3037
3022
|
type: "value",
|
|
3038
3023
|
value: event.value
|
|
3039
3024
|
});
|
|
3040
|
-
break
|
|
3025
|
+
break bb22;
|
|
3041
3026
|
}
|
|
3042
3027
|
case "invalid value": {
|
|
3043
3028
|
handleChange({
|
|
@@ -3045,21 +3030,21 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
|
|
|
3045
3030
|
resolution: event.resolution,
|
|
3046
3031
|
value: event.value
|
|
3047
3032
|
});
|
|
3048
|
-
break
|
|
3033
|
+
break bb22;
|
|
3049
3034
|
}
|
|
3050
3035
|
case "error": {
|
|
3051
3036
|
handleChange({
|
|
3052
3037
|
...event,
|
|
3053
3038
|
level: "warning"
|
|
3054
3039
|
});
|
|
3055
|
-
break
|
|
3040
|
+
break bb22;
|
|
3056
3041
|
}
|
|
3057
3042
|
case "annotation.add":
|
|
3058
3043
|
case "annotation.remove":
|
|
3059
3044
|
case "annotation.toggle":
|
|
3060
3045
|
case "focus":
|
|
3061
3046
|
case "patches":
|
|
3062
|
-
break
|
|
3047
|
+
break bb22;
|
|
3063
3048
|
default:
|
|
3064
3049
|
handleChange(event);
|
|
3065
3050
|
}
|
|
@@ -3068,25 +3053,16 @@ ${JSON.stringify(pendingPatches.current, null, 2)}`);
|
|
|
3068
3053
|
debug$i("Unsubscribing to changes"), sub.unsubscribe();
|
|
3069
3054
|
};
|
|
3070
3055
|
}, t9 = [editorActor, handleChange, onFlushPendingPatches, slateEditor], $[17] = editorActor, $[18] = handleChange, $[19] = onFlushPendingPatches, $[20] = slateEditor, $[21] = t8, $[22] = t9) : (t8 = $[21], t9 = $[22]), react.useEffect(t8, t9);
|
|
3071
|
-
let t10;
|
|
3072
|
-
$[23] !== syncValue || $[24] !== value ? (t10 = () => {
|
|
3073
|
-
debug$i("Editor is online, syncing from props.value"), syncValue(value);
|
|
3074
|
-
}, $[23] = syncValue, $[24] = value, $[25] = t10) : t10 = $[25];
|
|
3075
|
-
const handleOnline = t10;
|
|
3076
|
-
let t11, t12;
|
|
3077
|
-
$[26] !== editorActor || $[27] !== handleOnline ? (t11 = () => {
|
|
3078
|
-
const subscription = editorActor.on("online", handleOnline);
|
|
3079
|
-
return () => {
|
|
3080
|
-
subscription.unsubscribe();
|
|
3081
|
-
};
|
|
3082
|
-
}, t12 = [handleOnline, editorActor], $[26] = editorActor, $[27] = handleOnline, $[28] = t11, $[29] = t12) : (t11 = $[28], t12 = $[29]), react.useEffect(t11, t12);
|
|
3083
3056
|
const isInitialValueFromProps = react.useRef(!0);
|
|
3084
|
-
let
|
|
3085
|
-
return $[
|
|
3057
|
+
let t10, t11;
|
|
3058
|
+
return $[23] !== editorActor || $[24] !== syncValue || $[25] !== value ? (t10 = () => {
|
|
3086
3059
|
debug$i("Value from props changed, syncing new value"), syncValue(value), isInitialValueFromProps.current && (editorActor.send({
|
|
3087
3060
|
type: "ready"
|
|
3088
3061
|
}), isInitialValueFromProps.current = !1);
|
|
3089
|
-
},
|
|
3062
|
+
}, t11 = [editorActor, syncValue, value], $[23] = editorActor, $[24] = syncValue, $[25] = value, $[26] = t10, $[27] = t11) : (t10 = $[26], t11 = $[27]), react.useEffect(t10, t11), null;
|
|
3063
|
+
}
|
|
3064
|
+
function _temp2(s_0) {
|
|
3065
|
+
return s_0.context.value;
|
|
3090
3066
|
}
|
|
3091
3067
|
function _temp$1(s) {
|
|
3092
3068
|
return s.context.readOnly;
|
|
@@ -5693,22 +5669,7 @@ function performDefaultAction({
|
|
|
5693
5669
|
});
|
|
5694
5670
|
}
|
|
5695
5671
|
}
|
|
5696
|
-
const
|
|
5697
|
-
sendBack
|
|
5698
|
-
}) => {
|
|
5699
|
-
const onlineHandler = () => {
|
|
5700
|
-
sendBack({
|
|
5701
|
-
type: "online"
|
|
5702
|
-
});
|
|
5703
|
-
}, offlineHandler = () => {
|
|
5704
|
-
sendBack({
|
|
5705
|
-
type: "offline"
|
|
5706
|
-
});
|
|
5707
|
-
};
|
|
5708
|
-
return window.addEventListener("online", onlineHandler), window.addEventListener("offline", offlineHandler), () => {
|
|
5709
|
-
window.removeEventListener("online", onlineHandler), window.removeEventListener("offline", offlineHandler);
|
|
5710
|
-
};
|
|
5711
|
-
}), editorMachine = xstate.setup({
|
|
5672
|
+
const editorMachine = xstate.setup({
|
|
5712
5673
|
types: {
|
|
5713
5674
|
context: {},
|
|
5714
5675
|
events: {},
|
|
@@ -5807,9 +5768,6 @@ const networkLogic = xstate.fromCallback(({
|
|
|
5807
5768
|
actionIntends: [defaultAction]
|
|
5808
5769
|
});
|
|
5809
5770
|
})
|
|
5810
|
-
},
|
|
5811
|
-
actors: {
|
|
5812
|
-
networkLogic
|
|
5813
5771
|
}
|
|
5814
5772
|
}).createMachine({
|
|
5815
5773
|
id: "editor",
|
|
@@ -5821,12 +5779,9 @@ const networkLogic = xstate.fromCallback(({
|
|
|
5821
5779
|
pendingEvents: [],
|
|
5822
5780
|
schema: input.schema,
|
|
5823
5781
|
readOnly: !1,
|
|
5824
|
-
maxBlocks: void 0
|
|
5782
|
+
maxBlocks: void 0,
|
|
5783
|
+
value: input.value
|
|
5825
5784
|
}),
|
|
5826
|
-
invoke: {
|
|
5827
|
-
id: "networkLogic",
|
|
5828
|
-
src: "networkLogic"
|
|
5829
|
-
},
|
|
5830
5785
|
on: {
|
|
5831
5786
|
"annotation.add": {
|
|
5832
5787
|
actions: xstate.emit(({
|
|
@@ -5900,16 +5855,6 @@ const networkLogic = xstate.fromCallback(({
|
|
|
5900
5855
|
event
|
|
5901
5856
|
}) => event)
|
|
5902
5857
|
},
|
|
5903
|
-
online: {
|
|
5904
|
-
actions: xstate.emit({
|
|
5905
|
-
type: "online"
|
|
5906
|
-
})
|
|
5907
|
-
},
|
|
5908
|
-
offline: {
|
|
5909
|
-
actions: xstate.emit({
|
|
5910
|
-
type: "offline"
|
|
5911
|
-
})
|
|
5912
|
-
},
|
|
5913
5858
|
loading: {
|
|
5914
5859
|
actions: xstate.emit({
|
|
5915
5860
|
type: "loading"
|
|
@@ -5931,6 +5876,13 @@ const networkLogic = xstate.fromCallback(({
|
|
|
5931
5876
|
"update schema": {
|
|
5932
5877
|
actions: "assign schema"
|
|
5933
5878
|
},
|
|
5879
|
+
"update value": {
|
|
5880
|
+
actions: xstate.assign({
|
|
5881
|
+
value: ({
|
|
5882
|
+
event
|
|
5883
|
+
}) => event.value
|
|
5884
|
+
})
|
|
5885
|
+
},
|
|
5934
5886
|
"toggle readOnly": {
|
|
5935
5887
|
actions: xstate.assign({
|
|
5936
5888
|
readOnly: ({
|
|
@@ -6092,7 +6044,8 @@ class PortableTextEditor extends react.Component {
|
|
|
6092
6044
|
props.incomingPatches$ && console.warn("The prop 'incomingPatches$' is deprecated and renamed to 'patches$'"), this.schemaTypes = getPortableTextMemberSchemaTypes(props.schemaType.hasOwnProperty("jsonType") ? props.schemaType : compileType(props.schemaType)), this.editorActor = xstate.createActor(editorMachine, {
|
|
6093
6045
|
input: {
|
|
6094
6046
|
keyGenerator: props.keyGenerator || defaultKeyGenerator,
|
|
6095
|
-
schema: this.schemaTypes
|
|
6047
|
+
schema: this.schemaTypes,
|
|
6048
|
+
value: props.value
|
|
6096
6049
|
}
|
|
6097
6050
|
}), this.editorActor.start(), this.slateEditor = createSlateEditor({
|
|
6098
6051
|
editorActor: this.editorActor
|
|
@@ -6114,7 +6067,10 @@ class PortableTextEditor extends react.Component {
|
|
|
6114
6067
|
}), this.props.maxBlocks !== prevProps.maxBlocks && this.editorActor.send({
|
|
6115
6068
|
type: "update maxBlocks",
|
|
6116
6069
|
maxBlocks: this.props.maxBlocks === void 0 ? void 0 : Number.parseInt(this.props.maxBlocks.toString(), 10)
|
|
6117
|
-
})
|
|
6070
|
+
}), this.props.value !== prevProps.value && this.editorActor.send({
|
|
6071
|
+
type: "update value",
|
|
6072
|
+
value: this.props.value
|
|
6073
|
+
}), this.props.editorRef !== prevProps.editorRef && this.props.editorRef && (this.props.editorRef.current = this));
|
|
6118
6074
|
}
|
|
6119
6075
|
setEditable = (editable) => {
|
|
6120
6076
|
this.editable = {
|
|
@@ -6133,7 +6089,7 @@ class PortableTextEditor extends react.Component {
|
|
|
6133
6089
|
/* @__PURE__ */ jsxRuntime.jsx(EditorActorContext.Provider, { value: this.editorActor, children: /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, { editor: this.slateEditor.instance, initialValue: this.slateEditor.initialValue, children: /* @__PURE__ */ jsxRuntime.jsx(PortableTextEditorContext.Provider, { value: this, children: /* @__PURE__ */ jsxRuntime.jsxs(PortableTextEditorSelectionProvider, { editorActor: this.editorActor, children: [
|
|
6134
6090
|
/* @__PURE__ */ jsxRuntime.jsx(Synchronizer, { editorActor: this.editorActor, getValue: this.getValue, onChange: (change) => {
|
|
6135
6091
|
this.props.editor || this.props.onChange(change), this.change$.next(change);
|
|
6136
|
-
}
|
|
6092
|
+
} }),
|
|
6137
6093
|
this.props.children
|
|
6138
6094
|
] }) }) }) })
|
|
6139
6095
|
] });
|
|
@@ -6899,39 +6855,40 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
|
|
|
6899
6855
|
});
|
|
6900
6856
|
PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
|
|
6901
6857
|
function useEditor(config) {
|
|
6902
|
-
const $ = reactCompilerRuntime.c(
|
|
6858
|
+
const $ = reactCompilerRuntime.c(21), t0 = config.keyGenerator ?? defaultKeyGenerator;
|
|
6903
6859
|
let t1;
|
|
6904
6860
|
$[0] !== config.schema || $[1] !== config.schemaDefinition ? (t1 = config.schemaDefinition ? compileSchemaDefinition(config.schemaDefinition) : getPortableTextMemberSchemaTypes(config.schema.hasOwnProperty("jsonType") ? config.schema : compileType(config.schema)), $[0] = config.schema, $[1] = config.schemaDefinition, $[2] = t1) : t1 = $[2];
|
|
6905
6861
|
let t2;
|
|
6906
|
-
$[3] !== config.behaviors || $[4] !==
|
|
6862
|
+
$[3] !== config.behaviors || $[4] !== config.initialValue || $[5] !== t0 || $[6] !== t1 ? (t2 = {
|
|
6907
6863
|
input: {
|
|
6908
6864
|
behaviors: config.behaviors,
|
|
6909
6865
|
keyGenerator: t0,
|
|
6910
|
-
schema: t1
|
|
6866
|
+
schema: t1,
|
|
6867
|
+
value: config.initialValue
|
|
6911
6868
|
}
|
|
6912
|
-
}, $[3] = config.behaviors, $[4] =
|
|
6869
|
+
}, $[3] = config.behaviors, $[4] = config.initialValue, $[5] = t0, $[6] = t1, $[7] = t2) : t2 = $[7];
|
|
6913
6870
|
const editorActor = react$1.useActorRef(editorMachine, t2);
|
|
6914
6871
|
let t3;
|
|
6915
|
-
$[
|
|
6872
|
+
$[8] !== editorActor ? (t3 = createSlateEditor({
|
|
6916
6873
|
editorActor
|
|
6917
|
-
}), $[
|
|
6874
|
+
}), $[8] = editorActor, $[9] = t3) : t3 = $[9];
|
|
6918
6875
|
const slateEditor = t3, readOnly = react$1.useSelector(editorActor, _temp);
|
|
6919
6876
|
let t4, t5;
|
|
6920
|
-
$[
|
|
6877
|
+
$[10] !== editorActor ? (t4 = (event) => {
|
|
6921
6878
|
editorActor.send(event);
|
|
6922
|
-
}, t5 = (event_0, listener) => editorActor.on(event_0, listener), $[
|
|
6879
|
+
}, t5 = (event_0, listener) => editorActor.on(event_0, listener), $[10] = editorActor, $[11] = t4, $[12] = t5) : (t4 = $[11], t5 = $[12]);
|
|
6923
6880
|
let t6;
|
|
6924
|
-
$[
|
|
6881
|
+
$[13] !== editorActor || $[14] !== slateEditor ? (t6 = {
|
|
6925
6882
|
editorActor,
|
|
6926
6883
|
slateEditor
|
|
6927
|
-
}, $[
|
|
6884
|
+
}, $[13] = editorActor, $[14] = slateEditor, $[15] = t6) : t6 = $[15];
|
|
6928
6885
|
let t7;
|
|
6929
|
-
return $[
|
|
6886
|
+
return $[16] !== readOnly || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 ? (t7 = {
|
|
6930
6887
|
send: t4,
|
|
6931
6888
|
on: t5,
|
|
6932
6889
|
readOnly,
|
|
6933
6890
|
_internal: t6
|
|
6934
|
-
}, $[
|
|
6891
|
+
}, $[16] = readOnly, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7) : t7 = $[20], t7;
|
|
6935
6892
|
}
|
|
6936
6893
|
function _temp(s) {
|
|
6937
6894
|
return s.context.readOnly;
|