@atlaskit/editor-plugin-base 1.10.2 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-base
 
+## 1.11.0
+
+### Minor Changes
+
+- [#136261](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136261)
+  [`7e900c6a2ae84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7e900c6a2ae84) -
+  Lazy node view loading without setProps
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.10.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -11,11 +11,13 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _history = require("@atlaskit/editor-prosemirror/history");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands2 = require("./commands");
 var _disableSpellChecking = _interopRequireDefault(require("./pm-plugins/disable-spell-checking"));
 var _filterSteps = _interopRequireDefault(require("./pm-plugins/filter-steps"));
 var _frozenEditor = _interopRequireDefault(require("./pm-plugins/frozen-editor"));
 var _inlineCursorTarget = _interopRequireDefault(require("./pm-plugins/inline-cursor-target"));
+var _lazyNodeViewDecoration = require("./pm-plugins/lazy-node-view-decoration");
 var _newlinePreserveMarks = _interopRequireDefault(require("./pm-plugins/newline-preserve-marks"));
 var _scrollGutter = _interopRequireWildcard(require("./pm-plugins/scroll-gutter"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -45,6 +47,14 @@ var basePlugin = function basePlugin(_ref) {
           return (0, _filterSteps.default)(dispatchAnalyticsEvent);
         }
       }];
+      if ((0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+        plugins.push({
+          name: 'lazyNodeViewDecorationsPlugin',
+          plugin: function plugin() {
+            return (0, _lazyNodeViewDecoration.createLazyNodeViewDecorationPlugin)();
+          }
+        });
+      }
 
       // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
       // the cursor appears at the right most point of the parent container.

package/dist/cjs/pm-plugins/lazy-node-view-decoration.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLazyNodeViewDecorationPlugin = createLazyNodeViewDecorationPlugin;
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var LAZY_NODE_VIEW_DECORATION_CLASS = '__lazy-node-view-decoration__';
+/**
+ * Plugin is used to force re-render NodeViews for a specific node type
+ * when LazyNodeView finishes loading the real NodeView.
+ *
+ * This is achieved by applying a decoration to a node.
+ *
+ * It's a blessed way that Marijn suggested multiple times in ProseMirror Discuss:
+ * – https://discuss.prosemirror.net/t/force-nodes-of-specific-type-to-re-render/2480
+ */
+function createLazyNodeViewDecorationPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: _lazyNodeView.lazyNodeViewDecorationPluginKey,
+    state: {
+      init: function init() {
+        return {
+          decorations: _view.DecorationSet.empty,
+          nodeTypes: []
+        };
+      },
+      apply: function apply(tr, _oldState, newState) {
+        var actionPayload = tr.getMeta(_lazyNodeView.lazyNodeViewDecorationPluginKey);
+        var pluginState = _lazyNodeView.lazyNodeViewDecorationPluginKey.getState(newState);
+        if ((actionPayload === null || actionPayload === void 0 ? void 0 : actionPayload.type) === 'add' && actionPayload.nodeTypes.size) {
+          var decorations = [];
+          tr.doc.nodesBetween(0, tr.doc.nodeSize - 2, function (node, pos) {
+            if (actionPayload.nodeTypes.has(node.type.name)) {
+              decorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
+                class: LAZY_NODE_VIEW_DECORATION_CLASS
+              }));
+            }
+          });
+          return {
+            decorations: _view.DecorationSet.create(tr.doc, decorations)
+          };
+        }
+        if ((actionPayload === null || actionPayload === void 0 ? void 0 : actionPayload.type) === 'clear') {
+          return {
+            decorations: _view.DecorationSet.empty
+          };
+        }
+        if (tr.docChanged) {
+          return {
+            decorations: pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations.map(tr.mapping, tr.doc)
+          };
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _lazyNodeViewDecorati;
+        return (_lazyNodeViewDecorati = _lazyNodeView.lazyNodeViewDecorationPluginKey.getState(state)) === null || _lazyNodeViewDecorati === void 0 ? void 0 : _lazyNodeViewDecorati.decorations;
+      }
+    },
+    view: function view(editorView) {
+      return {
+        update: function update() {
+          /**
+           * After view update can clean up decorations...
+           */
+          var pluginState = _lazyNodeView.lazyNodeViewDecorationPluginKey.getState(editorView.state);
+          if (pluginState.decorations !== _view.DecorationSet.empty) {
+            var tr = editorView.state.tr;
+            tr.setMeta(_lazyNodeView.lazyNodeViewDecorationPluginKey, {
+              type: 'clear'
+            });
+            editorView.dispatch(tr);
+          }
+        }
+      };
+    }
+  });
+}

package/dist/es2019/plugin.js

@@ -2,11 +2,13 @@ import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import { keymap } from '@atlaskit/editor-common/keymaps';
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setKeyboardHeight } from './commands';
 import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
 import filterStepsPlugin from './pm-plugins/filter-steps';
 import frozenEditor from './pm-plugins/frozen-editor';
 import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
+import { createLazyNodeViewDecorationPlugin } from './pm-plugins/lazy-node-view-decoration';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import scrollGutter, { getKeyboardHeight } from './pm-plugins/scroll-gutter';
 const basePlugin = ({
@@ -32,6 +34,12 @@ const basePlugin = ({
           dispatchAnalyticsEvent
         }) => filterStepsPlugin(dispatchAnalyticsEvent)
       }];
+      if (fg('platform_editor_lazy-node-views')) {
+        plugins.push({
+          name: 'lazyNodeViewDecorationsPlugin',
+          plugin: () => createLazyNodeViewDecorationPlugin()
+        });
+      }
 
       // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
       // the cursor appears at the right most point of the parent container.

package/dist/es2019/pm-plugins/lazy-node-view-decoration.js

@@ -0,0 +1,77 @@
+import { lazyNodeViewDecorationPluginKey } from '@atlaskit/editor-common/lazy-node-view';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+const LAZY_NODE_VIEW_DECORATION_CLASS = '__lazy-node-view-decoration__';
+/**
+ * Plugin is used to force re-render NodeViews for a specific node type
+ * when LazyNodeView finishes loading the real NodeView.
+ *
+ * This is achieved by applying a decoration to a node.
+ *
+ * It's a blessed way that Marijn suggested multiple times in ProseMirror Discuss:
+ * – https://discuss.prosemirror.net/t/force-nodes-of-specific-type-to-re-render/2480
+ */
+export function createLazyNodeViewDecorationPlugin() {
+  return new SafePlugin({
+    key: lazyNodeViewDecorationPluginKey,
+    state: {
+      init: () => {
+        return {
+          decorations: DecorationSet.empty,
+          nodeTypes: []
+        };
+      },
+      apply(tr, _oldState, newState) {
+        const actionPayload = tr.getMeta(lazyNodeViewDecorationPluginKey);
+        const pluginState = lazyNodeViewDecorationPluginKey.getState(newState);
+        if ((actionPayload === null || actionPayload === void 0 ? void 0 : actionPayload.type) === 'add' && actionPayload.nodeTypes.size) {
+          const decorations = [];
+          tr.doc.nodesBetween(0, tr.doc.nodeSize - 2, (node, pos) => {
+            if (actionPayload.nodeTypes.has(node.type.name)) {
+              decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                class: LAZY_NODE_VIEW_DECORATION_CLASS
+              }));
+            }
+          });
+          return {
+            decorations: DecorationSet.create(tr.doc, decorations)
+          };
+        }
+        if ((actionPayload === null || actionPayload === void 0 ? void 0 : actionPayload.type) === 'clear') {
+          return {
+            decorations: DecorationSet.empty
+          };
+        }
+        if (tr.docChanged) {
+          return {
+            decorations: pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations.map(tr.mapping, tr.doc)
+          };
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: state => {
+        var _lazyNodeViewDecorati;
+        return (_lazyNodeViewDecorati = lazyNodeViewDecorationPluginKey.getState(state)) === null || _lazyNodeViewDecorati === void 0 ? void 0 : _lazyNodeViewDecorati.decorations;
+      }
+    },
+    view(editorView) {
+      return {
+        update() {
+          /**
+           * After view update can clean up decorations...
+           */
+          const pluginState = lazyNodeViewDecorationPluginKey.getState(editorView.state);
+          if (pluginState.decorations !== DecorationSet.empty) {
+            const tr = editorView.state.tr;
+            tr.setMeta(lazyNodeViewDecorationPluginKey, {
+              type: 'clear'
+            });
+            editorView.dispatch(tr);
+          }
+        }
+      };
+    }
+  });
+}

package/dist/esm/plugin.js

@@ -5,11 +5,13 @@ import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import { keymap } from '@atlaskit/editor-common/keymaps';
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setKeyboardHeight } from './commands';
 import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
 import filterStepsPlugin from './pm-plugins/filter-steps';
 import frozenEditor from './pm-plugins/frozen-editor';
 import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
+import { createLazyNodeViewDecorationPlugin } from './pm-plugins/lazy-node-view-decoration';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import scrollGutter, { getKeyboardHeight } from './pm-plugins/scroll-gutter';
 var basePlugin = function basePlugin(_ref) {
@@ -35,6 +37,14 @@ var basePlugin = function basePlugin(_ref) {
           return filterStepsPlugin(dispatchAnalyticsEvent);
         }
       }];
+      if (fg('platform_editor_lazy-node-views')) {
+        plugins.push({
+          name: 'lazyNodeViewDecorationsPlugin',
+          plugin: function plugin() {
+            return createLazyNodeViewDecorationPlugin();
+          }
+        });
+      }
 
       // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
       // the cursor appears at the right most point of the parent container.

package/dist/esm/pm-plugins/lazy-node-view-decoration.js

@@ -0,0 +1,77 @@
+import { lazyNodeViewDecorationPluginKey } from '@atlaskit/editor-common/lazy-node-view';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+var LAZY_NODE_VIEW_DECORATION_CLASS = '__lazy-node-view-decoration__';
+/**
+ * Plugin is used to force re-render NodeViews for a specific node type
+ * when LazyNodeView finishes loading the real NodeView.
+ *
+ * This is achieved by applying a decoration to a node.
+ *
+ * It's a blessed way that Marijn suggested multiple times in ProseMirror Discuss:
+ * – https://discuss.prosemirror.net/t/force-nodes-of-specific-type-to-re-render/2480
+ */
+export function createLazyNodeViewDecorationPlugin() {
+  return new SafePlugin({
+    key: lazyNodeViewDecorationPluginKey,
+    state: {
+      init: function init() {
+        return {
+          decorations: DecorationSet.empty,
+          nodeTypes: []
+        };
+      },
+      apply: function apply(tr, _oldState, newState) {
+        var actionPayload = tr.getMeta(lazyNodeViewDecorationPluginKey);
+        var pluginState = lazyNodeViewDecorationPluginKey.getState(newState);
+        if ((actionPayload === null || actionPayload === void 0 ? void 0 : actionPayload.type) === 'add' && actionPayload.nodeTypes.size) {
+          var decorations = [];
+          tr.doc.nodesBetween(0, tr.doc.nodeSize - 2, function (node, pos) {
+            if (actionPayload.nodeTypes.has(node.type.name)) {
+              decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                class: LAZY_NODE_VIEW_DECORATION_CLASS
+              }));
+            }
+          });
+          return {
+            decorations: DecorationSet.create(tr.doc, decorations)
+          };
+        }
+        if ((actionPayload === null || actionPayload === void 0 ? void 0 : actionPayload.type) === 'clear') {
+          return {
+            decorations: DecorationSet.empty
+          };
+        }
+        if (tr.docChanged) {
+          return {
+            decorations: pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations.map(tr.mapping, tr.doc)
+          };
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _lazyNodeViewDecorati;
+        return (_lazyNodeViewDecorati = lazyNodeViewDecorationPluginKey.getState(state)) === null || _lazyNodeViewDecorati === void 0 ? void 0 : _lazyNodeViewDecorati.decorations;
+      }
+    },
+    view: function view(editorView) {
+      return {
+        update: function update() {
+          /**
+           * After view update can clean up decorations...
+           */
+          var pluginState = lazyNodeViewDecorationPluginKey.getState(editorView.state);
+          if (pluginState.decorations !== DecorationSet.empty) {
+            var tr = editorView.state.tr;
+            tr.setMeta(lazyNodeViewDecorationPluginKey, {
+              type: 'clear'
+            });
+            editorView.dispatch(tr);
+          }
+        }
+      };
+    }
+  });
+}

package/dist/types/pm-plugins/lazy-node-view-decoration.d.ts

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type LazyNodeViewPluginState = {
+    decorations: DecorationSet;
+};
+/**
+ * Plugin is used to force re-render NodeViews for a specific node type
+ * when LazyNodeView finishes loading the real NodeView.
+ *
+ * This is achieved by applying a decoration to a node.
+ *
+ * It's a blessed way that Marijn suggested multiple times in ProseMirror Discuss:
+ * – https://discuss.prosemirror.net/t/force-nodes-of-specific-type-to-re-render/2480
+ */
+export declare function createLazyNodeViewDecorationPlugin(): SafePlugin<LazyNodeViewPluginState>;
+export {};

package/dist/types-ts4.5/pm-plugins/lazy-node-view-decoration.d.ts

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type LazyNodeViewPluginState = {
+    decorations: DecorationSet;
+};
+/**
+ * Plugin is used to force re-render NodeViews for a specific node type
+ * when LazyNodeView finishes loading the real NodeView.
+ *
+ * This is achieved by applying a decoration to a node.
+ *
+ * It's a blessed way that Marijn suggested multiple times in ProseMirror Discuss:
+ * – https://discuss.prosemirror.net/t/force-nodes-of-specific-type-to-re-render/2480
+ */
+export declare function createLazyNodeViewDecorationPlugin(): SafePlugin<LazyNodeViewPluginState>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-base",
-	"version": "1.10.2",
+	"version": "1.11.0",
 	"description": "Base plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -10,7 +10,6 @@
 	"atlassian": {
 		"team": "Editor: Lego",
 		"singleton": true,
-		"releaseModel": "continuous",
 		"runReact18": false
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -33,12 +32,18 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/editor-common": "^88.2.0",
+		"@atlaskit/editor-common": "^88.7.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@babel/runtime": "^7.0.0"
 	},
+	"platform-feature-flags": {
+		"platform_editor_lazy-node-views": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [

package/tsconfig.app.json

@@ -40,6 +40,9 @@
 		},
 		{
 			"path": "../editor-plugin-feature-flags/tsconfig.app.json"
+		},
+		{
+			"path": "../../platform/feature-flags/tsconfig.app.json"
 		}
 	]
 }