@portabletext/editor 1.49.0 → 1.49.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/lib/_chunks-cjs/editor-provider.cjs +22 -11
- package/lib/_chunks-cjs/editor-provider.cjs.map +1 -1
- package/lib/_chunks-cjs/util.merge-text-blocks.cjs +2 -1
- package/lib/_chunks-cjs/util.merge-text-blocks.cjs.map +1 -1
- package/lib/_chunks-cjs/util.slice-blocks.cjs +26 -8
- package/lib/_chunks-cjs/util.slice-blocks.cjs.map +1 -1
- package/lib/_chunks-es/editor-provider.js +22 -11
- package/lib/_chunks-es/editor-provider.js.map +1 -1
- package/lib/_chunks-es/util.merge-text-blocks.js +2 -1
- package/lib/_chunks-es/util.merge-text-blocks.js.map +1 -1
- package/lib/_chunks-es/util.slice-blocks.js +26 -8
- package/lib/_chunks-es/util.slice-blocks.js.map +1 -1
- package/lib/index.cjs +155 -158
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +160 -163
- package/lib/index.js.map +1 -1
- package/package.json +6 -6
- package/src/behaviors/behavior.abstract.split.ts +2 -2
- package/src/converters/converter.portable-text.ts +1 -0
- package/src/converters/converter.text-html.ts +1 -0
- package/src/converters/converter.text-plain.ts +1 -0
- package/src/editor/Editable.tsx +20 -48
- package/src/editor/__tests__/PortableTextEditor.test.tsx +3 -3
- package/src/editor/__tests__/RangeDecorations.test.tsx +2 -2
- package/src/editor/components/render-block-object.tsx +0 -1
- package/src/editor/components/render-element.tsx +3 -3
- package/src/editor/components/render-inline-object.tsx +9 -12
- package/src/editor/components/render-leaf.tsx +64 -0
- package/src/editor/components/render-span.tsx +260 -0
- package/src/editor/components/render-text-block.tsx +0 -1
- package/src/editor/components/render-text.tsx +18 -0
- package/src/internal-utils/parse-blocks.test.ts +20 -20
- package/src/internal-utils/parse-blocks.ts +57 -20
- package/src/operations/behavior.operation.annotation.add.ts +1 -1
- package/src/operations/behavior.operation.block.set.ts +1 -1
- package/src/operations/behavior.operation.block.unset.ts +2 -2
- package/src/operations/behavior.operation.insert-inline-object.ts +1 -1
- package/src/operations/behavior.operation.insert.block.ts +1 -1
- package/src/selectors/selector.get-trimmed-selection.test.ts +1 -0
- package/src/utils/util.merge-text-blocks.ts +1 -1
- package/src/editor/components/Leaf.tsx +0 -336
package/lib/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { c } from "react-compiler-runtime";
|
|
2
|
-
import { useEffect,
|
|
2
|
+
import { useEffect, useContext, useState, useRef, useMemo, startTransition, useCallback, forwardRef, useImperativeHandle } from "react";
|
|
3
3
|
import { useEffectEvent } from "use-effect-event";
|
|
4
|
-
import { useEditor, getNodeBlock, getFirstBlock, getLastBlock, slateRangeToSelection, toSlateRange,
|
|
4
|
+
import { useEditor, getNodeBlock, getFirstBlock, getLastBlock, slateRangeToSelection, toSlateRange, createEditorPriority, corePriority, EditorActorContext, getPointBlock, usePortableTextEditor, PortableTextEditor, debugWithName, isHotkey, moveRangeByOperation, isEqualToEmptyEditor, fromSlateValue, KEY_TO_VALUE_ELEMENT, getEditorSnapshot } from "./_chunks-es/editor-provider.js";
|
|
5
5
|
import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
|
|
6
|
-
import { jsx,
|
|
6
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
7
7
|
import { useSelector, useActorRef } from "@xstate/react";
|
|
8
8
|
import noop from "lodash/noop.js";
|
|
9
|
-
import { Editor,
|
|
10
|
-
import {
|
|
9
|
+
import { Editor, Range, Element as Element$1, Path, Transforms } from "slate";
|
|
10
|
+
import { useSlateStatic, useSelected, useSlate, ReactEditor, Editable } from "slate-react";
|
|
11
11
|
import { getBlockEndPoint, getBlockStartPoint, isKeyedSegment, parseInlineObject, parseTextBlock, parseBlockObject, parseBlocks } from "./_chunks-es/util.slice-blocks.js";
|
|
12
12
|
import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, isOverlappingSelection, getFocusBlock, isSelectingEntireBlocks } from "./_chunks-es/selector.is-selecting-entire-blocks.js";
|
|
13
13
|
import { getFocusInlineObject } from "./_chunks-es/selector.get-focus-inline-object.js";
|
|
@@ -15,8 +15,8 @@ import { DOMEditor, isDOMNode } from "slate-dom";
|
|
|
15
15
|
import { isSelectionCollapsed as isSelectionCollapsed$1 } from "./_chunks-es/util.is-selection-collapsed.js";
|
|
16
16
|
import isEqual from "lodash/isEqual.js";
|
|
17
17
|
import { getSelectionEndPoint } from "./_chunks-es/util.selection-point-to-block-offset.js";
|
|
18
|
-
import uniq from "lodash/uniq.js";
|
|
19
18
|
import { defineBehavior, forward } from "./behaviors/index.js";
|
|
19
|
+
import uniq from "lodash/uniq.js";
|
|
20
20
|
import { setup, fromCallback, assign, and } from "xstate";
|
|
21
21
|
function EditorEventListener(props) {
|
|
22
22
|
const $ = c(5), editor = useEditor(), on = useEffectEvent(props.on);
|
|
@@ -343,130 +343,6 @@ function getSelectionDomNodes({
|
|
|
343
343
|
childNodes: childEntries.map(([childNode]) => DOMEditor.toDOMNode(slateEditor, childNode))
|
|
344
344
|
};
|
|
345
345
|
}
|
|
346
|
-
const debug$2 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (props) => {
|
|
347
|
-
const {
|
|
348
|
-
editorActor,
|
|
349
|
-
attributes,
|
|
350
|
-
children,
|
|
351
|
-
leaf,
|
|
352
|
-
schemaTypes,
|
|
353
|
-
renderChild,
|
|
354
|
-
renderDecorator,
|
|
355
|
-
renderAnnotation
|
|
356
|
-
} = props, spanRef = useRef(null), portableTextEditor = usePortableTextEditor(), blockSelected = useSelected(), [focused, setFocused] = useState(!1), [selected, setSelected] = useState(!1), block = children.props.parent, path = useMemo(() => block ? [{
|
|
357
|
-
_key: block?._key
|
|
358
|
-
}, "children", {
|
|
359
|
-
_key: leaf._key
|
|
360
|
-
}] : [], [block, leaf._key]), decoratorValues = useMemo(() => schemaTypes.decorators.map((dec) => dec.value), [schemaTypes.decorators]), marks = useMemo(() => uniq((leaf.marks || EMPTY_MARKS).filter((mark) => decoratorValues.includes(mark))), [decoratorValues, leaf.marks]), annotationMarks = Array.isArray(leaf.marks) ? leaf.marks : EMPTY_MARKS, annotations = useMemo(() => annotationMarks.map((mark_0) => !decoratorValues.includes(mark_0) && block?.markDefs?.find((def) => def._key === mark_0)).filter(Boolean), [annotationMarks, block, decoratorValues]), shouldTrackSelectionAndFocus = annotations.length > 0 && blockSelected;
|
|
361
|
-
useEffect(() => {
|
|
362
|
-
if (!shouldTrackSelectionAndFocus) {
|
|
363
|
-
setFocused(!1);
|
|
364
|
-
return;
|
|
365
|
-
}
|
|
366
|
-
const sel = PortableTextEditor.getSelection(portableTextEditor);
|
|
367
|
-
sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && startTransition(() => {
|
|
368
|
-
setFocused(!0);
|
|
369
|
-
});
|
|
370
|
-
}, [shouldTrackSelectionAndFocus, path, portableTextEditor]);
|
|
371
|
-
const setSelectedFromRange = useCallback(() => {
|
|
372
|
-
if (!shouldTrackSelectionAndFocus)
|
|
373
|
-
return;
|
|
374
|
-
debug$2("Setting selection and focus from range");
|
|
375
|
-
const winSelection = window.getSelection();
|
|
376
|
-
if (!winSelection) {
|
|
377
|
-
setSelected(!1);
|
|
378
|
-
return;
|
|
379
|
-
}
|
|
380
|
-
if (winSelection && winSelection.rangeCount > 0) {
|
|
381
|
-
const range = winSelection.getRangeAt(0);
|
|
382
|
-
spanRef.current && range.intersectsNode(spanRef.current) ? setSelected(!0) : setSelected(!1);
|
|
383
|
-
} else
|
|
384
|
-
setSelected(!1);
|
|
385
|
-
}, [shouldTrackSelectionAndFocus]);
|
|
386
|
-
useEffect(() => {
|
|
387
|
-
if (!shouldTrackSelectionAndFocus)
|
|
388
|
-
return;
|
|
389
|
-
const onBlur = editorActor.on("blurred", () => {
|
|
390
|
-
setFocused(!1), setSelected(!1);
|
|
391
|
-
}), onFocus = editorActor.on("focused", () => {
|
|
392
|
-
const sel_0 = PortableTextEditor.getSelection(portableTextEditor);
|
|
393
|
-
sel_0 && isEqual(sel_0.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
|
|
394
|
-
}), onSelection = editorActor.on("selection", (event) => {
|
|
395
|
-
event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
|
|
396
|
-
});
|
|
397
|
-
return () => {
|
|
398
|
-
onBlur.unsubscribe(), onFocus.unsubscribe(), onSelection.unsubscribe();
|
|
399
|
-
};
|
|
400
|
-
}, [editorActor, path, portableTextEditor, setSelectedFromRange, shouldTrackSelectionAndFocus]), useEffect(() => setSelectedFromRange(), [setSelectedFromRange]);
|
|
401
|
-
const content = useMemo(() => {
|
|
402
|
-
let returnedChildren = children;
|
|
403
|
-
if (Text.isText(leaf) && leaf._type === schemaTypes.span.name && (marks.forEach((mark_1) => {
|
|
404
|
-
const schemaType = schemaTypes.decorators.find((dec_0) => dec_0.value === mark_1);
|
|
405
|
-
if (schemaType && renderDecorator) {
|
|
406
|
-
const _props = Object.defineProperty({
|
|
407
|
-
children: returnedChildren,
|
|
408
|
-
editorElementRef: spanRef,
|
|
409
|
-
focused,
|
|
410
|
-
path,
|
|
411
|
-
selected,
|
|
412
|
-
schemaType,
|
|
413
|
-
value: mark_1
|
|
414
|
-
}, "type", {
|
|
415
|
-
enumerable: !1,
|
|
416
|
-
get() {
|
|
417
|
-
return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaType;
|
|
418
|
-
}
|
|
419
|
-
});
|
|
420
|
-
returnedChildren = renderDecorator(_props);
|
|
421
|
-
}
|
|
422
|
-
}), block && annotations.length > 0 && annotations.forEach((annotation) => {
|
|
423
|
-
const schemaType_0 = schemaTypes.annotations.find((t) => t.name === annotation._type);
|
|
424
|
-
if (schemaType_0)
|
|
425
|
-
if (renderAnnotation) {
|
|
426
|
-
const _props_0 = Object.defineProperty({
|
|
427
|
-
block,
|
|
428
|
-
children: returnedChildren,
|
|
429
|
-
editorElementRef: spanRef,
|
|
430
|
-
focused,
|
|
431
|
-
path,
|
|
432
|
-
selected,
|
|
433
|
-
schemaType: schemaType_0,
|
|
434
|
-
value: annotation
|
|
435
|
-
}, "type", {
|
|
436
|
-
enumerable: !1,
|
|
437
|
-
get() {
|
|
438
|
-
return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaType_0;
|
|
439
|
-
}
|
|
440
|
-
});
|
|
441
|
-
returnedChildren = /* @__PURE__ */ jsx("span", { ref: spanRef, children: renderAnnotation(_props_0) });
|
|
442
|
-
} else
|
|
443
|
-
returnedChildren = /* @__PURE__ */ jsx("span", { ref: spanRef, children: returnedChildren });
|
|
444
|
-
}), block && renderChild)) {
|
|
445
|
-
const child = block.children.find((_child) => _child._key === leaf._key);
|
|
446
|
-
if (child) {
|
|
447
|
-
const _props_1 = Object.defineProperty({
|
|
448
|
-
annotations,
|
|
449
|
-
children: /* @__PURE__ */ jsx(Fragment, { children: returnedChildren }),
|
|
450
|
-
editorElementRef: spanRef,
|
|
451
|
-
focused,
|
|
452
|
-
path,
|
|
453
|
-
schemaType: schemaTypes.span,
|
|
454
|
-
selected,
|
|
455
|
-
value: child
|
|
456
|
-
}, "type", {
|
|
457
|
-
enumerable: !1,
|
|
458
|
-
get() {
|
|
459
|
-
return console.warn("Property 'type' is deprecated, use 'schemaType' instead."), schemaTypes.span;
|
|
460
|
-
}
|
|
461
|
-
});
|
|
462
|
-
returnedChildren = renderChild(_props_1);
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
return returnedChildren;
|
|
466
|
-
}, [annotations, block, children, focused, leaf, marks, path, renderAnnotation, renderChild, renderDecorator, schemaTypes.annotations, schemaTypes.decorators, schemaTypes.span, selected]);
|
|
467
|
-
return useMemo(() => /* @__PURE__ */ jsx("span", { ...attributes, ref: spanRef, "data-child-key": leaf._key, "data-child-name": leaf._type, "data-child-type": "span", children: content }, leaf._key), [leaf, attributes, content]);
|
|
468
|
-
};
|
|
469
|
-
Leaf.displayName = "Leaf";
|
|
470
346
|
function DropIndicator() {
|
|
471
347
|
const $ = c(1);
|
|
472
348
|
let t0;
|
|
@@ -628,7 +504,7 @@ function RenderBlockObject(props) {
|
|
|
628
504
|
value: props.blockObject
|
|
629
505
|
}) : /* @__PURE__ */ jsx(RenderDefaultBlockObject, { blockObject: props.blockObject }) }),
|
|
630
506
|
dragPositionBlock === "end" ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
|
|
631
|
-
] }
|
|
507
|
+
] });
|
|
632
508
|
}
|
|
633
509
|
function RenderInlineObject(props) {
|
|
634
510
|
const inlineObjectRef = useRef(null), slateEditor = useSlateStatic(), selected = useSelected(), editorActor = useContext(EditorActorContext), legacySchemaType = useSelector(editorActor, (s) => s.context.getLegacySchema().inlineObjects.find((inlineObject) => inlineObject.name === props.element._type));
|
|
@@ -640,11 +516,11 @@ function RenderInlineObject(props) {
|
|
|
640
516
|
offset: 0
|
|
641
517
|
}
|
|
642
518
|
});
|
|
643
|
-
return block || console.error(`Unable to find parent block of inline object ${props.element._key}`), /* @__PURE__ */ jsxs("span", { ...props.attributes, children: [
|
|
519
|
+
return block || console.error(`Unable to find parent block of inline object ${props.element._key}`), /* @__PURE__ */ jsxs("span", { ...props.attributes, draggable: !props.readOnly, className: "pt-inline-object", "data-child-key": props.inlineObject._key, "data-child-name": props.inlineObject._type, "data-child-type": "object", children: [
|
|
644
520
|
props.children,
|
|
645
|
-
/* @__PURE__ */ jsx("span", {
|
|
521
|
+
/* @__PURE__ */ jsx("span", { ref: inlineObjectRef, style: {
|
|
646
522
|
display: "inline-block"
|
|
647
|
-
},
|
|
523
|
+
}, children: props.renderChild && block && legacySchemaType ? props.renderChild({
|
|
648
524
|
annotations: [],
|
|
649
525
|
children: /* @__PURE__ */ jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }),
|
|
650
526
|
editorElementRef: inlineObjectRef,
|
|
@@ -658,7 +534,7 @@ function RenderInlineObject(props) {
|
|
|
658
534
|
schemaType: legacySchemaType,
|
|
659
535
|
value: props.inlineObject,
|
|
660
536
|
type: legacySchemaType
|
|
661
|
-
}) : /* @__PURE__ */ jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }) }
|
|
537
|
+
}) : /* @__PURE__ */ jsx(RenderDefaultInlineObject, { inlineObject: props.inlineObject }) })
|
|
662
538
|
] });
|
|
663
539
|
}
|
|
664
540
|
function RenderTextBlock(props) {
|
|
@@ -719,10 +595,10 @@ function RenderTextBlock(props) {
|
|
|
719
595
|
value: props.textBlock
|
|
720
596
|
}) : props.children }),
|
|
721
597
|
dragPositionBlock === "end" ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
|
|
722
|
-
] }
|
|
598
|
+
] });
|
|
723
599
|
}
|
|
724
600
|
function RenderElement(props) {
|
|
725
|
-
const $ = c(45), editorActor = useContext(EditorActorContext), schema = useSelector(editorActor, _temp);
|
|
601
|
+
const $ = c(45), editorActor = useContext(EditorActorContext), schema = useSelector(editorActor, _temp$1);
|
|
726
602
|
if ("__inline" in props.element && props.element.__inline === !0) {
|
|
727
603
|
let t02;
|
|
728
604
|
if ($[0] !== props.element || $[1] !== schema) {
|
|
@@ -733,7 +609,8 @@ function RenderElement(props) {
|
|
|
733
609
|
schema
|
|
734
610
|
},
|
|
735
611
|
options: {
|
|
736
|
-
refreshKeys: !1
|
|
612
|
+
refreshKeys: !1,
|
|
613
|
+
validateFields: !1
|
|
737
614
|
},
|
|
738
615
|
inlineObject: {
|
|
739
616
|
_key: props.element._key,
|
|
@@ -760,7 +637,8 @@ function RenderElement(props) {
|
|
|
760
637
|
schema
|
|
761
638
|
},
|
|
762
639
|
options: {
|
|
763
|
-
refreshKeys: !1
|
|
640
|
+
refreshKeys: !1,
|
|
641
|
+
validateFields: !1
|
|
764
642
|
},
|
|
765
643
|
block: props.element
|
|
766
644
|
}), $[16] = props.element, $[17] = schema, $[18] = t0) : t0 = $[18];
|
|
@@ -778,7 +656,8 @@ function RenderElement(props) {
|
|
|
778
656
|
schema
|
|
779
657
|
},
|
|
780
658
|
options: {
|
|
781
|
-
refreshKeys: !1
|
|
659
|
+
refreshKeys: !1,
|
|
660
|
+
validateFields: !1
|
|
782
661
|
},
|
|
783
662
|
blockObject: {
|
|
784
663
|
_key: props.element._key,
|
|
@@ -807,9 +686,145 @@ function _temp3() {
|
|
|
807
686
|
function _temp2() {
|
|
808
687
|
return "";
|
|
809
688
|
}
|
|
689
|
+
function _temp$1(s) {
|
|
690
|
+
return s.context.schema;
|
|
691
|
+
}
|
|
692
|
+
function RenderSpan(props) {
|
|
693
|
+
const slateEditor = useSlateStatic(), editorActor = useContext(EditorActorContext), legacySchema = useSelector(editorActor, (s) => s.context.getLegacySchema()), spanRef = useRef(null), portableTextEditor = usePortableTextEditor(), blockSelected = useSelected(), [focused, setFocused] = useState(!1), [selected, setSelected] = useState(!1), parent = props.children.props.parent, block = parent && slateEditor.isTextBlock(parent) ? parent : void 0, path = useMemo(() => block ? [{
|
|
694
|
+
_key: block._key
|
|
695
|
+
}, "children", {
|
|
696
|
+
_key: props.leaf._key
|
|
697
|
+
}] : void 0, [block, props.leaf._key]), decoratorSchemaTypes = editorActor.getSnapshot().context.schema.decorators.map((decorator) => decorator.name), decorators = uniq((props.leaf.marks ?? []).filter((mark) => decoratorSchemaTypes.includes(mark))), annotationMarkDefs = (props.leaf.marks ?? []).flatMap((mark_0) => {
|
|
698
|
+
if (decoratorSchemaTypes.includes(mark_0))
|
|
699
|
+
return [];
|
|
700
|
+
const markDef_0 = block?.markDefs?.find((markDef) => markDef._key === mark_0);
|
|
701
|
+
return markDef_0 ? [markDef_0] : [];
|
|
702
|
+
}), shouldTrackSelectionAndFocus = annotationMarkDefs.length > 0 && blockSelected;
|
|
703
|
+
useEffect(() => {
|
|
704
|
+
if (!shouldTrackSelectionAndFocus) {
|
|
705
|
+
setFocused(!1);
|
|
706
|
+
return;
|
|
707
|
+
}
|
|
708
|
+
const sel = PortableTextEditor.getSelection(portableTextEditor);
|
|
709
|
+
sel && isEqual(sel.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && startTransition(() => {
|
|
710
|
+
setFocused(!0);
|
|
711
|
+
});
|
|
712
|
+
}, [shouldTrackSelectionAndFocus, path, portableTextEditor]);
|
|
713
|
+
const setSelectedFromRange = useCallback(() => {
|
|
714
|
+
if (!shouldTrackSelectionAndFocus)
|
|
715
|
+
return;
|
|
716
|
+
const winSelection = window.getSelection();
|
|
717
|
+
if (!winSelection) {
|
|
718
|
+
setSelected(!1);
|
|
719
|
+
return;
|
|
720
|
+
}
|
|
721
|
+
if (winSelection && winSelection.rangeCount > 0) {
|
|
722
|
+
const range = winSelection.getRangeAt(0);
|
|
723
|
+
spanRef.current && range.intersectsNode(spanRef.current) ? setSelected(!0) : setSelected(!1);
|
|
724
|
+
} else
|
|
725
|
+
setSelected(!1);
|
|
726
|
+
}, [shouldTrackSelectionAndFocus]);
|
|
727
|
+
useEffect(() => {
|
|
728
|
+
if (!shouldTrackSelectionAndFocus)
|
|
729
|
+
return;
|
|
730
|
+
const onBlur = editorActor.on("blurred", () => {
|
|
731
|
+
setFocused(!1), setSelected(!1);
|
|
732
|
+
}), onFocus = editorActor.on("focused", () => {
|
|
733
|
+
const sel_0 = PortableTextEditor.getSelection(portableTextEditor);
|
|
734
|
+
sel_0 && isEqual(sel_0.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) && setFocused(!0), setSelectedFromRange();
|
|
735
|
+
}), onSelection = editorActor.on("selection", (event) => {
|
|
736
|
+
event.selection && isEqual(event.selection.focus.path, path) && PortableTextEditor.isCollapsedSelection(portableTextEditor) ? setFocused(!0) : setFocused(!1), setSelectedFromRange();
|
|
737
|
+
});
|
|
738
|
+
return () => {
|
|
739
|
+
onBlur.unsubscribe(), onFocus.unsubscribe(), onSelection.unsubscribe();
|
|
740
|
+
};
|
|
741
|
+
}, [editorActor, path, portableTextEditor, setSelectedFromRange, shouldTrackSelectionAndFocus]), useEffect(() => setSelectedFromRange(), [setSelectedFromRange]);
|
|
742
|
+
let children = props.children;
|
|
743
|
+
for (const mark_1 of decorators) {
|
|
744
|
+
const legacyDecoratorSchemaType = legacySchema.decorators.find((dec) => dec.value === mark_1);
|
|
745
|
+
path && legacyDecoratorSchemaType && props.renderDecorator && (children = props.renderDecorator({
|
|
746
|
+
children,
|
|
747
|
+
editorElementRef: spanRef,
|
|
748
|
+
focused,
|
|
749
|
+
path,
|
|
750
|
+
selected,
|
|
751
|
+
schemaType: legacyDecoratorSchemaType,
|
|
752
|
+
value: mark_1,
|
|
753
|
+
type: legacyDecoratorSchemaType
|
|
754
|
+
}));
|
|
755
|
+
}
|
|
756
|
+
for (const annotationMarkDef of annotationMarkDefs) {
|
|
757
|
+
const legacyAnnotationSchemaType = legacySchema.annotations.find((t) => t.name === annotationMarkDef._type);
|
|
758
|
+
legacyAnnotationSchemaType && (block && path && props.renderAnnotation ? children = /* @__PURE__ */ jsx("span", { ref: spanRef, children: props.renderAnnotation({
|
|
759
|
+
block,
|
|
760
|
+
children,
|
|
761
|
+
editorElementRef: spanRef,
|
|
762
|
+
focused,
|
|
763
|
+
path,
|
|
764
|
+
selected,
|
|
765
|
+
schemaType: legacyAnnotationSchemaType,
|
|
766
|
+
value: annotationMarkDef,
|
|
767
|
+
type: legacyAnnotationSchemaType
|
|
768
|
+
}) }) : children = /* @__PURE__ */ jsx("span", { ref: spanRef, children }));
|
|
769
|
+
}
|
|
770
|
+
if (block && path && props.renderChild) {
|
|
771
|
+
const child = block.children.find((_child) => _child._key === props.leaf._key);
|
|
772
|
+
child && (children = props.renderChild({
|
|
773
|
+
annotations: annotationMarkDefs,
|
|
774
|
+
children,
|
|
775
|
+
editorElementRef: spanRef,
|
|
776
|
+
focused,
|
|
777
|
+
path,
|
|
778
|
+
schemaType: legacySchema.span,
|
|
779
|
+
selected,
|
|
780
|
+
value: child,
|
|
781
|
+
type: legacySchema.span
|
|
782
|
+
}));
|
|
783
|
+
}
|
|
784
|
+
return /* @__PURE__ */ jsx("span", { ...props.attributes, ref: spanRef, children });
|
|
785
|
+
}
|
|
786
|
+
const PLACEHOLDER_STYLE = {
|
|
787
|
+
position: "absolute",
|
|
788
|
+
userSelect: "none",
|
|
789
|
+
pointerEvents: "none",
|
|
790
|
+
left: 0,
|
|
791
|
+
right: 0
|
|
792
|
+
};
|
|
793
|
+
function RenderLeaf(props) {
|
|
794
|
+
const $ = c(12), editorActor = useContext(EditorActorContext), schema = useSelector(editorActor, _temp);
|
|
795
|
+
if (props.leaf._type !== schema.span.name)
|
|
796
|
+
return props.children;
|
|
797
|
+
let t0;
|
|
798
|
+
$[0] !== props ? (t0 = /* @__PURE__ */ jsx(RenderSpan, { ...props }), $[0] = props, $[1] = t0) : t0 = $[1];
|
|
799
|
+
let renderedSpan = t0;
|
|
800
|
+
if (props.renderPlaceholder && props.leaf.placeholder && props.text.text === "") {
|
|
801
|
+
let t1;
|
|
802
|
+
$[2] !== props.renderPlaceholder ? (t1 = props.renderPlaceholder(), $[2] = props.renderPlaceholder, $[3] = t1) : t1 = $[3];
|
|
803
|
+
let t2;
|
|
804
|
+
$[4] !== t1 ? (t2 = /* @__PURE__ */ jsx("span", { style: PLACEHOLDER_STYLE, contentEditable: !1, children: t1 }), $[4] = t1, $[5] = t2) : t2 = $[5];
|
|
805
|
+
let t3;
|
|
806
|
+
return $[6] !== renderedSpan || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
807
|
+
t2,
|
|
808
|
+
renderedSpan
|
|
809
|
+
] }), $[6] = renderedSpan, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
|
|
810
|
+
}
|
|
811
|
+
const rangeDecoration = props.leaf.rangeDecoration;
|
|
812
|
+
if (rangeDecoration) {
|
|
813
|
+
let t1;
|
|
814
|
+
$[9] !== rangeDecoration || $[10] !== renderedSpan ? (t1 = rangeDecoration.component({
|
|
815
|
+
children: renderedSpan
|
|
816
|
+
}), $[9] = rangeDecoration, $[10] = renderedSpan, $[11] = t1) : t1 = $[11], renderedSpan = t1;
|
|
817
|
+
}
|
|
818
|
+
return renderedSpan;
|
|
819
|
+
}
|
|
810
820
|
function _temp(s) {
|
|
811
821
|
return s.context.schema;
|
|
812
822
|
}
|
|
823
|
+
function RenderText(props) {
|
|
824
|
+
const $ = c(5);
|
|
825
|
+
let t0;
|
|
826
|
+
return $[0] !== props.attributes || $[1] !== props.children || $[2] !== props.text._key || $[3] !== props.text._type ? (t0 = /* @__PURE__ */ jsx("span", { ...props.attributes, "data-child-key": props.text._key, "data-child-name": props.text._type, "data-child-type": "span", children: props.children }), $[0] = props.attributes, $[1] = props.children, $[2] = props.text._key, $[3] = props.text._type, $[4] = t0) : t0 = $[4], t0;
|
|
827
|
+
}
|
|
813
828
|
const debug$1 = debugWithName("plugin:withHotKeys");
|
|
814
829
|
function createWithHotkeys(editorActor, portableTextEditor, hotkeysFromOptions) {
|
|
815
830
|
const reservedHotkeys = ["enter", "tab", "shift", "delete", "end"], activeHotkeys = hotkeysFromOptions ?? {};
|
|
@@ -1126,13 +1141,7 @@ function createDecorate(rangeDecorationActor) {
|
|
|
1126
1141
|
}) || Range.includes(decoratedRange, path));
|
|
1127
1142
|
};
|
|
1128
1143
|
}
|
|
1129
|
-
const debug = debugWithName("component:Editable"),
|
|
1130
|
-
position: "absolute",
|
|
1131
|
-
userSelect: "none",
|
|
1132
|
-
pointerEvents: "none",
|
|
1133
|
-
left: 0,
|
|
1134
|
-
right: 0
|
|
1135
|
-
}, PortableTextEditable = forwardRef(function(props, forwardedRef) {
|
|
1144
|
+
const debug = debugWithName("component:Editable"), PortableTextEditable = forwardRef(function(props, forwardedRef) {
|
|
1136
1145
|
const {
|
|
1137
1146
|
hotkeys,
|
|
1138
1147
|
onBlur,
|
|
@@ -1194,21 +1203,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
|
|
|
1194
1203
|
const withHotKeys = createWithHotkeys(editorActor, portableTextEditor, hotkeys);
|
|
1195
1204
|
return debug("Editable is in edit mode"), withHotKeys(slateEditor);
|
|
1196
1205
|
}, [editorActor, hotkeys, portableTextEditor, readOnly, slateEditor]);
|
|
1197
|
-
const renderElement = useCallback((eProps) => /* @__PURE__ */ jsx(RenderElement, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, spellCheck }), [spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = useCallback((
|
|
1198
|
-
if (lProps.leaf._type === "span") {
|
|
1199
|
-
let rendered = /* @__PURE__ */ jsx(Leaf, { ...lProps, editorActor, schemaTypes: portableTextEditor.schemaTypes, renderAnnotation, renderChild, renderDecorator, readOnly });
|
|
1200
|
-
if (renderPlaceholder && lProps.leaf.placeholder && lProps.text.text === "")
|
|
1201
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1202
|
-
/* @__PURE__ */ jsx("span", { style: PLACEHOLDER_STYLE, contentEditable: !1, children: renderPlaceholder() }),
|
|
1203
|
-
rendered
|
|
1204
|
-
] });
|
|
1205
|
-
const decoration = lProps.leaf.rangeDecoration;
|
|
1206
|
-
return decoration && (rendered = decoration.component({
|
|
1207
|
-
children: rendered
|
|
1208
|
-
})), rendered;
|
|
1209
|
-
}
|
|
1210
|
-
return lProps.children;
|
|
1211
|
-
}, [editorActor, portableTextEditor, readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder]), restoreSelectionFromProps = useCallback(() => {
|
|
1206
|
+
const renderElement = useCallback((eProps) => /* @__PURE__ */ jsx(RenderElement, { ...eProps, readOnly, renderBlock, renderChild, renderListItem, renderStyle, spellCheck }), [spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]), renderLeaf = useCallback((leafProps) => /* @__PURE__ */ jsx(RenderLeaf, { ...leafProps, readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder }), [readOnly, renderAnnotation, renderChild, renderDecorator, renderPlaceholder]), renderText = useCallback((props_0) => /* @__PURE__ */ jsx(RenderText, { ...props_0 }), []), restoreSelectionFromProps = useCallback(() => {
|
|
1212
1207
|
if (propsSelection) {
|
|
1213
1208
|
debug(`Selection from props ${JSON.stringify(propsSelection)}`);
|
|
1214
1209
|
const normalizedSelection = normalizeSelection(propsSelection, fromSlateValue(slateEditor.children, editorActor.getSnapshot().context.schema.block.name));
|
|
@@ -1339,7 +1334,8 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
|
|
|
1339
1334
|
},
|
|
1340
1335
|
blocks: result_1.insert,
|
|
1341
1336
|
options: {
|
|
1342
|
-
refreshKeys: !0
|
|
1337
|
+
refreshKeys: !0,
|
|
1338
|
+
validateFields: !0
|
|
1343
1339
|
}
|
|
1344
1340
|
}),
|
|
1345
1341
|
placement: "auto"
|
|
@@ -1719,6 +1715,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
|
|
|
1719
1715
|
renderPlaceholder: void 0,
|
|
1720
1716
|
renderElement,
|
|
1721
1717
|
renderLeaf,
|
|
1718
|
+
renderText,
|
|
1722
1719
|
scrollSelectionIntoView: scrollSelectionIntoViewToSlate
|
|
1723
1720
|
}
|
|
1724
1721
|
) : null;
|