@atlaskit/editor-plugin-table 5.3.15 → 5.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/plugins/table/event-handlers.js +4 -3
- package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js +1 -0
- package/dist/cjs/plugins/table/types.js +5 -3
- package/dist/cjs/plugins/table/ui/FloatingInsertButton/index.js +5 -0
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -11
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +2 -2
- package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +114 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +60 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/index.js +11 -112
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/types.js +5 -0
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +1 -7
- package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js +7 -2
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/messages.js +5 -0
- package/dist/cjs/plugins/table/ui/ui-styles.js +28 -25
- package/dist/cjs/plugins/table/utils/dom.js +16 -7
- package/dist/cjs/plugins/table/utils/index.js +12 -6
- package/dist/es2019/plugins/table/event-handlers.js +5 -4
- package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js +2 -1
- package/dist/es2019/plugins/table/types.js +5 -3
- package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js +5 -0
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -11
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +2 -2
- package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +93 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +61 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js +2 -99
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/types.js +1 -0
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +1 -7
- package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js +8 -3
- package/dist/es2019/plugins/table/ui/common-styles.js +8 -6
- package/dist/es2019/plugins/table/ui/messages.js +5 -0
- package/dist/es2019/plugins/table/ui/ui-styles.js +44 -3
- package/dist/es2019/plugins/table/utils/dom.js +13 -6
- package/dist/es2019/plugins/table/utils/index.js +1 -1
- package/dist/esm/plugins/table/event-handlers.js +5 -4
- package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js +2 -1
- package/dist/esm/plugins/table/types.js +5 -3
- package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js +5 -0
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js +3 -11
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +2 -2
- package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +104 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +50 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/index.js +2 -110
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/types.js +1 -0
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js +1 -7
- package/dist/esm/plugins/table/ui/TableFloatingControls/index.js +8 -3
- package/dist/esm/plugins/table/ui/common-styles.js +2 -2
- package/dist/esm/plugins/table/ui/messages.js +5 -0
- package/dist/esm/plugins/table/ui/ui-styles.js +27 -24
- package/dist/esm/plugins/table/utils/dom.js +15 -6
- package/dist/esm/plugins/table/utils/index.js +1 -1
- package/dist/types/plugins/table/types.d.ts +5 -3
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.d.ts +6 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +6 -0
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts +2 -16
- package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/types.d.ts +11 -0
- package/dist/types/plugins/table/ui/messages.d.ts +5 -0
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types/plugins/table/utils/dom.d.ts +3 -2
- package/dist/types/plugins/table/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/types.d.ts +5 -3
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts +2 -16
- package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/CornerControls/types.d.ts +11 -0
- package/dist/types-ts4.5/plugins/table/ui/messages.d.ts +5 -0
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -0
- package/dist/types-ts4.5/plugins/table/utils/dom.d.ts +3 -2
- package/dist/types-ts4.5/plugins/table/utils/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/plugins/table/event-handlers.ts +7 -2
- package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts +7 -1
- package/src/plugins/table/types.ts +7 -4
- package/src/plugins/table/ui/FloatingInsertButton/index.tsx +8 -0
- package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx +5 -7
- package/src/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +2 -2
- package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx +1 -1
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +107 -0
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +66 -0
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx +2 -125
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/types.ts +12 -0
- package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx +3 -3
- package/src/plugins/table/ui/TableFloatingControls/index.tsx +22 -14
- package/src/plugins/table/ui/common-styles.ts +8 -5
- package/src/plugins/table/ui/messages.ts +6 -0
- package/src/plugins/table/ui/ui-styles.ts +45 -3
- package/src/plugins/table/utils/dom.ts +16 -4
- package/src/plugins/table/utils/index.ts +2 -1
|
@@ -68,7 +68,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
|
|
|
68
68
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
69
69
|
var tableStyles = exports.tableStyles = function tableStyles(props) {
|
|
70
70
|
var _props$featureFlags;
|
|
71
|
-
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n ", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n left: -4px;\n z-index: ", ";\n\n .", " {\n align-self: end;\n position: absolute;\n height: 100%;\n width: 24px;\n }\n\n .", " {\n position: absolute;\n bottom: -3px;\n left: 6px;\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n }\n }\n\n .", " {\n .", " {\n height: 24px;\n position: absolute;\n top: ", ";\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n height: 24px;\n width: 100%;\n }\n\n .", " {\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n position: absolute;\n right: -2px;\n }\n }\n\n .", "\n .", " {\n bottom: -1px;\n }\n\n .", " {\n cursor: grab;\n padding: 0;\n\n border-radius: 6px;\n width: max-content;\n height: max-content;\n border: 2px solid ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n outline: none !important;\n\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n\n &:hover {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.selected {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.danger {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.disabled {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n ", "\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(props), (0, _uiStyles.hoveredCell)(props), _uiStyles.hoveredWarningCell, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') && (0, _uiStyles.insertLine)(props), (0, _uiStyles.resizeHandle)(props), rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(props), (0, _uiStyles.dragInsertButtonWrapper)(props), (0, _uiStyles.DeleteButton)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)(props), stickyScrollbarStyles(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.COLUMN_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(props), (0, _uiStyles.rowControlsWrapperDotStyle)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableHeaderCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1 : _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableBorderDeleteColor)(props), (0, _consts.tableToolbarDeleteColor)(props), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(props), (0, _uiStyles.HeaderButtonDanger)(props), _types.TableCssClassName.NUMBERED_COLUMN, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize : _editorSharedStyles.akEditorTableToolbarSize - 1, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? 0 : 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableBorderSelectedColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellSelectedColor)(props), _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableCellDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), _editorSharedStyles.akEditorUnitZIndex * 100, tableRowControlStyles(), _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop + 1, tableWrapperStyles(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
71
|
+
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n ", "\n\n ", "\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n ", "\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n .", ", .", " {\n width: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n .", " {\n display: grid;\n align-items: center;\n position: absolute;\n left: -4px;\n z-index: ", ";\n\n .", " {\n align-self: end;\n position: absolute;\n height: 100%;\n width: 24px;\n }\n\n .", " {\n position: absolute;\n bottom: -3px;\n left: 6px;\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n }\n }\n\n .", " {\n .", " {\n height: 24px;\n position: absolute;\n top: ", ";\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n height: 24px;\n width: 100%;\n }\n\n .", " {\n background-color: ", ";\n height: 4px;\n width: 4px;\n border-radius: 50%;\n position: absolute;\n right: -2px;\n }\n }\n\n .", "\n .", " {\n bottom: -1px;\n }\n\n .", " {\n cursor: grab;\n padding: 0;\n\n border-radius: 6px;\n width: max-content;\n height: max-content;\n border: 2px solid ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n outline: none !important;\n\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n\n &:hover {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.selected {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.danger {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n\n &.disabled {\n svg {\n rect {\n fill: ", ";\n }\n g {\n fill: ", ";\n }\n }\n }\n }\n\n ", "\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n // add a background above the first numbered column cell when sticky header is engaged\n // which hides the table when scrolling\n .", ":first-of-type::after {\n content: '';\n display: block;\n height: 33px;\n width: 100%;\n background-color: ", ";\n position: absolute;\n\n // the extra pixel is accounting for borders\n top: -34px;\n left: -1px;\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: ", "px;\n\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", ":not(.", ") {\n cursor: pointer;\n }\n .", ":not(.", "):hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n /* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n td.", ",\n td.", ",\n th.", ".", ",\n th.", ".", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n ", ";\n z-index: ", ";\n }\n }\n }\n ", "\n .", ".", " {\n z-index: ", ";\n }\n\n .", " {\n position: absolute;\n top: ", "px;\n }\n\n ", "\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(props), (0, _uiStyles.hoveredCell)(props), _uiStyles.hoveredWarningCell, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') && (0, _uiStyles.insertLine)(props), (0, _uiStyles.resizeHandle)(props), rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(props), (0, _uiStyles.dragInsertButtonWrapper)(props), (0, _uiStyles.dragCornerControlButton)(props), (0, _uiStyles.DeleteButton)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)(props), stickyScrollbarStyles(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(props), (0, _uiStyles.rowControlsWrapperDotStyle)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableHeaderCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1 : _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableBorderDeleteColor)(props), (0, _consts.tableToolbarDeleteColor)(props), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _editorSharedStyles.akEditorUnitZIndex * 13, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(props), (0, _uiStyles.HeaderButtonDanger)(props), _types.TableCssClassName.NUMBERED_COLUMN, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize : _editorSharedStyles.akEditorTableToolbarSize - 1, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? 0 : 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableBorderSelectedColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellSelectedColor)(props), _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableCellDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), _editorSharedStyles.akEditorUnitZIndex * 100, tableRowControlStyles(), _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, tableWrapperStyles(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
72
72
|
};
|
|
73
73
|
var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
74
74
|
var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
|
|
@@ -65,5 +65,10 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
|
|
|
65
65
|
id: 'fabric.editor.tables.adjustColumn',
|
|
66
66
|
defaultMessage: 'Adjust column',
|
|
67
67
|
description: 'Tooltip displayed on table column resize handle'
|
|
68
|
+
},
|
|
69
|
+
cornerControl: {
|
|
70
|
+
id: 'fabric.editor.cornerControl',
|
|
71
|
+
defaultMessage: 'Highlight table',
|
|
72
|
+
description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
|
|
68
73
|
}
|
|
69
74
|
});
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
7
|
+
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
14
14
|
var _constants = require("@atlaskit/theme/constants");
|
|
15
15
|
var _types = require("../types");
|
|
16
16
|
var _consts = require("./consts");
|
|
17
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
|
|
17
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
|
|
18
18
|
var InsertLine = function InsertLine(props, cssString) {
|
|
19
19
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
|
|
20
20
|
};
|
|
@@ -43,74 +43,77 @@ var InsertButtonHover = function InsertButtonHover() {
|
|
|
43
43
|
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
44
44
|
};
|
|
45
45
|
var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper(props) {
|
|
46
|
-
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: -5px;\n left: 3px;\n }\n .", " {\n ", "\n }\n .", ":hover {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
46
|
+
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n position: absolute;\n z-index: ", ";\n bottom: -5px;\n left: 3px;\n }\n\n .", " {\n ", "\n }\n\n .", ":hover {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, white)", ";\n color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n border-radius: 50%;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
47
|
+
};
|
|
48
|
+
var dragCornerControlButton = exports.dragCornerControlButton = function dragCornerControlButton(props) {
|
|
49
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n width: 12px;\n height: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: ", ";\n left: ", ";\n background-color: ", ";\n border-radius: 50%;\n border: none;\n padding: 0;\n outline: none;\n z-index: ", ";\n\n &.active .", " {\n background-color: ", ";\n border-color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n\n .", " {\n border-color: ", ";\n }\n }\n }\n\n .", " {\n border: 1px solid\n ", ";\n border-radius: 50%;\n width: 6px;\n height: 6px;\n }\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, "var(--ds-space-negative-075, -6px)", "var(--ds-space-075, 6px)", "var(--ds-surface, #FFF)", _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-background-accent-gray-subtler, #DCDFE4)");
|
|
47
50
|
};
|
|
48
51
|
var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
|
|
49
|
-
return (0, _react.css)(
|
|
52
|
+
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n width: 2px;\n left: 9px;\n "));
|
|
50
53
|
};
|
|
51
54
|
var insertRowButtonWrapper = exports.insertRowButtonWrapper = function insertRowButtonWrapper(props) {
|
|
52
|
-
return (0, _react.css)(
|
|
55
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n height: 2px;\n top: -11px;\n left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
53
56
|
};
|
|
54
57
|
var columnControlsLineMarker = exports.columnControlsLineMarker = function columnControlsLineMarker() {
|
|
55
|
-
return (0, _react.css)(
|
|
58
|
+
return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
|
|
56
59
|
};
|
|
57
60
|
var DeleteButton = exports.DeleteButton = function DeleteButton(props) {
|
|
58
|
-
return (0, _react.css)(
|
|
61
|
+
return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat((0, _consts.tableCellSelectedDeleteIconBackground)(props), ";\n color: ").concat((0, _consts.tableCellSelectedDeleteIconColor)(props), ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _consts.tableCellHoverDeleteIconBackground)(props), (0, _consts.tableCellHoverDeleteIconColor)(props));
|
|
59
62
|
};
|
|
60
63
|
var OverflowShadow = exports.OverflowShadow = function OverflowShadow(props) {
|
|
61
|
-
return (0, _react.css)(
|
|
64
|
+
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", "\n ", "%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px)") : "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide - 10 : -2, "px)"), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
|
|
62
65
|
};
|
|
63
66
|
var columnHeaderButton = function columnHeaderButton(props, cssString) {
|
|
64
67
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
65
|
-
return (0, _react.css)(
|
|
68
|
+
return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n "])), (0, _consts.tableHeaderCellBackgroundColor)(props), cssString);
|
|
66
69
|
} else {
|
|
67
|
-
return (0, _react.css)(
|
|
70
|
+
return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n "])), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), cssString);
|
|
68
71
|
}
|
|
69
72
|
};
|
|
70
73
|
var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
|
|
71
|
-
return (0, _react.css)(
|
|
74
|
+
return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsSelectedZIndex);
|
|
72
75
|
};
|
|
73
76
|
var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
|
|
74
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
77
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n tr\n th:last-child\n .", "::before,\n tr\n td:last-child\n .", "::before {\n content: '';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: ", ";\n right: 0px;\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)") : '';
|
|
75
78
|
};
|
|
76
79
|
var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls(props) {
|
|
77
|
-
return (0, _react.css)(
|
|
80
|
+
return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n\n .", " {\n display: flex;\n flex-direction: row;\n }\n }\n\n .", " {\n box-sizing: border-box;\n\n .", " {\n display: grid;\n justify-items: center;\n }\n }\n "])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
|
|
78
81
|
};
|
|
79
82
|
var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle(props) {
|
|
80
83
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
81
|
-
return (0, _react.css)(
|
|
84
|
+
return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n display: none;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER);
|
|
82
85
|
} else {
|
|
83
|
-
return (0, _react.css)(
|
|
86
|
+
return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
84
87
|
}
|
|
85
88
|
};
|
|
86
89
|
var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration(props) {
|
|
87
90
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
|
|
88
|
-
return (0, _react.css)(
|
|
91
|
+
return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: 100%;\n left: 0;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", ", &.", " {\n .", "::after {\n ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n }\n }\n }\n\n table tr:first-of-type th.", " {\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border-color: ", ";\n border-left: ", "px solid\n ", ";\n left: -", "px;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n box-sizing: content-box;\n height: ").concat(_consts.tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
89
92
|
} else {
|
|
90
|
-
return (0, _react.css)(
|
|
93
|
+
return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n // floating dot for adding column button\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n // floating dot for adding column button - overriding style on last column to avoid scroll\n ", "\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: none;\n height: ").concat(_consts.tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
91
94
|
}
|
|
92
95
|
};
|
|
93
96
|
var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
94
|
-
return (0, _react.css)(
|
|
97
|
+
return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
|
|
95
98
|
};
|
|
96
99
|
var hoveredCell = exports.hoveredCell = function hoveredCell(props) {
|
|
97
|
-
return (0, _react.css)(
|
|
100
|
+
return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
|
|
98
101
|
};
|
|
99
|
-
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(
|
|
102
|
+
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n td.", " {\n background-color: ", " !important; // We need to override the background-color added to the cell\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
|
|
100
103
|
|
|
101
104
|
// move the resize handle zone completely inside the table cell to avoid overflow
|
|
102
105
|
var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
|
|
103
|
-
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(
|
|
106
|
+
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n tr\n th:last-child\n .", ",\n tr\n td:last-child\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: 0;\n cursor: col-resize;\n z-index: ", ";\n }\n "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
|
|
104
107
|
};
|
|
105
108
|
var resizeHandleOverrides = function resizeHandleOverrides(props) {
|
|
106
109
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
|
|
107
|
-
return (0, _react.css)(
|
|
110
|
+
return (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before,\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
|
|
108
111
|
}
|
|
109
|
-
return (0, _react.css)(
|
|
112
|
+
return (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
110
113
|
};
|
|
111
114
|
var resizeHandle = exports.resizeHandle = function resizeHandle(props) {
|
|
112
|
-
return (0, _react.css)(
|
|
115
|
+
return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n ", "\n\n ", "\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
113
116
|
};
|
|
114
117
|
var insertLine = exports.insertLine = function insertLine(props) {
|
|
115
|
-
return (0, _react.css)(
|
|
118
|
+
return (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n td.", "::before {\n content: ' ';\n position: absolute;\n left: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n top: -1px;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n position: absolute;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -1px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: ", ";\n bottom: 0;\n height: ", "px;\n width: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: ", ";\n bottom: 0;\n position: absolute;\n height: ", "px;\n width: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
|
|
116
119
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.
|
|
6
|
+
exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
|
|
7
7
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
8
8
|
var _types = require("../types");
|
|
9
9
|
var _consts = require("../ui/consts");
|
|
@@ -37,7 +37,7 @@ var isTableContainerOrWrapper = exports.isTableContainerOrWrapper = function isT
|
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
/** drag-and-drop classes */
|
|
40
|
-
var
|
|
40
|
+
var isDragRowControlsButton = exports.isDragRowControlsButton = function isDragRowControlsButton(node) {
|
|
41
41
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_ROW_CONTROLS) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
|
|
42
42
|
};
|
|
43
43
|
var isDragRowFloatingInsertDot = exports.isDragRowFloatingInsertDot = function isDragRowFloatingInsertDot(node) {
|
|
@@ -46,6 +46,9 @@ var isDragRowFloatingInsertDot = exports.isDragRowFloatingInsertDot = function i
|
|
|
46
46
|
var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = function isDragColumnFloatingInsertDot(node) {
|
|
47
47
|
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
|
|
48
48
|
};
|
|
49
|
+
var isDragCornerButton = exports.isDragCornerButton = function isDragCornerButton(node) {
|
|
50
|
+
return (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER);
|
|
51
|
+
};
|
|
49
52
|
|
|
50
53
|
/*
|
|
51
54
|
* This function returns which side of a given element the mouse cursor is,
|
|
@@ -101,14 +104,20 @@ var isDragColumnFloatingInsertDot = exports.isDragColumnFloatingInsertDot = func
|
|
|
101
104
|
* the same is valid to the right side.
|
|
102
105
|
*/
|
|
103
106
|
|
|
104
|
-
var getMousePositionHorizontalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, elementContentRects, gapInPixels) {
|
|
107
|
+
var getMousePositionHorizontalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, elementContentRects, gapInPixels, isDragAndDropEnabled) {
|
|
105
108
|
var element = mouseEvent.target;
|
|
106
109
|
if (element instanceof HTMLElement) {
|
|
107
|
-
var _closestCell$id, _elementContentRects$, _elementContentRects$2;
|
|
108
110
|
var width, x;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
if (isDragAndDropEnabled) {
|
|
112
|
+
// mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
|
|
113
|
+
// directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
|
|
114
|
+
width = element.clientWidth;
|
|
115
|
+
} else {
|
|
116
|
+
var _closestCell$id, _elementContentRects$, _elementContentRects$2;
|
|
117
|
+
var closestCell = element.closest(SELECTOR_TABLE_LEAFS);
|
|
118
|
+
var id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
|
|
119
|
+
width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 || (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
|
|
120
|
+
}
|
|
112
121
|
x = mouseEvent.offsetX;
|
|
113
122
|
if (width <= 0) {
|
|
114
123
|
return null;
|
|
@@ -243,6 +243,18 @@ Object.defineProperty(exports, "isDragColumnFloatingInsertDot", {
|
|
|
243
243
|
return _dom.isDragColumnFloatingInsertDot;
|
|
244
244
|
}
|
|
245
245
|
});
|
|
246
|
+
Object.defineProperty(exports, "isDragCornerButton", {
|
|
247
|
+
enumerable: true,
|
|
248
|
+
get: function get() {
|
|
249
|
+
return _dom.isDragCornerButton;
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
Object.defineProperty(exports, "isDragRowControlsButton", {
|
|
253
|
+
enumerable: true,
|
|
254
|
+
get: function get() {
|
|
255
|
+
return _dom.isDragRowControlsButton;
|
|
256
|
+
}
|
|
257
|
+
});
|
|
246
258
|
Object.defineProperty(exports, "isDragRowFloatingInsertDot", {
|
|
247
259
|
enumerable: true,
|
|
248
260
|
get: function get() {
|
|
@@ -285,12 +297,6 @@ Object.defineProperty(exports, "isRowDeleteButtonVisible", {
|
|
|
285
297
|
return _rowControls.isRowDeleteButtonVisible;
|
|
286
298
|
}
|
|
287
299
|
});
|
|
288
|
-
Object.defineProperty(exports, "isRowDragControlsButton", {
|
|
289
|
-
enumerable: true,
|
|
290
|
-
get: function get() {
|
|
291
|
-
return _dom.isRowDragControlsButton;
|
|
292
|
-
}
|
|
293
|
-
});
|
|
294
300
|
Object.defineProperty(exports, "isSelectionUpdated", {
|
|
295
301
|
enumerable: true,
|
|
296
302
|
get: function get() {
|
|
@@ -9,7 +9,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
|
|
|
9
9
|
import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
|
|
10
10
|
import { deleteColumns, deleteRows } from './transforms';
|
|
11
11
|
import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
|
|
12
|
-
import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
|
|
12
|
+
import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
|
|
13
13
|
import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
|
|
14
14
|
const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
|
|
15
15
|
const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
|
|
@@ -132,7 +132,7 @@ export const handleMouseOver = (view, mouseEvent) => {
|
|
|
132
132
|
// Ignore any `mousedown` `event` from control and numbered column buttons
|
|
133
133
|
// PM end up changing selection during shift selection if not prevented
|
|
134
134
|
export const handleMouseDown = (_, event) => {
|
|
135
|
-
const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target)));
|
|
135
|
+
const isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
|
|
136
136
|
if (isControl) {
|
|
137
137
|
event.preventDefault();
|
|
138
138
|
}
|
|
@@ -198,10 +198,11 @@ export const handleMouseMove = (view, event, elementContentRects) => {
|
|
|
198
198
|
dispatch
|
|
199
199
|
} = view;
|
|
200
200
|
const {
|
|
201
|
-
insertColumnButtonIndex
|
|
201
|
+
insertColumnButtonIndex,
|
|
202
|
+
isDragAndDropEnabled
|
|
202
203
|
} = getPluginState(state);
|
|
203
204
|
const [startIndex, endIndex] = getColumnOrRowIndex(element);
|
|
204
|
-
const positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects) === 'right' ? endIndex : startIndex;
|
|
205
|
+
const positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
|
|
205
206
|
if (positionColumn !== insertColumnButtonIndex) {
|
|
206
207
|
return showInsertColumnButton(positionColumn)(state, dispatch);
|
|
207
208
|
}
|
|
@@ -6,7 +6,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
|
|
|
6
6
|
import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
|
|
7
7
|
import { getPluginState as getTablePluginState } from '../plugin-factory';
|
|
8
8
|
import { DragAndDropActionType } from './actions';
|
|
9
|
-
import { clearDropTarget, moveSource, setDropTarget } from './commands';
|
|
9
|
+
import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
|
|
10
10
|
import { DropTargetType } from './consts';
|
|
11
11
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
12
12
|
import { pluginKey } from './plugin-key';
|
|
@@ -90,6 +90,7 @@ export const createPlugin = (dispatch, eventDispatcher) => {
|
|
|
90
90
|
autoScroller.start({
|
|
91
91
|
input: location.current.input
|
|
92
92
|
});
|
|
93
|
+
toggleDragMenu(false)(editorView.state, editorView.dispatch);
|
|
93
94
|
},
|
|
94
95
|
onDrag(event) {
|
|
95
96
|
autoScroller.updateInput({
|
|
@@ -50,9 +50,6 @@ export const TableCssClassName = {
|
|
|
50
50
|
COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
|
|
51
51
|
COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
|
|
52
52
|
COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
|
|
53
|
-
COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
|
|
54
|
-
COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
|
|
55
|
-
COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
|
|
56
53
|
ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
|
|
57
54
|
ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
|
|
58
55
|
ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
|
|
@@ -87,7 +84,12 @@ export const TableCssClassName = {
|
|
|
87
84
|
DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
|
|
88
85
|
DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
|
|
89
86
|
DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
|
|
87
|
+
DRAG_COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
|
|
88
|
+
DRAG_COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
|
|
89
|
+
DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
|
|
90
90
|
DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
|
|
91
|
+
DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
|
|
92
|
+
DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
|
|
91
93
|
/** Other classes */
|
|
92
94
|
NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
|
|
93
95
|
NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
|