@atlaskit/native-embeds-common 2.2.4 → 2.2.6

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/compass.yml +2 -2
  3. package/dist/cjs/entry-points/native-embed-styles.js +23 -0
  4. package/dist/es2019/entry-points/native-embed-styles.js +23 -0
  5. package/dist/esm/entry-points/native-embed-styles.js +23 -0
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/native-embeds-common
2
2
 
3
+ ## 2.2.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`89392d1eb49c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/89392d1eb49c1) -
8
+ [fix] Keep native embeds and their resize handles aligned within old and new panel resize
9
+ boundaries, with a dynamic-config kill switch for rollback.
10
+ - Updated dependencies
11
+
12
+ ## 2.2.5
13
+
14
+ ### Patch Changes
15
+
16
+ - [`98f123ee15575`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98f123ee15575) -
17
+ [ux] Align native embed placeholders in edit mode on first paint
18
+
3
19
  ## 2.2.4
4
20
 
5
21
  ### Patch Changes
package/compass.yml CHANGED
@@ -1,7 +1,7 @@
1
1
  configVersion: 1
2
2
  id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/e056e542-a3ce-4443-88d3-ad37895abc0c
3
3
  name: '@atlaskit/native-embeds-common'
4
- ownerId: ari:cloud:identity::team/ebf6925a-b776-4f99-92b6-6f529449f814 # Eng - Create - Native Content Types - Team Silky (Stacey Douglas)
4
+ ownerId: ari:cloud:identity::team/9a858481-de73-4f94-a602-0df4cdf7b1fe # Whiteboards
5
5
  labels:
6
6
  - platform-code
7
7
  - platform-afm
@@ -16,7 +16,7 @@ links:
16
16
  url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
17
17
  - name: Slack Channel
18
18
  type: CHAT_CHANNEL
19
- url: https://atlassian.enterprise.slack.com/archives/C05BWLL499U # #native-content-types-eng
19
+ url: https://atlassian.enterprise.slack.com/archives/C0A0XRWTWSU # #proj-cc-wb-db-native-embeds
20
20
  - name: Native Embeds Common
21
21
  type: REPOSITORY
22
22
  url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/native-embeds/native-embeds-common
package/dist/cjs/entry-points/native-embed-styles.js CHANGED
@@ -63,6 +63,18 @@ var nativeEmbedAlignmentStyles = exports.nativeEmbedAlignmentStyles = (0, _react
63
63
  width: 'fit-content !important',
64
64
  maxWidth: '100cqw'
65
65
  },
66
+ // The editor loading path intentionally keeps its outer extension container at 100% width.
67
+ // Align the already-sized placeholder frame within that container until the native embed UI
68
+ // mounts and takes ownership of the outer wrapper's persisted width.
69
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
70
+ '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="center"] > [data-testid="native-embed-initial-placeholder"]': {
71
+ marginLeft: 'auto',
72
+ marginRight: 'auto'
73
+ },
74
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
75
+ '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="right"] > [data-testid="native-embed-initial-placeholder"]': {
76
+ marginLeft: 'auto'
77
+ },
66
78
  // Some renderer variants omit data-top-level even for top-level extensions. Mirror the native
67
79
  // embed runtime's DOM nesting detection instead: table cells/headers, expands, layouts, enclosing
68
80
  // extensions, sync blocks, and panels clamp the placeholder to the immediate containing node.
@@ -122,6 +134,17 @@ var nativeEmbedAlignmentStyles = exports.nativeEmbedAlignmentStyles = (0, _react
122
134
  paddingLeft: '0 !important',
123
135
  paddingRight: '0 !important'
124
136
  },
137
+ // Panel divider resizing can temporarily rebuild panel content before the
138
+ // native embed plugin re-syncs data-native-embed-nested. Support both the
139
+ // panel wrapper used by the old style and the content wrapper introduced by
140
+ // the new style, but only while the native embed containment kill switch is off.
141
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- DOM ancestry fallback for transient missing data-native-embed-nested
142
+ '.ProseMirror .ak-editor-panel .extension-container:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .ProseMirror .ak-editor-panel__content .extension-container:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .ak-editor-panel .extension-container.block:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .ak-editor-panel__content .extension-container.block:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width])': {
143
+ width: 'auto !important',
144
+ maxWidth: 'var(--native-embed-width) !important',
145
+ paddingLeft: '0 !important',
146
+ paddingRight: '0 !important'
147
+ },
125
148
  // Override the extension wrapper's width so alignment margins take effect.
126
149
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
127
150
  '.extension-container:has([data-native-embed-alignment="left"]), .ak-renderer-extension:has([data-native-embed-alignment="left"])': {
package/dist/es2019/entry-points/native-embed-styles.js CHANGED
@@ -56,6 +56,18 @@ export const nativeEmbedAlignmentStyles = css({
56
56
  width: 'fit-content !important',
57
57
  maxWidth: '100cqw'
58
58
  },
59
+ // The editor loading path intentionally keeps its outer extension container at 100% width.
60
+ // Align the already-sized placeholder frame within that container until the native embed UI
61
+ // mounts and takes ownership of the outer wrapper's persisted width.
62
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
63
+ '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="center"] > [data-testid="native-embed-initial-placeholder"]': {
64
+ marginLeft: 'auto',
65
+ marginRight: 'auto'
66
+ },
67
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
68
+ '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="right"] > [data-testid="native-embed-initial-placeholder"]': {
69
+ marginLeft: 'auto'
70
+ },
59
71
  // Some renderer variants omit data-top-level even for top-level extensions. Mirror the native
60
72
  // embed runtime's DOM nesting detection instead: table cells/headers, expands, layouts, enclosing
61
73
  // extensions, sync blocks, and panels clamp the placeholder to the immediate containing node.
@@ -115,6 +127,17 @@ export const nativeEmbedAlignmentStyles = css({
115
127
  paddingLeft: '0 !important',
116
128
  paddingRight: '0 !important'
117
129
  },
130
+ // Panel divider resizing can temporarily rebuild panel content before the
131
+ // native embed plugin re-syncs data-native-embed-nested. Support both the
132
+ // panel wrapper used by the old style and the content wrapper introduced by
133
+ // the new style, but only while the native embed containment kill switch is off.
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- DOM ancestry fallback for transient missing data-native-embed-nested
135
+ '.ProseMirror .ak-editor-panel .extension-container:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .ProseMirror .ak-editor-panel__content .extension-container:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .ak-editor-panel .extension-container.block:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .ak-editor-panel__content .extension-container.block:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width])': {
136
+ width: 'auto !important',
137
+ maxWidth: 'var(--native-embed-width) !important',
138
+ paddingLeft: '0 !important',
139
+ paddingRight: '0 !important'
140
+ },
118
141
  // Override the extension wrapper's width so alignment margins take effect.
119
142
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
120
143
  '.extension-container:has([data-native-embed-alignment="left"]), .ak-renderer-extension:has([data-native-embed-alignment="left"])': {
package/dist/esm/entry-points/native-embed-styles.js CHANGED
@@ -56,6 +56,18 @@ export var nativeEmbedAlignmentStyles = css({
56
56
  width: 'fit-content !important',
57
57
  maxWidth: '100cqw'
58
58
  },
59
+ // The editor loading path intentionally keeps its outer extension container at 100% width.
60
+ // Align the already-sized placeholder frame within that container until the native embed UI
61
+ // mounts and takes ownership of the outer wrapper's persisted width.
62
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
63
+ '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="center"] > [data-testid="native-embed-initial-placeholder"]': {
64
+ marginLeft: 'auto',
65
+ marginRight: 'auto'
66
+ },
67
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target the editor loading frame through its shared placeholder metadata
68
+ '[data-native-embed-initial-placeholder="true"][data-native-embed-alignment="right"] > [data-testid="native-embed-initial-placeholder"]': {
69
+ marginLeft: 'auto'
70
+ },
59
71
  // Some renderer variants omit data-top-level even for top-level extensions. Mirror the native
60
72
  // embed runtime's DOM nesting detection instead: table cells/headers, expands, layouts, enclosing
61
73
  // extensions, sync blocks, and panels clamp the placeholder to the immediate containing node.
@@ -115,6 +127,17 @@ export var nativeEmbedAlignmentStyles = css({
115
127
  paddingLeft: '0 !important',
116
128
  paddingRight: '0 !important'
117
129
  },
130
+ // Panel divider resizing can temporarily rebuild panel content before the
131
+ // native embed plugin re-syncs data-native-embed-nested. Support both the
132
+ // panel wrapper used by the old style and the content wrapper introduced by
133
+ // the new style, but only while the native embed containment kill switch is off.
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- DOM ancestry fallback for transient missing data-native-embed-nested
135
+ '.ProseMirror .ak-editor-panel .extension-container:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .ProseMirror .ak-editor-panel__content .extension-container:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .ak-editor-panel .extension-container.block:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width]), .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .ak-editor-panel__content .extension-container.block:has([data-native-embed-panel-resize-containment="true"]):has([data-native-embed-alignment]):has([data-native-embed-width])': {
136
+ width: 'auto !important',
137
+ maxWidth: 'var(--native-embed-width) !important',
138
+ paddingLeft: '0 !important',
139
+ paddingRight: '0 !important'
140
+ },
118
141
  // Override the extension wrapper's width so alignment margins take effect.
119
142
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Target extension wrappers by data attribute
120
143
  '.extension-container:has([data-native-embed-alignment="left"]), .ak-renderer-extension:has([data-native-embed-alignment="left"])': {
package/package.json CHANGED
@@ -17,16 +17,16 @@
17
17
  "atlaskit:src": "src/index.ts",
18
18
  "dependencies": {
19
19
  "@atlaskit/button": "^24.3.0",
20
- "@atlaskit/editor-common": "^116.35.0",
20
+ "@atlaskit/editor-common": "^116.40.0",
21
21
  "@atlaskit/editor-plugin-local-id": "^10.1.0",
22
22
  "@atlaskit/editor-prosemirror": "^8.0.0",
23
23
  "@atlaskit/heading": "^6.2.0",
24
24
  "@atlaskit/icon": "^37.1.0",
25
- "@atlaskit/primitives": "^22.1.0",
26
- "@atlaskit/tokens": "^16.2.0",
25
+ "@atlaskit/primitives": "^22.2.0",
26
+ "@atlaskit/tokens": "^16.3.0",
27
27
  "@atlassian/afm-i18n-platform-native-embeds-native-embeds-common": "1.7.0",
28
28
  "@babel/runtime": "^7.0.0",
29
- "@compiled/react": "^0.22.2",
29
+ "@compiled/react": "^1.0.0",
30
30
  "@emotion/react": "^11.7.1"
31
31
  },
32
32
  "peerDependencies": {
@@ -82,7 +82,7 @@
82
82
  }
83
83
  },
84
84
  "name": "@atlaskit/native-embeds-common",
85
- "version": "2.2.4",
85
+ "version": "2.2.6",
86
86
  "description": "A shared package for native embeds to be used across experiences and plugin",
87
87
  "author": "Atlassian Pty Ltd",
88
88
  "license": "Apache-2.0",