@atlaskit/editor-core 188.2.7 → 188.2.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 188.2.8
+
+### Patch Changes
+
+- [#41120](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41120) [`011df0ba8ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/011df0ba8ab) - Fix media icon showing in comment editor toolbar due to state not updating.
+
 ## 188.2.7
 
 ### Patch Changes

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

@@ -32,7 +32,6 @@ var _keymapMediaSingle = _interopRequireDefault(require("./pm-plugins/keymap-med
 var _linking = _interopRequireDefault(require("./pm-plugins/linking"));
 var _keymap3 = _interopRequireDefault(require("./pm-plugins/linking/keymap"));
 var _main = require("./pm-plugins/main");
-var _pluginKey = require("./pm-plugins/plugin-key");
 var _toolbar = require("./toolbar");
 var _MediaPicker = require("./ui/MediaPicker");
 var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
@@ -65,7 +64,7 @@ var mediaPlugin = function mediaPlugin(_ref2) {
       if (!editorState) {
         return null;
       }
-      return _pluginKey.stateKey.getState(editorState) || null;
+      return _main.stateKey.getState(editorState) || null;
     },
     actions: {
       insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod) {

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

@@ -493,8 +493,22 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     });
     options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
     this.errorReporter = options.errorReporter || new _utils.ErrorReporter();
+    this.singletonCreatedAt = (performance || Date).now();
   }
   (0, _createClass2.default)(MediaPluginStateImplementation, [{
+    key: "clone",
+    value: function clone() {
+      var clonedAt = (performance || Date).now();
+      return new Proxy(this, {
+        get: function get(target, prop, receiver) {
+          if (prop === 'singletonCreatedAt') {
+            return clonedAt;
+          }
+          return Reflect.get(target, prop, receiver);
+        }
+      });
+    }
+  }, {
     key: "setIsResizing",
     value: function setIsResizing(isResizing) {
       this.isResizing = isResizing;
@@ -651,16 +665,24 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
       apply: function apply(tr, pluginState) {
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
         var resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
+        // Yes, I agree with you; this approach, using the clone() fuction, below is horrifying.
+        // However, we needed to implement this workaround to solve the singleton Media PluginState.
+        // The entire PluginInjectionAPI relies on the following axiom: "A PluginState that reflects a new EditorState.". We can not have the mutable singleton instance for all EditorState.
+        // Unfortunately, we can't implement a proper fix for this media state situation. So, we are faking a new object using a Proxy instance.
+        var nextPluginState = pluginState;
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
+          nextPluginState = nextPluginState.clone();
         }
         if (resizingWidth) {
           pluginState.setResizingWidth(resizingWidth);
+          nextPluginState = nextPluginState.clone();
         }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {
           pluginState.editingMediaSinglePos = tr.mapping.map(pluginState.editingMediaSinglePos);
+          nextPluginState = nextPluginState.clone();
         }
         var meta = tr.getMeta(_pluginKey.stateKey);
         if (meta) {
@@ -668,12 +690,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
           pluginState.updateAndDispatch({
             allowsUploads: typeof allowsUploads === 'undefined' ? pluginState.allowsUploads : allowsUploads
           });
+          nextPluginState = nextPluginState.clone();
         }
 
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference
         //       throughout the lifetime of view. We injected the view into the plugin state, because we dispatch()
         //       transformations from within the plugin state (i.e. when adding a new file).
-        return pluginState;
+        return nextPluginState;
       }
     },
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {

package/dist/cjs/version-wrapper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "188.2.7";
+var version = exports.version = "188.2.8";
 var nextMajorVersion = exports.nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/plugins/media/index.js

@@ -18,8 +18,8 @@ import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
 import linkingPlugin from './pm-plugins/linking';
 import keymapLinkingPlugin from './pm-plugins/linking/keymap';
+import { stateKey } from './pm-plugins/main';
 import { createPlugin, stateKey as pluginKey } from './pm-plugins/main';
-import { stateKey } from './pm-plugins/plugin-key';
 import { floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import ToolbarMedia from './ui/ToolbarMedia';

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -423,6 +423,18 @@ export class MediaPluginStateImplementation {
     options.providerFactory.subscribe('mediaProvider', (_name, provider) => this.setMediaProvider(provider));
     options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
     this.errorReporter = options.errorReporter || new ErrorReporter();
+    this.singletonCreatedAt = (performance || Date).now();
+  }
+  clone() {
+    const clonedAt = (performance || Date).now();
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        if (prop === 'singletonCreatedAt') {
+          return clonedAt;
+        }
+        return Reflect.get(target, prop, receiver);
+      }
+    });
   }
   setIsResizing(isResizing) {
     this.isResizing = isResizing;
@@ -538,16 +550,24 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
       apply(tr, pluginState) {
         const isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
         const resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
+        // Yes, I agree with you; this approach, using the clone() fuction, below is horrifying.
+        // However, we needed to implement this workaround to solve the singleton Media PluginState.
+        // The entire PluginInjectionAPI relies on the following axiom: "A PluginState that reflects a new EditorState.". We can not have the mutable singleton instance for all EditorState.
+        // Unfortunately, we can't implement a proper fix for this media state situation. So, we are faking a new object using a Proxy instance.
+        let nextPluginState = pluginState;
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
+          nextPluginState = nextPluginState.clone();
         }
         if (resizingWidth) {
           pluginState.setResizingWidth(resizingWidth);
+          nextPluginState = nextPluginState.clone();
         }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {
           pluginState.editingMediaSinglePos = tr.mapping.map(pluginState.editingMediaSinglePos);
+          nextPluginState = nextPluginState.clone();
         }
         const meta = tr.getMeta(stateKey);
         if (meta) {
@@ -557,12 +577,13 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
           pluginState.updateAndDispatch({
             allowsUploads: typeof allowsUploads === 'undefined' ? pluginState.allowsUploads : allowsUploads
           });
+          nextPluginState = nextPluginState.clone();
         }
 
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference
         //       throughout the lifetime of view. We injected the view into the plugin state, because we dispatch()
         //       transformations from within the plugin state (i.e. when adding a new file).
-        return pluginState;
+        return nextPluginState;
       }
     },
     appendTransaction(transactions, _oldState, newState) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "188.2.7";
+export const version = "188.2.8";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

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

@@ -18,8 +18,8 @@ import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
 import linkingPlugin from './pm-plugins/linking';
 import keymapLinkingPlugin from './pm-plugins/linking/keymap';
+import { stateKey } from './pm-plugins/main';
 import { createPlugin, stateKey as pluginKey } from './pm-plugins/main';
-import { stateKey } from './pm-plugins/plugin-key';
 import { floatingToolbar as _floatingToolbar } from './toolbar';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import ToolbarMedia from './ui/ToolbarMedia';

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

@@ -478,8 +478,22 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
     options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
     this.errorReporter = options.errorReporter || new ErrorReporter();
+    this.singletonCreatedAt = (performance || Date).now();
   }
   _createClass(MediaPluginStateImplementation, [{
+    key: "clone",
+    value: function clone() {
+      var clonedAt = (performance || Date).now();
+      return new Proxy(this, {
+        get: function get(target, prop, receiver) {
+          if (prop === 'singletonCreatedAt') {
+            return clonedAt;
+          }
+          return Reflect.get(target, prop, receiver);
+        }
+      });
+    }
+  }, {
     key: "setIsResizing",
     value: function setIsResizing(isResizing) {
       this.isResizing = isResizing;
@@ -636,16 +650,24 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
       apply: function apply(tr, pluginState) {
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
         var resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
+        // Yes, I agree with you; this approach, using the clone() fuction, below is horrifying.
+        // However, we needed to implement this workaround to solve the singleton Media PluginState.
+        // The entire PluginInjectionAPI relies on the following axiom: "A PluginState that reflects a new EditorState.". We can not have the mutable singleton instance for all EditorState.
+        // Unfortunately, we can't implement a proper fix for this media state situation. So, we are faking a new object using a Proxy instance.
+        var nextPluginState = pluginState;
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
+          nextPluginState = nextPluginState.clone();
         }
         if (resizingWidth) {
           pluginState.setResizingWidth(resizingWidth);
+          nextPluginState = nextPluginState.clone();
         }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {
           pluginState.editingMediaSinglePos = tr.mapping.map(pluginState.editingMediaSinglePos);
+          nextPluginState = nextPluginState.clone();
         }
         var meta = tr.getMeta(stateKey);
         if (meta) {
@@ -653,12 +675,13 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
           pluginState.updateAndDispatch({
             allowsUploads: typeof allowsUploads === 'undefined' ? pluginState.allowsUploads : allowsUploads
           });
+          nextPluginState = nextPluginState.clone();
         }
 
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference
         //       throughout the lifetime of view. We injected the view into the plugin state, because we dispatch()
         //       transformations from within the plugin state (i.e. when adding a new file).
-        return pluginState;
+        return nextPluginState;
       }
     },
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "188.2.7";
+export var version = "188.2.8";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/media/pm-plugins/main.d.ts

@@ -54,7 +54,9 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     mediaOptions?: MediaOptions;
     dispatch?: Dispatch;
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, newInsertionBehaviour: boolean | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
+    clone(): this;
     onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;

package/dist/types/plugins/media/pm-plugins/types.d.ts

@@ -61,4 +61,5 @@ export interface MediaPluginState {
     setView(view: EditorView): void;
     destroy(): void;
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
+    clone(): MediaPluginState;
 }

package/dist/types-ts4.5/plugins/media/pm-plugins/main.d.ts

@@ -54,7 +54,9 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     mediaOptions?: MediaOptions;
     dispatch?: Dispatch;
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, newInsertionBehaviour: boolean | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
+    clone(): this;
     onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;

package/dist/types-ts4.5/plugins/media/pm-plugins/types.d.ts

@@ -61,4 +61,5 @@ export interface MediaPluginState {
     setView(view: EditorView): void;
     destroy(): void;
     updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
+    clone(): MediaPluginState;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "188.2.7",
+  "version": "188.2.8",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -256,6 +256,10 @@
     "platform.editor.table-sticky-scrollbar": {
       "type": "boolean"
     },
+    "platform.editor.table.column-controls-styles-updated": {
+      "type": "boolean",
+      "referenceOnly": "true"
+    },
     "platform.editor.update-table-cell-width-via-step": {
       "type": "boolean",
       "referenceOnly": "true"