@portabletext/editor 3.3.2 → 3.3.4

package/src/behaviors/behavior.core.dnd.ts

@@ -1,356 +0,0 @@
-import {getCompoundClientRect} from '../internal-utils/compound-client-rect'
-import {getDragSelection} from '../selectors/drag-selection'
-import {getSelectedBlocks} from '../selectors/selector.get-selected-blocks'
-import {isOverlappingSelection} from '../selectors/selector.is-overlapping-selection'
-import {isSelectingEntireBlocks} from '../selectors/selector.is-selecting-entire-blocks'
-import {effect, forward, raise} from './behavior.types.action'
-import {defineBehavior} from './behavior.types.behavior'
-
-export const coreDndBehaviors = [
-  /**
-   * Core Behavior that:
-   * 1. Calculates and selects a "drag selection"
-   * 2. Constructs and sets a drag ghost element
-   * 3. Forwards the dragstart event
-   */
-  defineBehavior({
-    on: 'drag.dragstart',
-    guard: ({snapshot, dom, event}) => {
-      const dragSelection = getDragSelection({
-        snapshot,
-        eventSelection: event.position.selection,
-      })
-      const selectingEntireBlocks = isSelectingEntireBlocks({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragSelection,
-        },
-      })
-      const draggedDomNodes = {
-        blockNodes: dom.getBlockNodes({
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: dragSelection,
-          },
-        }),
-        childNodes: dom.getChildNodes({
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: dragSelection,
-          },
-        }),
-      }
-
-      return {
-        dragSelection,
-        draggedDomNodes,
-        selectingEntireBlocks,
-      }
-    },
-    actions: [
-      (
-        {dom, event},
-        {dragSelection, draggedDomNodes, selectingEntireBlocks},
-      ) => {
-        const dragGhost = document.createElement('div')
-
-        if (selectingEntireBlocks) {
-          // Clone the DOM Nodes so they won't be visually clipped by scroll-containers etc.
-          const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) =>
-            node.cloneNode(true),
-          )
-
-          for (const block of clonedBlockNodes) {
-            if (block instanceof HTMLElement) {
-              block.style.position = 'relative'
-            }
-            dragGhost.appendChild(block)
-          }
-
-          // A custom drag ghost element can be configured using this data attribute
-          const customGhost = dragGhost.querySelector(
-            '[data-pt-drag-ghost-element]',
-          )
-          if (customGhost) {
-            dragGhost.replaceChildren(customGhost)
-          }
-
-          // Setting the `data-dragged` attribute so the consumer can style the element while it’s dragged
-          dragGhost.setAttribute('data-dragged', '')
-
-          dragGhost.style.position = 'absolute'
-          dragGhost.style.left = '-99999px'
-          dragGhost.style.boxSizing = 'border-box'
-          document.body.appendChild(dragGhost)
-
-          if (customGhost) {
-            const customGhostRect = customGhost.getBoundingClientRect()
-            const x = event.originEvent.clientX - customGhostRect.left
-            const y = event.originEvent.clientY - customGhostRect.top
-            dragGhost.style.width = `${customGhostRect.width}px`
-            dragGhost.style.height = `${customGhostRect.height}px`
-
-            return [
-              raise({
-                type: 'select',
-                at: dragSelection,
-              }),
-              effect(() => {
-                dom.setDragGhost({
-                  event,
-                  ghost: {
-                    element: dragGhost,
-                    x,
-                    y,
-                  },
-                })
-              }),
-              forward(event),
-            ]
-          } else {
-            const blocksDomRect = getCompoundClientRect(
-              draggedDomNodes.blockNodes,
-            )
-            const x = event.originEvent.clientX - blocksDomRect.left
-            const y = event.originEvent.clientY - blocksDomRect.top
-            dragGhost.style.width = `${blocksDomRect.width}px`
-            dragGhost.style.height = `${blocksDomRect.height}px`
-
-            return [
-              raise({
-                type: 'select',
-                at: dragSelection,
-              }),
-              effect(() => {
-                dom.setDragGhost({
-                  event,
-                  ghost: {element: dragGhost, x, y},
-                })
-              }),
-              forward(event),
-            ]
-          }
-        } else {
-          const clonedChildNodes = draggedDomNodes.childNodes.map((node) =>
-            node.cloneNode(true),
-          )
-
-          for (const child of clonedChildNodes) {
-            dragGhost.appendChild(child)
-          }
-
-          dragGhost.style.position = 'absolute'
-          dragGhost.style.left = '-99999px'
-          dragGhost.style.boxSizing = 'border-box'
-          document.body.appendChild(dragGhost)
-
-          const childrenDomRect = getCompoundClientRect(
-            draggedDomNodes.childNodes,
-          )
-          const x = event.originEvent.clientX - childrenDomRect.left
-          const y = event.originEvent.clientY - childrenDomRect.top
-          dragGhost.style.width = `${childrenDomRect.width}px`
-          dragGhost.style.height = `${childrenDomRect.height}px`
-
-          return [
-            raise({
-              type: 'select',
-              at: dragSelection,
-            }),
-            effect(() => {
-              dom.setDragGhost({
-                event,
-                ghost: {element: dragGhost, x, y},
-              })
-            }),
-            forward(event),
-          ]
-        }
-      },
-    ],
-  }),
-
-  /**
-   * When dragging over the drag origin, we don't want to show the caret in the
-   * text.
-   */
-  defineBehavior({
-    on: 'drag.dragover',
-    guard: ({snapshot, event}) => {
-      const dragOrigin = event.dragOrigin
-      const draggingOverDragOrigin = dragOrigin
-        ? isOverlappingSelection(event.position.selection)({
-            ...snapshot,
-            context: {
-              ...snapshot.context,
-              selection: dragOrigin.selection,
-            },
-          })
-        : false
-
-      return draggingOverDragOrigin
-    },
-    actions: [],
-  }),
-
-  /**
-   * If the drop position overlaps the drag origin, then the event should be
-   * cancelled.
-   */
-  defineBehavior({
-    on: 'drag.drop',
-    guard: ({snapshot, event}) => {
-      const dragOrigin = event.dragOrigin
-      const dropPosition = event.position.selection
-      const droppingOnDragOrigin = dragOrigin
-        ? isOverlappingSelection(dropPosition)({
-            ...snapshot,
-            context: {
-              ...snapshot.context,
-              selection: dragOrigin.selection,
-            },
-          })
-        : false
-      return droppingOnDragOrigin
-    },
-    actions: [],
-  }),
-  /**
-   * If we drop and have access to a drag origin, then we can deserialize
-   * without creating a new selection.
-   */
-  defineBehavior({
-    on: 'drag.drop',
-    guard: ({event}) => event.dragOrigin !== undefined,
-    actions: [
-      ({event}) => [
-        raise({
-          type: 'deserialize',
-          originEvent: event,
-        }),
-      ],
-    ],
-  }),
-  /**
-   * Otherwise, we should to create a new selection.
-   */
-  defineBehavior({
-    on: 'drag.drop',
-    actions: [
-      ({event}) => [
-        raise({
-          type: 'select',
-          at: event.position.selection,
-        }),
-        raise({
-          type: 'deserialize',
-          originEvent: event,
-        }),
-      ],
-    ],
-  }),
-
-  /**
-   * Core Behavior that uses the drag origin to mimic a move operation during
-   * internal dragging.
-   */
-  defineBehavior({
-    on: 'deserialization.success',
-    guard: ({snapshot, event}) => {
-      if (
-        event.originEvent.type !== 'drag.drop' ||
-        event.originEvent.dragOrigin === undefined
-      ) {
-        return false
-      }
-
-      const dragOrigin = event.originEvent.dragOrigin
-      const dragSelection = getDragSelection({
-        eventSelection: dragOrigin.selection,
-        snapshot,
-      })
-      const dropPosition = event.originEvent.position.selection
-      const droppingOnDragOrigin = dragOrigin
-        ? isOverlappingSelection(dropPosition)({
-            ...snapshot,
-            context: {
-              ...snapshot.context,
-              selection: dragSelection,
-            },
-          })
-        : false
-
-      const draggingEntireBlocks = isSelectingEntireBlocks({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragSelection,
-        },
-      })
-
-      const draggedBlocks = getSelectedBlocks({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: dragSelection,
-        },
-      })
-
-      if (!droppingOnDragOrigin) {
-        return {
-          dropPosition,
-          draggingEntireBlocks,
-          draggedBlocks,
-          dragOrigin,
-          originEvent: event.originEvent,
-        }
-      }
-
-      return false
-    },
-    actions: [
-      (
-        {event},
-        {
-          draggingEntireBlocks,
-          draggedBlocks,
-          dragOrigin,
-          dropPosition,
-          originEvent,
-        },
-      ) => [
-        raise({
-          type: 'select',
-          at: dropPosition,
-        }),
-        ...(draggingEntireBlocks
-          ? draggedBlocks.map((block) =>
-              raise({
-                type: 'delete.block',
-                at: block.path,
-              }),
-            )
-          : [
-              raise({
-                type: 'delete',
-                at: dragOrigin.selection,
-              }),
-            ]),
-        raise({
-          type: 'insert.blocks',
-          blocks: event.data,
-          placement: draggingEntireBlocks
-            ? originEvent.position.block === 'start'
-              ? 'before'
-              : originEvent.position.block === 'end'
-                ? 'after'
-                : 'auto'
-            : 'auto',
-        }),
-      ],
-    ],
-  }),
-]

package/src/behaviors/behavior.core.insert-break.ts

@@ -1,266 +0,0 @@
-import {getFirstBlock} from '../selectors/selector.get-first-block'
-import {getFocusInlineObject} from '../selectors/selector.get-focus-inline-object'
-import {getFocusSpan} from '../selectors/selector.get-focus-span'
-import {getFocusTextBlock} from '../selectors/selector.get-focus-text-block'
-import {getLastBlock} from '../selectors/selector.get-last-block'
-import {getSelectedBlocks} from '../selectors/selector.get-selected-blocks'
-import {getSelectionEndBlock} from '../selectors/selector.get-selection-end-block'
-import {getSelectionStartBlock} from '../selectors/selector.get-selection-start-block'
-import {isAtTheEndOfBlock} from '../selectors/selector.is-at-the-end-of-block'
-import {isAtTheStartOfBlock} from '../selectors/selector.is-at-the-start-of-block'
-import {isSelectionCollapsed} from '../selectors/selector.is-selection-collapsed'
-import {isSelectionExpanded} from '../selectors/selector.is-selection-expanded'
-import {getBlockEndPoint} from '../utils/util.get-block-end-point'
-import {getBlockStartPoint} from '../utils/util.get-block-start-point'
-import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
-import {getSelectionStartPoint} from '../utils/util.get-selection-start-point'
-import {isEqualSelectionPoints} from '../utils/util.is-equal-selection-points'
-import {raise} from './behavior.types.action'
-import {defineBehavior} from './behavior.types.behavior'
-
-const breakingAtTheEndOfTextBlock = defineBehavior({
-  on: 'insert.break',
-  guard: ({snapshot}) => {
-    const focusTextBlock = getFocusTextBlock(snapshot)
-    const selectionCollapsed = isSelectionCollapsed(snapshot)
-
-    if (!snapshot.context.selection || !focusTextBlock || !selectionCollapsed) {
-      return false
-    }
-
-    const atTheEndOfBlock = isAtTheEndOfBlock(focusTextBlock)(snapshot)
-
-    const focusListItem = focusTextBlock.node.listItem
-    const focusLevel = focusTextBlock.node.level
-
-    if (atTheEndOfBlock) {
-      return {focusListItem, focusLevel}
-    }
-
-    return false
-  },
-  actions: [
-    ({snapshot}, {focusListItem, focusLevel}) => [
-      raise({
-        type: 'insert.block',
-        block: {
-          _type: snapshot.context.schema.block.name,
-          children: [
-            {
-              _type: snapshot.context.schema.span.name,
-              text: '',
-              marks: [],
-            },
-          ],
-          markDefs: [],
-          listItem: focusListItem,
-          level: focusLevel,
-          style: snapshot.context.schema.styles[0]?.name,
-        },
-        placement: 'after',
-      }),
-    ],
-  ],
-})
-
-const breakingAtTheStartOfTextBlock = defineBehavior({
-  on: 'insert.break',
-  guard: ({snapshot}) => {
-    const focusTextBlock = getFocusTextBlock(snapshot)
-    const selectionCollapsed = isSelectionCollapsed(snapshot)
-
-    if (!snapshot.context.selection || !focusTextBlock || !selectionCollapsed) {
-      return false
-    }
-
-    const focusSpan = getFocusSpan(snapshot)
-
-    const focusDecorators = focusSpan?.node.marks?.filter(
-      (mark) =>
-        snapshot.context.schema.decorators.some(
-          (decorator) => decorator.name === mark,
-        ) ?? [],
-    )
-    const focusAnnotations =
-      focusSpan?.node.marks?.filter(
-        (mark) =>
-          !snapshot.context.schema.decorators.some(
-            (decorator) => decorator.name === mark,
-          ),
-      ) ?? []
-    const focusListItem = focusTextBlock.node.listItem
-    const focusLevel = focusTextBlock.node.level
-
-    const atTheStartOfBlock = isAtTheStartOfBlock(focusTextBlock)(snapshot)
-
-    if (atTheStartOfBlock) {
-      return {focusAnnotations, focusDecorators, focusListItem, focusLevel}
-    }
-
-    return false
-  },
-  actions: [
-    (
-      {snapshot},
-      {focusAnnotations, focusDecorators, focusListItem, focusLevel},
-    ) => [
-      raise({
-        type: 'insert.block',
-        block: {
-          _type: snapshot.context.schema.block.name,
-          children: [
-            {
-              _type: snapshot.context.schema.span.name,
-              marks: focusAnnotations.length === 0 ? focusDecorators : [],
-              text: '',
-            },
-          ],
-          listItem: focusListItem,
-          level: focusLevel,
-          style: snapshot.context.schema.styles[0]?.name,
-        },
-        placement: 'before',
-        select: 'none',
-      }),
-    ],
-  ],
-})
-
-const breakingEntireDocument = defineBehavior({
-  on: 'insert.break',
-  guard: ({snapshot}) => {
-    if (!snapshot.context.selection) {
-      return false
-    }
-
-    if (!isSelectionExpanded(snapshot)) {
-      return false
-    }
-
-    const firstBlock = getFirstBlock(snapshot)
-    const lastBlock = getLastBlock(snapshot)
-
-    if (!firstBlock || !lastBlock) {
-      return false
-    }
-
-    const firstBlockStartPoint = getBlockStartPoint({
-      context: snapshot.context,
-      block: firstBlock,
-    })
-    const selectionStartPoint = getSelectionStartPoint(
-      snapshot.context.selection,
-    )
-    const lastBlockEndPoint = getBlockEndPoint({
-      context: snapshot.context,
-      block: lastBlock,
-    })
-    const selectionEndPoint = getSelectionEndPoint(snapshot.context.selection)
-
-    if (
-      isEqualSelectionPoints(firstBlockStartPoint, selectionStartPoint) &&
-      isEqualSelectionPoints(lastBlockEndPoint, selectionEndPoint)
-    ) {
-      return {selection: snapshot.context.selection}
-    }
-
-    return false
-  },
-  actions: [
-    (_, {selection}) => [
-      raise({
-        type: 'delete',
-        at: selection,
-      }),
-    ],
-  ],
-})
-
-const breakingEntireBlocks = defineBehavior({
-  on: 'insert.break',
-  guard: ({snapshot}) => {
-    if (!snapshot.context.selection) {
-      return false
-    }
-
-    if (!isSelectionExpanded(snapshot)) {
-      return false
-    }
-
-    const selectedBlocks = getSelectedBlocks(snapshot)
-    const selectionStartBlock = getSelectionStartBlock(snapshot)
-    const selectionEndBlock = getSelectionEndBlock(snapshot)
-
-    if (!selectionStartBlock || !selectionEndBlock) {
-      return false
-    }
-
-    const startBlockStartPoint = getBlockStartPoint({
-      context: snapshot.context,
-      block: selectionStartBlock,
-    })
-    const selectionStartPoint = getSelectionStartPoint(
-      snapshot.context.selection,
-    )
-    const endBlockEndPoint = getBlockEndPoint({
-      context: snapshot.context,
-      block: selectionEndBlock,
-    })
-    const selectionEndPoint = getSelectionEndPoint(snapshot.context.selection)
-
-    if (
-      isEqualSelectionPoints(selectionStartPoint, startBlockStartPoint) &&
-      isEqualSelectionPoints(selectionEndPoint, endBlockEndPoint)
-    ) {
-      return {selectedBlocks}
-    }
-
-    return false
-  },
-  actions: [
-    ({snapshot}, {selectedBlocks}) => [
-      raise({
-        type: 'insert.block',
-        block: {
-          _type: snapshot.context.schema.block.name,
-          children: [
-            {
-              _type: snapshot.context.schema.span.name,
-              text: '',
-              marks: [],
-            },
-          ],
-        },
-        placement: 'before',
-        select: 'start',
-      }),
-      ...selectedBlocks.map((block) =>
-        raise({
-          type: 'delete.block',
-          at: block.path,
-        }),
-      ),
-    ],
-  ],
-})
-
-const breakingInlineObject = defineBehavior({
-  on: 'insert.break',
-  guard: ({snapshot}) => {
-    const selectionCollapsed = isSelectionCollapsed(snapshot)
-    const focusInlineObject = getFocusInlineObject(snapshot)
-
-    return selectionCollapsed && focusInlineObject
-  },
-  actions: [
-    () => [raise({type: 'move.forward', distance: 1}), raise({type: 'split'})],
-  ],
-})
-
-export const coreInsertBreakBehaviors = {
-  breakingAtTheEndOfTextBlock,
-  breakingAtTheStartOfTextBlock,
-  breakingEntireDocument,
-  breakingEntireBlocks,
-  breakingInlineObject,
-}

package/src/behaviors/behavior.core.insert.ts

@@ -1,52 +0,0 @@
-import {getActiveAnnotationsMarks} from '../selectors/selector.get-active-annotation-marks'
-import {getActiveDecorators} from '../selectors/selector.get-active-decorators'
-import {getFocusSpan} from '../selectors/selector.get-focus-span'
-import {getMarkState} from '../selectors/selector.get-mark-state'
-import {raise} from './behavior.types.action'
-import {defineBehavior} from './behavior.types.behavior'
-
-export const coreInsertBehaviors = [
-  defineBehavior({
-    on: 'insert.text',
-    guard: ({snapshot}) => {
-      const focusSpan = getFocusSpan(snapshot)
-
-      if (!focusSpan) {
-        return false
-      }
-
-      const markState = getMarkState(snapshot)
-      const activeDecorators = getActiveDecorators(snapshot)
-      const activeAnnotations = getActiveAnnotationsMarks(snapshot)
-
-      if (markState && markState.state === 'unchanged') {
-        const markStateDecorators = (markState.marks ?? []).filter((mark) =>
-          snapshot.context.schema.decorators
-            .map((decorator) => decorator.name)
-            .includes(mark),
-        )
-
-        if (
-          markStateDecorators.length === activeDecorators.length &&
-          markStateDecorators.every((mark) => activeDecorators.includes(mark))
-        ) {
-          return false
-        }
-      }
-
-      return {activeDecorators, activeAnnotations}
-    },
-    actions: [
-      ({snapshot, event}, {activeDecorators, activeAnnotations}) => [
-        raise({
-          type: 'insert.child',
-          child: {
-            _type: snapshot.context.schema.span.name,
-            text: event.text,
-            marks: [...activeDecorators, ...activeAnnotations],
-          },
-        }),
-      ],
-    ],
-  }),
-]