@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
55 lines (53 loc) • 5.92 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getOrderedListInlineStyles = getOrderedListInlineStyles;
exports.listsSharedStyles = exports.listItemCounterPadding = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("@emotion/react");
var _adfSchema = require("@atlaskit/adf-schema");
var _browser = _interopRequireDefault(require("../../utils/browser"));
var _templateObject;
var listItemCounterPadding = exports.listItemCounterPadding = 24;
var CSS_VAR_NAMES = /*#__PURE__*/function (CSS_VAR_NAMES) {
CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
return CSS_VAR_NAMES;
}(CSS_VAR_NAMES || {});
var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDigitsSize) {
// Previous padding-left was approximately 24px. We approximate that
// same value using "ch" units (which represent the width of a "0" digit
// character). We use "ch" so that this computed padding can now grow if
// the font-size ever enlarges.
var paddingLeft = "2.385ch";
if (itemCounterDigitsSize >= 3) {
// When there are 3 or more digits, we use a combination of "ch" units and
// pixel values so that while the computed padding grows if font-size ever
// enlarges, it doesn't over-scale with each digit (because of the fixed pixel
// portion of the computed value). This way, very large item counters will not
// become overly left-padded.
var fixedBasePx = 2;
paddingLeft = "calc(".concat(itemCounterDigitsSize + 1, "ch - ").concat(fixedBasePx, "px)");
}
return paddingLeft;
};
var stringifyStyle = function stringifyStyle(style) {
return Object.entries(style).reduce(function (str, _ref) {
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return "".concat(str).concat(key, ":").concat(value, ";");
}, "");
};
function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
var style = (0, _defineProperty2.default)({}, CSS_VAR_NAMES.ITEM_COUNTER_PADDING, getItemCounterLeftPadding(itemCounterDigitsSize));
if (styleFormat === 'string') {
return stringifyStyle(style);
}
return style;
}
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- There is some "flow-root" hack that is not actually valid css. Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
var listsSharedStyles = exports.listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /* =============== INDENTATION SPACING ========= */\n\n ul,\n ol {\n box-sizing: border-box;\n padding-left: var(\n ", ",\n ", "px\n );\n\n /*\n Firefox does not handle empty block element inside li tag.\n If there is not block element inside li tag,\n then firefox sets inherited height to li\n However, if there is any block element and if it's empty\n (or has empty inline element) then\n firefox sets li tag height to zero.\n More details at\n https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n */\n li p:empty,\n li p > span:empty {\n ", "\n }\n }\n\n ", ", ", " {\n /*\n Ensures list item content adheres to the list's margin instead\n of filling the entire block row. This is important to allow\n clicking interactive elements which are floated next to a list.\n\n For some history and context on this block, see PRs related to tickets.:\n @see ED-6551 - original issue.\n @see ED-7015 - follow up issue.\n @see ED-7447 - flow-root change.\n\n We use 'display: table' (old clear fix / new block formatting context hack)\n for older browsers and 'flow-root' for modern browsers.\n\n @see https://css-tricks.com/display-flow-root/\n */\n // For older browsers the do not support flow-root.\n /* stylelint-disable declaration-block-no-duplicate-properties */\n display: table;\n display: flow-root;\n /* stylelint-enable declaration-block-no-duplicate-properties */\n }\n\n /* =============== INDENTATION AESTHETICS ========= */\n\n /**\n We support nested lists up to six levels deep.\n **/\n\n /* LEGACY LISTS */\n\n ul,\n ul ul ul ul {\n list-style-type: disc;\n }\n\n ul ul,\n ul ul ul ul ul {\n list-style-type: circle;\n }\n\n ul ul ul,\n ul ul ul ul ul ul {\n list-style-type: square;\n }\n\n ol,\n ol ol ol ol {\n list-style-type: decimal;\n }\n ol ol,\n ol ol ol ol ol {\n list-style-type: lower-alpha;\n }\n ol ol ol,\n ol ol ol ol ol ol {\n list-style-type: lower-roman;\n }\n\n /* PREDICTABLE LISTS */\n\n ol[data-indent-level='1'],\n ol[data-indent-level='4'] {\n list-style-type: decimal;\n }\n\n ol[data-indent-level='2'],\n ol[data-indent-level='5'] {\n list-style-type: lower-alpha;\n }\n\n ol[data-indent-level='3'],\n ol[data-indent-level='6'] {\n list-style-type: lower-roman;\n }\n\n ul[data-indent-level='1'],\n ul[data-indent-level='4'] {\n list-style-type: disc;\n }\n\n ul[data-indent-level='2'],\n ul[data-indent-level='5'] {\n list-style-type: circle;\n }\n\n ul[data-indent-level='3'],\n ul[data-indent-level='6'] {\n list-style-type: square;\n }\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);