zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/src/shared/useDecorators.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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, NodeKey} from 'lexical';
+import type {JSX} from 'react';
+
+import {Suspense, useEffect, useMemo, useState} from 'react';
+import * as React from 'react';
+import {createPortal, flushSync} from 'react-dom';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+type ErrorBoundaryProps = {
+  children: JSX.Element;
+  onError: (error: Error) => void;
+};
+
+export type ErrorBoundaryType =
+  | React.ComponentClass<ErrorBoundaryProps>
+  | React.FC<ErrorBoundaryProps>;
+
+export function useDecorators(
+  editor: LexicalEditor,
+  ErrorBoundary: ErrorBoundaryType,
+): Array<JSX.Element> {
+  const [decorators, setDecorators] = useState<Record<NodeKey, JSX.Element>>(
+    () => editor.getDecorators<JSX.Element>(),
+  );
+
+  // Subscribe to changes
+  useLayoutEffect(() => {
+    return editor.registerDecoratorListener<JSX.Element>((nextDecorators) => {
+      flushSync(() => {
+        setDecorators(nextDecorators);
+      });
+    });
+  }, [editor]);
+
+  useEffect(() => {
+    // If the content editable mounts before the subscription is added, then
+    // nothing will be rendered on initial pass. We can get around that by
+    // ensuring that we set the value.
+    setDecorators(editor.getDecorators());
+  }, [editor]);
+
+  // Return decorators defined as React Portals
+  return useMemo(() => {
+    const decoratedPortals = [];
+    const decoratorKeys = Object.keys(decorators);
+
+    for (let i = 0; i < decoratorKeys.length; i++) {
+      const nodeKey = decoratorKeys[i];
+      const reactDecorator = (
+        <ErrorBoundary onError={(e) => editor._onError(e)}>
+          <Suspense fallback={null}>{decorators[nodeKey]}</Suspense>
+        </ErrorBoundary>
+      );
+      const element = editor.getElementByKey(nodeKey);
+
+      if (element !== null) {
+        decoratedPortals.push(createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}

package/src/shared/useHistory.ts

@@ -0,0 +1,28 @@
+/**
+ * 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';
+
+import {createEmptyHistoryState, registerHistory} from '@lexical/history';
+import {useEffect, useMemo} from 'react';
+
+export function useHistory(
+  editor: LexicalEditor,
+  externalHistoryState?: HistoryState,
+  delay = 1000,
+): void {
+  const historyState: HistoryState = useMemo(
+    () => externalHistoryState || createEmptyHistoryState(),
+    [externalHistoryState],
+  );
+
+  useEffect(() => {
+    return registerHistory(editor, historyState, delay);
+  }, [delay, editor, historyState]);
+}

package/src/shared/useList.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 {registerList} from '@lexical/list';
+import {useEffect} from 'react';
+
+export function useList(editor: LexicalEditor): void {
+  useEffect(() => {
+    return registerList(editor);
+  }, [editor]);
+}

package/src/shared/usePlainTextSetup.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 {registerDragonSupport} from '@lexical/dragon';
+import {registerPlainText} from '@lexical/plain-text';
+import {mergeRegister} from '@lexical/utils';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export function usePlainTextSetup(editor: LexicalEditor): void {
+  useLayoutEffect(() => {
+    return mergeRegister(
+      registerPlainText(editor),
+      registerDragonSupport(editor),
+    );
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+}

package/src/shared/useReactDecorators.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 {Suspense, useMemo, useSyncExternalStore} from 'react';
+import {createPortal} from 'react-dom';
+
+import {type ErrorBoundaryType} from './types';
+
+/** @internal */
+export function useReactDecorators(
+  editor: LexicalEditor,
+  ErrorBoundary: ErrorBoundaryType,
+): JSX.Element[] {
+  const [subscribe, getSnapshot] = useMemo(
+    () =>
+      [
+        (cb: () => void) => editor.registerDecoratorListener(cb),
+        () => editor.getDecorators<JSX.Element>(),
+      ] as const,
+    [editor],
+  );
+  const decorators = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  // Return decorators defined as React Portals
+  return useMemo(() => {
+    const decoratedPortals = [];
+    for (const nodeKey in decorators) {
+      const element = editor.getElementByKey(nodeKey);
+
+      if (element !== null) {
+        const reactDecorator = (
+          <ErrorBoundary
+            onError={(e) => {
+              editor._onError(e);
+            }}>
+            <Suspense fallback={null}>{decorators[nodeKey]}</Suspense>
+          </ErrorBoundary>
+        );
+        decoratedPortals.push(createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}

package/src/shared/useRichTextSetup.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 {registerDragonSupport} from '@lexical/dragon';
+import {registerRichText} from '@lexical/rich-text';
+import {mergeRegister} from '@lexical/utils';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export function useRichTextSetup(editor: LexicalEditor): void {
+  useLayoutEffect(() => {
+    return mergeRegister(
+      registerRichText(editor),
+      registerDragonSupport(editor),
+    );
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+}