@atlaskit/editor-plugin-placeholder-text 2.3.3 → 2.4.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/styles.js +6 -3
  3. package/dist/es2019/ui/styles.js +13 -0
  4. package/dist/esm/ui/styles.js +5 -2
  5. package/dist/types/ui/styles.d.ts +1 -0
  6. package/dist/types-ts4.5/ui/styles.d.ts +1 -0
  7. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-placeholder-text
2
2
 
3
+ ## 2.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#170958](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170958)
8
+ [`0b7ee494d452a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0b7ee494d452a) -
9
+ [ux] Update fake text-selection styles to use system highlight colours (behind feature gate)
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 2.3.4
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 2.3.3
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/ui/styles.js CHANGED
@@ -4,14 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.placeholderTextStyles = void 0;
7
+ exports.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour = exports.placeholderTextStyles = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var _colors = require("@atlaskit/theme/colors");
12
- var _templateObject;
12
+ var _templateObject, _templateObject2;
13
13
  /* eslint-disable @atlaskit/editor/no-re-export */
14
14
  // Entry file in package.json
15
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
16
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
17
- var placeholderTextStyles = exports.placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror span[data-placeholder] {\n\t\tcolor: ", ";\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror span.pm-placeholder {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\t.ProseMirror span.pm-placeholder__text {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\n\t.ProseMirror span.pm-placeholder.", " {\n\t\t", "\n\t}\n\n\t.ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n\t\tcolor: ", ";\n\t\tcursor: text;\n\t\tcontent: attr(data-placeholder);\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror {\n\t\t.ProseMirror-fake-text-cursor {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.ProseMirror-fake-text-cursor::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: inline;\n\t\t\ttop: 0;\n\t\t\tposition: absolute;\n\t\t\tborder-right: 1px solid ", ";\n\t\t}\n\n\t\t.ProseMirror-fake-text-selection {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(_colors.B75, ")"));
17
+ var placeholderTextStyles = exports.placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror span[data-placeholder] {\n\t\tcolor: ", ";\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror span.pm-placeholder {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\t.ProseMirror span.pm-placeholder__text {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\n\t.ProseMirror span.pm-placeholder.", " {\n\t\t", "\n\t}\n\n\t.ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n\t\tcolor: ", ";\n\t\tcursor: text;\n\t\tcontent: attr(data-placeholder);\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror {\n\t\t.ProseMirror-fake-text-cursor {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.ProseMirror-fake-text-cursor::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: inline;\n\t\t\ttop: 0;\n\t\t\tposition: absolute;\n\t\t\tborder-right: 1px solid ", ";\n\t\t}\n\n\t\t.ProseMirror-fake-text-selection {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(_colors.B75, ")"));
18
+
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles,@atlaskit/design-system/no-css-tagged-template-expression
20
+ var placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour = exports.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t.ProseMirror-fake-text-selection {\n\t\t\t/* Follow the system highlight colour to match native text selection */\n\t\t\tbackground-color: Highlight;\n\t\t\t/* We should also match the text colour to the system highlight text colour.\n\t\t\t That way if the system highlight background is dark, the text will still be readable. */\n\t\t\tcolor: HighlightText;\n\t\t}\n\t}\n"])));
package/dist/es2019/ui/styles.js CHANGED
@@ -54,4 +54,17 @@ export const placeholderTextStyles = css`
54
54
  background-color: ${`var(--ds-background-selected, ${B75})`};
55
55
  }
56
56
  }
57
+ `;
58
+
59
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles,@atlaskit/design-system/no-css-tagged-template-expression
60
+ export const placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour = css`
61
+ .ProseMirror {
62
+ .ProseMirror-fake-text-selection {
63
+ /* Follow the system highlight colour to match native text selection */
64
+ background-color: Highlight;
65
+ /* We should also match the text colour to the system highlight text colour.
66
+ That way if the system highlight background is dark, the text will still be readable. */
67
+ color: HighlightText;
68
+ }
69
+ }
57
70
  `;
package/dist/esm/ui/styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject;
2
+ var _templateObject, _templateObject2;
3
3
  /* eslint-disable @atlaskit/editor/no-re-export */
4
4
  // Entry file in package.json
5
5
 
@@ -8,4 +8,7 @@ import { css } from '@emotion/react';
8
8
  import { akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
9
9
  import { B75, N200 } from '@atlaskit/theme/colors';
10
10
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
11
- export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror span[data-placeholder] {\n\t\tcolor: ", ";\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror span.pm-placeholder {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\t.ProseMirror span.pm-placeholder__text {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\n\t.ProseMirror span.pm-placeholder.", " {\n\t\t", "\n\t}\n\n\t.ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n\t\tcolor: ", ";\n\t\tcursor: text;\n\t\tcontent: attr(data-placeholder);\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror {\n\t\t.ProseMirror-fake-text-cursor {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.ProseMirror-fake-text-cursor::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: inline;\n\t\t\ttop: 0;\n\t\t\tposition: absolute;\n\t\t\tborder-right: 1px solid ", ";\n\t\t}\n\n\t\t.ProseMirror-fake-text-selection {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-text-subtlest, ".concat(N200, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(B75, ")"));
11
+ export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror span[data-placeholder] {\n\t\tcolor: ", ";\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror span.pm-placeholder {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\t.ProseMirror span.pm-placeholder__text {\n\t\tdisplay: inline;\n\t\tcolor: ", ";\n\t}\n\n\t.ProseMirror span.pm-placeholder.", " {\n\t\t", "\n\t}\n\n\t.ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n\t\tcolor: ", ";\n\t\tcursor: text;\n\t\tcontent: attr(data-placeholder);\n\t\tdisplay: inline;\n\t}\n\n\t.ProseMirror {\n\t\t.ProseMirror-fake-text-cursor {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.ProseMirror-fake-text-cursor::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: inline;\n\t\t\ttop: 0;\n\t\t\tposition: absolute;\n\t\t\tborder-right: 1px solid ", ";\n\t\t}\n\n\t\t.ProseMirror-fake-text-selection {\n\t\t\tdisplay: inline;\n\t\t\tpointer-events: none;\n\t\t\tposition: relative;\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-text-subtlest, ".concat(N200, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(B75, ")"));
12
+
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles,@atlaskit/design-system/no-css-tagged-template-expression
14
+ export var placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t.ProseMirror-fake-text-selection {\n\t\t\t/* Follow the system highlight colour to match native text selection */\n\t\t\tbackground-color: Highlight;\n\t\t\t/* We should also match the text colour to the system highlight text colour.\n\t\t\t That way if the system highlight background is dark, the text will still be readable. */\n\t\t\tcolor: HighlightText;\n\t\t}\n\t}\n"])));
package/dist/types/ui/styles.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export declare const placeholderTextStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/styles.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export declare const placeholderTextStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-placeholder-text",
3
- "version": "2.3.3",
3
+ "version": "2.4.0",
4
4
  "description": "placeholder text plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,14 +29,14 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@atlaskit/adf-schema": "^47.6.0",
32
- "@atlaskit/editor-common": "^106.1.0",
32
+ "@atlaskit/editor-common": "^106.10.0",
33
33
  "@atlaskit/editor-plugin-analytics": "^2.3.0",
34
34
  "@atlaskit/editor-plugin-type-ahead": "^2.7.0",
35
35
  "@atlaskit/editor-prosemirror": "7.0.0",
36
36
  "@atlaskit/editor-shared-styles": "^3.4.0",
37
- "@atlaskit/icon": "^26.4.0",
37
+ "@atlaskit/icon": "^27.0.0",
38
38
  "@atlaskit/theme": "^18.0.0",
39
- "@atlaskit/tokens": "^5.0.0",
39
+ "@atlaskit/tokens": "^5.2.0",
40
40
  "@babel/runtime": "^7.0.0",
41
41
  "@emotion/react": "^11.7.1"
42
42
  },
@@ -48,7 +48,7 @@
48
48
  "devDependencies": {
49
49
  "@af/visual-regression": "workspace:^",
50
50
  "@atlaskit/analytics-next": "^11.1.0",
51
- "@atlaskit/editor-plugin-floating-toolbar": "^4.1.0",
51
+ "@atlaskit/editor-plugin-floating-toolbar": "^4.2.0",
52
52
  "@atlaskit/ssr": "workspace:^",
53
53
  "@atlaskit/visual-regression": "workspace:^",
54
54
  "@testing-library/react": "^13.4.0",