@liveblocks/react-lexical 1.12.0-lexical4 → 2.0.0-alpha2

package/dist/mentions/user.js

@@ -1,21 +1,24 @@
 'use strict';
 
 var react = require('@liveblocks/react');
+var reactUi = require('@liveblocks/react-ui');
 var React = require('react');
+var classnames = require('../classnames.js');
 
 const User = React.forwardRef(
   function User2(props, forwardedRef) {
-    const { userId, ...spanProps } = props;
-    const { useUser } = react.useSharedContextBundle();
-    const { user, isLoading } = useUser(userId);
-    const name = user === void 0 ? "Anonymous" : user.name;
+    const { userId, className, ...spanProps } = props;
+    const { user, isLoading } = react.useUser(userId);
+    const $ = reactUi.useOverrides();
+    const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
     return /* @__PURE__ */ React.createElement("span", {
       "data-loading": isLoading ? "" : void 0,
       ...spanProps,
-      ref: forwardedRef
+      ref: forwardedRef,
+      className: classnames.classNames("lb-name lb-user", className)
     }, isLoading ? null : name);
   }
 );
 
-module.exports = User;
+exports.User = User;
 //# sourceMappingURL=user.js.map

package/dist/mentions/user.js.map

@@ -1 +1 @@
-{"version":3,"file":"user.js","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useSharedContextBundle } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nconst User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, ...spanProps } = props;\n    const { useUser } = useSharedContextBundle();\n\n    const { user, isLoading } = useUser(userId);\n\n    const name = user === undefined ? \"Anonymous\" : user.name;\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        ref={forwardedRef}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\nexport default User;\n"],"names":["forwardRef","User","useSharedContextBundle"],"mappings":";;;;;AASA,MAAM,IAAO,GAAAA,gBAAA;AAAA,EACX,SAASC,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAM,MAAA,EAAE,MAAW,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACjC,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAIC,4BAAuB,EAAA,CAAA;AAE3C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAE1C,IAAA,MAAM,IAAO,GAAA,IAAA,KAAS,KAAY,CAAA,GAAA,WAAA,GAAc,IAAK,CAAA,IAAA,CAAA;AAErD,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAEJ,EAAA,SAAA,GAAY,OAAO,IACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"user.js","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        ref={forwardedRef}\n        className={classNames(\"lb-name lb-user\", className)}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","User","useUser","useOverrides","classNames"],"mappings":";;;;;;;AAYO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAIC,cAAQ,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,IAAIC,oBAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,OACJ,IAAS,KAAA,KAAA,CAAA,IAAa,SAAS,IAAO,GAAA,CAAA,CAAE,eAAe,IAAK,CAAA,IAAA,CAAA;AAE9D,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MACL,SAAA,EAAWC,qBAAW,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,KAEjD,EAAA,SAAA,GAAY,OAAO,IACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/mentions/user.mjs

@@ -1,19 +1,22 @@
-import { useSharedContextBundle } from '@liveblocks/react';
+import { useUser } from '@liveblocks/react';
+import { useOverrides } from '@liveblocks/react-ui';
 import React__default, { forwardRef } from 'react';
+import { classNames } from '../classnames.mjs';
 
 const User = forwardRef(
   function User2(props, forwardedRef) {
-    const { userId, ...spanProps } = props;
-    const { useUser } = useSharedContextBundle();
+    const { userId, className, ...spanProps } = props;
     const { user, isLoading } = useUser(userId);
-    const name = user === void 0 ? "Anonymous" : user.name;
+    const $ = useOverrides();
+    const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
     return /* @__PURE__ */ React__default.createElement("span", {
       "data-loading": isLoading ? "" : void 0,
       ...spanProps,
-      ref: forwardedRef
+      ref: forwardedRef,
+      className: classNames("lb-name lb-user", className)
     }, isLoading ? null : name);
   }
 );
 
-export { User as default };
+export { User };
 //# sourceMappingURL=user.mjs.map

package/dist/mentions/user.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"user.mjs","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useSharedContextBundle } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nconst User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, ...spanProps } = props;\n    const { useUser } = useSharedContextBundle();\n\n    const { user, isLoading } = useUser(userId);\n\n    const name = user === undefined ? \"Anonymous\" : user.name;\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        ref={forwardedRef}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\nexport default User;\n"],"names":["User","React"],"mappings":";;;AASA,MAAM,IAAO,GAAA,UAAA;AAAA,EACX,SAASA,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAM,MAAA,EAAE,MAAW,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACjC,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,sBAAuB,EAAA,CAAA;AAE3C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAE1C,IAAA,MAAM,IAAO,GAAA,IAAA,KAAS,KAAY,CAAA,GAAA,WAAA,GAAc,IAAK,CAAA,IAAA,CAAA;AAErD,IAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAEJ,EAAA,SAAA,GAAY,OAAO,IACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"user.mjs","sources":["../../src/mentions/user.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        ref={forwardedRef}\n        className={classNames(\"lb-name lb-user\", className)}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n"],"names":["User","React"],"mappings":";;;;;AAYO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAASA,KAAK,CAAA,KAAA,EAAO,YAAc,EAAA;AACjC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAC1C,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,OACJ,IAAS,KAAA,KAAA,CAAA,IAAa,SAAS,IAAO,GAAA,CAAA,CAAE,eAAe,IAAK,CAAA,IAAA,CAAA;AAE9D,IAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MACL,SAAA,EAAW,UAAW,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,KAEjD,EAAA,SAAA,GAAY,OAAO,IACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-lexical";
-const PKG_VERSION = typeof "1.12.0-lexical4" === "string" && "1.12.0-lexical4";
+const PKG_VERSION = typeof "2.0.0-alpha2" === "string" && "2.0.0-alpha2";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js.map

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

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-lexical";
-const PKG_VERSION = typeof "1.12.0-lexical4" === "string" && "1.12.0-lexical4";
+const PKG_VERSION = typeof "2.0.0-alpha2" === "string" && "2.0.0-alpha2";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/dist/version.mjs.map

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

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@liveblocks/react-lexical",
-  "version": "1.12.0-lexical4",
+  "version": "2.0.0-alpha2",
   "description": "A lexical 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": {
@@ -17,39 +18,47 @@
         "default": "./dist/index.js"
       }
     },
-    "./styles.css": "./styles.css"
+    "./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",
-    "start": "npm run dev",
     "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": {
-    "@liveblocks/client": "1.12.0-lexical4",
-    "@liveblocks/core": "1.12.0-lexical4",
-    "@liveblocks/react": "1.12.0-lexical4",
-    "@liveblocks/react-comments": "1.12.0-lexical4",
-    "@liveblocks/yjs": "1.12.0-lexical4",
+    "@floating-ui/react-dom": "^2.1.0",
+    "@liveblocks/client": "2.0.0-alpha2",
+    "@liveblocks/core": "2.0.0-alpha2",
+    "@liveblocks/react": "2.0.0-alpha2",
+    "@liveblocks/react-ui": "2.0.0-alpha2",
+    "@liveblocks/yjs": "2.0.0-alpha2",
+    "nanoid": "^3",
     "use-sync-external-store": "^1.2.2",
     "yjs": "^13.6.14"
   },
   "peerDependencies": {
-    "@lexical/react": "^0.10.0",
-    "@lexical/selection": "^0.14.3",
-    "@lexical/utils": "^0.14.3",
-    "lexical": "^0.10.0",
-    "react": "^16.14.0 || ^17 || ^18"
+    "@lexical/react": "^0.16.0",
+    "@lexical/utils": "^0.16.0",
+    "lexical": "^0.16.0",
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
-    "@lexical/react": "^0.14.2",
     "@liveblocks/eslint-config": "*",
     "@liveblocks/jest-config": "*",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -59,7 +68,6 @@
     "@types/use-sync-external-store": "^0.0.6",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "lexical": "^0.14.2",
     "msw": "^0.27.1",
     "rollup": "^3.28.0",
     "rollup-plugin-dts": "^5.3.1",

package/src/styles/constants.css

@@ -0,0 +1 @@
+$lb-elevation-list-padding: 4px;

package/src/styles/index.css

@@ -0,0 +1,154 @@
+@import "./utils";
+@import "./constants";
+
+.lb-lexical-threads-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: max-content;
+  color: rgb(55 53 47 / 50%);
+}
+
+.lb-lexical-threads {
+  display: flex;
+  flex-direction: column;
+}
+
+/*************************************
+ *       Suggestions                 *
+ *************************************/
+
+.lb-lexical-suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*************************************
+ *   Mention suggestions             *
+ *************************************/
+
+.lb-lexical-mention-suggestions {
+  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;
+}
+
+.lb-lexical-mention-suggestion {
+  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));
+}
+
+.lb-lexical-mention-suggestion-avatar {
+  inline-size: var(--lb-lexical-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-lexical-suggestions {
+  padding: $lb-elevation-list-padding;
+  animation-duration: var(--lb-transition-duration);
+  animation-timing-function: var(--lb-transition-easing);
+  will-change: transform, opacity;
+}
+
+.lb-lexical-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-lexical-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-lexical-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-lexical-suggestions:where(:not([data-state="closed"])) {
+    animation-name: lb-animation-appear;
+  }
+}
+
+/*************************************
+ *       Mention                     *
+ *************************************/
+
+.lb-lexical-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;
+
+  &:where([data-selected]) {
+    background: var(--lb-accent);
+    color: var(--lb-accent-foreground);
+  }
+}
+
+/*************************************
+ *       Active selection            *
+ *************************************/
+
+.lb-lexical-active-selection {
+  background-color: var(--lb-selection);
+}
+
+/*************************************
+ *              Thread Mark          *
+ *************************************/
+
+.lb-thread-mark {
+  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([data-state="active"]) {
+    color: var(--lb-accent);
+    text-decoration-color: var(--lb-accent-moderate);
+  }
+}

package/src/styles/utils.css

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

package/styles.css

@@ -0,0 +1 @@
+.lb-lexical-threads-empty{color:#37352f80;justify-content:center;align-items:center;block-size:max-content;display:flex}.lb-lexical-threads{flex-direction:column;display:flex}.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-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-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-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-lexical-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-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-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-active-selection{background-color:var(--lb-selection)}.lb-thread-mark{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-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}}

package/styles.css.d.ts

@@ -0,0 +1 @@
+declare module "@liveblocks/react-lexical/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":"AAGA,0BAAA,eAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,sBAAA,CAAA,YAAA,CAQA,oBAAA,qBAAA,CAAA,YAAA,CASA,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,4EAAA,sCAAA,CAAA,yDAAA,CAKA,mEAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CC/GE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CDyHA,2CAAA,2BAAA,CAAA,iCAAA,CAUF,6BAAA,oCAAA,CAQA,gBAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CASE,2CAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CA/CF,gCACE,yDAAA,kCAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n.lb-lexical-threads-empty {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  block-size: max-content;\n  color: rgb(55 53 47 / 50%);\n}\n\n.lb-lexical-threads {\n  display: flex;\n  flex-direction: column;\n}\n\n/*************************************\n *       Suggestions                 *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *   Mention suggestions             *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-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-lexical-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-lexical-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-lexical-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-lexical-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-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *       Mention                     *\n *************************************/\n\n.lb-lexical-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  &:where([data-selected]) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *       Active selection            *\n *************************************/\n\n.lb-lexical-active-selection {\n  background-color: var(--lb-selection);\n}\n\n/*************************************\n *              Thread Mark          *\n *************************************/\n\n.lb-thread-mark {\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  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}

package/dist/active-selection.js

@@ -1,143 +0,0 @@
-'use strict';
-
-var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var selection = require('@lexical/selection');
-var lexical = require('lexical');
-var React = require('react');
-var reactDom = require('react-dom');
-var index_js = require('use-sync-external-store/shim/index.js');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function ActiveSelection({ styles }) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const selection = useSelection();
-  if (selection === null)
-    return null;
-  const info = editor.getEditorState().read(() => {
-    return {
-      anchor: {
-        node: selection.anchor.getNode(),
-        offset: selection.anchor.offset
-      },
-      focus: {
-        node: selection.focus.getNode(),
-        offset: selection.focus.offset
-      }
-    };
-  });
-  const root = editor.getRootElement();
-  if (root === null)
-    return null;
-  const rootContainer = root.parentElement;
-  if (rootContainer === null)
-    return null;
-  return reactDom.createPortal(
-    /* @__PURE__ */ React__namespace.createElement(SelectionRects, {
-      selection: info,
-      styles
-    }),
-    rootContainer
-  );
-}
-function SelectionRects({
-  selection: selection$1,
-  styles = {}
-}) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const divRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    const container = divRef.current;
-    if (container === null)
-      return;
-    function drawSelectionRects() {
-      if (container === null)
-        return;
-      while (container.firstChild) {
-        container.removeChild(container.firstChild);
-      }
-      const range = selection.createDOMRange(
-        editor,
-        selection$1.anchor.node,
-        selection$1.anchor.offset,
-        selection$1.focus.node,
-        selection$1.focus.offset
-      );
-      if (range === null)
-        return;
-      const rects = selection.createRectsFromDOMRange(editor, range);
-      for (const rect of rects) {
-        const div = document.createElement("div");
-        Object.assign(div.style, {
-          backgroundColor: "rgba(255, 212, 0, 0.14)",
-          ...styles,
-          position: "absolute",
-          top: `${rect.top - container.getBoundingClientRect().top}px`,
-          left: `${rect.left - container.getBoundingClientRect().left}px`,
-          width: `${rect.width}px`,
-          height: `${rect.height}px`,
-          pointerEvents: "none"
-        });
-        container.appendChild(div);
-      }
-    }
-    const observer = new ResizeObserver(drawSelectionRects);
-    observer.observe(container);
-    const unsubscribeFromUpdates = editor.registerUpdateListener(drawSelectionRects);
-    return () => {
-      observer.disconnect();
-      unsubscribeFromUpdates();
-    };
-  }, [selection$1, editor, styles]);
-  return /* @__PURE__ */ React__namespace.createElement("div", {
-    ref: divRef,
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none"
-    }
-  });
-}
-function useSelection() {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const subscribe = React.useCallback(
-    (onStoreChange) => {
-      return editor.registerUpdateListener(onStoreChange);
-    },
-    [editor]
-  );
-  const getSnapshot = React.useCallback(() => {
-    return editor.getEditorState().read(() => {
-      const selection = lexical.$getSelection();
-      if (!lexical.$isRangeSelection(selection))
-        return null;
-      if (selection.isCollapsed())
-        return null;
-      return selection;
-    });
-  }, [editor]);
-  return index_js.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-exports.ActiveSelection = ActiveSelection;
-//# sourceMappingURL=active-selection.js.map

package/dist/active-selection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"active-selection.js","sources":["../src/active-selection.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { createDOMRange, createRectsFromDOMRange } from \"@lexical/selection\";\nimport type { LexicalNode, RangeSelection } from \"lexical\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport * as React from \"react\";\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\ninterface ActiveSelectionProps {\n  styles?: Partial<CSSStyleDeclaration>;\n}\n\nexport function ActiveSelection({ styles }: ActiveSelectionProps) {\n  const [editor] = useLexicalComposerContext();\n  const selection = useSelection();\n  if (selection === null) return null;\n\n  const info = editor.getEditorState().read(() => {\n    return {\n      anchor: {\n        node: selection.anchor.getNode(),\n        offset: selection.anchor.offset,\n      },\n      focus: {\n        node: selection.focus.getNode(),\n        offset: selection.focus.offset,\n      },\n    };\n  });\n\n  const root = editor.getRootElement();\n  if (root === null) return null;\n\n  const rootContainer = root.parentElement;\n  if (rootContainer === null) return null;\n\n  return createPortal(\n    <SelectionRects selection={info} styles={styles} />,\n    rootContainer\n  );\n}\n\nfunction SelectionRects({\n  selection,\n  styles = {},\n}: {\n  selection: SelectionInfo;\n  styles?: Partial<CSSStyleDeclaration>;\n}) {\n  const [editor] = useLexicalComposerContext();\n\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const container = divRef.current;\n    if (container === null) return;\n\n    function drawSelectionRects() {\n      if (container === null) return;\n\n      // Remove all existing children of the container\n      while (container.firstChild) {\n        container.removeChild(container.firstChild);\n      }\n\n      const range = createDOMRange(\n        editor,\n        selection.anchor.node,\n        selection.anchor.offset,\n        selection.focus.node,\n        selection.focus.offset\n      );\n\n      if (range === null) return;\n      const rects = createRectsFromDOMRange(editor, range);\n\n      for (const rect of rects) {\n        const div = document.createElement(\"div\");\n\n        Object.assign(div.style, {\n          backgroundColor: \"rgba(255, 212, 0, 0.14)\",\n          ...styles,\n          position: \"absolute\",\n          top: `${rect.top - container.getBoundingClientRect().top}px`,\n          left: `${rect.left - container.getBoundingClientRect().left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n          pointerEvents: \"none\",\n        });\n\n        container.appendChild(div);\n      }\n    }\n\n    // Observe resizes of the container element to redraw the selection\n    const observer = new ResizeObserver(drawSelectionRects);\n\n    observer.observe(container);\n\n    // Listen to updates in the editor to redraw the selection\n    const unsubscribeFromUpdates =\n      editor.registerUpdateListener(drawSelectionRects);\n\n    return () => {\n      observer.disconnect();\n      unsubscribeFromUpdates();\n    };\n  }, [selection, editor, styles]);\n\n  return (\n    <div\n      ref={divRef}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: \"none\",\n      }}\n    />\n  );\n}\n\ntype SelectionInfo = {\n  anchor: {\n    node: LexicalNode;\n    offset: number;\n  };\n  focus: {\n    node: LexicalNode;\n    offset: number;\n  };\n};\n\nfunction useSelection(): RangeSelection | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => {\n      const selection = $getSelection();\n      if (!$isRangeSelection(selection)) return null;\n\n      if (selection.isCollapsed()) return null;\n\n      return selection;\n    });\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useLexicalComposerContext","createPortal","React","selection","useRef","useLayoutEffect","createDOMRange","createRectsFromDOMRange","useCallback","$getSelection","$isRangeSelection","useSyncExternalStore"],"mappings":"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"}