@atlaskit/editor-common 74.19.1 → 74.20.0

package/dist/cjs/ui/PanelTextInput/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _utils = require("../../utils");
+var _styles = require("./styles");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var KeyZCode = 90;
+var KeyYCode = 89;
+var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(PanelTextInput, _PureComponent);
+  var _super = _createSuper(PanelTextInput);
+  function PanelTextInput(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, PanelTextInput);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function () {
+      var onMouseDown = _this.props.onMouseDown;
+      if (onMouseDown) {
+        onMouseDown();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (e) {
+      var onBlur = _this.props.onBlur;
+      if (onBlur) {
+        onBlur(e);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function () {
+      var onChange = _this.props.onChange;
+      if (_this.input) {
+        _this.setState({
+          value: _this.input.value
+        });
+      }
+      if (onChange && _this.input) {
+        onChange(_this.input.value);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeydown", function (e) {
+      var _this$props = _this.props,
+        onUndo = _this$props.onUndo,
+        onRedo = _this$props.onRedo,
+        onSubmit = _this$props.onSubmit,
+        onCancel = _this$props.onCancel;
+      if (e.keyCode === 13 && onSubmit) {
+        e.preventDefault(); // Prevent from submitting if an editor is inside a form.
+        onSubmit(_this.input.value);
+      } else if (e.keyCode === 27 && onCancel) {
+        onCancel(e);
+      } else if (typeof onUndo === 'function' && _this.isUndoEvent(e)) {
+        e.preventDefault();
+        onUndo();
+      } else if (typeof onRedo === 'function' && _this.isRedoEvent(e)) {
+        e.preventDefault();
+        onRedo();
+      }
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (input) {
+      if (input instanceof HTMLInputElement) {
+        _this.input = input;
+        if (_this.props.autoFocus) {
+          // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
+          _this.focusTimeoutId = window.setTimeout(function () {
+            return _this.focus();
+          });
+        }
+      } else {
+        _this.input = undefined;
+      }
+    });
+    _this.state = {
+      value: props.defaultValue || ''
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(PanelTextInput, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.defaultValue !== this.props.defaultValue) {
+        this.setState({
+          value: this.props.defaultValue
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.clearTimeout(this.focusTimeoutId);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        placeholder = _this$props2.placeholder,
+        width = _this$props2.width,
+        maxLength = _this$props2.maxLength,
+        testId = _this$props2.testId,
+        ariaLabel = _this$props2.ariaLabel,
+        describedById = _this$props2.describedById,
+        ariaActiveDescendant = _this$props2.ariaActiveDescendant,
+        ariaControls = _this$props2.ariaControls,
+        ariaExpanded = _this$props2.ariaExpanded,
+        ariaAutoComplete = _this$props2.ariaAutoComplete,
+        role = _this$props2.role;
+      var value = this.state.value;
+      return (0, _react2.jsx)("input", {
+        css: [_styles.panelTextInput, width !== undefined && (0, _styles.panelTextInputWithCustomWidth)(width)],
+        role: role,
+        "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-activedescendant": ariaActiveDescendant,
+        "aria-describedby": describedById,
+        "data-testid": testId || '',
+        type: "text",
+        placeholder: placeholder,
+        value: value,
+        onChange: this.handleChange,
+        onKeyDown: this.handleKeydown,
+        onMouseDown: this.onMouseDown,
+        onBlur: this.onBlur,
+        ref: this.handleRef,
+        maxLength: maxLength,
+        "aria-label": ariaLabel
+      });
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      var input = this.input;
+      if (input) {
+        var focusOpts = (0, _typeof2.default)(this.props.autoFocus) === 'object' ? this.props.autoFocus : {};
+        input.focus(focusOpts);
+      }
+    }
+  }, {
+    key: "isUndoEvent",
+    value: function isUndoEvent(event) {
+      return event.keyCode === KeyZCode && (
+      // cmd + z for mac
+      _utils.browser.mac && event.metaKey && !event.shiftKey ||
+      // ctrl + z for non-mac
+      !_utils.browser.mac && event.ctrlKey);
+    }
+  }, {
+    key: "isRedoEvent",
+    value: function isRedoEvent(event) {
+      return (
+        // ctrl + y for non-mac
+        !_utils.browser.mac && event.ctrlKey && event.keyCode === KeyYCode || _utils.browser.mac && event.metaKey && event.shiftKey && event.keyCode === KeyZCode || event.ctrlKey && event.shiftKey && event.keyCode === KeyZCode
+      );
+    }
+  }]);
+  return PanelTextInput;
+}(_react.PureComponent);
+exports.default = PanelTextInput;

package/dist/cjs/ui/PanelTextInput/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelTextInputWithCustomWidth = exports.panelTextInput = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject, _templateObject2;
+// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
+var panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
+exports.panelTextInput = panelTextInput;
+var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+};
+exports.panelTextInputWithCustomWidth = panelTextInputWithCustomWidth;

package/dist/cjs/ui/index.js

@@ -5,6 +5,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Announcer", {
+  enumerable: true,
+  get: function get() {
+    return _announcer.default;
+  }
+});
 Object.defineProperty(exports, "BaseTheme", {
   enumerable: true,
   get: function get() {
@@ -119,6 +125,12 @@ Object.defineProperty(exports, "MediaSingleDimensionHelper", {
     return _styled.MediaSingleDimensionHelper;
   }
 });
+Object.defineProperty(exports, "PanelTextInput", {
+  enumerable: true,
+  get: function get() {
+    return _PanelTextInput.default;
+  }
+});
 Object.defineProperty(exports, "Popup", {
   enumerable: true,
   get: function get() {
@@ -305,6 +317,12 @@ Object.defineProperty(exports, "overflowShadow", {
     return _OverflowShadow.default;
   }
 });
+Object.defineProperty(exports, "panelTextInput", {
+  enumerable: true,
+  get: function get() {
+    return _styles.panelTextInput;
+  }
+});
 Object.defineProperty(exports, "shadowClassNames", {
   enumerable: true,
   get: function get() {
@@ -384,5 +402,8 @@ var _context = require("./ContextPanel/context");
 var _ResizerLegacy = _interopRequireDefault(require("./ResizerLegacy"));
 var _utils = require("./ResizerLegacy/utils");
 var _styled2 = require("./ResizerLegacy/styled");
+var _styles = require("./PanelTextInput/styles");
+var _PanelTextInput = _interopRequireDefault(require("./PanelTextInput"));
+var _announcer = _interopRequireDefault(require("./Announcer/announcer"));
 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); }
 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; }

package/dist/cjs/utils/commands.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filter = void 0;
+var filter = function filter(predicates, cmd) {
+  return function (state, dispatch, view) {
+    if (!Array.isArray(predicates)) {
+      predicates = [predicates];
+    }
+    if (predicates.some(function (pred) {
+      return !pred(state, view);
+    })) {
+      return false;
+    }
+    return cmd(state, dispatch, view) || false;
+  };
+};
+exports.filter = filter;

package/dist/cjs/utils/hyperlink.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findFilepaths = exports.LinkMatcher = exports.FILEPATH_REGEXP = exports.DONTLINKIFY_REGEXP = void 0;
+exports.findFilepaths = exports.canLinkBeCreatedInRange = exports.LinkMatcher = exports.FILEPATH_REGEXP = exports.DONTLINKIFY_REGEXP = void 0;
 exports.getLinkCreationAnalyticsEvent = getLinkCreationAnalyticsEvent;
 exports.getLinkDomain = getLinkDomain;
 exports.isFromCurrentDomain = isFromCurrentDomain;
@@ -197,4 +197,27 @@ function getLinkCreationAnalyticsEvent(inputMethod, url) {
       linkDomain: getLinkDomain(url)
     }
   };
-}
+}
+var canLinkBeCreatedInRange = function canLinkBeCreatedInRange(from, to) {
+  return function (state) {
+    if (!state.doc.rangeHasMark(from, to, state.schema.marks.link)) {
+      var $from = state.doc.resolve(from);
+      var $to = state.doc.resolve(to);
+      var link = state.schema.marks.link;
+      if ($from.parent === $to.parent && $from.parent.isTextblock) {
+        if ($from.parent.type.allowsMarkType(link)) {
+          var allowed = true;
+          state.doc.nodesBetween(from, to, function (node) {
+            allowed = allowed && !node.marks.some(function (m) {
+              return m.type.excludes(link);
+            });
+            return allowed;
+          });
+          return allowed;
+        }
+      }
+    }
+    return false;
+  };
+};
+exports.canLinkBeCreatedInRange = canLinkBeCreatedInRange;

package/dist/cjs/utils/index.js

@@ -166,6 +166,12 @@ Object.defineProperty(exports, "canApplyAnnotationOnRange", {
     return _annotation.canApplyAnnotationOnRange;
   }
 });
+Object.defineProperty(exports, "canLinkBeCreatedInRange", {
+  enumerable: true,
+  get: function get() {
+    return _hyperlink.canLinkBeCreatedInRange;
+  }
+});
 Object.defineProperty(exports, "canRenderDatasource", {
   enumerable: true,
   get: function get() {
@@ -220,6 +226,12 @@ Object.defineProperty(exports, "extractSliceFromStep", {
     return _editorCoreUtils.extractSliceFromStep;
   }
 });
+Object.defineProperty(exports, "filterCommands", {
+  enumerable: true,
+  get: function get() {
+    return _commands.filter;
+  }
+});
 Object.defineProperty(exports, "findAndTrackUnsupportedContentNodes", {
   enumerable: true,
   get: function get() {
@@ -701,6 +713,7 @@ Object.defineProperty(exports, "setTextSelection", {
     return _editorCoreUtils.setTextSelection;
   }
 });
+exports.shallowEqual = shallowEqual;
 Object.defineProperty(exports, "shouldForceTracking", {
   enumerable: true,
   get: function get() {
@@ -870,6 +883,16 @@ var _document = require("./document");
 var _richMediaUtils = require("./rich-media-utils");
 var _privacyFilter = require("./filter/privacy-filter");
 var _datasource = require("./datasource");
+var _commands = require("./commands");
 // prosemirror-history does not export its plugin key
 var pmHistoryPluginKey = 'history$';
-exports.pmHistoryPluginKey = pmHistoryPluginKey;
+exports.pmHistoryPluginKey = pmHistoryPluginKey;
+function shallowEqual() {
+  var obj1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var obj2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var keys1 = Object.keys(obj1);
+  var keys2 = Object.keys(obj2);
+  return keys1.length === keys2.length && keys1.reduce(function (acc, key) {
+    return acc && obj1[key] === obj2[key];
+  }, true);
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.19.1",
+	"version": "74.20.0",
 	"sideEffects": false
 }

package/dist/es2019/link/LinkPicker/EditorLinkPicker/index.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { LinkPicker } from '@atlaskit/link-picker';
+import { getAnalyticsEditorAppearance } from '../../../utils';
+import { useEscapeClickaway } from './useEscapeClickaway';
+
+/**
+ * Returns a type that matches T but where keys (K) are now optional
+ */
+
+export const EditorLinkPicker = ({
+  view,
+  onCancel,
+  invokeMethod = '_unknown',
+  editorAppearance,
+  onClose,
+  onEscapeCallback,
+  onClickAwayCallback,
+  ...restProps
+}) => {
+  /**
+   * Track onClose handler in a
+   * ref so that we void needing it in the dependency array
+   * below
+   */
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+
+  /**
+   * Call onClose on mount, usefull to provide
+   * a handler for performing an action after the component has been
+   * unmounted (e.g. return focus to the editors)
+   */
+  useEffect(() => () => {
+    var _onCloseRef$current;
+    return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
+  }, []);
+  const onEscape = useCallback(() => {
+    const {
+      state,
+      dispatch
+    } = view;
+    onEscapeCallback === null || onEscapeCallback === void 0 ? void 0 : onEscapeCallback(state, dispatch);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel, onEscapeCallback]);
+  const onClickAway = useCallback(() => {
+    const {
+      state,
+      dispatch
+    } = view;
+    onClickAwayCallback === null || onClickAwayCallback === void 0 ? void 0 : onClickAwayCallback(state, dispatch);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel, onClickAwayCallback]);
+  const ref = useEscapeClickaway(onEscape, onClickAway);
+  const analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+  const analyticsData = useMemo(() => ({
+    attributes: {
+      invokeMethod,
+      location: analyticsEditorAppearance
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: analyticsEditorAppearance
+  }), [invokeMethod, analyticsEditorAppearance]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/React.createElement(LinkPicker, _extends({}, restProps, {
+    onCancel: onEscape
+  }))));
+};

package/dist/es2019/link/LinkPicker/EditorLinkPicker/useEscapeClickaway.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+export const useEscapeClickaway = (onEscape, onClickAway) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const handleClickAway = event => {
+      const el = ref.current;
+      if (event.target instanceof Element && el && !el.contains(event.target)) {
+        onClickAway();
+      }
+    };
+    const handleKeydown = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onEscape();
+      }
+    };
+    document.addEventListener('mousedown', handleClickAway);
+    document.addEventListener('keydown', handleKeydown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickAway);
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [onClickAway, onEscape]);
+  return ref;
+};