@liveblocks/react-tiptap 0.0.1 → 2.8.3-tiptap2

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-tiptap2" === "string" && "2.8.3-tiptap2";
+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-tiptap2" === "string" && "2.8.3-tiptap2";
+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-tiptap2",
   "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-tiptap2",
+    "@liveblocks/core": "2.8.3-tiptap2",
+    "@liveblocks/react": "2.8.3-tiptap2",
+    "@liveblocks/react-ui": "2.8.3-tiptap2",
+    "@liveblocks/yjs": "2.8.3-tiptap2",
+    "@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,250 @@
+@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            *
+ *************************************/
+
+:where(.lb-tiptap-thread-mark:not([data-orphan="true"])) {
+  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;
+}
+
+:where(
+    .lb-tiptap-thread-mark:not([data-orphan="true"])
+      .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)}:where(.lb-tiptap-thread-mark:not([data-orphan=true])){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}:where(.lb-tiptap-thread-mark:not([data-orphan=true]) .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";

package/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAOA,4BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,+BAAA,kDAAA,CAIA,8BAAA,gEAAA,CAIA,qCAAA,2DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,uBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,iCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,2EAAA,sCAAA,CAAA,yDAAA,CAKA,kEAAA,UAAA,CAAA,kBAAA,CAWA,8CAAA,oCAAA,CAIA,iDAAA,sCAAA,CAIA,kDAAA,qCAAA,CAeF,mBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CClGE,8BAAA,cAAA,CAAA,+BAAA,cAAA,CD6GF,qBAAA,2BAAA,CAAA,iCAAA,CASA,uDAAA,kCAAA,CAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CAWA,uFAAA,sBAAA,CAAA,8BAAA,CAAA,uDAAA,CAAA,+CAAA,CAAA,yBAAA,CAcA,4BAAA,wCAAA,CAAA,yDAAA,CAKA,6CAAA,yDAAA,CAAA,6BAAA,CAWA,mCAAA,8BAAA,CAAA,uCAAA,CAAA,yCAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,uEAAA,CAQE,yCAAA,UAAA,CAAA,SAAA,CAAA,qBAAA,CAAA,iCAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,OAAA,CAUA,8DAAA,uEAAA,CASF,oBAAA,+BAAA,CAQA,mCAAA,0CAAA,CAGE,8DAAA,sDAAA,CASF,6BAAA,0CAAA,CAIA,4BAAA,oCAAA,CAAA,mBAAA,CAWA,6BAAA,iBAAA,CAAA,mBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,iBAAA,CAYA,6BAAA,iBAAA,CAAA,UAAA,CAAA,kBAAA,CAAA,mBAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,cAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,kBAAA,CAAA,iBAAA,CAAA,wBAAA,CAAA,uBAAA,CAjJA,gCACE,wDAAA,kCAAA,CAiEA,6CAAA,sBAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n/*************************************\n *            Suggestions            *\n *************************************/\n\n.lb-tiptap-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *        Mention suggestions        *\n *************************************/\n\n.lb-tiptap-mention-suggestions {\n  --lb-tiptap-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-tiptap-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-tiptap-mention-suggestion-avatar {\n  inline-size: var(--lb-tiptap-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-tiptap-suggestions {\n  padding: $lb-elevation-list-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-tiptap-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-list-padding;\n}\n\n:is(.lb-tiptap-suggestions-list-item) {\n  &:where([data-highlighted], [data-selected]) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-tiptap-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-tiptap-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *              Mention              *\n *************************************/\n\n.lb-tiptap-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n}\n\n.lb-mention-selected {\n  background: var(--lb-accent);\n  color: var(--lb-accent-foreground);\n}\n\n/*************************************\n *            Thread mark            *\n *************************************/\n\n:where(.lb-tiptap-thread-mark:not([data-orphan=\"true\"])) {\n  background: var(--lb-accent-subtle);\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n}\n\n:where(\n    .lb-tiptap-thread-mark:not([data-orphan=\"true\"])\n      .lb-tiptap-thread-mark-selected\n  ) {\n  color: var(--lb-accent);\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-accent-moderate);\n  text-underline-offset: 2px;\n}\n\n/*************************************\n *          Anchored threads         *\n *************************************/\n\n.lb-tiptap-anchored-threads {\n  --lb-tiptap-anchored-threads-gap: 1.25rem;\n  --lb-tiptap-anchored-threads-active-thread-offset: -0.75rem;\n}\n\n.lb-tiptap-anchored-threads-thread-container {\n  transition-duration: calc(var(--lb-transition-duration) * 2);\n  transition-property: transform;\n}\n\n@media (prefers-reduced-motion) {\n  .lb-tiptap-anchored-threads-thread-container {\n    transition-duration: 0s;\n  }\n}\n\n.lb-tiptap-anchored-threads-thread {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--lb-radius);\n  background: var(--lb-dynamic-background);\n  box-shadow: $lb-tiptap-anchored-threads-shadow;\n  transition-property: background, box-shadow;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n    box-shadow: var(--lb-inset-shadow);\n    pointer-events: none;\n  }\n\n  &:where([data-state=\"active\"]) {\n    box-shadow: $lb-tiptap-anchored-threads-active-shadow;\n  }\n}\n\n/*************************************\n *        Floating components        *\n *************************************/\n\n.lb-tiptap-floating {\n  --lb-tiptap-floating-size: 350px;\n}\n\n/*************************************\n *         Floating threads          *\n *************************************/\n\n.lb-tiptap-floating-threads-thread {\n  inline-size: var(--lb-tiptap-floating-size);\n\n  &:where(:not(:last-of-type)) {\n    border-block-end: 1px solid var(--lb-foreground-subtle);\n  }\n}\n\n/*************************************\n *         Floating composer         *\n *************************************/\n\n.lb-tiptap-floating-composer {\n  inline-size: var(--lb-tiptap-floating-size);\n}\n\n.lb-tiptap-active-selection {\n  background: var(--lb-selection, rgb(0 0 255 / 20%));\n  pointer-events: none;\n}\n\n/*************************************\n *         Collab Cursors            *\n *************************************/\n\n/* Give a remote user a caret */\n/* stylelint-disable-next-line selector-class-pattern */\n.collaboration-cursor__caret {\n  position: relative;\n  margin-inline-start: -1px;\n  margin-inline-end: -1px;\n  border-inline-start: 1px solid #0d0d0d;\n  border-inline-end: 1px solid #0d0d0d;\n  word-break: normal;\n  pointer-events: none;\n}\n\n/* Render the username above the caret */\n/* stylelint-disable-next-line selector-class-pattern */\n.collaboration-cursor__label {\n  position: absolute;\n  inset-inline-start: -1px;\n  inset-block-start: -1.4em;\n  padding: 2px 6px;\n  border-radius: 6px;\n  border-end-start-radius: 0;\n  color: #fff;\n  font-weight: 600;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}