@liveblocks/react-lexical 1.12.0-lexical6 → 2.0.0-alpha3

package/dist/mentions/suggestions.mjs

@@ -1,8 +1,12 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
-import React__default, { createContext, forwardRef, useState, useEffect, useRef, useImperativeHandle } from 'react';
-import { useSuggestions, useOnValueSelectCallback, useOnResetMatchCallback } from './mention-plugin.mjs';
+import React__default, { createContext, forwardRef, useState, useEffect, useRef, useImperativeHandle, useContext } from 'react';
 
+const SuggestionsContext = createContext(null);
+const OnValueSelectCallbackContext = createContext(null);
+const OnResetMatchCallbackContext = createContext(
+  null
+);
 const HighlightedIndexContext = createContext(null);
 const List = forwardRef(
   function(props, forwardedRef) {
@@ -153,6 +157,27 @@ function useHighlightedIndex() {
   }
   return context;
 }
+function useSuggestions() {
+  const suggestions = useContext(SuggestionsContext);
+  if (suggestions === null) {
+    throw new Error("useSuggestions: SuggestionsContext not found");
+  }
+  return suggestions;
+}
+function useOnValueSelectCallback() {
+  const onValueSelect = useContext(OnValueSelectCallbackContext);
+  if (onValueSelect === null) {
+    throw new Error("useOnValueSelectCallback: OnValueSelectContext not found");
+  }
+  return onValueSelect;
+}
+function useOnResetMatchCallback() {
+  const onResetMatch = useContext(OnResetMatchCallbackContext);
+  if (onResetMatch === null) {
+    throw new Error("useOnResetMatchCallback: OnResetMatchContext not found");
+  }
+  return onResetMatch;
+}
 
-export { Item, List };
+export { Item, List, OnResetMatchCallbackContext, OnValueSelectCallbackContext, SuggestionsContext };
 //# sourceMappingURL=suggestions.mjs.map

package/dist/mentions/suggestions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"suggestions.mjs","sources":["../../src/mentions/suggestions.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  COMMAND_PRIORITY_LOW,\n  KEY_ARROW_DOWN_COMMAND,\n  KEY_ARROW_UP_COMMAND,\n  KEY_ENTER_COMMAND,\n  KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport type {\n  Dispatch,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  SetStateAction,\n} from \"react\";\nimport React, {\n  createContext,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  useOnResetMatchCallback,\n  useOnValueSelectCallback,\n  useSuggestions,\n} from \"./mention-plugin\";\n\nconst HighlightedIndexContext = createContext<\n  [number, Dispatch<SetStateAction<number>>] | null\n>(null);\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nconst List = forwardRef<HTMLDivElement, ListProps>(\n  function (props, forwardedRef) {\n    const { children, ...divProps } = props;\n    const [editor] = useLexicalComposerContext();\n    const [highlightedIndex, setHighlightedIndex] = useState(0);\n    const values = useSuggestions();\n    const onValueSelect = useOnValueSelectCallback();\n    const onEscapeKeyDown = useOnResetMatchCallback();\n\n    useEffect(() => {\n      function onKeyArrowDown(event: KeyboardEvent): boolean {\n        if (values.length === 0) return true;\n        if (highlightedIndex === null) return true;\n\n        // If the highlighted index is at the last suggestion, then we loop back to the first suggestion, otherwise we increment the index.\n        const nextIndex =\n          highlightedIndex === values.length - 1 ? 0 : highlightedIndex + 1;\n        setHighlightedIndex(nextIndex);\n\n        event.preventDefault();\n        event.stopImmediatePropagation();\n\n        return true;\n      }\n\n      return editor.registerCommand(\n        KEY_ARROW_DOWN_COMMAND,\n        onKeyArrowDown,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, highlightedIndex, values]);\n\n    useEffect(() => {\n      function onKeyArrowUp(event: KeyboardEvent): boolean {\n        if (values.length === 0) return true;\n        if (highlightedIndex === null) return true;\n\n        // If the highlighted index is at the first suggestion, then we loop back to the last suggestion, otherwise we decrement the index.\n        const nextIndex =\n          highlightedIndex === 0 ? values.length - 1 : highlightedIndex - 1;\n        setHighlightedIndex(nextIndex);\n\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        return true;\n      }\n\n      return editor.registerCommand(\n        KEY_ARROW_UP_COMMAND,\n        onKeyArrowUp,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, highlightedIndex, values]);\n\n    useEffect(() => {\n      function onKeyEscape(event: KeyboardEvent): boolean {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n\n        onEscapeKeyDown();\n        return true;\n      }\n\n      return editor.registerCommand<KeyboardEvent>(\n        KEY_ESCAPE_COMMAND,\n        onKeyEscape,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, onEscapeKeyDown]);\n\n    useEffect(() => {\n      function onKeyEnter(event: KeyboardEvent | null): boolean {\n        if (values.length === 0) return true;\n\n        onValueSelect(values[highlightedIndex]);\n\n        if (event === null) return true;\n\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        return true;\n      }\n\n      return editor.registerCommand(\n        KEY_ENTER_COMMAND,\n        onKeyEnter,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, onValueSelect, highlightedIndex, values]);\n\n    useEffect(() => {\n      const root = editor.getRootElement();\n      if (root === null) return;\n\n      root.setAttribute(\n        \"aria-activedescendant\",\n        `typeahead-item-${highlightedIndex}`\n      );\n\n      return () => {\n        root.removeAttribute(\"aria-activedescendant\");\n      };\n    }, [editor, highlightedIndex]);\n\n    return (\n      <HighlightedIndexContext.Provider\n        value={[highlightedIndex, setHighlightedIndex]}\n      >\n        <div role=\"listbox\" {...divProps} ref={forwardedRef}>\n          {children}\n        </div>\n      </HighlightedIndexContext.Provider>\n    );\n  }\n);\n\ninterface ItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nconst Item = forwardRef<HTMLDivElement | null, ItemProps>(\n  function Item(props, forwardedRef) {\n    const { children, value, onMouseEnter, onClick, ...divProps } = props;\n    const divRef = useRef<HTMLDivElement>(null);\n\n    const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();\n    const suggestions = useSuggestions();\n    const onValueSelect = useOnValueSelectCallback();\n\n    const isHighlighted = suggestions[highlightedIndex] === value;\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => divRef.current\n    );\n\n    useEffect(() => {\n      if (!isHighlighted) return;\n\n      const div = divRef.current;\n      if (div === null) return;\n\n      div.scrollIntoView({ block: \"nearest\" });\n    }, [isHighlighted]);\n\n    function handleMouseEnter(event: MouseEvent<HTMLDivElement>) {\n      onMouseEnter?.(event);\n\n      if (event.isDefaultPrevented()) return;\n\n      const index = suggestions.indexOf(value);\n      if (index === -1) return;\n\n      setHighlightedIndex(index);\n    }\n\n    function handleClick(event: MouseEvent<HTMLDivElement>) {\n      onClick?.(event);\n\n      if (event.isDefaultPrevented()) return;\n\n      onValueSelect(value);\n    }\n\n    return (\n      <div\n        role=\"option\"\n        data-highlighted={isHighlighted || undefined}\n        onMouseEnter={handleMouseEnter}\n        onClick={handleClick}\n        {...divProps}\n        ref={divRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nfunction useHighlightedIndex(): [\n  number,\n  React.Dispatch<React.SetStateAction<number>>,\n] {\n  const context = React.useContext(HighlightedIndexContext);\n  if (context === null) {\n    throw new Error(\n      \"useHighlightedIndex must be used within a HighlightedIndexProvider\"\n    );\n  }\n  return context;\n}\n\nexport { Item, List };\n"],"names":["React","Item"],"mappings":"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"}
+{"version":3,"file":"suggestions.mjs","sources":["../../src/mentions/suggestions.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  COMMAND_PRIORITY_LOW,\n  KEY_ARROW_DOWN_COMMAND,\n  KEY_ARROW_UP_COMMAND,\n  KEY_ENTER_COMMAND,\n  KEY_ESCAPE_COMMAND,\n} from \"lexical\";\nimport type {\n  Dispatch,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  SetStateAction,\n} from \"react\";\nimport React, {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nexport const SuggestionsContext = createContext<string[] | null>(null);\n\nexport const OnValueSelectCallbackContext = createContext<\n  ((value: string) => void) | null\n>(null);\n\nexport const OnResetMatchCallbackContext = createContext<(() => void) | null>(\n  null\n);\n\nconst HighlightedIndexContext = createContext<\n  [number, Dispatch<SetStateAction<number>>] | null\n>(null);\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nconst List = forwardRef<HTMLDivElement, ListProps>(\n  function (props, forwardedRef) {\n    const { children, ...divProps } = props;\n    const [editor] = useLexicalComposerContext();\n    const [highlightedIndex, setHighlightedIndex] = useState(0);\n    const values = useSuggestions();\n    const onValueSelect = useOnValueSelectCallback();\n    const onEscapeKeyDown = useOnResetMatchCallback();\n\n    useEffect(() => {\n      function onKeyArrowDown(event: KeyboardEvent): boolean {\n        if (values.length === 0) return true;\n        if (highlightedIndex === null) return true;\n\n        // If the highlighted index is at the last suggestion, then we loop back to the first suggestion, otherwise we increment the index.\n        const nextIndex =\n          highlightedIndex === values.length - 1 ? 0 : highlightedIndex + 1;\n        setHighlightedIndex(nextIndex);\n\n        event.preventDefault();\n        event.stopImmediatePropagation();\n\n        return true;\n      }\n\n      return editor.registerCommand(\n        KEY_ARROW_DOWN_COMMAND,\n        onKeyArrowDown,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, highlightedIndex, values]);\n\n    useEffect(() => {\n      function onKeyArrowUp(event: KeyboardEvent): boolean {\n        if (values.length === 0) return true;\n        if (highlightedIndex === null) return true;\n\n        // If the highlighted index is at the first suggestion, then we loop back to the last suggestion, otherwise we decrement the index.\n        const nextIndex =\n          highlightedIndex === 0 ? values.length - 1 : highlightedIndex - 1;\n        setHighlightedIndex(nextIndex);\n\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        return true;\n      }\n\n      return editor.registerCommand(\n        KEY_ARROW_UP_COMMAND,\n        onKeyArrowUp,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, highlightedIndex, values]);\n\n    useEffect(() => {\n      function onKeyEscape(event: KeyboardEvent): boolean {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n\n        onEscapeKeyDown();\n        return true;\n      }\n\n      return editor.registerCommand<KeyboardEvent>(\n        KEY_ESCAPE_COMMAND,\n        onKeyEscape,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, onEscapeKeyDown]);\n\n    useEffect(() => {\n      function onKeyEnter(event: KeyboardEvent | null): boolean {\n        if (values.length === 0) return true;\n\n        onValueSelect(values[highlightedIndex]);\n\n        if (event === null) return true;\n\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        return true;\n      }\n\n      return editor.registerCommand(\n        KEY_ENTER_COMMAND,\n        onKeyEnter,\n        COMMAND_PRIORITY_LOW\n      );\n    }, [editor, onValueSelect, highlightedIndex, values]);\n\n    useEffect(() => {\n      const root = editor.getRootElement();\n      if (root === null) return;\n\n      root.setAttribute(\n        \"aria-activedescendant\",\n        `typeahead-item-${highlightedIndex}`\n      );\n\n      return () => {\n        root.removeAttribute(\"aria-activedescendant\");\n      };\n    }, [editor, highlightedIndex]);\n\n    return (\n      <HighlightedIndexContext.Provider\n        value={[highlightedIndex, setHighlightedIndex]}\n      >\n        <div role=\"listbox\" {...divProps} ref={forwardedRef}>\n          {children}\n        </div>\n      </HighlightedIndexContext.Provider>\n    );\n  }\n);\n\ninterface ItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nconst Item = forwardRef<HTMLDivElement | null, ItemProps>(\n  function Item(props, forwardedRef) {\n    const { children, value, onMouseEnter, onClick, ...divProps } = props;\n    const divRef = useRef<HTMLDivElement>(null);\n\n    const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex();\n    const suggestions = useSuggestions();\n    const onValueSelect = useOnValueSelectCallback();\n\n    const isHighlighted = suggestions[highlightedIndex] === value;\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => divRef.current\n    );\n\n    useEffect(() => {\n      if (!isHighlighted) return;\n\n      const div = divRef.current;\n      if (div === null) return;\n\n      div.scrollIntoView({ block: \"nearest\" });\n    }, [isHighlighted]);\n\n    function handleMouseEnter(event: MouseEvent<HTMLDivElement>) {\n      onMouseEnter?.(event);\n\n      if (event.isDefaultPrevented()) return;\n\n      const index = suggestions.indexOf(value);\n      if (index === -1) return;\n\n      setHighlightedIndex(index);\n    }\n\n    function handleClick(event: MouseEvent<HTMLDivElement>) {\n      onClick?.(event);\n\n      if (event.isDefaultPrevented()) return;\n\n      onValueSelect(value);\n    }\n\n    return (\n      <div\n        role=\"option\"\n        data-highlighted={isHighlighted || undefined}\n        onMouseEnter={handleMouseEnter}\n        onClick={handleClick}\n        {...divProps}\n        ref={divRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nfunction useHighlightedIndex(): [\n  number,\n  React.Dispatch<React.SetStateAction<number>>,\n] {\n  const context = React.useContext(HighlightedIndexContext);\n  if (context === null) {\n    throw new Error(\n      \"useHighlightedIndex must be used within a HighlightedIndexProvider\"\n    );\n  }\n  return context;\n}\n\nfunction useSuggestions(): string[] {\n  const suggestions = useContext(SuggestionsContext);\n  if (suggestions === null) {\n    throw new Error(\"useSuggestions: SuggestionsContext not found\");\n  }\n\n  return suggestions;\n}\n\nfunction useOnValueSelectCallback(): (value: string) => void {\n  const onValueSelect = useContext(OnValueSelectCallbackContext);\n  if (onValueSelect === null) {\n    throw new Error(\"useOnValueSelectCallback: OnValueSelectContext not found\");\n  }\n\n  return onValueSelect;\n}\n\nfunction useOnResetMatchCallback(): () => void {\n  const onResetMatch = useContext(OnResetMatchCallbackContext);\n  if (onResetMatch === null) {\n    throw new Error(\"useOnResetMatchCallback: OnResetMatchContext not found\");\n  }\n\n  return onResetMatch;\n}\n\nexport { Item, List };\n"],"names":["React","Item"],"mappings":"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"}

package/dist/mentions/user.js

@@ -1,18 +1,21 @@
 '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 || user === null ? "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);
   }
 );

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\nexport const 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 || user === null ? \"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"],"names":["forwardRef","User","useSharedContextBundle"],"mappings":";;;;;AASO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,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,OAAO,IAAS,KAAA,KAAA,CAAA,IAAa,IAAS,KAAA,IAAA,GAAO,cAAc,IAAK,CAAA,IAAA,CAAA;AAEtE,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,16 +1,19 @@
-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 || user === null ? "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);
   }
 );

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\nexport const 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 || user === null ? \"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"],"names":["User","React"],"mappings":";;;AASO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,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,OAAO,IAAS,KAAA,KAAA,CAAA,IAAa,IAAS,KAAA,IAAA,GAAO,cAAc,IAAK,CAAA,IAAA,CAAA;AAEtE,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-lexical6" === "string" && "1.12.0-lexical6";
+const PKG_VERSION = typeof "2.0.0-alpha3" === "string" && "2.0.0-alpha3";
 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-lexical6" === "string" && "1.12.0-lexical6";
+const PKG_VERSION = typeof "2.0.0-alpha3" === "string" && "2.0.0-alpha3";
 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,6 +1,6 @@
 {
   "name": "@liveblocks/react-lexical",
-  "version": "1.12.0-lexical6",
+  "version": "2.0.0-alpha3",
   "description": "A lexical react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -41,23 +41,24 @@
     "test:watch": "jest --silent --verbose --color=always --watch"
   },
   "dependencies": {
-    "@liveblocks/client": "1.12.0-lexical6",
-    "@liveblocks/core": "1.12.0-lexical6",
-    "@liveblocks/react": "1.12.0-lexical6",
-    "@liveblocks/react-comments": "1.12.0-lexical6",
-    "@liveblocks/yjs": "1.12.0-lexical6",
+    "@floating-ui/react-dom": "^2.1.0",
+    "@liveblocks/client": "2.0.0-alpha3",
+    "@liveblocks/core": "2.0.0-alpha3",
+    "@liveblocks/react": "2.0.0-alpha3",
+    "@liveblocks/react-ui": "2.0.0-alpha3",
+    "@liveblocks/yjs": "2.0.0-alpha3",
+    "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",
@@ -67,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

@@ -1,12 +1,165 @@
-.lb-lexical-threads-empty {
+@import "./utils";
+@import "./constants";
+
+.lb-lexical-thread-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.lb-lexical-thread-panel-empty {
+  position: absolute;
+  inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  block-size: max-content;
-  color: rgb(55 53 47 / 50%);
+  padding: var(--lb-spacing);
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+  text-align: center;
+  text-wrap: balance;
+}
+
+.lb-lexical-thread-panel-thread {
+  &:where(:not(:last-of-type)) {
+    border-block-end: 1px solid var(--lb-foreground-subtle);
+  }
+}
+
+/*************************************
+ *       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);
 }
 
-.lb-lexical-threads {
+/*************************************
+ *          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;
-  flex-direction: column;
+  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

@@ -1 +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-thread-panel{flex-direction:column;display:flex}.lb-lexical-thread-panel-empty{padding:var(--lb-spacing);color:var(--lb-foreground-tertiary);text-align:center;text-wrap:balance;justify-content:center;align-items:center;font-size:.875em;display:flex;position:absolute;inset:0}.lb-lexical-thread-panel-thread:where(:not(:last-of-type)){border-block-end:1px solid var(--lb-foreground-subtle)}.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.map

@@ -1 +1 @@
-{"version":3,"sources":["src/styles/src/styles/index.css"],"names":[],"mappings":"AAAA,0BAAA,eAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,sBAAA,CAAA,YAAA,CAQA,oBAAA,qBAAA,CAAA,YAAA","file":"styles.css","sourcesContent":[".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"]}
+{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAGA,yBAAA,qBAAA,CAAA,YAAA,CAKA,+BAAA,yBAAA,CAAA,mCAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,OAAA,CAcE,2DAAA,sDAAA,CASF,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,CC1HE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CDoIA,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-thread-panel {\n  display: flex;\n  flex-direction: column;\n}\n\n.lb-lexical-thread-panel-empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--lb-spacing);\n  color: var(--lb-foreground-tertiary);\n  font-size: 0.875em;\n  text-align: center;\n  text-wrap: balance;\n}\n\n.lb-lexical-thread-panel-thread {\n  &:where(:not(:last-of-type)) {\n    border-block-end: 1px solid var(--lb-foreground-subtle);\n  }\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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"}