@liveblocks/react-tiptap 2.16.1-ai2 → 2.16.1-ai3

package/dist/utils.js

@@ -58,8 +58,8 @@ const mapFragment = (fragment, callback) => {
   });
   return model.Fragment.from(content);
 };
-function getDomRangeFromSelection(selection, editor) {
-  const { from, to } = typeof selection === "number" ? { from: selection, to: selection } : selection;
+function getDomRange(editor, range) {
+  const { from, to } = range;
   const fromPos = editor.view.domAtPos(from);
   const endPos = editor.view.domAtPos(to);
   const domRange = document.createRange();
@@ -73,9 +73,91 @@ function compareSelections(a, b) {
   }
   return a.eq(b);
 }
+const DOCUMENT_TEXT_TRUNCATION = "[\u2026]";
+const DOCUMENT_TEXT_BLOCK_SEPARATOR = " ";
+function getDocumentText(editor, maxLength = 1e4) {
+  const { selection, doc } = editor.state;
+  const selectionLength = selection.to - selection.from;
+  if (maxLength >= doc.content.size) {
+    return {
+      beforeSelection: doc.textBetween(
+        0,
+        selection.from,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      ),
+      selection: doc.textBetween(
+        selection.from,
+        selection.to,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      ),
+      afterSelection: doc.textBetween(
+        selection.to,
+        doc.content.size,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      )
+    };
+  } else if (selectionLength > maxLength) {
+    const selectionStart = doc.textBetween(
+      selection.from,
+      selection.from + Math.floor(maxLength / 2) - DOCUMENT_TEXT_TRUNCATION.length,
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    const selectionEnd = doc.textBetween(
+      selection.to - Math.floor(maxLength / 2) + DOCUMENT_TEXT_TRUNCATION.length,
+      selection.to,
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    return {
+      beforeSelection: "",
+      selection: `${selectionStart}${DOCUMENT_TEXT_TRUNCATION}${selectionEnd}`,
+      afterSelection: ""
+    };
+  } else {
+    let beforeLength = Math.min(
+      selection.from,
+      Math.floor((maxLength - selectionLength) / 2)
+    );
+    const afterLength = Math.min(
+      doc.content.size - selection.to,
+      maxLength - selectionLength - beforeLength
+    );
+    if (beforeLength + afterLength + selectionLength < maxLength) {
+      beforeLength = Math.min(
+        selection.from,
+        maxLength - selectionLength - afterLength
+      );
+    }
+    let beforeSelection = doc.textBetween(
+      Math.max(0, selection.from - beforeLength),
+      selection.from,
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    let afterSelection = doc.textBetween(
+      selection.to,
+      Math.min(doc.content.size, selection.to + afterLength),
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    if (selection.from - beforeLength > 0) {
+      beforeSelection = `${DOCUMENT_TEXT_TRUNCATION}${beforeSelection}`;
+    }
+    if (selection.to + afterLength < doc.content.size) {
+      afterSelection = `${afterSelection}${DOCUMENT_TEXT_TRUNCATION}`;
+    }
+    return {
+      beforeSelection,
+      selection: doc.textBetween(
+        selection.from,
+        selection.to,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      ),
+      afterSelection
+    };
+  }
+}
 
 exports.compareSelections = compareSelections;
-exports.getDomRangeFromSelection = getDomRangeFromSelection;
+exports.getDocumentText = getDocumentText;
+exports.getDomRange = getDomRange;
 exports.getMentionsFromNode = getMentionsFromNode;
 exports.getRangeFromRelativeSelections = getRangeFromRelativeSelections;
 exports.getRectFromCoords = getRectFromCoords;

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import type { ClientRectObject } from \"@floating-ui/react-dom\";\nimport type { Editor, Range } from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Fragment } from \"@tiptap/pm/model\";\nimport type { EditorState, Selection } from \"@tiptap/pm/state\";\nimport {\n  getRelativeSelection,\n  relativePositionToAbsolutePosition,\n  ySyncPluginKey,\n} from \"y-prosemirror\";\nimport type { RelativePosition } from \"yjs\";\n\nimport type { YSyncPluginState } from \"./types\";\nimport { LIVEBLOCKS_MENTION_TYPE } from \"./types\";\n\nexport const getRelativeSelectionFromState = (state: EditorState) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState) return null;\n  return getRelativeSelection(pluginState.binding, state);\n};\n\nexport const getRangeFromRelativeSelections = (\n  pos: { anchor: RelativePosition; head: RelativePosition },\n  state: EditorState\n) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState || !pluginState.binding) return { from: 0, to: 0 };\n  const { doc, type, mapping } = pluginState.binding;\n  const anchor =\n    relativePositionToAbsolutePosition(doc, type, pos.anchor, mapping) ?? 0;\n  const head =\n    relativePositionToAbsolutePosition(doc, type, pos.head, mapping) ?? 0;\n\n  const from = anchor > head ? head : anchor;\n  const to = anchor > head ? anchor : head;\n  return { from, to };\n};\n\nexport const getRectFromCoords = (coords: {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n}): ClientRectObject => {\n  return {\n    ...coords,\n    x: coords.left,\n    y: coords.top,\n    width: coords.right - coords.left,\n    height: coords.bottom - coords.top,\n  };\n};\n\nexport const getMentionsFromNode = (\n  node: ProseMirrorNode,\n  range: Range\n): { notificationId: string; userId: string }[] => {\n  const result: { notificationId: string; userId: string }[] = [];\n  node.nodesBetween(range.from, range.to, (child) => {\n    if (child.type.name === LIVEBLOCKS_MENTION_TYPE) {\n      const mention = child.attrs as { id?: string; notificationId?: string };\n      if (mention.id && mention.notificationId) {\n        result.push({\n          notificationId: mention.notificationId,\n          userId: mention.id,\n        });\n      }\n    }\n  });\n  return result;\n};\n\n// How to modify data in transformPasted, inspired by: https://discuss.prosemirror.net/t/modify-specific-node-on-copy-and-paste-in-clipboard/4901/4\nexport const mapFragment = (\n  fragment: Fragment,\n  callback: (\n    node: ProseMirrorNode\n  ) => ProseMirrorNode | ProseMirrorNode[] | Fragment | null\n): Fragment => {\n  const content: ProseMirrorNode[] = [];\n  fragment.forEach((node) => {\n    if (node.content.childCount > 0) {\n      content.push(\n        node.type.create(node.attrs, mapFragment(node.content, callback))\n      );\n      return;\n    }\n    content.push(callback(node) as ProseMirrorNode);\n  });\n\n  return Fragment.from(content);\n};\n\nexport function getDomRangeFromSelection(\n  selection: { from: number; to: number } | number,\n  editor: Editor\n) {\n  const { from, to } =\n    typeof selection === \"number\"\n      ? { from: selection, to: selection }\n      : selection;\n  const fromPos = editor.view.domAtPos(from);\n  const endPos = editor.view.domAtPos(to);\n\n  const domRange = document.createRange();\n  domRange.setStart(fromPos.node, fromPos.offset);\n  domRange.setEnd(endPos.node, endPos.offset);\n\n  return domRange;\n}\n\nexport function compareSelections(\n  a: Selection | null | undefined,\n  b: Selection | null | undefined\n) {\n  if (!a || !b) {\n    return false;\n  }\n\n  return a.eq(b);\n}\n"],"names":["ySyncPluginKey","getRelativeSelection","relativePositionToAbsolutePosition","LIVEBLOCKS_MENTION_TYPE","Fragment"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import type { ClientRectObject } from \"@floating-ui/react-dom\";\nimport type { Editor, Range } from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Fragment } from \"@tiptap/pm/model\";\nimport type { EditorState, Selection } from \"@tiptap/pm/state\";\nimport {\n  getRelativeSelection,\n  relativePositionToAbsolutePosition,\n  ySyncPluginKey,\n} from \"y-prosemirror\";\nimport type { RelativePosition } from \"yjs\";\n\nimport type { YSyncPluginState } from \"./types\";\nimport { LIVEBLOCKS_MENTION_TYPE } from \"./types\";\n\nexport const getRelativeSelectionFromState = (state: EditorState) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState) return null;\n  return getRelativeSelection(pluginState.binding, state);\n};\n\nexport const getRangeFromRelativeSelections = (\n  pos: { anchor: RelativePosition; head: RelativePosition },\n  state: EditorState\n) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState || !pluginState.binding) return { from: 0, to: 0 };\n  const { doc, type, mapping } = pluginState.binding;\n  const anchor =\n    relativePositionToAbsolutePosition(doc, type, pos.anchor, mapping) ?? 0;\n  const head =\n    relativePositionToAbsolutePosition(doc, type, pos.head, mapping) ?? 0;\n\n  const from = anchor > head ? head : anchor;\n  const to = anchor > head ? anchor : head;\n  return { from, to };\n};\n\nexport const getRectFromCoords = (coords: {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n}): ClientRectObject => {\n  return {\n    ...coords,\n    x: coords.left,\n    y: coords.top,\n    width: coords.right - coords.left,\n    height: coords.bottom - coords.top,\n  };\n};\n\nexport const getMentionsFromNode = (\n  node: ProseMirrorNode,\n  range: Range\n): { notificationId: string; userId: string }[] => {\n  const result: { notificationId: string; userId: string }[] = [];\n  node.nodesBetween(range.from, range.to, (child) => {\n    if (child.type.name === LIVEBLOCKS_MENTION_TYPE) {\n      const mention = child.attrs as { id?: string; notificationId?: string };\n      if (mention.id && mention.notificationId) {\n        result.push({\n          notificationId: mention.notificationId,\n          userId: mention.id,\n        });\n      }\n    }\n  });\n  return result;\n};\n\n// How to modify data in transformPasted, inspired by: https://discuss.prosemirror.net/t/modify-specific-node-on-copy-and-paste-in-clipboard/4901/4\nexport const mapFragment = (\n  fragment: Fragment,\n  callback: (\n    node: ProseMirrorNode\n  ) => ProseMirrorNode | ProseMirrorNode[] | Fragment | null\n): Fragment => {\n  const content: ProseMirrorNode[] = [];\n  fragment.forEach((node) => {\n    if (node.content.childCount > 0) {\n      content.push(\n        node.type.create(node.attrs, mapFragment(node.content, callback))\n      );\n      return;\n    }\n    content.push(callback(node) as ProseMirrorNode);\n  });\n\n  return Fragment.from(content);\n};\n\nexport function getDomRange(editor: Editor, range: Range) {\n  const { from, to } = range;\n  const fromPos = editor.view.domAtPos(from);\n  const endPos = editor.view.domAtPos(to);\n\n  const domRange = document.createRange();\n  domRange.setStart(fromPos.node, fromPos.offset);\n  domRange.setEnd(endPos.node, endPos.offset);\n\n  return domRange;\n}\n\nexport function compareSelections(\n  a: Selection | null | undefined,\n  b: Selection | null | undefined\n) {\n  if (!a || !b) {\n    return false;\n  }\n\n  return a.eq(b);\n}\n\nexport type DocumentText = {\n  beforeSelection: string;\n  selection: string;\n  afterSelection: string;\n};\n\nconst DOCUMENT_TEXT_TRUNCATION = \"[…]\";\nconst DOCUMENT_TEXT_BLOCK_SEPARATOR = \" \";\n\nexport function getDocumentText(\n  editor: Editor,\n  maxLength = 10_000\n): DocumentText {\n  const { selection, doc } = editor.state;\n\n  const selectionLength = selection.to - selection.from;\n\n  if (maxLength >= doc.content.size) {\n    // If the document is smaller than the maximum length, return the entire document\n    return {\n      beforeSelection: doc.textBetween(\n        0,\n        selection.from,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n      selection: doc.textBetween(\n        selection.from,\n        selection.to,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n      afterSelection: doc.textBetween(\n        selection.to,\n        doc.content.size,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n    };\n  } else if (selectionLength > maxLength) {\n    // If the selection is too large, truncate its middle to still allow continuations\n    const selectionStart = doc.textBetween(\n      selection.from,\n      selection.from +\n        Math.floor(maxLength / 2) -\n        DOCUMENT_TEXT_TRUNCATION.length,\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n    const selectionEnd = doc.textBetween(\n      selection.to -\n        Math.floor(maxLength / 2) +\n        DOCUMENT_TEXT_TRUNCATION.length,\n      selection.to,\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n\n    return {\n      beforeSelection: \"\",\n      selection: `${selectionStart}${DOCUMENT_TEXT_TRUNCATION}${selectionEnd}`,\n      afterSelection: \"\",\n    };\n  } else {\n    // If the selection is smaller than (or equal to) the maximum length, extract as much as possible from the document around the selection\n\n    // Start by taking as much as possible after the selection\n    let beforeLength = Math.min(\n      selection.from,\n      Math.floor((maxLength - selectionLength) / 2)\n    );\n    const afterLength = Math.min(\n      doc.content.size - selection.to,\n      maxLength - selectionLength - beforeLength\n    );\n\n    // If needed (e.g. the selection is near the end), compensate before the selection\n    if (beforeLength + afterLength + selectionLength < maxLength) {\n      beforeLength = Math.min(\n        selection.from,\n        maxLength - selectionLength - afterLength\n      );\n    }\n\n    let beforeSelection = doc.textBetween(\n      Math.max(0, selection.from - beforeLength),\n      selection.from,\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n    let afterSelection = doc.textBetween(\n      selection.to,\n      Math.min(doc.content.size, selection.to + afterLength),\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n\n    // Add leading truncation if `beforeSelection` doesn't contain the document's start\n    if (selection.from - beforeLength > 0) {\n      beforeSelection = `${DOCUMENT_TEXT_TRUNCATION}${beforeSelection}`;\n    }\n\n    // Add trailing truncation if `afterSelection` doesn't contain the document's end\n    if (selection.to + afterLength < doc.content.size) {\n      afterSelection = `${afterSelection}${DOCUMENT_TEXT_TRUNCATION}`;\n    }\n\n    return {\n      beforeSelection,\n      selection: doc.textBetween(\n        selection.from,\n        selection.to,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n      afterSelection,\n    };\n  }\n}\n"],"names":["ySyncPluginKey","getRelativeSelection","relativePositionToAbsolutePosition","LIVEBLOCKS_MENTION_TYPE","Fragment"],"mappings":"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"}

package/dist/utils.mjs

@@ -56,8 +56,8 @@ const mapFragment = (fragment, callback) => {
   });
   return Fragment.from(content);
 };
-function getDomRangeFromSelection(selection, editor) {
-  const { from, to } = typeof selection === "number" ? { from: selection, to: selection } : selection;
+function getDomRange(editor, range) {
+  const { from, to } = range;
   const fromPos = editor.view.domAtPos(from);
   const endPos = editor.view.domAtPos(to);
   const domRange = document.createRange();
@@ -71,6 +71,87 @@ function compareSelections(a, b) {
   }
   return a.eq(b);
 }
+const DOCUMENT_TEXT_TRUNCATION = "[\u2026]";
+const DOCUMENT_TEXT_BLOCK_SEPARATOR = " ";
+function getDocumentText(editor, maxLength = 1e4) {
+  const { selection, doc } = editor.state;
+  const selectionLength = selection.to - selection.from;
+  if (maxLength >= doc.content.size) {
+    return {
+      beforeSelection: doc.textBetween(
+        0,
+        selection.from,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      ),
+      selection: doc.textBetween(
+        selection.from,
+        selection.to,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      ),
+      afterSelection: doc.textBetween(
+        selection.to,
+        doc.content.size,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      )
+    };
+  } else if (selectionLength > maxLength) {
+    const selectionStart = doc.textBetween(
+      selection.from,
+      selection.from + Math.floor(maxLength / 2) - DOCUMENT_TEXT_TRUNCATION.length,
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    const selectionEnd = doc.textBetween(
+      selection.to - Math.floor(maxLength / 2) + DOCUMENT_TEXT_TRUNCATION.length,
+      selection.to,
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    return {
+      beforeSelection: "",
+      selection: `${selectionStart}${DOCUMENT_TEXT_TRUNCATION}${selectionEnd}`,
+      afterSelection: ""
+    };
+  } else {
+    let beforeLength = Math.min(
+      selection.from,
+      Math.floor((maxLength - selectionLength) / 2)
+    );
+    const afterLength = Math.min(
+      doc.content.size - selection.to,
+      maxLength - selectionLength - beforeLength
+    );
+    if (beforeLength + afterLength + selectionLength < maxLength) {
+      beforeLength = Math.min(
+        selection.from,
+        maxLength - selectionLength - afterLength
+      );
+    }
+    let beforeSelection = doc.textBetween(
+      Math.max(0, selection.from - beforeLength),
+      selection.from,
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    let afterSelection = doc.textBetween(
+      selection.to,
+      Math.min(doc.content.size, selection.to + afterLength),
+      DOCUMENT_TEXT_BLOCK_SEPARATOR
+    );
+    if (selection.from - beforeLength > 0) {
+      beforeSelection = `${DOCUMENT_TEXT_TRUNCATION}${beforeSelection}`;
+    }
+    if (selection.to + afterLength < doc.content.size) {
+      afterSelection = `${afterSelection}${DOCUMENT_TEXT_TRUNCATION}`;
+    }
+    return {
+      beforeSelection,
+      selection: doc.textBetween(
+        selection.from,
+        selection.to,
+        DOCUMENT_TEXT_BLOCK_SEPARATOR
+      ),
+      afterSelection
+    };
+  }
+}
 
-export { compareSelections, getDomRangeFromSelection, getMentionsFromNode, getRangeFromRelativeSelections, getRectFromCoords, getRelativeSelectionFromState, mapFragment };
+export { compareSelections, getDocumentText, getDomRange, getMentionsFromNode, getRangeFromRelativeSelections, getRectFromCoords, getRelativeSelectionFromState, mapFragment };
 //# sourceMappingURL=utils.mjs.map

package/dist/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../src/utils.ts"],"sourcesContent":["import type { ClientRectObject } from \"@floating-ui/react-dom\";\nimport type { Editor, Range } from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Fragment } from \"@tiptap/pm/model\";\nimport type { EditorState, Selection } from \"@tiptap/pm/state\";\nimport {\n  getRelativeSelection,\n  relativePositionToAbsolutePosition,\n  ySyncPluginKey,\n} from \"y-prosemirror\";\nimport type { RelativePosition } from \"yjs\";\n\nimport type { YSyncPluginState } from \"./types\";\nimport { LIVEBLOCKS_MENTION_TYPE } from \"./types\";\n\nexport const getRelativeSelectionFromState = (state: EditorState) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState) return null;\n  return getRelativeSelection(pluginState.binding, state);\n};\n\nexport const getRangeFromRelativeSelections = (\n  pos: { anchor: RelativePosition; head: RelativePosition },\n  state: EditorState\n) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState || !pluginState.binding) return { from: 0, to: 0 };\n  const { doc, type, mapping } = pluginState.binding;\n  const anchor =\n    relativePositionToAbsolutePosition(doc, type, pos.anchor, mapping) ?? 0;\n  const head =\n    relativePositionToAbsolutePosition(doc, type, pos.head, mapping) ?? 0;\n\n  const from = anchor > head ? head : anchor;\n  const to = anchor > head ? anchor : head;\n  return { from, to };\n};\n\nexport const getRectFromCoords = (coords: {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n}): ClientRectObject => {\n  return {\n    ...coords,\n    x: coords.left,\n    y: coords.top,\n    width: coords.right - coords.left,\n    height: coords.bottom - coords.top,\n  };\n};\n\nexport const getMentionsFromNode = (\n  node: ProseMirrorNode,\n  range: Range\n): { notificationId: string; userId: string }[] => {\n  const result: { notificationId: string; userId: string }[] = [];\n  node.nodesBetween(range.from, range.to, (child) => {\n    if (child.type.name === LIVEBLOCKS_MENTION_TYPE) {\n      const mention = child.attrs as { id?: string; notificationId?: string };\n      if (mention.id && mention.notificationId) {\n        result.push({\n          notificationId: mention.notificationId,\n          userId: mention.id,\n        });\n      }\n    }\n  });\n  return result;\n};\n\n// How to modify data in transformPasted, inspired by: https://discuss.prosemirror.net/t/modify-specific-node-on-copy-and-paste-in-clipboard/4901/4\nexport const mapFragment = (\n  fragment: Fragment,\n  callback: (\n    node: ProseMirrorNode\n  ) => ProseMirrorNode | ProseMirrorNode[] | Fragment | null\n): Fragment => {\n  const content: ProseMirrorNode[] = [];\n  fragment.forEach((node) => {\n    if (node.content.childCount > 0) {\n      content.push(\n        node.type.create(node.attrs, mapFragment(node.content, callback))\n      );\n      return;\n    }\n    content.push(callback(node) as ProseMirrorNode);\n  });\n\n  return Fragment.from(content);\n};\n\nexport function getDomRangeFromSelection(\n  selection: { from: number; to: number } | number,\n  editor: Editor\n) {\n  const { from, to } =\n    typeof selection === \"number\"\n      ? { from: selection, to: selection }\n      : selection;\n  const fromPos = editor.view.domAtPos(from);\n  const endPos = editor.view.domAtPos(to);\n\n  const domRange = document.createRange();\n  domRange.setStart(fromPos.node, fromPos.offset);\n  domRange.setEnd(endPos.node, endPos.offset);\n\n  return domRange;\n}\n\nexport function compareSelections(\n  a: Selection | null | undefined,\n  b: Selection | null | undefined\n) {\n  if (!a || !b) {\n    return false;\n  }\n\n  return a.eq(b);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.mjs","sources":["../src/utils.ts"],"sourcesContent":["import type { ClientRectObject } from \"@floating-ui/react-dom\";\nimport type { Editor, Range } from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Fragment } from \"@tiptap/pm/model\";\nimport type { EditorState, Selection } from \"@tiptap/pm/state\";\nimport {\n  getRelativeSelection,\n  relativePositionToAbsolutePosition,\n  ySyncPluginKey,\n} from \"y-prosemirror\";\nimport type { RelativePosition } from \"yjs\";\n\nimport type { YSyncPluginState } from \"./types\";\nimport { LIVEBLOCKS_MENTION_TYPE } from \"./types\";\n\nexport const getRelativeSelectionFromState = (state: EditorState) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState) return null;\n  return getRelativeSelection(pluginState.binding, state);\n};\n\nexport const getRangeFromRelativeSelections = (\n  pos: { anchor: RelativePosition; head: RelativePosition },\n  state: EditorState\n) => {\n  const pluginState = ySyncPluginKey.getState(state) as YSyncPluginState;\n  if (!pluginState || !pluginState.binding) return { from: 0, to: 0 };\n  const { doc, type, mapping } = pluginState.binding;\n  const anchor =\n    relativePositionToAbsolutePosition(doc, type, pos.anchor, mapping) ?? 0;\n  const head =\n    relativePositionToAbsolutePosition(doc, type, pos.head, mapping) ?? 0;\n\n  const from = anchor > head ? head : anchor;\n  const to = anchor > head ? anchor : head;\n  return { from, to };\n};\n\nexport const getRectFromCoords = (coords: {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n}): ClientRectObject => {\n  return {\n    ...coords,\n    x: coords.left,\n    y: coords.top,\n    width: coords.right - coords.left,\n    height: coords.bottom - coords.top,\n  };\n};\n\nexport const getMentionsFromNode = (\n  node: ProseMirrorNode,\n  range: Range\n): { notificationId: string; userId: string }[] => {\n  const result: { notificationId: string; userId: string }[] = [];\n  node.nodesBetween(range.from, range.to, (child) => {\n    if (child.type.name === LIVEBLOCKS_MENTION_TYPE) {\n      const mention = child.attrs as { id?: string; notificationId?: string };\n      if (mention.id && mention.notificationId) {\n        result.push({\n          notificationId: mention.notificationId,\n          userId: mention.id,\n        });\n      }\n    }\n  });\n  return result;\n};\n\n// How to modify data in transformPasted, inspired by: https://discuss.prosemirror.net/t/modify-specific-node-on-copy-and-paste-in-clipboard/4901/4\nexport const mapFragment = (\n  fragment: Fragment,\n  callback: (\n    node: ProseMirrorNode\n  ) => ProseMirrorNode | ProseMirrorNode[] | Fragment | null\n): Fragment => {\n  const content: ProseMirrorNode[] = [];\n  fragment.forEach((node) => {\n    if (node.content.childCount > 0) {\n      content.push(\n        node.type.create(node.attrs, mapFragment(node.content, callback))\n      );\n      return;\n    }\n    content.push(callback(node) as ProseMirrorNode);\n  });\n\n  return Fragment.from(content);\n};\n\nexport function getDomRange(editor: Editor, range: Range) {\n  const { from, to } = range;\n  const fromPos = editor.view.domAtPos(from);\n  const endPos = editor.view.domAtPos(to);\n\n  const domRange = document.createRange();\n  domRange.setStart(fromPos.node, fromPos.offset);\n  domRange.setEnd(endPos.node, endPos.offset);\n\n  return domRange;\n}\n\nexport function compareSelections(\n  a: Selection | null | undefined,\n  b: Selection | null | undefined\n) {\n  if (!a || !b) {\n    return false;\n  }\n\n  return a.eq(b);\n}\n\nexport type DocumentText = {\n  beforeSelection: string;\n  selection: string;\n  afterSelection: string;\n};\n\nconst DOCUMENT_TEXT_TRUNCATION = \"[…]\";\nconst DOCUMENT_TEXT_BLOCK_SEPARATOR = \" \";\n\nexport function getDocumentText(\n  editor: Editor,\n  maxLength = 10_000\n): DocumentText {\n  const { selection, doc } = editor.state;\n\n  const selectionLength = selection.to - selection.from;\n\n  if (maxLength >= doc.content.size) {\n    // If the document is smaller than the maximum length, return the entire document\n    return {\n      beforeSelection: doc.textBetween(\n        0,\n        selection.from,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n      selection: doc.textBetween(\n        selection.from,\n        selection.to,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n      afterSelection: doc.textBetween(\n        selection.to,\n        doc.content.size,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n    };\n  } else if (selectionLength > maxLength) {\n    // If the selection is too large, truncate its middle to still allow continuations\n    const selectionStart = doc.textBetween(\n      selection.from,\n      selection.from +\n        Math.floor(maxLength / 2) -\n        DOCUMENT_TEXT_TRUNCATION.length,\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n    const selectionEnd = doc.textBetween(\n      selection.to -\n        Math.floor(maxLength / 2) +\n        DOCUMENT_TEXT_TRUNCATION.length,\n      selection.to,\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n\n    return {\n      beforeSelection: \"\",\n      selection: `${selectionStart}${DOCUMENT_TEXT_TRUNCATION}${selectionEnd}`,\n      afterSelection: \"\",\n    };\n  } else {\n    // If the selection is smaller than (or equal to) the maximum length, extract as much as possible from the document around the selection\n\n    // Start by taking as much as possible after the selection\n    let beforeLength = Math.min(\n      selection.from,\n      Math.floor((maxLength - selectionLength) / 2)\n    );\n    const afterLength = Math.min(\n      doc.content.size - selection.to,\n      maxLength - selectionLength - beforeLength\n    );\n\n    // If needed (e.g. the selection is near the end), compensate before the selection\n    if (beforeLength + afterLength + selectionLength < maxLength) {\n      beforeLength = Math.min(\n        selection.from,\n        maxLength - selectionLength - afterLength\n      );\n    }\n\n    let beforeSelection = doc.textBetween(\n      Math.max(0, selection.from - beforeLength),\n      selection.from,\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n    let afterSelection = doc.textBetween(\n      selection.to,\n      Math.min(doc.content.size, selection.to + afterLength),\n      DOCUMENT_TEXT_BLOCK_SEPARATOR\n    );\n\n    // Add leading truncation if `beforeSelection` doesn't contain the document's start\n    if (selection.from - beforeLength > 0) {\n      beforeSelection = `${DOCUMENT_TEXT_TRUNCATION}${beforeSelection}`;\n    }\n\n    // Add trailing truncation if `afterSelection` doesn't contain the document's end\n    if (selection.to + afterLength < doc.content.size) {\n      afterSelection = `${afterSelection}${DOCUMENT_TEXT_TRUNCATION}`;\n    }\n\n    return {\n      beforeSelection,\n      selection: doc.textBetween(\n        selection.from,\n        selection.to,\n        DOCUMENT_TEXT_BLOCK_SEPARATOR\n      ),\n      afterSelection,\n    };\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-tiptap";
-const PKG_VERSION = typeof "2.16.1-ai2" === "string" && "2.16.1-ai2";
+const PKG_VERSION = typeof "2.16.1-ai3" === "string" && "2.16.1-ai3";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-tiptap";
-const PKG_VERSION = typeof "2.16.1-ai2" === "string" && "2.16.1-ai2";
+const PKG_VERSION = typeof "2.16.1-ai3" === "string" && "2.16.1-ai3";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-tiptap",
-  "version": "2.16.1-ai2",
+  "version": "2.16.1-ai3",
   "description": "A tiptap react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -42,11 +42,11 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.16.1-ai2",
-    "@liveblocks/core": "2.16.1-ai2",
-    "@liveblocks/react": "2.16.1-ai2",
-    "@liveblocks/react-ui": "2.16.1-ai2",
-    "@liveblocks/yjs": "2.16.1-ai2",
+    "@liveblocks/client": "2.16.1-ai3",
+    "@liveblocks/core": "2.16.1-ai3",
+    "@liveblocks/react": "2.16.1-ai3",
+    "@liveblocks/react-ui": "2.16.1-ai3",
+    "@liveblocks/yjs": "2.16.1-ai3",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@tiptap/core": "^2.7.2",

package/src/styles/index.css

@@ -276,8 +276,16 @@
 }
 
 .lb-tiptap-ai-toolbar-portal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   inline-size: var(--lb-tiptap-editor-width);
   outline: none;
+  pointer-events: none;
+
+  &:where([data-liveblocks-ai-toolbar-flip]) {
+    flex-direction: column-reverse;
+  }
 }
 
 .lb-tiptap-ai-toolbar-container {
@@ -294,38 +302,16 @@
   display: flex;
   flex-direction: column;
   color: var(--lb-foreground);
+  pointer-events: auto;
 }
 
-.lb-tiptap-ai-toolbar-output-container {
-  display: flex;
-  flex-direction: column;
-  border-block-end: 1px solid var(--lb-foreground-subtle);
-}
-
-.lb-tiptap-ai-toolbar-output {
-  &::before {
-    content: "\FEFF";
-    display: inline-block;
-    vertical-align: middle;
-    user-select: none;
-  }
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  :where(.collaboration-cursor__label) {
-    display: flex;
-    gap: 0.1875em;
-    align-items: center;
-
-    :where(.lb-icon-container) {
-      margin-inline-start: -0.125em;
+.lb-tiptap-ai-toolbar-output-container,
+.lb-tiptap-ai-toolbar-content {
+  max-block-size: calc(6lh + 2 * var(--lb-tiptap-ai-toolbar-padding));
 
-      &,
-      & svg {
-        inline-size: 1em;
-        block-size: 1em;
-      }
-    }
-  }
+  /* overflow-block: auto; doesn't work as expected */
+  /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+  overflow-y: auto;
 }
 
 .lb-tiptap-ai-toolbar-content {
@@ -333,30 +319,26 @@
   grid-template-columns: auto 1fr auto;
   inline-size: 100%;
   min-inline-size: 0;
+  padding: var(--lb-tiptap-ai-toolbar-padding);
   outline: none;
 }
 
-.lb-tiptap-ai-toolbar-output-container,
-.lb-tiptap-ai-toolbar-content {
-  max-block-size: calc(6lh + 2 * var(--lb-tiptap-ai-toolbar-padding));
-  padding: var(--lb-tiptap-ai-toolbar-padding);
+.lb-tiptap-ai-toolbar-output-container {
+  --lb-line-height-crop: calc(1lh - 1em) / -2;
 
-  /* overflow-block: auto; doesn't work as expected */
-  /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--lb-spacing) + var(--lb-line-height-crop))
+    var(--lb-spacing);
+  border-block-end: 1px solid var(--lb-foreground-subtle);
 }
 
-.lb-tiptap-ai-toolbar-custom-prompt-container {
-  position: relative;
-  z-index: auto;
-  display: grid;
-  margin-block: calc(-1 * var(--lb-tiptap-ai-toolbar-padding));
-  line-height: $lb-button-size;
-
+.lb-tiptap-ai-toolbar-output {
   &::before {
-    /* The space is important when handling new lines */
-    content: attr(data-value) " ";
-    visibility: hidden;
+    content: "\FEFF";
+    display: inline-block;
+    vertical-align: middle;
+    user-select: none;
   }
 }
 
@@ -394,6 +376,19 @@
   }
 }
 
+.lb-tiptap-ai-toolbar-custom-prompt-container {
+  position: relative;
+  z-index: auto;
+  display: grid;
+  margin-block: calc(-1 * var(--lb-tiptap-ai-toolbar-padding));
+
+  &::before {
+    /* The space is important when handling new lines */
+    content: attr(data-value) " ";
+    visibility: hidden;
+  }
+}
+
 .lb-tiptap-ai-toolbar-custom-prompt,
 .lb-tiptap-ai-toolbar-custom-prompt-container::before {
   /* Overlap the textarea and its value to auto-size it */
@@ -401,12 +396,42 @@
   box-sizing: inherit;
   inline-size: 100%;
   min-inline-size: 0;
-  padding: var(--lb-tiptap-ai-toolbar-padding);
+  padding: calc(
+      var(--lb-tiptap-ai-toolbar-padding) + ($lb-button-size - 1lh) / 2
+    )
+    var(--lb-tiptap-ai-toolbar-padding);
   font: inherit;
   letter-spacing: inherit;
   white-space: pre-wrap;
 }
 
+.lb-tiptap-ai-toolbar-error {
+  --lb-dynamic-background: var(--lb-background-destructive-subtle);
+
+  position: relative;
+  display: flex;
+  gap: calc(0.5 * var(--lb-spacing));
+  align-items: center;
+  padding: var(--lb-tiptap-ai-toolbar-padding);
+  background: var(--lb-dynamic-background);
+  color: var(--lb-destructive);
+  font-size: 0.875em;
+  text-wrap: balance;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-block-start: 1px solid var(--lb-destructive-moderate);
+    opacity: 0.35;
+    pointer-events: none;
+  }
+
+  :where(.lb-icon-container) {
+    color: var(--lb-destructive-secondary);
+  }
+}
+
 .lb-tiptap-ai-toolbar-halo {
   --lb-tiptap-ai-toolbar-halo-blur: 16px;
   --lb-tiptap-ai-toolbar-halo-outset: 8px;
@@ -422,6 +447,8 @@
   pointer-events: none;
   transition-duration: 1s;
   transition-property: opacity;
+  animation: lb-animation-ai-toolbar-halo-scale-in 1s
+    cubic-bezier(0.165, 0.84, 0.44, 1) both;
 
   &:where(:not([data-active])) {
     opacity: 0.5;
@@ -440,7 +467,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    opacity: 0.25;
+    opacity: 0.175;
     animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
     animation-iteration-count: infinite;
   }
@@ -474,8 +501,7 @@
       transparent 80%
     );
     background-position: top left;
-    background-size: 800px 100%;
-    background-repeat: space;
+    background-size: 75% 100%;
     animation-name: lb-animation-ai-toolbar-halo-horizontal;
     animation-duration: 6s;
     animation-delay: -2s;
@@ -484,8 +510,6 @@
 }
 
 .lb-tiptap-ai-toolbar-halo-vertical {
-  opacity: 0;
-
   &::before {
     inset-block-start: -50%;
     inline-size: 100%;
@@ -526,20 +550,20 @@
 }
 
 .lb-tiptap-ai-toolbar-thinking {
-  display: flex;
-  flex: 1 0 auto;
-  align-items: center;
+  @include truncate;
+
+  align-self: center;
   min-inline-size: 0;
+  max-inline-size: fit-content;
   padding-inline: var(--lb-tiptap-ai-toolbar-padding);
-  color: var(--lb-foreground-moderate);
-  cursor: wait;
+  color: var(--lb-foreground-tertiary);
   user-select: none;
-  animation: lb-animation-shimmer 8s linear infinite;
+  animation: lb-animation-ai-toolbar-shimmer 8s linear infinite;
 }
 
 .lb-tiptap-ai-toolbar-dropdown {
   inline-size: min(250px, 100%);
-  margin-block-start: 8px;
+  pointer-events: auto;
 }
 
 /*************************************
@@ -600,6 +624,38 @@
  *            Animations             *
  *************************************/
 
+@keyframes lb-animation-ai-toolbar-shimmer {
+  from,
+  to {
+    mask-image: linear-gradient(
+      90deg,
+      #000 8%,
+      rgb(0 0 0 / 50%) 20%,
+      rgb(0 0 0 / 50%) 80%,
+      #000 92%
+    );
+    mask-size: 400% 100%;
+  }
+
+  from {
+    mask-position: 200% 0;
+  }
+
+  to {
+    mask-position: -200% 0;
+  }
+}
+
+@keyframes lb-animation-ai-toolbar-halo-scale-in {
+  from {
+    transform: scale(0.5);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
 @keyframes lb-animation-ai-toolbar-halo-horizontal {
   from {
     transform: translateX(-50%);

package/src/styles/utils.css

@@ -15,3 +15,9 @@
     display: none;
   }
 }
+
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}