@atlaskit/editor-core 181.0.1 → 182.0.0

package/dist/esm/plugins/collab-edit/ui/avatars-with-plugin-state.js

@@ -10,7 +10,8 @@ var AvatarsWithPluginState = function AvatarsWithPluginState(props) {
   var selected = props.isInviteToEditButtonSelected,
     onClick = props.inviteToEditHandler,
     Component = props.inviteToEditComponent,
-    editorView = props.editorView;
+    editorView = props.editorView,
+    featureFlags = props.featureFlags;
   var render = React.useCallback(function (_ref) {
     var data = _ref.data;
     if (!data) {
@@ -19,14 +20,15 @@ var AvatarsWithPluginState = function AvatarsWithPluginState(props) {
     return /*#__PURE__*/React.createElement(Avatars, {
       sessionId: data.sessionId,
       participants: data.activeParticipants,
-      editorView: editorView
+      editorView: editorView,
+      featureFlags: featureFlags
     }, /*#__PURE__*/React.createElement(InviteToEditButton, {
       title: title,
       selected: selected,
       onClick: onClick,
       Component: Component
     }));
-  }, [selected, onClick, Component, title, editorView]);
+  }, [selected, onClick, Component, title, editorView, featureFlags]);
   return /*#__PURE__*/React.createElement(WithPluginState, {
     plugins: {
       data: collabEditPluginKey

package/dist/esm/plugins/collab-edit/ui/avatars.js

@@ -5,10 +5,10 @@ import AvatarGroup from '@atlaskit/avatar-group';
 import { avatarContainer } from './styles';
 import toAvatar from './to-avatar';
 import { scrollToCollabCursor } from '../utils';
-import { getFeatureFlags } from '../../feature-flags-context';
 export var Avatars = /*#__PURE__*/React.memo(function (props) {
   var sessionId = props.sessionId,
-    editorView = props.editorView;
+    editorView = props.editorView,
+    featureFlags = props.featureFlags;
   var participants = props.participants.toArray();
   var avatars = participants.sort(function (p) {
     return p.sessionId === sessionId ? -1 : 1;
@@ -27,7 +27,6 @@ export var Avatars = /*#__PURE__*/React.memo(function (props) {
       if (!editorView) {
         return;
       }
-      var featureFlags = getFeatureFlags(editorView.state);
       var allowCollabAvatarScroll = featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.collabAvatarScroll;
 
       // user does not need to scroll to their own position (index 0)

package/dist/esm/plugins/date/index.js

@@ -2,15 +2,14 @@ import React from 'react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import Loadable from 'react-loadable';
 import { date } from '@atlaskit/adf-schema';
-import WithPluginState from '../../ui/WithPluginState';
 import { insertDate, closeDatePicker as _closeDatePicker, closeDatePickerWithAnalytics as _closeDatePickerWithAnalytics, createDate, deleteDate } from './actions';
 import createDatePlugin from './pm-plugins/main';
 import keymap from './pm-plugins/keymap';
-import { pluginKey as editorDisabledPluginKey } from '../editor-disabled';
 import { IconDate } from '../quick-insert/assets';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var DatePicker = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(function (mod) {
@@ -21,9 +20,84 @@ var DatePicker = Loadable({
     return null;
   }
 });
-var datePlugin = function datePlugin() {
+function ContentComponent(_ref) {
+  var editorView = _ref.editorView,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    dependencyApi = _ref.dependencyApi;
+  var dispatch = editorView.dispatch;
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var _useSharedPluginState = useSharedPluginState(dependencyApi, ['date', 'editorDisabled']),
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    dateState = _useSharedPluginState.dateState;
+  if (!(dateState !== null && dateState !== void 0 && dateState.showDatePickerAt) || editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) {
+    return null;
+  }
+  var showDatePickerAt = dateState.showDatePickerAt,
+    isNew = dateState.isNew,
+    focusDateInput = dateState.focusDateInput;
+  var element = findDomRefAtPos(showDatePickerAt, domAtPos);
+  return /*#__PURE__*/React.createElement(DatePicker, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    key: showDatePickerAt,
+    element: element,
+    isNew: isNew,
+    autoFocus: focusDateInput,
+    onDelete: function onDelete() {
+      deleteDate()(editorView.state, dispatch);
+      editorView.focus();
+      return;
+    },
+    onSelect: function onSelect(date, commitMethod) {
+      // Undefined means couldn't parse date, null means invalid (out of bounds) date
+      if (date === undefined || date === null) {
+        return;
+      }
+      insertDate(date, undefined, commitMethod)(editorView.state, dispatch);
+      editorView.focus();
+    },
+    onTextChanged: function onTextChanged(date) {
+      insertDate(date, undefined, undefined, false)(editorView.state, dispatch);
+    },
+    closeDatePicker: function closeDatePicker() {
+      _closeDatePicker()(editorView.state, dispatch);
+      editorView.focus();
+    },
+    closeDatePickerWithAnalytics: function closeDatePickerWithAnalytics(_ref2) {
+      var date = _ref2.date;
+      _closeDatePickerWithAnalytics({
+        date: date
+      })(editorView.state, dispatch);
+      editorView.focus();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+}
+var datePlugin = function datePlugin(_, api) {
   return {
     name: 'date',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          showDatePickerAt: null,
+          isNew: false,
+          focusDateInput: false
+        };
+      }
+      var _datePluginKey$getSta = datePluginKey.getState(editorState),
+        showDatePickerAt = _datePluginKey$getSta.showDatePickerAt,
+        isNew = _datePluginKey$getSta.isNew,
+        focusDateInput = _datePluginKey$getSta.focusDateInput;
+      return {
+        showDatePickerAt: showDatePickerAt,
+        isNew: isNew,
+        focusDateInput: focusDateInput
+      };
+    },
     nodes: function nodes() {
       return [{
         name: 'date',
@@ -45,67 +119,19 @@ var datePlugin = function datePlugin() {
         }
       }];
     },
-    contentComponent: function contentComponent(_ref) {
-      var editorView = _ref.editorView,
-        dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-        popupsMountPoint = _ref.popupsMountPoint,
-        popupsBoundariesElement = _ref.popupsBoundariesElement,
-        popupsScrollableElement = _ref.popupsScrollableElement;
-      var dispatch = editorView.dispatch;
-      var domAtPos = editorView.domAtPos.bind(editorView);
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          datePlugin: datePluginKey,
-          editorDisabledPlugin: editorDisabledPluginKey
-        },
-        render: function render(_ref2) {
-          var editorDisabledPlugin = _ref2.editorDisabledPlugin,
-            datePlugin = _ref2.datePlugin;
-          if (!(datePlugin !== null && datePlugin !== void 0 && datePlugin.showDatePickerAt) || editorDisabledPlugin !== null && editorDisabledPlugin !== void 0 && editorDisabledPlugin.editorDisabled) {
-            return null;
-          }
-          var showDatePickerAt = datePlugin.showDatePickerAt,
-            isNew = datePlugin.isNew,
-            focusDateInput = datePlugin.focusDateInput;
-          var element = findDomRefAtPos(showDatePickerAt, domAtPos);
-          return /*#__PURE__*/React.createElement(DatePicker, {
-            mountTo: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            key: showDatePickerAt,
-            element: element,
-            isNew: isNew,
-            autoFocus: focusDateInput,
-            onDelete: function onDelete() {
-              deleteDate()(editorView.state, dispatch);
-              editorView.focus();
-              return;
-            },
-            onSelect: function onSelect(date, commitMethod) {
-              // Undefined means couldn't parse date, null means invalid (out of bounds) date
-              if (date === undefined || date === null) {
-                return;
-              }
-              insertDate(date, undefined, commitMethod)(editorView.state, dispatch);
-              editorView.focus();
-            },
-            onTextChanged: function onTextChanged(date) {
-              insertDate(date, undefined, undefined, false)(editorView.state, dispatch);
-            },
-            closeDatePicker: function closeDatePicker() {
-              _closeDatePicker()(editorView.state, dispatch);
-              editorView.focus();
-            },
-            closeDatePickerWithAnalytics: function closeDatePickerWithAnalytics(_ref3) {
-              var date = _ref3.date;
-              _closeDatePickerWithAnalytics({
-                date: date
-              })(editorView.state, dispatch);
-              editorView.focus();
-            },
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent
-          });
-        }
+    contentComponent: function contentComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+        popupsMountPoint = _ref3.popupsMountPoint,
+        popupsBoundariesElement = _ref3.popupsBoundariesElement,
+        popupsScrollableElement = _ref3.popupsScrollableElement;
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        dependencyApi: api,
+        editorView: editorView,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
       });
     },
     pluginsOptions: {

package/dist/esm/plugins/editor-disabled/index.js

@@ -38,6 +38,14 @@ export function createPlugin(dispatch) {
 var editorDisabledPlugin = function editorDisabledPlugin() {
   return {
     name: 'editorDisabled',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          editorDisabled: false
+        };
+      }
+      return pluginKey.getState(editorState);
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'editorDisabled',

package/dist/esm/plugins/expand/index.js

@@ -9,7 +9,10 @@ import { getToolbarConfig } from './toolbar';
 import { createExpandNode } from './commands';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 var expandPlugin = function expandPlugin() {
+  var _api$dependencies, _api$dependencies$fea;
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var api = arguments.length > 1 ? arguments[1] : undefined;
+  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
   return {
     name: 'expand',
     nodes: function nodes() {
@@ -27,7 +30,7 @@ var expandPlugin = function expandPlugin() {
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch,
             getIntl = _ref.getIntl;
-          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection);
+          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, featureFlags);
         }
       }, {
         name: 'expandKeymap',

package/dist/esm/plugins/expand/nodeviews/index.js

@@ -12,7 +12,6 @@ import { isEmptyNode } from '../../../utils';
 import { updateExpandTitle, toggleExpandExpanded, deleteExpandAtPos, setSelectionInsideExpand } from '../commands';
 import { expandClassNames } from '../ui/class-names';
 import { GapCursorSelection, Side } from '../../../plugins/selection/gap-cursor-selection';
-import { getFeatureFlags } from '../../feature-flags-context';
 import { closestElement } from '../../../utils/dom';
 import { RelativeSelectionPos } from '../../selection/types';
 import { setSelectionRelativeToNode } from '../../selection/commands';
@@ -54,7 +53,7 @@ var toDOM = function toDOM(node, intl) {
   }, 0]];
 };
 export var ExpandNodeView = /*#__PURE__*/function () {
-  function ExpandNodeView(node, view, getPos, getIntl, isMobile) {
+  function ExpandNodeView(node, view, getPos, getIntl, isMobile, featureFlags) {
     var _this = this;
     _classCallCheck(this, ExpandNodeView);
     _defineProperty(this, "allowInteractiveExpand", true);
@@ -82,9 +81,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       }
     });
     _defineProperty(this, "isAllowInteractiveExpandEnabled", function () {
-      var state = _this.view.state;
-      var featureFlags = getFeatureFlags(state);
-      return featureFlags && !!featureFlags.interactiveExpand;
+      return _this.featureFlags && !!_this.featureFlags.interactiveExpand;
     });
     _defineProperty(this, "handleClick", function (event) {
       var target = event.target;
@@ -286,6 +283,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.isMobile = isMobile;
+    this.featureFlags = featureFlags;
     this.icon = this.dom.querySelector(".".concat(expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
@@ -405,8 +403,9 @@ export var ExpandNodeView = /*#__PURE__*/function () {
 }();
 export default function (_ref2) {
   var getIntl = _ref2.getIntl,
-    isMobile = _ref2.isMobile;
+    isMobile = _ref2.isMobile,
+    featureFlags = _ref2.featureFlags;
   return function (node, view, getPos) {
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, featureFlags);
   };
 }

package/dist/esm/plugins/expand/pm-plugins/main.js

@@ -13,6 +13,7 @@ export function containsClass(element, className) {
 export var createPlugin = function createPlugin(dispatch, getIntl) {
   var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
   var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var featureFlags = arguments.length > 4 ? arguments[4] : undefined;
   var state = createPluginState(dispatch, {});
   var isMobile = appearance === 'mobile';
   return new SafePlugin({
@@ -22,11 +23,13 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
       nodeViews: {
         expand: ExpandNodeView({
           getIntl: getIntl,
-          isMobile: isMobile
+          isMobile: isMobile,
+          featureFlags: featureFlags
         }),
         nestedExpand: ExpandNodeView({
           getIntl: getIntl,
-          isMobile: isMobile
+          isMobile: isMobile,
+          featureFlags: featureFlags
         })
       },
       handleKeyDown: function handleKeyDown(_view, event) {

package/dist/esm/plugins/extension/extension-api.js

@@ -2,13 +2,13 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import { validator } from '@atlaskit/adf-utils/validator';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { Fragment, Mark } from 'prosemirror-model';
-import { NodeSelection } from 'prosemirror-state';
+import { NodeSelection, Selection } from 'prosemirror-state';
 import { insertMacroFromMacroBrowser } from '../macro';
 import { pluginKey as macroPluginKey } from '../macro/plugin-key';
+import { nodeToJSON } from '../../utils';
 import { setEditingContextToContextPanel } from './commands';
-import { findNodePosWithLocalId, getSelectedExtension } from './utils';
+import { findNodePosWithLocalId, getDataConsumerMark, getNodeTypesReferenced, getSelectedExtension } from './utils';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../analytics';
-import { getNodeTypesReferenced, getDataConsumerMark } from './utils';
 import { setTextSelection } from 'prosemirror-utils';
 export var getEditInLegacyMacroBrowser = function getEditInLegacyMacroBrowser(_ref) {
   var view = _ref.view,
@@ -39,7 +39,12 @@ var extensionAPICallPayload = function extensionAPICallPayload(functionName) {
   };
 };
 export var createExtensionAPI = function createExtensionAPI(options) {
-  var validate = validator();
+  var schema = options.editorView.state.schema;
+  var nodes = Object.keys(schema.nodes);
+  var marks = Object.keys(schema.marks);
+  var validate = validator(nodes, marks, {
+    allowPrivateAttributes: true
+  });
 
   /**
    * Finds the node and its position by `localId`. Throws if the node could not be found.
@@ -172,6 +177,7 @@ export var createExtensionAPI = function createExtensionAPI(options) {
       var tr = state.tr,
         schema = state.schema;
       var changedValues = mutationCallback({
+        content: nodeToJSON(node).content,
         attrs: node.attrs,
         marks: node.marks.map(function (pmMark) {
           return {
@@ -180,13 +186,12 @@ export var createExtensionAPI = function createExtensionAPI(options) {
           };
         })
       });
-      var _state$doc$resolve = state.doc.resolve(pos),
-        parent = _state$doc$resolve.parent;
       var ensureValidMark = function ensureValidMark(mark) {
         if (_typeof(mark) !== 'object' || Array.isArray(mark)) {
           throw new Error("update(): Invalid mark given.");
         }
-
+        var _state$doc$resolve = state.doc.resolve(pos),
+          parent = _state$doc$resolve.parent;
         // Ensure that the given mark is present in the schema
         var markType = schema.marks[mark.type];
         if (!markType) {
@@ -200,21 +205,28 @@ export var createExtensionAPI = function createExtensionAPI(options) {
           attrs: mark.attrs
         };
       };
-      var newMarks = (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(function (_ref3) {
+      var newMarks = changedValues.hasOwnProperty('marks') ? (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(function (_ref3) {
         var mark = _ref3.mark,
           attrs = _ref3.attrs;
         return mark.create(attrs);
-      });
+      }) : node.marks;
+      var newContent = changedValues.hasOwnProperty('content') ? Fragment.fromJSON(schema, changedValues.content) : node.content;
+      var newAttrs = changedValues.hasOwnProperty('attrs') ? changedValues.attrs : node.attrs;
 
-      // Validate if the new attributes and marks result in a valid node and adf.
+      // Validate if the new attributes, content and marks result in a valid node and adf.
       try {
-        var newNode = node.type.createChecked(changedValues.attrs, node.content, newMarks);
+        var newNode = node.type.createChecked(newAttrs, newContent, newMarks);
         var newNodeAdf = new JSONTransformer().encodeNode(newNode);
         validate(newNodeAdf);
+        tr.replaceWith(pos, pos + node.nodeSize, newNode);
+
+        // Keep selection if content does not change
+        if (newContent === node.content) {
+          tr.setSelection(Selection.fromJSON(tr.doc, state.selection.toJSON()));
+        }
       } catch (err) {
         throw new Error("update(): The given ADFEntity cannot be inserted in the current position.\n".concat(err));
       }
-      tr.setNodeMarkup(pos, undefined, changedValues.attrs, newMarks);
 
       // Analytics - tracking the api call
       var apiCallPayload = extensionAPICallPayload('update');