@liveblocks/react-tiptap 0.0.1 → 2.8.3-tiptap1

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import type { ClientRectObject } from \"@floating-ui/react-dom\";\nimport type { Range } from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Fragment } from \"@tiptap/pm/model\";\n\nimport { LIVEBLOCKS_MENTION_TYPE } from \"./types\";\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"],"names":["LIVEBLOCKS_MENTION_TYPE","Fragment"],"mappings":";;;;;AAOa,MAAA,iBAAA,GAAoB,CAAC,MAKV,KAAA;AACtB,EAAO,OAAA;AAAA,IACL,GAAG,MAAA;AAAA,IACH,GAAG,MAAO,CAAA,IAAA;AAAA,IACV,GAAG,MAAO,CAAA,GAAA;AAAA,IACV,KAAA,EAAO,MAAO,CAAA,KAAA,GAAQ,MAAO,CAAA,IAAA;AAAA,IAC7B,MAAA,EAAQ,MAAO,CAAA,MAAA,GAAS,MAAO,CAAA,GAAA;AAAA,GACjC,CAAA;AACF,EAAA;AAEa,MAAA,mBAAA,GAAsB,CACjC,IAAA,EACA,KACiD,KAAA;AACjD,EAAA,MAAM,SAAuD,EAAC,CAAA;AAC9D,EAAA,IAAA,CAAK,aAAa,KAAM,CAAA,IAAA,EAAM,KAAM,CAAA,EAAA,EAAI,CAAC,KAAU,KAAA;AACjD,IAAI,IAAA,KAAA,CAAM,IAAK,CAAA,IAAA,KAASA,6BAAyB,EAAA;AAC/C,MAAA,MAAM,UAAU,KAAM,CAAA,KAAA,CAAA;AACtB,MAAI,IAAA,OAAA,CAAQ,EAAM,IAAA,OAAA,CAAQ,cAAgB,EAAA;AACxC,QAAA,MAAA,CAAO,IAAK,CAAA;AAAA,UACV,gBAAgB,OAAQ,CAAA,cAAA;AAAA,UACxB,QAAQ,OAAQ,CAAA,EAAA;AAAA,SACjB,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,MAAA,CAAA;AACT,EAAA;AAGa,MAAA,WAAA,GAAc,CACzB,QAAA,EACA,QAGa,KAAA;AACb,EAAA,MAAM,UAA6B,EAAC,CAAA;AACpC,EAAS,QAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACzB,IAAI,IAAA,IAAA,CAAK,OAAQ,CAAA,UAAA,GAAa,CAAG,EAAA;AAC/B,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,IAAA,CAAK,KAAK,MAAO,CAAA,IAAA,CAAK,OAAO,WAAY,CAAA,IAAA,CAAK,OAAS,EAAA,QAAQ,CAAC,CAAA;AAAA,OAClE,CAAA;AACA,MAAA,OAAA;AAAA,KACF;AACA,IAAQ,OAAA,CAAA,IAAA,CAAK,QAAS,CAAA,IAAI,CAAoB,CAAA,CAAA;AAAA,GAC/C,CAAA,CAAA;AAED,EAAO,OAAAC,cAAA,CAAS,KAAK,OAAO,CAAA,CAAA;AAC9B;;;;;;"}

package/dist/utils.mjs

@@ -0,0 +1,43 @@
+import { Fragment } from '@tiptap/pm/model';
+import { LIVEBLOCKS_MENTION_TYPE } from './types.mjs';
+
+const getRectFromCoords = (coords) => {
+  return {
+    ...coords,
+    x: coords.left,
+    y: coords.top,
+    width: coords.right - coords.left,
+    height: coords.bottom - coords.top
+  };
+};
+const getMentionsFromNode = (node, range) => {
+  const result = [];
+  node.nodesBetween(range.from, range.to, (child) => {
+    if (child.type.name === LIVEBLOCKS_MENTION_TYPE) {
+      const mention = child.attrs;
+      if (mention.id && mention.notificationId) {
+        result.push({
+          notificationId: mention.notificationId,
+          userId: mention.id
+        });
+      }
+    }
+  });
+  return result;
+};
+const mapFragment = (fragment, callback) => {
+  const content = [];
+  fragment.forEach((node) => {
+    if (node.content.childCount > 0) {
+      content.push(
+        node.type.create(node.attrs, mapFragment(node.content, callback))
+      );
+      return;
+    }
+    content.push(callback(node));
+  });
+  return Fragment.from(content);
+};
+
+export { getMentionsFromNode, getRectFromCoords, mapFragment };
+//# sourceMappingURL=utils.mjs.map

package/dist/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../src/utils.ts"],"sourcesContent":["import type { ClientRectObject } from \"@floating-ui/react-dom\";\nimport type { Range } from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Fragment } from \"@tiptap/pm/model\";\n\nimport { LIVEBLOCKS_MENTION_TYPE } from \"./types\";\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"],"names":[],"mappings":";;;AAOa,MAAA,iBAAA,GAAoB,CAAC,MAKV,KAAA;AACtB,EAAO,OAAA;AAAA,IACL,GAAG,MAAA;AAAA,IACH,GAAG,MAAO,CAAA,IAAA;AAAA,IACV,GAAG,MAAO,CAAA,GAAA;AAAA,IACV,KAAA,EAAO,MAAO,CAAA,KAAA,GAAQ,MAAO,CAAA,IAAA;AAAA,IAC7B,MAAA,EAAQ,MAAO,CAAA,MAAA,GAAS,MAAO,CAAA,GAAA;AAAA,GACjC,CAAA;AACF,EAAA;AAEa,MAAA,mBAAA,GAAsB,CACjC,IAAA,EACA,KACiD,KAAA;AACjD,EAAA,MAAM,SAAuD,EAAC,CAAA;AAC9D,EAAA,IAAA,CAAK,aAAa,KAAM,CAAA,IAAA,EAAM,KAAM,CAAA,EAAA,EAAI,CAAC,KAAU,KAAA;AACjD,IAAI,IAAA,KAAA,CAAM,IAAK,CAAA,IAAA,KAAS,uBAAyB,EAAA;AAC/C,MAAA,MAAM,UAAU,KAAM,CAAA,KAAA,CAAA;AACtB,MAAI,IAAA,OAAA,CAAQ,EAAM,IAAA,OAAA,CAAQ,cAAgB,EAAA;AACxC,QAAA,MAAA,CAAO,IAAK,CAAA;AAAA,UACV,gBAAgB,OAAQ,CAAA,cAAA;AAAA,UACxB,QAAQ,OAAQ,CAAA,EAAA;AAAA,SACjB,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACD,EAAO,OAAA,MAAA,CAAA;AACT,EAAA;AAGa,MAAA,WAAA,GAAc,CACzB,QAAA,EACA,QAGa,KAAA;AACb,EAAA,MAAM,UAA6B,EAAC,CAAA;AACpC,EAAS,QAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACzB,IAAI,IAAA,IAAA,CAAK,OAAQ,CAAA,UAAA,GAAa,CAAG,EAAA;AAC/B,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,IAAA,CAAK,KAAK,MAAO,CAAA,IAAA,CAAK,OAAO,WAAY,CAAA,IAAA,CAAK,OAAS,EAAA,QAAQ,CAAC,CAAA;AAAA,OAClE,CAAA;AACA,MAAA,OAAA;AAAA,KACF;AACA,IAAQ,OAAA,CAAA,IAAA,CAAK,QAAS,CAAA,IAAI,CAAoB,CAAA,CAAA;AAAA,GAC/C,CAAA,CAAA;AAED,EAAO,OAAA,QAAA,CAAS,KAAK,OAAO,CAAA,CAAA;AAC9B;;;;"}

package/dist/version-history/HistoryVersionPreview.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var react = require('@liveblocks/react');
+var reactUi = require('@liveblocks/react-ui');
+var _private = require('@liveblocks/react-ui/_private');
+var react$1 = require('@tiptap/react');
+var React = require('react');
+var yProsemirror = require('y-prosemirror');
+var yjs = require('yjs');
+var classnames = require('../classnames.js');
+
+const AUTHORS_TRUNCATE = 3;
+const HistoryVersionPreview = React.forwardRef(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {
+  const $ = reactUi.useOverrides();
+  const { isLoading, data, error } = react.useHistoryVersionData(version.id);
+  const previewEditor = react$1.useEditor({
+    editable: false,
+    extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== "extension")
+  });
+  React.useEffect(() => {
+    if (data && previewEditor) {
+      const doc = new yjs.Doc();
+      yjs.applyUpdate(doc, data);
+      const root = doc.getXmlFragment("default");
+      const node = yProsemirror.yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);
+      previewEditor.commands.setContent(node.toJSON());
+    }
+  }, [data, previewEditor, parentEditor]);
+  const restore = React.useCallback(() => {
+    parentEditor.commands.setContent(previewEditor?.getJSON() ?? "");
+    onVersionRestore?.(version);
+  }, [onVersionRestore, parentEditor, previewEditor, version]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: classnames.classNames(
+      "lb-root lb-history-version-preview lb-tiptap-version-preview",
+      className
+    ),
+    ref: forwardedRef
+  }, isLoading ? /* @__PURE__ */ React.createElement("div", {
+    className: "lb-loading lb-history-version-preview-loading"
+  }, /* @__PURE__ */ React.createElement(_private.SpinnerIcon, null)) : error ? /* @__PURE__ */ React.createElement("div", {
+    className: "lb-error lb-history-version-preview-error"
+  }, $.HISTORY_VERSION_PREVIEW_ERROR(error)) : /* @__PURE__ */ React.createElement("div", {
+    className: "lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container"
+  }, /* @__PURE__ */ React.createElement(react$1.EditorContent, {
+    editor: previewEditor
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "lb-history-version-preview-footer"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "lb-history-version-preview-authors"
+  }, $.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(
+    /* @__PURE__ */ React.createElement(_private.List, {
+      values: version.authors.map((author) => /* @__PURE__ */ React.createElement(_private.User, {
+        key: author.id,
+        userId: author.id,
+        replaceSelf: true
+      })),
+      formatRemaining: $.LIST_REMAINING_USERS,
+      truncate: AUTHORS_TRUNCATE,
+      locale: $.locale
+    })
+  )), /* @__PURE__ */ React.createElement("div", {
+    className: "lb-history-version-preview-actions"
+  }, /* @__PURE__ */ React.createElement(_private.Button, {
+    onClick: restore,
+    disabled: !data,
+    variant: "primary",
+    size: "large",
+    className: "lb-history-version-preview-action"
+  }, /* @__PURE__ */ React.createElement(_private.RestoreIcon, {
+    className: "lb-button-icon"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "lb-button-label"
+  }, $.HISTORY_VERSION_PREVIEW_RESTORE)))));
+});
+
+exports.HistoryVersionPreview = HistoryVersionPreview;
+//# sourceMappingURL=HistoryVersionPreview.js.map

package/dist/version-history/HistoryVersionPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryVersionPreview.js","sources":["../../src/version-history/HistoryVersionPreview.tsx"],"sourcesContent":["import type { HistoryVersion } from \"@liveblocks/core\";\nimport { useHistoryVersionData } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport {\n  Button,\n  List,\n  RestoreIcon,\n  SpinnerIcon,\n  User,\n} from \"@liveblocks/react-ui/_private\";\nimport type { Content, Editor } from \"@tiptap/react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { yXmlFragmentToProseMirrorRootNode } from \"y-prosemirror\";\nimport { applyUpdate, Doc } from \"yjs\";\n\nimport { classNames } from \"../classnames\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionPreviewProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  version: HistoryVersion;\n  editor: Editor;\n  onVersionRestore?: (version: HistoryVersion) => void;\n}\n\n/**\n * Displays a specific version of the current TipTap document.\n *\n * @example\n * <HistoryVersionPreview version={version} />\n */\nexport const HistoryVersionPreview = forwardRef<\n  HTMLDivElement,\n  HistoryVersionPreviewProps\n>(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n  const { isLoading, data, error } = useHistoryVersionData(version.id);\n\n  const previewEditor = useEditor({\n    // ignore extensions, only get marks/nodes\n    editable: false,\n    extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== \"extension\"),\n  });\n  useEffect(() => {\n    if (data && previewEditor) {\n      const doc = new Doc();\n      applyUpdate(doc, data);\n      const root = doc.getXmlFragment(\"default\") // TODO: lookup field\n      const node = yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);\n      previewEditor.commands.setContent(node.toJSON() as Content)\n    }\n  }, [data, previewEditor, parentEditor]);\n  const restore = useCallback(() => {\n    parentEditor.commands.setContent(previewEditor?.getJSON() ?? \"\");\n    onVersionRestore?.(version);\n  }, [onVersionRestore, parentEditor, previewEditor, version]);\n\n  return (\n    <div\n      {...props}\n      className={classNames(\n        \"lb-root lb-history-version-preview lb-tiptap-version-preview\",\n        className\n      )}\n      ref={forwardedRef}\n    >\n      {isLoading ? (\n        <div className=\"lb-loading lb-history-version-preview-loading\">\n          <SpinnerIcon />\n        </div>\n      ) : error ? (\n        <div className=\"lb-error lb-history-version-preview-error\">\n          {$.HISTORY_VERSION_PREVIEW_ERROR(error)}\n        </div>\n      ) : (\n        <div className=\"lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container\">\n\n          <EditorContent editor={previewEditor} />\n        </div>\n      )}\n      <div className=\"lb-history-version-preview-footer\">\n        <span className=\"lb-history-version-preview-authors\">\n          {$.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(\n            <List\n              values={version.authors.map((author) => (\n                <User key={author.id} userId={author.id} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={AUTHORS_TRUNCATE}\n              locale={$.locale}\n            />\n          )}\n        </span>\n        <div className=\"lb-history-version-preview-actions\">\n          <Button\n            onClick={restore}\n            disabled={!data}\n            variant=\"primary\"\n            size=\"large\"\n            className=\"lb-history-version-preview-action\"\n          >\n            <RestoreIcon className=\"lb-button-icon\" />\n            <span className=\"lb-button-label\">\n              {$.HISTORY_VERSION_PREVIEW_RESTORE}\n            </span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["forwardRef","useOverrides","useHistoryVersionData","useEditor","useEffect","Doc","applyUpdate","yXmlFragmentToProseMirrorRootNode","useCallback","classNames","SpinnerIcon","EditorContent","List","User","Button","RestoreIcon"],"mappings":"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"}

package/dist/version-history/HistoryVersionPreview.mjs

@@ -0,0 +1,77 @@
+import { useHistoryVersionData } from '@liveblocks/react';
+import { useOverrides } from '@liveblocks/react-ui';
+import { SpinnerIcon, List, User, Button, RestoreIcon } from '@liveblocks/react-ui/_private';
+import { useEditor, EditorContent } from '@tiptap/react';
+import React, { forwardRef, useEffect, useCallback } from 'react';
+import { yXmlFragmentToProseMirrorRootNode } from 'y-prosemirror';
+import { Doc, applyUpdate } from 'yjs';
+import { classNames } from '../classnames.mjs';
+
+const AUTHORS_TRUNCATE = 3;
+const HistoryVersionPreview = forwardRef(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {
+  const $ = useOverrides();
+  const { isLoading, data, error } = useHistoryVersionData(version.id);
+  const previewEditor = useEditor({
+    editable: false,
+    extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== "extension")
+  });
+  useEffect(() => {
+    if (data && previewEditor) {
+      const doc = new Doc();
+      applyUpdate(doc, data);
+      const root = doc.getXmlFragment("default");
+      const node = yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);
+      previewEditor.commands.setContent(node.toJSON());
+    }
+  }, [data, previewEditor, parentEditor]);
+  const restore = useCallback(() => {
+    parentEditor.commands.setContent(previewEditor?.getJSON() ?? "");
+    onVersionRestore?.(version);
+  }, [onVersionRestore, parentEditor, previewEditor, version]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: classNames(
+      "lb-root lb-history-version-preview lb-tiptap-version-preview",
+      className
+    ),
+    ref: forwardedRef
+  }, isLoading ? /* @__PURE__ */ React.createElement("div", {
+    className: "lb-loading lb-history-version-preview-loading"
+  }, /* @__PURE__ */ React.createElement(SpinnerIcon, null)) : error ? /* @__PURE__ */ React.createElement("div", {
+    className: "lb-error lb-history-version-preview-error"
+  }, $.HISTORY_VERSION_PREVIEW_ERROR(error)) : /* @__PURE__ */ React.createElement("div", {
+    className: "lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container"
+  }, /* @__PURE__ */ React.createElement(EditorContent, {
+    editor: previewEditor
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "lb-history-version-preview-footer"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "lb-history-version-preview-authors"
+  }, $.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(
+    /* @__PURE__ */ React.createElement(List, {
+      values: version.authors.map((author) => /* @__PURE__ */ React.createElement(User, {
+        key: author.id,
+        userId: author.id,
+        replaceSelf: true
+      })),
+      formatRemaining: $.LIST_REMAINING_USERS,
+      truncate: AUTHORS_TRUNCATE,
+      locale: $.locale
+    })
+  )), /* @__PURE__ */ React.createElement("div", {
+    className: "lb-history-version-preview-actions"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: restore,
+    disabled: !data,
+    variant: "primary",
+    size: "large",
+    className: "lb-history-version-preview-action"
+  }, /* @__PURE__ */ React.createElement(RestoreIcon, {
+    className: "lb-button-icon"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "lb-button-label"
+  }, $.HISTORY_VERSION_PREVIEW_RESTORE)))));
+});
+
+export { HistoryVersionPreview };
+//# sourceMappingURL=HistoryVersionPreview.mjs.map

package/dist/version-history/HistoryVersionPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryVersionPreview.mjs","sources":["../../src/version-history/HistoryVersionPreview.tsx"],"sourcesContent":["import type { HistoryVersion } from \"@liveblocks/core\";\nimport { useHistoryVersionData } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport {\n  Button,\n  List,\n  RestoreIcon,\n  SpinnerIcon,\n  User,\n} from \"@liveblocks/react-ui/_private\";\nimport type { Content, Editor } from \"@tiptap/react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { yXmlFragmentToProseMirrorRootNode } from \"y-prosemirror\";\nimport { applyUpdate, Doc } from \"yjs\";\n\nimport { classNames } from \"../classnames\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionPreviewProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  version: HistoryVersion;\n  editor: Editor;\n  onVersionRestore?: (version: HistoryVersion) => void;\n}\n\n/**\n * Displays a specific version of the current TipTap document.\n *\n * @example\n * <HistoryVersionPreview version={version} />\n */\nexport const HistoryVersionPreview = forwardRef<\n  HTMLDivElement,\n  HistoryVersionPreviewProps\n>(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n  const { isLoading, data, error } = useHistoryVersionData(version.id);\n\n  const previewEditor = useEditor({\n    // ignore extensions, only get marks/nodes\n    editable: false,\n    extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== \"extension\"),\n  });\n  useEffect(() => {\n    if (data && previewEditor) {\n      const doc = new Doc();\n      applyUpdate(doc, data);\n      const root = doc.getXmlFragment(\"default\") // TODO: lookup field\n      const node = yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);\n      previewEditor.commands.setContent(node.toJSON() as Content)\n    }\n  }, [data, previewEditor, parentEditor]);\n  const restore = useCallback(() => {\n    parentEditor.commands.setContent(previewEditor?.getJSON() ?? \"\");\n    onVersionRestore?.(version);\n  }, [onVersionRestore, parentEditor, previewEditor, version]);\n\n  return (\n    <div\n      {...props}\n      className={classNames(\n        \"lb-root lb-history-version-preview lb-tiptap-version-preview\",\n        className\n      )}\n      ref={forwardedRef}\n    >\n      {isLoading ? (\n        <div className=\"lb-loading lb-history-version-preview-loading\">\n          <SpinnerIcon />\n        </div>\n      ) : error ? (\n        <div className=\"lb-error lb-history-version-preview-error\">\n          {$.HISTORY_VERSION_PREVIEW_ERROR(error)}\n        </div>\n      ) : (\n        <div className=\"lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container\">\n\n          <EditorContent editor={previewEditor} />\n        </div>\n      )}\n      <div className=\"lb-history-version-preview-footer\">\n        <span className=\"lb-history-version-preview-authors\">\n          {$.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(\n            <List\n              values={version.authors.map((author) => (\n                <User key={author.id} userId={author.id} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={AUTHORS_TRUNCATE}\n              locale={$.locale}\n            />\n          )}\n        </span>\n        <div className=\"lb-history-version-preview-actions\">\n          <Button\n            onClick={restore}\n            disabled={!data}\n            variant=\"primary\"\n            size=\"large\"\n            className=\"lb-history-version-preview-action\"\n          >\n            <RestoreIcon className=\"lb-button-icon\" />\n            <span className=\"lb-button-label\">\n              {$.HISTORY_VERSION_PREVIEW_RESTORE}\n            </span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/version.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const PKG_NAME = "@liveblocks/react-tiptap";
+const PKG_VERSION = typeof "2.8.3-tiptap1" === "string" && "2.8.3-tiptap1";
+const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
+
+exports.PKG_FORMAT = PKG_FORMAT;
+exports.PKG_NAME = PKG_NAME;
+exports.PKG_VERSION = PKG_VERSION;
+//# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-tiptap\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,2BAAA;AACX,MAAA,WAAA,GAAc,OAAO,eAAA,KAAgB,QAAY,IAAA,gBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.mjs

@@ -0,0 +1,6 @@
+const PKG_NAME = "@liveblocks/react-tiptap";
+const PKG_VERSION = typeof "2.8.3-tiptap1" === "string" && "2.8.3-tiptap1";
+const PKG_FORMAT = typeof "esm" === "string" && "esm";
+
+export { PKG_FORMAT, PKG_NAME, PKG_VERSION };
+//# sourceMappingURL=version.mjs.map

package/dist/version.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-tiptap\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,2BAAA;AACX,MAAA,WAAA,GAAc,OAAO,eAAA,KAAgB,QAAY,IAAA,gBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,12 +1,88 @@
 {
   "name": "@liveblocks/react-tiptap",
-  "version": "0.0.1",
+  "version": "2.8.3-tiptap1",
   "description": "A tiptap react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "module": "./dist/index.mjs",
+        "default": "./dist/index.js"
+      }
+    },
+    "./styles.css": {
+      "types": "./styles.css.d.ts",
+      "default": "./styles.css"
+    }
+  },
   "files": [
+    "dist/**",
+    "**/*.css",
+    "**/*.css.d.ts",
+    "**/*.css.map",
     "README.md"
   ],
+  "scripts": {
+    "dev": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --watch",
+    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "format": "eslint --fix src/; stylelint --fix src/styles/; prettier --write src/",
+    "lint": "eslint src/; stylelint src/styles/",
+    "lint:package": "publint --strict && attw --pack",
+    "start": "npm run dev",
+    "test": "jest --silent --verbose --color=always",
+    "test:watch": "jest --silent --verbose --color=always --watch"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.2",
+    "@liveblocks/client": "2.8.3-tiptap1",
+    "@liveblocks/core": "2.8.3-tiptap1",
+    "@liveblocks/react": "2.8.3-tiptap1",
+    "@liveblocks/react-ui": "2.8.3-tiptap1",
+    "@liveblocks/yjs": "2.8.3-tiptap1",
+    "@tiptap/core": "^2.7.2",
+    "@tiptap/react": "^2.7.2",
+    "@tiptap/suggestion": "^2.7.2",
+    "use-sync-external-store": "^1.2.2",
+    "y-prosemirror": "^1.2.12",
+    "yjs": "^13.6.18"
+  },
+  "peerDependencies": {
+    "@tiptap/extension-collaboration": "^2.7.2",
+    "@tiptap/extension-collaboration-cursor": "^2.7.2",
+    "@tiptap/pm": "^2.7.2",
+    "@tiptap/react": "^2.7.2",
+    "@tiptap/suggestion": "^2.7.2",
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18"
+  },
+  "devDependencies": {
+    "@liveblocks/eslint-config": "*",
+    "@liveblocks/jest-config": "*",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/use-sync-external-store": "^0.0.6",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "msw": "^0.27.1",
+    "rollup": "^3.28.0",
+    "rollup-plugin-dts": "^5.3.1",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-preserve-directives": "^0.2.0",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-plugin-logical-css": "^0.13.2"
+  },
   "sideEffects": false,
   "bugs": {
     "url": "https://github.com/liveblocks/liveblocks/issues"

package/src/styles/constants.css

@@ -0,0 +1,9 @@
+$lb-elevation-list-padding: 4px;
+$lb-tiptap-anchored-threads-shadow:
+  0 0 0 1px rgb(0 0 0 / 4%),
+  0 2px 6px rgb(0 0 0 / 4%),
+  0 6px 20px rgb(0 0 0 / 6%);
+$lb-tiptap-anchored-threads-active-shadow:
+  0 0 0 1px rgb(0 0 0 / 4%),
+  0 2px 6px rgb(0 0 0 / 8%),
+  0 8px 26px rgb(0 0 0 / 12%);

package/src/styles/index.css

@@ -0,0 +1,247 @@
+@import "./utils";
+@import "./constants";
+
+/*************************************
+ *            Suggestions            *
+ *************************************/
+
+.lb-tiptap-suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*************************************
+ *        Mention suggestions        *
+ *************************************/
+
+.lb-tiptap-mention-suggestions {
+  --lb-tiptap-mention-suggestion-avatar-size: 1.25rem;
+}
+
+.lb-tiptap-mention-suggestion {
+  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));
+}
+
+.lb-tiptap-mention-suggestion-avatar {
+  inline-size: var(--lb-tiptap-mention-suggestion-avatar-size);
+  margin-inline-start: calc(-0.125 * var(--lb-spacing));
+  margin-inline-end: calc(0.5 * var(--lb-spacing));
+  margin-block: calc(0.125 * var(--lb-spacing));
+  background: var(--lb-foreground-subtle);
+  color: var(--lb-foreground-moderate);
+}
+
+/*************************************
+ *          Elevation lists          *
+ *************************************/
+
+.lb-tiptap-suggestions {
+  padding: $lb-elevation-list-padding;
+  animation-duration: var(--lb-transition-duration);
+  animation-timing-function: var(--lb-transition-easing);
+  will-change: transform, opacity;
+}
+
+.lb-tiptap-suggestions-list-item {
+  display: flex;
+  align-items: center;
+  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));
+  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);
+  color: var(--lb-foreground-secondary);
+  outline: none;
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background, color, opacity;
+  scroll-margin-block: $lb-elevation-list-padding;
+}
+
+:is(.lb-tiptap-suggestions-list-item) {
+  &:where([data-highlighted], [data-selected]) {
+    background: var(--lb-foreground-subtle);
+    transition-duration: calc(var(--lb-transition-duration) / 2);
+  }
+
+  &:where(:disabled, [data-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/*************************************
+ *        Floating animations        *
+ *************************************/
+
+:is(.lb-tiptap-suggestions) {
+  &:where([data-side="top"]) {
+    animation-name: lb-animation-slide-up;
+  }
+
+  &:where([data-side="bottom"]) {
+    animation-name: lb-animation-slide-down;
+  }
+
+  &:where([data-state="closed"]) {
+    animation-name: lb-animation-disappear;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .lb-tiptap-suggestions:where(:not([data-state="closed"])) {
+    animation-name: lb-animation-appear;
+  }
+}
+
+/*************************************
+ *              Mention              *
+ *************************************/
+
+.lb-tiptap-mention {
+  padding: 0.1em 0.3em;
+  border-radius: calc(0.675 * var(--lb-radius));
+  background: var(--lb-accent-subtle);
+  color: var(--lb-accent);
+  box-decoration-break: clone;
+  font-weight: 500;
+
+  @include invisible-selection;
+}
+
+.lb-mention-selected {
+  background: var(--lb-accent);
+  color: var(--lb-accent-foreground);
+}
+
+/*************************************
+ *            Thread mark            *
+ *************************************/
+
+.lb-tiptap-thread-mark {
+  background: var(--lb-accent-subtle);
+  color: var(--lb-foreground);
+  outline: none;
+  font-weight: 500;
+  transition-property: color, text-decoration-color;
+  text-decoration-line: underline;
+  text-decoration-color: var(--lb-foreground-moderate);
+  text-underline-offset: 2px;
+}
+
+.lb-tiptap-thread-mark-selected {
+  color: var(--lb-accent);
+  text-decoration-line: underline;
+  text-decoration-color: var(--lb-accent-moderate);
+  text-underline-offset: 2px;
+}
+
+/*************************************
+ *          Anchored threads         *
+ *************************************/
+
+.lb-tiptap-anchored-threads {
+  --lb-tiptap-anchored-threads-gap: 1.25rem;
+  --lb-tiptap-anchored-threads-active-thread-offset: -0.75rem;
+}
+
+.lb-tiptap-anchored-threads-thread-container {
+  transition-duration: calc(var(--lb-transition-duration) * 2);
+  transition-property: transform;
+}
+
+@media (prefers-reduced-motion) {
+  .lb-tiptap-anchored-threads-thread-container {
+    transition-duration: 0s;
+  }
+}
+
+.lb-tiptap-anchored-threads-thread {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--lb-radius);
+  background: var(--lb-dynamic-background);
+  box-shadow: $lb-tiptap-anchored-threads-shadow;
+  transition-property: background, box-shadow;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: var(--lb-inset-shadow);
+    pointer-events: none;
+  }
+
+  &:where([data-state="active"]) {
+    box-shadow: $lb-tiptap-anchored-threads-active-shadow;
+  }
+}
+
+/*************************************
+ *        Floating components        *
+ *************************************/
+
+.lb-tiptap-floating {
+  --lb-tiptap-floating-size: 350px;
+}
+
+/*************************************
+ *         Floating threads          *
+ *************************************/
+
+.lb-tiptap-floating-threads-thread {
+  inline-size: var(--lb-tiptap-floating-size);
+
+  &:where(:not(:last-of-type)) {
+    border-block-end: 1px solid var(--lb-foreground-subtle);
+  }
+}
+
+/*************************************
+ *         Floating composer         *
+ *************************************/
+
+.lb-tiptap-floating-composer {
+  inline-size: var(--lb-tiptap-floating-size);
+}
+
+.lb-tiptap-active-selection {
+  background: var(--lb-selection, rgb(0 0 255 / 20%));
+  pointer-events: none;
+}
+
+/*************************************
+ *         Collab Cursors            *
+ *************************************/
+
+/* Give a remote user a caret */
+/* stylelint-disable-next-line selector-class-pattern */
+.collaboration-cursor__caret {
+  position: relative;
+  margin-inline-start: -1px;
+  margin-inline-end: -1px;
+  border-inline-start: 1px solid #0d0d0d;
+  border-inline-end: 1px solid #0d0d0d;
+  word-break: normal;
+  pointer-events: none;
+}
+
+/* Render the username above the caret */
+/* stylelint-disable-next-line selector-class-pattern */
+.collaboration-cursor__label {
+  position: absolute;
+  inset-inline-start: -1px;
+  inset-block-start: -1.4em;
+  padding: 2px 6px;
+  border-radius: 6px;
+  border-end-start-radius: 0;
+  color: #fff;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}

package/src/styles/utils.css

@@ -0,0 +1,6 @@
+@mixin invisible-selection {
+  &::selection,
+  *::selection {
+    background: transparent;
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+.lb-tiptap-suggestions-list{margin:0;padding:0;list-style:none}.lb-tiptap-mention-suggestions{--lb-tiptap-mention-suggestion-avatar-size:1.25rem}.lb-tiptap-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-tiptap-mention-suggestion-avatar{inline-size:var(--lb-tiptap-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-tiptap-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-tiptap-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-tiptap-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-tiptap-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-tiptap-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-tiptap-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-tiptap-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-tiptap-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-tiptap-mention::selection{background:0 0}.lb-tiptap-mention ::selection{background:0 0}.lb-mention-selected{background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-tiptap-thread-mark{background:var(--lb-accent-subtle);color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-tiptap-thread-mark-selected{color:var(--lb-accent);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate);text-underline-offset:2px}.lb-tiptap-anchored-threads{--lb-tiptap-anchored-threads-gap:1.25rem;--lb-tiptap-anchored-threads-active-thread-offset:-.75rem}.lb-tiptap-anchored-threads-thread-container{transition-duration:calc(var(--lb-transition-duration)*2);transition-property:transform}.lb-tiptap-anchored-threads-thread{border-radius:var(--lb-radius);background:var(--lb-dynamic-background);transition-property:background,box-shadow;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000a,0 2px 6px #0000000a,0 6px 20px #0000000f}.lb-tiptap-anchored-threads-thread:after{content:"";z-index:1;border-radius:inherit;box-shadow:var(--lb-inset-shadow);pointer-events:none;position:absolute;inset:0}.lb-tiptap-anchored-threads-thread:where([data-state=active]){box-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f}.lb-tiptap-floating{--lb-tiptap-floating-size:350px}.lb-tiptap-floating-threads-thread{inline-size:var(--lb-tiptap-floating-size)}.lb-tiptap-floating-threads-thread:where(:not(:last-of-type)){border-block-end:1px solid var(--lb-foreground-subtle)}.lb-tiptap-floating-composer{inline-size:var(--lb-tiptap-floating-size)}.lb-tiptap-active-selection{background:var(--lb-selection,#00f3);pointer-events:none}.collaboration-cursor__caret{word-break:normal;pointer-events:none;border-inline:1px solid #0d0d0d;margin-inline:-1px;position:relative}.collaboration-cursor__label{border-radius:6px;color:#fff;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;border-end-start-radius:0;padding:2px 6px;font-size:14px;font-style:normal;font-weight:600;line-height:normal;position:absolute;inset-block-start:-1.4em;inset-inline-start:-1px}@media (prefers-reduced-motion){.lb-tiptap-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}.lb-tiptap-anchored-threads-thread-container{transition-duration:0s}}

package/styles.css.d.ts

@@ -0,0 +1 @@
+declare module "@liveblocks/react-tiptap/styles.css";