refactor(page): use computePosition for attachment

[lawvs]

Fix #3745
Fix #4138

Fix #4028 (part of)

Note that #3744 is not fixed by this PR.

Refactor attachment options bookmarklet options image options code options code lang list

API Changes

• Move portal to blocks/components(will be move to new components packages next time)
• New utils createDelayHoverSignal(Deprecated)

// !Deprecated
// After `hover leave` + `hoverDelay`, the abortController will be aborted
const createDelayHoverSignal: (abortController: AbortController, hoverDelay?: number) => {
    onHover: () => void;
    onHoverLeave: () => void;
}

• createLitPortal now supports shodowDom options, with a default value of true.
• Rename createLitPortal to createSimplePortal
• New createLitPortal with auto update position supports

type PortalOptions = {
  template: TemplateResult<1> | ((updatePortal: () => void) => TemplateResult<1>);
  container?: HTMLElement;
  /** call abort() will unmount the portal */
  abortController?: AbortController;
  /**
   * Defaults to `true`.
   */
  shadowDom?: boolean;
  /** Lit render options */
  renderOptions?: RenderOptions;
  /**
   * Defaults to `true`.
   * If true, the portalRoot will be added a class `blocksuite-portal`. It's useful for finding the portalRoot.
   */
  identifyWrapper?: boolean;
};

export function createLitPortal({
  computePosition: computePositionOptions,
  ...portalOptions
}: PortalOptions & {
  /**
   * See https://floating-ui.com/docs/computePosition
   */
  computePosition?: {
    referenceElement: VirtualElement;
    /**
     * Default `false`.
     */
    autoUpdate?: true | AutoUpdateOptions;
  } & Partial<ComputePositionConfig>;
}): HTMLDivElement

// Examples
import { flip, offset } from '@floating-ui/dom';

createLitPortal({
  template: html``,
  computePosition: {
    referenceElement: anchor,
    placement: 'top-end',
    middleware: [flip(), offset(4)],
    autoUpdate: true,
  },
  abortController, // call abort() will unmount the portal
});

Alternative Design

createLitPortal({
  template: html``,
  computePosition: {
    referenceElement: anchor,
    placement: 'top-end',
    // Simplify middleware usage <--
    options: {
      flip: true,
      offset: 4
    },
    // Also can fallback to origin floating-ui API
    // middleware: [],
    autoUpdate: true,
  },
});

Screen.Recording.2023-08-23.at.00.45.26.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 25, 2023 2:42am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Aug 25, 2023 2:42am