edytor 1.0.0-rc.2 → 1.0.0

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/adapter/element-adapter.js

@@ -0,0 +1,306 @@
+import { bind } from '../../bind-event-listener/index.js';
+import { getElementFromPointWithoutHoneypot } from '../honey-pot-fix/get-element-from-point-without-honey-pot.js';
+import { makeHoneyPotFix } from '../honey-pot-fix/make-honey-pot-fix.js';
+import { makeAdapter } from '../make-adapter/make-adapter.js';
+import { combine } from '../public-utils/combine.js';
+import { once } from '../public-utils/once.js';
+import { addAttribute } from '../util/add-attribute.js';
+import { androidFallbackText, isAndroid } from '../util/android.js';
+import { getInput } from '../util/get-input.js';
+import { textMediaType } from '../util/media-types/text-media-type.js';
+import { URLMediaType } from '../util/media-types/url-media-type.js';
+import { elementAdapterNativeDataKey } from './element-adapter-native-data-key.js';
+
+// Payload for the draggable being dragged
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports
+
+const draggableRegistry = new WeakMap();
+function addToRegistry(args) {
+  draggableRegistry.set(args.element, args);
+  return function cleanup() {
+    draggableRegistry.delete(args.element);
+  };
+}
+const honeyPotFix = makeHoneyPotFix();
+const adapter = makeAdapter({
+  typeKey: 'element',
+  defaultDropEffect: 'move',
+  mount(api) {
+    /**  Binding event listeners the `document` rather than `window` so that
+     * this adapter always gets preference over the text adapter.
+     * `document` is the first `EventTarget` under `window`
+     * https://twitter.com/alexandereardon/status/1604658588311465985
+     */
+    return combine(honeyPotFix.bindEvents(), bind(document, {
+      type: 'dragstart',
+      listener(event) {
+        var _entry$dragHandle, _entry$getInitialData, _entry$getInitialData2, _entry$dragHandle2, _entry$getInitialData3, _entry$getInitialData4;
+        if (!api.canStart(event)) {
+          return;
+        }
+
+        // If the "dragstart" event is cancelled, then a drag won't start
+        // There will be no further drag operation events (eg no "dragend" event)
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        // Technically `dataTransfer` can be `null` according to the types
+        // But that behaviour does not seem to appear in the spec.
+        // If there is not `dataTransfer`, we can assume something is wrong and not
+        // start a drag
+        if (!event.dataTransfer) {
+          // Including this code on "test" and "development" environments:
+          // - Browser tests commonly run against "development" builds
+          // - Unit tests commonly run in "test"
+          if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn(`
+              It appears as though you have are not testing DragEvents correctly.
+
+              - If you are unit testing, ensure you have polyfilled DragEvent.
+              - If you are browser testing, ensure you are dispatching drag events correctly.
+
+              Please see our testing guides for more information:
+              https://atlassian.design/components/pragmatic-drag-and-drop/core-package/testing
+            `.replace(/ {2}/g, ''));
+          }
+          return;
+        }
+
+        // the closest parent that is a draggable element will be marked as
+        // the `event.target` for the event
+        const target = event.target;
+
+        // this source is only for elements
+        // Note: only HTMLElements can have the "draggable" attribute
+        if (!(target instanceof HTMLElement)) {
+          return;
+        }
+
+        // see if the thing being dragged is owned by us
+        const entry = draggableRegistry.get(target);
+
+        // no matching element found
+        // → dragging an element with `draggable="true"` that is not controlled by us
+        if (!entry) {
+          return;
+        }
+
+        /**
+         * A text selection drag _can_ have the `draggable` element be
+         * the `event.target` if the user is dragging the text selection
+         * from the `draggable`.
+         *
+         * To know if the `draggable` is being dragged, we look at whether any
+         * `"text/plain"` data is being dragged. If it is, then a text selection
+         * drag is occurring.
+         *
+         * This behaviour has been validated on:
+         *
+         * - Chrome@128 on Android@14
+         * - Chrome@128 on iOS@17.6.1
+         * - Chrome@128 on Windows@11
+         * - Chrome@128 on MacOS@14.6.1
+         * - Firefox@129 on Windows@11 (not possible for user to select text in a draggable)
+         * - Firefox@129 on MacOS@14.6.1 (not possible for user to select text in a draggable)
+         *
+         * Note: Could usually just use: `event.dataTransfer.types.includes(textMediaType)`
+         * but unfortunately ProseMirror is always setting `""` as the dragged text
+         *
+         * Note: Unfortunately editor is (heavily) leaning on the current functionality today
+         * and unwinding it will be a decent amount of effort. So for now, a text selection
+         * where the `event.target` is a `draggable` element will still trigger the
+         * element adapter.
+         *
+         * // Future state:
+         * if(event.dataTransfer.getData(textMediaType)) {
+         * 	return;
+         * }
+         *
+         */
+
+        const input = getInput(event);
+        const feedback = {
+          element: entry.element,
+          dragHandle: (_entry$dragHandle = entry.dragHandle) !== null && _entry$dragHandle !== void 0 ? _entry$dragHandle : null,
+          input
+        };
+
+        // Check: does the draggable want to allow dragging?
+        if (entry.canDrag && !entry.canDrag(feedback)) {
+          // cancel drag operation if we cannot drag
+          event.preventDefault();
+          return;
+        }
+
+        // Check: is there a drag handle and is the user using it?
+        if (entry.dragHandle) {
+          // technically don't need this util, but just being
+          // consistent with how we look up what is under the users
+          // cursor.
+          const over = getElementFromPointWithoutHoneypot({
+            x: input.clientX,
+            y: input.clientY
+          });
+
+          // if we are not dragging from the drag handle (or something inside the drag handle)
+          // then we will cancel the active drag
+          if (!entry.dragHandle.contains(over)) {
+            event.preventDefault();
+            return;
+          }
+        }
+
+        /**
+         *  **Goal**
+         *  Pass information to other applications
+         *
+         * **Approach**
+         *  Put data into the native data store
+         *
+         *  **What about the native adapter?**
+         *  When the element adapter puts native data into the native data store
+         *  the native adapter is not triggered in the current window,
+         *  but a native adapter in an external window _can_ be triggered
+         *
+         *  **Why bake this into core?**
+         *  This functionality could be pulled out and exposed inside of
+         *  `onGenerateDragPreview`. But decided to make it a part of the
+         *  base API as it felt like a common enough use case and ended
+         *  up being a similar amount of code to include this function as
+         *  it was to expose the hook for it
+         */
+        const nativeData = (_entry$getInitialData = (_entry$getInitialData2 = entry.getInitialDataForExternal) === null || _entry$getInitialData2 === void 0 ? void 0 : _entry$getInitialData2.call(entry, feedback)) !== null && _entry$getInitialData !== void 0 ? _entry$getInitialData : null;
+        if (nativeData) {
+          for (const [key, data] of Object.entries(nativeData)) {
+            event.dataTransfer.setData(key, data !== null && data !== void 0 ? data : '');
+          }
+        }
+
+        /**
+         *  📱 For Android devices, a drag operation will not start unless
+         * "text/plain" or "text/uri-list" data exists in the native data store
+         * https://twitter.com/alexandereardon/status/1732189803754713424
+         *
+         * Tested on:
+         * Device: Google Pixel 5
+         * Android version: 14 (November 5, 2023)
+         * Chrome version: 120.0
+         */
+        if (isAndroid() && !event.dataTransfer.types.includes(textMediaType) && !event.dataTransfer.types.includes(URLMediaType)) {
+          event.dataTransfer.setData(textMediaType, androidFallbackText);
+        }
+
+        /**
+         * 1. Must set any media type for `iOS15` to work
+         * 2. We are also doing adding data so that the native adapter
+         * can know that the element adapter has handled this drag
+         *
+         * We used to wrap this `setData()` in a `try/catch` for Firefox,
+         * but it looks like that was not needed.
+         *
+         * Tested using: https://codesandbox.io/s/checking-firefox-throw-behaviour-on-dragstart-qt8h4f
+         *
+         * - ✅ Firefox@70.0 (Oct 2019) on macOS Sonoma
+         * - ✅ Firefox@70.0 (Oct 2019) on macOS Big Sur
+         * - ✅ Firefox@70.0 (Oct 2019) on Windows 10
+         *
+         * // just checking a few more combinations to be super safe
+         *
+         * - ✅ Chrome@78 (Oct 2019) on macOS Big Sur
+         * - ✅ Chrome@78 (Oct 2019) on Windows 10
+         * - ✅ Safari@14.1 on macOS Big Sur
+         */
+        event.dataTransfer.setData(elementAdapterNativeDataKey, '');
+        const payload = {
+          element: entry.element,
+          dragHandle: (_entry$dragHandle2 = entry.dragHandle) !== null && _entry$dragHandle2 !== void 0 ? _entry$dragHandle2 : null,
+          data: (_entry$getInitialData3 = (_entry$getInitialData4 = entry.getInitialData) === null || _entry$getInitialData4 === void 0 ? void 0 : _entry$getInitialData4.call(entry, feedback)) !== null && _entry$getInitialData3 !== void 0 ? _entry$getInitialData3 : {}
+        };
+        const dragType = {
+          type: 'element',
+          payload,
+          startedFrom: 'internal'
+        };
+        api.start({
+          event,
+          dragType
+        });
+      }
+    }));
+  },
+  dispatchEventToSource: ({
+    eventName,
+    payload
+  }) => {
+    var _draggableRegistry$ge, _draggableRegistry$ge2;
+    // During a drag operation, a draggable can be:
+    // - remounted with different functions
+    // - removed completely
+    // So we need to get the latest entry from the registry in order
+    // to call the latest event functions
+
+    (_draggableRegistry$ge = draggableRegistry.get(payload.source.element)) === null || _draggableRegistry$ge === void 0 ? void 0 : (_draggableRegistry$ge2 = _draggableRegistry$ge[eventName]) === null || _draggableRegistry$ge2 === void 0 ? void 0 : _draggableRegistry$ge2.call(_draggableRegistry$ge,
+    // I cannot seem to get the types right here.
+    // TS doesn't seem to like that one event can need `nativeSetDragImage`
+    // @ts-expect-error
+    payload);
+  },
+  onPostDispatch: honeyPotFix.getOnPostDispatch()
+});
+export const dropTargetForElements = adapter.dropTarget;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export const monitorForElements = adapter.monitor;
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function draggable(args) {
+  // Guardrail: warn if the drag handle is not contained in draggable element
+  if (process.env.NODE_ENV !== 'production') {
+    if (args.dragHandle && !args.element.contains(args.dragHandle)) {
+      // eslint-disable-next-line no-console
+      console.warn('Drag handle element must be contained in draggable element', {
+        element: args.element,
+        dragHandle: args.dragHandle
+      });
+    }
+  }
+  // Guardrail: warn if the draggable element is already registered
+  if (process.env.NODE_ENV !== 'production') {
+    const existing = draggableRegistry.get(args.element);
+    if (existing) {
+      // eslint-disable-next-line no-console
+      console.warn('You have already registered a `draggable` on the same element', {
+        existing,
+        proposed: args
+      });
+    }
+  }
+  const cleanup = combine(
+  // making the draggable register the adapter rather than drop targets
+  // this is because you *must* have a draggable element to start a drag
+  // but you _might_ not have any drop targets immediately
+  // (You might create drop targets async)
+  adapter.registerUsage(), addToRegistry(args), addAttribute(args.element, {
+    attribute: 'draggable',
+    value: 'true'
+  }));
+
+  // Wrapping in `once` to prevent unexpected side effects if consumers call
+  // the clean up function multiple times.
+  return once(cleanup);
+}
+
+/** Common event payload for all events */
+
+/** A map containing payloads for all events */
+
+/** Common event payload for all drop target events */
+
+/** A map containing payloads for all events on drop targets */
+
+/** Arguments given to all feedback functions (eg `canDrag()`) on for a `draggable()` */
+
+/** Arguments given to all feedback functions (eg `canDrop()`) on a `dropTargetForElements()` */
+
+/** Arguments given to all monitor feedback functions (eg `canMonitor()`) for a `monitorForElements` */

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/entry-point/element/adapter.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @deprecated Use `import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter'` instead.
+ */
+export { draggable, dropTargetForElements, monitorForElements, type ElementEventBasePayload, type ElementEventPayloadMap, type ElementDropTargetEventBasePayload, type ElementDropTargetEventPayloadMap, type ElementGetFeedbackArgs, type ElementDropTargetGetFeedbackArgs, type ElementMonitorGetFeedbackArgs, } from '../../adapter/element-adapter.js';
+/**
+ * @deprecated Use `import { ElementEventBasePayload, ElementEventPayloadMap, ElementDropTargetEventBasePayload, ElementDropTargetEventPayloadMap, ElementGetFeedbackArgs, ElementDropTargetGetFeedbackArgs, ElementMonitorGetFeedbackArgs, ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter'` instead.
+ */
+export type { ElementDragPayload } from '../../internal-types.js';

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/entry-point/element/adapter.js

@@ -0,0 +1,10 @@
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @deprecated Use `import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter'` instead.
+ */
+
+export { draggable, dropTargetForElements, monitorForElements } from '../../adapter/element-adapter.js';
+
+/**
+ * @deprecated Use `import { ElementEventBasePayload, ElementEventPayloadMap, ElementDropTargetEventBasePayload, ElementDropTargetEventPayloadMap, ElementGetFeedbackArgs, ElementDropTargetGetFeedbackArgs, ElementMonitorGetFeedbackArgs, ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter'` instead.
+ */

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/entry-point/element/set-custom-native-drag-preview.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use `import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview'` instead.
+ */
+export { setCustomNativeDragPreview } from '../../public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js';

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/entry-point/element/set-custom-native-drag-preview.js

@@ -0,0 +1,6 @@
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @deprecated Use `import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview'` instead.
+ */
+
+export { setCustomNativeDragPreview } from '../../public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js';

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

@@ -0,0 +1 @@
+export type { DropTargetAllowedDropEffect, DropTargetRecord, Position, Input, DragLocation, DragLocationHistory, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, ElementDragType, TextSelectionDragType, ExternalDragType, } from '../internal-types.js';

package/dist/dnd/vendor/pragmatic/pragmatic-drag-and-drop/honey-pot-fix/get-element-from-point-without-honey-pot.js

@@ -0,0 +1,12 @@
+import { isHoneyPotElement } from './is-honey-pot-element.js';
+export function getElementFromPointWithoutHoneypot(client) {
+  // eslint-disable-next-line no-restricted-syntax
+  const [top, second] = document.elementsFromPoint(client.x, client.y);
+  if (!top) {
+    return null;
+  }
+  if (isHoneyPotElement(top)) {
+    return second !== null && second !== void 0 ? second : null;
+  }
+  return top;
+}

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

@@ -0,0 +1,3 @@
+// pulling this into a separate file so adapter(s) that don't
+// need the honey pot can pay as little as possible for it.
+export const honeyPotDataAttribute = 'data-pdnd-honey-pot';

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

@@ -0,0 +1,4 @@
+import { honeyPotDataAttribute } from './honey-pot-data-attribute.js';
+export function isHoneyPotElement(target) {
+  return target instanceof Element && target.hasAttribute(honeyPotDataAttribute);
+}