edytor 1.0.0-rc.2 → 1.0.0

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/honey-pot-fix/make-honey-pot-fix.js

@@ -0,0 +1,333 @@
+import { bind, bindAll } from '../../bind-event-listener/index.js';
+import { maxZIndex } from '../util/max-z-index.js';
+import { popoverResetUserAgentStyles } from '../util/popover-reset-styles.js';
+import { supportsPopover } from '../util/supports-popover.js';
+import { honeyPotDataAttribute } from './honey-pot-data-attribute.js';
+const honeyPotSize = 2;
+const halfHoneyPotSize = honeyPotSize / 2;
+
+/**
+ * `clientX` and `clientY` can be in sub pixels (eg `2.332`)
+ * However, browser hitbox testing is commonly do to the closest pixel.
+ *
+ * → https://issues.chromium.org/issues/40940531
+ *
+ * To be sure that the honey pot will be over the `client` position,
+ * we `.floor()` `clientX` and`clientY` and then make it `2px` in size.
+ **/
+function floorToClosestPixel(point) {
+  return {
+    x: Math.floor(point.x),
+    y: Math.floor(point.y)
+  };
+}
+
+/**
+ * We want to make sure the honey pot sits around the users position.
+ * This seemed to be the most resilient while testing.
+ */
+function pullBackByHalfHoneyPotSize(point) {
+  return {
+    x: point.x - halfHoneyPotSize,
+    y: point.y - halfHoneyPotSize
+  };
+}
+
+/**
+ * Prevent the honey pot from changing the window size.
+ * This is super unlikely to occur, but just being safe.
+ */
+function preventGoingBackwardsOffScreen(point) {
+  return {
+    x: Math.max(point.x, 0),
+    y: Math.max(point.y, 0)
+  };
+}
+
+/**
+ * Prevent the honey pot from changing the window size.
+ * This is super unlikely to occur, but just being safe.
+ */
+function preventGoingForwardsOffScreen(point) {
+  return {
+    x: Math.min(point.x, window.innerWidth - honeyPotSize),
+    y: Math.min(point.y, window.innerHeight - honeyPotSize)
+  };
+}
+
+/**
+ * Create a `2x2` `DOMRect` around the `client` position
+ */
+function getHoneyPotRectFor({
+  client
+}) {
+  const point = preventGoingForwardsOffScreen(preventGoingBackwardsOffScreen(pullBackByHalfHoneyPotSize(floorToClosestPixel(client))));
+
+  // When debugging, it is helpful to
+  // make this element a bit bigger
+  return DOMRect.fromRect({
+    x: point.x,
+    y: point.y,
+    width: honeyPotSize,
+    height: honeyPotSize
+  });
+}
+function getRectStyles({
+  clientRect
+}) {
+  return {
+    left: `${clientRect.left}px`,
+    top: `${clientRect.top}px`,
+    width: `${clientRect.width}px`,
+    height: `${clientRect.height}px`
+  };
+}
+function isWithin({
+  client,
+  clientRect
+}) {
+  return (
+    // is within horizontal bounds
+    client.x >= clientRect.x && client.x <= clientRect.x + clientRect.width &&
+    // is within vertical bounds
+    client.y >= clientRect.y && client.y <= clientRect.y + clientRect.height
+  );
+}
+/**
+ * The honey pot fix is designed to get around a painful bug in all browsers.
+ *
+ * [Overview](https://www.youtube.com/watch?v=udE9qbFTeQg)
+ *
+ * **Background**
+ *
+ * When a drag starts, browsers incorrectly think that the users pointer is
+ * still depressed where the drag started. Any element that goes under this position
+ * will be entered into, causing `"mouseenter"` events and `":hover"` styles to be applied.
+ *
+ * _This is a violation of the spec_
+ *
+ * > "From the moment that the user agent is to initiate the drag-and-drop operation,
+ * > until the end 	of the drag-and-drop operation, device input events
+ * > (e.g. mouse and keyboard events) must be suppressed."
+ * >
+ * > - https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model
+ *
+ * _Some impacts_
+ *
+ * - `":hover"` styles being applied where they shouldn't (looks messy)
+ * - components such as tooltips responding to `"mouseenter"` can show during a drag,
+ *   and on an element the user isn't even over
+ *
+ * Bug: https://issues.chromium.org/issues/41129937
+ *
+ * **Honey pot fix**
+ *
+ * 1. Create an element where the browser thinks the depressed pointer is
+ *    to absorb the incorrect pointer events
+ * 2. Remove that element when it is no longer needed
+ */
+function mountHoneyPot({
+  initial
+}) {
+  const element = document.createElement('div');
+  element.setAttribute(honeyPotDataAttribute, 'true');
+
+  // Using popover="manual" to place the element in the browser's top layer.
+  // This ensures the honey pot is visually on top of everything else,
+  // including elements using z-index and other stacking contexts.
+  // "manual" means no light dismiss — we manage the lifecycle ourselves.
+  // Falls back to position:fixed + maxZIndex when the popover API is not available.
+  if (supportsPopover()) {
+    element.setAttribute('popover', 'manual');
+  }
+
+  // can shift during the drag thanks to Firefox
+  let clientRect = getHoneyPotRectFor({
+    client: initial
+  });
+  Object.assign(element.style, {
+    position: 'fixed',
+    ...(supportsPopover() ?
+    // needs to come first as it has 'inset: unset' which
+    // needs to be overridden by our top / left values
+    popoverResetUserAgentStyles : {
+      // Fallback: using maximum possible z-index so that this element
+      // will always be on top of other positioned content.
+      zIndex: maxZIndex
+    }),
+    // Setting a background color explicitly to avoid any inherited styles.
+    // Looks like this could be `opacity: 0`, but worried that _might_
+    // cause the element to be ignored on some platforms.
+    // When debugging, set backgroundColor to something like "red".
+    backgroundColor: 'transparent',
+    // Being explicit to avoid inheriting styles
+    padding: 0,
+    margin: 0,
+    boxSizing: 'border-box',
+    // We want this element to absorb pointer events,
+    // it's kind of the whole point 😉
+    pointerEvents: 'auto',
+    ...getRectStyles({
+      clientRect
+    })
+  });
+  document.body.appendChild(element);
+  if (supportsPopover()) {
+    element.showPopover();
+  }
+
+  /**
+   *  🦊 In firefox we can get `"pointermove"` events after the drag
+   * has started, which is a spec violation.
+   * The final `"pointermove"` will reveal where the "depressed" position
+   * is for our honey pot fix.
+   */
+  const unbindPointerMove = bind(window, {
+    type: 'pointermove',
+    listener(event) {
+      const client = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      clientRect = getHoneyPotRectFor({
+        client
+      });
+      Object.assign(element.style, getRectStyles({
+        clientRect
+      }));
+    },
+    // using capture so we are less likely to be impacted by event stopping
+    options: {
+      capture: true
+    }
+  });
+  return function finish({
+    current
+  }) {
+    // Don't need this any more
+    unbindPointerMove();
+
+    // If the user is hover the honey pot, we remove it
+    // so that the user can continue to interact with the page normally.
+    if (isWithin({
+      client: current,
+      clientRect
+    })) {
+      element.remove();
+      return;
+    }
+    function cleanup() {
+      unbindPostDragEvents();
+      element.remove();
+    }
+    const unbindPostDragEvents = bindAll(window, [{
+      type: 'pointerdown',
+      listener: cleanup
+    }, {
+      type: 'pointermove',
+      listener: cleanup
+    }, {
+      type: 'focusin',
+      listener: cleanup
+    }, {
+      type: 'focusout',
+      listener: cleanup
+    },
+    // a 'pointerdown' should happen before 'dragstart', but just being super safe
+    {
+      type: 'dragstart',
+      listener: cleanup
+    },
+    // if the user has dragged something out of the window
+    // and then is dragging something back into the window
+    // the first events we will see are "dragenter" (and then "dragover").
+    // So if we see any of these we need to clear the post drag fix.
+    {
+      type: 'dragenter',
+      listener: cleanup
+    }, {
+      type: 'dragover',
+      listener: cleanup
+    }
+
+    // Not adding a "wheel" event listener, as "wheel" by itself does not
+    // resolve the bug.
+    ], {
+      // Using `capture` so less likely to be impacted by other code stopping events
+      capture: true
+    });
+  };
+}
+export function makeHoneyPotFix() {
+  let latestPointerMove = null;
+  function bindEvents() {
+    // For sanity, only collecting this value from when events are first bound.
+    // This prevents the case where a super old "pointermove" could be used
+    // from a prior interaction.
+    latestPointerMove = null;
+    return bind(window, {
+      type: 'pointermove',
+      listener(event) {
+        latestPointerMove = {
+          x: event.clientX,
+          y: event.clientY
+        };
+      },
+      // listening for pointer move in capture phase
+      // so we are less likely to be impacted by events being stopped.
+      options: {
+        capture: true
+      }
+    });
+  }
+  function getOnPostDispatch() {
+    let finish = null;
+    return function onPostEvent({
+      eventName,
+      payload
+    }) {
+      // We are adding the honey pot `onDragStart` so we don't
+      // impact the creation of the native drag preview.
+      if (eventName === 'onDragStart') {
+        var _latestPointerMove;
+        const {
+          input
+        } = payload.location.initial;
+
+        // Sometimes there will be no latest "pointermove" (eg iOS).
+        // In which case, we use the start position of the drag.
+        const initial = (_latestPointerMove = latestPointerMove) !== null && _latestPointerMove !== void 0 ? _latestPointerMove : {
+          x: input.clientX,
+          y: input.clientY
+        };
+
+        // Don't need to defensively call `finish()` as `onDrop` from
+        // one interaction is guaranteed to be called before `onDragStart`
+        // of the next.
+        finish = mountHoneyPot({
+          initial
+        });
+      }
+      if (eventName === 'onDrop') {
+        var _finish;
+        const {
+          input
+        } = payload.location.current;
+        (_finish = finish) === null || _finish === void 0 ? void 0 : _finish({
+          current: {
+            x: input.clientX,
+            y: input.clientY
+          }
+        });
+        finish = null;
+        // this interaction is finished, we want to use
+        // the latest "pointermove" for each interaction
+        latestPointerMove = null;
+      }
+    };
+  }
+  return {
+    bindEvents,
+    getOnPostDispatch
+  };
+}

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/internal-types.d.ts

@@ -0,0 +1,350 @@
+export type CleanupFn = () => void;
+/**
+ * Drop effects allowed to be passed to `getDropEffect()`.
+ * Cannot use `"none"` as a `dropEffect` for drop targets as
+ * it will opt out of accepting a drop for all nested drop targets.
+ * Please use `canDrop()` to disable dropping for this drop target.
+ */
+export type DropTargetAllowedDropEffect = Exclude<DataTransfer['dropEffect'], 'none'>;
+/**
+ * Information about a drop target
+ */
+export type DropTargetRecord = {
+    /**
+     * The element the drop target is attached to
+     */
+    element: Element;
+    /**
+     * Data associated with the drop target
+     *
+     * (Collected by `getData()`)
+     */
+    data: Record<string | symbol, unknown>;
+    /**
+     * The drop effect for the drop target
+     *
+     * (Collected by `getDropEffect()`)
+     */
+    dropEffect: DropTargetAllowedDropEffect;
+    /**
+     * Whether or not the drop target is active due to _stickiness_
+     */
+    isActiveDueToStickiness: boolean;
+};
+export type Position = {
+    x: number;
+    y: number;
+};
+export type Serializable = {
+    [key: string]: number | string | Serializable | Serializable[];
+};
+export type Region = 'internal' | 'external';
+export type ElementDragPayload = {
+    element: HTMLElement;
+    dragHandle: Element | null;
+    data: Record<string, unknown>;
+};
+export type ElementDragType = {
+    type: 'element';
+    startedFrom: 'internal';
+    payload: ElementDragPayload;
+};
+/**
+ * A convenance type to provide auto complete for common
+ * media types. This type will accept any `string`.
+ *
+ * For more information on media types, see:
+ *
+ * - {@link https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/external/custom-media}
+ * - {@link https://en.wikipedia.org/wiki/Media_type}
+ */
+export type NativeMediaType = 'text/uri-list' | 'text/plain' | 'text/html' | 'Files' | (string & {});
+export type ExternalDragPayload = {
+    /**
+     * The media types that are being dragged during a drag.
+     *
+     * @example
+     *
+     * console.log(source.types);
+     * // → ["text/plain", "text/html"]
+     */
+    types: NativeMediaType[];
+    /**
+     * The entities that are being dragged.
+     * Usually you will not be using these directly, but
+     * our helper functions can leverage them to extract
+     * particular kinds of data (eg files) that are being dragged
+     */
+    items: DataTransferItem[];
+    /**
+     * returns the data for a given media type.
+     *
+     * - `getStringData(mediaType)` will return `null` if there is no data for that media type
+     * - `getStringData(mediaType)` will return the empty string (`""`) if the empty string (`""`)
+     *      was explicitly set as the data for a media type.
+     * - `getStringData(mediaType)` will return null if requesting files (ie `getStringData('Files')`).
+     *      To access files, use `source.items`, or better still, `getFiles({source})`
+     *
+     * Generally we recommend folks use our helpers to read native data rather than `getStringData(mediaType)`
+     *
+     * @example
+     *
+     * ```ts
+     * // Using getStringData()
+     * const text: string | null = source.getStringData("text/plain");
+     *
+     * // Using our text helper
+     * const text: string | null = getText({source});
+     * ```
+     * */
+    getStringData: (mediaType: string) => string | null;
+};
+export type ExternalDragType = {
+    type: 'external';
+    startedFrom: 'external';
+    payload: ExternalDragPayload;
+    getDropPayload: (event: DragEvent) => ExternalDragType['payload'];
+};
+export type TextSelectionDragPayload = {
+    /**
+     * The `Text` node that is the user started the drag from.
+     * Note: the `Text` node does not include all text being dragged.
+     * Use the `plain` or `html` properties to get the full selection
+     */
+    target: Text;
+    /** The plain text of the selection */
+    plain: string;
+    /** the HTML of the selection */
+    HTML: string;
+};
+export type TextSelectionDragType = {
+    type: 'text-selection';
+    startedFrom: 'internal';
+    payload: TextSelectionDragPayload;
+};
+export type AllDragTypes = ElementDragType | ExternalDragType | TextSelectionDragType;
+export type AdapterAPI<DragType extends AllDragTypes> = {
+    canStart: (event: DragEvent) => boolean;
+    start: (args: {
+        event: DragEvent;
+        dragType: DragType;
+    }) => void;
+};
+export type Input = {
+    altKey: boolean;
+    button: number;
+    buttons: number;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    clientX: number;
+    clientY: number;
+    pageX: number;
+    pageY: number;
+};
+export type DragLocation = {
+    /**
+     * A users input at a point in time
+     */
+    input: Input;
+    /**
+     * A _bubble_ ordered (innermost upwards) list of active drop targets
+     *
+     * @example
+     * [grandChildRecord, childRecord, parentRecord]
+     *
+     */
+    dropTargets: DropTargetRecord[];
+};
+export type DragLocationHistory = {
+    /**
+     * Where the drag operation started
+     */
+    initial: DragLocation;
+    /**
+     * Where the user currently is
+     */
+    current: DragLocation;
+    /**
+     * Where the user was previously.
+     * `previous` points to what `current` was in the last dispatched event
+     *
+     * `previous` is particularly useful for `onDropTargetChange`
+     * (and the derived `onDragEnter` and `onDragLeave`)
+     * as you can know what the delta of the change
+     *
+     * Exception: `onGenerateDragPreview` and `onDragStart` will have the
+     * same `current` and `previous` values. This is done so that the data
+     * received in `onDragStart` feels logical
+     * (`location.previous` should be `[]` in `onDragStart`)
+     */
+    previous: Pick<DragLocation, 'dropTargets'>;
+};
+/**
+ * The common data that is provided to all events
+ */
+export type BaseEventPayload<DragType extends AllDragTypes> = {
+    /**
+     * Location history for the drag operation
+     */
+    location: DragLocationHistory;
+    /**
+     * Data associated with the entity that is being dragged
+     */
+    source: DragType['payload'];
+};
+export type EventPayloadMap<DragType extends AllDragTypes> = {
+    /**
+     * Drag is about to start.
+     * Make changes you want to see in the drag preview
+     *
+     * _Drag previews are not generated for external drag sources (eg files)_
+     */
+    onGenerateDragPreview: BaseEventPayload<DragType> & {
+        /**
+         * Allows you to use the native `setDragImage` function if you want
+         * Although, we recommend using alternative techniques (see element adapter docs)
+         */
+        nativeSetDragImage: DataTransfer['setDragImage'] | null;
+    };
+    /**
+     * A drag operation has started. You can make changes to the DOM and those changes won't be reflected in your _drag preview_
+     */
+    onDragStart: BaseEventPayload<DragType>;
+    /**
+     * A throttled update of where the the user is currently dragging. Useful if you want to create a high fidelity experience such as drawing.
+     */
+    onDrag: BaseEventPayload<DragType>;
+    /**
+     * The `onDropTargetChange` event fires when the `dropTarget` hierarchy changes during a drag.
+     */
+    onDropTargetChange: BaseEventPayload<DragType>;
+    /**
+     * The `onDrop` event occurs when a user has finished a drag and drop operation.
+     * The `onDrop` event will fire when the drag operation finishes, regardless of how the drag operation finished
+     * (eg due to an explicit drop, the drag being canceled, recovering from an error and so on). On the web platform
+     * we cannot distinguish between dropping on no drop targets and an explicit cancel, so we do not publish any
+     * information about _how_ the drag ended, only that it ended.
+     *
+     * The `location.current` property will accurately contain the final drop targets.
+     */
+    onDrop: BaseEventPayload<DragType>;
+};
+export type AllEvents<DragType extends AllDragTypes> = {
+    [EventName in keyof EventPayloadMap<DragType>]: (args: EventPayloadMap<DragType>[EventName]) => void;
+};
+export type MonitorGetFeedbackArgs<DragType extends AllDragTypes> = {
+    /**
+     * The users `initial` drag location
+     */
+    initial: DragLocation;
+    /**
+     * The data associated with the entity being dragged
+     */
+    source: DragType['payload'];
+};
+export type MonitorArgs<DragType extends AllDragTypes> = Partial<AllEvents<DragType>> & {
+    canMonitor?: (args: MonitorGetFeedbackArgs<DragType>) => boolean;
+};
+export type DropTargetGetFeedbackArgs<DragType extends AllDragTypes> = {
+    /**
+     * The users _current_ input
+     */
+    input: Input;
+    /**
+     * The data associated with the entity being dragged
+     */
+    source: DragType['payload'];
+    /**
+     * This drop target's element
+     */
+    element: Element;
+};
+export type DropTargetLocalizedData = {
+    /**
+     * A convenance pointer to this drop targets values
+     */
+    self: DropTargetRecord;
+};
+export type DropTargetEventBasePayload<DragType extends AllDragTypes> = BaseEventPayload<DragType> & DropTargetLocalizedData;
+/**
+ * Mapping event names to the payloads for those events
+ */
+export type DropTargetEventPayloadMap<DragType extends AllDragTypes> = {
+    [EventName in keyof EventPayloadMap<DragType>]: EventPayloadMap<DragType>[EventName] & DropTargetLocalizedData;
+} & {
+    /**
+     * Derived from the `onDropTargetChange` event
+     * (`onDragEnter` is not it's own event that bubbles)
+     *
+     * `onDragEnter` is fired when _this_ drop target is entered into
+     * and not when any child drop targets change
+     */
+    onDragEnter: EventPayloadMap<DragType>['onDropTargetChange'] & DropTargetLocalizedData;
+    /**
+     * Derived from the `onDropTargetChange` event
+     * (`onDragLeave` is not it's own event that bubbles)
+     *
+     * `onDragLeave` is fired when _this_ drop target is exited from
+     * and not when any child drop targets change
+     */
+    onDragLeave: EventPayloadMap<DragType>['onDropTargetChange'] & DropTargetLocalizedData;
+};
+export type DropTargetArgs<DragType extends AllDragTypes> = {
+    /**
+     * The `element` that you want to attach drop target behaviour to.
+     * The `element` is the unique _key_ for a drop target
+     */
+    element: Element;
+    /**
+     * A function that returns `data` you want to attach to the drop target.
+     * `getData()` is called _repeatedly_ while the user is dragging over the drop target in order to power addons
+     */
+    getData?: (args: DropTargetGetFeedbackArgs<DragType>) => Record<string | symbol, unknown>;
+    /**
+     * Used to conditionally block dropping.
+     * By default a drop target can be dropped on.
+     *
+     * Return `false` if you want to block a drop.
+     *
+     * Blocking dropping on a drop target will not block
+     * dropping on child or parent drop targets.
+     * If you want child or parent drop targets to block dropping,
+     * then they will need to return `false` from their `canDrop()`
+     *
+     * `canDrop()` is called _repeatedly_ while a drop target
+     * is being dragged over to allow you to dynamically
+     * change your mind as to whether a drop target can be
+     * dropped on.
+     */
+    canDrop?: (args: DropTargetGetFeedbackArgs<DragType>) => boolean;
+    /**
+     * Optionally provide a _drop effect_ to be applied when
+     * this drop target is the innermost drop target being dragged over.
+     */
+    getDropEffect?: (args: DropTargetGetFeedbackArgs<DragType>) => DropTargetAllowedDropEffect;
+    /**
+     * Return `true` if you want your drop target to hold onto
+     * selection after the user is no longer dragging over this drop target.
+     *
+     * Stickiness defaults to `false`
+     *
+     * _For more details about the stickiness algorithm please refer to the docs_
+     */
+    getIsSticky?: (args: DropTargetGetFeedbackArgs<DragType>) => boolean;
+} & {
+    [EventName in keyof DropTargetEventPayloadMap<DragType>]?: (args: DropTargetEventPayloadMap<DragType>[EventName]) => void;
+};
+export type DropTargetAPI<DragType extends AllDragTypes> = {
+    dropTargetForConsumers: (args: DropTargetArgs<DragType>) => CleanupFn;
+    dispatchEvent: <EventName extends keyof EventPayloadMap<DragType>>(args: {
+        eventName: EventName;
+        payload: EventPayloadMap<DragType>[EventName];
+    }) => void;
+    getIsOver: (args: {
+        source: DragType['payload'];
+        target: EventTarget | null;
+        input: Input;
+        current: DropTargetRecord[];
+    }) => DropTargetRecord[];
+};