@atlaskit/editor-core 187.13.0 → 187.13.2

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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 187.13.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f194fae5d20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f194fae5d20) - Refactored ResizableMediaSingleNext to use editor-common utils
8
+
3
9
  ## 187.13.0
4
10
 
5
11
  ### Minor Changes
@@ -4,9 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.UnwrappedResizableMediaSingleNext = void 0;
8
- exports.calcOffsetLeft = calcOffsetLeft;
9
- exports.resizerNextTestId = exports.default = void 0;
7
+ exports.resizerNextTestId = exports.default = exports.UnwrappedResizableMediaSingleNext = void 0;
10
8
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
9
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
12
10
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -34,21 +32,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
34
32
  var _styles = require("@atlaskit/editor-common/styles");
35
33
  var _mediaSingle = require("@atlaskit/editor-common/media-single");
36
34
  var _guideline = require("@atlaskit/editor-common/guideline");
37
- var _guidelines = require("./guidelines");
38
35
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
39
36
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
40
37
  var resizerNextTestId = 'mediaSingle.resizerNext.testid';
41
- exports.resizerNextTestId = resizerNextTestId;
42
- function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
43
- if (wrapper && insideInlineLike && !insideLayout) {
44
- var currentNode = wrapper;
45
- var boundingRect = currentNode.getBoundingClientRect();
46
- return boundingRect.left - pmViewDom.getBoundingClientRect().left;
47
- }
48
- return 0;
49
- }
50
38
 
51
39
  // TODO: Create new fixed image size event
40
+ exports.resizerNextTestId = resizerNextTestId;
52
41
  var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
53
42
  var actionSubject = type === 'embed' ? _analytics.ACTION_SUBJECT.EMBEDS : _analytics.ACTION_SUBJECT.MEDIA_SINGLE;
54
43
  return {
@@ -139,7 +128,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
139
128
  });
140
129
  var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
141
130
  _this.state = {
142
- offsetLeft: calcOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
131
+ offsetLeft: (0, _mediaSingle.calculateOffsetLeft)(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
143
132
  // We default to true until we resolve the file type
144
133
  isVideoFile: true,
145
134
  isResizing: false,
@@ -169,7 +158,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
169
158
  }, {
170
159
  key: "componentDidUpdate",
171
160
  value: function componentDidUpdate(prevProps, prevState) {
172
- var offsetLeft = calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
161
+ var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
173
162
  if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
174
163
  this.setState({
175
164
  offsetLeft: offsetLeft
@@ -216,7 +205,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
216
205
  fullWidthMode = _this$props4.fullWidthMode;
217
206
 
218
207
  // disable guidelines for nested media single node
219
- return this.isNestedNode() ? [] : (0, _guidelines.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
208
+ return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
220
209
  }
221
210
 
222
211
  // Calculate width of media nodes for snaps based on dynamic guidelines
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.nextMajorVersion = exports.name = void 0;
7
7
  var name = "@atlaskit/editor-core";
8
8
  exports.name = name;
9
- var version = "187.13.0";
9
+ var version = "187.13.2";
10
10
  exports.version = version;
11
11
  var nextMajorVersion = function nextMajorVersion() {
12
12
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.13.0",
3
+ "version": "187.13.2",
4
4
  "sideEffects": false
5
5
  }
@@ -15,18 +15,9 @@ import { messages } from './resizable-media-single-messages';
15
15
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
16
16
  import classnames from 'classnames';
17
17
  import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
18
- import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
19
- import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
20
- import { generateDefaultGuidelines } from './guidelines';
18
+ import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
19
+ import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
21
20
  export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
22
- export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
23
- if (wrapper && insideInlineLike && !insideLayout) {
24
- const currentNode = wrapper;
25
- const boundingRect = currentNode.getBoundingClientRect();
26
- return boundingRect.left - pmViewDom.getBoundingClientRect().left;
27
- }
28
- return 0;
29
- }
30
21
 
31
22
  // TODO: Create new fixed image size event
32
23
  const getResizeAnalyticsEvent = (type, size, layout) => {
@@ -121,7 +112,7 @@ class ResizableMediaSingleNext extends React.Component {
121
112
  });
122
113
  const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
123
114
  this.state = {
124
- offsetLeft: calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
115
+ offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
125
116
  // We default to true until we resolve the file type
126
117
  isVideoFile: true,
127
118
  isResizing: false,
@@ -147,7 +138,7 @@ class ResizableMediaSingleNext extends React.Component {
147
138
  return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
148
139
  }
149
140
  componentDidUpdate(prevProps, prevState) {
150
- const offsetLeft = calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
141
+ const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
151
142
  if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
152
143
  this.setState({
153
144
  offsetLeft
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "187.13.0";
2
+ export const version = "187.13.2";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.13.0",
3
+ "version": "187.13.2",
4
4
  "sideEffects": false
5
5
  }
@@ -26,18 +26,9 @@ import { messages } from './resizable-media-single-messages';
26
26
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
27
27
  import classnames from 'classnames';
28
28
  import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
29
- import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
30
- import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
31
- import { generateDefaultGuidelines } from './guidelines';
29
+ import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
30
+ import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
32
31
  export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
33
- export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
34
- if (wrapper && insideInlineLike && !insideLayout) {
35
- var currentNode = wrapper;
36
- var boundingRect = currentNode.getBoundingClientRect();
37
- return boundingRect.left - pmViewDom.getBoundingClientRect().left;
38
- }
39
- return 0;
40
- }
41
32
 
42
33
  // TODO: Create new fixed image size event
43
34
  var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
@@ -130,7 +121,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
130
121
  });
131
122
  var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
132
123
  _this.state = {
133
- offsetLeft: calcOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
124
+ offsetLeft: calculateOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
134
125
  // We default to true until we resolve the file type
135
126
  isVideoFile: true,
136
127
  isResizing: false,
@@ -160,7 +151,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
160
151
  }, {
161
152
  key: "componentDidUpdate",
162
153
  value: function componentDidUpdate(prevProps, prevState) {
163
- var offsetLeft = calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
154
+ var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
164
155
  if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
165
156
  this.setState({
166
157
  offsetLeft: offsetLeft
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "187.13.0";
2
+ export var version = "187.13.2";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.13.0",
3
+ "version": "187.13.2",
4
4
  "sideEffects": false
5
5
  }
@@ -15,7 +15,6 @@ type State = {
15
15
  size: Dimensions;
16
16
  };
17
17
  export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
18
- export declare function calcOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
19
18
  type ResizableMediaSingleNextProps = Props & WrappedComponentProps;
20
19
  declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
21
20
  constructor(props: ResizableMediaSingleNextProps);
@@ -15,7 +15,6 @@ type State = {
15
15
  size: Dimensions;
16
16
  };
17
17
  export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
18
- export declare function calcOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
19
18
  type ResizableMediaSingleNextProps = Props & WrappedComponentProps;
20
19
  declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
21
20
  constructor(props: ResizableMediaSingleNextProps);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.13.0",
3
+ "version": "187.13.2",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -140,7 +140,7 @@
140
140
  "@af/editor-libra": "*",
141
141
  "@af/integration-testing": "*",
142
142
  "@atlaskit/code": "^14.6.0",
143
- "@atlaskit/collab-provider": "9.8.0",
143
+ "@atlaskit/collab-provider": "9.9.0",
144
144
  "@atlaskit/dropdown-menu": "^11.11.0",
145
145
  "@atlaskit/editor-extension-dropbox": "^0.4.0",
146
146
  "@atlaskit/editor-plugin-table": "^2.6.0",
@@ -1,117 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.generateDynamicGuidelines = exports.generateDefaultGuidelines = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
- var _memoizeOne = _interopRequireDefault(require("memoize-one"));
11
- var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
- var _guideline = require("@atlaskit/editor-common/guideline");
13
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
15
- var mediaSingleSelector = 'div.mediaSingleView-content-wrap:not(.ProseMirror-selectednode)';
16
- var getDefaultGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
17
- return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map(function (val, index) {
18
- return {
19
- key: "grid_".concat(index),
20
- position: {
21
- x: val / 12 * editorWidth
22
- }
23
- };
24
- });
25
- });
26
- var getWideGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
27
- var wideSpacing = editorWidth * _editorSharedStyles.breakoutWideScaleRatio / 2;
28
- return [{
29
- key: "wide_left",
30
- position: {
31
- x: -wideSpacing
32
- }
33
- }, {
34
- key: "wide_right",
35
- position: {
36
- x: wideSpacing
37
- }
38
- }];
39
- });
40
- var getFullWidthGuidelines = (0, _memoizeOne.default)(function (containerWidth) {
41
- var fullWidth = Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) / 2;
42
- return [{
43
- key: "full_width_left",
44
- position: {
45
- x: -fullWidth
46
- }
47
- }, {
48
- key: "full_width_right",
49
- position: {
50
- x: fullWidth
51
- }
52
- }];
53
- });
54
- var generateDefaultGuidelines = function generateDefaultGuidelines(editorWidth, containerWidth) {
55
- var isFullWidthMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
56
- var innerGrids = getDefaultGuidelines(editorWidth);
57
- var wideGuidelines = !isFullWidthMode ? getWideGuidelines(editorWidth) : [];
58
- var fullWidthGuidelines = !isFullWidthMode ? getFullWidthGuidelines(containerWidth) : [];
59
- return [].concat((0, _toConsumableArray2.default)(innerGrids), (0, _toConsumableArray2.default)(wideGuidelines), (0, _toConsumableArray2.default)(fullWidthGuidelines));
60
- };
61
- exports.generateDefaultGuidelines = generateDefaultGuidelines;
62
- var generateDynamicGuidelines = function generateDynamicGuidelines(view) {
63
- var dom = view.dom;
64
- var _dom$getBoundingClien = dom.getBoundingClientRect(),
65
- width = _dom$getBoundingClien.width;
66
- var halfWidth = width / 2;
67
- var keyIdx = 0;
68
- var dynamicGuidelines = (0, _toConsumableArray2.default)(dom.querySelectorAll(mediaSingleSelector)).map(function (elem, _index) {
69
- var pixelWidthAttr = elem.getAttribute('widthType') === 'pixel' ? elem.getAttribute('width') : '';
70
- var pixelWidth = parseFloat(pixelWidthAttr || '');
71
- if (Number.isNaN(pixelWidth)) {
72
- return [];
73
- }
74
- var commonStyles = {
75
- styles: {
76
- lineStyle: 'dashed'
77
- },
78
- show: false
79
- };
80
- var key = "".concat(_guideline.MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(++keyIdx);
81
- switch (elem.getAttribute('layout')) {
82
- case 'align-start':
83
- case 'wrap-left':
84
- return _objectSpread({
85
- position: {
86
- x: pixelWidth - halfWidth
87
- },
88
- key: key
89
- }, commonStyles);
90
- case 'align-end':
91
- case 'wrap-right':
92
- return _objectSpread({
93
- position: {
94
- x: width - pixelWidth - halfWidth
95
- },
96
- key: key
97
- }, commonStyles);
98
- case 'center':
99
- return [_objectSpread({
100
- position: {
101
- x: pixelWidth / 2
102
- },
103
- key: key
104
- }, commonStyles), _objectSpread({
105
- position: {
106
- x: -pixelWidth / 2
107
- },
108
- key: key
109
- }, commonStyles)];
110
- // we ignore full-width and wide
111
- default:
112
- return [];
113
- }
114
- }).flat();
115
- return dynamicGuidelines;
116
- };
117
- exports.generateDynamicGuidelines = generateDynamicGuidelines;
@@ -1,108 +0,0 @@
1
- import memoizeOne from 'memoize-one';
2
- import { akEditorGutterPadding, akEditorFullWidthLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
3
- import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from '@atlaskit/editor-common/guideline';
4
- const mediaSingleSelector = 'div.mediaSingleView-content-wrap:not(.ProseMirror-selectednode)';
5
- const getDefaultGuidelines = memoizeOne(editorWidth => {
6
- return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map((val, index) => ({
7
- key: `grid_${index}`,
8
- position: {
9
- x: val / 12 * editorWidth
10
- }
11
- }));
12
- });
13
- const getWideGuidelines = memoizeOne(editorWidth => {
14
- const wideSpacing = editorWidth * breakoutWideScaleRatio / 2;
15
- return [{
16
- key: `wide_left`,
17
- position: {
18
- x: -wideSpacing
19
- }
20
- }, {
21
- key: `wide_right`,
22
- position: {
23
- x: wideSpacing
24
- }
25
- }];
26
- });
27
- const getFullWidthGuidelines = memoizeOne(containerWidth => {
28
- const fullWidth = Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
29
- return [{
30
- key: `full_width_left`,
31
- position: {
32
- x: -fullWidth
33
- }
34
- }, {
35
- key: `full_width_right`,
36
- position: {
37
- x: fullWidth
38
- }
39
- }];
40
- });
41
- export const generateDefaultGuidelines = (editorWidth, containerWidth, isFullWidthMode = false) => {
42
- const innerGrids = getDefaultGuidelines(editorWidth);
43
- const wideGuidelines = !isFullWidthMode ? getWideGuidelines(editorWidth) : [];
44
- const fullWidthGuidelines = !isFullWidthMode ? getFullWidthGuidelines(containerWidth) : [];
45
- return [...innerGrids, ...wideGuidelines, ...fullWidthGuidelines];
46
- };
47
- export const generateDynamicGuidelines = view => {
48
- const {
49
- dom
50
- } = view;
51
- const {
52
- width
53
- } = dom.getBoundingClientRect();
54
- const halfWidth = width / 2;
55
- let keyIdx = 0;
56
- const dynamicGuidelines = [...dom.querySelectorAll(mediaSingleSelector)].map((elem, _index) => {
57
- const pixelWidthAttr = elem.getAttribute('widthType') === 'pixel' ? elem.getAttribute('width') : '';
58
- const pixelWidth = parseFloat(pixelWidthAttr || '');
59
- if (Number.isNaN(pixelWidth)) {
60
- return [];
61
- }
62
- const commonStyles = {
63
- styles: {
64
- lineStyle: 'dashed'
65
- },
66
- show: false
67
- };
68
- const key = `${MEDIA_DYNAMIC_GUIDELINE_PREFIX}${++keyIdx}`;
69
- switch (elem.getAttribute('layout')) {
70
- case 'align-start':
71
- case 'wrap-left':
72
- return {
73
- position: {
74
- x: pixelWidth - halfWidth
75
- },
76
- key,
77
- ...commonStyles
78
- };
79
- case 'align-end':
80
- case 'wrap-right':
81
- return {
82
- position: {
83
- x: width - pixelWidth - halfWidth
84
- },
85
- key,
86
- ...commonStyles
87
- };
88
- case 'center':
89
- return [{
90
- position: {
91
- x: pixelWidth / 2
92
- },
93
- key,
94
- ...commonStyles
95
- }, {
96
- position: {
97
- x: -pixelWidth / 2
98
- },
99
- key,
100
- ...commonStyles
101
- }];
102
- // we ignore full-width and wide
103
- default:
104
- return [];
105
- }
106
- }).flat();
107
- return dynamicGuidelines;
108
- };
@@ -1,108 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
5
- import memoizeOne from 'memoize-one';
6
- import { akEditorGutterPadding, akEditorFullWidthLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
7
- import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from '@atlaskit/editor-common/guideline';
8
- var mediaSingleSelector = 'div.mediaSingleView-content-wrap:not(.ProseMirror-selectednode)';
9
- var getDefaultGuidelines = memoizeOne(function (editorWidth) {
10
- return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map(function (val, index) {
11
- return {
12
- key: "grid_".concat(index),
13
- position: {
14
- x: val / 12 * editorWidth
15
- }
16
- };
17
- });
18
- });
19
- var getWideGuidelines = memoizeOne(function (editorWidth) {
20
- var wideSpacing = editorWidth * breakoutWideScaleRatio / 2;
21
- return [{
22
- key: "wide_left",
23
- position: {
24
- x: -wideSpacing
25
- }
26
- }, {
27
- key: "wide_right",
28
- position: {
29
- x: wideSpacing
30
- }
31
- }];
32
- });
33
- var getFullWidthGuidelines = memoizeOne(function (containerWidth) {
34
- var fullWidth = Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) / 2;
35
- return [{
36
- key: "full_width_left",
37
- position: {
38
- x: -fullWidth
39
- }
40
- }, {
41
- key: "full_width_right",
42
- position: {
43
- x: fullWidth
44
- }
45
- }];
46
- });
47
- export var generateDefaultGuidelines = function generateDefaultGuidelines(editorWidth, containerWidth) {
48
- var isFullWidthMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
49
- var innerGrids = getDefaultGuidelines(editorWidth);
50
- var wideGuidelines = !isFullWidthMode ? getWideGuidelines(editorWidth) : [];
51
- var fullWidthGuidelines = !isFullWidthMode ? getFullWidthGuidelines(containerWidth) : [];
52
- return [].concat(_toConsumableArray(innerGrids), _toConsumableArray(wideGuidelines), _toConsumableArray(fullWidthGuidelines));
53
- };
54
- export var generateDynamicGuidelines = function generateDynamicGuidelines(view) {
55
- var dom = view.dom;
56
- var _dom$getBoundingClien = dom.getBoundingClientRect(),
57
- width = _dom$getBoundingClien.width;
58
- var halfWidth = width / 2;
59
- var keyIdx = 0;
60
- var dynamicGuidelines = _toConsumableArray(dom.querySelectorAll(mediaSingleSelector)).map(function (elem, _index) {
61
- var pixelWidthAttr = elem.getAttribute('widthType') === 'pixel' ? elem.getAttribute('width') : '';
62
- var pixelWidth = parseFloat(pixelWidthAttr || '');
63
- if (Number.isNaN(pixelWidth)) {
64
- return [];
65
- }
66
- var commonStyles = {
67
- styles: {
68
- lineStyle: 'dashed'
69
- },
70
- show: false
71
- };
72
- var key = "".concat(MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(++keyIdx);
73
- switch (elem.getAttribute('layout')) {
74
- case 'align-start':
75
- case 'wrap-left':
76
- return _objectSpread({
77
- position: {
78
- x: pixelWidth - halfWidth
79
- },
80
- key: key
81
- }, commonStyles);
82
- case 'align-end':
83
- case 'wrap-right':
84
- return _objectSpread({
85
- position: {
86
- x: width - pixelWidth - halfWidth
87
- },
88
- key: key
89
- }, commonStyles);
90
- case 'center':
91
- return [_objectSpread({
92
- position: {
93
- x: pixelWidth / 2
94
- },
95
- key: key
96
- }, commonStyles), _objectSpread({
97
- position: {
98
- x: -pixelWidth / 2
99
- },
100
- key: key
101
- }, commonStyles)];
102
- // we ignore full-width and wide
103
- default:
104
- return [];
105
- }
106
- }).flat();
107
- return dynamicGuidelines;
108
- };
@@ -1,4 +0,0 @@
1
- import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
2
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
3
- export declare const generateDefaultGuidelines: (editorWidth: number, containerWidth: number, isFullWidthMode?: boolean | undefined) => GuidelineConfig[];
4
- export declare const generateDynamicGuidelines: (view: EditorView) => GuidelineConfig[];
@@ -1,4 +0,0 @@
1
- import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
2
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
3
- export declare const generateDefaultGuidelines: (editorWidth: number, containerWidth: number, isFullWidthMode?: boolean | undefined) => GuidelineConfig[];
4
- export declare const generateDynamicGuidelines: (view: EditorView) => GuidelineConfig[];