Add helper to disable dragging on inner anchors and images

[alexreardon]

<a> and <img> elements are draggable by default. Often you want to set up a draggable({element}) that may contain <a> and <img> elements, but you don't want inner <a> and <img> elements to be draggable. I think we should create an optional utility function to help with this.

Initial concept

Usage

import {disableDraggingOfInnerAnchorsAndImages} from '@atlaskit/pragmatic-drag-and-drop/disable-dragging-of-inner-anchors-and-images';

import {combine} from '@atlaskit/pragmatic-drag-and-drop/combine';
import {draggable} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

const cleanup = combine(
  draggable({element}),
  disableDraggingOfInnerAnchorsAndImages({element}),
);

Implementation 1. → Watch for child DOM changes

• I don't love the name disableDraggingOfInnerAnchorsAndImages, but it is super explicit for now
• This code might not work at all yet, I haven't tested it in a browser. But it should give a decent general vibe
• Not feeling great about the potential performance impact of adding lots of MutationObservers

import type { CleanupFn } from '../internal-types';

export function disableDraggingOfInnerAnchorsAndImages({
  element,
}: {
  element: Element;
}): CleanupFn {
  const disabled = new Set<HTMLElement>();

  function tryToBlockDragging(element: Element) {
    if (
      !(
        element instanceof HTMLImageElement ||
        element instanceof HTMLAnchorElement
      )
    ) {
      return;
    }

    // dragging already disabled, don't need to add to our registry
    if (!element.draggable) {
      return;
    }

    if (disabled.has(element)) {
      return;
    }

    element.draggable = false;
    disabled.add(element);
  }

  // watching for changes in child DOM.
  // TODO: is this overkill?
  // TODO: is this expensive to have lots of these?
  const observer = new MutationObserver(function onChange(
    event: MutationRecord[],
  ) {
    for (const record of event) {
      if (record.type !== 'childList') {
        return;
      }
      record.addedNodes.forEach(node => {
        if (node instanceof HTMLElement) {
          tryToBlockDragging(node);
        }
      });
      record.removedNodes.forEach(node => {
        if (node instanceof HTMLElement && disabled.has(node)) {
          node.draggable = true;
          disabled.delete(node);
        }
      });
    }
  });

  observer.observe(element, {
    // watch for changes on children
    subtree: true,
    // listen for adding / removing elements
    childList: true,
    // not going to watch for attribute changes
    // TODO: should we watch for 'draggable' attribute changes?
    attributes: false,
  });

  // initial run
  element
    .querySelectorAll('a,img')
    .forEach(element => tryToBlockDragging(element));

  return function cleanup() {
    observer.disconnect();
    // restore draggable attribute
    disabled.forEach(element => {
      element.draggable = true;
    });
    // clear the registry
    disabled.clear();
  };
}

Implementation 2. → No child DOM watching

• Won't block attribute changes
• Won't disable dragging on dynamically added children

import type { CleanupFn } from '../internal-types';

export function disableDraggingOfInnerAnchorsAndImages({
  element,
}: {
  element: Element;
}): CleanupFn {
  const targets = Array.from(element.querySelectorAll('a,img')).filter(
    (element): element is HTMLAnchorElement | HTMLImageElement => {
      if (
        !(
          element instanceof HTMLAnchorElement ||
          element instanceof HTMLImageElement
        )
      ) {
        return false;
      }
      // only disabling dragging on elements that are draggable
      return element.draggable;
    },
  );

  // disable dragging on all draggable elements
  targets.forEach(element => {
    element.draggable = false;
  });

  return function cleanup() {
    // restore ability to drag on the element
    targets.forEach(element => {
      element.draggable = true;
    });
    targets.length = 0;
  };
}

[alexreardon]

We could always go for the simple, and let folks handle the complex case on the consumption side (if needed).

Something like this:

let cleanup = disableDraggingOfInnerAnchorsAndImages({ element });

const observer = new MutationObserver(function onChange(
  event: MutationRecord[],
) {
  for (const record of event) {
    if (record.type !== 'childList') {
      return;
    }
    cleanup();
    cleanup = disableDraggingOfInnerAnchorsAndImages({ element });
  }
});

observer.observe(element, {
  subtree: true,
  childList: true,
  attributes: false,
});

However, if we think the complex use case is common enough, baking it into the helper would likely yield a safer experience (people then don't need to think about this problem)

[alexreardon]

@danieldelcore any thoughts on which option to go for? ^

[alexreardon]

WIP for simple case:

import { type CleanupFn } from '../internal-types';

import { combine } from './combine';

function tryToBlockDragging(element: Element): CleanupFn | null {
  if (
    !(
      element instanceof HTMLImageElement ||
      element instanceof HTMLAnchorElement
    )
  ) {
    return null;
  }

  // dragging already disabled, don't need to disable
  if (!element.draggable) {
    return null;
  }

  element.draggable = false;

  return function cleanup() {
    element.draggable = true;
  };
}

function isCleanupFn(value: CleanupFn | null): value is CleanupFn {
  return Boolean(value);
}

export function disableDraggingOnInternalImagesAndAnchors(
  element: HTMLElement,
): CleanupFn {
  const cleanups: CleanupFn[] = Array.from(element.querySelectorAll('a,img'))
    .map(tryToBlockDragging)
    .filter(isCleanupFn);

  return combine(...cleanups);
}

Still unsure what to do with watching

• Do we make it an option? ({watch: true})
• Do we make it a seperate export (only pay for what you need)
• Do we even need it?