opentiny 6.9.0

package/src/themes/silver/main/ts/ui/context/ContextFormButtons.ts

@@ -0,0 +1,98 @@
+import {
+  AlloyComponent, AlloyEvents, AlloyTriggers, Disabling, Memento, MementoRecord, Representing, SimpleOrSketchSpec, SystemEvents
+} from '@ephox/alloy';
+import { StructureSchema } from '@ephox/boulder';
+import { InlineContent, Toolbar } from '@ephox/bridge';
+import { Arr, Fun, Optional } from '@ephox/katamari';
+
+import { UiFactoryBackstageProviders } from '../../backstage/Backstage';
+import { internalToolbarButtonExecute, InternalToolbarButtonExecuteEvent } from '../toolbar/button/ButtonEvents';
+import { renderToolbarButtonWith, renderToolbarToggleButtonWith } from '../toolbar/button/ToolbarButtons';
+
+type ContextFormButton = InlineContent.ContextFormToggleButton | InlineContent.ContextFormButton;
+
+interface ContextFormButtonRegistry {
+  readonly asSpecs: () => SimpleOrSketchSpec[];
+  readonly findPrimary: (compInSystem: AlloyComponent) => Optional<AlloyComponent>;
+}
+
+// Can probably generalise.
+
+const getFormApi = (input: AlloyComponent): InlineContent.ContextFormInstanceApi => ({
+  hide: () => AlloyTriggers.emit(input, SystemEvents.sandboxClose()),
+  getValue: () => Representing.getValue(input)
+});
+
+const runOnExecute = <T>(memInput: MementoRecord, original: { onAction: (formApi: InlineContent.ContextFormInstanceApi, buttonApi: T) => void }) =>
+  AlloyEvents.run<InternalToolbarButtonExecuteEvent<T>>(internalToolbarButtonExecute, (comp, se) => {
+    const input = memInput.get(comp);
+    const formApi = getFormApi(input);
+    original.onAction(formApi, se.event.buttonApi);
+  });
+
+const renderContextButton = (memInput: MementoRecord, button: InlineContent.ContextFormButton, providers: UiFactoryBackstageProviders) => {
+  const { primary, ...rest } = button.original;
+  const bridged = StructureSchema.getOrDie(
+    Toolbar.createToolbarButton({
+      ...rest,
+      type: 'button',
+      onAction: Fun.noop
+    })
+  );
+
+  return renderToolbarButtonWith(bridged, providers, [
+    runOnExecute<Toolbar.ToolbarButtonInstanceApi>(memInput, button)
+  ]);
+};
+
+const renderContextToggleButton = (memInput: MementoRecord, button: InlineContent.ContextFormToggleButton, providers: UiFactoryBackstageProviders) => {
+  const { primary, ...rest } = button.original;
+  const bridged = StructureSchema.getOrDie(
+    Toolbar.createToggleButton({
+      ...rest,
+      type: 'togglebutton',
+      onAction: Fun.noop
+    })
+  );
+
+  return renderToolbarToggleButtonWith(bridged, providers, [
+    runOnExecute<InlineContent.ContextFormToggleButtonInstanceApi>(memInput, button)
+  ]);
+};
+
+const isToggleButton = (button: ContextFormButton): button is InlineContent.ContextFormToggleButton =>
+  button.type === 'contextformtogglebutton';
+
+const generateOne = (memInput: MementoRecord, button: ContextFormButton, providersBackstage: UiFactoryBackstageProviders) => {
+  if (isToggleButton(button)) {
+    return renderContextToggleButton(memInput, button, providersBackstage);
+  } else {
+    return renderContextButton(memInput, button, providersBackstage);
+  }
+};
+
+const generate = (memInput: MementoRecord, buttons: ContextFormButton[], providersBackstage: UiFactoryBackstageProviders): ContextFormButtonRegistry => {
+
+  const mementos = Arr.map(buttons, (button) => Memento.record(
+    generateOne(memInput, button, providersBackstage)
+  ));
+
+  const asSpecs = () => Arr.map(mementos, (mem) => mem.asSpec());
+
+  const findPrimary = (compInSystem: AlloyComponent): Optional<AlloyComponent> => Arr.findMap(buttons, (button, i) => {
+    if (button.primary) {
+      return Optional.from(mementos[i]).bind((mem) => mem.getOpt(compInSystem)).filter(Fun.not(Disabling.isDisabled));
+    } else {
+      return Optional.none();
+    }
+  });
+
+  return {
+    asSpecs,
+    findPrimary
+  };
+};
+
+export {
+  generate
+};

package/src/themes/silver/main/ts/ui/context/ContextToolbar.ts

@@ -0,0 +1,315 @@
+import {
+  AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloySpec, AlloyTriggers, AnchorSpec, Behaviour, GuiFactory, InlineView, Keying, Positioning
+} from '@ephox/alloy';
+import { InlineContent, Toolbar } from '@ephox/bridge';
+import { Arr, Fun, Id, Merger, Obj, Optional, Optionals, Singleton, Throttler, Thunk } from '@ephox/katamari';
+import { PlatformDetection } from '@ephox/sand';
+import { Class, Compare, Css, Focus, SugarElement } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Delay from 'tinymce/core/api/util/Delay';
+
+import { getToolbarMode, ToolbarMode } from '../../api/Options';
+import { UiFactoryBackstage, UiFactoryBackstageProviders } from '../../backstage/Backstage';
+import { renderToolbar } from '../toolbar/CommonToolbar';
+import { identifyButtons } from '../toolbar/Integration';
+import { hideContextToolbarEvent, showContextToolbarEvent } from './ContextEditorEvents';
+import { ContextForm } from './ContextForm';
+import * as ContextToolbarAnchor from './ContextToolbarAnchor';
+import * as ContextToolbarBounds from './ContextToolbarBounds';
+import * as ToolbarLookup from './ContextToolbarLookup';
+import * as ToolbarScopes from './ContextToolbarScopes';
+import { forwardSlideEvent, renderContextToolbar } from './ContextUi';
+
+type ScopedToolbars = ToolbarScopes.ScopedToolbars;
+
+export type ContextSpecType = InlineContent.ContextToolbarSpec | InlineContent.ContextFormSpec;
+export type ContextType = InlineContent.ContextToolbar | InlineContent.ContextForm;
+
+type ContextToolbarButtonType = Toolbar.ToolbarButtonSpec | Toolbar.ToolbarMenuButtonSpec | Toolbar.ToolbarSplitButtonSpec | Toolbar.ToolbarToggleButtonSpec | Toolbar.GroupToolbarButtonSpec;
+
+interface Extras {
+  readonly backstage: UiFactoryBackstage;
+}
+
+const enum TriggerCause {
+  Reposition,
+  NewAnchor
+}
+
+const transitionClass = 'tox-pop--transition';
+
+const register = (editor: Editor, registryContextToolbars: Record<string, ContextSpecType>, sink: AlloyComponent, extras: Extras): void => {
+  const backstage = extras.backstage;
+  const sharedBackstage = backstage.shared;
+  const isTouch = PlatformDetection.detect().deviceType.isTouch;
+
+  const lastElement = Singleton.value<SugarElement<Element>>();
+  const lastTrigger = Singleton.value<TriggerCause>();
+  const lastContextPosition = Singleton.value<InlineContent.ContextPosition>();
+
+  const contextbar = GuiFactory.build(
+    renderContextToolbar({
+      sink,
+      onEscape: () => {
+        editor.focus();
+        return Optional.some(true);
+      }
+    })
+  );
+
+  const getBounds = () => {
+    const position = lastContextPosition.get().getOr('node');
+    // Use a 1px margin for the bounds to keep the context toolbar from butting directly against
+    // the header, etc... when switching to inset layouts
+    const margin = ContextToolbarAnchor.shouldUseInsetLayouts(position) ? 1 : 0;
+    return ContextToolbarBounds.getContextToolbarBounds(editor, sharedBackstage, position, margin);
+  };
+
+  const canLaunchToolbar = () => {
+    // If a mobile context menu is open, don't launch else they'll probably overlap. For android, specifically.
+    return !editor.removed && !(isTouch() && backstage.isContextMenuOpen());
+  };
+
+  const isSameLaunchElement = (elem: Optional<SugarElement<Element>>) =>
+    Optionals.is(Optionals.lift2(elem, lastElement.get(), Compare.eq), true);
+
+  const shouldContextToolbarHide = (): boolean => {
+    if (!canLaunchToolbar()) {
+      return true;
+    } else {
+      const contextToolbarBounds = getBounds();
+      // Get the anchor bounds. For node anchors we should always try to use the last element bounds
+      const anchorBounds = Optionals.is(lastContextPosition.get(), 'node') ?
+        ContextToolbarBounds.getAnchorElementBounds(editor, lastElement.get()) :
+        ContextToolbarBounds.getSelectionBounds(editor);
+
+      // If the anchor bounds aren't overlapping with the context toolbar bounds, then the context toolbar
+      // should hide. We want the threshold to require some overlap here (+.01), so that as soon as the
+      // anchor is off-screen, the context toolbar disappers.
+      return contextToolbarBounds.height <= 0 || !ContextToolbarBounds.isVerticalOverlap(anchorBounds, contextToolbarBounds, 0.01);
+    }
+  };
+
+  const close = () => {
+    lastElement.clear();
+    lastTrigger.clear();
+    lastContextPosition.clear();
+    InlineView.hide(contextbar);
+  };
+
+  const hideOrRepositionIfNecessary = () => {
+    if (InlineView.isOpen(contextbar)) {
+      const contextBarEle = contextbar.element;
+      Css.remove(contextBarEle, 'display');
+      if (shouldContextToolbarHide()) {
+        Css.set(contextBarEle, 'display', 'none');
+      } else {
+        lastTrigger.set(TriggerCause.Reposition);
+        InlineView.reposition(contextbar);
+      }
+    }
+  };
+
+  const wrapInPopDialog = (toolbarSpec: AlloySpec) => ({
+    dom: {
+      tag: 'div',
+      classes: [ 'tox-pop__dialog' ]
+    },
+    components: [ toolbarSpec ],
+    behaviours: Behaviour.derive([
+      Keying.config({
+        mode: 'acyclic'
+      }),
+
+      AddEventsBehaviour.config('pop-dialog-wrap-events', [
+        AlloyEvents.runOnAttached((comp) => {
+          editor.shortcuts.add('ctrl+F9', 'focus statusbar', () => Keying.focusIn(comp));
+        }),
+        AlloyEvents.runOnDetached((_comp) => {
+          editor.shortcuts.remove('ctrl+F9');
+        })
+      ])
+    ])
+  });
+
+  const getScopes: () => ScopedToolbars = Thunk.cached(() => ToolbarScopes.categorise(registryContextToolbars, (toolbarApi) => {
+    // ASSUMPTION: This should only ever show one context toolbar since it's used for context forms hence [toolbarApi]
+    const alloySpec = buildToolbar([ toolbarApi ]);
+    AlloyTriggers.emitWith(contextbar, forwardSlideEvent, {
+      forwardContents: wrapInPopDialog(alloySpec)
+    });
+  }));
+
+  const buildContextToolbarGroups = (allButtons: Record<string, ContextToolbarButtonType>, ctx: InlineContent.ContextToolbarSpec) =>
+    identifyButtons(editor, { buttons: allButtons, toolbar: ctx.items, allowToolbarGroups: false }, extras.backstage, Optional.some([ 'form:' ]));
+
+  const buildContextFormGroups = (ctx: InlineContent.ContextForm, providers: UiFactoryBackstageProviders) => ContextForm.buildInitGroups(ctx, providers);
+
+  const buildToolbar = (toolbars: Array<ContextType>): AlloySpec => {
+    const { buttons } = editor.ui.registry.getAll();
+    const scopes = getScopes();
+    const allButtons: Record<string, ContextToolbarButtonType> = { ...buttons, ...scopes.formNavigators };
+
+    // For context toolbars we don't want to use floating or sliding, so just restrict this
+    // to scrolling or wrapping (default)
+    const toolbarType = getToolbarMode(editor) === ToolbarMode.scrolling ? ToolbarMode.scrolling : ToolbarMode.default;
+
+    const initGroups = Arr.flatten(Arr.map(toolbars, (ctx) =>
+      ctx.type === 'contexttoolbar' ? buildContextToolbarGroups(allButtons, ctx) : buildContextFormGroups(ctx, sharedBackstage.providers)
+    ));
+
+    return renderToolbar({
+      type: toolbarType,
+      uid: Id.generate('context-toolbar'),
+      initGroups,
+      onEscape: Optional.none,
+      cyclicKeying: true,
+      providers: sharedBackstage.providers
+    });
+  };
+
+  const getAnchor = (position: InlineContent.ContextPosition, element: Optional<SugarElement<Element>>): AnchorSpec => {
+    const anchorage = position === 'node' ? sharedBackstage.anchors.node(element) : sharedBackstage.anchors.cursor();
+    const anchorLayout = ContextToolbarAnchor.getAnchorLayout(editor, position, isTouch(), {
+      lastElement: lastElement.get,
+      isReposition: () => Optionals.is(lastTrigger.get(), TriggerCause.Reposition),
+      getMode: () => Positioning.getMode(sink)
+    });
+    return Merger.deepMerge(anchorage, anchorLayout);
+  };
+
+  const launchContext = (toolbarApi: Array<ContextType>, elem: Optional<SugarElement<Element>>) => {
+    launchContextToolbar.cancel();
+
+    // Don't launch if the editor has something else open that would conflict
+    if (!canLaunchToolbar()) {
+      return;
+    }
+
+    const toolbarSpec = buildToolbar(toolbarApi);
+
+    // TINY-4495 ASSUMPTION: Can only do toolbarApi[0].position because ContextToolbarLookup.filterToolbarsByPosition
+    // ensures all toolbars returned by ContextToolbarLookup have the same position.
+    // And everything else that gets toolbars from elsewhere only returns maximum 1 toolbar
+    const position = toolbarApi[0].position;
+    const anchor = getAnchor(position, elem);
+    lastContextPosition.set(position);
+    lastTrigger.set(TriggerCause.NewAnchor);
+
+    const contextBarEle = contextbar.element;
+    Css.remove(contextBarEle, 'display');
+
+    // Reset placement and transitions when moving to different elements
+    if (!isSameLaunchElement(elem)) {
+      Class.remove(contextBarEle, transitionClass);
+      Positioning.reset(sink, contextbar);
+    }
+
+    // Place the element
+    InlineView.showWithinBounds(contextbar, wrapInPopDialog(toolbarSpec), {
+      anchor,
+      transition: {
+        classes: [ transitionClass ],
+        mode: 'placement'
+      }
+    }, () => Optional.some(getBounds()));
+
+    // IMPORTANT: This must be stored after the initial render, otherwise the lookup of the last element in the
+    // anchor placement will be incorrect as it'll reuse the new element as the anchor point.
+    elem.fold(lastElement.clear, lastElement.set);
+
+    // It's possible we may have launched offscreen, if so then hide
+    if (shouldContextToolbarHide()) {
+      Css.set(contextBarEle, 'display', 'none');
+    }
+  };
+
+  let isDragging = false;
+
+  const launchContextToolbar = Throttler.last(() => {
+    // Don't launch if the editor doesn't have focus or has been destroyed
+    if (!editor.hasFocus() || editor.removed || isDragging) {
+      return;
+    }
+
+    // If currently transitioning then throttle again so we don't interrupt the transition
+    if (Class.has(contextbar.element, transitionClass)) {
+      launchContextToolbar.throttle();
+    } else {
+      const scopes = getScopes();
+      ToolbarLookup.lookup(scopes, editor).fold(
+        close,
+        (info) => {
+          launchContext(info.toolbars, Optional.some(info.elem));
+        }
+      );
+    }
+  }, 17); // 17ms is used as that's about 1 frame at 60fps
+
+  editor.on('init', () => {
+    editor.on('remove', close);
+    editor.on('ScrollContent ScrollWindow ObjectResized ResizeEditor longpress', hideOrRepositionIfNecessary);
+
+    // FIX: Make it go away when the action makes it go away. E.g. deleting a column deletes the table.
+    editor.on('click keyup focus SetContent', launchContextToolbar.throttle);
+
+    editor.on(hideContextToolbarEvent, close);
+    editor.on(showContextToolbarEvent, (e) => {
+      const scopes = getScopes();
+      // TODO: Have this stored in a better structure
+      Obj.get(scopes.lookupTable, e.toolbarKey).each((ctx) => {
+        // ASSUMPTION: this is only used to open one specific toolbar at a time, hence [ctx]
+        launchContext([ ctx ], Optionals.someIf(e.target !== editor, e.target));
+        // Forms launched via this way get immediate focus
+        InlineView.getContent(contextbar).each(Keying.focusIn);
+      });
+    });
+
+    editor.on('focusout', (_e) => {
+      Delay.setEditorTimeout(editor, () => {
+        if (Focus.search(sink.element).isNone() && Focus.search(contextbar.element).isNone()) {
+          close();
+        }
+      }, 0);
+    });
+
+    editor.on('SwitchMode', () => {
+      if (editor.mode.isReadOnly()) {
+        close();
+      }
+    });
+
+    // TINY-10640: Firefox was flaking in tests and was not properly dismissing the toolbar could not reproduce it manually but adding this seems to resolve it.
+    editor.on('ExecCommand', ({ command }) => {
+      if (command.toLowerCase() === 'toggleview') {
+        close();
+      }
+    });
+
+    editor.on('AfterProgressState', (event) => {
+      if (event.state) {
+        close();
+      } else if (editor.hasFocus()) {
+        launchContextToolbar.throttle();
+      }
+    });
+
+    editor.on('dragstart', () => {
+      isDragging = true;
+    });
+    editor.on('dragend drop', () => {
+      isDragging = false;
+    });
+
+    editor.on('NodeChange', (_e) => {
+      Focus.search(contextbar.element).fold(
+        launchContextToolbar.throttle,
+        Fun.noop
+      );
+    });
+  });
+};
+
+export { register };
+

package/src/themes/silver/main/ts/ui/context/ContextToolbarAnchor.ts

@@ -0,0 +1,146 @@
+import { AnchorSpec, Bounds, Boxes, Bubble, Layout, LayoutInset, MaxHeight, MaxWidth } from '@ephox/alloy';
+import { InlineContent } from '@ephox/bridge';
+import { Optional } from '@ephox/katamari';
+import { Compare, Css, Height, Scroll, SugarElement, Traverse } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import { getSelectionBounds, isVerticalOverlap } from './ContextToolbarBounds';
+
+type Layout = typeof LayoutInset.north;
+type AnchorLayouts = AnchorSpec['layouts'];
+
+export interface PositionData {
+  readonly lastElement: () => Optional<SugarElement<Element>>;
+  readonly isReposition: () => boolean;
+  readonly getMode: () => string;
+}
+
+const bubbleSize = 12;
+const bubbleAlignments = {
+  valignCentre: [],
+  alignCentre: [],
+  alignLeft: [ 'tox-pop--align-left' ],
+  alignRight: [ 'tox-pop--align-right' ],
+  right: [ 'tox-pop--right' ],
+  left: [ 'tox-pop--left' ],
+  bottom: [ 'tox-pop--bottom' ],
+  top: [ 'tox-pop--top' ],
+  inset: [ 'tox-pop--inset' ]
+};
+
+const anchorOverrides = {
+  maxHeightFunction: MaxHeight.expandable(),
+  maxWidthFunction: MaxWidth.expandable()
+};
+
+const isEntireElementSelected = (editor: Editor, elem: SugarElement<Element>) => {
+  const rng = editor.selection.getRng();
+  const leaf = Traverse.leaf(SugarElement.fromDom(rng.startContainer), rng.startOffset);
+  return rng.startContainer === rng.endContainer && rng.startOffset === rng.endOffset - 1 && Compare.eq(leaf.element, elem);
+};
+
+const preservePosition = <T>(elem: SugarElement<HTMLElement>, position: string, f: (elem: SugarElement<HTMLElement>) => T): T => {
+  const currentPosition = Css.getRaw(elem, 'position');
+  Css.set(elem, 'position', position);
+  const result = f(elem);
+  currentPosition.each((pos) => Css.set(elem, 'position', pos));
+  return result;
+};
+
+// Don't use an inset layout when using a selection/line based anchors as it'll cover the content and can't be moved out the way
+const shouldUseInsetLayouts = (position: InlineContent.ContextPosition): boolean =>
+  position === 'node';
+
+/**
+ * This function is designed to attempt to intelligently detect where the contextbar should be anchored when using an inside
+ * layout. It will attempt to preserve the previous outside placement when anchoring to the same element. However, when the
+ * placement is re-triggered (e.g. not triggered by a reposition) and the current editor selection overlaps with the contextbar,
+ * then the anchoring should flip from the previous position to avoid conflicting with the selection.
+ */
+const determineInsetLayout = (editor: Editor, contextbar: SugarElement<HTMLElement>, elem: SugarElement<Element>, data: PositionData, bounds: Bounds) => {
+  const selectionBounds = getSelectionBounds(editor);
+  const isSameAnchorElement = data.lastElement().exists((prev) => Compare.eq(elem, prev));
+
+  if (isEntireElementSelected(editor, elem)) {
+    // The entire anchor element is selected so it'll always overlap with the selection, in which case just
+    // preserve or show at the top for a new anchor element.
+    return isSameAnchorElement ? LayoutInset.preserve : LayoutInset.north;
+  } else if (isSameAnchorElement) {
+    // Preserve the position, get the bounds and then see if we have an overlap.
+    // If overlapping and this wasn't triggered by a reposition then flip the placement
+    return preservePosition(contextbar, data.getMode(), () => {
+      // TINY-8890: The negative 20px threshold here was arrived at by considering the use
+      // case of a table with default heights for the rows. The threshold had to be
+      // large enough so that the context toolbar would not prevent the user selecting
+      // in the row containing the context toolbar.
+      const isOverlapping = isVerticalOverlap(selectionBounds, Boxes.box(contextbar), -20);
+      return isOverlapping && !data.isReposition() ? LayoutInset.flip : LayoutInset.preserve;
+    });
+  } else {
+    // Attempt to find the best layout to use that won't cause an overlap for the new anchor element
+    // Note: In fixed positioning mode we need to translate by adding the scroll pos to get the absolute position
+    const yBounds = data.getMode() === 'fixed' ? bounds.y + Scroll.get().top : bounds.y;
+    const contextbarHeight = Height.get(contextbar) + bubbleSize;
+    return yBounds + contextbarHeight <= selectionBounds.y ? LayoutInset.north : LayoutInset.south;
+  }
+};
+
+const getAnchorSpec = (editor: Editor, mobile: boolean, data: PositionData, position: InlineContent.ContextPosition): AnchorLayouts => {
+  // IMPORTANT: We lazily determine the layout here so that we only do the calculations if absolutely necessary
+  const smartInsetLayout = (elem: SugarElement<Element>): Layout => (anchor, element, bubbles, placee, bounds) => {
+    const layout = determineInsetLayout(editor, placee, elem, data, bounds);
+    // Adjust the anchor box to use the passed y bound coords so that we simulate a "docking" type of behaviour
+    const newAnchor = {
+      ...anchor,
+      y: bounds.y,
+      height: bounds.height
+    };
+    return {
+      ...layout(newAnchor, element, bubbles, placee, bounds),
+      // Ensure this is always the preferred option if no outside layouts fit
+      alwaysFit: true
+    };
+  };
+
+  const getInsetLayouts = (elem: SugarElement<Element>): Layout[] =>
+    shouldUseInsetLayouts(position) ? [ smartInsetLayout(elem) ] : [];
+
+  // On desktop we prioritise north-then-south because it's cleaner, but on mobile we prioritise south to try to avoid overlapping with native context toolbars
+  const desktopAnchorSpecLayouts: AnchorLayouts = {
+    onLtr: (elem) => [ Layout.north, Layout.south, Layout.northeast, Layout.southeast, Layout.northwest, Layout.southwest ].concat(getInsetLayouts(elem)),
+    onRtl: (elem) => [ Layout.north, Layout.south, Layout.northwest, Layout.southwest, Layout.northeast, Layout.southeast ].concat(getInsetLayouts(elem))
+  };
+
+  const mobileAnchorSpecLayouts: AnchorLayouts = {
+    onLtr: (elem) => [ Layout.south, Layout.southeast, Layout.southwest, Layout.northeast, Layout.northwest, Layout.north ].concat(getInsetLayouts(elem)),
+    onRtl: (elem) => [ Layout.south, Layout.southwest, Layout.southeast, Layout.northwest, Layout.northeast, Layout.north ].concat(getInsetLayouts(elem))
+  };
+
+  return mobile ? mobileAnchorSpecLayouts : desktopAnchorSpecLayouts;
+};
+
+const getAnchorLayout = (editor: Editor, position: InlineContent.ContextPosition, isTouch: boolean, data: PositionData): Partial<AnchorSpec> => {
+  if (position === 'line') {
+    return {
+      bubble: Bubble.nu(bubbleSize, 0, bubbleAlignments),
+      layouts: {
+        onLtr: () => [ Layout.east ],
+        onRtl: () => [ Layout.west ]
+      },
+      overrides: anchorOverrides
+    };
+  } else {
+    return {
+      // Ensure that inset layouts use a 1px bubble since we're hiding the bubble arrow
+      bubble: Bubble.nu(0, bubbleSize, bubbleAlignments, 1 / bubbleSize),
+      layouts: getAnchorSpec(editor, isTouch, data, position),
+      overrides: anchorOverrides
+    };
+  }
+};
+
+export {
+  getAnchorLayout,
+  shouldUseInsetLayouts
+};

package/src/themes/silver/main/ts/ui/context/ContextToolbarBounds.ts

@@ -0,0 +1,132 @@
+import { Bounds, Boxes } from '@ephox/alloy';
+import { InlineContent } from '@ephox/bridge';
+import { Optional } from '@ephox/katamari';
+import { Scroll, SelectorFind, SugarBody, SugarElement, SugarNode, Traverse, WindowVisualViewport } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import * as Options from '../../api/Options';
+import { UiFactoryBackstageShared } from '../../backstage/Backstage';
+
+// The "threshold" here is the amount of overlap. To make the overlap check
+// be more permissive (return true for 'almost' an overlap), use a negative
+// threshold value
+const isVerticalOverlap = (a: Bounds, b: Bounds, threshold: number): boolean =>
+  b.bottom - a.y >= threshold && a.bottom - b.y >= threshold;
+
+const getRangeRect = (rng: Range): DOMRect => {
+  const rect = rng.getBoundingClientRect();
+  // Some ranges (eg <td><br></td>) will return a 0x0 rect, so we'll need to calculate it from the leaf instead
+  if (rect.height <= 0 && rect.width <= 0) {
+    const leaf = Traverse.leaf(SugarElement.fromDom(rng.startContainer), rng.startOffset).element;
+    const elm = SugarNode.isText(leaf) ? Traverse.parent(leaf) : Optional.some(leaf);
+    return elm.filter(SugarNode.isElement)
+      .map((e) => e.dom.getBoundingClientRect())
+      // We have nothing valid, so just fallback to the original rect
+      .getOr(rect);
+  } else {
+    return rect;
+  }
+};
+
+const getSelectionBounds = (editor: Editor): Bounds => {
+  const rng = editor.selection.getRng();
+  const rect = getRangeRect(rng);
+  if (editor.inline) {
+    const scroll = Scroll.get();
+    return Boxes.bounds(scroll.left + rect.left, scroll.top + rect.top, rect.width, rect.height);
+  } else {
+    // Translate to the top level document, as rect is relative to the iframe viewport
+    const bodyPos = Boxes.absolute(SugarElement.fromDom(editor.getBody()));
+    return Boxes.bounds(bodyPos.x + rect.left, bodyPos.y + rect.top, rect.width, rect.height);
+  }
+};
+
+const getAnchorElementBounds = (editor: Editor, lastElement: Optional<SugarElement<Element>>): Bounds =>
+  lastElement
+    .filter((elem): elem is SugarElement<HTMLElement> => SugarBody.inBody(elem) && SugarNode.isHTMLElement(elem))
+    .map(Boxes.absolute)
+    .getOrThunk(() => getSelectionBounds(editor));
+
+const getHorizontalBounds = (contentAreaBox: Bounds, viewportBounds: Bounds, margin: number): { x: number; width: number } => {
+  const x = Math.max(contentAreaBox.x + margin, viewportBounds.x);
+  const right = Math.min(contentAreaBox.right - margin, viewportBounds.right);
+  return { x, width: right - x };
+};
+
+const getVerticalBounds = (
+  editor: Editor,
+  contentAreaBox: Bounds,
+  viewportBounds: Bounds,
+  isToolbarLocationTop: boolean,
+  toolbarType: InlineContent.ContextPosition,
+  margin: number
+): { y: number; bottom: number } => {
+  const container = SugarElement.fromDom(editor.getContainer());
+  const header = SelectorFind.descendant<HTMLElement>(container, '.tox-editor-header').getOr(container);
+  const headerBox = Boxes.box(header);
+  const isToolbarBelowContentArea = headerBox.y >= contentAreaBox.bottom;
+  const isToolbarAbove = isToolbarLocationTop && !isToolbarBelowContentArea;
+
+  // Scenario toolbar top & inline: Bottom of the header -> Bottom of the viewport
+  if (editor.inline && isToolbarAbove) {
+    return {
+      y: Math.max(headerBox.bottom + margin, viewportBounds.y),
+      bottom: viewportBounds.bottom
+    };
+  }
+
+  // Scenario toolbar top & inline: Top of the viewport -> Top of the header
+  if (editor.inline && !isToolbarAbove) {
+    return {
+      y: viewportBounds.y,
+      bottom: Math.min(headerBox.y - margin, viewportBounds.bottom)
+    };
+  }
+
+  // Allow line based context toolbar to overlap the statusbar
+  const containerBounds = toolbarType === 'line' ? Boxes.box(container) : contentAreaBox;
+
+  // Scenario toolbar bottom & Iframe: Bottom of the header -> Bottom of the editor container
+  if (isToolbarAbove) {
+    return {
+      y: Math.max(headerBox.bottom + margin, viewportBounds.y),
+      bottom: Math.min(containerBounds.bottom - margin, viewportBounds.bottom)
+    };
+  }
+
+  // Scenario toolbar bottom & Iframe: Top of the editor container -> Top of the header
+  return {
+    y: Math.max(containerBounds.y + margin, viewportBounds.y),
+    bottom: Math.min(headerBox.y - margin, viewportBounds.bottom)
+  };
+};
+
+const getContextToolbarBounds = (
+  editor: Editor,
+  sharedBackstage: UiFactoryBackstageShared,
+  toolbarType: InlineContent.ContextPosition,
+  margin: number = 0
+): Bounds => {
+  const viewportBounds = WindowVisualViewport.getBounds(window);
+  const contentAreaBox = Boxes.box(SugarElement.fromDom(editor.getContentAreaContainer()));
+  const toolbarOrMenubarEnabled = Options.isMenubarEnabled(editor) || Options.isToolbarEnabled(editor) || Options.isMultipleToolbars(editor);
+
+  const { x, width } = getHorizontalBounds(contentAreaBox, viewportBounds, margin);
+
+  // Create bounds that lets the context toolbar overflow outside the content area, but remains in the viewport
+  if (editor.inline && !toolbarOrMenubarEnabled) {
+    return Boxes.bounds(x, viewportBounds.y, width, viewportBounds.height);
+  } else {
+    const isToolbarTop = sharedBackstage.header.isPositionedAtTop();
+    const { y, bottom } = getVerticalBounds(editor, contentAreaBox, viewportBounds, isToolbarTop, toolbarType, margin);
+    return Boxes.bounds(x, y, width, bottom - y);
+  }
+};
+
+export {
+  getContextToolbarBounds,
+  getAnchorElementBounds,
+  getSelectionBounds,
+  isVerticalOverlap
+};