@atlaskit/editor-core/dist/cjs/ui/EditorContentContainer/styles/baseStyles.js

A package contains Atlassian editor core functionality

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.maxModeReizeFixStyles = exports.editorLargeGutterPuddingReducedBaseStyles = exports.editorLargeGutterPuddingBaseStylesEditorControls = exports.editorLargeGutterPuddingBaseStyles = exports.baseStylesMaxContainerWidthFixes = exports.baseStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */

// = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
var akEditorCalculatedWideLayoutWidth = 1011;
// from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
var akEditorCalculatedWideLayoutWidthSmallViewport = 905;
var akEditorGutterPadding = 32;
var akEditorDefaultLayoutWidth = 760;
var akEditorFullWidthLayoutWidth = 1800;
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
var akEditorBreakpointForSmallDevice = "1266px";
var akEditorGutterPaddingReduced = 24;
var akEditorFullPageNarrowBreakout = 600;
var akEditorUltraWideLayoutWidth = 4000;

// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var baseStyles = exports.baseStyles = (0, _react.css)((0, _defineProperty2.default)({
  '--ak-editor--default-gutter-padding': "".concat(akEditorGutterPadding, "px"),
  '--ak-editor--default-layout-width': "".concat(akEditorDefaultLayoutWidth, "px"),
  '--ak-editor--resizer-handle-spacing': "12px",
  '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px"),
  /* calculate editor line length, 100cqw is the editor container width */
  '--ak-editor--line-length': 'min(calc(100cqw - var(--ak-editor--large-gutter-padding) * 2), var(--ak-editor--default-layout-width))',
  '--ak-editor--max-width-layout-width': "".concat(akEditorUltraWideLayoutWidth, "px"),
  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px"),
  '--ak-editor--breakout-full-page-guttering-padding': 'calc(var(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding))',
  '--ak-editor--breakout-fallback-width': 'calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))',
  '--ak-editor--breakout-min-width': '100%',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.fabric-editor--full-width-mode': {
    '--ak-editor--line-length': 'min(calc(100cqw - var(--ak-editor--large-gutter-padding) * 2), var(--ak-editor--full-width-layout-width))',
    /* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */
    '--ak-editor--breakout-fallback-width': '100%',
    '--ak-editor--breakout-min-width': '0px'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    '--ak-editor-max-container-width': 'calc(100cqw - var(--ak-editor--large-gutter-padding))',
    outline: 'none',
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
    fontSize: 'var(--ak-editor-base-font-size)'
  },
  /* We can't allow nodes that are inside other nodes to bleed from the parent container */
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block]': {
    '--ak-editor-max-container-width': '100%'
  }
}, "@container editor-area (width >= ".concat(akEditorBreakpointForSmallDevice, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
  }
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var maxModeReizeFixStyles = exports.maxModeReizeFixStyles = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.fabric-editor--max-width-mode': {
    '--ak-editor--line-length': 'min(calc(100cqw - var(--ak-editor--large-gutter-padding) * 2), var(--ak-editor--max-width-layout-width))',
    /* in max width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */
    '--ak-editor--breakout-fallback-width': '100%',
    '--ak-editor--breakout-min-width': '0px'
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var baseStylesMaxContainerWidthFixes = exports.baseStylesMaxContainerWidthFixes = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    '--ak-editor-max-container-width': 'calc(100cqw - var(--ak-editor--large-gutter-padding)*2)'
  }
});

// This is to avoid using akEditorGutterPaddingDynamic()
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var editorLargeGutterPuddingBaseStyles = exports.editorLargeGutterPuddingBaseStyles = (0, _react.css)({
  '--ak-editor--large-gutter-padding': '52px'
});

// This is to avoid using akEditorGutterPaddingDynamic
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var editorLargeGutterPuddingBaseStylesEditorControls = exports.editorLargeGutterPuddingBaseStylesEditorControls = (0, _react.css)({
  '--ak-editor--large-gutter-padding': '72px'
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var editorLargeGutterPuddingReducedBaseStyles = exports.editorLargeGutterPuddingReducedBaseStyles = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
  '--ak-editor--large-gutter-padding': "".concat(akEditorGutterPaddingReduced, "px")
}));