@atlaskit/editor-plugin-block-type 26.0.2 → 26.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 +14 -0
- package/dist/cjs/pm-plugins/ui/ToolbarBlockType/HeadingButton.js +2 -57
- package/dist/cjs/pm-plugins/ui/ToolbarBlockType/QuoteButton.js +2 -25
- package/dist/cjs/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js +8 -45
- package/dist/es2019/pm-plugins/ui/ToolbarBlockType/HeadingButton.js +2 -58
- package/dist/es2019/pm-plugins/ui/ToolbarBlockType/QuoteButton.js +2 -26
- package/dist/es2019/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js +8 -39
- package/dist/esm/pm-plugins/ui/ToolbarBlockType/HeadingButton.js +2 -57
- package/dist/esm/pm-plugins/ui/ToolbarBlockType/QuoteButton.js +2 -25
- package/dist/esm/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js +9 -46
- package/dist/types/blockTypePluginType.d.ts +1 -2
- package/package.json +4 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-type
|
|
2
2
|
|
|
3
|
+
## 26.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 26.0.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`85394203c5e0a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85394203c5e0a) -
|
|
14
|
+
Cleanup `platform_editor_markdown_compatible_toolbar`.
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 26.0.2
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -10,14 +10,11 @@ var _runtime = require("@compiled/react/runtime");
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
var _reactIntl = require("react-intl");
|
|
12
12
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
13
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
14
13
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
15
14
|
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
16
15
|
var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
|
|
17
16
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
18
17
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
19
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
20
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
21
18
|
var _utils = require("../../utils");
|
|
22
19
|
var _editorUGCToken;
|
|
23
20
|
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
|
|
@@ -92,16 +89,6 @@ var HeadingButton = exports.HeadingButton = function HeadingButton(_ref2) {
|
|
|
92
89
|
formatMessage = _useIntl.formatMessage;
|
|
93
90
|
var currentBlockType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType');
|
|
94
91
|
var availableBlockTypesInDropdown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableBlockTypesInDropdown');
|
|
95
|
-
var isMarkdownBridgeEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && (0, _fg.fg)('platform_editor_markdown_compatible_toolbar');
|
|
96
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['markdownMode'], function (states) {
|
|
97
|
-
var _states$markdownModeS, _states$markdownModeS2;
|
|
98
|
-
return {
|
|
99
|
-
markdownView: isMarkdownBridgeEnabled ? (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view : undefined,
|
|
100
|
-
sourceFormatState: isMarkdownBridgeEnabled ? (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.sourceBlockFormatState : null
|
|
101
|
-
};
|
|
102
|
-
}),
|
|
103
|
-
markdownView = _useSharedPluginState.markdownView,
|
|
104
|
-
sourceFormatState = _useSharedPluginState.sourceFormatState;
|
|
105
92
|
var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
|
|
106
93
|
editorView = _useEditorToolbar.editorView;
|
|
107
94
|
if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(function (availableBlockType) {
|
|
@@ -109,59 +96,17 @@ var HeadingButton = exports.HeadingButton = function HeadingButton(_ref2) {
|
|
|
109
96
|
}))) {
|
|
110
97
|
return null;
|
|
111
98
|
}
|
|
112
|
-
|
|
113
|
-
// When in source view and the bridge is enabled, read heading level from
|
|
114
|
-
// the CM6 Lezer-tree-derived format state rather than the PM block type state.
|
|
115
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
116
|
-
// on setView. sourceFormatState is null between the view switch and the
|
|
117
|
-
// first CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
118
|
-
var isMarkdownBridgeActive = markdownView === 'syntax';
|
|
119
|
-
|
|
120
|
-
// Extract the numeric level from the block type name (e.g. 'heading1' → 1).
|
|
121
|
-
var headingLevel = blockType.name.startsWith('heading') ? parseInt(blockType.name.replace('heading', ''), 10) : null;
|
|
122
|
-
var isDisabled = isMarkdownBridgeActive ? Boolean(sourceFormatState === null || sourceFormatState === void 0 ? void 0 : sourceFormatState.inCodeBlock) : shouldDisableHeadingButton(editorView === null || editorView === void 0 ? void 0 : editorView.state, blockType);
|
|
99
|
+
var isDisabled = shouldDisableHeadingButton(editorView === null || editorView === void 0 ? void 0 : editorView.state, blockType);
|
|
123
100
|
var fromBlockQuote = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === 'blockquote';
|
|
124
101
|
var onClick = function onClick() {
|
|
125
102
|
var _api$core, _api$blockType;
|
|
126
103
|
if (isDisabled) {
|
|
127
104
|
return;
|
|
128
105
|
}
|
|
129
|
-
|
|
130
|
-
// Route to CM6 when in source view.
|
|
131
|
-
//
|
|
132
|
-
// - heading1..6: apply/replace via toggleSourceHeading(targetLevel).
|
|
133
|
-
// - normal (paragraph): if the cursor is currently on a heading line,
|
|
134
|
-
// call toggleSourceHeading with the *current* level — toggleHeading
|
|
135
|
-
// removes the prefix when invoked with the matching level, so this
|
|
136
|
-
// downgrades the heading back to a plain paragraph. No-op when not
|
|
137
|
-
// on a heading (already normal) or when smallText is selected (no
|
|
138
|
-
// markdown equivalent).
|
|
139
|
-
if (isMarkdownBridgeActive) {
|
|
140
|
-
var _sourceFormatState$he;
|
|
141
|
-
var targetLevel = blockType.name === 'normal' ? (_sourceFormatState$he = sourceFormatState === null || sourceFormatState === void 0 ? void 0 : sourceFormatState.headingLevel) !== null && _sourceFormatState$he !== void 0 ? _sourceFormatState$he : null : headingLevel;
|
|
142
|
-
if (targetLevel !== null && targetLevel >= 1 && targetLevel <= 6) {
|
|
143
|
-
var _api$markdownMode;
|
|
144
|
-
api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 || _api$markdownMode.actions.toggleSourceHeading(targetLevel);
|
|
145
|
-
}
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
106
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(blockType.name, _analytics.INPUT_METHOD.TOOLBAR, fromBlockQuote));
|
|
149
107
|
};
|
|
150
108
|
var shortcut = (0, _keymaps.formatShortcut)(shortcuts[blockType.name]);
|
|
151
|
-
|
|
152
|
-
// In source view, derive isSelected from the Lezer heading level.
|
|
153
|
-
// In WYSIWYG, use the existing PM block type comparison.
|
|
154
|
-
//
|
|
155
|
-
// Branches in source view:
|
|
156
|
-
// - heading1..6: select when the source heading level matches.
|
|
157
|
-
// - normal (paragraph): select when the source has no heading and is not
|
|
158
|
-
// inside a blockquote — i.e. cursor is on a plain markdown paragraph.
|
|
159
|
-
// - smallText: no markdown equivalent, so never selected in source view.
|
|
160
|
-
//
|
|
161
|
-
// Guard on `sourceFormatState != null` up-front so the body can read the
|
|
162
|
-
// fields directly — clearer than nested optional chains and not fragile to
|
|
163
|
-
// future reordering of the conditions.
|
|
164
|
-
var isSelected = isMarkdownBridgeActive ? sourceFormatState != null ? headingLevel !== null ? sourceFormatState.headingLevel === headingLevel : blockType.name === 'normal' ? sourceFormatState.headingLevel === null && !sourceFormatState.inBlockquote : false : false : (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === blockType.name;
|
|
109
|
+
var isSelected = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === blockType.name;
|
|
165
110
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
166
111
|
elemBefore: blockType.icon,
|
|
167
112
|
elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
|
|
@@ -8,13 +8,10 @@ exports.QuoteButton = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
10
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
12
11
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
13
12
|
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
14
13
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
15
14
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
16
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
17
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
18
15
|
var _utils = require("../../utils");
|
|
19
16
|
var shouldDisableQuoteButton = function shouldDisableQuoteButton(state) {
|
|
20
17
|
if (!state) {
|
|
@@ -31,41 +28,21 @@ var QuoteButton = exports.QuoteButton = function QuoteButton(_ref) {
|
|
|
31
28
|
var currentBlockType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType');
|
|
32
29
|
var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
|
|
33
30
|
editorView = _useEditorToolbar.editorView;
|
|
34
|
-
var isMarkdownBridgeEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && (0, _fg.fg)('platform_editor_markdown_compatible_toolbar');
|
|
35
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['markdownMode'], function (states) {
|
|
36
|
-
var _states$markdownModeS, _states$markdownModeS2;
|
|
37
|
-
return {
|
|
38
|
-
markdownView: isMarkdownBridgeEnabled ? (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view : undefined,
|
|
39
|
-
sourceBlockFormatState: isMarkdownBridgeEnabled ? (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.sourceBlockFormatState : null
|
|
40
|
-
};
|
|
41
|
-
}),
|
|
42
|
-
markdownView = _useSharedPluginState.markdownView,
|
|
43
|
-
sourceBlockFormatState = _useSharedPluginState.sourceBlockFormatState;
|
|
44
31
|
if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(function (availableBlockType) {
|
|
45
32
|
return availableBlockType.name === blockType.name;
|
|
46
33
|
}))) {
|
|
47
34
|
return null;
|
|
48
35
|
}
|
|
49
|
-
|
|
50
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
51
|
-
// on setView. sourceBlockFormatState is null between the view switch and the
|
|
52
|
-
// first CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
53
|
-
var isMarkdownBridgeActive = markdownView === 'syntax';
|
|
54
|
-
var isDisabled = isMarkdownBridgeActive ? Boolean(sourceBlockFormatState === null || sourceBlockFormatState === void 0 ? void 0 : sourceBlockFormatState.inCodeBlock) : shouldDisableQuoteButton(editorView === null || editorView === void 0 ? void 0 : editorView.state);
|
|
36
|
+
var isDisabled = shouldDisableQuoteButton(editorView === null || editorView === void 0 ? void 0 : editorView.state);
|
|
55
37
|
var onClick = function onClick() {
|
|
56
38
|
var _api$core, _api$blockType;
|
|
57
39
|
if (isDisabled) {
|
|
58
40
|
return;
|
|
59
41
|
}
|
|
60
|
-
if (isMarkdownBridgeActive) {
|
|
61
|
-
var _api$markdownMode;
|
|
62
|
-
api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 || _api$markdownMode.actions.toggleSourceBlockquote();
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
42
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.insertBlockQuote(_analytics.INPUT_METHOD.TOOLBAR));
|
|
66
43
|
};
|
|
67
44
|
var shortcut = (0, _keymaps.formatShortcut)(_keymaps.toggleBlockQuote);
|
|
68
|
-
var isSelected =
|
|
45
|
+
var isSelected = currentBlockType === blockType;
|
|
69
46
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
70
47
|
elemBefore: blockType.icon,
|
|
71
48
|
elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
|
|
@@ -13,54 +13,17 @@ var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
|
13
13
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
14
14
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
15
15
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
16
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
17
16
|
var _blockTypes = require("../../block-types");
|
|
18
17
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
18
|
+
var selectPluginState = function selectPluginState(state) {
|
|
19
|
+
var _state$blockTypeState, _state$interactionSta, _state$blockTypeState2;
|
|
20
|
+
return {
|
|
21
|
+
blockTypesDisabled: (_state$blockTypeState = state.blockTypeState) === null || _state$blockTypeState === void 0 ? void 0 : _state$blockTypeState.blockTypesDisabled,
|
|
22
|
+
currentBlockType: ((_state$interactionSta = state.interactionState) === null || _state$interactionSta === void 0 ? void 0 : _state$interactionSta.interactionState) === 'hasNotHadInteraction' && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_default_toolbar_state') ? undefined : (_state$blockTypeState2 = state.blockTypeState) === null || _state$blockTypeState2 === void 0 ? void 0 : _state$blockTypeState2.currentBlockType
|
|
23
|
+
};
|
|
24
|
+
};
|
|
19
25
|
var usePluginState = function usePluginState(api) {
|
|
20
|
-
|
|
21
|
-
// inside `toolbarBlockTypesWithRank` doesn't run at module import time —
|
|
22
|
-
// that breaks downstream tests that import preset-default without
|
|
23
|
-
// initializing the FeatureGates client.
|
|
24
|
-
var sourceViewBlockTypeValues = (0, _react.useMemo)(function () {
|
|
25
|
-
return Object.values((0, _blockTypes.toolbarBlockTypesWithRank)({}));
|
|
26
|
-
}, []);
|
|
27
|
-
var selectPluginState = (0, _react.useCallback)(function (state) {
|
|
28
|
-
var _state$interactionSta, _state$blockTypeState, _state$markdownModeSt, _state$markdownModeSt2, _sourceViewBlockTypeV, _sourceViewBlockTypeV2, _sourceViewBlockTypeV3, _state$blockTypeState2;
|
|
29
|
-
var pmCurrentBlockType = ((_state$interactionSta = state.interactionState) === null || _state$interactionSta === void 0 ? void 0 : _state$interactionSta.interactionState) === 'hasNotHadInteraction' && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_default_toolbar_state') ? undefined : (_state$blockTypeState = state.blockTypeState) === null || _state$blockTypeState === void 0 ? void 0 : _state$blockTypeState.currentBlockType;
|
|
30
|
-
|
|
31
|
-
// When the markdown bridge is active and the source view is mounted,
|
|
32
|
-
// derive currentBlockType from the CM6 Lezer heading level rather than
|
|
33
|
-
// PM block type state (which reflects the last WYSIWYG cursor position).
|
|
34
|
-
var isMarkdownBridgeEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && (0, _fg.fg)('platform_editor_markdown_compatible_toolbar');
|
|
35
|
-
var sourceFormatState = isMarkdownBridgeEnabled ? (_state$markdownModeSt = state.markdownModeState) === null || _state$markdownModeSt === void 0 ? void 0 : _state$markdownModeSt.sourceBlockFormatState : null;
|
|
36
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
37
|
-
// on setView. sourceFormatState is null between the view switch and the first
|
|
38
|
-
// CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
39
|
-
var isSourceViewActive = isMarkdownBridgeEnabled && ((_state$markdownModeSt2 = state.markdownModeState) === null || _state$markdownModeSt2 === void 0 ? void 0 : _state$markdownModeSt2.view) === 'syntax';
|
|
40
|
-
|
|
41
|
-
// When in source view, derive currentBlockType from CM6 Lezer state
|
|
42
|
-
// (heading level or blockquote) rather than PM block type state.
|
|
43
|
-
// Guard on sourceFormatState being available — during the race window
|
|
44
|
-
// after switching to source view but before CM6 fires its first update,
|
|
45
|
-
// sourceFormatState is null even though isSourceViewActive is true.
|
|
46
|
-
var currentBlockType = isSourceViewActive && sourceFormatState ? sourceFormatState.headingLevel !== null ? // In a heading, look up the full BlockType by name.
|
|
47
|
-
(_sourceViewBlockTypeV = sourceViewBlockTypeValues.find(function (bt) {
|
|
48
|
-
return bt.name === "heading".concat(sourceFormatState.headingLevel);
|
|
49
|
-
})) !== null && _sourceViewBlockTypeV !== void 0 ? _sourceViewBlockTypeV : null : sourceFormatState.inBlockquote ? // In a blockquote, look up the blockquote BlockType.
|
|
50
|
-
(_sourceViewBlockTypeV2 = sourceViewBlockTypeValues.find(function (bt) {
|
|
51
|
-
return bt.name === 'blockquote';
|
|
52
|
-
})) !== null && _sourceViewBlockTypeV2 !== void 0 ? _sourceViewBlockTypeV2 : null : // Plain paragraph — look up the 'normal' BlockType so the trigger
|
|
53
|
-
// shows "Normal text" (matches WYSIWYG and HeadingButton's
|
|
54
|
-
// Normal-in-source-view selection logic).
|
|
55
|
-
(_sourceViewBlockTypeV3 = sourceViewBlockTypeValues.find(function (bt) {
|
|
56
|
-
return bt.name === 'normal';
|
|
57
|
-
})) !== null && _sourceViewBlockTypeV3 !== void 0 ? _sourceViewBlockTypeV3 : null : isSourceViewActive ? null : pmCurrentBlockType;
|
|
58
|
-
return {
|
|
59
|
-
blockTypesDisabled: isSourceViewActive && sourceFormatState ? Boolean(sourceFormatState.inCodeBlock) : isSourceViewActive ? false : (_state$blockTypeState2 = state.blockTypeState) === null || _state$blockTypeState2 === void 0 ? void 0 : _state$blockTypeState2.blockTypesDisabled,
|
|
60
|
-
currentBlockType: currentBlockType
|
|
61
|
-
};
|
|
62
|
-
}, [sourceViewBlockTypeValues]);
|
|
63
|
-
return (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockType', 'interaction', 'markdownMode'], selectPluginState);
|
|
26
|
+
return (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockType', 'interaction'], selectPluginState);
|
|
64
27
|
};
|
|
65
28
|
var TextStylesMenuButton = exports.TextStylesMenuButton = function TextStylesMenuButton(_ref) {
|
|
66
29
|
var _Object$values$find;
|
|
@@ -7,14 +7,11 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { useIntl } from 'react-intl';
|
|
9
9
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
10
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
11
10
|
import { formatShortcut, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText } from '@atlaskit/editor-common/keymaps';
|
|
12
11
|
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
13
12
|
import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
|
|
14
13
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
15
14
|
import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
17
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
18
15
|
import { isSelectionInsideListNode } from '../../utils';
|
|
19
16
|
const headingTextProps = {
|
|
20
17
|
normal: {
|
|
@@ -89,76 +86,23 @@ export const HeadingButton = ({
|
|
|
89
86
|
} = useIntl();
|
|
90
87
|
const currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
|
|
91
88
|
const availableBlockTypesInDropdown = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown');
|
|
92
|
-
const isMarkdownBridgeEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar');
|
|
93
|
-
const {
|
|
94
|
-
markdownView,
|
|
95
|
-
sourceFormatState
|
|
96
|
-
} = useSharedPluginStateWithSelector(api, ['markdownMode'], states => {
|
|
97
|
-
var _states$markdownModeS, _states$markdownModeS2;
|
|
98
|
-
return {
|
|
99
|
-
markdownView: isMarkdownBridgeEnabled ? (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view : undefined,
|
|
100
|
-
sourceFormatState: isMarkdownBridgeEnabled ? (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.sourceBlockFormatState : null
|
|
101
|
-
};
|
|
102
|
-
});
|
|
103
89
|
const {
|
|
104
90
|
editorView
|
|
105
91
|
} = useEditorToolbar();
|
|
106
92
|
if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(availableBlockType => availableBlockType.name === blockType.name))) {
|
|
107
93
|
return null;
|
|
108
94
|
}
|
|
109
|
-
|
|
110
|
-
// When in source view and the bridge is enabled, read heading level from
|
|
111
|
-
// the CM6 Lezer-tree-derived format state rather than the PM block type state.
|
|
112
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
113
|
-
// on setView. sourceFormatState is null between the view switch and the
|
|
114
|
-
// first CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
115
|
-
const isMarkdownBridgeActive = markdownView === 'syntax';
|
|
116
|
-
|
|
117
|
-
// Extract the numeric level from the block type name (e.g. 'heading1' → 1).
|
|
118
|
-
const headingLevel = blockType.name.startsWith('heading') ? parseInt(blockType.name.replace('heading', ''), 10) : null;
|
|
119
|
-
const isDisabled = isMarkdownBridgeActive ? Boolean(sourceFormatState === null || sourceFormatState === void 0 ? void 0 : sourceFormatState.inCodeBlock) : shouldDisableHeadingButton(editorView === null || editorView === void 0 ? void 0 : editorView.state, blockType);
|
|
95
|
+
const isDisabled = shouldDisableHeadingButton(editorView === null || editorView === void 0 ? void 0 : editorView.state, blockType);
|
|
120
96
|
const fromBlockQuote = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === 'blockquote';
|
|
121
97
|
const onClick = () => {
|
|
122
98
|
var _api$core, _api$blockType, _api$blockType$comman;
|
|
123
99
|
if (isDisabled) {
|
|
124
100
|
return;
|
|
125
101
|
}
|
|
126
|
-
|
|
127
|
-
// Route to CM6 when in source view.
|
|
128
|
-
//
|
|
129
|
-
// - heading1..6: apply/replace via toggleSourceHeading(targetLevel).
|
|
130
|
-
// - normal (paragraph): if the cursor is currently on a heading line,
|
|
131
|
-
// call toggleSourceHeading with the *current* level — toggleHeading
|
|
132
|
-
// removes the prefix when invoked with the matching level, so this
|
|
133
|
-
// downgrades the heading back to a plain paragraph. No-op when not
|
|
134
|
-
// on a heading (already normal) or when smallText is selected (no
|
|
135
|
-
// markdown equivalent).
|
|
136
|
-
if (isMarkdownBridgeActive) {
|
|
137
|
-
var _sourceFormatState$he;
|
|
138
|
-
const targetLevel = blockType.name === 'normal' ? (_sourceFormatState$he = sourceFormatState === null || sourceFormatState === void 0 ? void 0 : sourceFormatState.headingLevel) !== null && _sourceFormatState$he !== void 0 ? _sourceFormatState$he : null : headingLevel;
|
|
139
|
-
if (targetLevel !== null && targetLevel >= 1 && targetLevel <= 6) {
|
|
140
|
-
var _api$markdownMode;
|
|
141
|
-
api === null || api === void 0 ? void 0 : (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.actions.toggleSourceHeading(targetLevel);
|
|
142
|
-
}
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
145
102
|
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(blockType.name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
|
|
146
103
|
};
|
|
147
104
|
const shortcut = formatShortcut(shortcuts[blockType.name]);
|
|
148
|
-
|
|
149
|
-
// In source view, derive isSelected from the Lezer heading level.
|
|
150
|
-
// In WYSIWYG, use the existing PM block type comparison.
|
|
151
|
-
//
|
|
152
|
-
// Branches in source view:
|
|
153
|
-
// - heading1..6: select when the source heading level matches.
|
|
154
|
-
// - normal (paragraph): select when the source has no heading and is not
|
|
155
|
-
// inside a blockquote — i.e. cursor is on a plain markdown paragraph.
|
|
156
|
-
// - smallText: no markdown equivalent, so never selected in source view.
|
|
157
|
-
//
|
|
158
|
-
// Guard on `sourceFormatState != null` up-front so the body can read the
|
|
159
|
-
// fields directly — clearer than nested optional chains and not fragile to
|
|
160
|
-
// future reordering of the conditions.
|
|
161
|
-
const isSelected = isMarkdownBridgeActive ? sourceFormatState != null ? headingLevel !== null ? sourceFormatState.headingLevel === headingLevel : blockType.name === 'normal' ? sourceFormatState.headingLevel === null && !sourceFormatState.inBlockquote : false : false : (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === blockType.name;
|
|
105
|
+
const isSelected = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === blockType.name;
|
|
162
106
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
163
107
|
elemBefore: blockType.icon,
|
|
164
108
|
elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
4
|
import { formatShortcut, toggleBlockQuote } from '@atlaskit/editor-common/keymaps';
|
|
6
5
|
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
7
6
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
8
7
|
import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
10
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
11
8
|
import { isSelectionInsideListNode } from '../../utils';
|
|
12
9
|
const shouldDisableQuoteButton = state => {
|
|
13
10
|
if (!state) {
|
|
@@ -27,40 +24,19 @@ export const QuoteButton = ({
|
|
|
27
24
|
const {
|
|
28
25
|
editorView
|
|
29
26
|
} = useEditorToolbar();
|
|
30
|
-
const isMarkdownBridgeEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar');
|
|
31
|
-
const {
|
|
32
|
-
markdownView,
|
|
33
|
-
sourceBlockFormatState
|
|
34
|
-
} = useSharedPluginStateWithSelector(api, ['markdownMode'], states => {
|
|
35
|
-
var _states$markdownModeS, _states$markdownModeS2;
|
|
36
|
-
return {
|
|
37
|
-
markdownView: isMarkdownBridgeEnabled ? (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view : undefined,
|
|
38
|
-
sourceBlockFormatState: isMarkdownBridgeEnabled ? (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.sourceBlockFormatState : null
|
|
39
|
-
};
|
|
40
|
-
});
|
|
41
27
|
if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(availableBlockType => availableBlockType.name === blockType.name))) {
|
|
42
28
|
return null;
|
|
43
29
|
}
|
|
44
|
-
|
|
45
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
46
|
-
// on setView. sourceBlockFormatState is null between the view switch and the
|
|
47
|
-
// first CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
48
|
-
const isMarkdownBridgeActive = markdownView === 'syntax';
|
|
49
|
-
const isDisabled = isMarkdownBridgeActive ? Boolean(sourceBlockFormatState === null || sourceBlockFormatState === void 0 ? void 0 : sourceBlockFormatState.inCodeBlock) : shouldDisableQuoteButton(editorView === null || editorView === void 0 ? void 0 : editorView.state);
|
|
30
|
+
const isDisabled = shouldDisableQuoteButton(editorView === null || editorView === void 0 ? void 0 : editorView.state);
|
|
50
31
|
const onClick = () => {
|
|
51
32
|
var _api$core, _api$blockType, _api$blockType$comman;
|
|
52
33
|
if (isDisabled) {
|
|
53
34
|
return;
|
|
54
35
|
}
|
|
55
|
-
if (isMarkdownBridgeActive) {
|
|
56
|
-
var _api$markdownMode;
|
|
57
|
-
api === null || api === void 0 ? void 0 : (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.actions.toggleSourceBlockquote();
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
36
|
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.insertBlockQuote(INPUT_METHOD.TOOLBAR));
|
|
61
37
|
};
|
|
62
38
|
const shortcut = formatShortcut(toggleBlockQuote);
|
|
63
|
-
const isSelected =
|
|
39
|
+
const isSelected = currentBlockType === blockType;
|
|
64
40
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
65
41
|
elemBefore: blockType.icon,
|
|
66
42
|
elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
4
|
import { toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
@@ -6,46 +6,15 @@ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
|
6
6
|
import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
|
|
7
7
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
10
9
|
import { toolbarBlockTypesWithRank } from '../../block-types';
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const selectPluginState = useCallback(state => {
|
|
18
|
-
var _state$interactionSta, _state$blockTypeState, _state$markdownModeSt, _state$markdownModeSt2, _sourceViewBlockTypeV, _sourceViewBlockTypeV2, _sourceViewBlockTypeV3, _state$blockTypeState2;
|
|
19
|
-
const pmCurrentBlockType = ((_state$interactionSta = state.interactionState) === null || _state$interactionSta === void 0 ? void 0 : _state$interactionSta.interactionState) === 'hasNotHadInteraction' && isExperimentEnabled('platform_editor_default_toolbar_state') ? undefined : (_state$blockTypeState = state.blockTypeState) === null || _state$blockTypeState === void 0 ? void 0 : _state$blockTypeState.currentBlockType;
|
|
20
|
-
|
|
21
|
-
// When the markdown bridge is active and the source view is mounted,
|
|
22
|
-
// derive currentBlockType from the CM6 Lezer heading level rather than
|
|
23
|
-
// PM block type state (which reflects the last WYSIWYG cursor position).
|
|
24
|
-
const isMarkdownBridgeEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar');
|
|
25
|
-
const sourceFormatState = isMarkdownBridgeEnabled ? (_state$markdownModeSt = state.markdownModeState) === null || _state$markdownModeSt === void 0 ? void 0 : _state$markdownModeSt.sourceBlockFormatState : null;
|
|
26
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
27
|
-
// on setView. sourceFormatState is null between the view switch and the first
|
|
28
|
-
// CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
29
|
-
const isSourceViewActive = isMarkdownBridgeEnabled && ((_state$markdownModeSt2 = state.markdownModeState) === null || _state$markdownModeSt2 === void 0 ? void 0 : _state$markdownModeSt2.view) === 'syntax';
|
|
30
|
-
|
|
31
|
-
// When in source view, derive currentBlockType from CM6 Lezer state
|
|
32
|
-
// (heading level or blockquote) rather than PM block type state.
|
|
33
|
-
// Guard on sourceFormatState being available — during the race window
|
|
34
|
-
// after switching to source view but before CM6 fires its first update,
|
|
35
|
-
// sourceFormatState is null even though isSourceViewActive is true.
|
|
36
|
-
const currentBlockType = isSourceViewActive && sourceFormatState ? sourceFormatState.headingLevel !== null ? // In a heading, look up the full BlockType by name.
|
|
37
|
-
(_sourceViewBlockTypeV = sourceViewBlockTypeValues.find(bt => bt.name === `heading${sourceFormatState.headingLevel}`)) !== null && _sourceViewBlockTypeV !== void 0 ? _sourceViewBlockTypeV : null : sourceFormatState.inBlockquote ? // In a blockquote, look up the blockquote BlockType.
|
|
38
|
-
(_sourceViewBlockTypeV2 = sourceViewBlockTypeValues.find(bt => bt.name === 'blockquote')) !== null && _sourceViewBlockTypeV2 !== void 0 ? _sourceViewBlockTypeV2 : null : // Plain paragraph — look up the 'normal' BlockType so the trigger
|
|
39
|
-
// shows "Normal text" (matches WYSIWYG and HeadingButton's
|
|
40
|
-
// Normal-in-source-view selection logic).
|
|
41
|
-
(_sourceViewBlockTypeV3 = sourceViewBlockTypeValues.find(bt => bt.name === 'normal')) !== null && _sourceViewBlockTypeV3 !== void 0 ? _sourceViewBlockTypeV3 : null : isSourceViewActive ? null : pmCurrentBlockType;
|
|
42
|
-
return {
|
|
43
|
-
blockTypesDisabled: isSourceViewActive && sourceFormatState ? Boolean(sourceFormatState.inCodeBlock) : isSourceViewActive ? false : (_state$blockTypeState2 = state.blockTypeState) === null || _state$blockTypeState2 === void 0 ? void 0 : _state$blockTypeState2.blockTypesDisabled,
|
|
44
|
-
currentBlockType
|
|
45
|
-
};
|
|
46
|
-
}, [sourceViewBlockTypeValues]);
|
|
47
|
-
return useSharedPluginStateWithSelector(api, ['blockType', 'interaction', 'markdownMode'], selectPluginState);
|
|
10
|
+
const selectPluginState = state => {
|
|
11
|
+
var _state$blockTypeState, _state$interactionSta, _state$blockTypeState2;
|
|
12
|
+
return {
|
|
13
|
+
blockTypesDisabled: (_state$blockTypeState = state.blockTypeState) === null || _state$blockTypeState === void 0 ? void 0 : _state$blockTypeState.blockTypesDisabled,
|
|
14
|
+
currentBlockType: ((_state$interactionSta = state.interactionState) === null || _state$interactionSta === void 0 ? void 0 : _state$interactionSta.interactionState) === 'hasNotHadInteraction' && isExperimentEnabled('platform_editor_default_toolbar_state') ? undefined : (_state$blockTypeState2 = state.blockTypeState) === null || _state$blockTypeState2 === void 0 ? void 0 : _state$blockTypeState2.currentBlockType
|
|
15
|
+
};
|
|
48
16
|
};
|
|
17
|
+
const usePluginState = api => useSharedPluginStateWithSelector(api, ['blockType', 'interaction'], selectPluginState);
|
|
49
18
|
export const TextStylesMenuButton = ({
|
|
50
19
|
allowFontSize,
|
|
51
20
|
api,
|
|
@@ -7,14 +7,11 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { useIntl } from 'react-intl';
|
|
9
9
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
10
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
11
10
|
import { formatShortcut, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText } from '@atlaskit/editor-common/keymaps';
|
|
12
11
|
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
13
12
|
import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
|
|
14
13
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
15
14
|
import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
17
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
18
15
|
import { isSelectionInsideListNode } from '../../utils';
|
|
19
16
|
var headingTextProps = {
|
|
20
17
|
normal: {
|
|
@@ -86,16 +83,6 @@ export var HeadingButton = function HeadingButton(_ref2) {
|
|
|
86
83
|
formatMessage = _useIntl.formatMessage;
|
|
87
84
|
var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
|
|
88
85
|
var availableBlockTypesInDropdown = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown');
|
|
89
|
-
var isMarkdownBridgeEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar');
|
|
90
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['markdownMode'], function (states) {
|
|
91
|
-
var _states$markdownModeS, _states$markdownModeS2;
|
|
92
|
-
return {
|
|
93
|
-
markdownView: isMarkdownBridgeEnabled ? (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view : undefined,
|
|
94
|
-
sourceFormatState: isMarkdownBridgeEnabled ? (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.sourceBlockFormatState : null
|
|
95
|
-
};
|
|
96
|
-
}),
|
|
97
|
-
markdownView = _useSharedPluginState.markdownView,
|
|
98
|
-
sourceFormatState = _useSharedPluginState.sourceFormatState;
|
|
99
86
|
var _useEditorToolbar = useEditorToolbar(),
|
|
100
87
|
editorView = _useEditorToolbar.editorView;
|
|
101
88
|
if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(function (availableBlockType) {
|
|
@@ -103,59 +90,17 @@ export var HeadingButton = function HeadingButton(_ref2) {
|
|
|
103
90
|
}))) {
|
|
104
91
|
return null;
|
|
105
92
|
}
|
|
106
|
-
|
|
107
|
-
// When in source view and the bridge is enabled, read heading level from
|
|
108
|
-
// the CM6 Lezer-tree-derived format state rather than the PM block type state.
|
|
109
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
110
|
-
// on setView. sourceFormatState is null between the view switch and the
|
|
111
|
-
// first CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
112
|
-
var isMarkdownBridgeActive = markdownView === 'syntax';
|
|
113
|
-
|
|
114
|
-
// Extract the numeric level from the block type name (e.g. 'heading1' → 1).
|
|
115
|
-
var headingLevel = blockType.name.startsWith('heading') ? parseInt(blockType.name.replace('heading', ''), 10) : null;
|
|
116
|
-
var isDisabled = isMarkdownBridgeActive ? Boolean(sourceFormatState === null || sourceFormatState === void 0 ? void 0 : sourceFormatState.inCodeBlock) : shouldDisableHeadingButton(editorView === null || editorView === void 0 ? void 0 : editorView.state, blockType);
|
|
93
|
+
var isDisabled = shouldDisableHeadingButton(editorView === null || editorView === void 0 ? void 0 : editorView.state, blockType);
|
|
117
94
|
var fromBlockQuote = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === 'blockquote';
|
|
118
95
|
var onClick = function onClick() {
|
|
119
96
|
var _api$core, _api$blockType;
|
|
120
97
|
if (isDisabled) {
|
|
121
98
|
return;
|
|
122
99
|
}
|
|
123
|
-
|
|
124
|
-
// Route to CM6 when in source view.
|
|
125
|
-
//
|
|
126
|
-
// - heading1..6: apply/replace via toggleSourceHeading(targetLevel).
|
|
127
|
-
// - normal (paragraph): if the cursor is currently on a heading line,
|
|
128
|
-
// call toggleSourceHeading with the *current* level — toggleHeading
|
|
129
|
-
// removes the prefix when invoked with the matching level, so this
|
|
130
|
-
// downgrades the heading back to a plain paragraph. No-op when not
|
|
131
|
-
// on a heading (already normal) or when smallText is selected (no
|
|
132
|
-
// markdown equivalent).
|
|
133
|
-
if (isMarkdownBridgeActive) {
|
|
134
|
-
var _sourceFormatState$he;
|
|
135
|
-
var targetLevel = blockType.name === 'normal' ? (_sourceFormatState$he = sourceFormatState === null || sourceFormatState === void 0 ? void 0 : sourceFormatState.headingLevel) !== null && _sourceFormatState$he !== void 0 ? _sourceFormatState$he : null : headingLevel;
|
|
136
|
-
if (targetLevel !== null && targetLevel >= 1 && targetLevel <= 6) {
|
|
137
|
-
var _api$markdownMode;
|
|
138
|
-
api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 || _api$markdownMode.actions.toggleSourceHeading(targetLevel);
|
|
139
|
-
}
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
100
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(blockType.name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
|
|
143
101
|
};
|
|
144
102
|
var shortcut = formatShortcut(shortcuts[blockType.name]);
|
|
145
|
-
|
|
146
|
-
// In source view, derive isSelected from the Lezer heading level.
|
|
147
|
-
// In WYSIWYG, use the existing PM block type comparison.
|
|
148
|
-
//
|
|
149
|
-
// Branches in source view:
|
|
150
|
-
// - heading1..6: select when the source heading level matches.
|
|
151
|
-
// - normal (paragraph): select when the source has no heading and is not
|
|
152
|
-
// inside a blockquote — i.e. cursor is on a plain markdown paragraph.
|
|
153
|
-
// - smallText: no markdown equivalent, so never selected in source view.
|
|
154
|
-
//
|
|
155
|
-
// Guard on `sourceFormatState != null` up-front so the body can read the
|
|
156
|
-
// fields directly — clearer than nested optional chains and not fragile to
|
|
157
|
-
// future reordering of the conditions.
|
|
158
|
-
var isSelected = isMarkdownBridgeActive ? sourceFormatState != null ? headingLevel !== null ? sourceFormatState.headingLevel === headingLevel : blockType.name === 'normal' ? sourceFormatState.headingLevel === null && !sourceFormatState.inBlockquote : false : false : (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === blockType.name;
|
|
103
|
+
var isSelected = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === blockType.name;
|
|
159
104
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
160
105
|
elemBefore: blockType.icon,
|
|
161
106
|
elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
4
|
import { formatShortcut, toggleBlockQuote } from '@atlaskit/editor-common/keymaps';
|
|
6
5
|
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
7
6
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
8
7
|
import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
10
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
11
8
|
import { isSelectionInsideListNode } from '../../utils';
|
|
12
9
|
var shouldDisableQuoteButton = function shouldDisableQuoteButton(state) {
|
|
13
10
|
if (!state) {
|
|
@@ -24,41 +21,21 @@ export var QuoteButton = function QuoteButton(_ref) {
|
|
|
24
21
|
var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
|
|
25
22
|
var _useEditorToolbar = useEditorToolbar(),
|
|
26
23
|
editorView = _useEditorToolbar.editorView;
|
|
27
|
-
var isMarkdownBridgeEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar');
|
|
28
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['markdownMode'], function (states) {
|
|
29
|
-
var _states$markdownModeS, _states$markdownModeS2;
|
|
30
|
-
return {
|
|
31
|
-
markdownView: isMarkdownBridgeEnabled ? (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view : undefined,
|
|
32
|
-
sourceBlockFormatState: isMarkdownBridgeEnabled ? (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.sourceBlockFormatState : null
|
|
33
|
-
};
|
|
34
|
-
}),
|
|
35
|
-
markdownView = _useSharedPluginState.markdownView,
|
|
36
|
-
sourceBlockFormatState = _useSharedPluginState.sourceBlockFormatState;
|
|
37
24
|
if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(function (availableBlockType) {
|
|
38
25
|
return availableBlockType.name === blockType.name;
|
|
39
26
|
}))) {
|
|
40
27
|
return null;
|
|
41
28
|
}
|
|
42
|
-
|
|
43
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
44
|
-
// on setView. sourceBlockFormatState is null between the view switch and the
|
|
45
|
-
// first CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
46
|
-
var isMarkdownBridgeActive = markdownView === 'syntax';
|
|
47
|
-
var isDisabled = isMarkdownBridgeActive ? Boolean(sourceBlockFormatState === null || sourceBlockFormatState === void 0 ? void 0 : sourceBlockFormatState.inCodeBlock) : shouldDisableQuoteButton(editorView === null || editorView === void 0 ? void 0 : editorView.state);
|
|
29
|
+
var isDisabled = shouldDisableQuoteButton(editorView === null || editorView === void 0 ? void 0 : editorView.state);
|
|
48
30
|
var onClick = function onClick() {
|
|
49
31
|
var _api$core, _api$blockType;
|
|
50
32
|
if (isDisabled) {
|
|
51
33
|
return;
|
|
52
34
|
}
|
|
53
|
-
if (isMarkdownBridgeActive) {
|
|
54
|
-
var _api$markdownMode;
|
|
55
|
-
api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 || _api$markdownMode.actions.toggleSourceBlockquote();
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
35
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.insertBlockQuote(INPUT_METHOD.TOOLBAR));
|
|
59
36
|
};
|
|
60
37
|
var shortcut = formatShortcut(toggleBlockQuote);
|
|
61
|
-
var isSelected =
|
|
38
|
+
var isSelected = currentBlockType === blockType;
|
|
62
39
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
63
40
|
elemBefore: blockType.icon,
|
|
64
41
|
elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
4
|
import { toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
@@ -6,53 +6,16 @@ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
|
6
6
|
import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
|
|
7
7
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
10
9
|
import { toolbarBlockTypesWithRank } from '../../block-types';
|
|
10
|
+
var selectPluginState = function selectPluginState(state) {
|
|
11
|
+
var _state$blockTypeState, _state$interactionSta, _state$blockTypeState2;
|
|
12
|
+
return {
|
|
13
|
+
blockTypesDisabled: (_state$blockTypeState = state.blockTypeState) === null || _state$blockTypeState === void 0 ? void 0 : _state$blockTypeState.blockTypesDisabled,
|
|
14
|
+
currentBlockType: ((_state$interactionSta = state.interactionState) === null || _state$interactionSta === void 0 ? void 0 : _state$interactionSta.interactionState) === 'hasNotHadInteraction' && isExperimentEnabled('platform_editor_default_toolbar_state') ? undefined : (_state$blockTypeState2 = state.blockTypeState) === null || _state$blockTypeState2 === void 0 ? void 0 : _state$blockTypeState2.currentBlockType
|
|
15
|
+
};
|
|
16
|
+
};
|
|
11
17
|
var usePluginState = function usePluginState(api) {
|
|
12
|
-
|
|
13
|
-
// inside `toolbarBlockTypesWithRank` doesn't run at module import time —
|
|
14
|
-
// that breaks downstream tests that import preset-default without
|
|
15
|
-
// initializing the FeatureGates client.
|
|
16
|
-
var sourceViewBlockTypeValues = useMemo(function () {
|
|
17
|
-
return Object.values(toolbarBlockTypesWithRank({}));
|
|
18
|
-
}, []);
|
|
19
|
-
var selectPluginState = useCallback(function (state) {
|
|
20
|
-
var _state$interactionSta, _state$blockTypeState, _state$markdownModeSt, _state$markdownModeSt2, _sourceViewBlockTypeV, _sourceViewBlockTypeV2, _sourceViewBlockTypeV3, _state$blockTypeState2;
|
|
21
|
-
var pmCurrentBlockType = ((_state$interactionSta = state.interactionState) === null || _state$interactionSta === void 0 ? void 0 : _state$interactionSta.interactionState) === 'hasNotHadInteraction' && isExperimentEnabled('platform_editor_default_toolbar_state') ? undefined : (_state$blockTypeState = state.blockTypeState) === null || _state$blockTypeState === void 0 ? void 0 : _state$blockTypeState.currentBlockType;
|
|
22
|
-
|
|
23
|
-
// When the markdown bridge is active and the source view is mounted,
|
|
24
|
-
// derive currentBlockType from the CM6 Lezer heading level rather than
|
|
25
|
-
// PM block type state (which reflects the last WYSIWYG cursor position).
|
|
26
|
-
var isMarkdownBridgeEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar');
|
|
27
|
-
var sourceFormatState = isMarkdownBridgeEnabled ? (_state$markdownModeSt = state.markdownModeState) === null || _state$markdownModeSt === void 0 ? void 0 : _state$markdownModeSt.sourceBlockFormatState : null;
|
|
28
|
-
// markdownView is authoritative for "in source view" — it flips synchronously
|
|
29
|
-
// on setView. sourceFormatState is null between the view switch and the first
|
|
30
|
-
// CM6 update listener fire, so we can't rely on it as the sentinel.
|
|
31
|
-
var isSourceViewActive = isMarkdownBridgeEnabled && ((_state$markdownModeSt2 = state.markdownModeState) === null || _state$markdownModeSt2 === void 0 ? void 0 : _state$markdownModeSt2.view) === 'syntax';
|
|
32
|
-
|
|
33
|
-
// When in source view, derive currentBlockType from CM6 Lezer state
|
|
34
|
-
// (heading level or blockquote) rather than PM block type state.
|
|
35
|
-
// Guard on sourceFormatState being available — during the race window
|
|
36
|
-
// after switching to source view but before CM6 fires its first update,
|
|
37
|
-
// sourceFormatState is null even though isSourceViewActive is true.
|
|
38
|
-
var currentBlockType = isSourceViewActive && sourceFormatState ? sourceFormatState.headingLevel !== null ? // In a heading, look up the full BlockType by name.
|
|
39
|
-
(_sourceViewBlockTypeV = sourceViewBlockTypeValues.find(function (bt) {
|
|
40
|
-
return bt.name === "heading".concat(sourceFormatState.headingLevel);
|
|
41
|
-
})) !== null && _sourceViewBlockTypeV !== void 0 ? _sourceViewBlockTypeV : null : sourceFormatState.inBlockquote ? // In a blockquote, look up the blockquote BlockType.
|
|
42
|
-
(_sourceViewBlockTypeV2 = sourceViewBlockTypeValues.find(function (bt) {
|
|
43
|
-
return bt.name === 'blockquote';
|
|
44
|
-
})) !== null && _sourceViewBlockTypeV2 !== void 0 ? _sourceViewBlockTypeV2 : null : // Plain paragraph — look up the 'normal' BlockType so the trigger
|
|
45
|
-
// shows "Normal text" (matches WYSIWYG and HeadingButton's
|
|
46
|
-
// Normal-in-source-view selection logic).
|
|
47
|
-
(_sourceViewBlockTypeV3 = sourceViewBlockTypeValues.find(function (bt) {
|
|
48
|
-
return bt.name === 'normal';
|
|
49
|
-
})) !== null && _sourceViewBlockTypeV3 !== void 0 ? _sourceViewBlockTypeV3 : null : isSourceViewActive ? null : pmCurrentBlockType;
|
|
50
|
-
return {
|
|
51
|
-
blockTypesDisabled: isSourceViewActive && sourceFormatState ? Boolean(sourceFormatState.inCodeBlock) : isSourceViewActive ? false : (_state$blockTypeState2 = state.blockTypeState) === null || _state$blockTypeState2 === void 0 ? void 0 : _state$blockTypeState2.blockTypesDisabled,
|
|
52
|
-
currentBlockType: currentBlockType
|
|
53
|
-
};
|
|
54
|
-
}, [sourceViewBlockTypeValues]);
|
|
55
|
-
return useSharedPluginStateWithSelector(api, ['blockType', 'interaction', 'markdownMode'], selectPluginState);
|
|
18
|
+
return useSharedPluginStateWithSelector(api, ['blockType', 'interaction'], selectPluginState);
|
|
56
19
|
};
|
|
57
20
|
export var TextStylesMenuButton = function TextStylesMenuButton(_ref) {
|
|
58
21
|
var _Object$values$find;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
3
|
import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
|
|
4
4
|
import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
|
|
@@ -32,7 +32,6 @@ export type BlockTypePlugin = NextEditorPlugin<'blockType', {
|
|
|
32
32
|
OptionalPlugin<ListPlugin>,
|
|
33
33
|
OptionalPlugin<SelectionPlugin>,
|
|
34
34
|
OptionalPlugin<InteractionPlugin>,
|
|
35
|
-
OptionalPlugin<_MarkdownModePluginStub>,
|
|
36
35
|
OptionalPlugin<UiControlRegistryPlugin>
|
|
37
36
|
];
|
|
38
37
|
pluginConfiguration: BlockTypePluginOptions | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-type",
|
|
3
|
-
"version": "26.0.
|
|
3
|
+
"version": "26.0.4",
|
|
4
4
|
"description": "BlockType plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"@atlaskit/editor-toolbar": "^2.8.0",
|
|
38
38
|
"@atlaskit/editor-toolbar-model": "^1.2.0",
|
|
39
39
|
"@atlaskit/icon": "^38.0.0",
|
|
40
|
-
"@atlaskit/icon-lab": "^7.
|
|
40
|
+
"@atlaskit/icon-lab": "^7.11.0",
|
|
41
41
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
43
43
|
"@atlaskit/primitives": "^22.5.0",
|
|
44
44
|
"@atlaskit/prosemirror-history": "^1.3.0",
|
|
45
45
|
"@atlaskit/prosemirror-input-rules": "^4.1.0",
|
|
46
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
46
|
+
"@atlaskit/tmp-editor-statsig": "^213.0.0",
|
|
47
47
|
"@atlaskit/tokens": "^20.1.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@compiled/react": "^1.0.2",
|
|
50
50
|
"@emotion/react": "^11.7.1"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@atlaskit/editor-common": "^126.
|
|
53
|
+
"@atlaskit/editor-common": "^126.2.0",
|
|
54
54
|
"react": "^18.2.0 || ^19.2.0",
|
|
55
55
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
56
56
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -70,9 +70,6 @@
|
|
|
70
70
|
"platform_editor_toolbar_responsive_fixes": {
|
|
71
71
|
"type": "boolean"
|
|
72
72
|
},
|
|
73
|
-
"platform_editor_markdown_compatible_toolbar": {
|
|
74
|
-
"type": "boolean"
|
|
75
|
-
},
|
|
76
73
|
"platform_editor_adf_with_localid": {
|
|
77
74
|
"type": "boolean"
|
|
78
75
|
},
|