@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/cjs/plugins/panel/styles.js

@@ -9,7 +9,7 @@ exports.panelStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -17,5 +17,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var panelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.PanelSharedCssClassName.content, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.panelSharedStyles, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+var panelStyles = function panelStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.PanelSharedCssClassName.content, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, (0, _styles.panelSharedStyles)(props), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+};
+
 exports.panelStyles = panelStyles;

package/dist/cjs/plugins/placeholder/styles.js

@@ -9,7 +9,7 @@ exports.placeholderStyles = exports.placeHolderClassName = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -17,5 +17,5 @@ var _templateObject;
 
 var placeHolderClassName = 'placeholder-decoration';
 exports.placeHolderClassName = placeHolderClassName;
-var placeholderStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, _colors.N200);
+var placeholderStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, _colors.N200);
 exports.placeholderStyles = placeholderStyles;

package/dist/cjs/plugins/placeholder-text/styles.js

@@ -9,7 +9,7 @@ exports.placeholderTextStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -17,5 +17,5 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var placeholderTextStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), _colors.N300, _colors.N300, _colors.N300, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), _colors.N300);
+var placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), _colors.N300, _colors.N300, _colors.N300, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), _colors.N300);
 exports.placeholderTextStyles = placeholderTextStyles;

package/dist/cjs/plugins/rule/pm-plugins/input-rule.js

@@ -24,6 +24,7 @@ var createHorizontalRule = function createHorizontalRule(state, start, end, inpu
   }
 
   var tr = null;
+  var rule = state.schema.nodes.rule;
 
   var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(state),
       newInsertionBehaviour = _getFeatureFlags.newInsertionBehaviour;
@@ -35,7 +36,7 @@ var createHorizontalRule = function createHorizontalRule(state, start, end, inpu
      * without considering the extra text after the `/` command.
      **/
     tr = state.tr.replaceWith(start, end, _prosemirrorModel.Fragment.empty);
-    tr = (0, _insert.safeInsert)(state.schema.nodes.rule.createChecked(), tr.selection.from)(tr);
+    tr = (0, _insert.safeInsert)(rule.createChecked(), tr.selection.from)(tr);
   }
 
   if (!tr) {

package/dist/cjs/plugins/rule/styles.js

@@ -9,7 +9,7 @@ exports.ruleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -17,5 +17,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var ruleStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), _styles.ruleSharedStyles, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderColor);
+var ruleStyles = function ruleStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), (0, _styles.ruleSharedStyles)(props), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderColor);
+};
+
 exports.ruleStyles = ruleStyles;

package/dist/cjs/plugins/selection/gap-cursor/styles.js

@@ -9,16 +9,16 @@ exports.hideCaretModifier = exports.gapCursorStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-var gapCursorBlink = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
+var gapCursorBlink = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
 var hideCaretModifier = 'ProseMirror-hide-gapcursor';
 exports.hideCaretModifier = hideCaretModifier;
 var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-var gapCursorStyles = "\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.".concat(hideCaretModifier, " {\n      caret-color: transparent;\n    }\n\n    ").concat(gapCursor, " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ").concat(gapCursorBlink, " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &").concat(wrapRight, " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ").concat(gapCursor, " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ").concat(gapCursor).concat(wrapLeft, " + span + ").concat(wrapLeft, ",\n  ").concat(gapCursor).concat(wrapRight, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapRight, " + ").concat(wrapLeft, ",\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span ").concat(wrapRight, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " {\n    clear: none;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " > div,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + ").concat(wrapRight, " > div,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " {\n    float: left;\n  }\n\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, "::after,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + span + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + span + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " + *,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + *,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + span + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + span + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(prosemirrorwidget, " + ").concat(gapCursor, " + *,\n  ").concat(prosemirrorwidget, " + ").concat(gapCursor, " + span + * {\n    margin-top: 0;\n  }\n");
+var gapCursorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);
 exports.gapCursorStyles = gapCursorStyles;

package/dist/cjs/plugins/selection/pm-plugins/selection-main.js

@@ -9,19 +9,17 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _prosemirrorState = require("prosemirror-state");
 
-var _utils = require("@atlaskit/editor-common/utils");
-
 var _pluginFactory = require("../plugin-factory");
 
 var _types = require("../types");
 
-var _utils2 = require("../utils");
+var _utils = require("../utils");
 
 var _actions = require("../actions");
 
 var getInitialState = function getInitialState(state) {
   return {
-    decorationSet: (0, _utils2.getDecorations)(state.tr),
+    decorationSet: (0, _utils.getDecorations)(state.tr),
     selection: state.selection
   };
 };
@@ -60,16 +58,16 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
         update: function update(editorView, oldEditorState) {
           var state = editorView.state;
 
-          if (!(0, _utils2.shouldRecalcDecorations)({
+          if (!(0, _utils.shouldRecalcDecorations)({
             oldEditorState: oldEditorState,
             newEditorState: state
           })) {
             return;
           }
 
-          var analyticsPayload = (0, _utils2.getNodeSelectionAnalyticsPayload)(state.selection) || (0, _utils2.getAllSelectionAnalyticsPayload)(state.selection) || // We handle all range/cell selections except click and drag here, which is
+          var analyticsPayload = (0, _utils.getNodeSelectionAnalyticsPayload)(state.selection) || (0, _utils.getAllSelectionAnalyticsPayload)(state.selection) || // We handle all range/cell selections except click and drag here, which is
           // handled in mouseup handler below
-          !editorView.mouseDown && ((0, _utils2.getRangeSelectionAnalyticsPayload)(state.selection, state.doc) || (0, _utils2.getCellSelectionAnalyticsPayload)(state)); // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
+          !editorView.mouseDown && ((0, _utils.getRangeSelectionAnalyticsPayload)(state.selection, state.doc) || (0, _utils.getCellSelectionAnalyticsPayload)(state)); // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
           // as there were several issues caused by the fact that adding analytics through
           // the plugin adds a new step to the transaction
           // This causes prosemirror to run through some different code paths, eg. attempting
@@ -82,7 +80,7 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
       };
     },
     appendTransaction: function appendTransaction(_transactions, oldEditorState, newEditorState) {
-      if (!(0, _utils2.shouldRecalcDecorations)({
+      if (!(0, _utils.shouldRecalcDecorations)({
         oldEditorState: oldEditorState,
         newEditorState: newEditorState
       })) {
@@ -93,7 +91,7 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
       tr.setMeta(_types.selectionPluginKey, {
         type: _actions.SelectionActionTypes.SET_DECORATIONS,
         selection: tr.selection,
-        decorationSet: (0, _utils2.getDecorations)(tr)
+        decorationSet: (0, _utils.getDecorations)(tr)
       });
       return tr;
     },
@@ -124,7 +122,7 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
           var mouseEvent = event;
 
           if (!mouseEvent.shiftKey) {
-            var analyticsPayload = (0, _utils2.getRangeSelectionAnalyticsPayload)(editorView.state.selection, editorView.state.doc) || (0, _utils2.getCellSelectionAnalyticsPayload)(editorView.state);
+            var analyticsPayload = (0, _utils.getRangeSelectionAnalyticsPayload)(editorView.state.selection, editorView.state.doc) || (0, _utils.getCellSelectionAnalyticsPayload)(editorView.state);
 
             if (analyticsPayload) {
               dispatchAnalyticsEvent(analyticsPayload);
@@ -134,27 +132,12 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
           return false;
         },
         keydown: function keydown(editorView, event) {
-          var state = editorView.state; // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
-          // contenteditable="false". (See https://product-fabric.atlassian.net/browse/ED-9452)
-          // On keypress, if the head of cursor selection touches a node with contenteditable="false",
-          // we temporarily remove the attribute, wait one tick, then restore it with its original value.
-
-          if (_utils.browser.gecko) {
-            var node = editorView.nodeDOM(editorView.state.selection.head);
-
-            if (node instanceof HTMLElement && node.getAttribute('contenteditable') === 'false') {
-              node.removeAttribute('contenteditable');
-              requestAnimationFrame(function () {
-                node.setAttribute('contenteditable', 'false');
-              });
-            }
-          } // Bugfix for block ReactNodeViews like table and extension
+          // Bugfix for block ReactNodeViews like table and extension
           // They could not be selected with Shift + ArrowDown/ArrowUp
           // Fixed when contenteditable = false, but then you couldn't edit their contents
           // Therefore, briefly set contenteditable=false to allow the selection through, then set it back to true
-
-
           if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            var state = editorView.state;
             var pos;
 
             if (event.key === 'ArrowDown') {
@@ -167,11 +150,11 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
               }
             }
 
-            var _node = editorView.nodeDOM(pos);
+            var node = editorView.nodeDOM(pos);
 
-            if (_node instanceof HTMLDivElement && _node.className.includes('View-content-wrap') // class added by ReactNodeView
+            if (node instanceof HTMLDivElement && node.className.includes('View-content-wrap') // class added by ReactNodeView
             ) {
-              toggleContentEditable(_node, true);
+              toggleContentEditable(node, true);
             }
           }
 

package/dist/cjs/plugins/status/index.js

@@ -43,27 +43,24 @@ var baseStatusPlugin = function baseStatusPlugin(options) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'status',
-        plugin: function plugin(_ref) {
-          var dispatch = _ref.dispatch,
-              portalProviderAPI = _ref.portalProviderAPI,
-              eventDispatcher = _ref.eventDispatcher;
-          return (0, _plugin.default)(dispatch, portalProviderAPI, eventDispatcher, options);
+        plugin: function plugin(pmPluginFactoryParams) {
+          return (0, _plugin.default)(pmPluginFactoryParams, options);
         }
       }, {
         name: 'statusKeymap',
         plugin: _keymap.keymapPlugin
       }];
     },
-    contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView;
+    contentComponent: function contentComponent(_ref) {
+      var editorView = _ref.editorView;
       var domAtPos = editorView.domAtPos.bind(editorView);
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         plugins: {
           statusState: _pluginKey.pluginKey
         },
-        render: function render(_ref3) {
-          var _ref3$statusState = _ref3.statusState,
-              statusState = _ref3$statusState === void 0 ? {} : _ref3$statusState;
+        render: function render(_ref2) {
+          var _ref2$statusState = _ref2.statusState,
+              statusState = _ref2$statusState === void 0 ? {} : _ref2$statusState;
           var showStatusPickerAt = statusState.showStatusPickerAt;
 
           if (typeof showStatusPickerAt !== 'number') {
@@ -112,8 +109,8 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
   }
 
   plugin.pluginsOptions = {
-    quickInsert: function quickInsert(_ref4) {
-      var formatMessage = _ref4.formatMessage;
+    quickInsert: function quickInsert(_ref3) {
+      var formatMessage = _ref3.formatMessage;
       return [{
         id: 'status',
         title: formatMessage(_messages.messages.status),

package/dist/cjs/plugins/status/nodeviews/status.js

@@ -6,23 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledStatus = exports.StatusNodeView = exports.IntlStatusContainerView = void 0;
-exports.default = statusNodeView;
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -32,127 +15,61 @@ var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _utils = require("@atlaskit/editor-common/utils");
-
 var _element = require("@atlaskit/status/element");
 
-var _nodeviews = require("../../../nodeviews");
-
 var _messages = require("./messages");
 
 var _templateObject;
 
-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; } }
-
 var StyledStatus = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  opacity: ", ";\n"])), function (props) {
   return props.placeholderStyle ? 0.5 : 1;
 });
 
 exports.StyledStatus = StyledStatus;
 
-var StatusContainerView = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(StatusContainerView, _React$Component);
-
-  var _super = _createSuper(StatusContainerView);
-
-  function StatusContainerView(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, StatusContainerView);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
-      if (event.nativeEvent.stopImmediatePropagation) {
-        event.nativeEvent.stopImmediatePropagation();
-      } // handling of popup is done in plugin.apply on selection change.
-
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(StatusContainerView, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          text = _this$props.text,
-          color = _this$props.color,
-          localId = _this$props.localId,
-          style = _this$props.style,
-          formatMessage = _this$props.intl.formatMessage;
-      var statusText = text ? text : formatMessage(_messages.messages.placeholder);
-      return /*#__PURE__*/_react.default.createElement(StyledStatus, {
-        placeholderStyle: !text
-      }, /*#__PURE__*/_react.default.createElement(_element.Status, {
-        text: statusText,
-        color: color,
-        localId: localId,
-        style: style,
-        onClick: this.handleClick
-      }));
-    }
-  }]);
-  return StatusContainerView;
-}(_react.default.Component);
-
-(0, _defineProperty2.default)(StatusContainerView, "displayName", 'StatusContainerView');
+var StatusContainerView = function StatusContainerView(props) {
+  var text = props.text,
+      color = props.color,
+      localId = props.localId,
+      style = props.style,
+      formatMessage = props.intl.formatMessage;
+  var statusText = text ? text : formatMessage(_messages.messages.placeholder);
+
+  var handleClick = function handleClick(event) {
+    if (event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    } // handling of popup is done in plugin.apply on selection change.
+
+  };
+
+  return /*#__PURE__*/_react.default.createElement(StyledStatus, {
+    placeholderStyle: !text
+  }, /*#__PURE__*/_react.default.createElement(_element.Status, {
+    text: statusText,
+    color: color,
+    localId: localId,
+    style: style,
+    onClick: handleClick
+  }));
+};
+
 var IntlStatusContainerView = (0, _reactIntlNext.injectIntl)(StatusContainerView);
 exports.IntlStatusContainerView = IntlStatusContainerView;
 
-var StatusNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(StatusNodeView, _ReactNodeView);
-
-  var _super2 = _createSuper(StatusNodeView);
-
-  function StatusNodeView() {
-    (0, _classCallCheck2.default)(this, StatusNodeView);
-    return _super2.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(StatusNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(StatusNodeView.prototype), "createDomRef", this).call(this);
-    }
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var _node$attrs = node.attrs,
-          color = _node$attrs.color,
-          localId = _node$attrs.localId,
-          style = _node$attrs.style;
-      element.dataset.color = color;
-      element.dataset.localId = localId;
-      element.dataset.style = style;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var options = props.options;
-      var _this$node$attrs = this.node.attrs,
-          text = _this$node$attrs.text,
-          color = _this$node$attrs.color,
-          localId = _this$node$attrs.localId,
-          style = _this$node$attrs.style;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE, /*#__PURE__*/_react.default.createElement(IntlStatusContainerView, {
-        view: this.view,
-        text: text,
-        color: color,
-        style: style,
-        localId: localId
-      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
-    }
-  }]);
-  return StatusNodeView;
-}(_nodeviews.ReactNodeView);
-
-exports.StatusNodeView = StatusNodeView;
-
-function statusNodeView(portalProviderAPI, eventDispatcher, options) {
-  return function (node, view, getPos) {
-    var hasIntlContext = true;
-    return new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      options: options
-    }, undefined, undefined, undefined, hasIntlContext).init();
-  };
-}
+var StatusNodeView = function StatusNodeView(props) {
+  var view = props.view;
+  var _props$node$attrs = props.node.attrs,
+      text = _props$node$attrs.text,
+      color = _props$node$attrs.color,
+      localId = _props$node$attrs.localId,
+      style = _props$node$attrs.style;
+  return /*#__PURE__*/_react.default.createElement(IntlStatusContainerView, {
+    view: view,
+    text: text,
+    color: color,
+    style: style,
+    localId: localId
+  });
+};
+
+exports.StatusNodeView = StatusNodeView;

package/dist/cjs/plugins/status/plugin.js

@@ -25,7 +25,9 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _prosemirrorState = require("prosemirror-state");
 
-var _status = _interopRequireDefault(require("./nodeviews/status"));
+var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer");
+
+var _status = require("./nodeviews/status");
 
 var _pluginKey = require("./plugin-key");
 
@@ -35,7 +37,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispatcher, options) {
+var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
@@ -50,7 +52,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
         if (meta) {
           var newState = _objectSpread(_objectSpread({}, state), meta);
 
-          dispatch(_pluginKey.pluginKey, newState);
+          pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, newState);
           return newState;
         }
 
@@ -66,7 +68,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
           });
 
           if (_newState.showStatusPickerAt !== state.showStatusPickerAt) {
-            dispatch(_pluginKey.pluginKey, _newState);
+            pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, _newState);
             return _newState;
           }
         }
@@ -87,7 +89,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
               showStatusPickerAt: _showStatusPickerAt
             });
 
-            dispatch(_pluginKey.pluginKey, _newState2);
+            pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, _newState2);
             return _newState2;
           }
         }
@@ -136,7 +138,13 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
     key: _pluginKey.pluginKey,
     props: {
       nodeViews: {
-        status: (0, _status.default)(portalProviderAPI, eventDispatcher, options)
+        status: (0, _getInlineNodeViewProducer.getInlineNodeViewProducer)({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: _status.StatusNodeView,
+          extraComponentProps: {
+            options: options
+          }
+        })
       }
     }
   });

package/dist/cjs/plugins/status/styles.js

@@ -9,7 +9,7 @@ exports.statusStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -17,5 +17,5 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var statusStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default\n    // as it will make all inline nodes inline-block by default\n    display: inline-block;\n    user-select: all;\n\n    > span {\n      display: inline-block;\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);
+var statusStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    > span {\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);
 exports.statusStyles = statusStyles;

package/dist/cjs/plugins/table/index.js

@@ -266,7 +266,7 @@ var tablesPlugin = function tablesPlugin(options) {
           id: 'table',
           title: formatMessage(_messages.messages.table),
           description: formatMessage(_messages.messages.tableDescription),
-          keywords: ['cell'],
+          keywords: ['cell', 'table'],
           priority: 600,
           keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
           icon: function icon() {