@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
411 lines (401 loc) • 20.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _css;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
import { EDITOR_LIST_DENSE_GAP } from './list';
import { blanketSelectionStyles, boxShadowSelectionStyles, dangerBackgroundStyles, dangerBorderStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
var akEditorLineHeight = 1.714;
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
export var TaskDecisionSharedCssClassName = {
DECISION_CONTAINER: 'decisionItemView-content-wrap',
TASK_CONTAINER: 'taskItemView-content-wrap',
//NOTE: value is a selector (data attribute), not a class name
TASK_LIST_CONTAINER: '[data-node-type="actionList"]',
TASK_ITEM: 'task-item',
TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var tasksAndDecisionsStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".taskItemView-content-wrap, .".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
position: 'relative',
minWidth: 48
}), ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
marginTop: 0
}), ".".concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"span[contenteditable='false']": {
height: "".concat(akEditorLineHeight, "em")
}
}), ".".concat(TaskDecisionSharedCssClassName.TASK_ITEM), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: akEditorLineHeight
}),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[data-task-local-id]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"span[contenteditable='false']": {
height: "".concat(akEditorLineHeight, "em")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"span[contenteditable='false'] + div": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(akEditorLineHeight, "em")
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[data-task-list-local-id]': {
margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
// If task item is not first in the list then set margin top to 4px.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div + div': {
marginTop: "var(--ds-space-050, 4px)"
}
},
// If task list is not first in the document then set margin top to 4px.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[data-task-list-local-id] div[data-task-list-local-id]': {
marginTop: "var(--ds-space-050, 4px)",
marginLeft: "var(--ds-space-300, 24px)"
},
// When action list is inside panel
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> div[data-task-list-local-id]:first-child': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
margin: '0 !important'
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
var TASKLIST_CONTAINER_MARGIN_DENSE = "max(0px, calc(10px + (var(--ak-editor-base-font-size, ".concat(akEditorFullPageDefaultFontSize, "px) - ").concat(akEditorFullPageDenseFontSize, "px) * (2 / 3)))");
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var getDenseTasksAndDecisionsStyles = function getDenseTasksAndDecisionsStyles(baseFontSize) {
if (!baseFontSize || baseFontSize === akEditorFullPageDefaultFontSize) {
return css({});
}
return css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
'.ProseMirror': _defineProperty(_defineProperty(_defineProperty({}, TaskDecisionSharedCssClassName.TASK_LIST_CONTAINER, {
// Task lists: container top margin
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
marginTop: TASKLIST_CONTAINER_MARGIN_DENSE
}), "".concat(TaskDecisionSharedCssClassName.TASK_LIST_CONTAINER, " > * + *"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
marginTop: EDITOR_LIST_DENSE_GAP
}), "".concat(TaskDecisionSharedCssClassName.TASK_LIST_CONTAINER, " ").concat(TaskDecisionSharedCssClassName.TASK_LIST_CONTAINER, ", .").concat(TaskDecisionSharedCssClassName.TASK_CONTAINER, " .").concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
marginTop: EDITOR_LIST_DENSE_GAP
})
});
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var decisionStyles = css((_css = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(akEditorSelectedNodeClassName, " > [data-decision-wrapper], ol[data-node-type='decisionList'].").concat(akEditorSelectedNodeClassName),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
[{
borderRadius: "var(--ds-radius-small, 4px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
hideNativeBrowserTextSelectionStyles]), '.danger', _defineProperty({}, ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER, ".").concat(akEditorSelectedNodeClassName, " > div"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
'&::after': {
content: 'none' // reset the Blanket selection style
}
})), '[data-prosemirror-node-name="decisionItem"]', {
listStyleType: 'none'
}), '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]', {
cursor: 'pointer',
display: 'flex',
flexDirection: 'row',
margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
padding: "var(--ds-space-100, 8px)",
paddingLeft: "var(--ds-space-150, 12px)",
borderRadius: "var(--ds-radius-small, 4px)",
backgroundColor: "var(--ds-background-neutral, #0515240F)",
position: 'relative'
}), '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]', {
flex: '0 0 16px',
height: '16px',
width: '16px',
margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
color: "var(--ds-icon-subtle, #505258)",
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}), '[data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]', {
color: "var(--ds-icon-success, #6A9A23)"
}), '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span', {
display: 'inline-block',
flexShrink: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography -- Mirroring icon styles
lineHeight: 1
}), '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg', {
overflow: 'hidden',
pointerEvents: 'none',
color: 'currentColor',
verticalAlign: 'bottom'
}), '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]', {
margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3.5)"),
position: 'absolute',
color: "var(--ds-text-subtlest, #6B6E76)",
pointerEvents: 'none',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: 'calc(100% - 50px)'
}), '[data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]', {
display: 'none'
}), _defineProperty(_css, '[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]', {
margin: 0,
wordWrap: 'break-word',
minWidth: 0,
flex: '1 1 auto'
})));
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var decisionDangerStyles = css(_defineProperty({}, ".".concat(akEditorSelectedNodeClassName, ".danger > [data-decision-wrapper], ol[data-node-type='decisionList'].").concat(akEditorSelectedNodeClassName, ".danger"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
[dangerBackgroundStyles, dangerBorderStyles]));
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var decisionIconWithVisualRefresh = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="legacy"]': {
display: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
boxSizing: 'border-box',
paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)',
'@media screen and (forced-colors: active)': {
color: 'canvastext',
filter: 'grayscale(1)'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
width: "var(--ds-space-300, 24px)",
height: "var(--ds-space-300, 24px)"
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var decisionIconWithoutVisualRefresh = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="refreshed"]': {
display: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
width: '32px',
height: '32px',
'@media screen and (forced-colors: active)': {
filter: 'grayscale(1)',
color: 'canvastext',
fill: 'canvas'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
maxWidth: '100%',
maxHeight: '100%',
fill: "var(--ds-surface, #FFFFFF)",
width: '32px',
height: '32px'
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var taskItemStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"]': {
listStyle: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
display: 'flex',
flexDirection: 'row',
position: 'relative'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
position: 'absolute',
color: "var(--ds-text-subtlest, #6B6E76)",
margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"),
pointerEvents: 'none',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: 'calc(100% - 50px)',
display: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
"[data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
display: 'block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"] [data-component="content"]': {
margin: 0,
wordWrap: 'break-word',
minWidth: 0,
flex: '1 1 auto'
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var taskItemCheckboxStyles = css(_defineProperty({
/**
* Background
*/
'--local-background': "var(--ds-background-input, #FFFFFF)",
'--local-background-active': "var(--ds-background-input-pressed, #FFFFFF)",
'--local-background-checked': "var(--ds-background-selected-bold, #1868DB)",
'--local-background-checked-hover': "var(--ds-background-selected-bold-hovered, #1558BC)",
'--local-background-disabled': "var(--ds-background-disabled, #17171708)",
'--local-background-hover': "var(--ds-background-input-hovered, #F8F8F8)",
/**
* Border
*/
'--local-border': "var(--ds-border-input, #8C8F97)",
'--local-border-active': "var(--ds-border, #0B120E24)",
'--local-border-checked': "var(--ds-background-selected-bold, #1868DB)",
'--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, #1558BC)",
'--local-border-checked-invalid': "var(--ds-border-danger, #E2483D)",
'--local-border-disabled': "var(--ds-background-disabled, #17171708)",
'--local-border-focus': "var(--ds-border-focused, #4688EC)",
'--local-border-hover': "var(--ds-border-input, #8C8F97)",
'--local-border-invalid': "var(--ds-border-danger, #E2483D)",
/**
* Tick
*/
'--local-tick-active': "var(--ds-icon-inverse, #FFFFFF)",
'--local-tick-checked': "var(--ds-icon-inverse, #FFFFFF)",
'--local-tick-disabled': "var(--ds-icon-disabled, #080F214A)",
'--local-tick-rest': 'transparent'
}, "[data-prosemirror-node-name=\"taskItem\"] .".concat(TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER, ", [data-prosemirror-node-name=\"blockTaskItem\"] .").concat(TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER), {
flex: '0 0 24px',
width: '24px',
height: '24px',
position: 'relative',
alignSelf: 'start',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"& > input[type='checkbox']": {
opacity: 0,
width: '100%',
height: '100%',
zIndex: 1,
cursor: 'pointer',
outline: 'none',
margin: 0,
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&[disabled]': {
cursor: 'default'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& + svg': {
'--checkbox-background-color': 'var(--local-background)',
'--checkbox-border-color': 'var(--local-border)',
'--checkbox-tick-color': 'var(--local-tick-rest)',
color: 'var(--checkbox-background-color)',
fill: 'var(--checkbox-tick-color)',
transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
boxSizing: 'border-box',
display: 'inline',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'rect:first-of-type': {
stroke: 'var(--checkbox-border-color)',
strokeWidth: "var(--ds-border-width, 1px)",
transition: 'stroke 0.2s ease-in-out'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:focus + svg, &:checked:focus + svg': {
borderRadius: "var(--ds-radius-small, 0.25rem)",
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)"),
outlineOffset: "var(--ds-space-negative-025, -2px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:hover + svg': {
'--checkbox-background-color': 'var(--local-background-hover)',
'--checkbox-border-color': 'var(--local-border-hover)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:checked:hover + svg': {
'--checkbox-background-color': 'var(--local-background-checked-hover)',
'--checkbox-border-color': 'var(--local-border-checked-hover)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:checked + svg': {
'--checkbox-background-color': 'var(--local-background-checked)',
'--checkbox-border-color': 'var(--local-border-checked)',
'--checkbox-tick-color': 'var(--local-tick-checked)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:active + svg': {
'--checkbox-background-color': 'var(--local-background-active)',
'--checkbox-border-color': 'var(--local-border-active)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:checked:active + svg': {
'--checkbox-background-color': 'var(--local-background-active)',
'--checkbox-border-color': 'var(--local-border-active)',
'--checkbox-tick-color': 'var(--local-tick-active)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
'--checkbox-background-color': 'var(--local-background-disabled)',
'--checkbox-border-color': 'var(--local-border-disabled)',
cursor: 'not-allowed',
pointerEvents: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&:disabled:checked + svg': {
'--checkbox-tick-color': 'var(--local-tick-disabled)'
}
}
}));
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var taskItemStylesWithBlockTaskItem = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"], [data-prosemirror-node-name="blockTaskItem"]': {
listStyle: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"] [data-component="task-item-main"], [data-prosemirror-node-name="blockTaskItem"] [data-component="task-item-main"]': {
display: 'flex',
flexDirection: 'row',
position: 'relative'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"] [data-component="placeholder"], [data-prosemirror-node-name="blockTaskItem"] [data-component="placeholder"]': {
position: 'absolute',
color: "var(--ds-text-subtlest, #6B6E76)",
margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"),
pointerEvents: 'none',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: 'calc(100% - 50px)',
display: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
"[data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder'], [data-prosemirror-node-name='blockTaskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
display: 'block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="taskItem"] [data-component="content"], [data-prosemirror-node-name="blockTaskItem"] [data-component="content"]': {
margin: 0,
wordWrap: 'break-word',
minWidth: 0,
flex: '1 1 auto'
}
});