@atlaskit/renderer 137.1.2 → 137.1.4
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 +60 -0
- package/dist/cjs/react/index.js +7 -19
- package/dist/cjs/react/nodes/extension.js +41 -3
- package/dist/cjs/react/utils/EditorMediaClientProvider.js +1 -1
- package/dist/cjs/ui/Expand.js +65 -81
- package/dist/cjs/ui/Renderer/RendererStyleContainer.js +15 -1
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/utils/expand-search-text.js +98 -0
- package/dist/es2019/react/index.js +8 -18
- package/dist/es2019/react/nodes/extension.js +41 -3
- package/dist/es2019/react/utils/EditorMediaClientProvider.js +1 -1
- package/dist/es2019/ui/Expand.js +42 -61
- package/dist/es2019/ui/Renderer/RendererStyleContainer.js +21 -1
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/utils/expand-search-text.js +84 -0
- package/dist/esm/react/index.js +8 -20
- package/dist/esm/react/nodes/extension.js +41 -3
- package/dist/esm/react/utils/EditorMediaClientProvider.js +1 -1
- package/dist/esm/ui/Expand.js +65 -81
- package/dist/esm/ui/Renderer/RendererStyleContainer.js +15 -1
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/utils/expand-search-text.js +93 -0
- package/dist/types/ui/Expand.d.ts +8 -2
- package/dist/types/ui/utils/expand-search-text.d.ts +12 -0
- package/package.json +8 -7
package/dist/esm/ui/Expand.js
CHANGED
|
@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
5
5
|
*/
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
|
-
import React, { useCallback,
|
|
8
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
9
9
|
import { bind } from 'bind-event-listener';
|
|
10
10
|
import { getDocument } from '@atlaskit/browser-apis';
|
|
11
11
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
@@ -13,8 +13,9 @@ import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthPro
|
|
|
13
13
|
import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
|
|
14
14
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
15
15
|
import Tooltip from '@atlaskit/tooltip/Tooltip';
|
|
16
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
16
17
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
17
|
-
import {
|
|
18
|
+
import { getExpandSearchText } from './utils/expand-search-text';
|
|
18
19
|
import _uniqueId from 'lodash/uniqueId';
|
|
19
20
|
import { injectIntl } from 'react-intl';
|
|
20
21
|
import { MODE, PLATFORM } from '../analytics/events';
|
|
@@ -154,16 +155,6 @@ var clearNextSiblingMarginTopStyle = css({
|
|
|
154
155
|
marginTop: '0 !important'
|
|
155
156
|
}
|
|
156
157
|
});
|
|
157
|
-
|
|
158
|
-
// Lazy-loaded children component
|
|
159
|
-
var LazyChildren = /*#__PURE__*/lazy(function () {
|
|
160
|
-
return Promise.resolve({
|
|
161
|
-
default: function _default(_ref) {
|
|
162
|
-
var children = _ref.children;
|
|
163
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
158
|
var Container = function Container(props) {
|
|
168
159
|
return jsx("div", {
|
|
169
160
|
css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused],
|
|
@@ -212,29 +203,36 @@ function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
|
|
|
212
203
|
eventType: EVENT_TYPE.TRACK
|
|
213
204
|
});
|
|
214
205
|
}
|
|
215
|
-
function Expand(
|
|
216
|
-
var title =
|
|
217
|
-
children =
|
|
218
|
-
nodeType =
|
|
219
|
-
intl =
|
|
220
|
-
fireAnalyticsEvent =
|
|
221
|
-
localId =
|
|
222
|
-
nestedHeaderIds =
|
|
223
|
-
rendererContentMode =
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
206
|
+
function Expand(_ref) {
|
|
207
|
+
var title = _ref.title,
|
|
208
|
+
children = _ref.children,
|
|
209
|
+
nodeType = _ref.nodeType,
|
|
210
|
+
intl = _ref.intl,
|
|
211
|
+
fireAnalyticsEvent = _ref.fireAnalyticsEvent,
|
|
212
|
+
localId = _ref.localId,
|
|
213
|
+
nestedHeaderIds = _ref.nestedHeaderIds,
|
|
214
|
+
rendererContentMode = _ref.rendererContentMode,
|
|
215
|
+
node = _ref.node;
|
|
216
|
+
var _useState = useState(false),
|
|
217
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
218
|
+
expanded = _useState2[0],
|
|
219
|
+
setExpanded = _useState2[1];
|
|
220
|
+
var _useState3 = useState(false),
|
|
221
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
222
|
+
focused = _useState4[0],
|
|
223
|
+
setFocused = _useState4[1];
|
|
224
|
+
/**
|
|
225
|
+
* PGXT-9021: latches on the first open so the body stays mounted once rendered, including after
|
|
226
|
+
* the expand is collapsed again. Remounting it would re-run every macro and Forge data fetch
|
|
227
|
+
* inside on each reopen, which is both slower and visibly reloads content the reader has already
|
|
228
|
+
* seen. The saving this gate exists for is at initial load, where the body has never been opened,
|
|
229
|
+
* so nothing is given up by keeping it after that. Never set on the server, so the server and the
|
|
230
|
+
* client's first render agree and hydration cannot desync.
|
|
231
|
+
*/
|
|
232
|
+
var _useState5 = useState(false),
|
|
233
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
234
|
+
hasBeenExpanded = _useState6[0],
|
|
235
|
+
setHasBeenExpanded = _useState6[1];
|
|
238
236
|
var isMobile = false;
|
|
239
237
|
var label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
|
|
240
238
|
var _useRef = useRef(_uniqueId('expand-title-')),
|
|
@@ -247,16 +245,12 @@ function Expand(_ref2) {
|
|
|
247
245
|
var handleBlur = useCallback(function () {
|
|
248
246
|
return setFocused(false);
|
|
249
247
|
}, []);
|
|
250
|
-
|
|
251
|
-
|
|
248
|
+
// Both state updates happen in the same handler so they land in one render, rather than the
|
|
249
|
+
// latch reacting to `expanded` from an effect.
|
|
250
|
+
var openBody = useCallback(function () {
|
|
252
251
|
setExpanded(true);
|
|
252
|
+
setHasBeenExpanded(true);
|
|
253
253
|
}, []);
|
|
254
|
-
var shouldRenderLazyChildren = hasLoadedChildren || loadBodyContent;
|
|
255
|
-
// Only render the lightweight text placeholder when lazy load is ON and
|
|
256
|
-
// children haven't been loaded yet. When lazy load is OFF, children are
|
|
257
|
-
// always in the DOM — hidden="until-found" on the wrapper already makes
|
|
258
|
-
// them searchable by browser find, so no placeholder is needed.
|
|
259
|
-
var shouldRenderBrowserFindText = !shouldRenderLazyChildren && searchText && fg('hot-121622_lazy_load_expand_content') && expValEquals('platform_editor_close_expand_find', 'isEnabled', true);
|
|
260
254
|
|
|
261
255
|
// Feature-detect hidden="until-found" support via the beforematch event.
|
|
262
256
|
// Chrome 102+ and Firefox 130+ support it; Safari does not yet.
|
|
@@ -265,11 +259,11 @@ function Expand(_ref2) {
|
|
|
265
259
|
// Initialised as false and set in useEffect to avoid SSR/client hydration mismatch —
|
|
266
260
|
// useMemo would return true on the client's first render in supported browsers,
|
|
267
261
|
// differing from the server snapshot which always produces false.
|
|
268
|
-
var
|
|
269
|
-
|
|
270
|
-
supportsHiddenUntilFound =
|
|
271
|
-
setSupportsHiddenUntilFound =
|
|
272
|
-
|
|
262
|
+
var _useState7 = useState(false),
|
|
263
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
264
|
+
supportsHiddenUntilFound = _useState8[0],
|
|
265
|
+
setSupportsHiddenUntilFound = _useState8[1];
|
|
266
|
+
useEffect(function () {
|
|
273
267
|
var doc = getDocument();
|
|
274
268
|
setSupportsHiddenUntilFound(doc !== null && doc !== void 0 && doc.body ? 'onbeforematch' in doc.body : false);
|
|
275
269
|
}, []);
|
|
@@ -285,13 +279,13 @@ function Expand(_ref2) {
|
|
|
285
279
|
// In unsupported browsers (Safari), we skip this entirely and fall back to the normal
|
|
286
280
|
// CSS hiding (visibility:hidden + height:0), which doesn't support find-in-page but
|
|
287
281
|
// still works correctly for expand/collapse.
|
|
288
|
-
|
|
282
|
+
useEffect(function () {
|
|
289
283
|
var contentContainer = contentContainerRef.current;
|
|
290
284
|
var contentWrapper = contentWrapperRef.current;
|
|
291
285
|
if (!contentWrapper) {
|
|
292
286
|
return;
|
|
293
287
|
}
|
|
294
|
-
if (supportsHiddenUntilFound &&
|
|
288
|
+
if (supportsHiddenUntilFound && isExperimentEnabled('platform_editor_close_expand_find') && !expanded) {
|
|
295
289
|
contentWrapper.setAttribute('hidden', 'until-found');
|
|
296
290
|
// Override the CSS visibility:hidden from contentContainerStyles — hidden="until-found"
|
|
297
291
|
// now handles hiding via content-visibility:hidden, which allows browser find to index
|
|
@@ -305,31 +299,29 @@ function Expand(_ref2) {
|
|
|
305
299
|
contentWrapper.style.visibility = '';
|
|
306
300
|
}
|
|
307
301
|
}, [expanded, supportsHiddenUntilFound]);
|
|
308
|
-
|
|
309
|
-
if (!
|
|
302
|
+
useEffect(function () {
|
|
303
|
+
if (!isExperimentEnabled('platform_editor_close_expand_find') || expanded) {
|
|
310
304
|
return;
|
|
311
305
|
}
|
|
312
306
|
var contentWrapper = contentWrapperRef.current;
|
|
313
307
|
var unbindWrapperBeforeMatch = contentWrapper && supportsHiddenUntilFound ? bind(contentWrapper, {
|
|
314
308
|
type: 'beforematch',
|
|
315
|
-
listener:
|
|
309
|
+
listener: openBody
|
|
316
310
|
}) : undefined;
|
|
317
311
|
return function () {
|
|
318
312
|
unbindWrapperBeforeMatch === null || unbindWrapperBeforeMatch === void 0 || unbindWrapperBeforeMatch();
|
|
319
313
|
};
|
|
320
|
-
}, [
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
}, jsx(LazyChildren, null, children));
|
|
332
|
-
}
|
|
314
|
+
}, [expanded, openBody, supportsHiddenUntilFound]);
|
|
315
|
+
|
|
316
|
+
// Until the expand is first opened, stand in a plain-text mirror of the body so
|
|
317
|
+
// hidden="until-found" keeps the content findable by browser find without mounting the real
|
|
318
|
+
// subtree. The beforematch listener above expands before the browser scrolls to its match.
|
|
319
|
+
// Computed lazily: a nested expand is not mounted until its ancestor opens, so its mirror is
|
|
320
|
+
// never built on initial load.
|
|
321
|
+
var searchText = useMemo(function () {
|
|
322
|
+
return node && fg('hot-121622_lazy_load_expand_content') ? getExpandSearchText(node) : undefined;
|
|
323
|
+
}, [node]);
|
|
324
|
+
var expandContent = searchText && !expanded && !hasBeenExpanded ? jsx("span", null, searchText) : children;
|
|
333
325
|
return jsx(Container, {
|
|
334
326
|
"data-testid": "expand-container-".concat(nodeType, "-").concat(id),
|
|
335
327
|
"data-node-type": nodeType,
|
|
@@ -339,15 +331,8 @@ function Expand(_ref2) {
|
|
|
339
331
|
expanded: expanded,
|
|
340
332
|
focused: focused
|
|
341
333
|
}, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
|
|
342
|
-
nestedHeaderIds: nestedHeaderIds
|
|
343
|
-
|
|
344
|
-
,
|
|
345
|
-
onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
|
|
346
|
-
if (!hasLoadedChildren) {
|
|
347
|
-
setHasLoadedChildren(true);
|
|
348
|
-
}
|
|
349
|
-
setExpanded(true);
|
|
350
|
-
}
|
|
334
|
+
nestedHeaderIds: nestedHeaderIds,
|
|
335
|
+
onNestedHeaderIdMatch: openBody
|
|
351
336
|
}) : null, jsx(TitleContainer
|
|
352
337
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
353
338
|
, {
|
|
@@ -355,12 +340,11 @@ function Expand(_ref2) {
|
|
|
355
340
|
e.preventDefault();
|
|
356
341
|
e.stopPropagation();
|
|
357
342
|
fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
343
|
+
if (expanded) {
|
|
344
|
+
setExpanded(false);
|
|
345
|
+
} else {
|
|
346
|
+
openBody();
|
|
362
347
|
}
|
|
363
|
-
setExpanded(!expanded);
|
|
364
348
|
e.persist();
|
|
365
349
|
// @ts-ignore detail doesn't exist on type
|
|
366
350
|
e.detail ? handleBlur() : handleFocus();
|
|
@@ -395,7 +379,7 @@ function Expand(_ref2) {
|
|
|
395
379
|
id: id
|
|
396
380
|
}, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
|
|
397
381
|
expanded: expanded,
|
|
398
|
-
enableBrowserFind: supportsHiddenUntilFound &&
|
|
382
|
+
enableBrowserFind: supportsHiddenUntilFound && isExperimentEnabled('platform_editor_close_expand_find'),
|
|
399
383
|
contentRef: contentContainerRef
|
|
400
384
|
}, jsx("div", {
|
|
401
385
|
className: "".concat(nodeType, "-content-wrapper"),
|
|
@@ -860,6 +860,20 @@ var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty
|
|
|
860
860
|
}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_INNER_WRAPPER), {
|
|
861
861
|
display: 'inline-block'
|
|
862
862
|
}));
|
|
863
|
+
var forgeInlineBodiedSpacingStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline]"), {
|
|
864
|
+
marginBottom: 0,
|
|
865
|
+
verticalAlign: 'baseline',
|
|
866
|
+
maxWidth: '100%'
|
|
867
|
+
}), [".".concat(RendererCssClassName.DOCUMENT, " [data-forge-inline] + [data-as-inline=\"on\"]"), ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]:has(+ [data-forge-inline])")].join(', '), {
|
|
868
|
+
display: 'inline'
|
|
869
|
+
}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] *"), {
|
|
870
|
+
maxWidth: '100%'
|
|
871
|
+
}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
|
|
872
|
+
overflowX: 'auto'
|
|
873
|
+
}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(RendererCssClassName.DOCUMENT, " > p"), {
|
|
874
|
+
display: 'inline',
|
|
875
|
+
margin: 0
|
|
876
|
+
}));
|
|
863
877
|
|
|
864
878
|
// Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
|
|
865
879
|
var inlineExtensionRendererMarginFix = css({
|
|
@@ -2286,7 +2300,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
|
|
|
2286
2300
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2287
2301
|
fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
|
|
2288
2302
|
// this should be placed after baseOtherStyles
|
|
2289
|
-
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
|
|
2303
|
+
expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
|
|
2290
2304
|
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
2291
2305
|
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && !isExperimentEnabled('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
|
|
2292
2306
|
"data-testid": testId
|
|
@@ -65,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
65
65
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
66
66
|
var RENDER_EVENT_SAMPLE_RATE = 0.1;
|
|
67
67
|
var packageName = "@atlaskit/renderer";
|
|
68
|
-
var packageVersion = "137.1.
|
|
68
|
+
var packageVersion = "137.1.3";
|
|
69
69
|
var setAsQueryContainerStyles = css({
|
|
70
70
|
containerName: 'ak-renderer-wrapper',
|
|
71
71
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { findChildrenByMark } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Minimal structural view of an ADF entity. `parameters.nestedContent` holds raw ADF JSON rather
|
|
5
|
+
* than ProseMirror nodes, so it cannot be walked with the model API.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/** Separates text from adjacent blocks so phrases cannot fuse across block boundaries. */
|
|
9
|
+
var BLOCK_SEPARATOR = ' ';
|
|
10
|
+
var asText = function asText(value) {
|
|
11
|
+
return typeof value === 'string' ? value : '';
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Extracts text from raw ADF JSON.
|
|
16
|
+
*
|
|
17
|
+
* Needed because some extensions stash a whole ADF subtree in `attrs.parameters.nestedContent`
|
|
18
|
+
* instead of in their node content — Confluence does this when it coerces nesting the schema
|
|
19
|
+
* cannot represent (an expand more than two collapsible layers deep, say). Such a node is a
|
|
20
|
+
* ProseMirror leaf, so the model walk cannot see the subtree even though it renders on the page
|
|
21
|
+
* via a nested renderer. Recurses, because nestedContent routinely holds further nested content.
|
|
22
|
+
*/
|
|
23
|
+
var _adfEntityText = function adfEntityText(entity) {
|
|
24
|
+
var _entity$attrs, _entity$content;
|
|
25
|
+
if (!entity) {
|
|
26
|
+
return '';
|
|
27
|
+
}
|
|
28
|
+
var parts = [];
|
|
29
|
+
if (entity.type === 'text') {
|
|
30
|
+
parts.push(asText(entity.text));
|
|
31
|
+
}
|
|
32
|
+
var nestedContent = (_entity$attrs = entity.attrs) === null || _entity$attrs === void 0 || (_entity$attrs = _entity$attrs.parameters) === null || _entity$attrs === void 0 ? void 0 : _entity$attrs.nestedContent;
|
|
33
|
+
if (nestedContent) {
|
|
34
|
+
// Prefer the real subtree over `attrs.text`, which is only a placeholder label for it.
|
|
35
|
+
parts.push(_adfEntityText(nestedContent));
|
|
36
|
+
} else {
|
|
37
|
+
var _entity$attrs2;
|
|
38
|
+
parts.push(asText((_entity$attrs2 = entity.attrs) === null || _entity$attrs2 === void 0 ? void 0 : _entity$attrs2.text));
|
|
39
|
+
}
|
|
40
|
+
(_entity$content = entity.content) === null || _entity$content === void 0 || _entity$content.forEach(function (child) {
|
|
41
|
+
return parts.push(_adfEntityText(child));
|
|
42
|
+
});
|
|
43
|
+
return parts.filter(Boolean).join(BLOCK_SEPARATOR);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* `textBetween` drops every non-text leaf unless the node spec declares `leafText`, and no ADF
|
|
48
|
+
* node does. Leaves carry their visible text in attrs, so recover it here.
|
|
49
|
+
*/
|
|
50
|
+
var leafText = function leafText(leaf) {
|
|
51
|
+
var _leaf$attrs, _leaf$attrs2;
|
|
52
|
+
var nestedContent = (_leaf$attrs = leaf.attrs) === null || _leaf$attrs === void 0 || (_leaf$attrs = _leaf$attrs.parameters) === null || _leaf$attrs === void 0 ? void 0 : _leaf$attrs.nestedContent;
|
|
53
|
+
if (nestedContent) {
|
|
54
|
+
return _adfEntityText(nestedContent);
|
|
55
|
+
}
|
|
56
|
+
return asText((_leaf$attrs2 = leaf.attrs) === null || _leaf$attrs2 === void 0 ? void 0 : _leaf$attrs2.text);
|
|
57
|
+
};
|
|
58
|
+
var hasInlineComment = function hasInlineComment(node) {
|
|
59
|
+
return findChildrenByMark(node, node.type.schema.marks.annotation, true).some(function (annotation) {
|
|
60
|
+
return annotation.node.marks.some(function (mark) {
|
|
61
|
+
return mark.attrs.annotationType === 'inlineComment';
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
/** `null` is a cached "no mirror for this node", as distinct from `undefined` for a cache miss. */
|
|
67
|
+
var searchTextCache = new WeakMap();
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Plain-text mirror of an expand's body, rendered in its place while collapsed so browser
|
|
71
|
+
* find-in-page can still reach the content.
|
|
72
|
+
*
|
|
73
|
+
* Cached on the node. ProseMirror nodes are immutable and `render-document` memoises
|
|
74
|
+
* `nodeFromJSON`, so the same node instance is reused across renders — including across the
|
|
75
|
+
* serializer rebuilds that invalidate the module-level `memoizeOne` caches.
|
|
76
|
+
*
|
|
77
|
+
* @returns the mirror text, or `undefined` if this expand must keep its body rendered.
|
|
78
|
+
*/
|
|
79
|
+
export var getExpandSearchText = function getExpandSearchText(node) {
|
|
80
|
+
var cached = searchTextCache.get(node);
|
|
81
|
+
if (cached === undefined) {
|
|
82
|
+
cached = hasInlineComment(node) ?
|
|
83
|
+
// Withhold the mirror, which makes Expand keep rendering `children`. Comment
|
|
84
|
+
// navigation walks the DOM to find the annotated node and scrolls it into view, so
|
|
85
|
+
// the annotation has to exist as a real element — a flat text mirror carries no
|
|
86
|
+
// annotation marks and cannot stand in for it. Without this, stepping through
|
|
87
|
+
// comments with the arrow keys silently fails to reach any comment inside a
|
|
88
|
+
// collapsed expand. Costs the lazy-load win for these expands, deliberately.
|
|
89
|
+
null : node.textBetween(0, node.content.size, BLOCK_SEPARATOR, leafText);
|
|
90
|
+
searchTextCache.set(node, cached);
|
|
91
|
+
}
|
|
92
|
+
return cached !== null && cached !== void 0 ? cached : undefined;
|
|
93
|
+
};
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
3
|
import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
|
|
3
4
|
import type { AnalyticsEventPayload } from '../analytics/events';
|
|
4
5
|
import type { RendererAppearance, RendererContentMode } from './Renderer/types';
|
|
5
6
|
export interface ExpandProps {
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
|
|
8
|
-
loadBodyContent?: boolean;
|
|
9
9
|
localId?: string;
|
|
10
10
|
nestedHeaderIds?: Array<string>;
|
|
11
|
+
/**
|
|
12
|
+
* This expand's ProseMirror node. Supplying it opts the expand into lazy body loading: until the
|
|
13
|
+
* expand is first opened, a plain-text mirror of the body is rendered in place of `children`.
|
|
14
|
+
* Once opened, `children` stay mounted for the rest of the page's life, including after the
|
|
15
|
+
* expand is collapsed again (PGXT-9021). Omit it to keep `children` in the DOM at all times.
|
|
16
|
+
*/
|
|
17
|
+
node?: PMNode;
|
|
11
18
|
nodeType: 'expand' | 'nestedExpand';
|
|
12
19
|
rendererAppearance?: RendererAppearance;
|
|
13
20
|
rendererContentMode?: RendererContentMode;
|
|
14
|
-
searchText?: string;
|
|
15
21
|
title: string;
|
|
16
22
|
}
|
|
17
23
|
declare const _default_1: React.FC<WithIntlProps<ExpandProps & WrappedComponentProps>> & {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
+
/**
|
|
3
|
+
* Plain-text mirror of an expand's body, rendered in its place while collapsed so browser
|
|
4
|
+
* find-in-page can still reach the content.
|
|
5
|
+
*
|
|
6
|
+
* Cached on the node. ProseMirror nodes are immutable and `render-document` memoises
|
|
7
|
+
* `nodeFromJSON`, so the same node instance is reused across renders — including across the
|
|
8
|
+
* serializer rebuilds that invalidate the module-level `memoizeOne` caches.
|
|
9
|
+
*
|
|
10
|
+
* @returns the mirror text, or `undefined` if this expand must keep its body rendered.
|
|
11
|
+
*/
|
|
12
|
+
export declare const getExpandSearchText: (node: PMNode) => string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "137.1.
|
|
3
|
+
"version": "137.1.4",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"@atlaskit/afm-i18n-platform-editor-renderer": "2.200.0",
|
|
36
36
|
"@atlaskit/analytics-listeners": "^11.1.0",
|
|
37
37
|
"@atlaskit/analytics-namespaced-context": "^8.1.0",
|
|
38
|
-
"@atlaskit/analytics-next": "^12.
|
|
38
|
+
"@atlaskit/analytics-next": "^12.4.0",
|
|
39
39
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
40
40
|
"@atlaskit/button": "^25.2.0",
|
|
41
41
|
"@atlaskit/code": "^19.1.0",
|
|
42
42
|
"@atlaskit/css": "^1.0.0",
|
|
43
|
-
"@atlaskit/editor-card-provider": "^7.
|
|
43
|
+
"@atlaskit/editor-card-provider": "^7.2.0",
|
|
44
44
|
"@atlaskit/editor-json-transformer": "^9.6.0",
|
|
45
45
|
"@atlaskit/editor-palette": "^3.4.0",
|
|
46
46
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"uuid": "^3.1.0"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
|
-
"@atlaskit/editor-common": "^120.
|
|
88
|
+
"@atlaskit/editor-common": "^120.3.0",
|
|
89
89
|
"@atlaskit/link-provider": "^5.4.0",
|
|
90
90
|
"@atlaskit/media-core": "^38.0.0",
|
|
91
91
|
"react": "^18.2.0",
|
|
@@ -252,9 +252,6 @@
|
|
|
252
252
|
"type": "boolean",
|
|
253
253
|
"referenceOnly": true
|
|
254
254
|
},
|
|
255
|
-
"platform_editor_video_caption_commit": {
|
|
256
|
-
"type": "boolean"
|
|
257
|
-
},
|
|
258
255
|
"platform-dst-lozenge-tag-badge-visual-uplifts": {
|
|
259
256
|
"type": "boolean"
|
|
260
257
|
},
|
|
@@ -275,6 +272,10 @@
|
|
|
275
272
|
"platform_editor_embed_height_only_fallback": {
|
|
276
273
|
"type": "boolean",
|
|
277
274
|
"referenceOnly": true
|
|
275
|
+
},
|
|
276
|
+
"platform_forge_inline_bodied_macro": {
|
|
277
|
+
"type": "boolean",
|
|
278
|
+
"referenceOnly": true
|
|
278
279
|
}
|
|
279
280
|
}
|
|
280
281
|
}
|