@ekz/lexical-react 0.40.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 '@ekz/lexical-react/LexicalComposerContext';
+import { useLexicalEditable } from '@ekz/lexical-react/useLexicalEditable';
+import { LexicalBuilder } from '@ekz/lexical-extension';
+import { ReactProviderExtension } from '@ekz/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 '@ekz/lexical-text';
+import { mergeRegister } from '@ekz/lexical-utils';
+import { registerDragonSupport } from '@ekz/lexical-dragon';
+import { registerPlainText } from '@ekz/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 ['@ekz/lexical-plain-text', '@ekz/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 '@ekz/lexical';
+
+import {typeof LexicalErrorBoundary} from '@ekz/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("@ekz/lexical-react/LexicalComposerContext"),r=require("@ekz/lexical-react/useLexicalEditable"),t=require("@ekz/lexical-extension"),n=require("@ekz/lexical-react/ReactProviderExtension"),o=require("react"),i=require("react-dom"),c=require("react/jsx-runtime"),a=require("@ekz/lexical-text"),s=require("@ekz/lexical-utils"),l=require("@ekz/lexical-dragon"),u=require("@ekz/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["@ekz/lexical-plain-text","@ekz/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 e}from"@ekz/lexical-react/LexicalComposerContext";import{useLexicalEditable as r}from"@ekz/lexical-react/useLexicalEditable";import{LexicalBuilder as t}from"@ekz/lexical-extension";import{ReactProviderExtension as o}from"@ekz/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"@ekz/lexical-text";import{mergeRegister as x}from"@ekz/lexical-utils";import{registerDragonSupport as E}from"@ekz/lexical-dragon";import{registerPlainText as h}from"@ekz/lexical-plain-text";function g(e,...r){const t=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",e);for(const e of r)o.append("v",e);throw t.search=o.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 y="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?n:i;function k({editor:e,ErrorBoundary:r}){return function(e,r){const[t,o]=c(()=>e.getDecorators());return y(()=>e.registerDecoratorListener(e=>{s(()=>{o(e)})}),[e]),i(()=>{o(e.getDecorators())},[e]),a(()=>{const o=[],n=Object.keys(t);for(let i=0;i<n.length;i++){const c=n[i],a=d(r,{onError:r=>e._onError(r),children:d(l,{fallback:null,children:t[c]})}),s=e.getElementByKey(c);null!==s&&o.push(u(a,s,c))}return o},[r,t,e])}(e,r)}function w({editor:e,ErrorBoundary:r}){return function(e){const r=t.maybeFromEditor(e);if(r&&r.hasExtensionByName(o.name)){for(const e of["@ekz/lexical-plain-text","@ekz/lexical-rich-text"])r.hasExtensionByName(e)&&g(320,e);return!0}return!1}(e)?null:d(k,{editor:e,ErrorBoundary:r})}function z(e){return e.getEditorState().read(p(e.isComposing()))}function v({contentEditable:r,placeholder:t=null,ErrorBoundary:o}){const[n]=e();return function(e){y(()=>x(h(e),E(e)),[e])}(n),f(m,{children:[r,d(B,{content:t}),d(w,{editor:n,ErrorBoundary:o})]})}function B({content:t}){const[o]=e(),n=function(e){const[r,t]=c(()=>z(e));return y(()=>{function r(){const r=z(e);t(r)}return r(),x(e.registerUpdateListener(()=>{r()}),e.registerEditableListener(()=>{r()}))},[e]),r}(o),i=r();return n?"function"==typeof t?t(i):t:null}export{v as PlainTextPlugin};

package/LexicalReactExtension.js.flow

@@ -0,0 +1,68 @@
+/**
+ * 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
+ */
+
+/**
+ * LexicalReactExtension
+ */
+
+import type {LexicalExtension} from '@ekz/lexical';
+import type {LexicalComposerContextWithEditor} from '@ekz/lexical-react/LexicalComposerContext';
+
+export interface EditorChildrenComponentProps {
+  context: LexicalComposerContextWithEditor;
+  contentEditable: null | React.Node;
+  children?: React.Node;
+}
+
+export type EditorChildrenComponentType = (
+  props: EditorChildrenComponentProps,
+) => React.Node | null;
+
+export interface DecoratorComponentProps {
+  context: LexicalComposerContextWithEditor;
+}
+export type DecoratorComponentType =
+  | React.Node
+  | ((props: DecoratorComponentProps) => React.Node | null);
+
+export type EditorComponentProps = {
+  EditorChildrenComponent: EditorChildrenComponentType;
+  children?: React.Node;
+  contentEditable: React.Node | null;
+  ErrorBoundary: ErrorBoundaryType;
+};
+
+export type EditorComponentType = (
+  props: Partial<EditorComponentProps>,
+) => React.Node;
+
+export type ReactConfig = {
+  contentEditable: React.Node | null;
+  ErrorBoundary: ErrorBoundaryType;
+  EditorChildrenComponent: EditorChildrenComponentType;
+  decorators: $ReadOnlyArray<DecoratorComponentType>;
+};
+
+export type ReactOutputs = {
+  Component: EditorComponentType;
+  context: LexicalComposerContextWithEditor;
+};
+
+export type ErrorBoundaryProps = {
+  children: React.Node;
+  onError: (error: Error) => void;
+};
+
+export type ErrorBoundaryType = React.ComponentType<ErrorBoundaryProps>;
+
+declare export function DefaultEditorChildrenComponent(props: EditorChildrenComponentProps): React.Node;
+declare export var ReactExtension: LexicalExtension<ReactConfig, "@ekz/lexical-react/React", {
+    Component: (props: Partial<EditorComponentProps>) => React.Node;
+    context: LexicalComposerContextWithEditor;
+}, void>;

package/LexicalReactPluginHostExtension.js.flow

@@ -0,0 +1,84 @@
+/**
+ * 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
+ */
+
+/**
+ * LexicalReactPluginHostExtension
+ */
+import type {
+  LexicalExtension,
+  AnyLexicalExtension,
+  LexicalEditor,
+  LexicalExtensionOutput,
+  LexicalCommand,
+  ExtensionConfigBase,
+} from '@ekz/lexical';
+import type {Signal} from '@ekz/lexical-extension';
+import type {DecoratorComponentProps} from '@ekz/lexical-react/ReactExtension';
+export type {DecoratorComponentProps};
+
+type Container = DocumentFragment | Element;
+// TODO: Not sure how to import RootType from react-dom/client
+type Root = mixed;
+
+export interface HostMountCommandArg {
+  root: Root;
+}
+
+export interface MountPluginCommandArg {
+  key: string;
+  element: React.Node | null;
+  domNode?: Container | null;
+}
+
+declare export function mountReactExtensionComponent<
+  Extension: AnyLexicalExtension,
+>(
+  editor: LexicalEditor,
+  opts: {
+    extension: Extension;
+    props: [LexicalExtensionOutput<Extension>] extends [
+      {
+        // $FlowFixMe[unclear-type]: defined by user
+        Component: infer OutputComponentType extends React.ComponentType<any>;
+      },
+    ]
+      ? React.PropsOf<OutputComponentType> | null
+      : empty;
+  } & Omit<MountPluginCommandArg, 'element'>,
+): void;
+
+declare export function mountReactPluginComponent<
+  P: {...} = {...},
+>(
+  editor: LexicalEditor,
+  opts: {
+    Component: React.ComponentType<P>;
+    props: (P & {key?: null | void | React.Key}) | null;
+  } & Omit<MountPluginCommandArg, 'element'>,
+): void;
+
+declare export function mountReactPluginElement(
+  editor: LexicalEditor,
+  opts: MountPluginCommandArg,
+): void;
+
+declare export function mountReactPluginHost(
+  editor: LexicalEditor,
+  container: Container,
+): void;
+
+declare export var REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND: LexicalCommand<HostMountCommandArg>;
+declare export var REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND: LexicalCommand<MountPluginCommandArg>;
+declare export var ReactPluginHostExtension: LexicalExtension<ExtensionConfigBase, "@ekz/lexical-react/ReactPluginHost", {
+    mountReactPlugin: (arg: MountPluginCommandArg) => void;
+    mountReactPluginHost: (container: Container) => boolean;
+    mountedPluginsStore: Signal<{
+        plugins: Map<string, MountPluginCommandArg>;
+    }>;
+}, void>;

package/LexicalReactProviderExtension.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+/**
+ * LexicalReactProviderExtension
+ */

package/LexicalRichTextPlugin.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 ErrorBoundaryType } from './shared/LegacyDecorators';
+export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: {
+    contentEditable: JSX.Element;
+    placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary: ErrorBoundaryType;
+}): JSX.Element;