zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/npm/shared/LegacyDecorators.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+import { type LexicalEditor } from 'lexical';
+import { type ErrorBoundaryType } from './useDecorators';
+export { type ErrorBoundaryType };
+/**
+ * @internal
+ *
+ * When using @lexical/extension, the ReactProvider is expected to handle
+ * rendering decorators. This component allows RichTextPlugin and
+ * PlainTextPlugin to be used in extension projects that have not yet
+ * migrated to use RichTextExtension or PlainTextExtension.
+ **/
+export declare function LegacyDecorators({ editor, ErrorBoundary, }: {
+    editor: LexicalEditor;
+    ErrorBoundary: ErrorBoundaryType;
+}): JSX.Element | null;

package/npm/shared/LexicalContentEditableElement.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import * as React from 'react';
+export type ContentEditableElementProps = {
+    editor: LexicalEditor;
+    ariaActiveDescendant?: React.AriaAttributes['aria-activedescendant'];
+    ariaAutoComplete?: React.AriaAttributes['aria-autocomplete'];
+    ariaControls?: React.AriaAttributes['aria-controls'];
+    ariaDescribedBy?: React.AriaAttributes['aria-describedby'];
+    ariaErrorMessage?: React.AriaAttributes['aria-errormessage'];
+    ariaExpanded?: React.AriaAttributes['aria-expanded'];
+    ariaInvalid?: React.AriaAttributes['aria-invalid'];
+    ariaLabel?: React.AriaAttributes['aria-label'];
+    ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];
+    ariaMultiline?: React.AriaAttributes['aria-multiline'];
+    ariaOwns?: React.AriaAttributes['aria-owns'];
+    ariaRequired?: React.AriaAttributes['aria-required'];
+    autoCapitalize?: HTMLDivElement['autocapitalize'];
+    'data-testid'?: string | null | undefined;
+} & Omit<React.AllHTMLAttributes<HTMLDivElement>, 'placeholder'>;
+export declare const ContentEditableElement: React.ForwardRefExoticComponent<{
+    editor: LexicalEditor;
+    ariaActiveDescendant?: React.AriaAttributes["aria-activedescendant"];
+    ariaAutoComplete?: React.AriaAttributes["aria-autocomplete"];
+    ariaControls?: React.AriaAttributes["aria-controls"];
+    ariaDescribedBy?: React.AriaAttributes["aria-describedby"];
+    ariaErrorMessage?: React.AriaAttributes["aria-errormessage"];
+    ariaExpanded?: React.AriaAttributes["aria-expanded"];
+    ariaInvalid?: React.AriaAttributes["aria-invalid"];
+    ariaLabel?: React.AriaAttributes["aria-label"];
+    ariaLabelledBy?: React.AriaAttributes["aria-labelledby"];
+    ariaMultiline?: React.AriaAttributes["aria-multiline"];
+    ariaOwns?: React.AriaAttributes["aria-owns"];
+    ariaRequired?: React.AriaAttributes["aria-required"];
+    autoCapitalize?: HTMLDivElement["autocapitalize"];
+    'data-testid'?: string | null | undefined;
+} & Omit<React.AllHTMLAttributes<HTMLDivElement>, "placeholder"> & React.RefAttributes<HTMLDivElement>>;

package/npm/shared/LexicalMenu.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+import { CommandListenerPriority, LexicalCommand, LexicalEditor, TextNode } from 'lexical';
+import { ReactPortal, RefObject } from 'react';
+export type MenuTextMatch = {
+    leadOffset: number;
+    matchingString: string;
+    replaceableString: string;
+};
+export type MenuResolution = {
+    match?: MenuTextMatch;
+    getRect: () => DOMRect;
+};
+export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+export declare class MenuOption {
+    key: string;
+    ref?: RefObject<HTMLElement | null>;
+    constructor(key: string);
+    setRefElement(element: HTMLElement | null): void;
+}
+export type MenuRenderFn<TOption extends MenuOption> = (anchorElementRef: RefObject<HTMLElement | null>, itemProps: {
+    selectedIndex: number | null;
+    selectOptionAndCleanUp: (option: TOption) => void;
+    setHighlightedIndex: (index: number) => void;
+    options: Array<TOption>;
+}, matchingString: string | null) => ReactPortal | JSX.Element | null;
+export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
+export declare function useDynamicPositioning(resolution: MenuResolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
+export declare const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
+    index: number;
+    option: MenuOption;
+}>;
+export declare function LexicalMenu<TOption extends MenuOption>({ close, editor, anchorElementRef, resolution, options, menuRenderFn, onSelectOption, shouldSplitNodeWithQuery, commandPriority, preselectFirstItem, }: {
+    close: () => void;
+    editor: LexicalEditor;
+    anchorElementRef: RefObject<HTMLElement | null>;
+    resolution: MenuResolution;
+    options: Array<TOption>;
+    shouldSplitNodeWithQuery?: boolean;
+    menuRenderFn: MenuRenderFn<TOption>;
+    onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
+    commandPriority?: CommandListenerPriority;
+    preselectFirstItem?: boolean;
+}): JSX.Element | null;
+export declare function useMenuAnchorRef(resolution: MenuResolution | null, setResolution: (r: MenuResolution | null) => void, className?: string, parent?: HTMLElement | undefined, shouldIncludePageYOffset__EXPERIMENTAL?: boolean): RefObject<HTMLElement | null>;
+export type TriggerFn = (text: string, editor: LexicalEditor) => MenuTextMatch | null;

package/npm/shared/buildEditorComponent.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { type LexicalComposerContextWithEditor } from '@lexical/react/LexicalComposerContext';
+import { type EditorComponentProps, type ReactConfig } from './types';
+/** @internal */
+export declare function buildEditorComponent(config: ReactConfig, context: LexicalComposerContextWithEditor): (props: Partial<EditorComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/npm/shared/mergeRefs.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { Ref } from 'react';
+export declare function mergeRefs<T>(...refs: Ref<T>[]): (value: null | T) => void;

package/npm/shared/point.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare class Point {
+    private readonly _x;
+    private readonly _y;
+    constructor(x: number, y: number);
+    get x(): number;
+    get y(): number;
+    equals({ x, y }: Point): boolean;
+    calcDeltaXTo({ x }: Point): number;
+    calcDeltaYTo({ y }: Point): number;
+    calcHorizontalDistanceTo(point: Point): number;
+    calcVerticalDistance(point: Point): number;
+    calcDistanceTo(point: Point): number;
+}
+export declare function isPoint(x: unknown): x is Point;

package/npm/shared/rect.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Point } from './point';
+type ContainsPointReturn = {
+    result: boolean;
+    reason: {
+        isOnTopSide: boolean;
+        isOnBottomSide: boolean;
+        isOnLeftSide: boolean;
+        isOnRightSide: boolean;
+    };
+};
+export declare class Rectangle {
+    private readonly _left;
+    private readonly _top;
+    private readonly _right;
+    private readonly _bottom;
+    constructor(left: number, top: number, right: number, bottom: number);
+    get top(): number;
+    get right(): number;
+    get bottom(): number;
+    get left(): number;
+    get width(): number;
+    get height(): number;
+    equals({ top, left, bottom, right }: Rectangle): boolean;
+    contains({ x, y }: Point): ContainsPointReturn;
+    contains({ top, left, bottom, right }: Rectangle): boolean;
+    intersectsWith(rect: Rectangle): boolean;
+    generateNewRect({ left, top, right, bottom, }: {
+        left?: number | undefined;
+        top?: number | undefined;
+        right?: number | undefined;
+        bottom?: number | undefined;
+    }): Rectangle;
+    static fromLTRB(left: number, top: number, right: number, bottom: number): Rectangle;
+    static fromLWTH(left: number, width: number, top: number, height: number): Rectangle;
+    static fromPoints(startPoint: Point, endPoint: Point): Rectangle;
+    static fromDOM(dom: HTMLElement): Rectangle;
+}
+export {};

package/npm/shared/types.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalComposerContextWithEditor } from '@lexical/react/LexicalComposerContext';
+import type { JSX } from 'react';
+export interface EditorChildrenComponentProps {
+    context: LexicalComposerContextWithEditor;
+    contentEditable: null | JSX.Element;
+    children?: React.ReactNode;
+}
+export type EditorChildrenComponentType = (props: EditorChildrenComponentProps) => JSX.Element | null;
+export interface DecoratorComponentProps {
+    context: LexicalComposerContextWithEditor;
+}
+export type DecoratorComponentType = JSX.Element | ((props: DecoratorComponentProps) => JSX.Element | null);
+export interface EditorComponentProps {
+    /**
+     * The EditorChildrenComponent from the config
+     */
+    EditorChildrenComponent: EditorChildrenComponentType;
+    /**
+     * The children to pass to EditorChildrenComponent
+     */
+    children?: React.ReactNode;
+    /**
+     * contentEditable from the config
+     */
+    contentEditable: JSX.Element | null;
+    /**
+     * ErrorBoundary from the config
+     */
+    ErrorBoundary: ErrorBoundaryType;
+}
+export type EditorComponentType = (
+/** Optional overrides to any of the props, typically only children is used */
+props: Partial<EditorComponentProps>) => JSX.Element;
+export interface ReactConfig {
+    /**
+     * The default root element of the editor as JSX. Uses `<ContentEditable />`
+     * from \@lexical/react/ContentEditable by default,
+     * but may be null or another component.
+     *
+     * This component is responsible for calling `editor.setRootElement(elem)`.
+     */
+    contentEditable: JSX.Element | null;
+    /**
+     * The ErrorBoundary used for rendering decorators in the editor. By default
+     * it is `ErrorBoundary` from \@lexical/react/ErrorBoundary.
+     */
+    ErrorBoundary: ErrorBoundaryType;
+    /**
+     * The component that renders the children of the editor context, by default
+     * it is {@link DefaultEditorChildrenComponent} which takes the given props
+     * and renders them in this order:
+     *
+     * - contentEditable
+     * - children
+     */
+    EditorChildrenComponent: EditorChildrenComponentType;
+    /**
+     * An array of JSX or components that return JSX that should be rendered
+     * as children of Component. These will be merged by array concatenation.
+     */
+    decorators: readonly DecoratorComponentType[];
+}
+export interface ReactOutputs {
+    /**
+     * The editor component, this can be used by Extensions that depend on this to
+     * render the editor such as {@link ReactPluginHostExtension} or internally by
+     * {@link LexicalExtensionComposer}.
+     *
+     * All props have defaults based on the config and editor state, but may be
+     * overridden.
+     */
+    Component: EditorComponentType;
+    /**
+     * This is equivalent to useLexicalComposerContext() from \@lexical/react/LexicalComposerContext.
+     */
+    context: LexicalComposerContextWithEditor;
+}
+export interface ErrorBoundaryProps {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+}
+export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;

package/npm/shared/useCanShowPlaceholder.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useCanShowPlaceholder(editor: LexicalEditor): boolean;

package/npm/shared/useCharacterLimit.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import { OverflowNode } from '@lexical/overflow';
+type OptionalProps = {
+    remainingCharacters?: (characters: number) => void;
+    strlen?: (input: string) => number;
+};
+export declare function useCharacterLimit(editor: LexicalEditor, maxCharacters: number, optional?: OptionalProps): void;
+export declare function $mergePrevious(overflowNode: OverflowNode): void;
+export {};

package/npm/shared/useDecorators.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import type { JSX } from 'react';
+import * as React from 'react';
+type ErrorBoundaryProps = {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+};
+export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
+export {};

package/npm/shared/useHistory.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { HistoryState } from '@lexical/history';
+import type { LexicalEditor } from 'lexical';
+export declare function useHistory(editor: LexicalEditor, externalHistoryState?: HistoryState, delay?: number): void;

package/npm/shared/useList.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useList(editor: LexicalEditor): void;

package/npm/shared/usePlainTextSetup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function usePlainTextSetup(editor: LexicalEditor): void;

package/npm/shared/useReactDecorators.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import type { JSX } from 'react';
+import { type ErrorBoundaryType } from './types';
+/** @internal */
+export declare function useReactDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): JSX.Element[];

package/npm/shared/useRichTextSetup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useRichTextSetup(editor: LexicalEditor): void;

package/npm/shared/useYjsCollaboration.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { BaseBinding, Binding, BindingV2, ExcludedProperties, Provider, SyncCursorPositionsFn } from '@lexical/yjs';
+import type { LexicalEditor } from 'lexical';
+import type { JSX } from 'react';
+import * as React from 'react';
+import { Doc } from 'yjs';
+import { InitialEditorStateType } from '../LexicalComposer';
+export type CursorsContainerRef = React.RefObject<HTMLElement | null>;
+export declare function useYjsCollaboration(editor: LexicalEditor, id: string, provider: Provider, docMap: Map<string, Doc>, name: string, color: string, shouldBootstrap: boolean, binding: Binding, setDoc: React.Dispatch<React.SetStateAction<Doc | undefined>>, cursorsContainerRef?: CursorsContainerRef, initialEditorState?: InitialEditorStateType, awarenessData?: object, syncCursorPositionsFn?: SyncCursorPositionsFn): JSX.Element;
+export declare function useYjsCollaborationV2__EXPERIMENTAL(editor: LexicalEditor, id: string, doc: Doc, provider: Provider, docMap: Map<string, Doc>, name: string, color: string, options?: {
+    awarenessData?: object;
+    excludedProperties?: ExcludedProperties;
+    rootName?: string;
+    __shouldBootstrapUnsafe?: boolean;
+}): BindingV2;
+export declare function useYjsCursors(binding: BaseBinding, cursorsContainerRef?: CursorsContainerRef): JSX.Element;
+export declare function useYjsFocusTracking(editor: LexicalEditor, provider: Provider, name: string, color: string, awarenessData?: object): void;
+export declare function useYjsHistory(editor: LexicalEditor, binding: Binding): () => void;
+export declare function useYjsHistoryV2(editor: LexicalEditor, binding: BindingV2): () => void;

package/npm/useExtensionComponent.d.ts

@@ -0,0 +1,10 @@
+import { type AnyLexicalExtension, type LexicalExtensionDependency, type OutputComponentExtension } from 'lexical';
+export declare function useExtensionDependency<Extension extends AnyLexicalExtension>(extension: Extension): LexicalExtensionDependency<Extension>;
+/**
+ * Use a Component from the given Extension that uses the ReactExtension convention
+ * of exposing a Component property in its output.
+ *
+ * @param extension - An extension with a Component property in the output
+ * @returns `getExtensionConfigFromEditor(useLexicalComposerContext()[0], extension).Component`
+ */
+export declare function useExtensionComponent<Props extends Record<never, never>, OutputComponent extends React.ComponentType<Props>, Extension extends OutputComponentExtension<OutputComponent>>(extension: Extension): OutputComponent;

package/npm/useLexicalEditable.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * Get the current value for {@link LexicalEditor.isEditable}
+ * using {@link useLexicalSubscription}.
+ * You should prefer this over manually observing the value with
+ * {@link LexicalEditor.registerEditableListener},
+ * which is a bit tricky to do correctly, particularly when using
+ * React StrictMode (the default for development) or concurrency.
+ */
+export declare function useLexicalEditable(): boolean;

package/npm/useLexicalEditable.dev.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var react = require('react');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl = CAN_USE_DOM ? react.useLayoutEffect : react.useEffect;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ * @param subscription - The function to create the {@link LexicalSubscription}. This function's identity must be stable (e.g. defined at module scope or with useCallback).
+ */
+function useLexicalSubscription(subscription) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const initializedSubscription = react.useMemo(() => subscription(editor), [editor, subscription]);
+  const [value, setValue] = react.useState(() => initializedSubscription.initialValueFn());
+  const valueRef = react.useRef(value);
+  useLayoutEffectImpl(() => {
+    const {
+      initialValueFn,
+      subscribe
+    } = initializedSubscription;
+    const currentValue = initialValueFn();
+    if (valueRef.current !== currentValue) {
+      valueRef.current = currentValue;
+      setValue(currentValue);
+    }
+    return subscribe(newValue => {
+      valueRef.current = newValue;
+      setValue(newValue);
+    });
+  }, [initializedSubscription, subscription]);
+  return value;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function subscription(editor) {
+  return {
+    initialValueFn: () => editor.isEditable(),
+    subscribe: callback => {
+      return editor.registerEditableListener(callback);
+    }
+  };
+}
+
+/**
+ * Get the current value for {@link LexicalEditor.isEditable}
+ * using {@link useLexicalSubscription}.
+ * You should prefer this over manually observing the value with
+ * {@link LexicalEditor.registerEditableListener},
+ * which is a bit tricky to do correctly, particularly when using
+ * React StrictMode (the default for development) or concurrency.
+ */
+function useLexicalEditable() {
+  return useLexicalSubscription(subscription);
+}
+
+exports.useLexicalEditable = useLexicalEditable;

package/npm/useLexicalEditable.dev.mjs

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLayoutEffect, useEffect, useMemo, useState, useRef } from 'react';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ * @param subscription - The function to create the {@link LexicalSubscription}. This function's identity must be stable (e.g. defined at module scope or with useCallback).
+ */
+function useLexicalSubscription(subscription) {
+  const [editor] = useLexicalComposerContext();
+  const initializedSubscription = useMemo(() => subscription(editor), [editor, subscription]);
+  const [value, setValue] = useState(() => initializedSubscription.initialValueFn());
+  const valueRef = useRef(value);
+  useLayoutEffectImpl(() => {
+    const {
+      initialValueFn,
+      subscribe
+    } = initializedSubscription;
+    const currentValue = initialValueFn();
+    if (valueRef.current !== currentValue) {
+      valueRef.current = currentValue;
+      setValue(currentValue);
+    }
+    return subscribe(newValue => {
+      valueRef.current = newValue;
+      setValue(newValue);
+    });
+  }, [initializedSubscription, subscription]);
+  return value;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function subscription(editor) {
+  return {
+    initialValueFn: () => editor.isEditable(),
+    subscribe: callback => {
+      return editor.registerEditableListener(callback);
+    }
+  };
+}
+
+/**
+ * Get the current value for {@link LexicalEditor.isEditable}
+ * using {@link useLexicalSubscription}.
+ * You should prefer this over manually observing the value with
+ * {@link LexicalEditor.registerEditableListener},
+ * which is a bit tricky to do correctly, particularly when using
+ * React StrictMode (the default for development) or concurrency.
+ */
+function useLexicalEditable() {
+  return useLexicalSubscription(subscription);
+}
+
+export { useLexicalEditable };