@atlaskit/editor-shared-styles 1.6.0

package/src/overflow-shadow/index.ts

@@ -0,0 +1 @@
+export { overflowShadow } from './overflow-shadow';

package/src/overflow-shadow/overflow-shadow.ts

@@ -0,0 +1,29 @@
+import { css } from 'styled-components';
+
+import { ThemedValue } from '@atlaskit/theme/types';
+
+export const overflowShadow = ({
+  background,
+  width,
+}: {
+  background: ThemedValue<string> | string;
+  width: string;
+}) => css`
+/* shadow cover right */ linear-gradient(
+  to left,
+  ${background} ${width},
+  transparent ${width}
+),
+/* overflow shadow right */
+  linear-gradient(
+    to left,
+    rgba(9, 30, 66, 0.13) 0,
+    rgba(99, 114, 130, 0) ${width}
+  ),
+/* overflow shadow left */
+  linear-gradient(
+    to right,
+    rgba(9, 30, 66, 0.13) 0,
+    rgba(99, 114, 130, 0) ${width}
+  )
+`;

package/src/selection/__tests__/unit/utils.ts

@@ -0,0 +1,43 @@
+import { SelectionStyle } from '../../types';
+import { getSelectionStyles } from '../../utils';
+
+describe('selection plugin: utils', () => {
+  describe('getSelectionStyles', () => {
+    const selectionStyles = [
+      { name: 'border', style: SelectionStyle.Border, regex: /border\:/ },
+      {
+        name: 'box-shadow',
+        style: SelectionStyle.BoxShadow,
+        regex: /box\-shadow\:/,
+      },
+      {
+        name: 'background',
+        style: SelectionStyle.Background,
+        regex: /background\-color\:/,
+      },
+      { name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:after/ },
+    ];
+
+    for (const selectionStyle of selectionStyles) {
+      it(`gets styles for ${selectionStyle.name}`, () => {
+        const css = getSelectionStyles([selectionStyle.style]);
+        expect(css).toMatch(selectionStyle.regex);
+      });
+    }
+
+    it('combines multiple styles', () => {
+      const allStyles = selectionStyles.map(
+        (selectionStyle) => selectionStyle.style,
+      );
+      const allRegex = selectionStyles.map(
+        (selectionStyle) => selectionStyle.regex,
+      );
+
+      const css = getSelectionStyles(allStyles);
+
+      for (const regex of allRegex) {
+        expect(css).toMatch(regex);
+      }
+    });
+  });
+});

package/src/selection/index.ts

@@ -0,0 +1,5 @@
+export { SelectionStyle } from './types';
+export {
+  getSelectionStyles,
+  hideNativeBrowserTextSelectionStyles,
+} from './utils';

package/src/selection/types.ts

@@ -0,0 +1,11 @@
+/**
+ * These are generic selection styles for all nodes
+ * If you have custom behaviour needed for a node, add that in the plugin's styles
+ * file in editor-core
+ */
+export enum SelectionStyle {
+  Border,
+  BoxShadow,
+  Background,
+  Blanket,
+}

package/src/selection/utils.ts

@@ -0,0 +1,71 @@
+import {
+  akEditorSelectedBgColor,
+  akEditorSelectedBlanketColor,
+  akEditorSelectedBlanketOpacity,
+  akEditorSelectedBorder,
+  akEditorSelectedBoxShadow,
+} from '../consts';
+
+import { SelectionStyle } from './types';
+
+/**
+ * Adds correct selection styling for a node
+ * Pass in which selection style properties you want and it will return css string of necessary styles
+ *
+ * eg.
+ *  .expand.ak-editor-selected-node {
+ *    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+ *  }
+ *
+ */
+export const getSelectionStyles = (
+  selectionStyles: Array<SelectionStyle>,
+): string =>
+  selectionStyles
+    .map((selectionStyle) => getSelectionStyle(selectionStyle))
+    .concat(hideNativeBrowserTextSelectionStyles)
+    .join('\n');
+
+export const hideNativeBrowserTextSelectionStyles = `
+  ::selection,*::selection {
+    background-color: transparent;
+  }
+  ::-moz-selection,*::-moz-selection {
+    background-color: transparent;
+  }
+`;
+
+const getSelectionStyle = (style: SelectionStyle): string => {
+  switch (style) {
+    case SelectionStyle.Border:
+      return `border: ${akEditorSelectedBorder};`;
+    case SelectionStyle.BoxShadow:
+      return `
+        box-shadow: ${akEditorSelectedBoxShadow};
+        border-color: transparent;
+        `;
+    case SelectionStyle.Background:
+      return `background-color: ${akEditorSelectedBgColor};`;
+    case SelectionStyle.Blanket:
+      return `
+        position: relative;
+
+        // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
+        // in Safari. Looks like it's caused by user-select: all in the emoji element
+        -webkit-user-select: text;
+
+        ::after {
+          position: absolute;
+          content: '';
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          opacity: ${akEditorSelectedBlanketOpacity};
+          pointer-events: none;
+          background-color: ${akEditorSelectedBlanketColor}
+        }`;
+    default:
+      return '';
+  }
+};

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "noImplicitAny": true
+  },
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+  ]
+}