@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.
Files changed (41) hide show
  1. package/lib/_chunks-cjs/editor-provider.cjs +22 -11
  2. package/lib/_chunks-cjs/editor-provider.cjs.map +1 -1
  3. package/lib/_chunks-cjs/util.merge-text-blocks.cjs +2 -1
  4. package/lib/_chunks-cjs/util.merge-text-blocks.cjs.map +1 -1
  5. package/lib/_chunks-cjs/util.slice-blocks.cjs +26 -8
  6. package/lib/_chunks-cjs/util.slice-blocks.cjs.map +1 -1
  7. package/lib/_chunks-es/editor-provider.js +22 -11
  8. package/lib/_chunks-es/editor-provider.js.map +1 -1
  9. package/lib/_chunks-es/util.merge-text-blocks.js +2 -1
  10. package/lib/_chunks-es/util.merge-text-blocks.js.map +1 -1
  11. package/lib/_chunks-es/util.slice-blocks.js +26 -8
  12. package/lib/_chunks-es/util.slice-blocks.js.map +1 -1
  13. package/lib/index.cjs +155 -158
  14. package/lib/index.cjs.map +1 -1
  15. package/lib/index.js +160 -163
  16. package/lib/index.js.map +1 -1
  17. package/package.json +6 -6
  18. package/src/behaviors/behavior.abstract.split.ts +2 -2
  19. package/src/converters/converter.portable-text.ts +1 -0
  20. package/src/converters/converter.text-html.ts +1 -0
  21. package/src/converters/converter.text-plain.ts +1 -0
  22. package/src/editor/Editable.tsx +20 -48
  23. package/src/editor/__tests__/PortableTextEditor.test.tsx +3 -3
  24. package/src/editor/__tests__/RangeDecorations.test.tsx +2 -2
  25. package/src/editor/components/render-block-object.tsx +0 -1
  26. package/src/editor/components/render-element.tsx +3 -3
  27. package/src/editor/components/render-inline-object.tsx +9 -12
  28. package/src/editor/components/render-leaf.tsx +64 -0
  29. package/src/editor/components/render-span.tsx +260 -0
  30. package/src/editor/components/render-text-block.tsx +0 -1
  31. package/src/editor/components/render-text.tsx +18 -0
  32. package/src/internal-utils/parse-blocks.test.ts +20 -20
  33. package/src/internal-utils/parse-blocks.ts +57 -20
  34. package/src/operations/behavior.operation.annotation.add.ts +1 -1
  35. package/src/operations/behavior.operation.block.set.ts +1 -1
  36. package/src/operations/behavior.operation.block.unset.ts +2 -2
  37. package/src/operations/behavior.operation.insert-inline-object.ts +1 -1
  38. package/src/operations/behavior.operation.insert.block.ts +1 -1
  39. package/src/selectors/selector.get-trimmed-selection.test.ts +1 -0
  40. package/src/utils/util.merge-text-blocks.ts +1 -1
  41. 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, useRef, useState, useMemo, startTransition, useCallback, useContext, forwardRef, useImperativeHandle } from "react";
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, debugWithName, usePortableTextEditor, PortableTextEditor, createEditorPriority, corePriority, EditorActorContext, getPointBlock, isHotkey, moveRangeByOperation, isEqualToEmptyEditor, fromSlateValue, KEY_TO_VALUE_ELEMENT, getEditorSnapshot } from "./_chunks-es/editor-provider.js";
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, Fragment, jsxs } from "react/jsx-runtime";
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, Text, Range, Element as Element$1, Path, Transforms } from "slate";
10
- import { useSelected, useSlateStatic, useSlate, ReactEditor, Editable } from "slate-react";
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
- ] }, props.element._key);
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", { draggable: !props.readOnly, className: "pt-inline-object", "data-testid": "pt-inline-object", ref: inlineObjectRef, style: {
521
+ /* @__PURE__ */ jsx("span", { ref: inlineObjectRef, style: {
646
522
  display: "inline-block"
647
- }, "data-child-key": props.inlineObject._key, "data-child-name": props.inlineObject._type, "data-child-type": "object", children: props.renderChild && block && legacySchemaType ? props.renderChild({
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 }) }, props.element._key)
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
- ] }, props.element._key);
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"), PLACEHOLDER_STYLE = {
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((lProps) => {
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;