@bigbinary/neeto-editor 1.42.0 → 1.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ import Editor from './Editor.js';
7
7
  import { jsx } from 'react/jsx-runtime';
8
8
  import '@babel/runtime/helpers/toConsumableArray';
9
9
  import '@babel/runtime/helpers/slicedToArray';
10
- import './chunk-ca8c4c6d.js';
10
+ import './chunk-1ab733f1.js';
11
11
  import 'ramda';
12
12
  import './chunk-15c449f1.js';
13
13
  import 'i18next';
package/dist/Menu.js CHANGED
@@ -3,7 +3,7 @@ import '@babel/runtime/helpers/toConsumableArray';
3
3
  import '@babel/runtime/helpers/slicedToArray';
4
4
  import 'react';
5
5
  import 'ramda';
6
- export { M as default } from './chunk-ca8c4c6d.js';
6
+ export { M as default } from './chunk-1ab733f1.js';
7
7
  import './chunk-bdd72077.js';
8
8
  import 'react/jsx-runtime';
9
9
  import './chunk-15c449f1.js';
@@ -11464,7 +11464,11 @@ function createNodeFromContent(content, schema, options) {
11464
11464
  if (isArrayContent) {
11465
11465
  return Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)));
11466
11466
  }
11467
- return schema.nodeFromJSON(content);
11467
+ const node = schema.nodeFromJSON(content);
11468
+ if (options.errorOnInvalidContent) {
11469
+ node.check();
11470
+ }
11471
+ return node;
11468
11472
  }
11469
11473
  catch (error) {
11470
11474
  if (options.errorOnInvalidContent) {
@@ -12667,7 +12671,7 @@ const splitBlock = ({ keepMarks = true } = {}) => ({ tr, state, dispatch, editor
12667
12671
  return can;
12668
12672
  };
12669
12673
 
12670
- const splitListItem = typeOrName => ({ tr, state, dispatch, editor, }) => {
12674
+ const splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch, editor, }) => {
12671
12675
  var _a;
12672
12676
  const type = getNodeType$1(typeOrName, state.schema);
12673
12677
  const { $from, $to } = state.selection;
@@ -12703,7 +12707,10 @@ const splitListItem = typeOrName => ({ tr, state, dispatch, editor, }) => {
12703
12707
  // eslint-disable-next-line
12704
12708
  const depthAfter = $from.indexAfter(-1) < $from.node(-2).childCount ? 1 : $from.indexAfter(-2) < $from.node(-3).childCount ? 2 : 3;
12705
12709
  // Add a second list item with an empty default start node
12706
- const newNextTypeAttributes = getSplittedAttributes(extensionAttributes, $from.node().type.name, $from.node().attrs);
12710
+ const newNextTypeAttributes = {
12711
+ ...getSplittedAttributes(extensionAttributes, $from.node().type.name, $from.node().attrs),
12712
+ ...overrideAttrs,
12713
+ };
12707
12714
  const nextType = ((_a = type.contentMatch.defaultType) === null || _a === void 0 ? void 0 : _a.createAndFill(newNextTypeAttributes)) || undefined;
12708
12715
  wrap = wrap.append(Fragment.from(type.createAndFill(null, nextType) || undefined));
12709
12716
  const start = $from.before($from.depth - (depthBefore - 1));
@@ -12725,8 +12732,14 @@ const splitListItem = typeOrName => ({ tr, state, dispatch, editor, }) => {
12725
12732
  return true;
12726
12733
  }
12727
12734
  const nextType = $to.pos === $from.end() ? grandParent.contentMatchAt(0).defaultType : null;
12728
- const newTypeAttributes = getSplittedAttributes(extensionAttributes, grandParent.type.name, grandParent.attrs);
12729
- const newNextTypeAttributes = getSplittedAttributes(extensionAttributes, $from.node().type.name, $from.node().attrs);
12735
+ const newTypeAttributes = {
12736
+ ...getSplittedAttributes(extensionAttributes, grandParent.type.name, grandParent.attrs),
12737
+ ...overrideAttrs,
12738
+ };
12739
+ const newNextTypeAttributes = {
12740
+ ...getSplittedAttributes(extensionAttributes, $from.node().type.name, $from.node().attrs),
12741
+ ...overrideAttrs,
12742
+ };
12730
12743
  tr.delete($from.pos, $to.pos);
12731
12744
  const types = nextType
12732
12745
  ? [
@@ -13452,8 +13465,8 @@ img.ProseMirror-separator {
13452
13465
  display: inline !important;
13453
13466
  border: none !important;
13454
13467
  margin: 0 !important;
13455
- width: 1px !important;
13456
- height: 1px !important;
13468
+ width: 0 !important;
13469
+ height: 0 !important;
13457
13470
  }
13458
13471
 
13459
13472
  .ProseMirror-gapcursor {
@@ -13514,10 +13527,14 @@ function createStyleTag(style, nonce, suffix) {
13514
13527
  return styleNode;
13515
13528
  }
13516
13529
 
13517
- class Editor$1 extends EventEmitter {
13530
+ class Editor extends EventEmitter {
13518
13531
  constructor(options = {}) {
13519
13532
  super();
13520
13533
  this.isFocused = false;
13534
+ /**
13535
+ * The editor is considered initialized after the `create` event has been emitted.
13536
+ */
13537
+ this.isInitialized = false;
13521
13538
  this.extensionStorage = {};
13522
13539
  this.options = {
13523
13540
  element: document.createElement('div'),
@@ -13568,6 +13585,7 @@ class Editor$1 extends EventEmitter {
13568
13585
  }
13569
13586
  this.commands.focus(this.options.autofocus);
13570
13587
  this.emit('create', { editor: this });
13588
+ this.isInitialized = true;
13571
13589
  }, 0);
13572
13590
  }
13573
13591
  /**
@@ -14701,6 +14719,36 @@ Extension.create({
14701
14719
  },
14702
14720
  });
14703
14721
 
14722
+ var shim = {exports: {}};
14723
+
14724
+ var useSyncExternalStoreShim_production_min = {};
14725
+
14726
+ /**
14727
+ * @license React
14728
+ * use-sync-external-store-shim.production.min.js
14729
+ *
14730
+ * Copyright (c) Facebook, Inc. and its affiliates.
14731
+ *
14732
+ * This source code is licensed under the MIT license found in the
14733
+ * LICENSE file in the root directory of this source tree.
14734
+ */
14735
+
14736
+ var hasRequiredUseSyncExternalStoreShim_production_min;
14737
+
14738
+ function requireUseSyncExternalStoreShim_production_min () {
14739
+ if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
14740
+ hasRequiredUseSyncExternalStoreShim_production_min = 1;
14741
+ var e=React__default;function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
14742
+ function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;useSyncExternalStoreShim_production_min.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
14743
+ return useSyncExternalStoreShim_production_min;
14744
+ }
14745
+
14746
+ {
14747
+ shim.exports = requireUseSyncExternalStoreShim_production_min();
14748
+ }
14749
+
14750
+ var shimExports = shim.exports;
14751
+
14704
14752
  const mergeRefs = (...refs) => {
14705
14753
  return (node) => {
14706
14754
  refs.forEach(ref => {
@@ -14713,18 +14761,63 @@ const mergeRefs = (...refs) => {
14713
14761
  });
14714
14762
  };
14715
14763
  };
14716
- const Portals = ({ renderers }) => {
14717
- return (React__default.createElement(React__default.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
14718
- return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
14719
- })));
14764
+ /**
14765
+ * This component renders all of the editor's node views.
14766
+ */
14767
+ const Portals = ({ contentComponent, }) => {
14768
+ // For performance reasons, we render the node view portals on state changes only
14769
+ const renderers = shimExports.useSyncExternalStore(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
14770
+ // This allows us to directly render the portals without any additional wrapper
14771
+ return (React__default.createElement(React__default.Fragment, null, Object.values(renderers)));
14720
14772
  };
14773
+ function getInstance() {
14774
+ const subscribers = new Set();
14775
+ let renderers = {};
14776
+ return {
14777
+ /**
14778
+ * Subscribe to the editor instance's changes.
14779
+ */
14780
+ subscribe(callback) {
14781
+ subscribers.add(callback);
14782
+ return () => {
14783
+ subscribers.delete(callback);
14784
+ };
14785
+ },
14786
+ getSnapshot() {
14787
+ return renderers;
14788
+ },
14789
+ getServerSnapshot() {
14790
+ return renderers;
14791
+ },
14792
+ /**
14793
+ * Adds a new NodeView Renderer to the editor.
14794
+ */
14795
+ setRenderer(id, renderer) {
14796
+ renderers = {
14797
+ ...renderers,
14798
+ [id]: ReactDOM.createPortal(renderer.reactElement, renderer.element, id),
14799
+ };
14800
+ subscribers.forEach(subscriber => subscriber());
14801
+ },
14802
+ /**
14803
+ * Removes a NodeView Renderer from the editor.
14804
+ */
14805
+ removeRenderer(id) {
14806
+ const nextRenderers = { ...renderers };
14807
+ delete nextRenderers[id];
14808
+ renderers = nextRenderers;
14809
+ subscribers.forEach(subscriber => subscriber());
14810
+ },
14811
+ };
14812
+ }
14721
14813
  class PureEditorContent extends React__default.Component {
14722
14814
  constructor(props) {
14815
+ var _a;
14723
14816
  super(props);
14724
14817
  this.editorContentRef = React__default.createRef();
14725
14818
  this.initialized = false;
14726
14819
  this.state = {
14727
- renderers: {},
14820
+ hasContentComponentInitialized: Boolean((_a = props.editor) === null || _a === void 0 ? void 0 : _a.contentComponent),
14728
14821
  };
14729
14822
  }
14730
14823
  componentDidMount() {
@@ -14734,7 +14827,7 @@ class PureEditorContent extends React__default.Component {
14734
14827
  this.init();
14735
14828
  }
14736
14829
  init() {
14737
- const { editor } = this.props;
14830
+ const editor = this.props.editor;
14738
14831
  if (editor && !editor.isDestroyed && editor.options.element) {
14739
14832
  if (editor.contentComponent) {
14740
14833
  return;
@@ -14744,44 +14837,31 @@ class PureEditorContent extends React__default.Component {
14744
14837
  editor.setOptions({
14745
14838
  element,
14746
14839
  });
14747
- editor.contentComponent = this;
14840
+ editor.contentComponent = getInstance();
14841
+ // Has the content component been initialized?
14842
+ if (!this.state.hasContentComponentInitialized) {
14843
+ // Subscribe to the content component
14844
+ this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
14845
+ this.setState(prevState => {
14846
+ if (!prevState.hasContentComponentInitialized) {
14847
+ return {
14848
+ hasContentComponentInitialized: true,
14849
+ };
14850
+ }
14851
+ return prevState;
14852
+ });
14853
+ // Unsubscribe to previous content component
14854
+ if (this.unsubscribeToContentComponent) {
14855
+ this.unsubscribeToContentComponent();
14856
+ }
14857
+ });
14858
+ }
14748
14859
  editor.createNodeViews();
14749
14860
  this.initialized = true;
14750
14861
  }
14751
14862
  }
14752
- maybeFlushSync(fn) {
14753
- // Avoid calling flushSync until the editor is initialized.
14754
- // Initialization happens during the componentDidMount or componentDidUpdate
14755
- // lifecycle methods, and React doesn't allow calling flushSync from inside
14756
- // a lifecycle method.
14757
- if (this.initialized) {
14758
- flushSync(fn);
14759
- }
14760
- else {
14761
- fn();
14762
- }
14763
- }
14764
- setRenderer(id, renderer) {
14765
- this.maybeFlushSync(() => {
14766
- this.setState(({ renderers }) => ({
14767
- renderers: {
14768
- ...renderers,
14769
- [id]: renderer,
14770
- },
14771
- }));
14772
- });
14773
- }
14774
- removeRenderer(id) {
14775
- this.maybeFlushSync(() => {
14776
- this.setState(({ renderers }) => {
14777
- const nextRenderers = { ...renderers };
14778
- delete nextRenderers[id];
14779
- return { renderers: nextRenderers };
14780
- });
14781
- });
14782
- }
14783
14863
  componentWillUnmount() {
14784
- const { editor } = this.props;
14864
+ const editor = this.props.editor;
14785
14865
  if (!editor) {
14786
14866
  return;
14787
14867
  }
@@ -14791,6 +14871,9 @@ class PureEditorContent extends React__default.Component {
14791
14871
  nodeViews: {},
14792
14872
  });
14793
14873
  }
14874
+ if (this.unsubscribeToContentComponent) {
14875
+ this.unsubscribeToContentComponent();
14876
+ }
14794
14877
  editor.contentComponent = null;
14795
14878
  if (!editor.options.element.firstChild) {
14796
14879
  return;
@@ -14805,13 +14888,14 @@ class PureEditorContent extends React__default.Component {
14805
14888
  const { editor, innerRef, ...rest } = this.props;
14806
14889
  return (React__default.createElement(React__default.Fragment, null,
14807
14890
  React__default.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
14808
- React__default.createElement(Portals, { renderers: this.state.renderers })));
14891
+ (editor === null || editor === void 0 ? void 0 : editor.contentComponent) && React__default.createElement(Portals, { contentComponent: editor.contentComponent })));
14809
14892
  }
14810
14893
  }
14811
14894
  // EditorContent should be re-created whenever the Editor instance changes
14812
14895
  const EditorContentWithKey = forwardRef((props, ref) => {
14813
14896
  const key = React__default.useMemo(() => {
14814
- return Math.floor(Math.random() * 0xFFFFFFFF).toString();
14897
+ return Math.floor(Math.random() * 0xffffffff).toString();
14898
+ // eslint-disable-next-line react-hooks/exhaustive-deps
14815
14899
  }, [props.editor]);
14816
14900
  // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
14817
14901
  return React__default.createElement(PureEditorContent, {
@@ -14822,43 +14906,6 @@ const EditorContentWithKey = forwardRef((props, ref) => {
14822
14906
  });
14823
14907
  const EditorContent = React__default.memo(EditorContentWithKey);
14824
14908
 
14825
- var shim = {exports: {}};
14826
-
14827
- var useSyncExternalStoreShim_production_min = {};
14828
-
14829
- /**
14830
- * @license React
14831
- * use-sync-external-store-shim.production.min.js
14832
- *
14833
- * Copyright (c) Facebook, Inc. and its affiliates.
14834
- *
14835
- * This source code is licensed under the MIT license found in the
14836
- * LICENSE file in the root directory of this source tree.
14837
- */
14838
-
14839
- var hasRequiredUseSyncExternalStoreShim_production_min;
14840
-
14841
- function requireUseSyncExternalStoreShim_production_min () {
14842
- if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
14843
- hasRequiredUseSyncExternalStoreShim_production_min = 1;
14844
- var e=React__default;function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
14845
- function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;useSyncExternalStoreShim_production_min.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
14846
- return useSyncExternalStoreShim_production_min;
14847
- }
14848
-
14849
- {
14850
- shim.exports = requireUseSyncExternalStoreShim_production_min();
14851
- }
14852
-
14853
- var shimExports = shim.exports;
14854
-
14855
- class Editor extends Editor$1 {
14856
- constructor() {
14857
- super(...arguments);
14858
- this.contentComponent = null;
14859
- }
14860
- }
14861
-
14862
14909
  var withSelector = {exports: {}};
14863
14910
 
14864
14911
  var withSelector_production_min = {};
@@ -14999,6 +15046,7 @@ class EditorInstanceManager {
14999
15046
  this.options = options;
15000
15047
  this.subscriptions = new Set();
15001
15048
  this.setEditor(this.getInitialEditor());
15049
+ this.scheduleDestroy();
15002
15050
  this.getEditor = this.getEditor.bind(this);
15003
15051
  this.getServerSnapshot = this.getServerSnapshot.bind(this);
15004
15052
  this.subscribe = this.subscribe.bind(this);
@@ -15035,17 +15083,20 @@ class EditorInstanceManager {
15035
15083
  * Create a new editor instance. And attach event listeners.
15036
15084
  */
15037
15085
  createEditor() {
15038
- const editor = new Editor(this.options.current);
15039
- // Always call the most recent version of the callback function by default
15040
- editor.on('beforeCreate', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBeforeCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15041
- editor.on('blur', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15042
- editor.on('create', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15043
- editor.on('destroy', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onDestroy) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15044
- editor.on('focus', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15045
- editor.on('selectionUpdate', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onSelectionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15046
- editor.on('transaction', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15047
- editor.on('update', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15048
- editor.on('contentError', (...args) => { var _a, _b; return (_b = (_a = this.options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); });
15086
+ const optionsToApply = {
15087
+ ...this.options.current,
15088
+ // Always call the most recent version of the callback function by default
15089
+ onBeforeCreate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBeforeCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15090
+ onBlur: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15091
+ onCreate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onCreate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15092
+ onDestroy: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onDestroy) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15093
+ onFocus: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15094
+ onSelectionUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onSelectionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15095
+ onTransaction: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15096
+ onUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15097
+ onContentError: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
15098
+ };
15099
+ const editor = new Editor(optionsToApply);
15049
15100
  // no need to keep track of the event listeners, they will be removed when the editor is destroyed
15050
15101
  return editor;
15051
15102
  }
@@ -15134,10 +15185,10 @@ class EditorInstanceManager {
15134
15185
  scheduleDestroy() {
15135
15186
  const currentInstanceId = this.instanceId;
15136
15187
  const currentEditor = this.editor;
15137
- // Wait a tick to see if the component is still mounted
15188
+ // Wait two ticks to see if the component is still mounted
15138
15189
  this.scheduledDestructionTimeout = setTimeout(() => {
15139
15190
  if (this.isComponentMounted && this.instanceId === currentInstanceId) {
15140
- // If still mounted on the next tick, with the same instanceId, do not destroy the editor
15191
+ // If still mounted on the following tick, with the same instanceId, do not destroy the editor
15141
15192
  if (currentEditor) {
15142
15193
  // just re-apply options as they might have changed
15143
15194
  currentEditor.setOptions(this.options.current);
@@ -15150,7 +15201,9 @@ class EditorInstanceManager {
15150
15201
  this.setEditor(null);
15151
15202
  }
15152
15203
  }
15153
- }, 0);
15204
+ // This allows the effect to run again between ticks
15205
+ // which may save us from having to re-create the editor
15206
+ }, 1);
15154
15207
  }
15155
15208
  }
15156
15209
  function useEditor(options = {}, deps = []) {
@@ -15229,7 +15282,9 @@ const useReactNodeView = () => useContext(ReactNodeViewContext);
15229
15282
  const NodeViewContent = props => {
15230
15283
  const Tag = props.as || 'div';
15231
15284
  const { nodeViewContentRef } = useReactNodeView();
15232
- return (React__default.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
15285
+ return (
15286
+ // @ts-ignore
15287
+ React__default.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
15233
15288
  whiteSpace: 'pre-wrap',
15234
15289
  ...props.style,
15235
15290
  } }));
@@ -15238,7 +15293,9 @@ const NodeViewContent = props => {
15238
15293
  const NodeViewWrapper = React__default.forwardRef((props, ref) => {
15239
15294
  const { onDragStart } = useReactNodeView();
15240
15295
  const Tag = props.as || 'div';
15241
- return (React__default.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
15296
+ return (
15297
+ // @ts-ignore
15298
+ React__default.createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
15242
15299
  whiteSpace: 'normal',
15243
15300
  ...props.style,
15244
15301
  } }));
@@ -15292,19 +15349,29 @@ class ReactRenderer {
15292
15349
  this.element.setAttribute(key, attrs[key]);
15293
15350
  });
15294
15351
  }
15295
- this.render();
15352
+ if (this.editor.isInitialized) {
15353
+ // On first render, we need to flush the render synchronously
15354
+ // Renders afterwards can be async, but this fixes a cursor positioning issue
15355
+ flushSync(() => {
15356
+ this.render();
15357
+ });
15358
+ }
15359
+ else {
15360
+ this.render();
15361
+ }
15296
15362
  }
15297
15363
  render() {
15298
- var _a, _b;
15364
+ var _a;
15299
15365
  const Component = this.component;
15300
15366
  const props = this.props;
15367
+ const editor = this.editor;
15301
15368
  if (isClassComponent(Component) || isForwardRefComponent(Component)) {
15302
15369
  props.ref = (ref) => {
15303
15370
  this.ref = ref;
15304
15371
  };
15305
15372
  }
15306
- this.reactElement = React__default.createElement(Component, { ...props });
15307
- (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.setRenderer(this.id, this);
15373
+ this.reactElement = React__default.createElement(Component, props);
15374
+ (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.setRenderer(this.id, this);
15308
15375
  }
15309
15376
  updateProps(props = {}) {
15310
15377
  this.props = {
@@ -15314,8 +15381,9 @@ class ReactRenderer {
15314
15381
  this.render();
15315
15382
  }
15316
15383
  destroy() {
15317
- var _a, _b;
15318
- (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.removeRenderer(this.id);
15384
+ var _a;
15385
+ const editor = this.editor;
15386
+ (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.removeRenderer(this.id);
15319
15387
  }
15320
15388
  }
15321
15389
 
@@ -15337,18 +15405,19 @@ class ReactNodeView extends NodeView {
15337
15405
  };
15338
15406
  this.component.displayName = capitalizeFirstChar(this.extension.name);
15339
15407
  }
15340
- const ReactNodeViewProvider = componentProps => {
15341
- const Component = this.component;
15342
- const onDragStart = this.onDragStart.bind(this);
15343
- const nodeViewContentRef = element => {
15344
- if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
15345
- element.appendChild(this.contentDOMElement);
15346
- }
15347
- };
15348
- return (React__default.createElement(React__default.Fragment, null,
15349
- React__default.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
15350
- React__default.createElement(Component, { ...componentProps }))));
15408
+ const onDragStart = this.onDragStart.bind(this);
15409
+ const nodeViewContentRef = element => {
15410
+ if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
15411
+ element.appendChild(this.contentDOMElement);
15412
+ }
15351
15413
  };
15414
+ const context = { onDragStart, nodeViewContentRef };
15415
+ const Component = this.component;
15416
+ // For performance reasons, we memoize the provider component
15417
+ // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
15418
+ const ReactNodeViewProvider = React__default.memo(componentProps => {
15419
+ return (React__default.createElement(ReactNodeViewContext.Provider, { value: context }, React__default.createElement(Component, componentProps)));
15420
+ });
15352
15421
  ReactNodeViewProvider.displayName = 'ReactNodeView';
15353
15422
  if (this.node.isLeaf) {
15354
15423
  this.contentDOMElement = null;
@@ -19339,4 +19408,4 @@ var Menu = function Menu(props) {
19339
19408
  };
19340
19409
 
19341
19410
  export { getAttributes as A, highlightFocussedNode as B, resetFocussedNode as C, DecorationSet as D, Extension as E, findParentNodeClosestToPos as F, BubbleMenu as G, getLinkPopoverPosition as H, InputRule as I, getMarkType as J, getMarkRange as K, useEditor as L, Menu as M, Node as N, useEditorState$1 as O, PasteRule as P, EditorContent as Q, ReactNodeViewRenderer as R, MediaUploader as S, EmbedOption as T, EditorView as U, Mark as a, markInputRule as b, markPasteRule as c, Decoration as d, callOrReturn as e, getExtensionField as f, getMarkAttributes as g, findChildren as h, isNodeSelection as i, NodeViewWrapper as j, keydownHandler as k, NodeViewContent as l, mergeAttributes as m, nodeInputRule as n, escapeForRegEx as o, ReactRenderer as p, EmojiPickerMenu as q, emojiPickerApi as r, liftTarget$1 as s, textblockTypeInputRule as t, combineTransactionSteps as u, validateUrl as v, wrappingInputRule as w, getChangedRanges as x, findChildrenInRange as y, getMarksBetween as z };
19342
- //# sourceMappingURL=chunk-ca8c4c6d.js.map
19411
+ //# sourceMappingURL=chunk-1ab733f1.js.map