@atlaskit/editor-core 238.0.2 → 238.0.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 +20 -0
- package/dist/cjs/create-editor/ReactEditorView.js +50 -193
- package/dist/cjs/create-editor/editorStateNotificationPlugin.js +6 -1
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.compiled.css +1 -26
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +5 -27
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/create-editor/ReactEditorView.js +29 -152
- package/dist/es2019/create-editor/editorStateNotificationPlugin.js +6 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.compiled.css +1 -26
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +5 -27
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/create-editor/ReactEditorView.js +49 -192
- package/dist/esm/create-editor/editorStateNotificationPlugin.js +6 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.compiled.css +1 -26
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +5 -27
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -3
- package/package.json +5 -5
|
@@ -22,7 +22,6 @@ import useConstructor from '@atlaskit/editor-common/useConstructor';
|
|
|
22
22
|
import usePreviousState from '@atlaskit/editor-common/usePreviousState';
|
|
23
23
|
import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
|
|
24
24
|
import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
|
|
25
|
-
import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
26
25
|
import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
27
26
|
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
28
27
|
import { createSSREditorState } from '@atlaskit/editor-ssr-renderer/create-ssr-editor-state';
|
|
@@ -33,7 +32,6 @@ import { addUFOCustomData } from '@atlaskit/react-ufo/add-ufo-custom-data';
|
|
|
33
32
|
import { getInteractionId } from '@atlaskit/react-ufo/get-interaction-id';
|
|
34
33
|
import { abortAll, getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
|
|
35
34
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
36
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
37
35
|
import { useProviders } from '../composable-editor/hooks/useProviders';
|
|
38
36
|
import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
|
|
39
37
|
import { getEditorDomSize } from '../utils/getEditorDomSize';
|
|
@@ -58,24 +56,6 @@ import { useFireFullWidthEvent } from './ReactEditorView/useFireFullWidthEvent';
|
|
|
58
56
|
const EDIT_AREA_ID = 'ak-editor-textarea';
|
|
59
57
|
const SSR_TRACE_SEGMENT_NAME = 'reactEditorView';
|
|
60
58
|
const bootStartTime = isPerformanceAPIAvailable() ? performance.now() : undefined;
|
|
61
|
-
// `markdown↔rich` toggles drop different node/mark sets, so the unique
|
|
62
|
-
// name set is enough to detect when a destructive rebuild is needed.
|
|
63
|
-
function sameNames(a, b) {
|
|
64
|
-
const setA = new Set(a);
|
|
65
|
-
const setB = new Set(b);
|
|
66
|
-
if (setA.size !== setB.size) {
|
|
67
|
-
return false;
|
|
68
|
-
}
|
|
69
|
-
for (const name of setA) {
|
|
70
|
-
if (!setB.has(name)) {
|
|
71
|
-
return false;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
return true;
|
|
75
|
-
}
|
|
76
|
-
function schemaShapeChanged(current, next) {
|
|
77
|
-
return !sameNames(Object.keys(current.nodes), next.nodes.map(n => n.name)) || !sameNames(Object.keys(current.marks), next.marks.map(m => m.name));
|
|
78
|
-
}
|
|
79
59
|
export function ReactEditorView(props) {
|
|
80
60
|
var _pluginInjectionAPI$c, _pluginInjectionAPI$c2, _pluginInjectionAPI$c3, _media, _linking, _linking$smartLinks, _document$querySelect, _props$render, _props$render2;
|
|
81
61
|
// Should be always the first statement in the component
|
|
@@ -376,13 +356,8 @@ export function ReactEditorView(props) {
|
|
|
376
356
|
};
|
|
377
357
|
}, [eventDispatcher]);
|
|
378
358
|
|
|
379
|
-
// Bumped after `reconfigureState` so the render prop re-reads the
|
|
380
|
-
// in-place-mutated `config.current` (contentComponents / toolbar
|
|
381
|
-
// components from the rebuilt preset).
|
|
382
|
-
const [, bumpConfigVersion] = useState(0);
|
|
383
|
-
|
|
384
359
|
// Preset reference last processed by reconfigureState. Used to skip the
|
|
385
|
-
// destructive
|
|
360
|
+
// destructive plugin filter when reconfigure is
|
|
386
361
|
// called with the same preset.
|
|
387
362
|
const lastProcessedPresetRef = useRef(null);
|
|
388
363
|
const reconfigureState = useCallback(props => {
|
|
@@ -401,15 +376,10 @@ export function ReactEditorView(props) {
|
|
|
401
376
|
const previousPluginNames = new Set(pluginInjectionAPI.current.getRegisteredPluginNames());
|
|
402
377
|
let editorPlugins = createPluginsList(props.preset, 'allowBlockType' in props.editorProps ? props.editorProps : {}, pluginInjectionAPI.current);
|
|
403
378
|
|
|
404
|
-
// Capture once, before
|
|
405
|
-
//
|
|
406
|
-
//
|
|
379
|
+
// Capture once, before the downstream block updates the ref — the
|
|
380
|
+
// filter is destructive and only wants to run when the preset has
|
|
381
|
+
// actually changed.
|
|
407
382
|
const presetChanged = lastProcessedPresetRef.current !== props.preset;
|
|
408
|
-
|
|
409
|
-
// Build a candidate config from the *unfiltered* plugin list so we can
|
|
410
|
-
// decide whether the schema rebuild path will run. Both the rebuild
|
|
411
|
-
// decision and the drop-filter decision below depend on this answer,
|
|
412
|
-
// so it has to be computed up-front.
|
|
413
383
|
const buildConfig = plugins => {
|
|
414
384
|
const c = processPluginsList(plugins);
|
|
415
385
|
c.pmPlugins.push(...pluginInjectionAPI.current.getInternalPMPlugins());
|
|
@@ -417,16 +387,6 @@ export function ReactEditorView(props) {
|
|
|
417
387
|
};
|
|
418
388
|
let nextConfig = buildConfig(editorPlugins);
|
|
419
389
|
|
|
420
|
-
// `state.reconfigure` preserves the original schema, so a preset
|
|
421
|
-
// toggle that should change schema (markdown↔rich) needs a fresh
|
|
422
|
-
// `EditorState`. Resets all plugin state including undo history.
|
|
423
|
-
//
|
|
424
|
-
// Compare schema *shape* (node + mark name sets) rather than preset
|
|
425
|
-
// identity: consumers commonly recreate the preset object on every
|
|
426
|
-
// parent re-render, and a destructive rebuild on a no-op identity
|
|
427
|
-
// change tears down all plugin state (e.g. unmounts the AI palette).
|
|
428
|
-
const shouldRebuildSchema = presetChanged && schemaShapeChanged(viewRef.current.state.schema, nextConfig) && expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
|
|
429
|
-
|
|
430
390
|
// `state.reconfigure` keeps the original schema, so switching presets
|
|
431
391
|
// can leave the editor inconsistent in two ways:
|
|
432
392
|
// 1. The new preset may add plugins that reference schema nodes or
|
|
@@ -435,25 +395,15 @@ export function ReactEditorView(props) {
|
|
|
435
395
|
// injection API even when the new preset doesn't re-register
|
|
436
396
|
// them, so listeners still fire against a state that no longer
|
|
437
397
|
// has their pmPlugin.
|
|
438
|
-
//
|
|
439
|
-
// When the schema is being rebuilt below, the new schema is built
|
|
440
|
-
// from the *unfiltered* plugin list — so dropping plugins whose
|
|
441
|
-
// nodes/marks the OLD schema lacks would wrongly remove the very
|
|
442
|
-
// plugins the rebuild is meant to admit. Skip the drop step in that
|
|
443
|
-
// case (purpose 1) but always reconcile the injection API
|
|
444
|
-
// (purpose 2). When NOT rebuilding, run both — even under the
|
|
445
|
-
// `cc-markdown-mode` experiment, otherwise no-op preset identity
|
|
446
|
-
// changes would silently leave a broken plugin/schema mismatch.
|
|
447
398
|
if (presetChanged) {
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
dropped = result.dropped;
|
|
399
|
+
const {
|
|
400
|
+
dropped,
|
|
401
|
+
kept
|
|
402
|
+
} = filterPluginsForReconfigure(editorPlugins, viewRef.current.state.schema, previousPluginNames);
|
|
403
|
+
if (dropped.length > 0) {
|
|
404
|
+
editorPlugins = kept;
|
|
405
|
+
// Plugin list changed — rebuild candidate config to match.
|
|
406
|
+
nextConfig = buildConfig(editorPlugins);
|
|
457
407
|
}
|
|
458
408
|
const keptPluginNames = new Set(editorPlugins.map(p => p === null || p === void 0 ? void 0 : p.name).filter(n => Boolean(n)));
|
|
459
409
|
const evictedFromApi = pluginInjectionAPI.current.retainPlugins(keptPluginNames);
|
|
@@ -467,67 +417,23 @@ export function ReactEditorView(props) {
|
|
|
467
417
|
}
|
|
468
418
|
config.current = nextConfig;
|
|
469
419
|
const state = viewRef.current.state;
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
newSelection = Selection.fromJSON(newDoc, state.selection.toJSON());
|
|
488
|
-
} catch {
|
|
489
|
-
// Old selection's positions / node types may not map onto the new schema.
|
|
490
|
-
newSelection = Selection.atStart(newDoc);
|
|
491
|
-
}
|
|
492
|
-
const plugins = createPMPlugins({
|
|
493
|
-
schema: newSchema,
|
|
494
|
-
dispatch: dispatch,
|
|
495
|
-
errorReporter: errorReporter,
|
|
496
|
-
editorConfig: config.current,
|
|
497
|
-
eventDispatcher: eventDispatcher,
|
|
498
|
-
providerFactory: props.providerFactory,
|
|
499
|
-
portalProviderAPI: props.portalProviderAPI,
|
|
500
|
-
nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
|
|
501
|
-
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
502
|
-
featureFlags,
|
|
503
|
-
getIntl: () => props.intl,
|
|
504
|
-
onEditorStateUpdated: pluginInjectionAPI.current.onEditorViewUpdated
|
|
505
|
-
});
|
|
506
|
-
newState = EditorState.create({
|
|
507
|
-
schema: newSchema,
|
|
508
|
-
doc: newDoc,
|
|
509
|
-
selection: newSelection,
|
|
510
|
-
plugins: plugins
|
|
511
|
-
});
|
|
512
|
-
} else {
|
|
513
|
-
const plugins = createPMPlugins({
|
|
514
|
-
schema: state.schema,
|
|
515
|
-
dispatch: dispatch,
|
|
516
|
-
errorReporter: errorReporter,
|
|
517
|
-
editorConfig: config.current,
|
|
518
|
-
eventDispatcher: eventDispatcher,
|
|
519
|
-
providerFactory: props.providerFactory,
|
|
520
|
-
portalProviderAPI: props.portalProviderAPI,
|
|
521
|
-
nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
|
|
522
|
-
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
523
|
-
featureFlags,
|
|
524
|
-
getIntl: () => props.intl,
|
|
525
|
-
onEditorStateUpdated: pluginInjectionAPI.current.onEditorViewUpdated
|
|
526
|
-
});
|
|
527
|
-
newState = state.reconfigure({
|
|
528
|
-
plugins: plugins
|
|
529
|
-
});
|
|
530
|
-
}
|
|
420
|
+
const plugins = createPMPlugins({
|
|
421
|
+
schema: state.schema,
|
|
422
|
+
dispatch: dispatch,
|
|
423
|
+
errorReporter: errorReporter,
|
|
424
|
+
editorConfig: config.current,
|
|
425
|
+
eventDispatcher: eventDispatcher,
|
|
426
|
+
providerFactory: props.providerFactory,
|
|
427
|
+
portalProviderAPI: props.portalProviderAPI,
|
|
428
|
+
nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
|
|
429
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
430
|
+
featureFlags,
|
|
431
|
+
getIntl: () => props.intl,
|
|
432
|
+
onEditorStateUpdated: pluginInjectionAPI.current.onEditorViewUpdated
|
|
433
|
+
});
|
|
434
|
+
const newState = state.reconfigure({
|
|
435
|
+
plugins: plugins
|
|
436
|
+
});
|
|
531
437
|
if (presetChanged) {
|
|
532
438
|
lastProcessedPresetRef.current = props.preset;
|
|
533
439
|
}
|
|
@@ -539,35 +445,6 @@ export function ReactEditorView(props) {
|
|
|
539
445
|
...viewRef.current.props,
|
|
540
446
|
state: newState
|
|
541
447
|
});
|
|
542
|
-
|
|
543
|
-
// The new collab-edit plugin instance starts with `isReady=false`.
|
|
544
|
-
// The rebind path in editor-plugin-collab-edit's initialize.ts is
|
|
545
|
-
// gated on `provider.getInitPayload`, which the Confluence NCS
|
|
546
|
-
// provider does not implement, so the placeholder spinner would
|
|
547
|
-
// never clear. Re-seeding here is safe: the prior state must have
|
|
548
|
-
// had `isReady=true` for the user to have triggered the toggle.
|
|
549
|
-
//
|
|
550
|
-
// Must run AFTER `view.update({ state: newState })`: that call resets
|
|
551
|
-
// the view's state to the captured `newState` reference, so a
|
|
552
|
-
// dispatch placed before it would advance `view.state` to a value
|
|
553
|
-
// that `update` then silently overwrites — discarding the meta and
|
|
554
|
-
// leaving `isReady=false`.
|
|
555
|
-
if (shouldRebuildSchema) {
|
|
556
|
-
// `state.collabEditPlugin$` is the property PM derives from the
|
|
557
|
-
// collab plugin's PluginKey; cast through `unknown` to read it.
|
|
558
|
-
const collabState = viewRef.current.state.collabEditPlugin$;
|
|
559
|
-
if (collabState && collabState.isReady !== true) {
|
|
560
|
-
viewRef.current.dispatch(viewRef.current.state.tr.setMeta('collabInitialised', true));
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
// EDITOR-6702: gated until we have a broader gate; reconfigure is a
|
|
565
|
-
// low-level path so use NoExposure.
|
|
566
|
-
if (expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true)) {
|
|
567
|
-
// Force a render so PluginSlot picks up the new preset's content
|
|
568
|
-
// components against the new state.
|
|
569
|
-
bumpConfigVersion(v => v + 1);
|
|
570
|
-
}
|
|
571
448
|
return result;
|
|
572
449
|
}, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch, errorReporter, featureFlags]);
|
|
573
450
|
const onEditorViewUpdated = useCallback(({
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
3
4
|
const key = new PluginKey('editorStateNotificationPlugin');
|
|
4
5
|
export const createEditorStateNotificationPlugin = (onEditorStateUpdated, onEditorViewStateUpdatedCallbacks) => {
|
|
5
6
|
const transactions = [];
|
|
@@ -12,7 +13,11 @@ export const createEditorStateNotificationPlugin = (onEditorStateUpdated, onEdit
|
|
|
12
13
|
};
|
|
13
14
|
},
|
|
14
15
|
apply(tr) {
|
|
15
|
-
|
|
16
|
+
if (!isExperimentEnabled('platform_editor_reduce_memory_leaks')) {
|
|
17
|
+
// Dead accumulator: nothing reads it, so it pins every transaction for the
|
|
18
|
+
// editor's lifetime. Delete it when the experiment ships.
|
|
19
|
+
transactions.push(tr);
|
|
20
|
+
}
|
|
16
21
|
return {
|
|
17
22
|
latestTransaction: tr
|
|
18
23
|
};
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
._v5641fxv{transition:max-width .5s cubic-bezier(.15,1,.3,1)}
|
|
2
|
-
._v5642kub{transition:padding 0ms cubic-bezier(.15,1,.3,1)}.
|
|
3
|
-
._11bl1txw >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{display:flex}
|
|
4
|
-
._12glglyw[data-markdown-mode-hide-prosemirror=true]>.ak-editor-content-area>.ProseMirror{display:none}
|
|
5
|
-
._13jk1txw >.ak-editor-content-area{display:flex}
|
|
6
|
-
._13svglyw .ProseMirror>ol:not([data-node-type=actionList]):not([data-node-type=decisionList]){clear:none}
|
|
7
|
-
._13t61wug >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{flex-basis:auto}
|
|
8
|
-
._1593idpf >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{min-height:0}
|
|
2
|
+
._v5642kub{transition:padding 0ms cubic-bezier(.15,1,.3,1)}._13svglyw .ProseMirror>ol:not([data-node-type=actionList]):not([data-node-type=decisionList]){clear:none}
|
|
9
3
|
._16jlkb7n{flex-grow:1}
|
|
10
4
|
._17q71osq .fabric-editor--full-width-mode .extension-container.inline{max-width:100%}
|
|
11
5
|
._18q6usvi .ProseMirror{box-sizing:border-box}
|
|
@@ -16,26 +10,18 @@
|
|
|
16
10
|
._19bvt9kd{padding-left:72px}
|
|
17
11
|
._19pk1wug{margin-top:auto}
|
|
18
12
|
._19pkidpf{margin-top:0}
|
|
19
|
-
._1a1d1osq >.ak-editor-content-area{height:100%}
|
|
20
13
|
._1b7c1kw7 .fabric-editor--full-width-mode td .extension-container.inline{max-width:inherit}
|
|
21
14
|
._1bsb1osq{width:100%}
|
|
22
15
|
._1e0c1txw{display:flex}
|
|
23
|
-
._1e0cglyw{display:none}
|
|
24
|
-
._1e8kkb7n >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{flex-grow:1}
|
|
25
16
|
._1f38dez1{container-name:editor-area}
|
|
26
17
|
._1gl01ejb .ProseMirror>p:last-child{margin-bottom:var(--ds-space-300,24px)}
|
|
27
18
|
._1k8i1osq .ProseMirror .pm-table-wrapper>table{width:100%}
|
|
28
|
-
._1n5qidpf >.ak-editor-content-area{padding-left:0}
|
|
29
19
|
._1nw4glyw .ProseMirror>h1{clear:none}
|
|
30
20
|
._1qzyglyw .ProseMirror>h3{clear:none}
|
|
31
21
|
._1rnyglyw .ProseMirror>h5{clear:none}
|
|
32
22
|
._1tb2idpf .ProseMirror .pm-table-wrapper>table{margin-left:0}
|
|
33
|
-
._1ul9idpf{min-width:0}
|
|
34
|
-
._1vbxidpf >.ak-editor-content-area{min-height:0}
|
|
35
23
|
._1wpzesu3{align-self:flex-end}
|
|
36
|
-
._1wrrusvi >.ak-editor-content-area{box-sizing:border-box}
|
|
37
24
|
._1wxymslj .fabric-editor--full-width-mode .extension-container{max-width:calc(100% - 4px)}
|
|
38
|
-
._1xouidpf >.ak-editor-content-area{min-width:0}
|
|
39
25
|
._2hwx1wug{margin-right:auto}
|
|
40
26
|
._2hwxidpf{margin-right:0}
|
|
41
27
|
._2lx21bp4{flex-direction:column}
|
|
@@ -43,24 +29,16 @@
|
|
|
43
29
|
._4t3i1ap5{height:calc(100% - 105px)}
|
|
44
30
|
._4t3i1osq{height:100%}
|
|
45
31
|
._4t3ibhu0{height:calc(100% - var(--ak-editor-fullpage-toolbar-height))}
|
|
46
|
-
._4tbp1osq >.ak-editor-content-area{width:100%}
|
|
47
|
-
._71ybidpf >.ak-editor-content-area{padding-right:0}
|
|
48
32
|
._7cca15wb{container-type:inline-size}
|
|
49
33
|
._7uc0glyw .ProseMirror>ul{clear:none}
|
|
50
34
|
._8j6w1lxk.ak-editor-content-area-no-toolbar{height:calc(100% + 1px)}
|
|
51
35
|
._8vye1n1a .ProseMirror .pm-table-wrapper>table{margin-right:-1px}
|
|
52
36
|
._9dtbmslj .fabric-editor--full-width-mode .multiBodiedExtension--container{max-width:calc(100% - 4px)}
|
|
53
|
-
._amwgglyw[data-markdown-mode-hide-scroll-gutter=true]>.ak-editor-content-area>[data-vc=scroll-gutter]{display:none}
|
|
54
|
-
._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
|
|
55
|
-
._boivkb7n >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{flex-shrink:1}
|
|
56
37
|
._ca0qidpf{padding-top:0}
|
|
57
38
|
._ca0qoahv{padding-top:var(--ds-space-600,3pc)}
|
|
58
|
-
._evz0idpf >.ak-editor-content-area{padding-bottom:0}
|
|
59
|
-
._fh67idpf >.ak-editor-content-area{padding-top:0}
|
|
60
39
|
._i92uagmp .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .fabric-editor-breakout-mark{transform:none!important}
|
|
61
40
|
._j9k7kb7n .ProseMirror{flex-grow:1}
|
|
62
41
|
._l4a11hrf .ProseMirror>*{clear:both}
|
|
63
|
-
._li931osq >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{width:100%}
|
|
64
42
|
._n3tdidpf{padding-bottom:0}
|
|
65
43
|
._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
|
|
66
44
|
._njlp131u{contain:layout style inline-size}
|
|
@@ -69,10 +47,7 @@
|
|
|
69
47
|
._otyr1wug{margin-bottom:auto}
|
|
70
48
|
._otyridpf{margin-bottom:0}
|
|
71
49
|
._p12f5kin{max-width:var(--ak-editor-content-area-max-width)}
|
|
72
|
-
._p12fglyw{max-width:none}
|
|
73
50
|
._pnffaq80 .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .fabric-editor-breakout-mark{width:100%!important}
|
|
74
|
-
._q0l01bp4 >.ak-editor-content-area{flex-direction:column}
|
|
75
|
-
._qgzyidpf >.ak-editor-content-area>[data-testid=plugins-components-wrapper]{min-width:0}
|
|
76
51
|
._qkfz261p .fabric-editor--full-width-mode:not(:has(#chromeless-editor)) .fabric-editor-breakout-mark{margin-left:unset!important}
|
|
77
52
|
._t2fzglyw .ProseMirror>p{clear:none}
|
|
78
53
|
._tynl4diq .fabric-editor--full-width-mode [data-layout-section]{max-width:calc(100% + 40px)}
|
|
@@ -5,10 +5,8 @@ import React, { useImperativeHandle, useRef } from 'react';
|
|
|
5
5
|
import classnames from 'classnames';
|
|
6
6
|
import { injectIntl } from 'react-intl';
|
|
7
7
|
import { messages } from '@atlaskit/editor-common/messages/full-page';
|
|
8
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
|
|
9
8
|
import { akEditorGutterPaddingDynamic, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
|
|
10
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
11
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
12
10
|
|
|
13
11
|
// Ignored via go/ees005
|
|
14
12
|
// eslint-disable-next-line import/no-named-as-default
|
|
@@ -39,9 +37,6 @@ const compiledStyles = {
|
|
|
39
37
|
contentAreaWrapper: "_1bsb1osq _7cca15wb _1f38dez1 _njlp131u",
|
|
40
38
|
sidebarArea: "_4t3i1osq _vchhusvi _1wpzesu3 _1hgw1wug _1t1q1if8 _uj9widpf _13hh1y6m",
|
|
41
39
|
editorContentAreaProsemirrorStyle: "_j9k7kb7n _18q6usvi _l4a11hrf _1nw4glyw _yq1qglyw _1qzyglyw _ongaglyw _1rnyglyw _vtulglyw _13svglyw _t2fzglyw _7uc0glyw _1gl01ejb",
|
|
42
|
-
hideEditorContentAreaProsemirrorWithAttributeStyle: "_12glglyw",
|
|
43
|
-
hideEditorContentAreaScrollGutterWithAttributeStyle: "_amwgglyw",
|
|
44
|
-
hideEditorScrollGutterStyle: "_1e0cglyw",
|
|
45
40
|
fullWidthNonChromelessBreakoutBlockTableStyle: "_xpemaq80 _pnffaq80 _zr7faq80 _qkfz261p _i92uagmp",
|
|
46
41
|
editorContentAreaNew: "_19pk1wug _2hwx1wug _otyr1wug _18u01wug _v5641fxv _vwz41tcg _ca0qoahv _n3tdoahv _4t3i1ap5 _1bsb1osq _2lx21bp4 _16jlkb7n _p12f5kin _1uizkqmb",
|
|
47
42
|
tableFullPageEditorStylesNew: "_1tb2idpf _8vye1n1a _1k8i1osq",
|
|
@@ -51,9 +46,7 @@ const compiledStyles = {
|
|
|
51
46
|
editorContentGutterStyles: "_ca0qidpf _u5f31ex1 _n3tdidpf _19bv1ex1 _vchhusvi",
|
|
52
47
|
editorContentReducedGutterStyles: "_1d7gidpf _n2nw1tcg _d329idpf _105p1tcg",
|
|
53
48
|
contentAreaNew: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _v5642kub _1e0c1txw _2lx2vrvc _4t3ibhu0 _vchhusvi _8j6w1lxk",
|
|
54
|
-
contentAreaHeightNoToolbar: "_4t3i1osq"
|
|
55
|
-
markdownModeContainerBackgroundStyle: "_bfhkhfxm _101j15vq",
|
|
56
|
-
markdownModeContentAreaStyle: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _4t3i1osq _p12fglyw _1ul9idpf _n3tdidpf _ca0qidpf _1bsb1osq _fh67idpf _71ybidpf _evz0idpf _1n5qidpf _1wrrusvi _13jk1txw _q0l01bp4 _1a1d1osq _1vbxidpf _1xouidpf _4tbp1osq _1e8kkb7n _boivkb7n _13t61wug _11bl1txw _1593idpf _qgzyidpf _li931osq"
|
|
49
|
+
contentAreaHeightNoToolbar: "_4t3i1osq"
|
|
57
50
|
};
|
|
58
51
|
export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
59
52
|
const EDITOR_CONTAINER = 'ak-editor-container';
|
|
@@ -81,17 +74,6 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
81
74
|
return containerRef.current;
|
|
82
75
|
}
|
|
83
76
|
}), []);
|
|
84
|
-
const markdownPluginCurrentView = useSharedPluginStateWithSelector(props.editorAPI, ['markdownMode'], states => {
|
|
85
|
-
var _states$markdownModeS;
|
|
86
|
-
return (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view;
|
|
87
|
-
});
|
|
88
|
-
const markdownPluginCurrentIsMarkdownMode = useSharedPluginStateWithSelector(props.editorAPI, ['markdownMode'], states => {
|
|
89
|
-
var _states$markdownModeS2;
|
|
90
|
-
return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
|
|
91
|
-
});
|
|
92
|
-
const isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
|
|
93
|
-
const shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
|
|
94
|
-
const shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
|
|
95
77
|
const content = /*#__PURE__*/React.createElement(EditorContentContainer
|
|
96
78
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
97
79
|
, {
|
|
@@ -107,14 +89,12 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
107
89
|
editorView: props.editorView,
|
|
108
90
|
editorDisabled: props.disabled
|
|
109
91
|
}, /*#__PURE__*/React.createElement("div", {
|
|
110
|
-
"data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
|
|
111
|
-
"data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
|
|
112
92
|
style: {
|
|
113
93
|
'--ak-editor-content-area-max-width': `${contentAreaMaxWidth}px`
|
|
114
94
|
}
|
|
115
95
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
116
96
|
,
|
|
117
|
-
className: ax([compiledStyles.editorContentAreaNew, compiledStyles.editorContentAreaProsemirrorStyle,
|
|
97
|
+
className: ax([compiledStyles.editorContentAreaNew, compiledStyles.editorContentAreaProsemirrorStyle, compiledStyles.tableFullPageEditorStylesNew, compiledStyles.fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
118
98
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
119
99
|
compiledStyles.editorContentAreaContainerStyleExcludeCodeBlockNew, compiledStyles.editorContentAreaContainerNestedDndStyle, "ak-editor-content-area-region"]),
|
|
120
100
|
"data-editor-editable-content": true,
|
|
@@ -153,15 +133,13 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
153
133
|
paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
|
|
154
134
|
},
|
|
155
135
|
"data-vc": "scroll-gutter",
|
|
156
|
-
"data-editor-scroll-gutter": "true"
|
|
157
|
-
className: ax([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
|
|
136
|
+
"data-editor-scroll-gutter": "true"
|
|
158
137
|
}) : /*#__PURE__*/React.createElement("div", {
|
|
159
138
|
id: "editor-scroll-gutter",
|
|
160
139
|
style: {
|
|
161
140
|
paddingBottom: `${(_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120'}px`
|
|
162
141
|
},
|
|
163
|
-
"data-vc": "scroll-gutter"
|
|
164
|
-
className: ax([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
|
|
142
|
+
"data-vc": "scroll-gutter"
|
|
165
143
|
}))))));
|
|
166
144
|
return /*#__PURE__*/React.createElement("div", {
|
|
167
145
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
@@ -170,7 +148,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
170
148
|
}, /*#__PURE__*/React.createElement("div", {
|
|
171
149
|
"data-testid": EDITOR_CONTAINER,
|
|
172
150
|
"data-editor-container": 'true',
|
|
173
|
-
className: ax([compiledStyles.contentAreaWrapper
|
|
151
|
+
className: ax([compiledStyles.contentAreaWrapper])
|
|
174
152
|
}, props.UNSAFE_containLayout ? /*#__PURE__*/React.createElement("div", {
|
|
175
153
|
"data-testid": "editor-contain-size-and-layout-wrapper",
|
|
176
154
|
className: ax([containLayoutStyles.wrapper])
|