opentiny 6.9.0

package/src/core/main/ts/delete/DeleteUtils.ts

@@ -0,0 +1,111 @@
+import { Arr, Optional, Optionals } from '@ephox/katamari';
+import { Compare, PredicateFind, Remove, SugarElement, SugarNode, Traverse } from '@ephox/sugar';
+
+import Editor from '../api/Editor';
+import { EditorEvent } from '../api/util/EventDispatcher';
+import * as CaretFinder from '../caret/CaretFinder';
+import CaretPosition from '../caret/CaretPosition';
+import { isListItem, isTextBlock } from '../dom/ElementType';
+import * as Empty from '../dom/Empty';
+import * as PaddingBr from '../dom/PaddingBr';
+import * as InlineUtils from '../keyboard/InlineUtils';
+
+const execCommandIgnoreInputEvents = (editor: Editor, command: string) => {
+  // We need to prevent the input events from being fired by execCommand when delete is used internally
+  const inputBlocker = (e: EditorEvent<InputEvent>) => e.stopImmediatePropagation();
+  editor.on('beforeinput input', inputBlocker, true);
+  editor.getDoc().execCommand(command);
+  editor.off('beforeinput input', inputBlocker);
+};
+
+// ASSUMPTION: The editor command 'delete' doesn't have any `beforeinput` and `input` trapping
+// because those events are only triggered by native contenteditable behaviour.
+const execEditorDeleteCommand = (editor: Editor): void => {
+  editor.execCommand('delete');
+};
+
+const execNativeDeleteCommand = (editor: Editor): void =>
+  execCommandIgnoreInputEvents(editor, 'Delete');
+
+const execNativeForwardDeleteCommand = (editor: Editor): void =>
+  execCommandIgnoreInputEvents(editor, 'ForwardDelete');
+
+const isBeforeRoot = (rootNode: SugarElement<Node>) => (elm: SugarElement<Node>): boolean =>
+  Optionals.is(Traverse.parent(elm), rootNode, Compare.eq);
+
+const isTextBlockOrListItem = (element: SugarElement<Node>): element is SugarElement<Element> =>
+  isTextBlock(element) || isListItem(element);
+
+const getParentBlock = (rootNode: SugarElement<Node>, elm: SugarElement<Node>): Optional<SugarElement<Element>> => {
+  if (Compare.contains(rootNode, elm)) {
+    return PredicateFind.closest(elm, isTextBlockOrListItem, isBeforeRoot(rootNode));
+  } else {
+    return Optional.none();
+  }
+};
+
+const paddEmptyBody = (editor: Editor, moveSelection: boolean = true): void => {
+  if (editor.dom.isEmpty(editor.getBody())) {
+    editor.setContent('', { no_selection: !moveSelection });
+  }
+};
+
+const willDeleteLastPositionInElement = (forward: boolean, fromPos: CaretPosition, elm: Node): boolean =>
+  Optionals.lift2(
+    CaretFinder.firstPositionIn(elm),
+    CaretFinder.lastPositionIn(elm),
+    (firstPos, lastPos): boolean => {
+      const normalizedFirstPos = InlineUtils.normalizePosition(true, firstPos);
+      const normalizedLastPos = InlineUtils.normalizePosition(false, lastPos);
+      const normalizedFromPos = InlineUtils.normalizePosition(false, fromPos);
+
+      if (forward) {
+        return CaretFinder.nextPosition(elm, normalizedFromPos).exists((nextPos) =>
+          nextPos.isEqual(normalizedLastPos) && fromPos.isEqual(normalizedFirstPos)
+        );
+      } else {
+        return CaretFinder.prevPosition(elm, normalizedFromPos).exists((prevPos) =>
+          prevPos.isEqual(normalizedFirstPos) && fromPos.isEqual(normalizedLastPos)
+        );
+      }
+    }).getOr(true);
+
+const freefallRtl = (root: SugarElement<Node>): Optional<SugarElement<Node>> => {
+  const child = SugarNode.isComment(root) ? Traverse.prevSibling(root) : Traverse.lastChild(root);
+  return child.bind(freefallRtl).orThunk(() => Optional.some(root));
+};
+
+const deleteRangeContents = (editor: Editor, rng: Range, root: SugarElement<HTMLElement>, moveSelection: boolean = true): void => {
+  rng.deleteContents();
+  // Pad the last block node
+  const lastNode = freefallRtl(root).getOr(root);
+  const lastBlock = SugarElement.fromDom(editor.dom.getParent(lastNode.dom, editor.dom.isBlock) ?? root.dom);
+  // If the block is the editor body then we need to insert the root block as well
+  if (lastBlock.dom === editor.getBody()) {
+    paddEmptyBody(editor, moveSelection);
+  } else if (Empty.isEmpty(editor.schema, lastBlock, { checkRootAsContent: false })) {
+    PaddingBr.fillWithPaddingBr(lastBlock);
+    if (moveSelection) {
+      editor.selection.setCursorLocation(lastBlock.dom, 0);
+    }
+  }
+  // Clean up any additional leftover nodes. If the last block wasn't a direct child, then we also need to clean up siblings
+  if (!Compare.eq(root, lastBlock)) {
+    const additionalCleanupNodes = Optionals.is(Traverse.parent(lastBlock), root) ? [] : Traverse.siblings(lastBlock);
+    Arr.each(additionalCleanupNodes.concat(Traverse.children(root)), (node) => {
+      if (!Compare.eq(node, lastBlock) && !Compare.contains(node, lastBlock) && Empty.isEmpty(editor.schema, node)) {
+        Remove.remove(node);
+      }
+    });
+  }
+};
+
+export {
+  deleteRangeContents,
+  execNativeDeleteCommand,
+  execNativeForwardDeleteCommand,
+  execEditorDeleteCommand,
+  getParentBlock,
+  paddEmptyBody,
+  willDeleteLastPositionInElement
+};

package/src/core/main/ts/delete/DetailsDelete.ts

@@ -0,0 +1,258 @@
+import { Arr, Fun, Optional, Optionals, Type } from '@ephox/katamari';
+import { PlatformDetection } from '@ephox/sand';
+import { SugarElement } from '@ephox/sugar';
+
+import DOMUtils from '../api/dom/DOMUtils';
+import Editor from '../api/Editor';
+import * as CaretFinder from '../caret/CaretFinder';
+import CaretPosition from '../caret/CaretPosition';
+import * as DeleteUtils from '../delete/DeleteUtils';
+import * as NodeType from '../dom/NodeType';
+import * as PaddingBr from '../dom/PaddingBr';
+import * as FormatUtils from '../fmt/FormatUtils';
+
+interface DetailsElements {
+  readonly startSummary: Optional<HTMLElement>;
+  readonly startDetails: Optional<HTMLDetailsElement>;
+  readonly endDetails: Optional<HTMLDetailsElement>;
+}
+
+type Granularity = 'character' | 'word' | 'line' | 'selection';
+
+const browser = PlatformDetection.detect().browser;
+const isSafari = browser.isSafari();
+
+const emptyNodeContents = (node: Node) => PaddingBr.fillWithPaddingBr(SugarElement.fromDom(node));
+
+const isEntireNodeSelected = (rng: Range, node: Node): boolean =>
+  rng.startOffset === 0 && rng.endOffset === node.textContent?.length;
+
+const getParentDetailsElementAtPos = (dom: DOMUtils, pos: CaretPosition) => Optional.from(dom.getParent(pos.container(), 'details'));
+
+const isInDetailsElement = (dom: DOMUtils, pos: CaretPosition) => getParentDetailsElementAtPos(dom, pos).isSome();
+
+const getDetailsElements = (dom: DOMUtils, rng: Range): Optional<DetailsElements> => {
+  const startDetails = Optional.from(dom.getParent(rng.startContainer, 'details'));
+  const endDetails = Optional.from(dom.getParent(rng.endContainer, 'details'));
+
+  if (startDetails.isSome() || endDetails.isSome()) {
+    const startSummary = startDetails.bind((details) => Optional.from(dom.select('summary', details)[0]));
+    return Optional.some({ startSummary, startDetails, endDetails });
+  } else {
+    return Optional.none();
+  }
+};
+
+const isCaretInTheBeginningOf = (caretPos: CaretPosition, element: HTMLElement): boolean =>
+  CaretFinder.firstPositionIn(element).exists((pos) => pos.isEqual(caretPos));
+
+const isCaretInTheEndOf = (caretPos: CaretPosition, element: HTMLElement): boolean => {
+  return CaretFinder.lastPositionIn(element).exists((pos) => {
+    // Summary may or may not have a trailing BR
+    if (NodeType.isBr(pos.getNode())) {
+      return CaretFinder.prevPosition(element, pos).exists((pos2) => pos2.isEqual(caretPos)) || pos.isEqual(caretPos);
+    } else {
+      return pos.isEqual(caretPos);
+    }
+  });
+};
+
+const isCaretAtStartOfSummary = (caretPos: CaretPosition, detailsElements: DetailsElements) =>
+  detailsElements.startSummary.exists((summary) => isCaretInTheBeginningOf(caretPos, summary));
+
+const isCaretAtEndOfSummary = (caretPos: CaretPosition, detailsElements: DetailsElements) =>
+  detailsElements.startSummary.exists((summary) => isCaretInTheEndOf(caretPos, summary));
+
+const isCaretInFirstPositionInBody = (caretPos: CaretPosition, detailsElements: DetailsElements) =>
+  detailsElements.startDetails.exists((details) =>
+    CaretFinder.prevPosition(details, caretPos).forall((pos) =>
+      detailsElements.startSummary.exists((summary) => !summary.contains(caretPos.container()) && summary.contains(pos.container()))
+    )
+  );
+
+const isCaretInLastPositionInBody = (root: HTMLElement, caretPos: CaretPosition, detailsElements: DetailsElements) =>
+  detailsElements.startDetails.exists((details) =>
+    CaretFinder.nextPosition(root, caretPos).forall((pos) =>
+      !details.contains(pos.container())
+    )
+  );
+
+const setCaretToPosition = (editor: Editor, position: CaretPosition): void => {
+  const node = position.getNode();
+  if (!Type.isUndefined(node)) {
+    editor.selection.setCursorLocation(node, position.offset());
+  }
+};
+
+const moveCaretToDetailsPos = (editor: Editor, pos: CaretPosition, forward: boolean) => {
+  const details = editor.dom.getParent(pos.container(), 'details');
+
+  if (details && !details.open) {
+    const summary = editor.dom.select('summary', details)[0];
+    if (summary) {
+      const newPos = forward ? CaretFinder.firstPositionIn(summary) : CaretFinder.lastPositionIn(summary);
+      newPos.each((pos) => setCaretToPosition(editor, pos));
+    }
+  } else {
+    setCaretToPosition(editor, pos);
+  }
+};
+
+const isPartialDelete = (rng: Range, detailsElements: DetailsElements) => {
+  const containsStart = (element: HTMLElement) => element.contains(rng.startContainer);
+  const containsEnd = (element: HTMLElement) => element.contains(rng.endContainer);
+  const startInSummary = detailsElements.startSummary.exists(containsStart);
+  const endInSummary = detailsElements.startSummary.exists(containsEnd);
+  const isPartiallySelectedDetailsElements = detailsElements.startDetails.forall((startDetails) => detailsElements.endDetails.forall((endDetails) => startDetails !== endDetails));
+  const isInPartiallySelectedSummary = (startInSummary || endInSummary) && !(startInSummary && endInSummary);
+
+  return isInPartiallySelectedSummary || isPartiallySelectedDetailsElements;
+};
+
+const shouldPreventDeleteIntoDetails = (editor: Editor, forward: boolean, granularity: Granularity): boolean => {
+  const { dom, selection } = editor;
+  const root = editor.getBody();
+
+  if (granularity === 'character') {
+    const caretPos = CaretPosition.fromRangeStart(selection.getRng());
+    const parentBlock = dom.getParent(caretPos.container(), dom.isBlock);
+    const parentDetailsAtCaret = getParentDetailsElementAtPos(dom, caretPos);
+    const inEmptyParentBlock = parentBlock && dom.isEmpty(parentBlock);
+    const isFirstBlock = Type.isNull(parentBlock?.previousSibling);
+    const isLastBlock = Type.isNull(parentBlock?.nextSibling);
+
+    // Pressing backspace or delete in an first or last empty block before or after details
+    if (inEmptyParentBlock) {
+      const firstOrLast = forward ? isLastBlock : isFirstBlock;
+      if (firstOrLast) {
+        const isBeforeAfterDetails = CaretFinder.navigate(!forward, root, caretPos).exists((pos) => {
+          return isInDetailsElement(dom, pos) && !Optionals.equals(parentDetailsAtCaret, getParentDetailsElementAtPos(dom, pos));
+        });
+
+        if (isBeforeAfterDetails) {
+          return true;
+        }
+      }
+    }
+
+    return CaretFinder.navigate(forward, root, caretPos).fold(
+      Fun.never,
+      (pos) => {
+        const parentDetailsAtNewPos = getParentDetailsElementAtPos(dom, pos);
+
+        if (isInDetailsElement(dom, pos) && !Optionals.equals(parentDetailsAtCaret, parentDetailsAtNewPos)) {
+          if (!forward) {
+            moveCaretToDetailsPos(editor, pos, false);
+          }
+
+          if (parentBlock && inEmptyParentBlock) {
+            if (forward && isFirstBlock) {
+              return true;
+            } else if (!forward && isLastBlock) {
+              return true;
+            }
+
+            moveCaretToDetailsPos(editor, pos, forward);
+            editor.dom.remove(parentBlock);
+          }
+
+          return true;
+        } else {
+          return false;
+        }
+      }
+    );
+  } else {
+    return false;
+  }
+};
+
+const shouldPreventDeleteSummaryAction = (editor: Editor, detailElements: DetailsElements, forward: boolean, granularity: Granularity): boolean => {
+  const selection = editor.selection;
+  const rng = selection.getRng();
+  const caretPos = CaretPosition.fromRangeStart(rng);
+  const root = editor.getBody();
+
+  if (granularity === 'selection') {
+    return isPartialDelete(rng, detailElements);
+  } else if (forward) {
+    return isCaretAtEndOfSummary(caretPos, detailElements) || isCaretInLastPositionInBody(root, caretPos, detailElements);
+  } else {
+    return isCaretAtStartOfSummary(caretPos, detailElements) || isCaretInFirstPositionInBody(caretPos, detailElements);
+  }
+};
+
+const shouldPreventDeleteAction = (editor: Editor, forward: boolean, granularity: Granularity): boolean =>
+  getDetailsElements(editor.dom, editor.selection.getRng()).fold(
+    () => shouldPreventDeleteIntoDetails(editor, forward, granularity),
+    (detailsElements) => shouldPreventDeleteSummaryAction(editor, detailsElements, forward, granularity) || shouldPreventDeleteIntoDetails(editor, forward, granularity)
+  );
+
+const handleDeleteActionSafari = (editor: Editor, forward: boolean, granularity: Granularity): boolean => {
+  const selection = editor.selection;
+  const node = selection.getNode();
+  const rng = selection.getRng();
+  const caretPos = CaretPosition.fromRangeStart(rng);
+
+  if (NodeType.isSummary(node)) {
+    // TINY-9951: Safari bug, deleting within the summary causes all content to be removed and no caret position to be left
+    // https://bugs.webkit.org/show_bug.cgi?id=257745
+    if (granularity === 'selection' && isEntireNodeSelected(rng, node) || DeleteUtils.willDeleteLastPositionInElement(forward, caretPos, node)) {
+      emptyNodeContents(node);
+    } else {
+      editor.undoManager.transact(() => {
+        // Wrap all summary children in a temporary container to execute Backspace/Delete there, then unwrap
+        const sel = selection.getSel();
+        let { anchorNode, anchorOffset, focusNode, focusOffset } = sel ?? {};
+        const applySelection = () => {
+          if (Type.isNonNullable(anchorNode) && Type.isNonNullable(anchorOffset) && Type.isNonNullable(focusNode) && Type.isNonNullable(focusOffset)) {
+            sel?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+          }
+        };
+        const updateSelection = () => {
+          anchorNode = sel?.anchorNode;
+          anchorOffset = sel?.anchorOffset;
+          focusNode = sel?.focusNode;
+          focusOffset = sel?.focusOffset;
+        };
+        const appendAllChildNodes = (from: Node, to: Node) => {
+          Arr.each(from.childNodes, (child) => {
+            if (FormatUtils.isNode(child)) {
+              to.appendChild(child);
+            }
+          });
+        };
+
+        const container = editor.dom.create('span', { 'data-mce-bogus': '1' });
+        appendAllChildNodes(node, container);
+        node.appendChild(container);
+        applySelection();
+        // Manually perform deletion with modified granularities
+        if (granularity === 'word' || granularity === 'line') {
+          sel?.modify('extend', forward ? 'right' : 'left', granularity);
+        }
+        if (!selection.isCollapsed() && isEntireNodeSelected(selection.getRng(), container)) {
+          emptyNodeContents(node);
+        } else {
+          editor.execCommand(forward ? 'ForwardDelete' : 'Delete');
+          updateSelection();
+          appendAllChildNodes(container, node);
+          applySelection();
+        }
+        editor.dom.remove(container);
+      });
+    }
+
+    return true;
+  } else {
+    return false;
+  }
+};
+
+const backspaceDelete = (editor: Editor, forward: boolean, granularity: 'character' | 'word' | 'line' | 'selection'): Optional<() => void> =>
+  shouldPreventDeleteAction(editor, forward, granularity) || isSafari && handleDeleteActionSafari(editor, forward, granularity)
+    ? Optional.some(Fun.noop) : Optional.none();
+
+export {
+  backspaceDelete
+};

package/src/core/main/ts/delete/ImageBlockDelete.ts

@@ -0,0 +1,22 @@
+import { Optional } from '@ephox/katamari';
+
+import Editor from '../api/Editor';
+import * as CaretFinder from '../caret/CaretFinder';
+import CaretPosition from '../caret/CaretPosition';
+import { isAfterImageBlock, isBeforeImageBlock } from '../caret/CaretPositionPredicates';
+import { getChildNodeAtRelativeOffset } from '../caret/CaretUtils';
+
+const deleteCaret = (editor: Editor, forward: boolean): Optional<() => void> => {
+  const fromPos = CaretPosition.fromRangeStart(editor.selection.getRng());
+  return CaretFinder.fromPosition(forward, editor.getBody(), fromPos)
+    .filter((pos) => forward ? isBeforeImageBlock(pos) : isAfterImageBlock(pos))
+    .bind((pos) => getChildNodeAtRelativeOffset(forward ? 0 : -1, pos))
+    .map((elm) => () => editor.selection.select(elm));
+};
+
+const backspaceDelete = (editor: Editor, forward: boolean): Optional<() => void> =>
+  editor.selection.isCollapsed() ? deleteCaret(editor, forward) : Optional.none();
+
+export {
+  backspaceDelete
+};

package/src/core/main/ts/delete/InlineBoundaryDelete.ts

@@ -0,0 +1,127 @@
+import { Cell, Fun, Optional, Optionals } from '@ephox/katamari';
+import { SugarElement } from '@ephox/sugar';
+
+import Editor from '../api/Editor';
+import * as Options from '../api/Options';
+import * as CaretFinder from '../caret/CaretFinder';
+import CaretPosition from '../caret/CaretPosition';
+import * as CaretUtils from '../caret/CaretUtils';
+import * as BoundaryCaret from '../keyboard/BoundaryCaret';
+import * as BoundaryLocation from '../keyboard/BoundaryLocation';
+import * as BoundarySelection from '../keyboard/BoundarySelection';
+import * as InlineUtils from '../keyboard/InlineUtils';
+import * as DeleteElement from './DeleteElement';
+import { execNativeDeleteCommand } from './DeleteUtils';
+
+const rangeFromPositions = (from: CaretPosition, to: CaretPosition): Range => {
+  const range = document.createRange();
+
+  range.setStart(from.container(), from.offset());
+  range.setEnd(to.container(), to.offset());
+
+  return range;
+};
+
+// Checks for delete at <code>|a</code> when there is only one item left except the zwsp caret container nodes
+const hasOnlyTwoOrLessPositionsLeft = (elm: Node): boolean =>
+  Optionals.lift2(
+    CaretFinder.firstPositionIn(elm),
+    CaretFinder.lastPositionIn(elm),
+    (firstPos, lastPos) => {
+      const normalizedFirstPos = InlineUtils.normalizePosition(true, firstPos);
+      const normalizedLastPos = InlineUtils.normalizePosition(false, lastPos);
+
+      return CaretFinder.nextPosition(elm, normalizedFirstPos).forall((pos) => pos.isEqual(normalizedLastPos));
+    }).getOr(true);
+
+const setCaretLocation = (editor: Editor, caret: Cell<Text | null>) => (location: BoundaryLocation.LocationAdt): Optional<() => void> =>
+  BoundaryCaret.renderCaret(caret, location).map((pos) =>
+    () => BoundarySelection.setCaretPosition(editor, pos)
+  );
+
+const deleteFromTo = (editor: Editor, caret: Cell<Text | null>, from: CaretPosition, to: CaretPosition): void => {
+  const rootNode = editor.getBody();
+  const isInlineTarget = Fun.curry(InlineUtils.isInlineTarget, editor);
+
+  editor.undoManager.ignore(() => {
+    editor.selection.setRng(rangeFromPositions(from, to));
+    // TODO: TINY-9120 - Investigate if this should be using our custom overrides
+    execNativeDeleteCommand(editor);
+
+    BoundaryLocation.readLocation(isInlineTarget, rootNode, CaretPosition.fromRangeStart(editor.selection.getRng()))
+      .map(BoundaryLocation.inside)
+      .bind(setCaretLocation(editor, caret))
+      .each(Fun.call);
+  });
+
+  editor.nodeChanged();
+};
+
+const rescope = (rootNode: Node, node: Node): Node => {
+  const parentBlock = CaretUtils.getParentBlock(node, rootNode);
+  return parentBlock ? parentBlock : rootNode;
+};
+
+const backspaceDeleteCollapsed = (editor: Editor, caret: Cell<Text | null>, forward: boolean, from: CaretPosition): Optional<() => void> => {
+  const rootNode = rescope(editor.getBody(), from.container());
+  const isInlineTarget = Fun.curry(InlineUtils.isInlineTarget, editor);
+  const fromLocation = BoundaryLocation.readLocation(isInlineTarget, rootNode, from);
+  const location = fromLocation.bind((location) => {
+    if (forward) {
+      return location.fold(
+        Fun.constant(Optional.some(BoundaryLocation.inside(location))), // Before
+        Optional.none, // Start
+        Fun.constant(Optional.some(BoundaryLocation.outside(location))), // End
+        Optional.none  // After
+      );
+    } else {
+      return location.fold(
+        Optional.none, // Before
+        Fun.constant(Optional.some(BoundaryLocation.outside(location))), // Start
+        Optional.none, // End
+        Fun.constant(Optional.some(BoundaryLocation.inside(location)))  // After
+      );
+    }
+  });
+
+  return location.map(setCaretLocation(editor, caret))
+    .getOrThunk((): Optional<() => void> => {
+      const toPosition = CaretFinder.navigate(forward, rootNode, from);
+      const toLocation = toPosition.bind((pos) => BoundaryLocation.readLocation(isInlineTarget, rootNode, pos));
+
+      return Optionals.lift2(fromLocation, toLocation, () =>
+        InlineUtils.findRootInline(isInlineTarget, rootNode, from).bind((elm) => {
+          if (hasOnlyTwoOrLessPositionsLeft(elm)) {
+            return Optional.some(() => {
+              DeleteElement.deleteElement(editor, forward, SugarElement.fromDom(elm));
+            });
+          } else {
+            return Optional.none();
+          }
+        })
+      ).getOrThunk(() => toLocation.bind(() =>
+        toPosition.map((to) => {
+          return () => {
+            if (forward) {
+              deleteFromTo(editor, caret, from, to);
+            } else {
+              deleteFromTo(editor, caret, to, from);
+            }
+          };
+        })
+      ));
+    });
+};
+
+const backspaceDelete = (editor: Editor, caret: Cell<Text | null>, forward: boolean): Optional<() => void> => {
+  if (editor.selection.isCollapsed() && Options.isInlineBoundariesEnabled(editor)) {
+    const from = CaretPosition.fromRangeStart(editor.selection.getRng());
+    return backspaceDeleteCollapsed(editor, caret, forward, from);
+  }
+
+  return Optional.none();
+};
+
+export {
+  backspaceDelete
+};