@atlaskit/editor-core 151.1.1 → 151.3.0
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 +28 -0
- package/dist/cjs/create-editor/create-plugins-list.js +5 -2
- package/dist/cjs/labs/next/presets/default.js +3 -1
- package/dist/cjs/plugins/code-bidi-warning/index.js +5 -2
- package/dist/cjs/plugins/code-bidi-warning/pm-plugins/main.js +12 -3
- package/dist/cjs/plugins/code-bidi-warning/pm-plugins/plugin-factory.js +15 -5
- package/dist/cjs/plugins/code-block/index.js +3 -3
- package/dist/cjs/plugins/code-block/nodeviews/highlighting-code-block.js +6 -3
- package/dist/cjs/plugins/code-block/pm-plugins/main.js +11 -3
- package/dist/cjs/plugins/find-replace/ui/Find.js +16 -9
- package/dist/cjs/plugins/find-replace/ui/FindReplace.js +9 -2
- package/dist/cjs/plugins/find-replace/ui/Replace.js +11 -3
- package/dist/cjs/plugins/find-replace/ui/styles.js +44 -35
- package/dist/cjs/plugins/status/styles.js +1 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/create-editor/create-plugins-list.js +5 -2
- package/dist/es2019/labs/next/presets/default.js +3 -1
- package/dist/es2019/plugins/code-bidi-warning/index.js +8 -2
- package/dist/es2019/plugins/code-bidi-warning/pm-plugins/main.js +12 -2
- package/dist/es2019/plugins/code-bidi-warning/pm-plugins/plugin-factory.js +16 -5
- package/dist/es2019/plugins/code-block/index.js +3 -2
- package/dist/es2019/plugins/code-block/nodeviews/highlighting-code-block.js +6 -3
- package/dist/es2019/plugins/code-block/pm-plugins/main.js +11 -3
- package/dist/es2019/plugins/find-replace/ui/Find.js +18 -10
- package/dist/es2019/plugins/find-replace/ui/FindReplace.js +11 -3
- package/dist/es2019/plugins/find-replace/ui/Replace.js +12 -4
- package/dist/es2019/plugins/find-replace/ui/styles.js +37 -47
- package/dist/es2019/plugins/status/styles.js +3 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/create-editor/create-plugins-list.js +5 -2
- package/dist/esm/labs/next/presets/default.js +3 -1
- package/dist/esm/plugins/code-bidi-warning/index.js +5 -2
- package/dist/esm/plugins/code-bidi-warning/pm-plugins/main.js +12 -3
- package/dist/esm/plugins/code-bidi-warning/pm-plugins/plugin-factory.js +15 -5
- package/dist/esm/plugins/code-block/index.js +3 -3
- package/dist/esm/plugins/code-block/nodeviews/highlighting-code-block.js +6 -3
- package/dist/esm/plugins/code-block/pm-plugins/main.js +11 -3
- package/dist/esm/plugins/find-replace/ui/Find.js +17 -10
- package/dist/esm/plugins/find-replace/ui/FindReplace.js +10 -3
- package/dist/esm/plugins/find-replace/ui/Replace.js +11 -4
- package/dist/esm/plugins/find-replace/ui/styles.js +39 -18
- package/dist/esm/plugins/status/styles.js +1 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/code-bidi-warning/index.d.ts +4 -2
- package/dist/types/plugins/code-bidi-warning/pm-plugins/main.d.ts +4 -2
- package/dist/types/plugins/code-bidi-warning/pm-plugins/plugin-factory.d.ts +2 -1
- package/dist/types/plugins/code-bidi-warning/pm-plugins/types.d.ts +1 -0
- package/dist/types/plugins/code-block/index.d.ts +1 -1
- package/dist/types/plugins/code-block/nodeviews/highlighting-code-block.d.ts +12 -1
- package/dist/types/plugins/code-block/pm-plugins/main.d.ts +3 -1
- package/dist/types/plugins/code-block/types.d.ts +2 -0
- package/dist/types/plugins/find-replace/ui/Find.d.ts +1 -0
- package/dist/types/plugins/find-replace/ui/FindReplace.d.ts +1 -0
- package/dist/types/plugins/find-replace/ui/Replace.d.ts +1 -0
- package/dist/types/plugins/find-replace/ui/styles.d.ts +5 -14
- package/package.json +6 -5
|
@@ -18,7 +18,8 @@ export const {
|
|
|
18
18
|
|
|
19
19
|
const newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
|
|
20
20
|
doc: tr.doc,
|
|
21
|
-
codeBidiWarningLabel: pluginState.codeBidiWarningLabel
|
|
21
|
+
codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
|
|
22
|
+
tooltipEnabled: pluginState.tooltipEnabled
|
|
22
23
|
});
|
|
23
24
|
return { ...pluginState,
|
|
24
25
|
decorationSet: newBidiWarningsDecorationSet
|
|
@@ -27,7 +28,8 @@ export const {
|
|
|
27
28
|
});
|
|
28
29
|
export function createBidiWarningsDecorationSetFromDoc({
|
|
29
30
|
doc,
|
|
30
|
-
codeBidiWarningLabel
|
|
31
|
+
codeBidiWarningLabel,
|
|
32
|
+
tooltipEnabled
|
|
31
33
|
}) {
|
|
32
34
|
const bidiCharactersAndTheirPositions = [];
|
|
33
35
|
doc.descendants((node, pos) => {
|
|
@@ -70,19 +72,28 @@ export function createBidiWarningsDecorationSetFromDoc({
|
|
|
70
72
|
position,
|
|
71
73
|
bidiCharacter
|
|
72
74
|
}) => {
|
|
73
|
-
return Decoration.widget(position, () => renderDOM(
|
|
75
|
+
return Decoration.widget(position, () => renderDOM({
|
|
76
|
+
bidiCharacter,
|
|
77
|
+
codeBidiWarningLabel,
|
|
78
|
+
tooltipEnabled
|
|
79
|
+
}));
|
|
74
80
|
}));
|
|
75
81
|
return newBidiWarningsDecorationSet;
|
|
76
82
|
}
|
|
77
83
|
|
|
78
|
-
function renderDOM(
|
|
84
|
+
function renderDOM({
|
|
85
|
+
bidiCharacter,
|
|
86
|
+
codeBidiWarningLabel,
|
|
87
|
+
tooltipEnabled
|
|
88
|
+
}) {
|
|
79
89
|
const element = document.createElement('span'); // Note: we use this pattern elsewhere (see highlighting code block, and drop cursor widget decoration)
|
|
80
90
|
// we should investigate if there is a memory leak with such usage.
|
|
81
91
|
|
|
82
92
|
ReactDOM.render( /*#__PURE__*/React.createElement(CodeBidiWarning, {
|
|
83
93
|
bidiCharacter: bidiCharacter,
|
|
84
94
|
skipChildren: true,
|
|
85
|
-
label: codeBidiWarningLabel
|
|
95
|
+
label: codeBidiWarningLabel,
|
|
96
|
+
tooltipEnabled: tooltipEnabled
|
|
86
97
|
}), element);
|
|
87
98
|
return element;
|
|
88
99
|
}
|
|
@@ -9,7 +9,7 @@ import { IconCode } from '../quick-insert/assets';
|
|
|
9
9
|
import { messages } from '../block-type/messages';
|
|
10
10
|
import refreshBrowserSelectionOnChange from './refresh-browser-selection';
|
|
11
11
|
|
|
12
|
-
const codeBlockPlugin =
|
|
12
|
+
const codeBlockPlugin = options => ({
|
|
13
13
|
name: 'codeBlock',
|
|
14
14
|
|
|
15
15
|
nodes() {
|
|
@@ -26,7 +26,8 @@ const codeBlockPlugin = (options = {}) => ({
|
|
|
26
26
|
reactContext
|
|
27
27
|
}) => createPlugin({
|
|
28
28
|
useLongPressSelection: options.useLongPressSelection,
|
|
29
|
-
reactContext
|
|
29
|
+
reactContext,
|
|
30
|
+
appearance: options.appearance
|
|
30
31
|
})
|
|
31
32
|
}, {
|
|
32
33
|
name: 'codeBlockIDEKeyBindings',
|
|
@@ -102,7 +102,8 @@ export class CodeBlockView {
|
|
|
102
102
|
language: node.attrs.language,
|
|
103
103
|
showLineNumbers: false,
|
|
104
104
|
codeBidiWarnings: this.codeBidiWarningOptions.enabled,
|
|
105
|
-
codeBidiWarningLabel: this.codeBidiWarningOptions.label
|
|
105
|
+
codeBidiWarningLabel: this.codeBidiWarningOptions.label,
|
|
106
|
+
codeBidiWarningTooltipEnabled: this.codeBidiWarningOptions.tooltipEnabled
|
|
106
107
|
}), highlighting);
|
|
107
108
|
this.measure(performance.now() - start);
|
|
108
109
|
content === null || content === void 0 ? void 0 : content.setAttribute('data-debounce', 'false');
|
|
@@ -142,8 +143,10 @@ export class CodeBlockView {
|
|
|
142
143
|
}
|
|
143
144
|
export const highlightingCodeBlockNodeView = ({
|
|
144
145
|
codeBidiWarnings,
|
|
145
|
-
codeBidiWarningLabel
|
|
146
|
+
codeBidiWarningLabel,
|
|
147
|
+
codeBidiWarningTooltipEnabled
|
|
146
148
|
}) => (node, view, getPos) => new CodeBlockView(node, view, getPos, {
|
|
149
|
+
label: codeBidiWarningLabel,
|
|
147
150
|
enabled: codeBidiWarnings,
|
|
148
|
-
|
|
151
|
+
tooltipEnabled: codeBidiWarningTooltipEnabled
|
|
149
152
|
});
|
|
@@ -10,7 +10,8 @@ import { codeBlockClassNames } from '../ui/class-names';
|
|
|
10
10
|
import { getFeatureFlags } from '../../feature-flags-context';
|
|
11
11
|
export const createPlugin = ({
|
|
12
12
|
useLongPressSelection = false,
|
|
13
|
-
reactContext
|
|
13
|
+
reactContext,
|
|
14
|
+
appearance
|
|
14
15
|
}) => {
|
|
15
16
|
const intl = reactContext().intl;
|
|
16
17
|
const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
|
|
@@ -51,10 +52,17 @@ export const createPlugin = ({
|
|
|
51
52
|
props: {
|
|
52
53
|
nodeViews: {
|
|
53
54
|
codeBlock(node, view, getPos) {
|
|
54
|
-
const featureFlags = getFeatureFlags(view.state);
|
|
55
|
+
const featureFlags = getFeatureFlags(view.state); // The appearance being mobile indicates we are in an editor being
|
|
56
|
+
// rendered by mobile bridge in a web view.
|
|
57
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
58
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
59
|
+
// the rendering in the mobile Native Renderer.
|
|
60
|
+
|
|
61
|
+
const codeBidiWarningTooltipEnabled = appearance !== 'mobile';
|
|
55
62
|
const createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView({
|
|
56
63
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
57
|
-
codeBidiWarningLabel
|
|
64
|
+
codeBidiWarningLabel,
|
|
65
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
58
66
|
}) : codeBlockNodeView();
|
|
59
67
|
return createCodeBlockNodeView(node, view, getPos);
|
|
60
68
|
}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
|
|
3
|
+
/** @jsx jsx */
|
|
2
4
|
import React from 'react';
|
|
5
|
+
import { jsx } from '@emotion/core';
|
|
3
6
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
4
7
|
import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
|
|
5
8
|
import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
|
|
6
9
|
import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
|
|
7
10
|
import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
|
|
8
11
|
import Textfield from '@atlaskit/textfield';
|
|
9
|
-
import {
|
|
12
|
+
import { countStyles, sectionWrapperStyles } from './styles';
|
|
10
13
|
import { TRIGGER_METHOD } from '../../analytics/types';
|
|
11
14
|
import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
|
|
12
15
|
const messages = defineMessages({
|
|
@@ -147,16 +150,16 @@ class Find extends React.Component {
|
|
|
147
150
|
this.findNext = formatMessage(messages.findNext);
|
|
148
151
|
this.findPrevious = formatMessage(messages.findPrevious);
|
|
149
152
|
this.matchCase = formatMessage(messages.matchCase);
|
|
150
|
-
this.matchCaseIcon =
|
|
153
|
+
this.matchCaseIcon = jsx(MatchCaseIcon, {
|
|
151
154
|
label: this.matchCase
|
|
152
155
|
});
|
|
153
|
-
this.findNextIcon =
|
|
156
|
+
this.findNextIcon = jsx(ChevronDownIcon, {
|
|
154
157
|
label: this.findNext
|
|
155
158
|
});
|
|
156
|
-
this.findPrevIcon =
|
|
159
|
+
this.findPrevIcon = jsx(ChevronUpIcon, {
|
|
157
160
|
label: this.findPrevious
|
|
158
161
|
});
|
|
159
|
-
this.closeIcon =
|
|
162
|
+
this.closeIcon = jsx(EditorCloseIcon, {
|
|
160
163
|
label: this.closeFindReplaceDialog
|
|
161
164
|
}); // We locally manage the value of the input inside this component in order to support compositions.
|
|
162
165
|
// This requires some additional work inside componentDidUpdate to ensure we support changes that
|
|
@@ -200,7 +203,9 @@ class Find extends React.Component {
|
|
|
200
203
|
selectedMatchPosition: count.index + 1,
|
|
201
204
|
totalResultsCount: count.total
|
|
202
205
|
});
|
|
203
|
-
return
|
|
206
|
+
return jsx("div", {
|
|
207
|
+
css: sectionWrapperStyles
|
|
208
|
+
}, jsx(Textfield, {
|
|
204
209
|
name: "find",
|
|
205
210
|
appearance: "none",
|
|
206
211
|
placeholder: this.find,
|
|
@@ -212,24 +217,27 @@ class Find extends React.Component {
|
|
|
212
217
|
onBlur: this.props.onFindBlur,
|
|
213
218
|
onCompositionStart: this.handleCompositionStart,
|
|
214
219
|
onCompositionEnd: this.handleCompositionEnd
|
|
215
|
-
}), findText &&
|
|
220
|
+
}), findText && jsx("span", {
|
|
221
|
+
"data-testid": "textfield-count",
|
|
222
|
+
css: countStyles
|
|
223
|
+
}, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && jsx(FindReplaceTooltipButton, {
|
|
216
224
|
title: this.matchCase,
|
|
217
225
|
icon: this.matchCaseIcon,
|
|
218
226
|
onClick: this.handleMatchCaseClick,
|
|
219
227
|
isPressed: shouldMatchCase
|
|
220
|
-
}),
|
|
228
|
+
}), jsx(FindReplaceTooltipButton, {
|
|
221
229
|
title: this.findNext,
|
|
222
230
|
icon: this.findNextIcon,
|
|
223
231
|
keymapDescription: 'Enter',
|
|
224
232
|
onClick: this.handleFindNextClick,
|
|
225
233
|
disabled: count.total <= 1
|
|
226
|
-
}),
|
|
234
|
+
}), jsx(FindReplaceTooltipButton, {
|
|
227
235
|
title: this.findPrevious,
|
|
228
236
|
icon: this.findPrevIcon,
|
|
229
237
|
keymapDescription: 'Shift Enter',
|
|
230
238
|
onClick: this.handleFindPrevClick,
|
|
231
239
|
disabled: count.total <= 1
|
|
232
|
-
}),
|
|
240
|
+
}), jsx(FindReplaceTooltipButton, {
|
|
233
241
|
title: this.closeFindReplaceDialog,
|
|
234
242
|
icon: this.closeIcon,
|
|
235
243
|
keymapDescription: 'Escape',
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
|
|
3
|
+
/** @jsx jsx */
|
|
2
4
|
import React from 'react';
|
|
5
|
+
import { jsx } from '@emotion/core';
|
|
3
6
|
import Find from './Find';
|
|
4
7
|
import Replace from './Replace';
|
|
5
|
-
import {
|
|
8
|
+
import { ruleStyles, wrapperStyles } from './styles';
|
|
6
9
|
|
|
7
10
|
class FindReplace extends React.PureComponent {
|
|
8
11
|
constructor(...args) {
|
|
@@ -51,7 +54,9 @@ class FindReplace extends React.PureComponent {
|
|
|
51
54
|
shouldMatchCase,
|
|
52
55
|
onToggleMatchCase
|
|
53
56
|
} = this.props;
|
|
54
|
-
return
|
|
57
|
+
return jsx("div", {
|
|
58
|
+
css: wrapperStyles
|
|
59
|
+
}, jsx(Find, {
|
|
55
60
|
allowMatchCase: allowMatchCase,
|
|
56
61
|
shouldMatchCase: shouldMatchCase,
|
|
57
62
|
onToggleMatchCase: onToggleMatchCase,
|
|
@@ -65,7 +70,10 @@ class FindReplace extends React.PureComponent {
|
|
|
65
70
|
onFindTextfieldRefSet: this.setFindTextfieldRef,
|
|
66
71
|
onCancel: onCancel,
|
|
67
72
|
onArrowDown: this.setFocusToReplace
|
|
68
|
-
}),
|
|
73
|
+
}), jsx("hr", {
|
|
74
|
+
css: ruleStyles,
|
|
75
|
+
id: "replace-hr-element"
|
|
76
|
+
}), jsx(Replace, {
|
|
69
77
|
canReplace: count.total > 0,
|
|
70
78
|
replaceText: replaceText,
|
|
71
79
|
onReplace: onReplace,
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
|
|
3
|
+
/** @jsx jsx */
|
|
2
4
|
import React from 'react';
|
|
5
|
+
import { jsx } from '@emotion/core';
|
|
6
|
+
import Button from '@atlaskit/button/standard-button';
|
|
3
7
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
4
8
|
import Textfield from '@atlaskit/textfield';
|
|
5
|
-
import {
|
|
9
|
+
import { sectionWrapperStyles, replaceSectionButtonStyles } from './styles';
|
|
6
10
|
import { EVENT_TYPE, ACTION, ACTION_SUBJECT, TRIGGER_METHOD } from '../../analytics/types';
|
|
7
11
|
const messages = defineMessages({
|
|
8
12
|
replaceWith: {
|
|
@@ -138,7 +142,9 @@ class Replace extends React.PureComponent {
|
|
|
138
142
|
const {
|
|
139
143
|
canReplace
|
|
140
144
|
} = this.props;
|
|
141
|
-
return
|
|
145
|
+
return jsx("div", {
|
|
146
|
+
css: sectionWrapperStyles
|
|
147
|
+
}, jsx(Textfield, {
|
|
142
148
|
name: "replace",
|
|
143
149
|
appearance: "none",
|
|
144
150
|
placeholder: this.replaceWith,
|
|
@@ -149,11 +155,13 @@ class Replace extends React.PureComponent {
|
|
|
149
155
|
onKeyDown: this.handleReplaceKeyDown,
|
|
150
156
|
onCompositionStart: this.handleCompositionStart,
|
|
151
157
|
onCompositionEnd: this.handleCompositionEnd
|
|
152
|
-
}),
|
|
158
|
+
}), jsx(Button, {
|
|
159
|
+
css: replaceSectionButtonStyles,
|
|
153
160
|
testId: this.replace,
|
|
154
161
|
onClick: this.handleReplaceClick,
|
|
155
162
|
isDisabled: !canReplace
|
|
156
|
-
}, this.replace),
|
|
163
|
+
}, this.replace), jsx(Button, {
|
|
164
|
+
css: replaceSectionButtonStyles,
|
|
157
165
|
testId: this.replaceAll,
|
|
158
166
|
onClick: this.handleReplaceAllClick,
|
|
159
167
|
isDisabled: !canReplace
|
|
@@ -1,50 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { css } from '@emotion/core';
|
|
3
3
|
import { N60, N30A } from '@atlaskit/theme/colors';
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
4
|
+
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
5
|
+
export const replaceSectionButtonStyles = css({
|
|
6
|
+
marginLeft: '4px'
|
|
7
|
+
});
|
|
8
|
+
export const ruleStyles = css({
|
|
9
|
+
width: '100%',
|
|
10
|
+
border: 'none',
|
|
11
|
+
backgroundColor: `${N30A}`,
|
|
12
|
+
margin: '4px 0px',
|
|
13
|
+
height: '1px',
|
|
14
|
+
borderRadius: '1px'
|
|
15
|
+
});
|
|
16
|
+
export const wrapperStyles = css({
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column',
|
|
19
|
+
'> *:not(#replace-hr-element)': {
|
|
20
|
+
margin: '0px 4px'
|
|
15
21
|
}
|
|
16
|
-
|
|
17
|
-
export const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
`;
|
|
25
|
-
export const Wrapper = styled.div`
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-direction: column;
|
|
28
|
-
> *:not(${Rule}) {
|
|
29
|
-
margin: 0px 4px;
|
|
22
|
+
});
|
|
23
|
+
export const sectionWrapperStyles = css({
|
|
24
|
+
display: 'flex',
|
|
25
|
+
alignItems: 'column',
|
|
26
|
+
'> *': {
|
|
27
|
+
display: 'inline-flex',
|
|
28
|
+
height: '32px',
|
|
29
|
+
flex: '0 0 auto'
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
export const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
`;
|
|
42
|
-
export const Count = styled.span`
|
|
43
|
-
color: ${N60};
|
|
44
|
-
font-size: ${relativeFontSizeToBase16(12)};
|
|
45
|
-
flex: 0 0 auto;
|
|
46
|
-
justify-content: center;
|
|
47
|
-
align-items: center;
|
|
48
|
-
margin-left: 4px;
|
|
49
|
-
margin-right: 8px;
|
|
50
|
-
`;
|
|
31
|
+
});
|
|
32
|
+
export const countStyles = css({
|
|
33
|
+
color: `${N60}`,
|
|
34
|
+
fontSize: `${relativeFontSizeToBase16(12)}`,
|
|
35
|
+
flex: '0 0 auto',
|
|
36
|
+
justifyContent: 'center',
|
|
37
|
+
alignItems: 'center',
|
|
38
|
+
marginLeft: '4px',
|
|
39
|
+
marginRight: '8px'
|
|
40
|
+
});
|
|
@@ -3,7 +3,10 @@ import { StatusSharedCssClassName } from '@atlaskit/editor-common';
|
|
|
3
3
|
import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
export const statusStyles = css`
|
|
5
5
|
.${StatusSharedCssClassName.STATUS_CONTAINER} {
|
|
6
|
+
// these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default
|
|
7
|
+
// as it will make all inline nodes inline-block by default
|
|
6
8
|
display: inline-block;
|
|
9
|
+
user-select: all;
|
|
7
10
|
|
|
8
11
|
> span {
|
|
9
12
|
display: inline-block;
|
package/dist/es2019/version.json
CHANGED
|
@@ -96,7 +96,8 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
|
|
|
96
96
|
},
|
|
97
97
|
cardOptions: props.smartLinks || props.UNSAFE_cards,
|
|
98
98
|
codeBlock: _objectSpread(_objectSpread({}, props.codeBlock), {}, {
|
|
99
|
-
useLongPressSelection: false
|
|
99
|
+
useLongPressSelection: false,
|
|
100
|
+
appearance: props.appearance
|
|
100
101
|
})
|
|
101
102
|
};
|
|
102
103
|
}
|
|
@@ -394,7 +395,9 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
|
|
|
394
395
|
}
|
|
395
396
|
|
|
396
397
|
if (featureFlags.codeBidiWarnings) {
|
|
397
|
-
preset.add(codeBidiWarningPlugin
|
|
398
|
+
preset.add([codeBidiWarningPlugin, {
|
|
399
|
+
appearance: props.appearance
|
|
400
|
+
}]);
|
|
398
401
|
}
|
|
399
402
|
|
|
400
403
|
var excludes = new Set();
|
|
@@ -63,7 +63,9 @@ export function createDefaultPreset(options) {
|
|
|
63
63
|
preset.add(floatingToolbarPlugin);
|
|
64
64
|
preset.add([featureFlagsContextPlugin, options.featureFlags || {}]);
|
|
65
65
|
preset.add([selectionPlugin, options.selection]);
|
|
66
|
-
preset.add([codeBlockPlugin, options.codeBlock
|
|
66
|
+
preset.add([codeBlockPlugin, options.codeBlock || {
|
|
67
|
+
appearance: 'full-page'
|
|
68
|
+
}]);
|
|
67
69
|
return preset;
|
|
68
70
|
}
|
|
69
71
|
export function useDefaultPreset(props) {
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { createPlugin } from './pm-plugins/main';
|
|
2
2
|
|
|
3
|
-
var codeBidiWarning = function codeBidiWarning() {
|
|
3
|
+
var codeBidiWarning = function codeBidiWarning(_ref) {
|
|
4
|
+
var appearance = _ref.appearance;
|
|
4
5
|
return {
|
|
5
6
|
name: 'codeBidiWarning',
|
|
6
7
|
pmPlugins: function pmPlugins() {
|
|
7
8
|
return [{
|
|
8
9
|
name: 'codeBidiWarning',
|
|
9
10
|
plugin: function plugin(options) {
|
|
10
|
-
return createPlugin(options
|
|
11
|
+
return createPlugin(options, {
|
|
12
|
+
appearance: appearance
|
|
13
|
+
});
|
|
11
14
|
}
|
|
12
15
|
}];
|
|
13
16
|
}
|
|
@@ -2,20 +2,29 @@ import { Plugin } from 'prosemirror-state';
|
|
|
2
2
|
import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
|
|
3
3
|
import { codeBidiWarningPluginKey } from '../plugin-key';
|
|
4
4
|
import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginState } from './plugin-factory';
|
|
5
|
-
export var createPlugin = function createPlugin(_ref) {
|
|
5
|
+
export var createPlugin = function createPlugin(_ref, _ref2) {
|
|
6
6
|
var dispatch = _ref.dispatch,
|
|
7
7
|
reactContext = _ref.reactContext;
|
|
8
|
+
var appearance = _ref2.appearance;
|
|
8
9
|
var intl = reactContext().intl;
|
|
9
10
|
var codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
|
|
10
11
|
return new Plugin({
|
|
11
12
|
key: codeBidiWarningPluginKey,
|
|
12
13
|
state: createPluginState(dispatch, function (state) {
|
|
14
|
+
// The appearance being mobile indicates we are in an editor being
|
|
15
|
+
// rendered by mobile bridge in a web view.
|
|
16
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
17
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
18
|
+
// the rendering in the mobile Native Renderer.
|
|
19
|
+
var tooltipEnabled = appearance !== 'mobile';
|
|
13
20
|
return {
|
|
14
21
|
decorationSet: createBidiWarningsDecorationSetFromDoc({
|
|
15
22
|
doc: state.doc,
|
|
16
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
23
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
24
|
+
tooltipEnabled: tooltipEnabled
|
|
17
25
|
}),
|
|
18
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
26
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
27
|
+
tooltipEnabled: tooltipEnabled
|
|
19
28
|
};
|
|
20
29
|
}),
|
|
21
30
|
props: {
|
|
@@ -22,7 +22,8 @@ var _pluginFactory = pluginFactory(codeBidiWarningPluginKey, reducer, {
|
|
|
22
22
|
|
|
23
23
|
var newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
|
|
24
24
|
doc: tr.doc,
|
|
25
|
-
codeBidiWarningLabel: pluginState.codeBidiWarningLabel
|
|
25
|
+
codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
|
|
26
|
+
tooltipEnabled: pluginState.tooltipEnabled
|
|
26
27
|
});
|
|
27
28
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
28
29
|
decorationSet: newBidiWarningsDecorationSet
|
|
@@ -35,7 +36,8 @@ var _pluginFactory = pluginFactory(codeBidiWarningPluginKey, reducer, {
|
|
|
35
36
|
export { createPluginState, getPluginState };
|
|
36
37
|
export function createBidiWarningsDecorationSetFromDoc(_ref) {
|
|
37
38
|
var doc = _ref.doc,
|
|
38
|
-
codeBidiWarningLabel = _ref.codeBidiWarningLabel
|
|
39
|
+
codeBidiWarningLabel = _ref.codeBidiWarningLabel,
|
|
40
|
+
tooltipEnabled = _ref.tooltipEnabled;
|
|
39
41
|
var bidiCharactersAndTheirPositions = [];
|
|
40
42
|
doc.descendants(function (node, pos) {
|
|
41
43
|
var isTextWithCodeMark = node.type.name === 'text' && node.marks && node.marks.some(function (mark) {
|
|
@@ -77,20 +79,28 @@ export function createBidiWarningsDecorationSetFromDoc(_ref) {
|
|
|
77
79
|
var position = _ref4.position,
|
|
78
80
|
bidiCharacter = _ref4.bidiCharacter;
|
|
79
81
|
return Decoration.widget(position, function () {
|
|
80
|
-
return renderDOM(
|
|
82
|
+
return renderDOM({
|
|
83
|
+
bidiCharacter: bidiCharacter,
|
|
84
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
85
|
+
tooltipEnabled: tooltipEnabled
|
|
86
|
+
});
|
|
81
87
|
});
|
|
82
88
|
}));
|
|
83
89
|
return newBidiWarningsDecorationSet;
|
|
84
90
|
}
|
|
85
91
|
|
|
86
|
-
function renderDOM(
|
|
92
|
+
function renderDOM(_ref5) {
|
|
93
|
+
var bidiCharacter = _ref5.bidiCharacter,
|
|
94
|
+
codeBidiWarningLabel = _ref5.codeBidiWarningLabel,
|
|
95
|
+
tooltipEnabled = _ref5.tooltipEnabled;
|
|
87
96
|
var element = document.createElement('span'); // Note: we use this pattern elsewhere (see highlighting code block, and drop cursor widget decoration)
|
|
88
97
|
// we should investigate if there is a memory leak with such usage.
|
|
89
98
|
|
|
90
99
|
ReactDOM.render( /*#__PURE__*/React.createElement(CodeBidiWarning, {
|
|
91
100
|
bidiCharacter: bidiCharacter,
|
|
92
101
|
skipChildren: true,
|
|
93
|
-
label: codeBidiWarningLabel
|
|
102
|
+
label: codeBidiWarningLabel,
|
|
103
|
+
tooltipEnabled: tooltipEnabled
|
|
94
104
|
}), element);
|
|
95
105
|
return element;
|
|
96
106
|
}
|
|
@@ -9,8 +9,7 @@ import { IconCode } from '../quick-insert/assets';
|
|
|
9
9
|
import { messages } from '../block-type/messages';
|
|
10
10
|
import refreshBrowserSelectionOnChange from './refresh-browser-selection';
|
|
11
11
|
|
|
12
|
-
var codeBlockPlugin = function codeBlockPlugin() {
|
|
13
|
-
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
12
|
+
var codeBlockPlugin = function codeBlockPlugin(options) {
|
|
14
13
|
return {
|
|
15
14
|
name: 'codeBlock',
|
|
16
15
|
nodes: function nodes() {
|
|
@@ -26,7 +25,8 @@ var codeBlockPlugin = function codeBlockPlugin() {
|
|
|
26
25
|
var reactContext = _ref.reactContext;
|
|
27
26
|
return createPlugin({
|
|
28
27
|
useLongPressSelection: options.useLongPressSelection,
|
|
29
|
-
reactContext: reactContext
|
|
28
|
+
reactContext: reactContext,
|
|
29
|
+
appearance: options.appearance
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
}, {
|
|
@@ -121,7 +121,8 @@ export var CodeBlockView = /*#__PURE__*/function () {
|
|
|
121
121
|
language: node.attrs.language,
|
|
122
122
|
showLineNumbers: false,
|
|
123
123
|
codeBidiWarnings: this.codeBidiWarningOptions.enabled,
|
|
124
|
-
codeBidiWarningLabel: this.codeBidiWarningOptions.label
|
|
124
|
+
codeBidiWarningLabel: this.codeBidiWarningOptions.label,
|
|
125
|
+
codeBidiWarningTooltipEnabled: this.codeBidiWarningOptions.tooltipEnabled
|
|
125
126
|
}), highlighting);
|
|
126
127
|
this.measure(performance.now() - start);
|
|
127
128
|
content === null || content === void 0 ? void 0 : content.setAttribute('data-debounce', 'false');
|
|
@@ -165,11 +166,13 @@ export var CodeBlockView = /*#__PURE__*/function () {
|
|
|
165
166
|
}();
|
|
166
167
|
export var highlightingCodeBlockNodeView = function highlightingCodeBlockNodeView(_ref) {
|
|
167
168
|
var codeBidiWarnings = _ref.codeBidiWarnings,
|
|
168
|
-
codeBidiWarningLabel = _ref.codeBidiWarningLabel
|
|
169
|
+
codeBidiWarningLabel = _ref.codeBidiWarningLabel,
|
|
170
|
+
codeBidiWarningTooltipEnabled = _ref.codeBidiWarningTooltipEnabled;
|
|
169
171
|
return function (node, view, getPos) {
|
|
170
172
|
return new CodeBlockView(node, view, getPos, {
|
|
173
|
+
label: codeBidiWarningLabel,
|
|
171
174
|
enabled: codeBidiWarnings,
|
|
172
|
-
|
|
175
|
+
tooltipEnabled: codeBidiWarningTooltipEnabled
|
|
173
176
|
});
|
|
174
177
|
};
|
|
175
178
|
};
|
|
@@ -17,7 +17,8 @@ import { getFeatureFlags } from '../../feature-flags-context';
|
|
|
17
17
|
export var createPlugin = function createPlugin(_ref) {
|
|
18
18
|
var _ref$useLongPressSele = _ref.useLongPressSelection,
|
|
19
19
|
useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
|
|
20
|
-
reactContext = _ref.reactContext
|
|
20
|
+
reactContext = _ref.reactContext,
|
|
21
|
+
appearance = _ref.appearance;
|
|
21
22
|
var intl = reactContext().intl;
|
|
22
23
|
var codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
|
|
23
24
|
return new Plugin({
|
|
@@ -57,10 +58,17 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
57
58
|
props: {
|
|
58
59
|
nodeViews: {
|
|
59
60
|
codeBlock: function codeBlock(node, view, getPos) {
|
|
60
|
-
var featureFlags = getFeatureFlags(view.state);
|
|
61
|
+
var featureFlags = getFeatureFlags(view.state); // The appearance being mobile indicates we are in an editor being
|
|
62
|
+
// rendered by mobile bridge in a web view.
|
|
63
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
64
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
65
|
+
// the rendering in the mobile Native Renderer.
|
|
66
|
+
|
|
67
|
+
var codeBidiWarningTooltipEnabled = appearance !== 'mobile';
|
|
61
68
|
var createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView({
|
|
62
69
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
63
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
70
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
71
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
64
72
|
}) : codeBlockNodeView();
|
|
65
73
|
return createCodeBlockNodeView(node, view, getPos);
|
|
66
74
|
}
|