art-bd-ui 1.0.39 → 1.0.41

package/dist/esm/node_modules/@tiptap/extension-node-range/dist/index.js

@@ -0,0 +1,288 @@
+import { Extension } from '../../core/dist/index.js';
+import { Plugin, PluginKey, Selection, SelectionRange } from '../../../prosemirror-state/dist/index.js';
+import { DecorationSet, Decoration } from '../../../prosemirror-view/dist/index.js';
+import { NodeRange } from '../../../prosemirror-model/dist/index.js';
+
+// src/node-range.ts
+function getNodeRangeDecorations(ranges) {
+  if (!ranges.length) {
+    return DecorationSet.empty;
+  }
+  const decorations = [];
+  const doc = ranges[0].$from.node(0);
+  ranges.forEach((range) => {
+    const pos = range.$from.pos;
+    const node = range.$from.nodeAfter;
+    if (!node) {
+      return;
+    }
+    decorations.push(
+      Decoration.node(pos, pos + node.nodeSize, {
+        class: "ProseMirror-selectednoderange"
+      })
+    );
+  });
+  return DecorationSet.create(doc, decorations);
+}
+function getSelectionRanges($from, $to, depth) {
+  const ranges = [];
+  const doc = $from.node(0);
+  if (typeof depth === "number" && depth >= 0) ; else if ($from.sameParent($to)) {
+    depth = Math.max(0, $from.sharedDepth($to.pos) - 1);
+  } else {
+    depth = $from.sharedDepth($to.pos);
+  }
+  const nodeRange = new NodeRange($from, $to, depth);
+  const offset = nodeRange.depth === 0 ? 0 : doc.resolve(nodeRange.start).posAtIndex(0);
+  nodeRange.parent.forEach((node, pos) => {
+    const from = offset + pos;
+    const to = from + node.nodeSize;
+    if (from < nodeRange.start || from >= nodeRange.end) {
+      return;
+    }
+    const selectionRange = new SelectionRange(doc.resolve(from), doc.resolve(to));
+    ranges.push(selectionRange);
+  });
+  return ranges;
+}
+
+// src/helpers/NodeRangeBookmark.ts
+var NodeRangeBookmark = class _NodeRangeBookmark {
+  constructor(anchor, head) {
+    this.anchor = anchor;
+    this.head = head;
+  }
+  map(mapping) {
+    return new _NodeRangeBookmark(mapping.map(this.anchor), mapping.map(this.head));
+  }
+  resolve(doc) {
+    const $anchor = doc.resolve(this.anchor);
+    const $head = doc.resolve(this.head);
+    return new NodeRangeSelection($anchor, $head);
+  }
+};
+
+// src/helpers/NodeRangeSelection.ts
+var NodeRangeSelection = class _NodeRangeSelection extends Selection {
+  constructor($anchor, $head, depth, bias = 1) {
+    const { doc } = $anchor;
+    const isCursor = $anchor === $head;
+    const isCursorAtEnd = $anchor.pos === doc.content.size && $head.pos === doc.content.size;
+    const $correctedHead = isCursor && !isCursorAtEnd ? doc.resolve($head.pos + (bias > 0 ? 1 : -1)) : $head;
+    const $correctedAnchor = isCursor && isCursorAtEnd ? doc.resolve($anchor.pos - (bias > 0 ? 1 : -1)) : $anchor;
+    const ranges = getSelectionRanges($correctedAnchor.min($correctedHead), $correctedAnchor.max($correctedHead), depth);
+    const $rangeFrom = $correctedHead.pos >= $anchor.pos ? ranges[0].$from : ranges[ranges.length - 1].$to;
+    const $rangeTo = $correctedHead.pos >= $anchor.pos ? ranges[ranges.length - 1].$to : ranges[0].$from;
+    super($rangeFrom, $rangeTo, ranges);
+    this.depth = depth;
+  }
+  // we can safely ignore this TypeScript error: https://github.com/Microsoft/TypeScript/issues/338
+  // @ts-ignore
+  get $to() {
+    return this.ranges[this.ranges.length - 1].$to;
+  }
+  eq(other) {
+    return other instanceof _NodeRangeSelection && other.$from.pos === this.$from.pos && other.$to.pos === this.$to.pos;
+  }
+  map(doc, mapping) {
+    const $anchor = doc.resolve(mapping.map(this.anchor));
+    const $head = doc.resolve(mapping.map(this.head));
+    return new _NodeRangeSelection($anchor, $head);
+  }
+  toJSON() {
+    return {
+      type: "nodeRange",
+      anchor: this.anchor,
+      head: this.head
+    };
+  }
+  get isForwards() {
+    return this.head >= this.anchor;
+  }
+  get isBackwards() {
+    return !this.isForwards;
+  }
+  extendBackwards() {
+    const { doc } = this.$from;
+    if (this.isForwards && this.ranges.length > 1) {
+      const ranges = this.ranges.slice(0, -1);
+      const $from2 = ranges[0].$from;
+      const $to = ranges[ranges.length - 1].$to;
+      return new _NodeRangeSelection($from2, $to, this.depth);
+    }
+    const firstRange = this.ranges[0];
+    const $from = doc.resolve(Math.max(0, firstRange.$from.pos - 1));
+    return new _NodeRangeSelection(this.$anchor, $from, this.depth);
+  }
+  extendForwards() {
+    const { doc } = this.$from;
+    if (this.isBackwards && this.ranges.length > 1) {
+      const ranges = this.ranges.slice(1);
+      const $from = ranges[0].$from;
+      const $to2 = ranges[ranges.length - 1].$to;
+      return new _NodeRangeSelection($to2, $from, this.depth);
+    }
+    const lastRange = this.ranges[this.ranges.length - 1];
+    const $to = doc.resolve(Math.min(doc.content.size, lastRange.$to.pos + 1));
+    return new _NodeRangeSelection(this.$anchor, $to, this.depth);
+  }
+  static fromJSON(doc, json) {
+    return new _NodeRangeSelection(doc.resolve(json.anchor), doc.resolve(json.head));
+  }
+  static create(doc, anchor, head, depth, bias = 1) {
+    return new this(doc.resolve(anchor), doc.resolve(head), depth, bias);
+  }
+  getBookmark() {
+    return new NodeRangeBookmark(this.anchor, this.head);
+  }
+};
+NodeRangeSelection.prototype.visible = false;
+
+// src/helpers/isNodeRangeSelection.ts
+function isNodeRangeSelection(value) {
+  return value instanceof NodeRangeSelection;
+}
+
+// src/node-range.ts
+Extension.create({
+  name: "nodeRange",
+  addOptions() {
+    return {
+      depth: void 0,
+      key: "Mod"
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      // extend NodeRangeSelection upwards
+      "Shift-ArrowUp": ({ editor }) => {
+        const { depth } = this.options;
+        const { view, state } = editor;
+        const { doc, selection, tr } = state;
+        const { anchor, head } = selection;
+        if (!isNodeRangeSelection(selection)) {
+          const nodeRangeSelection2 = NodeRangeSelection.create(doc, anchor, head, depth, -1);
+          tr.setSelection(nodeRangeSelection2);
+          view.dispatch(tr);
+          return true;
+        }
+        const nodeRangeSelection = selection.extendBackwards();
+        tr.setSelection(nodeRangeSelection);
+        view.dispatch(tr);
+        return true;
+      },
+      // extend NodeRangeSelection downwards
+      "Shift-ArrowDown": ({ editor }) => {
+        const { depth } = this.options;
+        const { view, state } = editor;
+        const { doc, selection, tr } = state;
+        const { anchor, head } = selection;
+        if (!isNodeRangeSelection(selection)) {
+          const nodeRangeSelection2 = NodeRangeSelection.create(doc, anchor, head, depth);
+          tr.setSelection(nodeRangeSelection2);
+          view.dispatch(tr);
+          return true;
+        }
+        const nodeRangeSelection = selection.extendForwards();
+        tr.setSelection(nodeRangeSelection);
+        view.dispatch(tr);
+        return true;
+      },
+      // add `NodeRangeSelection` to all nodes
+      "Mod-a": ({ editor }) => {
+        const { depth } = this.options;
+        const { view, state } = editor;
+        const { doc, tr } = state;
+        const nodeRangeSelection = NodeRangeSelection.create(doc, 0, doc.content.size, depth);
+        tr.setSelection(nodeRangeSelection);
+        view.dispatch(tr);
+        return true;
+      }
+    };
+  },
+  onSelectionUpdate() {
+    const { selection } = this.editor.state;
+    if (isNodeRangeSelection(selection)) {
+      this.editor.view.dom.classList.add("ProseMirror-noderangeselection");
+    }
+  },
+  addProseMirrorPlugins() {
+    let hideTextSelection = false;
+    let activeMouseSelection = false;
+    return [
+      new Plugin({
+        key: new PluginKey("nodeRange"),
+        props: {
+          attributes: () => {
+            if (hideTextSelection) {
+              return {
+                class: "ProseMirror-noderangeselection"
+              };
+            }
+            return { class: "" };
+          },
+          handleDOMEvents: {
+            mousedown: (view, event) => {
+              const { key } = this.options;
+              const isMac = /Mac/.test(navigator.platform);
+              const isShift = !!event.shiftKey;
+              const isControl = !!event.ctrlKey;
+              const isAlt = !!event.altKey;
+              const isMeta = !!event.metaKey;
+              const isMod = isMac ? isMeta : isControl;
+              if (key === null || key === void 0 || key === "Shift" && isShift || key === "Control" && isControl || key === "Alt" && isAlt || key === "Meta" && isMeta || key === "Mod" && isMod) {
+                activeMouseSelection = true;
+              }
+              if (!activeMouseSelection) {
+                return false;
+              }
+              document.addEventListener(
+                "mouseup",
+                () => {
+                  activeMouseSelection = false;
+                  const { state } = view;
+                  const { doc, selection, tr } = state;
+                  const { $anchor, $head } = selection;
+                  if ($anchor.sameParent($head)) {
+                    return;
+                  }
+                  const nodeRangeSelection = NodeRangeSelection.create(doc, $anchor.pos, $head.pos, this.options.depth);
+                  tr.setSelection(nodeRangeSelection);
+                  view.dispatch(tr);
+                },
+                { once: true }
+              );
+              return false;
+            }
+          },
+          // when selecting some text we want to render some decorations
+          // to preview a `NodeRangeSelection`
+          decorations: (state) => {
+            const { selection } = state;
+            const isNodeRange = isNodeRangeSelection(selection);
+            hideTextSelection = false;
+            if (!activeMouseSelection) {
+              if (!isNodeRange) {
+                return null;
+              }
+              hideTextSelection = true;
+              return getNodeRangeDecorations(selection.ranges);
+            }
+            const { $from, $to } = selection;
+            if (!isNodeRange && $from.sameParent($to)) {
+              return null;
+            }
+            const nodeRanges = getSelectionRanges($from, $to, this.options.depth);
+            if (!nodeRanges.length) {
+              return null;
+            }
+            hideTextSelection = true;
+            return getNodeRangeDecorations(nodeRanges);
+          }
+        }
+      })
+    ];
+  }
+});
+
+export { NodeRangeSelection, getNodeRangeDecorations, getSelectionRanges, isNodeRangeSelection };

package/dist/esm/node_modules/@tiptap/extension-paragraph/dist/index.js

@@ -1,6 +1,8 @@
 import { Node as Node3, mergeAttributes } from '../../core/dist/index.js';
 
 // src/paragraph.ts
+var EMPTY_PARAGRAPH_MARKDOWN = " ";
+var NBSP_CHAR = "\xA0";
 var Paragraph = Node3.create({
   name: "paragraph",
   priority: 1e3,
@@ -22,18 +24,21 @@ var Paragraph = Node3.create({
     if (tokens.length === 1 && tokens[0].type === "image") {
       return helpers.parseChildren([tokens[0]]);
     }
-    return helpers.createNode(
-      "paragraph",
-      void 0,
-      // no attributes for paragraph
-      helpers.parseInline(tokens)
-    );
+    const content = helpers.parseInline(tokens);
+    if (content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+      return helpers.createNode("paragraph", void 0, []);
+    }
+    return helpers.createNode("paragraph", void 0, content);
   },
   renderMarkdown: (node, h) => {
-    if (!node || !Array.isArray(node.content)) {
+    if (!node) {
       return "";
     }
-    return h.renderChildren(node.content);
+    const content = Array.isArray(node.content) ? node.content : [];
+    if (content.length === 0) {
+      return EMPTY_PARAGRAPH_MARKDOWN;
+    }
+    return h.renderChildren(content);
   },
   addCommands() {
     return {

package/dist/esm/node_modules/@tiptap/extension-text-align/dist/index.js

@@ -38,10 +38,10 @@ var TextAlign = Extension.create({
         if (!this.options.alignments.includes(alignment)) {
           return false;
         }
-        return this.options.types.map((type) => commands.updateAttributes(type, { textAlign: alignment })).every((response) => response);
+        return this.options.types.map((type) => commands.updateAttributes(type, { textAlign: alignment })).some((response) => response);
       },
       unsetTextAlign: () => ({ commands }) => {
-        return this.options.types.map((type) => commands.resetAttributes(type, "textAlign")).every((response) => response);
+        return this.options.types.map((type) => commands.resetAttributes(type, "textAlign")).some((response) => response);
       },
       toggleTextAlign: (alignment) => ({ editor, commands }) => {
         if (!this.options.alignments.includes(alignment)) {

package/dist/esm/node_modules/@tiptap/extension-youtube/dist/index.js

@@ -108,7 +108,7 @@ var getEmbedUrlFromYoutubeUrl = (options) => {
     params.push(`rel=${rel}`);
   }
   if (params.length) {
-    outputUrl += `${matches[1] === "v" ? "?" : "&"}${params.join("&")}`;
+    outputUrl += `${matches[1] === "list" ? "&" : "?"}${params.join("&")}`;
   }
   return outputUrl;
 };

package/dist/esm/node_modules/@tiptap/extensions/dist/index.js

@@ -191,12 +191,17 @@ var Gapcursor = Extension.create({
     };
   }
 });
+var DEFAULT_DATA_ATTRIBUTE = "placeholder";
+function preparePlaceholderAttribute(attr) {
+  return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
+}
 var Placeholder = Extension.create({
   name: "placeholder",
   addOptions() {
     return {
       emptyEditorClass: "is-editor-empty",
       emptyNodeClass: "is-empty",
+      dataAttribute: DEFAULT_DATA_ATTRIBUTE,
       placeholder: "Write something \u2026",
       showOnlyWhenEditable: true,
       showOnlyCurrent: true,
@@ -204,6 +209,7 @@ var Placeholder = Extension.create({
     };
   },
   addProseMirrorPlugins() {
+    const dataAttribute = this.options.dataAttribute ? `data-${preparePlaceholderAttribute(this.options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
     return [
       new Plugin({
         key: new PluginKey("placeholder"),
@@ -226,7 +232,7 @@ var Placeholder = Extension.create({
                 }
                 const decoration = Decoration.node(pos, pos + node.nodeSize, {
                   class: classes.join(" "),
-                  "data-placeholder": typeof this.options.placeholder === "function" ? this.options.placeholder({
+                  [dataAttribute]: typeof this.options.placeholder === "function" ? this.options.placeholder({
                     editor: this.editor,
                     node,
                     pos,
@@ -286,7 +292,7 @@ var TrailingNode = Extension.create({
   addProseMirrorPlugins() {
     var _a;
     const plugin = new PluginKey(this.name);
-    const defaultNode = ((_a = this.editor.schema.topNodeType.contentMatch.defaultType) == null ? void 0 : _a.name) || this.options.node || "paragraph";
+    const defaultNode = this.options.node || ((_a = this.editor.schema.topNodeType.contentMatch.defaultType) == null ? void 0 : _a.name) || "paragraph";
     const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => (this.options.notAfter || []).concat(defaultNode).includes(node.name));
     return [
       new Plugin({
@@ -354,4 +360,4 @@ var UndoRedo = Extension.create({
   }
 });
 
-export { CharacterCount, Dropcursor, Gapcursor, Placeholder, TrailingNode, UndoRedo };
+export { CharacterCount, Dropcursor, Gapcursor, Placeholder, TrailingNode, UndoRedo, preparePlaceholderAttribute };

package/dist/esm/node_modules/@tiptap/react/dist/index.js

@@ -1,10 +1,10 @@
-import React__default, { createRef, memo, createContext, createElement, version, useContext, useRef, useState, useDebugValue, useEffect, forwardRef, useLayoutEffect } from 'react';
+import React__default, { createRef, memo, createContext, createElement, version, useContext, useState, useLayoutEffect, useEffect, useDebugValue, useRef, forwardRef, useMemo } from 'react';
 import ReactDOM__default, { flushSync } from 'react-dom';
 import { s as shimExports } from '../../../../_virtual/index2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { NodeView, getRenderedAttributes, Editor } from '../../core/dist/index.js';
-export { CommandManager, Extendable, Extension, InputRule, MappablePosition, Mark, Node, NodePos, PasteRule, ResizableNodeView, callOrReturn, canInsertNode, combineTransactionSteps, commands, createAtomBlockMarkdownSpec, createBlockMarkdownSpec, createChainableState, createDocument, createInlineMarkdownSpec, createMappablePosition, createNodeFromContent, createStyleTag, defaultBlockAt, deleteProps, elementFromString, extensions, findChildren, findChildrenInRange, findDuplicates, findParentNode, findParentNodeClosestToPos, flattenExtensions, fromString, getAttributes, getAttributesFromExtensions, getChangedRanges, getExtensionField, getHTMLFromFragment, getMarkAttributes, getMarkRange, getMarkType, getMarksBetween, getNodeAtPosition, getNodeAttributes, getNodeType, getSchema, getSchemaByResolvedExtensions, getSchemaTypeByName, getSchemaTypeNameByName, getSplittedAttributes, getText, getTextBetween, getTextContentFromNodes, getTextSerializersFromSchema, getUpdatedPosition, injectExtensionAttributesToParseRule, inputRulesPlugin, isActive, isAndroid, isAtEndOfNode, isAtStartOfNode, isEmptyObject, isExtensionRulesEnabled, isFunction, isList, isMacOS, isMarkActive, isNodeActive, isNodeEmpty, isNodeSelection, isNumber, isPlainObject, isRegExp, isSafari, isTextSelection, isiOS, markInputRule, markPasteRule, markdown, mergeAttributes, mergeDeep, minMax, nodeInputRule, nodePasteRule, objectIncludes, parseAttributes, parseIndentedBlocks, pasteRulesPlugin, posToDOMRect, removeDuplicates, renderNestedMarkdownContent, resolveExtensions, resolveFocusPosition, selectionToInsertionEnd, serializeAttributes, sortExtensions, splitExtensions, textblockTypeInputRule, updateMarkViewAttributes, wrappingInputRule } from '../../core/dist/index.js';
-import deepEqual from '../../../../_virtual/react.js';
+export { CommandManager, Extendable, Extension, InputRule, MappablePosition, Mark, Node, NodePos, PasteRule, ResizableNodeView, callOrReturn, canInsertNode, combineTransactionSteps, commands, createAtomBlockMarkdownSpec, createBlockMarkdownSpec, createChainableState, createDocument, createInlineMarkdownSpec, createMappablePosition, createNodeFromContent, createStyleTag, defaultBlockAt, deleteProps, elementFromString, escapeForRegEx, extensions, findChildren, findChildrenInRange, findDuplicates, findParentNode, findParentNodeClosestToPos, flattenExtensions, fromString, getAttributes, getAttributesFromExtensions, getChangedRanges, getExtensionField, getHTMLFromFragment, getMarkAttributes, getMarkRange, getMarkType, getMarksBetween, getNodeAtPosition, getNodeAttributes, getNodeType, getSchema, getSchemaByResolvedExtensions, getSchemaTypeByName, getSchemaTypeNameByName, getSplittedAttributes, getText, getTextBetween, getTextContentFromNodes, getTextSerializersFromSchema, getUpdatedPosition, injectExtensionAttributesToParseRule, inputRulesPlugin, isActive, isAndroid, isAtEndOfNode, isAtStartOfNode, isEmptyObject, isExtensionRulesEnabled, isFirefox, isFunction, isList, isMacOS, isMarkActive, isNodeActive, isNodeEmpty, isNodeSelection, isNumber, isPlainObject, isRegExp, isSafari, isTextSelection, isiOS, markInputRule, markPasteRule, markdown, mergeAttributes, mergeDeep, minMax, nodeInputRule, nodePasteRule, objectIncludes, parseAttributes, parseIndentedBlocks, pasteRulesPlugin, posToDOMRect, removeDuplicates, renderNestedMarkdownContent, resolveExtensions, resolveFocusPosition, selectionToInsertionEnd, serializeAttributes, sortExtensions, splitExtensions, textblockTypeInputRule, updateMarkViewAttributes, wrappingInputRule } from '../../core/dist/index.js';
+import { deepEqual } from '../../../fast-equals/dist/es/index.js';
 import { w as withSelectorExports } from '../../../../_virtual/with-selector.js';
 
 // src/Context.tsx
@@ -84,13 +84,14 @@ var PureEditorContent = class extends React__default.Component {
     this.init();
   }
   init() {
+    var _a;
     const editor = this.props.editor;
-    if (editor && !editor.isDestroyed && editor.options.element) {
+    if (editor && !editor.isDestroyed && ((_a = editor.view.dom) == null ? void 0 : _a.parentNode)) {
       if (editor.contentComponent) {
         return;
       }
       const element = this.editorContentRef.current;
-      element.append(editor.view.dom);
+      element.append(...editor.view.dom.parentNode.childNodes);
       editor.setOptions({
         element
       });
@@ -131,11 +132,11 @@ var PureEditorContent = class extends React__default.Component {
     }
     editor.contentComponent = null;
     try {
-      if (!((_a = editor.view.dom) == null ? void 0 : _a.firstChild)) {
+      if (!((_a = editor.view.dom) == null ? void 0 : _a.parentNode)) {
         return;
       }
       const newElement = document.createElement("div");
-      newElement.append(editor.view.dom);
+      newElement.append(...editor.view.dom.parentNode.childNodes);
       editor.setOptions({
         element: newElement
       });
@@ -608,6 +609,10 @@ var ReactRenderer = class {
    */
   constructor(component, { editor, props = {}, as = "div", className = "" }) {
     this.ref = null;
+    /**
+     * Flag to track if the renderer has been destroyed, preventing queued or asynchronous renders from executing after teardown.
+     */
+    this.destroyed = false;
     this.id = Math.floor(Math.random() * 4294967295).toString();
     this.component = component;
     this.editor = editor;
@@ -623,6 +628,9 @@ var ReactRenderer = class {
       });
     } else {
       queueMicrotask(() => {
+        if (this.destroyed) {
+          return;
+        }
         this.render();
       });
     }
@@ -632,6 +640,9 @@ var ReactRenderer = class {
    */
   render() {
     var _a;
+    if (this.destroyed) {
+      return;
+    }
     const Component = this.component;
     const props = this.props;
     const editor = this.editor;
@@ -653,6 +664,9 @@ var ReactRenderer = class {
    * Re-renders the React component with new props.
    */
   updateProps(props = {}) {
+    if (this.destroyed) {
+      return;
+    }
     this.props = {
       ...this.props,
       ...props
@@ -664,6 +678,7 @@ var ReactRenderer = class {
    */
   destroy() {
     var _a;
+    this.destroyed = true;
     const editor = this.editor;
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.removeRenderer(this.id);
     try {
@@ -689,6 +704,11 @@ React__default.createContext({
 var ReactNodeView = class extends NodeView {
   constructor(component, props, options) {
     super(component, props, options);
+    /**
+     * The requestAnimationFrame ID used for selection updates.
+     */
+    this.selectionRafId = null;
+    this.cachedExtensionWithSyncedStorage = null;
     if (!this.node.isLeaf) {
       if (this.options.contentDOMElementTag) {
         this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
@@ -705,6 +725,27 @@ var ReactNodeView = class extends NodeView {
       contentTarget.appendChild(this.contentDOMElement);
     }
   }
+  /**
+   * Returns a proxy of the extension that redirects storage access to the editor's mutable storage.
+   * This preserves the original prototype chain (instanceof checks, methods like configure/extend work).
+   * Cached to avoid proxy creation on every update.
+   */
+  get extensionWithSyncedStorage() {
+    if (!this.cachedExtensionWithSyncedStorage) {
+      const editor = this.editor;
+      const extension = this.extension;
+      this.cachedExtensionWithSyncedStorage = new Proxy(extension, {
+        get(target, prop, receiver) {
+          var _a;
+          if (prop === "storage") {
+            return (_a = editor.storage[extension.name]) != null ? _a : {};
+          }
+          return Reflect.get(target, prop, receiver);
+        }
+      });
+    }
+    return this.cachedExtensionWithSyncedStorage;
+  }
   /**
    * Setup the React component.
    * Called on initialization.
@@ -717,7 +758,7 @@ var ReactNodeView = class extends NodeView {
       innerDecorations: this.innerDecorations,
       view: this.view,
       selected: false,
-      extension: this.extension,
+      extension: this.extensionWithSyncedStorage,
       HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
@@ -786,22 +827,29 @@ var ReactNodeView = class extends NodeView {
    * If it is, call `selectNode`, otherwise call `deselectNode`.
    */
   handleSelectionUpdate() {
-    const { from, to } = this.editor.state.selection;
-    const pos = this.getPos();
-    if (typeof pos !== "number") {
-      return;
-    }
-    if (from <= pos && to >= pos + this.node.nodeSize) {
-      if (this.renderer.props.selected) {
+    if (this.selectionRafId) {
+      cancelAnimationFrame(this.selectionRafId);
+      this.selectionRafId = null;
+    }
+    this.selectionRafId = requestAnimationFrame(() => {
+      this.selectionRafId = null;
+      const { from, to } = this.editor.state.selection;
+      const pos = this.getPos();
+      if (typeof pos !== "number") {
         return;
       }
-      this.selectNode();
-    } else {
-      if (!this.renderer.props.selected) {
-        return;
+      if (from <= pos && to >= pos + this.node.nodeSize) {
+        if (this.renderer.props.selected) {
+          return;
+        }
+        this.selectNode();
+      } else {
+        if (!this.renderer.props.selected) {
+          return;
+        }
+        this.deselectNode();
       }
-      this.deselectNode();
-    }
+    });
   }
   /**
    * On update, update the React component.
@@ -831,7 +879,7 @@ var ReactNodeView = class extends NodeView {
         newDecorations: decorations,
         oldInnerDecorations,
         innerDecorations,
-        updateProps: () => rerenderComponent({ node, decorations, innerDecorations })
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage })
       });
     }
     if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
@@ -840,7 +888,7 @@ var ReactNodeView = class extends NodeView {
     this.node = node;
     this.decorations = decorations;
     this.innerDecorations = innerDecorations;
-    rerenderComponent({ node, decorations, innerDecorations });
+    rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage });
     return true;
   }
   /**
@@ -870,6 +918,10 @@ var ReactNodeView = class extends NodeView {
     this.renderer.destroy();
     this.editor.off("selectionUpdate", this.handleSelectionUpdate);
     this.contentDOMElement = null;
+    if (this.selectionRafId) {
+      cancelAnimationFrame(this.selectionRafId);
+      this.selectionRafId = null;
+    }
   }
   /**
    * Update the attributes of the top-level element that holds the React component.
@@ -897,5 +949,34 @@ function ReactNodeViewRenderer(component, options) {
     return new ReactNodeView(component, props, options);
   };
 }
+var TiptapContext = createContext({
+  get editor() {
+    throw new Error("useTiptap must be used within a <Tiptap> provider");
+  }
+});
+TiptapContext.displayName = "TiptapContext";
+var useTiptap = () => useContext(TiptapContext);
+function TiptapWrapper({ editor, instance, children }) {
+  const resolvedEditor = editor != null ? editor : instance;
+  if (!resolvedEditor) {
+    throw new Error("Tiptap: An editor instance is required. Pass a non-null `editor` prop.");
+  }
+  const tiptapContextValue = useMemo(() => ({ editor: resolvedEditor }), [resolvedEditor]);
+  const legacyContextValue = useMemo(() => ({ editor: resolvedEditor }), [resolvedEditor]);
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: legacyContextValue, children: /* @__PURE__ */ jsx(TiptapContext.Provider, { value: tiptapContextValue, children }) });
+}
+TiptapWrapper.displayName = "Tiptap";
+function TiptapContent({ ...rest }) {
+  const { editor } = useTiptap();
+  return /* @__PURE__ */ jsx(EditorContent, { editor, ...rest });
+}
+TiptapContent.displayName = "Tiptap.Content";
+Object.assign(TiptapWrapper, {
+  /**
+   * The Tiptap Content component that renders the EditorContent with the editor instance from the context.
+   * @see TiptapContent
+   */
+  Content: TiptapContent
+});
 
-export { Editor, EditorContent, EditorContext, NodeView, NodeViewContent, NodeViewWrapper, PureEditorContent, ReactNodeView, ReactNodeViewContext, ReactNodeViewRenderer, ReactRenderer, getRenderedAttributes, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { Editor, EditorContent, EditorContext, NodeView, NodeViewContent, NodeViewWrapper, PureEditorContent, ReactNodeView, ReactNodeViewContext, ReactNodeViewRenderer, ReactRenderer, TiptapContent, TiptapContext, TiptapWrapper, getRenderedAttributes, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap };