@atlaskit/editor-plugin-help-dialog 1.1.1 → 1.2.0

package/dist/esm/ui/styles.js

@@ -1,21 +1,67 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import { css } from '@emotion/react';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 import { N400 } from '@atlaskit/theme/colors';
-export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: ", ";\n  padding: ", " ", ";\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n"])), akEditorUnitZIndex, "var(--ds-space-300, 24px)", "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", relativeFontSizeToBase16(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), "var(--ds-border-radius, 3px)");
-export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  padding: ", ";\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), "var(--ds-space-250, 20px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), "var(--ds-space-300, 24px)");
-export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", " ", ";\n  border-bottom-right-radius: ", ";\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", "var(--ds-border-radius, 3px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
-export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: ", ";\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)", "var(--ds-space-025, 2px)");
-export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
+export var header = css({
+  zIndex: akEditorUnitZIndex,
+  minHeight: "var(--ds-space-300, 24px)",
+  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
+  fontSize: relativeFontSizeToBase16(24),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxShadow: "'none'",
+  color: "var(--ds-text, ".concat(colors.N400, ")"),
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+export var footer = css({
+  zIndex: akEditorUnitZIndex,
+  fontSize: relativeFontSizeToBase16(14),
+  lineHeight: "var(--ds-space-250, 20px)",
+  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+  padding: "var(--ds-space-300, 24px)",
+  textAlign: 'right',
+  boxShadow: "'none'"
+});
+export var contentWrapper = css({
+  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
+  borderBottomRightRadius: "var(--ds-border-radius, 3px)",
+  overflow: 'auto',
+  position: 'relative',
+  color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")")
+});
+export var line = css({
+  background: "var(--ds-background-neutral-subtle, #fff)",
+  content: "''",
+  display: 'block',
+  height: "var(--ds-space-025, 2px)",
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  width: '100%',
+  minWidth: '604px'
+});
+export var content = css({
+  minWidth: '524px',
+  width: '100%',
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'space-between'
+});
 export var column = {
   width: '44%',
   '& > ul': {
     padding: 0
   }
 };
-export var row = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  display: flex;\n  justify-content: space-between;\n"])), "var(--ds-space-250, 20px)");
+export var row = css({
+  margin: "var(--ds-space-250, 20px)".concat(" 0"),
+  display: 'flex',
+  justifyContent: 'space-between'
+});
 export var dialogHeader = {
   '&': {
     fontSize: relativeFontSizeToBase16(24),
@@ -34,8 +80,39 @@ export var title = {
     lineHeight: 1.42857142857143
   }
 };
-export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  width: ", ";\n  display: inline-block;\n  height: ", ";\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
-export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  display: inline-block;\n  height: ", ";\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)");
-export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  display: inline-block;\n  height: ", ";\n  line-height: ", ";\n  padding: 0 ", ";\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
-export var shortcutsArray = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: ", ";\n"])), "var(--ds-space-150, 12px)");
-export var componentFromKeymapWrapperStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n"])));
+export var codeSm = css({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  width: "var(--ds-space-300, 24px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: '24px',
+  textAlign: 'center'
+});
+export var codeMd = css({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: '24px',
+  width: '50px',
+  textAlign: 'center'
+});
+export var codeLg = css({
+  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: "var(--ds-space-300, 24px)",
+  padding: "0 ".concat("var(--ds-space-150, 12px)"),
+  textAlign: 'center'
+});
+export var shortcutsArray = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+  gap: "var(--ds-space-150, 12px)"
+});
+export var componentFromKeymapWrapperStyles = css({
+  flexShrink: 0
+});

package/dist/esm/ui/utils.js

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { browser } from '@atlaskit/editor-common/utils';
+import { codeLg, codeMd, codeSm, componentFromKeymapWrapperStyles } from './styles';
+var getKeyParts = function getKeyParts(keymap) {
+  var shortcut = keymap[browser.mac ? 'mac' : 'windows'];
+  if (browser.mac) {
+    shortcut = shortcut.replace('Alt', 'Opt');
+  }
+  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
+};
+export var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
+export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
+  var keyParts = getKeyParts(keymap);
+  return jsx("span", {
+    css: componentFromKeymapWrapperStyles
+  }, keyParts.map(function (part, index) {
+    if (part === '+') {
+      return jsx("span", {
+        key: "".concat(keyParts, "-").concat(index)
+      }, ' + ');
+    } else if (part === 'Cmd') {
+      return jsx("span", {
+        css: codeSm,
+        key: "".concat(keyParts, "-").concat(index)
+      }, "\u2318");
+    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
+      return jsx("span", {
+        css: codeMd,
+        key: "".concat(keyParts, "-").concat(index)
+      }, part);
+    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
+      return jsx("span", {
+        css: codeLg,
+        key: "".concat(keyParts, "-").concat(index)
+      }, part);
+    } else if (part.toLowerCase() === 'enter') {
+      return jsx("span", {
+        css: codeSm,
+        key: "".concat(keyParts, "-").concat(index)
+      }, '⏎');
+    }
+    return jsx("span", {
+      css: codeSm,
+      key: "".concat(keyParts, "-").concat(index)
+    }, part.toUpperCase());
+  }));
+};

package/dist/types/ui/Format.d.ts

@@ -0,0 +1,8 @@
+interface Format {
+    name: string;
+    type: string;
+    keymap?: Function;
+    autoFormatting?: Function;
+    imageEnabled?: boolean;
+}
+export default Format;

package/dist/types/ui/Modal.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type Format from './Format';
+interface ModalProps {
+    formatting: Format[];
+}
+declare const Modal: ({ formatting }: ModalProps) => jsx.JSX.Element;
+export default Modal;

package/dist/types/ui/ModalContent.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { OnCloseHandler } from '@atlaskit/modal-dialog';
+import type Format from './Format';
+interface ModalContentProps {
+    formatting: Format[];
+    onClose: OnCloseHandler | undefined;
+}
+export declare const ModalContent: ({ formatting, onClose }: ModalContentProps) => jsx.JSX.Element;
+export default ModalContent;

package/dist/types/ui/ModalFooter.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const ModalFooter: () => jsx.JSX.Element;
+export default ModalFooter;

package/dist/types/ui/ModalHeader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { OnCloseHandler } from '@atlaskit/modal-dialog';
+interface ModalHeaderProps extends WrappedComponentProps {
+    onClose: OnCloseHandler | undefined;
+}
+declare const ModalHeader: import("react").FC<import("react-intl-next").WithIntlProps<ModalHeaderProps>> & {
+    WrappedComponent: import("react").ComponentType<ModalHeaderProps>;
+};
+export default ModalHeader;

package/dist/types/ui/formatting.d.ts

@@ -0,0 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+import type Format from './Format';
+export declare const formatting: (intl: IntlShape) => Format[];
+export declare const getSupportedFormatting: (schema: Schema, intl: IntlShape, imageEnabled?: boolean, quickInsertEnabled?: boolean) => Format[];

package/dist/types/ui/index.d.ts

@@ -1,27 +1,14 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
-import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
-import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { HelpDialogPlugin } from '../types';
-export interface Format {
-    name: string;
-    type: string;
-    keymap?: Function;
-    autoFormatting?: Function;
-    imageEnabled?: boolean;
-}
-export declare const formatting: (intl: IntlShape) => Format[];
-export declare const getSupportedFormatting: (schema: Schema, intl: IntlShape, imageEnabled?: boolean, quickInsertEnabled?: boolean) => Format[];
-export declare const getComponentFromKeymap: (keymap: Keymap) => jsx.JSX.Element;
 export interface HelpDialogProps {
     pluginInjectionApi: ExtractInjectionAPI<HelpDialogPlugin> | undefined;
     editorView: EditorView;
     quickInsertEnabled?: boolean;
 }
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<HelpDialogProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: import("react").ComponentType<HelpDialogProps & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<HelpDialogProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<HelpDialogProps & WrappedComponentProps>;
 };
 export default _default;

package/dist/types/ui/utils.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+export declare const shortcutNamesWithoutKeymap: string[];
+export declare const getComponentFromKeymap: (keymap: Keymap) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/Format.d.ts

@@ -0,0 +1,8 @@
+interface Format {
+    name: string;
+    type: string;
+    keymap?: Function;
+    autoFormatting?: Function;
+    imageEnabled?: boolean;
+}
+export default Format;

package/dist/types-ts4.5/ui/Modal.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type Format from './Format';
+interface ModalProps {
+    formatting: Format[];
+}
+declare const Modal: ({ formatting }: ModalProps) => jsx.JSX.Element;
+export default Modal;

package/dist/types-ts4.5/ui/ModalContent.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { OnCloseHandler } from '@atlaskit/modal-dialog';
+import type Format from './Format';
+interface ModalContentProps {
+    formatting: Format[];
+    onClose: OnCloseHandler | undefined;
+}
+export declare const ModalContent: ({ formatting, onClose }: ModalContentProps) => jsx.JSX.Element;
+export default ModalContent;

package/dist/types-ts4.5/ui/ModalFooter.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const ModalFooter: () => jsx.JSX.Element;
+export default ModalFooter;

package/dist/types-ts4.5/ui/ModalHeader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { OnCloseHandler } from '@atlaskit/modal-dialog';
+interface ModalHeaderProps extends WrappedComponentProps {
+    onClose: OnCloseHandler | undefined;
+}
+declare const ModalHeader: import("react").FC<import("react-intl-next").WithIntlProps<ModalHeaderProps>> & {
+    WrappedComponent: import("react").ComponentType<ModalHeaderProps>;
+};
+export default ModalHeader;

package/dist/types-ts4.5/ui/formatting.d.ts

@@ -0,0 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+import type Format from './Format';
+export declare const formatting: (intl: IntlShape) => Format[];
+export declare const getSupportedFormatting: (schema: Schema, intl: IntlShape, imageEnabled?: boolean, quickInsertEnabled?: boolean) => Format[];

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,27 +1,14 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
-import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
-import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { HelpDialogPlugin } from '../types';
-export interface Format {
-    name: string;
-    type: string;
-    keymap?: Function;
-    autoFormatting?: Function;
-    imageEnabled?: boolean;
-}
-export declare const formatting: (intl: IntlShape) => Format[];
-export declare const getSupportedFormatting: (schema: Schema, intl: IntlShape, imageEnabled?: boolean, quickInsertEnabled?: boolean) => Format[];
-export declare const getComponentFromKeymap: (keymap: Keymap) => jsx.JSX.Element;
 export interface HelpDialogProps {
     pluginInjectionApi: ExtractInjectionAPI<HelpDialogPlugin> | undefined;
     editorView: EditorView;
     quickInsertEnabled?: boolean;
 }
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<HelpDialogProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: import("react").ComponentType<HelpDialogProps & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<HelpDialogProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<HelpDialogProps & WrappedComponentProps>;
 };
 export default _default;

package/dist/types-ts4.5/ui/utils.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+export declare const shortcutNamesWithoutKeymap: string[];
+export declare const getComponentFromKeymap: (keymap: Keymap) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-help-dialog",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Help Dialog plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,16 +32,16 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.14.0",
-    "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-quick-insert": "^1.0.0",
-    "@atlaskit/editor-prosemirror": "3.0.0",
+    "@atlaskit/editor-common": "^78.31.0",
+    "@atlaskit/editor-plugin-analytics": "^1.1.0",
+    "@atlaskit/editor-plugin-quick-insert": "^1.1.0",
+    "@atlaskit/editor-prosemirror": "4.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/modal-dialog": "^12.10.0",
+    "@atlaskit/modal-dialog": "^12.11.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-intl-next": "npm:react-intl@^5.18.1",
@@ -77,20 +77,15 @@
       "ui-components": [
         "lite-mode"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ],
+      "deprecation": "no-deprecated-imports",
       "styling": [
-        "static",
+        "emotion",
         "emotion"
       ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
   "platform-feature-flags": {
-    "platform.editor.a11y.table-selection_9uv33": {
-      "type": "boolean"
-    },
     "platform.editor.a11y-media-resizing_b5v0o": {
       "type": "boolean"
     },
@@ -99,6 +94,9 @@
     },
     "platform.editor.text-alignment-keyboard-shortcuts": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-column-resizing_emcvz": {
+      "type": "boolean"
     }
   }
-}
+}