@atlaskit/editor-plugin-panel 9.0.21 → 9.0.23
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 +16 -0
- package/dist/cjs/nodeviews/panel.js +28 -9
- package/dist/cjs/ui/panelBlockMenuItem.js +8 -1
- package/dist/cjs/ui/renderPanelIcon.js +53 -0
- package/dist/es2019/nodeviews/panel.js +26 -7
- package/dist/es2019/ui/panelBlockMenuItem.js +8 -1
- package/dist/es2019/ui/renderPanelIcon.js +52 -0
- package/dist/esm/nodeviews/panel.js +28 -9
- package/dist/esm/ui/panelBlockMenuItem.js +8 -1
- package/dist/esm/ui/renderPanelIcon.js +47 -0
- package/dist/types/ui/renderPanelIcon.d.ts +10 -0
- package/dist/types-ts4.5/ui/renderPanelIcon.d.ts +10 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-panel
|
|
2
2
|
|
|
3
|
+
## 9.0.23
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`987ba0e62afac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/987ba0e62afac) -
|
|
8
|
+
render panel icon as native DOM instead of via nodeViewPortalProviderAPI
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 9.0.22
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`7ea2e225c0abb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ea2e225c0abb) -
|
|
16
|
+
[ux] Minor styling, wording changes for block menu and sync blocks
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 9.0.21
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -17,7 +17,9 @@ var _panel = require("@atlaskit/editor-common/panel");
|
|
|
17
17
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
18
18
|
var _consts = require("@atlaskit/editor-shared-styles/consts");
|
|
19
19
|
var _lightbulb = _interopRequireDefault(require("@atlaskit/icon/core/lightbulb"));
|
|
20
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
21
|
var _utils = require("../pm-plugins/utils/utils");
|
|
22
|
+
var _renderPanelIcon = require("../ui/renderPanelIcon");
|
|
21
23
|
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
|
|
22
24
|
|
|
23
25
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
@@ -96,14 +98,25 @@ var PanelNodeView = /*#__PURE__*/function () {
|
|
|
96
98
|
}
|
|
97
99
|
// set contentEditable as false to be able to select the custom panels with keyboard
|
|
98
100
|
this.icon.contentEditable = 'false';
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
101
|
+
var panelAttrs = node.attrs;
|
|
102
|
+
|
|
103
|
+
// Determine if this is a standard panel type (info, note, success, warning, error)
|
|
104
|
+
var isStandardPanel = panelAttrs.panelType && [_adfSchema.PanelType.INFO, _adfSchema.PanelType.NOTE, _adfSchema.PanelType.SUCCESS, _adfSchema.PanelType.WARNING, _adfSchema.PanelType.ERROR].includes(panelAttrs.panelType);
|
|
105
|
+
|
|
106
|
+
// For standard panels (info, note, success, warning, error), render icon directly as native DOM
|
|
107
|
+
// This avoids Portal rendering delays that cause flickering on SSR and page transitions
|
|
108
|
+
if (isStandardPanel && (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true)) {
|
|
109
|
+
(0, _renderPanelIcon.renderPanelIcon)(panelAttrs.panelType, this.icon);
|
|
110
|
+
} else {
|
|
111
|
+
this.nodeViewPortalProviderAPI.render(function () {
|
|
112
|
+
return /*#__PURE__*/_react.default.createElement(PanelIcon, {
|
|
113
|
+
pluginInjectionApi: api,
|
|
114
|
+
allowCustomPanel: pluginOptions.allowCustomPanel,
|
|
115
|
+
panelAttributes: panelAttrs,
|
|
116
|
+
providerFactory: _this.providerFactory
|
|
117
|
+
});
|
|
118
|
+
}, this.icon, this.key);
|
|
119
|
+
}
|
|
107
120
|
}
|
|
108
121
|
return (0, _createClass2.default)(PanelNodeView, [{
|
|
109
122
|
key: "ignoreMutation",
|
|
@@ -120,7 +133,13 @@ var PanelNodeView = /*#__PURE__*/function () {
|
|
|
120
133
|
}, {
|
|
121
134
|
key: "destroy",
|
|
122
135
|
value: function destroy() {
|
|
123
|
-
this.
|
|
136
|
+
var panelAttrs = this.node.attrs;
|
|
137
|
+
// Determine if this is a standard panel type (info, note, success, warning, error)
|
|
138
|
+
var isStandardPanel = panelAttrs.panelType && [_adfSchema.PanelType.INFO, _adfSchema.PanelType.NOTE, _adfSchema.PanelType.SUCCESS, _adfSchema.PanelType.WARNING, _adfSchema.PanelType.ERROR].includes(panelAttrs.panelType);
|
|
139
|
+
// Only remove Portal if it was used (for custom emoji panels)
|
|
140
|
+
if (!(isStandardPanel && (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true))) {
|
|
141
|
+
this.nodeViewPortalProviderAPI.remove(this.key);
|
|
142
|
+
}
|
|
124
143
|
}
|
|
125
144
|
}]);
|
|
126
145
|
}();
|
|
@@ -11,6 +11,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
11
11
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
12
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
13
13
|
var _informationCircle = _interopRequireDefault(require("@atlaskit/icon/core/information-circle"));
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
15
|
var NODE_NAME = 'panel';
|
|
15
16
|
var PanelBlockMenuItem = function PanelBlockMenuItem(_ref) {
|
|
16
17
|
var api = _ref.api;
|
|
@@ -32,10 +33,16 @@ var PanelBlockMenuItem = function PanelBlockMenuItem(_ref) {
|
|
|
32
33
|
}) : null;
|
|
33
34
|
});
|
|
34
35
|
};
|
|
36
|
+
|
|
37
|
+
// [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
|
|
38
|
+
// Adds size="small" to icons for better visual consistency in block menu.
|
|
39
|
+
// To clean up: remove conditional, keep only size="small" version.
|
|
40
|
+
var iconSize = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
|
|
35
41
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
36
42
|
onClick: handleClick,
|
|
37
43
|
elemBefore: /*#__PURE__*/_react.default.createElement(_informationCircle.default, {
|
|
38
|
-
label: ""
|
|
44
|
+
label: "",
|
|
45
|
+
size: iconSize
|
|
39
46
|
})
|
|
40
47
|
}, formatMessage(_messages.blockTypeMessages.panel));
|
|
41
48
|
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.renderPanelIcon = renderPanelIcon;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
|
+
// SVG path data extracted from panel icon components
|
|
11
|
+
var PANEL_ICON_PATHS = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _adfSchema.PanelType.INFO, 'M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM12 11.375C11.6685 11.375 11.3505 11.5067 11.1161 11.7411C10.8817 11.9755 10.75 12.2935 10.75 12.625V15.75C10.75 16.0815 10.8817 16.3995 11.1161 16.6339C11.3505 16.8683 11.6685 17 12 17C12.3315 17 12.6495 16.8683 12.8839 16.6339C13.1183 16.3995 13.25 16.0815 13.25 15.75V12.625C13.25 12.2935 13.1183 11.9755 12.8839 11.7411C12.6495 11.5067 12.3315 11.375 12 11.375ZM12 9.96875C12.4558 9.96875 12.893 9.78767 13.2153 9.46534C13.5377 9.14301 13.7188 8.70584 13.7188 8.25C13.7188 7.79416 13.5377 7.35699 13.2153 7.03466C12.893 6.71233 12.4558 6.53125 12 6.53125C11.5442 6.53125 11.107 6.71233 10.7847 7.03466C10.4623 7.35699 10.2812 7.79416 10.2812 8.25C10.2812 8.70584 10.4623 9.14301 10.7847 9.46534C11.107 9.78767 11.5442 9.96875 12 9.96875Z'), _adfSchema.PanelType.NOTE, 'M7 2H17C17.663 2 18.2989 2.26339 18.7678 2.73223C19.2366 3.20107 19.5 3.83696 19.5 4.5V19.5C19.5 20.163 19.2366 20.7989 18.7678 21.2678C18.2989 21.7366 17.663 22 17 22H7C6.33696 22 5.70107 21.7366 5.23223 21.2678C4.76339 20.7989 4.5 20.163 4.5 19.5V4.5C4.5 3.83696 4.76339 3.20107 5.23223 2.73223C5.70107 2.26339 6.33696 2 7 2ZM8.875 7C8.70924 7 8.55027 7.06585 8.43306 7.18306C8.31585 7.30027 8.25 7.45924 8.25 7.625V8.875C8.25 9.04076 8.31585 9.19973 8.43306 9.31694C8.55027 9.43415 8.70924 9.5 8.875 9.5H15.125C15.2908 9.5 15.4497 9.43415 15.5669 9.31694C15.6842 9.19973 15.75 9.04076 15.75 8.875V7.625C15.75 7.45924 15.6842 7.30027 15.5669 7.18306C15.4497 7.06585 15.2908 7 15.125 7H8.875ZM8.875 12C8.70924 12 8.55027 12.0658 8.43306 12.1831C8.31585 12.3003 8.25 12.4592 8.25 12.625V13.875C8.25 14.0408 8.31585 14.1997 8.43306 14.3169C8.55027 14.4342 8.70924 14.5 8.875 14.5H12.625C12.7908 14.5 12.9497 14.4342 13.0669 14.3169C13.1842 14.1997 13.25 14.0408 13.25 13.875V12.625C13.25 12.4592 13.1842 12.3003 13.0669 12.1831C12.9497 12.0658 12.7908 12 12.625 12H8.875Z'), _adfSchema.PanelType.SUCCESS, 'M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM13.705 8.295L11.015 13.4325L9.08625 11.695C8.9642 11.5852 8.82172 11.5005 8.66694 11.4457C8.51216 11.391 8.3481 11.3672 8.18415 11.3759C8.0202 11.3845 7.85955 11.4254 7.71139 11.4961C7.56322 11.5669 7.43044 11.6661 7.32063 11.7881C7.21081 11.9102 7.1261 12.0527 7.07135 12.2074C7.0166 12.3622 6.99287 12.5263 7.00152 12.6902C7.01016 12.8542 7.05102 13.0148 7.12175 13.163C7.19248 13.3112 7.2917 13.4439 7.41375 13.5538L10.5388 16.3663C10.6803 16.4938 10.8492 16.5872 11.0325 16.6395C11.2157 16.6917 11.4085 16.7014 11.596 16.6678C11.7836 16.6341 11.9609 16.558 12.1146 16.4453C12.2682 16.3326 12.3941 16.1863 12.4825 16.0175L15.92 9.455C16.0738 9.16127 16.1047 8.81847 16.0057 8.502C15.9068 8.18553 15.6862 7.92133 15.3925 7.7675C15.0988 7.61367 14.756 7.58283 14.4395 7.68176C14.123 7.78068 13.8588 8.00127 13.705 8.295V8.295Z'), _adfSchema.PanelType.WARNING, 'M13.4897 4.34592L21.8561 18.8611C21.9525 19.0288 22.0021 19.2181 21.9999 19.4101C21.9977 19.6021 21.9438 19.7903 21.8435 19.9559C21.7432 20.1215 21.6001 20.2588 21.4282 20.3542C21.2563 20.4497 21.0616 20.4999 20.8636 20.5H3.13707C2.93882 20.5 2.74401 20.4498 2.57196 20.3543C2.39992 20.2588 2.25663 20.1213 2.15631 19.9556C2.05598 19.7898 2.00212 19.6015 2.00006 19.4093C1.998 19.2171 2.04782 19.0278 2.14456 18.86L10.5121 4.34592C10.6602 4.08939 10.8762 3.87577 11.1377 3.72708C11.3993 3.57838 11.6971 3.5 12.0003 3.5C12.3036 3.5 12.6013 3.57838 12.8629 3.72708C13.1245 3.87577 13.3404 4.08939 13.4885 4.34592H13.4897ZM12.0003 7.82538C11.8232 7.82537 11.6482 7.86212 11.4869 7.93317C11.3257 8.00423 11.182 8.10793 11.0656 8.2373C10.9492 8.36668 10.8627 8.51872 10.8119 8.68321C10.7611 8.8477 10.7473 9.02083 10.7713 9.19093L11.3546 13.3416C11.3754 13.4933 11.4523 13.6326 11.5711 13.7334C11.6899 13.8343 11.8424 13.8899 12.0003 13.8899C12.1582 13.8899 12.3107 13.8343 12.4295 13.7334C12.5483 13.6326 12.6253 13.4933 12.6461 13.3416L13.2293 9.19093C13.2533 9.02083 13.2395 8.8477 13.1887 8.68321C13.138 8.51872 13.0515 8.36668 12.935 8.2373C12.8186 8.10793 12.6749 8.00423 12.5137 7.93317C12.3525 7.86212 12.1774 7.82537 12.0003 7.82538V7.82538ZM12.0003 17.3369C12.3395 17.3369 12.6649 17.2062 12.9047 16.9737C13.1446 16.7412 13.2793 16.4258 13.2793 16.0969C13.2793 15.7681 13.1446 15.4527 12.9047 15.2202C12.6649 14.9877 12.3395 14.857 12.0003 14.857C11.6611 14.857 11.3358 14.9877 11.0959 15.2202C10.8561 15.4527 10.7213 15.7681 10.7213 16.0969C10.7213 16.4258 10.8561 16.7412 11.0959 16.9737C11.3358 17.2062 11.6611 17.3369 12.0003 17.3369V17.3369Z'), _adfSchema.PanelType.ERROR, 'M13.8562 11.9112L16.5088 9.26C16.7433 9.02545 16.8751 8.70733 16.8751 8.37563C16.8751 8.04392 16.7433 7.7258 16.5088 7.49125C16.2742 7.2567 15.9561 7.12493 15.6244 7.12493C15.2927 7.12493 14.9746 7.2567 14.74 7.49125L12.09 10.1438L9.4375 7.49125C9.20295 7.25686 8.8849 7.12526 8.55331 7.12537C8.22172 7.12549 7.90376 7.25732 7.66937 7.49188C7.43499 7.72643 7.30338 8.04448 7.3035 8.37607C7.30361 8.70766 7.43545 9.02561 7.67 9.26L10.32 11.91L7.67 14.5625C7.4423 14.7983 7.31631 15.114 7.31916 15.4418C7.32201 15.7695 7.45347 16.083 7.68523 16.3148C7.91699 16.5465 8.2305 16.678 8.55825 16.6808C8.88599 16.6837 9.20175 16.5577 9.4375 16.33L12.0888 13.68L14.74 16.33C14.8561 16.4461 14.9939 16.5383 15.1455 16.6012C15.2972 16.664 15.4597 16.6964 15.6239 16.6965C15.7881 16.6966 15.9507 16.6643 16.1024 16.6015C16.2541 16.5387 16.392 16.4467 16.5081 16.3306C16.6243 16.2146 16.7164 16.0768 16.7793 15.9251C16.8422 15.7734 16.8746 15.6109 16.8746 15.4467C16.8747 15.2825 16.8424 15.1199 16.7796 14.9682C16.7168 14.8165 16.6248 14.6786 16.5088 14.5625L13.8562 11.9112V11.9112ZM12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22Z');
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Creates a native DOM SVG element for a panel icon.
|
|
15
|
+
* This avoids React Portal rendering delays that cause flickering on SSR and page transitions.
|
|
16
|
+
*
|
|
17
|
+
* @param panelType - The type of panel (info, note, success, warning, error)
|
|
18
|
+
* @param container - The container element to render into
|
|
19
|
+
* @returns The created SVG element, or null if panelType doesn't have a standard icon
|
|
20
|
+
*/
|
|
21
|
+
function renderPanelIcon(panelType, container) {
|
|
22
|
+
if (!panelType || !PANEL_ICON_PATHS[panelType]) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
var doc = container.ownerDocument;
|
|
26
|
+
var svgNS = 'http://www.w3.org/2000/svg';
|
|
27
|
+
|
|
28
|
+
// Create wrapper span (mimics PanelInfoIcon structure see editor-common/src/icons/shared/PanelInfoIcon.tsx)
|
|
29
|
+
var span = doc.createElement('span');
|
|
30
|
+
span.setAttribute('role', 'img');
|
|
31
|
+
span.setAttribute('aria-label', "".concat(panelType, " panel"));
|
|
32
|
+
|
|
33
|
+
// Create SVG element
|
|
34
|
+
var svg = doc.createElementNS(svgNS, 'svg');
|
|
35
|
+
svg.setAttribute('width', '24');
|
|
36
|
+
svg.setAttribute('height', '24');
|
|
37
|
+
svg.setAttribute('viewBox', '0 0 24 24');
|
|
38
|
+
svg.setAttribute('fill', 'none');
|
|
39
|
+
svg.setAttribute('xmlns', svgNS);
|
|
40
|
+
svg.setAttribute('role', 'presentation');
|
|
41
|
+
svg.style.pointerEvents = 'none';
|
|
42
|
+
|
|
43
|
+
// Create path element
|
|
44
|
+
var path = doc.createElementNS(svgNS, 'path');
|
|
45
|
+
path.setAttribute('fill-rule', 'evenodd');
|
|
46
|
+
path.setAttribute('clip-rule', 'evenodd');
|
|
47
|
+
path.setAttribute('d', PANEL_ICON_PATHS[panelType]);
|
|
48
|
+
path.setAttribute('fill', 'currentColor');
|
|
49
|
+
svg.appendChild(path);
|
|
50
|
+
span.appendChild(svg);
|
|
51
|
+
container.appendChild(span);
|
|
52
|
+
return svg;
|
|
53
|
+
}
|
|
@@ -10,7 +10,9 @@ import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
|
|
|
10
10
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
11
11
|
import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
|
|
12
12
|
import LightbulbIcon from '@atlaskit/icon/core/lightbulb';
|
|
13
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
14
|
import { panelAttrsToDom } from '../pm-plugins/utils/utils';
|
|
15
|
+
import { renderPanelIcon } from '../ui/renderPanelIcon';
|
|
14
16
|
|
|
15
17
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
16
18
|
// Mapping export
|
|
@@ -91,12 +93,23 @@ class PanelNodeView {
|
|
|
91
93
|
}
|
|
92
94
|
// set contentEditable as false to be able to select the custom panels with keyboard
|
|
93
95
|
this.icon.contentEditable = 'false';
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
const panelAttrs = node.attrs;
|
|
97
|
+
|
|
98
|
+
// Determine if this is a standard panel type (info, note, success, warning, error)
|
|
99
|
+
const isStandardPanel = panelAttrs.panelType && [PanelType.INFO, PanelType.NOTE, PanelType.SUCCESS, PanelType.WARNING, PanelType.ERROR].includes(panelAttrs.panelType);
|
|
100
|
+
|
|
101
|
+
// For standard panels (info, note, success, warning, error), render icon directly as native DOM
|
|
102
|
+
// This avoids Portal rendering delays that cause flickering on SSR and page transitions
|
|
103
|
+
if (isStandardPanel && expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true)) {
|
|
104
|
+
renderPanelIcon(panelAttrs.panelType, this.icon);
|
|
105
|
+
} else {
|
|
106
|
+
this.nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(PanelIcon, {
|
|
107
|
+
pluginInjectionApi: api,
|
|
108
|
+
allowCustomPanel: pluginOptions.allowCustomPanel,
|
|
109
|
+
panelAttributes: panelAttrs,
|
|
110
|
+
providerFactory: this.providerFactory
|
|
111
|
+
}), this.icon, this.key);
|
|
112
|
+
}
|
|
100
113
|
}
|
|
101
114
|
ignoreMutation(mutation) {
|
|
102
115
|
// ignore mutation if it caused by the icon.
|
|
@@ -109,7 +122,13 @@ class PanelNodeView {
|
|
|
109
122
|
return isIcon || isInsideIcon;
|
|
110
123
|
}
|
|
111
124
|
destroy() {
|
|
112
|
-
this.
|
|
125
|
+
const panelAttrs = this.node.attrs;
|
|
126
|
+
// Determine if this is a standard panel type (info, note, success, warning, error)
|
|
127
|
+
const isStandardPanel = panelAttrs.panelType && [PanelType.INFO, PanelType.NOTE, PanelType.SUCCESS, PanelType.WARNING, PanelType.ERROR].includes(panelAttrs.panelType);
|
|
128
|
+
// Only remove Portal if it was used (for custom emoji panels)
|
|
129
|
+
if (!(isStandardPanel && expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true))) {
|
|
130
|
+
this.nodeViewPortalProviderAPI.remove(this.key);
|
|
131
|
+
}
|
|
113
132
|
}
|
|
114
133
|
}
|
|
115
134
|
export const getPanelNodeView = (pluginOptions, api, nodeViewPortalProviderAPI, providerFactory) => (node, view, getPos) => {
|
|
@@ -4,6 +4,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
|
4
4
|
import { blockTypeMessages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
6
6
|
import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
const NODE_NAME = 'panel';
|
|
8
9
|
const PanelBlockMenuItem = ({
|
|
9
10
|
api
|
|
@@ -28,10 +29,16 @@ const PanelBlockMenuItem = ({
|
|
|
28
29
|
}) : null;
|
|
29
30
|
});
|
|
30
31
|
};
|
|
32
|
+
|
|
33
|
+
// [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
|
|
34
|
+
// Adds size="small" to icons for better visual consistency in block menu.
|
|
35
|
+
// To clean up: remove conditional, keep only size="small" version.
|
|
36
|
+
const iconSize = fg('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
|
|
31
37
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
32
38
|
onClick: handleClick,
|
|
33
39
|
elemBefore: /*#__PURE__*/React.createElement(InformationCircleIcon, {
|
|
34
|
-
label: ""
|
|
40
|
+
label: "",
|
|
41
|
+
size: iconSize
|
|
35
42
|
})
|
|
36
43
|
}, formatMessage(blockTypeMessages.panel));
|
|
37
44
|
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { PanelType } from '@atlaskit/adf-schema';
|
|
2
|
+
|
|
3
|
+
// SVG path data extracted from panel icon components
|
|
4
|
+
const PANEL_ICON_PATHS = {
|
|
5
|
+
[PanelType.INFO]: 'M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM12 11.375C11.6685 11.375 11.3505 11.5067 11.1161 11.7411C10.8817 11.9755 10.75 12.2935 10.75 12.625V15.75C10.75 16.0815 10.8817 16.3995 11.1161 16.6339C11.3505 16.8683 11.6685 17 12 17C12.3315 17 12.6495 16.8683 12.8839 16.6339C13.1183 16.3995 13.25 16.0815 13.25 15.75V12.625C13.25 12.2935 13.1183 11.9755 12.8839 11.7411C12.6495 11.5067 12.3315 11.375 12 11.375ZM12 9.96875C12.4558 9.96875 12.893 9.78767 13.2153 9.46534C13.5377 9.14301 13.7188 8.70584 13.7188 8.25C13.7188 7.79416 13.5377 7.35699 13.2153 7.03466C12.893 6.71233 12.4558 6.53125 12 6.53125C11.5442 6.53125 11.107 6.71233 10.7847 7.03466C10.4623 7.35699 10.2812 7.79416 10.2812 8.25C10.2812 8.70584 10.4623 9.14301 10.7847 9.46534C11.107 9.78767 11.5442 9.96875 12 9.96875Z',
|
|
6
|
+
[PanelType.NOTE]: 'M7 2H17C17.663 2 18.2989 2.26339 18.7678 2.73223C19.2366 3.20107 19.5 3.83696 19.5 4.5V19.5C19.5 20.163 19.2366 20.7989 18.7678 21.2678C18.2989 21.7366 17.663 22 17 22H7C6.33696 22 5.70107 21.7366 5.23223 21.2678C4.76339 20.7989 4.5 20.163 4.5 19.5V4.5C4.5 3.83696 4.76339 3.20107 5.23223 2.73223C5.70107 2.26339 6.33696 2 7 2ZM8.875 7C8.70924 7 8.55027 7.06585 8.43306 7.18306C8.31585 7.30027 8.25 7.45924 8.25 7.625V8.875C8.25 9.04076 8.31585 9.19973 8.43306 9.31694C8.55027 9.43415 8.70924 9.5 8.875 9.5H15.125C15.2908 9.5 15.4497 9.43415 15.5669 9.31694C15.6842 9.19973 15.75 9.04076 15.75 8.875V7.625C15.75 7.45924 15.6842 7.30027 15.5669 7.18306C15.4497 7.06585 15.2908 7 15.125 7H8.875ZM8.875 12C8.70924 12 8.55027 12.0658 8.43306 12.1831C8.31585 12.3003 8.25 12.4592 8.25 12.625V13.875C8.25 14.0408 8.31585 14.1997 8.43306 14.3169C8.55027 14.4342 8.70924 14.5 8.875 14.5H12.625C12.7908 14.5 12.9497 14.4342 13.0669 14.3169C13.1842 14.1997 13.25 14.0408 13.25 13.875V12.625C13.25 12.4592 13.1842 12.3003 13.0669 12.1831C12.9497 12.0658 12.7908 12 12.625 12H8.875Z',
|
|
7
|
+
[PanelType.SUCCESS]: 'M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM13.705 8.295L11.015 13.4325L9.08625 11.695C8.9642 11.5852 8.82172 11.5005 8.66694 11.4457C8.51216 11.391 8.3481 11.3672 8.18415 11.3759C8.0202 11.3845 7.85955 11.4254 7.71139 11.4961C7.56322 11.5669 7.43044 11.6661 7.32063 11.7881C7.21081 11.9102 7.1261 12.0527 7.07135 12.2074C7.0166 12.3622 6.99287 12.5263 7.00152 12.6902C7.01016 12.8542 7.05102 13.0148 7.12175 13.163C7.19248 13.3112 7.2917 13.4439 7.41375 13.5538L10.5388 16.3663C10.6803 16.4938 10.8492 16.5872 11.0325 16.6395C11.2157 16.6917 11.4085 16.7014 11.596 16.6678C11.7836 16.6341 11.9609 16.558 12.1146 16.4453C12.2682 16.3326 12.3941 16.1863 12.4825 16.0175L15.92 9.455C16.0738 9.16127 16.1047 8.81847 16.0057 8.502C15.9068 8.18553 15.6862 7.92133 15.3925 7.7675C15.0988 7.61367 14.756 7.58283 14.4395 7.68176C14.123 7.78068 13.8588 8.00127 13.705 8.295V8.295Z',
|
|
8
|
+
[PanelType.WARNING]: 'M13.4897 4.34592L21.8561 18.8611C21.9525 19.0288 22.0021 19.2181 21.9999 19.4101C21.9977 19.6021 21.9438 19.7903 21.8435 19.9559C21.7432 20.1215 21.6001 20.2588 21.4282 20.3542C21.2563 20.4497 21.0616 20.4999 20.8636 20.5H3.13707C2.93882 20.5 2.74401 20.4498 2.57196 20.3543C2.39992 20.2588 2.25663 20.1213 2.15631 19.9556C2.05598 19.7898 2.00212 19.6015 2.00006 19.4093C1.998 19.2171 2.04782 19.0278 2.14456 18.86L10.5121 4.34592C10.6602 4.08939 10.8762 3.87577 11.1377 3.72708C11.3993 3.57838 11.6971 3.5 12.0003 3.5C12.3036 3.5 12.6013 3.57838 12.8629 3.72708C13.1245 3.87577 13.3404 4.08939 13.4885 4.34592H13.4897ZM12.0003 7.82538C11.8232 7.82537 11.6482 7.86212 11.4869 7.93317C11.3257 8.00423 11.182 8.10793 11.0656 8.2373C10.9492 8.36668 10.8627 8.51872 10.8119 8.68321C10.7611 8.8477 10.7473 9.02083 10.7713 9.19093L11.3546 13.3416C11.3754 13.4933 11.4523 13.6326 11.5711 13.7334C11.6899 13.8343 11.8424 13.8899 12.0003 13.8899C12.1582 13.8899 12.3107 13.8343 12.4295 13.7334C12.5483 13.6326 12.6253 13.4933 12.6461 13.3416L13.2293 9.19093C13.2533 9.02083 13.2395 8.8477 13.1887 8.68321C13.138 8.51872 13.0515 8.36668 12.935 8.2373C12.8186 8.10793 12.6749 8.00423 12.5137 7.93317C12.3525 7.86212 12.1774 7.82537 12.0003 7.82538V7.82538ZM12.0003 17.3369C12.3395 17.3369 12.6649 17.2062 12.9047 16.9737C13.1446 16.7412 13.2793 16.4258 13.2793 16.0969C13.2793 15.7681 13.1446 15.4527 12.9047 15.2202C12.6649 14.9877 12.3395 14.857 12.0003 14.857C11.6611 14.857 11.3358 14.9877 11.0959 15.2202C10.8561 15.4527 10.7213 15.7681 10.7213 16.0969C10.7213 16.4258 10.8561 16.7412 11.0959 16.9737C11.3358 17.2062 11.6611 17.3369 12.0003 17.3369V17.3369Z',
|
|
9
|
+
[PanelType.ERROR]: 'M13.8562 11.9112L16.5088 9.26C16.7433 9.02545 16.8751 8.70733 16.8751 8.37563C16.8751 8.04392 16.7433 7.7258 16.5088 7.49125C16.2742 7.2567 15.9561 7.12493 15.6244 7.12493C15.2927 7.12493 14.9746 7.2567 14.74 7.49125L12.09 10.1438L9.4375 7.49125C9.20295 7.25686 8.8849 7.12526 8.55331 7.12537C8.22172 7.12549 7.90376 7.25732 7.66937 7.49188C7.43499 7.72643 7.30338 8.04448 7.3035 8.37607C7.30361 8.70766 7.43545 9.02561 7.67 9.26L10.32 11.91L7.67 14.5625C7.4423 14.7983 7.31631 15.114 7.31916 15.4418C7.32201 15.7695 7.45347 16.083 7.68523 16.3148C7.91699 16.5465 8.2305 16.678 8.55825 16.6808C8.88599 16.6837 9.20175 16.5577 9.4375 16.33L12.0888 13.68L14.74 16.33C14.8561 16.4461 14.9939 16.5383 15.1455 16.6012C15.2972 16.664 15.4597 16.6964 15.6239 16.6965C15.7881 16.6966 15.9507 16.6643 16.1024 16.6015C16.2541 16.5387 16.392 16.4467 16.5081 16.3306C16.6243 16.2146 16.7164 16.0768 16.7793 15.9251C16.8422 15.7734 16.8746 15.6109 16.8746 15.4467C16.8747 15.2825 16.8424 15.1199 16.7796 14.9682C16.7168 14.8165 16.6248 14.6786 16.5088 14.5625L13.8562 11.9112V11.9112ZM12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22Z'
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Creates a native DOM SVG element for a panel icon.
|
|
14
|
+
* This avoids React Portal rendering delays that cause flickering on SSR and page transitions.
|
|
15
|
+
*
|
|
16
|
+
* @param panelType - The type of panel (info, note, success, warning, error)
|
|
17
|
+
* @param container - The container element to render into
|
|
18
|
+
* @returns The created SVG element, or null if panelType doesn't have a standard icon
|
|
19
|
+
*/
|
|
20
|
+
export function renderPanelIcon(panelType, container) {
|
|
21
|
+
if (!panelType || !PANEL_ICON_PATHS[panelType]) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
const doc = container.ownerDocument;
|
|
25
|
+
const svgNS = 'http://www.w3.org/2000/svg';
|
|
26
|
+
|
|
27
|
+
// Create wrapper span (mimics PanelInfoIcon structure see editor-common/src/icons/shared/PanelInfoIcon.tsx)
|
|
28
|
+
const span = doc.createElement('span');
|
|
29
|
+
span.setAttribute('role', 'img');
|
|
30
|
+
span.setAttribute('aria-label', `${panelType} panel`);
|
|
31
|
+
|
|
32
|
+
// Create SVG element
|
|
33
|
+
const svg = doc.createElementNS(svgNS, 'svg');
|
|
34
|
+
svg.setAttribute('width', '24');
|
|
35
|
+
svg.setAttribute('height', '24');
|
|
36
|
+
svg.setAttribute('viewBox', '0 0 24 24');
|
|
37
|
+
svg.setAttribute('fill', 'none');
|
|
38
|
+
svg.setAttribute('xmlns', svgNS);
|
|
39
|
+
svg.setAttribute('role', 'presentation');
|
|
40
|
+
svg.style.pointerEvents = 'none';
|
|
41
|
+
|
|
42
|
+
// Create path element
|
|
43
|
+
const path = doc.createElementNS(svgNS, 'path');
|
|
44
|
+
path.setAttribute('fill-rule', 'evenodd');
|
|
45
|
+
path.setAttribute('clip-rule', 'evenodd');
|
|
46
|
+
path.setAttribute('d', PANEL_ICON_PATHS[panelType]);
|
|
47
|
+
path.setAttribute('fill', 'currentColor');
|
|
48
|
+
svg.appendChild(path);
|
|
49
|
+
span.appendChild(svg);
|
|
50
|
+
container.appendChild(span);
|
|
51
|
+
return svg;
|
|
52
|
+
}
|
|
@@ -12,7 +12,9 @@ import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
|
|
|
12
12
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
13
13
|
import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
|
|
14
14
|
import LightbulbIcon from '@atlaskit/icon/core/lightbulb';
|
|
15
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
15
16
|
import { panelAttrsToDom } from '../pm-plugins/utils/utils';
|
|
17
|
+
import { renderPanelIcon } from '../ui/renderPanelIcon';
|
|
16
18
|
|
|
17
19
|
/* eslint-disable @atlaskit/editor/no-re-export */
|
|
18
20
|
// Mapping export
|
|
@@ -90,14 +92,25 @@ var PanelNodeView = /*#__PURE__*/function () {
|
|
|
90
92
|
}
|
|
91
93
|
// set contentEditable as false to be able to select the custom panels with keyboard
|
|
92
94
|
this.icon.contentEditable = 'false';
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
var panelAttrs = node.attrs;
|
|
96
|
+
|
|
97
|
+
// Determine if this is a standard panel type (info, note, success, warning, error)
|
|
98
|
+
var isStandardPanel = panelAttrs.panelType && [PanelType.INFO, PanelType.NOTE, PanelType.SUCCESS, PanelType.WARNING, PanelType.ERROR].includes(panelAttrs.panelType);
|
|
99
|
+
|
|
100
|
+
// For standard panels (info, note, success, warning, error), render icon directly as native DOM
|
|
101
|
+
// This avoids Portal rendering delays that cause flickering on SSR and page transitions
|
|
102
|
+
if (isStandardPanel && expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true)) {
|
|
103
|
+
renderPanelIcon(panelAttrs.panelType, this.icon);
|
|
104
|
+
} else {
|
|
105
|
+
this.nodeViewPortalProviderAPI.render(function () {
|
|
106
|
+
return /*#__PURE__*/React.createElement(PanelIcon, {
|
|
107
|
+
pluginInjectionApi: api,
|
|
108
|
+
allowCustomPanel: pluginOptions.allowCustomPanel,
|
|
109
|
+
panelAttributes: panelAttrs,
|
|
110
|
+
providerFactory: _this.providerFactory
|
|
111
|
+
});
|
|
112
|
+
}, this.icon, this.key);
|
|
113
|
+
}
|
|
101
114
|
}
|
|
102
115
|
return _createClass(PanelNodeView, [{
|
|
103
116
|
key: "ignoreMutation",
|
|
@@ -114,7 +127,13 @@ var PanelNodeView = /*#__PURE__*/function () {
|
|
|
114
127
|
}, {
|
|
115
128
|
key: "destroy",
|
|
116
129
|
value: function destroy() {
|
|
117
|
-
this.
|
|
130
|
+
var panelAttrs = this.node.attrs;
|
|
131
|
+
// Determine if this is a standard panel type (info, note, success, warning, error)
|
|
132
|
+
var isStandardPanel = panelAttrs.panelType && [PanelType.INFO, PanelType.NOTE, PanelType.SUCCESS, PanelType.WARNING, PanelType.ERROR].includes(panelAttrs.panelType);
|
|
133
|
+
// Only remove Portal if it was used (for custom emoji panels)
|
|
134
|
+
if (!(isStandardPanel && expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true))) {
|
|
135
|
+
this.nodeViewPortalProviderAPI.remove(this.key);
|
|
136
|
+
}
|
|
118
137
|
}
|
|
119
138
|
}]);
|
|
120
139
|
}();
|
|
@@ -4,6 +4,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
|
4
4
|
import { blockTypeMessages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
6
6
|
import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
var NODE_NAME = 'panel';
|
|
8
9
|
var PanelBlockMenuItem = function PanelBlockMenuItem(_ref) {
|
|
9
10
|
var api = _ref.api;
|
|
@@ -25,10 +26,16 @@ var PanelBlockMenuItem = function PanelBlockMenuItem(_ref) {
|
|
|
25
26
|
}) : null;
|
|
26
27
|
});
|
|
27
28
|
};
|
|
29
|
+
|
|
30
|
+
// [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
|
|
31
|
+
// Adds size="small" to icons for better visual consistency in block menu.
|
|
32
|
+
// To clean up: remove conditional, keep only size="small" version.
|
|
33
|
+
var iconSize = fg('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
|
|
28
34
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
29
35
|
onClick: handleClick,
|
|
30
36
|
elemBefore: /*#__PURE__*/React.createElement(InformationCircleIcon, {
|
|
31
|
-
label: ""
|
|
37
|
+
label: "",
|
|
38
|
+
size: iconSize
|
|
32
39
|
})
|
|
33
40
|
}, formatMessage(blockTypeMessages.panel));
|
|
34
41
|
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { PanelType } from '@atlaskit/adf-schema';
|
|
3
|
+
|
|
4
|
+
// SVG path data extracted from panel icon components
|
|
5
|
+
var PANEL_ICON_PATHS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PanelType.INFO, 'M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM12 11.375C11.6685 11.375 11.3505 11.5067 11.1161 11.7411C10.8817 11.9755 10.75 12.2935 10.75 12.625V15.75C10.75 16.0815 10.8817 16.3995 11.1161 16.6339C11.3505 16.8683 11.6685 17 12 17C12.3315 17 12.6495 16.8683 12.8839 16.6339C13.1183 16.3995 13.25 16.0815 13.25 15.75V12.625C13.25 12.2935 13.1183 11.9755 12.8839 11.7411C12.6495 11.5067 12.3315 11.375 12 11.375ZM12 9.96875C12.4558 9.96875 12.893 9.78767 13.2153 9.46534C13.5377 9.14301 13.7188 8.70584 13.7188 8.25C13.7188 7.79416 13.5377 7.35699 13.2153 7.03466C12.893 6.71233 12.4558 6.53125 12 6.53125C11.5442 6.53125 11.107 6.71233 10.7847 7.03466C10.4623 7.35699 10.2812 7.79416 10.2812 8.25C10.2812 8.70584 10.4623 9.14301 10.7847 9.46534C11.107 9.78767 11.5442 9.96875 12 9.96875Z'), PanelType.NOTE, 'M7 2H17C17.663 2 18.2989 2.26339 18.7678 2.73223C19.2366 3.20107 19.5 3.83696 19.5 4.5V19.5C19.5 20.163 19.2366 20.7989 18.7678 21.2678C18.2989 21.7366 17.663 22 17 22H7C6.33696 22 5.70107 21.7366 5.23223 21.2678C4.76339 20.7989 4.5 20.163 4.5 19.5V4.5C4.5 3.83696 4.76339 3.20107 5.23223 2.73223C5.70107 2.26339 6.33696 2 7 2ZM8.875 7C8.70924 7 8.55027 7.06585 8.43306 7.18306C8.31585 7.30027 8.25 7.45924 8.25 7.625V8.875C8.25 9.04076 8.31585 9.19973 8.43306 9.31694C8.55027 9.43415 8.70924 9.5 8.875 9.5H15.125C15.2908 9.5 15.4497 9.43415 15.5669 9.31694C15.6842 9.19973 15.75 9.04076 15.75 8.875V7.625C15.75 7.45924 15.6842 7.30027 15.5669 7.18306C15.4497 7.06585 15.2908 7 15.125 7H8.875ZM8.875 12C8.70924 12 8.55027 12.0658 8.43306 12.1831C8.31585 12.3003 8.25 12.4592 8.25 12.625V13.875C8.25 14.0408 8.31585 14.1997 8.43306 14.3169C8.55027 14.4342 8.70924 14.5 8.875 14.5H12.625C12.7908 14.5 12.9497 14.4342 13.0669 14.3169C13.1842 14.1997 13.25 14.0408 13.25 13.875V12.625C13.25 12.4592 13.1842 12.3003 13.0669 12.1831C12.9497 12.0658 12.7908 12 12.625 12H8.875Z'), PanelType.SUCCESS, 'M12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22ZM13.705 8.295L11.015 13.4325L9.08625 11.695C8.9642 11.5852 8.82172 11.5005 8.66694 11.4457C8.51216 11.391 8.3481 11.3672 8.18415 11.3759C8.0202 11.3845 7.85955 11.4254 7.71139 11.4961C7.56322 11.5669 7.43044 11.6661 7.32063 11.7881C7.21081 11.9102 7.1261 12.0527 7.07135 12.2074C7.0166 12.3622 6.99287 12.5263 7.00152 12.6902C7.01016 12.8542 7.05102 13.0148 7.12175 13.163C7.19248 13.3112 7.2917 13.4439 7.41375 13.5538L10.5388 16.3663C10.6803 16.4938 10.8492 16.5872 11.0325 16.6395C11.2157 16.6917 11.4085 16.7014 11.596 16.6678C11.7836 16.6341 11.9609 16.558 12.1146 16.4453C12.2682 16.3326 12.3941 16.1863 12.4825 16.0175L15.92 9.455C16.0738 9.16127 16.1047 8.81847 16.0057 8.502C15.9068 8.18553 15.6862 7.92133 15.3925 7.7675C15.0988 7.61367 14.756 7.58283 14.4395 7.68176C14.123 7.78068 13.8588 8.00127 13.705 8.295V8.295Z'), PanelType.WARNING, 'M13.4897 4.34592L21.8561 18.8611C21.9525 19.0288 22.0021 19.2181 21.9999 19.4101C21.9977 19.6021 21.9438 19.7903 21.8435 19.9559C21.7432 20.1215 21.6001 20.2588 21.4282 20.3542C21.2563 20.4497 21.0616 20.4999 20.8636 20.5H3.13707C2.93882 20.5 2.74401 20.4498 2.57196 20.3543C2.39992 20.2588 2.25663 20.1213 2.15631 19.9556C2.05598 19.7898 2.00212 19.6015 2.00006 19.4093C1.998 19.2171 2.04782 19.0278 2.14456 18.86L10.5121 4.34592C10.6602 4.08939 10.8762 3.87577 11.1377 3.72708C11.3993 3.57838 11.6971 3.5 12.0003 3.5C12.3036 3.5 12.6013 3.57838 12.8629 3.72708C13.1245 3.87577 13.3404 4.08939 13.4885 4.34592H13.4897ZM12.0003 7.82538C11.8232 7.82537 11.6482 7.86212 11.4869 7.93317C11.3257 8.00423 11.182 8.10793 11.0656 8.2373C10.9492 8.36668 10.8627 8.51872 10.8119 8.68321C10.7611 8.8477 10.7473 9.02083 10.7713 9.19093L11.3546 13.3416C11.3754 13.4933 11.4523 13.6326 11.5711 13.7334C11.6899 13.8343 11.8424 13.8899 12.0003 13.8899C12.1582 13.8899 12.3107 13.8343 12.4295 13.7334C12.5483 13.6326 12.6253 13.4933 12.6461 13.3416L13.2293 9.19093C13.2533 9.02083 13.2395 8.8477 13.1887 8.68321C13.138 8.51872 13.0515 8.36668 12.935 8.2373C12.8186 8.10793 12.6749 8.00423 12.5137 7.93317C12.3525 7.86212 12.1774 7.82537 12.0003 7.82538V7.82538ZM12.0003 17.3369C12.3395 17.3369 12.6649 17.2062 12.9047 16.9737C13.1446 16.7412 13.2793 16.4258 13.2793 16.0969C13.2793 15.7681 13.1446 15.4527 12.9047 15.2202C12.6649 14.9877 12.3395 14.857 12.0003 14.857C11.6611 14.857 11.3358 14.9877 11.0959 15.2202C10.8561 15.4527 10.7213 15.7681 10.7213 16.0969C10.7213 16.4258 10.8561 16.7412 11.0959 16.9737C11.3358 17.2062 11.6611 17.3369 12.0003 17.3369V17.3369Z'), PanelType.ERROR, 'M13.8562 11.9112L16.5088 9.26C16.7433 9.02545 16.8751 8.70733 16.8751 8.37563C16.8751 8.04392 16.7433 7.7258 16.5088 7.49125C16.2742 7.2567 15.9561 7.12493 15.6244 7.12493C15.2927 7.12493 14.9746 7.2567 14.74 7.49125L12.09 10.1438L9.4375 7.49125C9.20295 7.25686 8.8849 7.12526 8.55331 7.12537C8.22172 7.12549 7.90376 7.25732 7.66937 7.49188C7.43499 7.72643 7.30338 8.04448 7.3035 8.37607C7.30361 8.70766 7.43545 9.02561 7.67 9.26L10.32 11.91L7.67 14.5625C7.4423 14.7983 7.31631 15.114 7.31916 15.4418C7.32201 15.7695 7.45347 16.083 7.68523 16.3148C7.91699 16.5465 8.2305 16.678 8.55825 16.6808C8.88599 16.6837 9.20175 16.5577 9.4375 16.33L12.0888 13.68L14.74 16.33C14.8561 16.4461 14.9939 16.5383 15.1455 16.6012C15.2972 16.664 15.4597 16.6964 15.6239 16.6965C15.7881 16.6966 15.9507 16.6643 16.1024 16.6015C16.2541 16.5387 16.392 16.4467 16.5081 16.3306C16.6243 16.2146 16.7164 16.0768 16.7793 15.9251C16.8422 15.7734 16.8746 15.6109 16.8746 15.4467C16.8747 15.2825 16.8424 15.1199 16.7796 14.9682C16.7168 14.8165 16.6248 14.6786 16.5088 14.5625L13.8562 11.9112V11.9112ZM12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22V22Z');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Creates a native DOM SVG element for a panel icon.
|
|
9
|
+
* This avoids React Portal rendering delays that cause flickering on SSR and page transitions.
|
|
10
|
+
*
|
|
11
|
+
* @param panelType - The type of panel (info, note, success, warning, error)
|
|
12
|
+
* @param container - The container element to render into
|
|
13
|
+
* @returns The created SVG element, or null if panelType doesn't have a standard icon
|
|
14
|
+
*/
|
|
15
|
+
export function renderPanelIcon(panelType, container) {
|
|
16
|
+
if (!panelType || !PANEL_ICON_PATHS[panelType]) {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
var doc = container.ownerDocument;
|
|
20
|
+
var svgNS = 'http://www.w3.org/2000/svg';
|
|
21
|
+
|
|
22
|
+
// Create wrapper span (mimics PanelInfoIcon structure see editor-common/src/icons/shared/PanelInfoIcon.tsx)
|
|
23
|
+
var span = doc.createElement('span');
|
|
24
|
+
span.setAttribute('role', 'img');
|
|
25
|
+
span.setAttribute('aria-label', "".concat(panelType, " panel"));
|
|
26
|
+
|
|
27
|
+
// Create SVG element
|
|
28
|
+
var svg = doc.createElementNS(svgNS, 'svg');
|
|
29
|
+
svg.setAttribute('width', '24');
|
|
30
|
+
svg.setAttribute('height', '24');
|
|
31
|
+
svg.setAttribute('viewBox', '0 0 24 24');
|
|
32
|
+
svg.setAttribute('fill', 'none');
|
|
33
|
+
svg.setAttribute('xmlns', svgNS);
|
|
34
|
+
svg.setAttribute('role', 'presentation');
|
|
35
|
+
svg.style.pointerEvents = 'none';
|
|
36
|
+
|
|
37
|
+
// Create path element
|
|
38
|
+
var path = doc.createElementNS(svgNS, 'path');
|
|
39
|
+
path.setAttribute('fill-rule', 'evenodd');
|
|
40
|
+
path.setAttribute('clip-rule', 'evenodd');
|
|
41
|
+
path.setAttribute('d', PANEL_ICON_PATHS[panelType]);
|
|
42
|
+
path.setAttribute('fill', 'currentColor');
|
|
43
|
+
svg.appendChild(path);
|
|
44
|
+
span.appendChild(svg);
|
|
45
|
+
container.appendChild(span);
|
|
46
|
+
return svg;
|
|
47
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PanelType } from '@atlaskit/adf-schema';
|
|
2
|
+
/**
|
|
3
|
+
* Creates a native DOM SVG element for a panel icon.
|
|
4
|
+
* This avoids React Portal rendering delays that cause flickering on SSR and page transitions.
|
|
5
|
+
*
|
|
6
|
+
* @param panelType - The type of panel (info, note, success, warning, error)
|
|
7
|
+
* @param container - The container element to render into
|
|
8
|
+
* @returns The created SVG element, or null if panelType doesn't have a standard icon
|
|
9
|
+
*/
|
|
10
|
+
export declare function renderPanelIcon(panelType: PanelType | undefined, container: HTMLElement): SVGElement | null;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PanelType } from '@atlaskit/adf-schema';
|
|
2
|
+
/**
|
|
3
|
+
* Creates a native DOM SVG element for a panel icon.
|
|
4
|
+
* This avoids React Portal rendering delays that cause flickering on SSR and page transitions.
|
|
5
|
+
*
|
|
6
|
+
* @param panelType - The type of panel (info, note, success, warning, error)
|
|
7
|
+
* @param container - The container element to render into
|
|
8
|
+
* @returns The created SVG element, or null if panelType doesn't have a standard icon
|
|
9
|
+
*/
|
|
10
|
+
export declare function renderPanelIcon(panelType: PanelType | undefined, container: HTMLElement): SVGElement | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-panel",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.23",
|
|
4
4
|
"description": "Panel plugin for @atlaskit/editor-core.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@atlaskit/adf-schema": "^51.5.0",
|
|
31
31
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
32
32
|
"@atlaskit/editor-plugin-analytics": "^7.0.0",
|
|
33
|
-
"@atlaskit/editor-plugin-block-menu": "^6.
|
|
33
|
+
"@atlaskit/editor-plugin-block-menu": "^6.1.0",
|
|
34
34
|
"@atlaskit/editor-plugin-decorations": "^7.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-emoji": "^8.1.0",
|
|
36
36
|
"@atlaskit/editor-plugin-selection": "^7.0.0",
|
|
@@ -42,13 +42,13 @@
|
|
|
42
42
|
"@atlaskit/icon": "^31.0.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
44
|
"@atlaskit/theme": "^21.0.0",
|
|
45
|
-
"@atlaskit/tmp-editor-statsig": "^29.
|
|
45
|
+
"@atlaskit/tmp-editor-statsig": "^29.6.0",
|
|
46
46
|
"@atlaskit/tokens": "^11.0.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
48
|
"uuid": "^3.1.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@atlaskit/editor-common": "^111.
|
|
51
|
+
"@atlaskit/editor-common": "^111.20.0",
|
|
52
52
|
"react": "^18.2.0",
|
|
53
53
|
"react-dom": "^18.2.0",
|
|
54
54
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -95,6 +95,9 @@
|
|
|
95
95
|
},
|
|
96
96
|
"platform_editor_adf_with_localid": {
|
|
97
97
|
"type": "boolean"
|
|
98
|
+
},
|
|
99
|
+
"platform_editor_block_menu_v2_patch_3": {
|
|
100
|
+
"type": "boolean"
|
|
98
101
|
}
|
|
99
102
|
},
|
|
100
103
|
"stricter": {
|