@atlaskit/editor-common/dist/types/utils/breakout.d.ts

A package that contains common classes and components for editor and renderer

import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
import type { NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
import type { BreakoutMode } from '../types/breakout';
import { mapBreakpointToLayoutMaxWidth } from '../ui/BaseTheme';
import { getBreakpoint } from '../ui/WidthProvider';
export declare const breakoutResizableNodes: string[];
export declare const getBreakoutResizableNodeTypes: (schema: Schema) => Set<NodeType>;
/**
 * Variables required to construct a context for breakout ssr inline script.
 *
 * TODO: Clean this up after: https://product-fabric.atlassian.net/browse/ED-8942
 *
 */
export type BreakoutConstsType = {
    calcBreakoutWidth: any;
    calcBreakoutWithCustomWidth: (breakoutConsts: BreakoutConstsType) => (mode: 'full-width' | 'wide', width: number | null, editorContainerWidth: number) => string;
    calcLineLength: (breakoutConsts: BreakoutConstsType) => () => number;
    calcWideWidth: (breakoutConsts: BreakoutConstsType) => (containerWidth?: number, maxWidth?: number, fallback?: string, padding?: number) => string;
    defaultLayoutWidth: number;
    fullWidthLayoutWidth: number;
    getBreakpoint: typeof getBreakpoint;
    mapBreakpointToLayoutMaxWidth: typeof mapBreakpointToLayoutMaxWidth;
    padding: number;
    wideLayoutWidth: number;
    wideScaleRatio: number;
};
declare const breakoutConsts: BreakoutConstsType;
export declare const absoluteBreakoutWidth: (layout: "full-width" | "wide" | string, containerWidth: number) => number;
export { breakoutConsts };
export declare const calcWideWidth: (containerWidth?: number, maxWidth?: number, fallback?: string, padding?: number) => string;
export declare const calcBreakoutWidth: any;
export declare const calcBreakoutWithCustomWidth: (mode: 'full-width' | 'wide', width: number | null, editorContainerWidth: number) => string;
export declare function calculateBreakoutStyles({ mode, widthStateLineLength, widthStateWidth, }: {
    mode: BreakoutMarkAttrs['mode'];
    /**
     * clientWidth of the content area in the editor (ie. EditorPlugin contentComponents).
     * Expected to be retrieved via `WidthState.width`.
     */
    widthStateLineLength?: number;
    /**
     * offsetWidth of the content the editor is attached to.
     * Expected to be retrieved via `WidthState.lineLength`.
     */
    widthStateWidth?: number;
}): {
    display: string;
    justifyContent: string;
    marginLeft?: undefined;
    minWidth: number;
    transform: string;
    transition: string;
    type: 'line-length-unknown';
    width: any;
} | {
    display?: undefined;
    justifyContent?: undefined;
    marginLeft: string;
    minWidth: number;
    transform: string;
    transition: string;
    type: 'line-length-known';
    width: any;
};
export declare function calcBreakoutWidthPx(mode: BreakoutMarkAttrs['mode'], widthStateWidth?: number, padding?: number): number;
export declare const getNextBreakoutMode: (currentMode?: BreakoutMode) => Exclude<BreakoutMode, "max">;
export declare const getTitle: (layout?: BreakoutMode) => {
    id: string;
    defaultMessage: string;
    description: string;
};