@depup/lexical__react 0.41.0-depup.0

package/LexicalPlainTextPlugin.dev.mjs

@@ -0,0 +1,233 @@
+/**
+ * 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 { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { LexicalBuilder } from '@lexical/extension';
+import { ReactProviderExtension } from '@lexical/react/ReactProviderExtension';
+import { useLayoutEffect, useEffect, useState, useMemo, Suspense } from 'react';
+import { flushSync, createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { $canShowPlaceholderCurry } from '@lexical/text';
+import { mergeRegister } from '@lexical/utils';
+import { registerDragonSupport } from '@lexical/dragon';
+import { registerPlainText } from '@lexical/plain-text';
+
+/**
+ * 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.
+ *
+ */
+
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
+
+/**
+ * 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.
+ *
+ */
+
+function useDecorators(editor, ErrorBoundary) {
+  const [decorators, setDecorators] = useState(() => editor.getDecorators());
+
+  // Subscribe to changes
+  useLayoutEffectImpl(() => {
+    return editor.registerDecoratorListener(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 = /*#__PURE__*/jsx(ErrorBoundary, {
+        onError: e => editor._onError(e),
+        children: /*#__PURE__*/jsx(Suspense, {
+          fallback: null,
+          children: decorators[nodeKey]
+        })
+      });
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        decoratedPortals.push(/*#__PURE__*/createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}
+
+function isUsingReactExtension(editor) {
+  const builder = LexicalBuilder.maybeFromEditor(editor);
+  if (builder && builder.hasExtensionByName(ReactProviderExtension.name)) {
+    for (const name of ['@lexical/plain-text', '@lexical/rich-text']) {
+      if (!!builder.hasExtensionByName(name)) {
+        formatDevErrorMessage(`LexicalBuilder: @lexical/react legacy text plugins conflict with the ${name} extension. Remove the legacy <RichTextPlugin/> or <PlainTextPlugin/> component.`);
+      }
+    }
+    return true;
+  }
+  return false;
+}
+function Decorators({
+  editor,
+  ErrorBoundary
+}) {
+  return useDecorators(editor, ErrorBoundary);
+}
+
+/**
+ * @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.
+ **/
+function LegacyDecorators({
+  editor,
+  ErrorBoundary
+}) {
+  return isUsingReactExtension(editor) ? null : /*#__PURE__*/jsx(Decorators, {
+    editor: editor,
+    ErrorBoundary: ErrorBoundary
+  });
+}
+
+/**
+ * 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 canShowPlaceholderFromCurrentEditorState(editor) {
+  const currentCanShowPlaceholder = editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
+  return currentCanShowPlaceholder;
+}
+function useCanShowPlaceholder(editor) {
+  const [canShowPlaceholder, setCanShowPlaceholder] = useState(() => canShowPlaceholderFromCurrentEditorState(editor));
+  useLayoutEffectImpl(() => {
+    function resetCanShowPlaceholder() {
+      const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
+      setCanShowPlaceholder(currentCanShowPlaceholder);
+    }
+    resetCanShowPlaceholder();
+    return mergeRegister(editor.registerUpdateListener(() => {
+      resetCanShowPlaceholder();
+    }), editor.registerEditableListener(() => {
+      resetCanShowPlaceholder();
+    }));
+  }, [editor]);
+  return canShowPlaceholder;
+}
+
+/**
+ * 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 usePlainTextSetup(editor) {
+  useLayoutEffectImpl(() => {
+    return mergeRegister(registerPlainText(editor), registerDragonSupport(editor));
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+}
+
+/**
+ * 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 PlainTextPlugin({
+  contentEditable,
+  // TODO Remove. This property is now part of ContentEditable
+  placeholder = null,
+  ErrorBoundary
+}) {
+  const [editor] = useLexicalComposerContext();
+  usePlainTextSetup(editor);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [contentEditable, /*#__PURE__*/jsx(Placeholder, {
+      content: placeholder
+    }), /*#__PURE__*/jsx(LegacyDecorators, {
+      editor: editor,
+      ErrorBoundary: ErrorBoundary
+    })]
+  });
+}
+
+// TODO Remove
+function Placeholder({
+  content
+}) {
+  const [editor] = useLexicalComposerContext();
+  const showPlaceholder = useCanShowPlaceholder(editor);
+  const editable = useLexicalEditable();
+  if (!showPlaceholder) {
+    return null;
+  }
+  if (typeof content === 'function') {
+    return content(editable);
+  } else {
+    return content;
+  }
+}
+
+export { PlainTextPlugin };

package/LexicalPlainTextPlugin.js

@@ -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.
+ *
+ */
+
+'use strict'
+const LexicalPlainTextPlugin = process.env.NODE_ENV !== 'production' ? require('./LexicalPlainTextPlugin.dev.js') : require('./LexicalPlainTextPlugin.prod.js');
+module.exports = LexicalPlainTextPlugin;

package/LexicalPlainTextPlugin.js.flow

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {EditorState, LexicalEditor} from 'lexical';
+
+import {typeof LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
+
+import * as React from 'react';
+
+type InitialEditorStateType =
+  | null
+  | string
+  | EditorState
+  | ((editor: LexicalEditor) => void);
+
+declare export function PlainTextPlugin({
+  contentEditable: React.Node,
+  placeholder?:
+  | ((isEditable: boolean) => null | React.Node)
+  | null
+  | React.Node;
+  ErrorBoundary: LexicalErrorBoundary,
+}): React.Node;

package/LexicalPlainTextPlugin.mjs

@@ -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 * as modDev from './LexicalPlainTextPlugin.dev.mjs';
+import * as modProd from './LexicalPlainTextPlugin.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const PlainTextPlugin = mod.PlainTextPlugin;

package/LexicalPlainTextPlugin.node.mjs

@@ -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.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalPlainTextPlugin.dev.mjs') : import('./LexicalPlainTextPlugin.prod.mjs'));
+export const PlainTextPlugin = mod.PlainTextPlugin;

package/LexicalPlainTextPlugin.prod.js

@@ -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.
+ *
+ */
+
+"use strict";var e=require("@lexical/react/LexicalComposerContext"),r=require("@lexical/react/useLexicalEditable"),t=require("@lexical/extension"),n=require("@lexical/react/ReactProviderExtension"),o=require("react"),i=require("react-dom"),c=require("react/jsx-runtime"),a=require("@lexical/text"),s=require("@lexical/utils"),l=require("@lexical/dragon"),u=require("@lexical/plain-text");function d(e,...r){const t=new URL("https://lexical.dev/docs/error"),n=new URLSearchParams;n.append("code",e);for(const e of r)n.append("v",e);throw t.search=n.toString(),Error(`Minified Lexical error #${e}; visit ${t.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}const x="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect;function f({editor:e,ErrorBoundary:r}){return function(e,r){const[t,n]=o.useState(()=>e.getDecorators());return x(()=>e.registerDecoratorListener(e=>{i.flushSync(()=>{n(e)})}),[e]),o.useEffect(()=>{n(e.getDecorators())},[e]),o.useMemo(()=>{const n=[],a=Object.keys(t);for(let s=0;s<a.length;s++){const l=a[s],u=c.jsx(r,{onError:r=>e._onError(r),children:c.jsx(o.Suspense,{fallback:null,children:t[l]})}),d=e.getElementByKey(l);null!==d&&n.push(i.createPortal(u,d,l))}return n},[r,t,e])}(e,r)}function g({editor:e,ErrorBoundary:r}){return function(e){const r=t.LexicalBuilder.maybeFromEditor(e);if(r&&r.hasExtensionByName(n.ReactProviderExtension.name)){for(const e of["@lexical/plain-text","@lexical/rich-text"])r.hasExtensionByName(e)&&d(320,e);return!0}return!1}(e)?null:c.jsx(f,{editor:e,ErrorBoundary:r})}function m(e){return e.getEditorState().read(a.$canShowPlaceholderCurry(e.isComposing()))}function E({content:t}){const[n]=e.useLexicalComposerContext(),i=function(e){const[r,t]=o.useState(()=>m(e));return x(()=>{function r(){const r=m(e);t(r)}return r(),s.mergeRegister(e.registerUpdateListener(()=>{r()}),e.registerEditableListener(()=>{r()}))},[e]),r}(n),c=r.useLexicalEditable();return i?"function"==typeof t?t(c):t:null}exports.PlainTextPlugin=function({contentEditable:r,placeholder:t=null,ErrorBoundary:n}){const[o]=e.useLexicalComposerContext();return function(e){x(()=>s.mergeRegister(u.registerPlainText(e),l.registerDragonSupport(e)),[e])}(o),c.jsxs(c.Fragment,{children:[r,c.jsx(E,{content:t}),c.jsx(g,{editor:o,ErrorBoundary:n})]})};

package/LexicalPlainTextPlugin.prod.mjs

@@ -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{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{useLexicalEditable as e}from"@lexical/react/useLexicalEditable";import{LexicalBuilder as t}from"@lexical/extension";import{ReactProviderExtension as o}from"@lexical/react/ReactProviderExtension";import{useLayoutEffect as n,useEffect as i,useState as c,useMemo as a,Suspense as l}from"react";import{flushSync as s,createPortal as u}from"react-dom";import{jsx as d,jsxs as f,Fragment as m}from"react/jsx-runtime";import{$canShowPlaceholderCurry as p}from"@lexical/text";import{mergeRegister as x}from"@lexical/utils";import{registerDragonSupport as E}from"@lexical/dragon";import{registerPlainText as h}from"@lexical/plain-text";function g(r,...e){const t=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",r);for(const r of e)o.append("v",r);throw t.search=o.toString(),Error(`Minified Lexical error #${r}; visit ${t.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}const y="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?n:i;function w({editor:r,ErrorBoundary:e}){return function(r,e){const[t,o]=c(()=>r.getDecorators());return y(()=>r.registerDecoratorListener(r=>{s(()=>{o(r)})}),[r]),i(()=>{o(r.getDecorators())},[r]),a(()=>{const o=[],n=Object.keys(t);for(let i=0;i<n.length;i++){const c=n[i],a=d(e,{onError:e=>r._onError(e),children:d(l,{fallback:null,children:t[c]})}),s=r.getElementByKey(c);null!==s&&o.push(u(a,s,c))}return o},[e,t,r])}(r,e)}function v({editor:r,ErrorBoundary:e}){return function(r){const e=t.maybeFromEditor(r);if(e&&e.hasExtensionByName(o.name)){for(const r of["@lexical/plain-text","@lexical/rich-text"])e.hasExtensionByName(r)&&g(320,r);return!0}return!1}(r)?null:d(w,{editor:r,ErrorBoundary:e})}function B(r){return r.getEditorState().read(p(r.isComposing()))}function L({contentEditable:e,placeholder:t=null,ErrorBoundary:o}){const[n]=r();return function(r){y(()=>x(h(r),E(r)),[r])}(n),f(m,{children:[e,d(b,{content:t}),d(v,{editor:n,ErrorBoundary:o})]})}function b({content:t}){const[o]=r(),n=function(r){const[e,t]=c(()=>B(r));return y(()=>{function e(){const e=B(r);t(e)}return e(),x(r.registerUpdateListener(()=>{e()}),r.registerEditableListener(()=>{e()}))},[r]),e}(o),i=e();return n?"function"==typeof t?t(i):t:null}export{L as PlainTextPlugin};

package/LexicalReactExtension.dev.js

@@ -0,0 +1,187 @@
+/**
+ * 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 LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var ReactProviderExtension = require('@lexical/react/ReactProviderExtension');
+var lexical = require('lexical');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * 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.
+ *
+ */
+
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
+
+/**
+ * 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.
+ *
+ */
+
+/** @internal */
+function useReactDecorators(editor, ErrorBoundary) {
+  const [subscribe, getSnapshot] = react.useMemo(() => [cb => editor.registerDecoratorListener(cb), () => editor.getDecorators()], [editor]);
+  const decorators = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  // Return decorators defined as React Portals
+  return react.useMemo(() => {
+    const decoratedPortals = [];
+    for (const nodeKey in decorators) {
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        const reactDecorator = /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+          onError: e => {
+            editor._onError(e);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+            fallback: null,
+            children: decorators[nodeKey]
+          })
+        });
+        decoratedPortals.push(/*#__PURE__*/reactDom.createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}
+
+/**
+ * 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 buildEditorComponent(config, context) {
+  const [editor] = context;
+  const rawConfigDecorators = config.decorators.map(El =>
+  // eslint-disable-next-line react/jsx-key -- wrapped later
+  typeof El === 'function' ? /*#__PURE__*/jsxRuntime.jsx(El, {
+    context: context
+  }) : El);
+  return function EditorComponent(props) {
+    const {
+      EditorChildrenComponent = config.EditorChildrenComponent,
+      ErrorBoundary = config.ErrorBoundary,
+      contentEditable = config.contentEditable,
+      children
+    } = props;
+    const decorators = useReactDecorators(editor, ErrorBoundary);
+    const configDecorators = react.useMemo(() => rawConfigDecorators.map((decorator, i) => /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+      onError: e => {
+        editor._onError(e);
+      }
+      // eslint-disable-next-line react/no-array-index-key -- no natural key
+      ,
+      children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+        fallback: null,
+        children: decorator
+      })
+    }, i)), [ErrorBoundary]);
+    return /*#__PURE__*/jsxRuntime.jsx(LexicalComposerContext.LexicalComposerContext.Provider, {
+      value: context,
+      children: /*#__PURE__*/jsxRuntime.jsxs(EditorChildrenComponent, {
+        context: context,
+        contentEditable: contentEditable,
+        children: [children, configDecorators, decorators]
+      })
+    });
+  };
+}
+
+/**
+ * @example
+ * The default EditorChildrenComponent implementation
+ * ```jsx
+ * return (
+ *   <>
+ *     {contentEditable}
+ *     {children}
+ *   </>
+ * );
+ * ```
+ */
+function DefaultEditorChildrenComponent({
+  contentEditable,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [contentEditable, children]
+  });
+}
+const initialConfig = {
+  EditorChildrenComponent: DefaultEditorChildrenComponent,
+  ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary,
+  contentEditable: /*#__PURE__*/jsxRuntime.jsx(LexicalContentEditable.ContentEditable, {}),
+  decorators: []
+};
+
+/**
+ * An extension to use or configure React for use with Lexical. In an editor, you
+ * would typically use {@link LexicalExtensionComposer} (for React projects) or
+ * {@link ReactPluginHostExtension} (to use React Extensions and plug-ins in a non-React
+ * project).
+ *
+ * See {@link ReactConfig} for more detailed exextensionations of how to use
+ * the config for this Extension.
+ *
+ * For an Extension developer, you can defineConfig() override the extension with
+ * decorators to add JSX inside the editor context that is not
+ * location-dependent (e.g. floating UI that does not need to be mounted in
+ * some specific location, or effects that return null).
+ */
+const ReactExtension = lexical.defineExtension({
+  build(editor, config, state) {
+    const providerPeer = state.getPeer(ReactProviderExtension.ReactProviderExtension.name);
+    if (!providerPeer) {
+      {
+        formatDevErrorMessage(`No ReactProviderExtension detected. You must use ReactPluginHostExtension or LexicalExtensionComposer to host React extensions. The following extensions depend on ReactExtension: ${[...state.getDirectDependentNames()].join(' ')}`);
+      }
+    }
+    const context = [editor, {
+      getTheme: () => editor._config.theme
+    }];
+    const Component = buildEditorComponent(config, context);
+    return {
+      Component,
+      context
+    };
+  },
+  config: initialConfig,
+  mergeConfig(a, b) {
+    const config = lexical.shallowMergeConfig(a, b);
+    if (b.decorators) {
+      config.decorators = b.decorators.length > 0 ? [...a.decorators, ...b.decorators] : a.decorators;
+    }
+    return config;
+  },
+  name: '@lexical/react/React',
+  peerDependencies: [
+  // We are not trying to avoid the import, just the direct dependency,
+  // so using the extension directly is fine.
+  lexical.declarePeerDependency(ReactProviderExtension.ReactProviderExtension.name)]
+});
+
+exports.DefaultEditorChildrenComponent = DefaultEditorChildrenComponent;
+exports.ReactExtension = ReactExtension;