@ekz/lexical-react 0.40.0

package/LexicalNestedComposer.dev.mjs

@@ -0,0 +1,159 @@
+/**
+ * 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 { CollaborationContext } from '@ekz/lexical-react/LexicalCollaborationContext';
+import { LexicalComposerContext, createLexicalComposerContext } from '@ekz/lexical-react/LexicalComposerContext';
+import { getTransformSetFromKlass, createSharedNodeState, getRegisteredNode } from '@ekz/lexical';
+import { useRef, useContext, useMemo, useEffect } from 'react';
+import { jsx } from '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.
+ *
+ */
+
+/*@__INLINE__*/
+function warnOnlyOnce(message) {
+  {
+    let run = false;
+    return () => {
+      if (!run) {
+        console.warn(message);
+      }
+      run = true;
+    };
+  }
+}
+
+const initialNodesWarning = warnOnlyOnce(`LexicalNestedComposer initialNodes is deprecated and will be removed in v0.32.0, it has never worked correctly.\nYou can configure your editor's nodes with createEditor({nodes: [], parentEditor: $getEditor()})`);
+const explicitNamespaceWarning = warnOnlyOnce(`LexicalNestedComposer initialEditor should explicitly initialize its namespace when the node configuration differs from the parentEditor. For backwards compatibility, the namespace will be initialized from parentEditor until v0.32.0, but this has always had incorrect copy/paste behavior when the configuration differed.\nYou can configure your editor's namespace with createEditor({namespace: 'nested-editor-namespace', nodes: [], parentEditor: $getEditor()}).`);
+function LexicalNestedComposer({
+  initialEditor,
+  children,
+  initialNodes,
+  initialTheme,
+  skipCollabChecks,
+  skipEditableListener
+}) {
+  const wasCollabPreviouslyReadyRef = useRef(false);
+  const parentContext = useContext(LexicalComposerContext);
+  if (parentContext == null) {
+    {
+      formatDevErrorMessage(`Unexpected parent context null on a nested composer`);
+    }
+  }
+  const [parentEditor, {
+    getTheme: getParentTheme
+  }] = parentContext;
+  const composerContext = useMemo(() => {
+    const composerTheme = initialTheme || getParentTheme() || undefined;
+    const context = createLexicalComposerContext(parentContext, composerTheme);
+    if (composerTheme !== undefined) {
+      initialEditor._config.theme = composerTheme;
+    }
+    initialEditor._parentEditor = initialEditor._parentEditor || parentEditor;
+    const createEditorArgs = initialEditor._createEditorArgs;
+    const explicitNamespace = createEditorArgs && createEditorArgs.namespace;
+    if (!initialNodes) {
+      if (!(createEditorArgs && createEditorArgs.nodes)) {
+        const parentNodes = initialEditor._nodes = new Map(parentEditor._nodes);
+        if (!explicitNamespace) {
+          // This is the only safe situation to inherit the parent's namespace
+          initialEditor._config.namespace = parentEditor._config.namespace;
+        }
+        for (const [type, entry] of parentNodes) {
+          initialEditor._nodes.set(type, {
+            exportDOM: entry.exportDOM,
+            klass: entry.klass,
+            replace: entry.replace,
+            replaceWithKlass: entry.replaceWithKlass,
+            sharedNodeState: createSharedNodeState(entry.klass),
+            transforms: getTransformSetFromKlass(entry.klass)
+          });
+        }
+      } else if (!explicitNamespace) {
+        explicitNamespaceWarning();
+        initialEditor._config.namespace = parentEditor._config.namespace;
+      }
+    } else {
+      initialNodesWarning();
+      if (!explicitNamespace) {
+        explicitNamespaceWarning();
+        initialEditor._config.namespace = parentEditor._config.namespace;
+      }
+      for (let klass of initialNodes) {
+        let replace = null;
+        let replaceWithKlass = null;
+        if (typeof klass !== 'function') {
+          const options = klass;
+          klass = options.replace;
+          replace = options.with;
+          replaceWithKlass = options.withKlass || null;
+        }
+        const registeredKlass = getRegisteredNode(initialEditor, klass.getType());
+        initialEditor._nodes.set(klass.getType(), {
+          exportDOM: registeredKlass ? registeredKlass.exportDOM : undefined,
+          klass,
+          replace,
+          replaceWithKlass,
+          sharedNodeState: createSharedNodeState(klass),
+          transforms: getTransformSetFromKlass(klass)
+        });
+      }
+    }
+    return [initialEditor, context];
+  },
+  // We only do this for init
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+
+  // If collaboration is enabled, make sure we don't render the children until the collaboration subdocument is ready.
+  const collabContext = useContext(CollaborationContext);
+  const {
+    isCollabActive,
+    yjsDocMap
+  } = collabContext ?? {};
+  const isCollabReady = skipCollabChecks || wasCollabPreviouslyReadyRef.current || yjsDocMap && yjsDocMap.has(initialEditor.getKey());
+  useEffect(() => {
+    if (isCollabReady) {
+      wasCollabPreviouslyReadyRef.current = true;
+    }
+  }, [isCollabReady]);
+
+  // Update `isEditable` state of nested editor in response to the same change on parent editor.
+  useEffect(() => {
+    if (!skipEditableListener) {
+      const editableListener = editable => initialEditor.setEditable(editable);
+      editableListener(parentEditor.isEditable());
+      return parentEditor.registerEditableListener(editableListener);
+    }
+  }, [initialEditor, parentEditor, skipEditableListener]);
+  return /*#__PURE__*/jsx(LexicalComposerContext.Provider, {
+    value: composerContext,
+    children: !isCollabActive || isCollabReady ? children : null
+  });
+}
+
+export { LexicalNestedComposer };

package/LexicalNestedComposer.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 LexicalNestedComposer = process.env.NODE_ENV !== 'production' ? require('./LexicalNestedComposer.dev.js') : require('./LexicalNestedComposer.prod.js');
+module.exports = LexicalNestedComposer;

package/LexicalNestedComposer.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type {
+  LexicalEditor,
+  EditorThemeClasses,
+  LexicalNode,
+  LexicalNodeReplacement,
+} from '@ekz/lexical';
+
+export type LexicalNestedComposerProps = {
+  children?: React.Node;
+  initialEditor: LexicalEditor;
+  initialTheme?: EditorThemeClasses;
+  initialNodes?: $ReadOnlyArray<Class<LexicalNode> | LexicalNodeReplacement>;
+  skipCollabChecks?: void | true;
+  skipEditableListener?: void | true;
+};
+
+declare export function LexicalNestedComposer(props: LexicalNestedComposerProps): React.Node;

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

package/LexicalNestedComposer.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('./LexicalNestedComposer.dev.mjs') : import('./LexicalNestedComposer.prod.mjs'));
+export const LexicalNestedComposer = mod.LexicalNestedComposer;

package/LexicalNestedComposer.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/LexicalCollaborationContext"),t=require("@ekz/lexical-react/LexicalComposerContext"),r=require("@ekz/lexical"),o=require("react"),s=require("react/jsx-runtime");const a=()=>{},n=()=>{};exports.LexicalNestedComposer=function({initialEditor:i,children:l,initialNodes:c,initialTheme:d,skipCollabChecks:p,skipEditableListener:f}){const u=o.useRef(!1),m=o.useContext(t.LexicalComposerContext);null==m&&function(e,...t){const r=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",e);for(const e of t)o.append("v",e);throw r.search=o.toString(),Error(`Minified Lexical error #${e}; visit ${r.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(9);const[x,{getTheme:h}]=m,g=o.useMemo(()=>{const e=d||h()||void 0,o=t.createLexicalComposerContext(m,e);void 0!==e&&(i._config.theme=e),i._parentEditor=i._parentEditor||x;const s=i._createEditorArgs,l=s&&s.namespace;if(c){a(),l||(n(),i._config.namespace=x._config.namespace);for(let e of c){let t=null,o=null;if("function"!=typeof e){const r=e;e=r.replace,t=r.with,o=r.withKlass||null}const s=r.getRegisteredNode(i,e.getType());i._nodes.set(e.getType(),{exportDOM:s?s.exportDOM:void 0,klass:e,replace:t,replaceWithKlass:o,sharedNodeState:r.createSharedNodeState(e),transforms:r.getTransformSetFromKlass(e)})}}else if(s&&s.nodes)l||(n(),i._config.namespace=x._config.namespace);else{const e=i._nodes=new Map(x._nodes);l||(i._config.namespace=x._config.namespace);for(const[t,o]of e)i._nodes.set(t,{exportDOM:o.exportDOM,klass:o.klass,replace:o.replace,replaceWithKlass:o.replaceWithKlass,sharedNodeState:r.createSharedNodeState(o.klass),transforms:r.getTransformSetFromKlass(o.klass)})}return[i,o]},[]),C=o.useContext(e.CollaborationContext),{isCollabActive:_,yjsDocMap:v}=C??{},k=p||u.current||v&&v.has(i.getKey());return o.useEffect(()=>{k&&(u.current=!0)},[k]),o.useEffect(()=>{if(!f){const e=e=>i.setEditable(e);return e(x.isEditable()),x.registerEditableListener(e)}},[i,x,f]),s.jsx(t.LexicalComposerContext.Provider,{value:g,children:!_||k?l:null})};

package/LexicalNestedComposer.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{CollaborationContext as e}from"@ekz/lexical-react/LexicalCollaborationContext";import{LexicalComposerContext as t,createLexicalComposerContext as o}from"@ekz/lexical-react/LexicalComposerContext";import{getTransformSetFromKlass as r,createSharedNodeState as n,getRegisteredNode as i}from"@ekz/lexical";import{useRef as s,useContext as a,useMemo as l,useEffect as c}from"react";import{jsx as p}from"react/jsx-runtime";const d=()=>{},f=()=>{};function m({initialEditor:m,children:h,initialNodes:u,initialTheme:g,skipCollabChecks:x,skipEditableListener:_}){const k=s(!1),v=a(t);null==v&&function(e,...t){const o=new URL("https://lexical.dev/docs/error"),r=new URLSearchParams;r.append("code",e);for(const e of t)r.append("v",e);throw o.search=r.toString(),Error(`Minified Lexical error #${e}; visit ${o.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(9);const[E,{getTheme:b}]=v,w=l(()=>{const e=g||b()||void 0,t=o(v,e);void 0!==e&&(m._config.theme=e),m._parentEditor=m._parentEditor||E;const s=m._createEditorArgs,a=s&&s.namespace;if(u){d(),a||(f(),m._config.namespace=E._config.namespace);for(let e of u){let t=null,o=null;if("function"!=typeof e){const r=e;e=r.replace,t=r.with,o=r.withKlass||null}const s=i(m,e.getType());m._nodes.set(e.getType(),{exportDOM:s?s.exportDOM:void 0,klass:e,replace:t,replaceWithKlass:o,sharedNodeState:n(e),transforms:r(e)})}}else if(s&&s.nodes)a||(f(),m._config.namespace=E._config.namespace);else{const e=m._nodes=new Map(E._nodes);a||(m._config.namespace=E._config.namespace);for(const[t,o]of e)m._nodes.set(t,{exportDOM:o.exportDOM,klass:o.klass,replace:o.replace,replaceWithKlass:o.replaceWithKlass,sharedNodeState:n(o.klass),transforms:r(o.klass)})}return[m,t]},[]),C=a(e),{isCollabActive:L,yjsDocMap:M}=C??{},y=x||k.current||M&&M.has(m.getKey());return c(()=>{y&&(k.current=!0)},[y]),c(()=>{if(!_){const e=e=>m.setEditable(e);return e(E.isEditable()),E.registerEditableListener(e)}},[m,E,_]),p(t.Provider,{value:w,children:!L||y?h:null})}export{m as LexicalNestedComposer};

package/LexicalNodeContextMenuPlugin.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { LexicalNode } from '@ekz/lexical';
+import { JSX, RefObject } from 'react';
+declare class MenuOption {
+    key: string;
+    ref?: RefObject<HTMLElement | null>;
+    constructor(key: string);
+    setRefElement(element: HTMLElement | null): void;
+}
+declare class NodeContextMenuOption extends MenuOption {
+    type: string;
+    title: string;
+    icon: JSX.Element | null;
+    disabled: boolean;
+    $onSelect: () => void;
+    $showOn?: (node: LexicalNode) => boolean;
+    constructor(title: string, options: {
+        disabled?: boolean;
+        icon?: JSX.Element;
+        $onSelect: () => void;
+        $showOn?: (node: LexicalNode) => boolean;
+    });
+}
+declare class NodeContextMenuSeparator extends MenuOption {
+    type: string;
+    $showOn?: (node: LexicalNode) => boolean;
+    constructor(options?: {
+        $showOn?: (node: LexicalNode) => boolean;
+    });
+}
+type ContextMenuType = NodeContextMenuOption | NodeContextMenuSeparator;
+interface Props {
+    label?: string;
+    nested?: boolean;
+    itemClassName?: string;
+    separatorClassName?: string;
+    items: ContextMenuType[];
+}
+declare const NodeContextMenuPlugin: import("react").ForwardRefExoticComponent<Omit<Props & import("react").HTMLProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { NodeContextMenuOption, NodeContextMenuPlugin, NodeContextMenuSeparator };

package/LexicalNodeContextMenuPlugin.dev.js

@@ -0,0 +1,257 @@
+/**
+ * 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 react$1 = require('@floating-ui/react');
+var LexicalComposerContext = require('@ekz/lexical-react/LexicalComposerContext');
+var lexical = require('@ekz/lexical');
+var react = require('react');
+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.
+ *
+ */
+
+class MenuOption {
+  key;
+  ref;
+  constructor(key) {
+    this.key = key;
+    this.ref = {
+      current: null
+    };
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+  setRefElement(element) {
+    this.ref = {
+      current: element
+    };
+  }
+}
+class NodeContextMenuOption extends MenuOption {
+  type;
+  title;
+  icon;
+  disabled;
+  $onSelect;
+  $showOn;
+  constructor(title, options) {
+    super(title);
+    this.type = 'item';
+    this.title = title;
+    this.disabled = options.disabled ?? false;
+    this.icon = options.icon ?? null;
+    this.$onSelect = options.$onSelect;
+    if (options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+class NodeContextMenuSeparator extends MenuOption {
+  type;
+  $showOn;
+  constructor(options) {
+    super('_separator');
+    this.type = 'separator';
+    if (options && options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+const ContextMenuSeparatorItem = /*#__PURE__*/react.forwardRef(({
+  className,
+  disabled,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx("hr", {
+    className: className
+  });
+});
+const ContextMenuItem = /*#__PURE__*/react.forwardRef(({
+  className,
+  label,
+  disabled,
+  icon,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    ...props,
+    className: className,
+    ref: ref,
+    role: "menuitem",
+    disabled: disabled,
+    children: [icon, label]
+  });
+});
+const NodeContextMenuPlugin = /*#__PURE__*/react.forwardRef(({
+  items,
+  className,
+  itemClassName,
+  separatorClassName
+}, forwardedRef) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [activeIndex, setActiveIndex] = react.useState(null);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const listItemsRef = react.useRef([]);
+  const listContentRef = react.useRef([]);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react$1.useFloating({
+    middleware: [react$1.offset({
+      alignmentAxis: 4,
+      mainAxis: 5
+    }), react$1.flip({
+      fallbackPlacements: ['left-start']
+    }), react$1.shift({
+      padding: 10
+    })],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    placement: 'right-start',
+    strategy: 'fixed',
+    whileElementsMounted: react$1.autoUpdate
+  });
+  const role = react$1.useRole(context, {
+    role: 'menu'
+  });
+  const dismiss = react$1.useDismiss(context);
+  const listNavigation = react$1.useListNavigation(context, {
+    activeIndex,
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = react$1.useTypeahead(context, {
+    activeIndex,
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex
+  });
+  const {
+    getFloatingProps,
+    getItemProps
+  } = react$1.useInteractions([role, dismiss, listNavigation, typeahead]);
+  const [renderItems, setRenderItems] = react.useState([]);
+  react.useEffect(() => {
+    function onContextMenu(e) {
+      e.preventDefault();
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            bottom: e.clientY,
+            height: 0,
+            left: e.clientX,
+            right: e.clientX,
+            top: e.clientY,
+            width: 0,
+            x: e.clientX,
+            y: e.clientY
+          };
+        }
+      });
+      let visibleItems = [];
+      if (items) {
+        editor.read(() => {
+          const node = lexical.$getNearestNodeFromDOMNode(e.target);
+          if (node) {
+            visibleItems = items.filter(option => option.$showOn ? option.$showOn(node) : true);
+          }
+        });
+      }
+      const renderableItems = visibleItems.map((option, index) => {
+        if (option.type === 'separator') {
+          return {
+            className: separatorClassName,
+            key: option.key + '-' + index,
+            type: option.type
+          };
+        } else {
+          return {
+            className: itemClassName,
+            disabled: option.disabled,
+            icon: option.icon,
+            key: option.key,
+            label: option.title,
+            onClick: () => editor.update(() => option.$onSelect()),
+            title: option.title,
+            type: option.type
+          };
+        }
+      });
+      listContentRef.current = renderableItems.map(item => item.key);
+      setRenderItems(renderableItems);
+      setIsOpen(true);
+    }
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('contextmenu', onContextMenu);
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener('contextmenu', onContextMenu);
+      }
+    });
+  }, [items, itemClassName, separatorClassName, refs, editor]);
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    children: isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
+      lockScroll: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+        context: context,
+        initialFocus: refs.floating,
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: className,
+          ref: refs.setFloating,
+          style: floatingStyles,
+          ...getFloatingProps(),
+          children: renderItems.map((item, index) => {
+            if (item.type === 'item') {
+              return /*#__PURE__*/react.createElement(ContextMenuItem, {
+                ...getItemProps({
+                  ...item,
+                  onClick() {
+                    item.onClick();
+                    setIsOpen(false);
+                  },
+                  onMouseUp() {
+                    item.onClick();
+                    setIsOpen(false);
+                  },
+                  ref(node) {
+                    listItemsRef.current[index] = node;
+                  },
+                  tabIndex: activeIndex === index ? 0 : -1
+                }),
+                key: item.key
+              });
+            } else if (item.type === 'separator') {
+              return /*#__PURE__*/react.createElement(ContextMenuSeparatorItem, {
+                ...getItemProps({
+                  ...item,
+                  ref(node) {
+                    listItemsRef.current[index] = node;
+                  },
+                  tabIndex: activeIndex === index ? 0 : -1
+                }),
+                key: item.key
+              });
+            }
+          })
+        })
+      })
+    })
+  });
+});
+
+exports.NodeContextMenuOption = NodeContextMenuOption;
+exports.NodeContextMenuPlugin = NodeContextMenuPlugin;
+exports.NodeContextMenuSeparator = NodeContextMenuSeparator;