@atlaskit/editor-core 187.35.4 → 187.35.7

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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 187.35.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`c377886771f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c377886771f) - ED-19744 moved `mention` styles to `ContentStyles` as part of Scalability Project
8
+
3
9
  ## 187.35.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/index.js CHANGED
@@ -323,12 +323,6 @@ Object.defineProperty(exports, "mediaPluginKey", {
323
323
  return _main.stateKey;
324
324
  }
325
325
  });
326
- Object.defineProperty(exports, "mentionPluginKey", {
327
- enumerable: true,
328
- get: function get() {
329
- return _mentions.mentionPluginKey;
330
- }
331
- });
332
326
  Object.defineProperty(exports, "messages", {
333
327
  enumerable: true,
334
328
  get: function get() {
@@ -459,7 +453,6 @@ var _resource2 = require("@atlaskit/mention/resource");
459
453
  var _teamResource = require("@atlaskit/mention/team-resource");
460
454
  var _annotation = require("./plugins/annotation");
461
455
  var _main = require("./plugins/media/pm-plugins/main");
462
- var _mentions = require("./plugins/mentions");
463
456
  var _textColor = require("./plugins/text-color");
464
457
  var _changeColor = require("./plugins/text-color/commands/change-color");
465
458
  var _commands2 = require("./plugins/rule/commands");
@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
11
11
  var _react2 = require("@emotion/react");
12
12
  var _styles = require("@atlaskit/editor-common/styles");
13
13
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
14
+ var _mention = require("@atlaskit/editor-common/mention");
14
15
  var _styles2 = require("../../plugins/collab-edit/styles");
15
16
  var _styles3 = require("../../plugins/selection/gap-cursor/styles");
16
17
  var _commonStyles = require("@atlaskit/editor-plugin-table/ui/common-styles");
@@ -22,30 +23,31 @@ var _styles8 = require("../../plugins/media/styles");
22
23
  var _styles9 = require("../../plugins/layout/styles");
23
24
  var _styles10 = require("../../plugins/panel/styles");
24
25
  var _styles11 = require("../../plugins/fake-text-cursor/styles");
25
- var _styles12 = require("../../plugins/mentions/styles");
26
- var _styles13 = require("../../plugins/placeholder-text/styles");
27
- var _styles14 = require("../../plugins/extension/ui/styles");
28
- var _styles15 = require("../../plugins/expand/ui/styles");
26
+ var _styles12 = require("../../plugins/placeholder-text/styles");
27
+ var _styles13 = require("../../plugins/extension/ui/styles");
28
+ var _styles14 = require("../../plugins/expand/ui/styles");
29
29
  var _style = require("../../plugins/media/pm-plugins/alt-text/style");
30
- var _styles16 = require("../../plugins/find-replace/styles");
31
- var _styles17 = require("../../plugins/tasks-and-decisions/styles");
32
- var _styles18 = require("../../plugins/status/styles");
33
- var _styles19 = require("../../plugins/date/styles");
30
+ var _styles15 = require("../../plugins/find-replace/styles");
31
+ var _styles16 = require("../../plugins/tasks-and-decisions/styles");
32
+ var _styles17 = require("../../plugins/status/styles");
33
+ var _styles18 = require("../../plugins/date/styles");
34
34
  var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
35
35
  var _utils = require("@atlaskit/editor-common/utils");
36
36
  var _emoji = require("@atlaskit/editor-common/emoji");
37
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
37
+ var _colors = require("@atlaskit/theme/colors");
38
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
38
39
  /** @jsx jsx */
39
40
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
40
41
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
42
  var linkStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", "\n }\n"])), _styles.linkSharedStyle);
42
43
  exports.linkStyles = linkStyles;
43
- var listsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n li {\n position: relative;\n\n > p:not(:first-child) {\n margin: ", " 0 0 0;\n }\n\n // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n // The following rule resets the first p tag back to its original margin\n // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n > style:first-child + p {\n margin-top: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n }\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
44
- var emojiStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: inline-block;\n\n .", " {\n cursor: pointer;\n\n &.", " > span {\n /** needed for selection style to cover custom emoji image properly */\n display: flex;\n }\n }\n\n &.", " {\n .", ",\n .", " {\n border-radius: 2px;\n ", "\n }\n }\n }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
44
+ var mentionsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n &.", " [data-mention-id] > span {\n ", "\n\n /* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n }\n }\n\n .danger {\n .", ".", "\n > span\n > span\n > span {\n box-shadow: 0 0 0 ", "px ", ";\n background-color: ", ";\n }\n .", " > span > span > span {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
45
+ var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n li {\n position: relative;\n\n > p:not(:first-child) {\n margin: ", " 0 0 0;\n }\n\n // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n // The following rule resets the first p tag back to its original margin\n // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n > style:first-child + p {\n margin-top: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n }\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
46
+ var emojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: inline-block;\n\n .", " {\n cursor: pointer;\n\n &.", " > span {\n /** needed for selection style to cover custom emoji image properly */\n display: flex;\n }\n }\n\n &.", " {\n .", ",\n .", " {\n border-radius: 2px;\n ", "\n }\n }\n }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
45
47
  var contentStyles = function contentStyles(props) {
46
- return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n outline: none;\n font-size: ", "px;\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n }\n\n .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n pointer-events: none;\n opacity: 0.7;\n }\n\n .ProseMirror-hideselection *::selection {\n background: transparent;\n }\n\n .ProseMirror-hideselection *::-moz-selection {\n background: transparent;\n }\n\n .ProseMirror-selectednode {\n outline: none;\n }\n\n .ProseMirror-selectednode:empty {\n outline: 2px solid ", ";\n }\n\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n box-sizing: border-box;\n }\n\n .mediaGroupView-content-wrap ul {\n padding: 0;\n }\n\n /** Needed to override any cleared floats, e.g. image wrapping */\n\n div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n clear: none !important;\n }\n\n .fabric-editor-align-end {\n text-align: right;\n }\n\n .fabric-editor-align-start {\n text-align: left;\n }\n\n .fabric-editor-align-center {\n text-align: center;\n }\n\n .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n .pm-table-header-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark,\n .pm-table-cell-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark {\n p:first-of-type {\n margin-top: 0;\n }\n }\n\n .hyperlink-floating-toolbar,\n .", " {\n padding: 0;\n }\n\n /* Link icon in the Atlaskit package\n is bigger than the others\n */\n .hyperlink-open-link {\n svg {\n max-width: 18px;\n }\n &[href] {\n padding: 0 4px;\n }\n }\n"])), (0, _editorSharedStyles.editorFontSize)({
48
+ return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n outline: none;\n font-size: ", "px;\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n }\n\n .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n pointer-events: none;\n opacity: 0.7;\n }\n\n .ProseMirror-hideselection *::selection {\n background: transparent;\n }\n\n .ProseMirror-hideselection *::-moz-selection {\n background: transparent;\n }\n\n .ProseMirror-selectednode {\n outline: none;\n }\n\n .ProseMirror-selectednode:empty {\n outline: 2px solid ", ";\n }\n\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n box-sizing: border-box;\n }\n\n .mediaGroupView-content-wrap ul {\n padding: 0;\n }\n\n /** Needed to override any cleared floats, e.g. image wrapping */\n\n div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n clear: none !important;\n }\n\n .fabric-editor-align-end {\n text-align: right;\n }\n\n .fabric-editor-align-start {\n text-align: left;\n }\n\n .fabric-editor-align-center {\n text-align: center;\n }\n\n .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n .pm-table-header-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark,\n .pm-table-cell-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark {\n p:first-of-type {\n margin-top: 0;\n }\n }\n\n .hyperlink-floating-toolbar,\n .", " {\n padding: 0;\n }\n\n /* Link icon in the Atlaskit package\n is bigger than the others\n */\n .hyperlink-open-link {\n svg {\n max-width: 18px;\n }\n &[href] {\n padding: 0 4px;\n }\n }\n"])), (0, _editorSharedStyles.editorFontSize)({
47
49
  theme: props.theme
48
- }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles13.placeholderTextStyles, _styles4.placeholderStyles, (0, _styles6.codeBlockStyles)(props), (0, _styles5.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, (0, _styles7.ruleStyles)(props), _styles8.mediaStyles, (0, _styles9.layoutStyles)(props), _styles2.telepointerStyle, _styles3.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles10.panelStyles)(props), _styles11.fakeCursorStyles, _styles12.mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles14.extensionStyles, (0, _styles15.expandStyles)(props), _styles16.findReplaceStyles, _styles17.taskDecisionStyles, _styles18.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles19.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
50
+ }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles12.placeholderTextStyles, _styles4.placeholderStyles, (0, _styles6.codeBlockStyles)(props), (0, _styles5.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, (0, _styles7.ruleStyles)(props), _styles8.mediaStyles, (0, _styles9.layoutStyles)(props), _styles2.telepointerStyle, _styles3.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles10.panelStyles)(props), _styles11.fakeCursorStyles, mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles13.extensionStyles, (0, _styles14.expandStyles)(props), _styles15.findReplaceStyles, _styles16.taskDecisionStyles, _styles17.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles18.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
49
51
  };
50
52
  var createEditorContentStyle = function createEditorContentStyle(styles) {
51
53
  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.nextMajorVersion = exports.name = void 0;
7
7
  var name = "@atlaskit/editor-core";
8
8
  exports.name = name;
9
- var version = "187.35.4";
9
+ var version = "187.35.7";
10
10
  exports.version = version;
11
11
  var nextMajorVersion = function nextMajorVersion() {
12
12
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
@@ -16,7 +16,6 @@ export { TeamMentionResource } from '@atlaskit/mention/team-resource';
16
16
  export { AnnotationUpdateEmitter } from './plugins/annotation';
17
17
  // Used in mobile bridge
18
18
  export { stateKey as mediaPluginKey } from './plugins/media/pm-plugins/main';
19
- export { mentionPluginKey } from './plugins/mentions';
20
19
  export { textColorPluginKey } from './plugins/text-color';
21
20
  export { changeColor } from './plugins/text-color/commands/change-color';
22
21
  export { insertHorizontalRule } from './plugins/rule/commands';
@@ -2,7 +2,8 @@
2
2
  import React, { useMemo } from 'react';
3
3
  import { jsx, css, useTheme } from '@emotion/react';
4
4
  import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles, smartCardStyles, embedCardStyles, codeBlockInListSafariFix, unsupportedStyles } from '@atlaskit/editor-common/styles';
5
- import { akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
5
+ import { akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
6
+ import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
6
7
  import { telepointerStyle } from '../../plugins/collab-edit/styles';
7
8
  import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
8
9
  import { tableStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
@@ -14,7 +15,6 @@ import { mediaStyles } from '../../plugins/media/styles';
14
15
  import { layoutStyles } from '../../plugins/layout/styles';
15
16
  import { panelStyles } from '../../plugins/panel/styles';
16
17
  import { fakeCursorStyles } from '../../plugins/fake-text-cursor/styles';
17
- import { mentionsStyles } from '../../plugins/mentions/styles';
18
18
  import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
19
19
  import { extensionStyles } from '../../plugins/extension/ui/styles';
20
20
  import { expandStyles } from '../../plugins/expand/ui/styles';
@@ -27,11 +27,37 @@ import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewPro
27
27
  import { linkSharedStyle, codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
28
28
  import { browser } from '@atlaskit/editor-common/utils';
29
29
  import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
30
+ import { N500, N30A } from '@atlaskit/theme/colors';
30
31
  export const linkStyles = css`
31
32
  .ProseMirror {
32
33
  ${linkSharedStyle}
33
34
  }
34
35
  `;
36
+ const mentionsStyles = css`
37
+ .${MentionSharedCssClassName.MENTION_CONTAINER} {
38
+ &.${akEditorSelectedNodeClassName} [data-mention-id] > span {
39
+ ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
40
+
41
+ /* need to specify dark text colour because personal mentions
42
+ (in dark blue) have white text by default */
43
+ color: ${`var(--ds-text-subtle, ${N500})`};
44
+ }
45
+ }
46
+
47
+ .danger {
48
+ .${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}
49
+ > span
50
+ > span
51
+ > span {
52
+ box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
53
+ background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
54
+ }
55
+ .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
56
+ background-color: ${`var(--ds-background-neutral, ${N30A})`};
57
+ color: ${`var(--ds-text-subtle, ${N500})`};
58
+ }
59
+ }
60
+ `;
35
61
  const listsStyles = css`
36
62
  .ProseMirror {
37
63
  li {
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "187.35.4";
2
+ export const version = "187.35.7";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/esm/index.js CHANGED
@@ -16,7 +16,6 @@ export { TeamMentionResource } from '@atlaskit/mention/team-resource';
16
16
  export { AnnotationUpdateEmitter } from './plugins/annotation';
17
17
  // Used in mobile bridge
18
18
  export { stateKey as mediaPluginKey } from './plugins/media/pm-plugins/main';
19
- export { mentionPluginKey } from './plugins/mentions';
20
19
  export { textColorPluginKey } from './plugins/text-color';
21
20
  export { changeColor } from './plugins/text-color/commands/change-color';
22
21
  export { insertHorizontalRule } from './plugins/rule/commands';
@@ -1,10 +1,11 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  /** @jsx jsx */
4
4
  import React, { useMemo } from 'react';
5
5
  import { jsx, css, useTheme } from '@emotion/react';
6
6
  import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles, smartCardStyles, embedCardStyles, codeBlockInListSafariFix, unsupportedStyles } from '@atlaskit/editor-common/styles';
7
- import { akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
7
+ import { akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
8
+ import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
8
9
  import { telepointerStyle } from '../../plugins/collab-edit/styles';
9
10
  import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
10
11
  import { tableStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
@@ -16,7 +17,6 @@ import { mediaStyles } from '../../plugins/media/styles';
16
17
  import { layoutStyles } from '../../plugins/layout/styles';
17
18
  import { panelStyles } from '../../plugins/panel/styles';
18
19
  import { fakeCursorStyles } from '../../plugins/fake-text-cursor/styles';
19
- import { mentionsStyles } from '../../plugins/mentions/styles';
20
20
  import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
21
21
  import { extensionStyles } from '../../plugins/extension/ui/styles';
22
22
  import { expandStyles } from '../../plugins/expand/ui/styles';
@@ -29,11 +29,13 @@ import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewPro
29
29
  import { linkSharedStyle, codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
30
30
  import { browser } from '@atlaskit/editor-common/utils';
31
31
  import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
32
+ import { N500, N30A } from '@atlaskit/theme/colors';
32
33
  export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n ", "\n }\n"])), linkSharedStyle);
33
- var listsStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ProseMirror {\n li {\n position: relative;\n\n > p:not(:first-child) {\n margin: ", " 0 0 0;\n }\n\n // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n // The following rule resets the first p tag back to its original margin\n // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n > style:first-child + p {\n margin-top: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n }\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
34
- var emojiStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " {\n display: inline-block;\n\n .", " {\n cursor: pointer;\n\n &.", " > span {\n /** needed for selection style to cover custom emoji image properly */\n display: flex;\n }\n }\n\n &.", " {\n .", ",\n .", " {\n border-radius: 2px;\n ", "\n }\n }\n }\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
34
+ var mentionsStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", " {\n &.", " [data-mention-id] > span {\n ", "\n\n /* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n }\n }\n\n .danger {\n .", ".", "\n > span\n > span\n > span {\n box-shadow: 0 0 0 ", "px ", ";\n background-color: ", ";\n }\n .", " > span > span > span {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(N500, ")"), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(N30A, ")"), "var(--ds-text-subtle, ".concat(N500, ")"));
35
+ var listsStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .ProseMirror {\n li {\n position: relative;\n\n > p:not(:first-child) {\n margin: ", " 0 0 0;\n }\n\n // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n // The following rule resets the first p tag back to its original margin\n // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n > style:first-child + p {\n margin-top: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n }\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
36
+ var emojiStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " {\n display: inline-block;\n\n .", " {\n cursor: pointer;\n\n &.", " > span {\n /** needed for selection style to cover custom emoji image properly */\n display: flex;\n }\n }\n\n &.", " {\n .", ",\n .", " {\n border-radius: 2px;\n ", "\n }\n }\n }\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
35
37
  var contentStyles = function contentStyles(props) {
36
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .ProseMirror {\n outline: none;\n font-size: ", "px;\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n }\n\n .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n pointer-events: none;\n opacity: 0.7;\n }\n\n .ProseMirror-hideselection *::selection {\n background: transparent;\n }\n\n .ProseMirror-hideselection *::-moz-selection {\n background: transparent;\n }\n\n .ProseMirror-selectednode {\n outline: none;\n }\n\n .ProseMirror-selectednode:empty {\n outline: 2px solid ", ";\n }\n\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n box-sizing: border-box;\n }\n\n .mediaGroupView-content-wrap ul {\n padding: 0;\n }\n\n /** Needed to override any cleared floats, e.g. image wrapping */\n\n div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n clear: none !important;\n }\n\n .fabric-editor-align-end {\n text-align: right;\n }\n\n .fabric-editor-align-start {\n text-align: left;\n }\n\n .fabric-editor-align-center {\n text-align: center;\n }\n\n .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n .pm-table-header-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark,\n .pm-table-cell-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark {\n p:first-of-type {\n margin-top: 0;\n }\n }\n\n .hyperlink-floating-toolbar,\n .", " {\n padding: 0;\n }\n\n /* Link icon in the Atlaskit package\n is bigger than the others\n */\n .hyperlink-open-link {\n svg {\n max-width: 18px;\n }\n &[href] {\n padding: 0 4px;\n }\n }\n"])), editorFontSize({
38
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .ProseMirror {\n outline: none;\n font-size: ", "px;\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n }\n\n .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n pointer-events: none;\n opacity: 0.7;\n }\n\n .ProseMirror-hideselection *::selection {\n background: transparent;\n }\n\n .ProseMirror-hideselection *::-moz-selection {\n background: transparent;\n }\n\n .ProseMirror-selectednode {\n outline: none;\n }\n\n .ProseMirror-selectednode:empty {\n outline: 2px solid ", ";\n }\n\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n box-sizing: border-box;\n }\n\n .mediaGroupView-content-wrap ul {\n padding: 0;\n }\n\n /** Needed to override any cleared floats, e.g. image wrapping */\n\n div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n clear: none !important;\n }\n\n .fabric-editor-align-end {\n text-align: right;\n }\n\n .fabric-editor-align-start {\n text-align: left;\n }\n\n .fabric-editor-align-center {\n text-align: center;\n }\n\n .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n .pm-table-header-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark,\n .pm-table-cell-content-wrap\n :not(p, .fabric-editor-block-mark)\n + div.fabric-editor-block-mark {\n p:first-of-type {\n margin-top: 0;\n }\n }\n\n .hyperlink-floating-toolbar,\n .", " {\n padding: 0;\n }\n\n /* Link icon in the Atlaskit package\n is bigger than the others\n */\n .hyperlink-open-link {\n svg {\n max-width: 18px;\n }\n &[href] {\n padding: 0 4px;\n }\n }\n"])), editorFontSize({
37
39
  theme: props.theme
38
40
  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(props), blocktypeStyles(props), codeMarkSharedStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles(props), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
39
41
  };
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "187.35.4";
2
+ export var version = "187.35.7";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
@@ -19,7 +19,6 @@ export { TeamMentionResource } from '@atlaskit/mention/team-resource';
19
19
  export { AnnotationUpdateEmitter } from './plugins/annotation';
20
20
  export type { AnnotationProviders, InlineCommentAnnotationProvider, InlineCommentCreateComponentProps, InlineCommentViewComponentProps, AnnotationInfo, AnnotationState, AnnotationTypeProvider, InlineCommentState, UpdateEvent, } from './plugins/annotation';
21
21
  export { stateKey as mediaPluginKey } from './plugins/media/pm-plugins/main';
22
- export { mentionPluginKey } from './plugins/mentions';
23
22
  export { textColorPluginKey } from './plugins/text-color';
24
23
  export type { TextColorPluginState } from './plugins/text-color';
25
24
  export { changeColor } from './plugins/text-color/commands/change-color';
@@ -19,7 +19,6 @@ export { TeamMentionResource } from '@atlaskit/mention/team-resource';
19
19
  export { AnnotationUpdateEmitter } from './plugins/annotation';
20
20
  export type { AnnotationProviders, InlineCommentAnnotationProvider, InlineCommentCreateComponentProps, InlineCommentViewComponentProps, AnnotationInfo, AnnotationState, AnnotationTypeProvider, InlineCommentState, UpdateEvent, } from './plugins/annotation';
21
21
  export { stateKey as mediaPluginKey } from './plugins/media/pm-plugins/main';
22
- export { mentionPluginKey } from './plugins/mentions';
23
22
  export { textColorPluginKey } from './plugins/text-color';
24
23
  export type { TextColorPluginState } from './plugins/text-color';
25
24
  export { changeColor } from './plugins/text-color/commands/change-color';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.35.4",
3
+ "version": "187.35.7",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -113,7 +113,7 @@
113
113
  "@atlaskit/task-decision": "^17.7.0",
114
114
  "@atlaskit/textarea": "^4.7.0",
115
115
  "@atlaskit/textfield": "^5.6.0",
116
- "@atlaskit/theme": "^12.5.0",
116
+ "@atlaskit/theme": "^12.6.0",
117
117
  "@atlaskit/toggle": "^12.6.0",
118
118
  "@atlaskit/tokens": "^1.18.0",
119
119
  "@atlaskit/tooltip": "^17.8.0",
package/report.api.md CHANGED
@@ -1526,9 +1526,6 @@ interface MentionPluginConfig {
1526
1526
  insertDisplayName?: boolean;
1527
1527
  }
1528
1528
 
1529
- // @public (undocumented)
1530
- export const mentionPluginKey: PluginKey<MentionPluginState>;
1531
-
1532
1529
  // @public (undocumented)
1533
1530
  export type MentionPluginState = {
1534
1531
  mentionProvider?: MentionProvider_2;
@@ -1362,9 +1362,6 @@ interface MentionPluginConfig {
1362
1362
  insertDisplayName?: boolean;
1363
1363
  }
1364
1364
 
1365
- // @public (undocumented)
1366
- export const mentionPluginKey: PluginKey<MentionPluginState>;
1367
-
1368
1365
  // @public (undocumented)
1369
1366
  export type MentionPluginState = {
1370
1367
  mentionProvider?: MentionProvider_2;
@@ -1,15 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.mentionsStyles = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = require("@emotion/react");
10
- var _mention = require("@atlaskit/editor-common/mention");
11
- var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
- var _colors = require("@atlaskit/theme/colors");
13
- var _templateObject;
14
- var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n &.", " [data-mention-id] > span {\n ", "\n\n /* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n }\n }\n\n .danger {\n .", ".", "\n > span\n > span\n > span {\n box-shadow: 0 0 0 ", "px ", ";\n background-color: ", ";\n }\n .", " > span > span > span {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
15
- exports.mentionsStyles = mentionsStyles;
@@ -1,29 +0,0 @@
1
- import { css } from '@emotion/react';
2
- import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
3
- import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
4
- import { N500, N30A } from '@atlaskit/theme/colors';
5
- export const mentionsStyles = css`
6
- .${MentionSharedCssClassName.MENTION_CONTAINER} {
7
- &.${akEditorSelectedNodeClassName} [data-mention-id] > span {
8
- ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
9
-
10
- /* need to specify dark text colour because personal mentions
11
- (in dark blue) have white text by default */
12
- color: ${`var(--ds-text-subtle, ${N500})`};
13
- }
14
- }
15
-
16
- .danger {
17
- .${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}
18
- > span
19
- > span
20
- > span {
21
- box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
22
- background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
23
- }
24
- .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
25
- background-color: ${`var(--ds-background-neutral, ${N30A})`};
26
- color: ${`var(--ds-text-subtle, ${N500})`};
27
- }
28
- }
29
- `;
@@ -1,7 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject;
3
- import { css } from '@emotion/react';
4
- import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
5
- import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
6
- import { N500, N30A } from '@atlaskit/theme/colors';
7
- export var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n &.", " [data-mention-id] > span {\n ", "\n\n /* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n }\n }\n\n .danger {\n .", ".", "\n > span\n > span\n > span {\n box-shadow: 0 0 0 ", "px ", ";\n background-color: ", ";\n }\n .", " > span > span > span {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(N500, ")"), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(N30A, ")"), "var(--ds-text-subtle, ".concat(N500, ")"));
@@ -1 +0,0 @@
1
- export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
@@ -1 +0,0 @@
1
- export declare const mentionsStyles: import("@emotion/react").SerializedStyles;