@lexical/react 0.10.0 → 0.11.1

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 b=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/useLexicalEditable"),l=require("react"),m=require("@lexical/text"),n=require("@lexical/utils"),p=require("react-dom"),r=require("@lexical/dragon"),t=require("@lexical/rich-text"),u="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
-function v(a){return a.getEditorState().read(m.$canShowPlaceholderCurry(a.isComposing()))}function w(a){let [d,c]=l.useState(()=>v(a));u(()=>{function e(){let f=v(a);c(f)}e();return n.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return d}
-function x(a,d){let [c,e]=l.useState(()=>a.getDecorators());u(()=>a.registerDecoratorListener(f=>{p.flushSync(()=>{e(f)})}),[a]);l.useEffect(()=>{e(a.getDecorators())},[a]);return l.useMemo(()=>{let f=[],q=Object.keys(c);for(let k=0;k<q.length;k++){var g=q[k];let z=l.createElement(d,{onError:y=>a._onError(y)},l.createElement(l.Suspense,{fallback:null},c[g]));g=a.getElementByKey(g);null!==g&&f.push(p.createPortal(z,g))}return f},[d,c,a])}
-function A(a){u(()=>n.mergeRegister(t.registerRichText(a),r.registerDragonSupport(a)),[a])}function B({content:a}){var [d]=b.useLexicalComposerContext();d=w(d);let c=h();return d?"function"===typeof a?a(c):a:null}exports.RichTextPlugin=function({contentEditable:a,placeholder:d,ErrorBoundary:c}){let [e]=b.useLexicalComposerContext();c=x(e,c);A(e);return l.createElement(l.Fragment,null,a,l.createElement(B,{content:d}),c)}
+'use strict';var b=require("@lexical/react/LexicalComposerContext"),g=require("@lexical/react/useLexicalEditable"),l=require("react"),m=require("@lexical/text"),n=require("@lexical/utils"),p=require("react-dom"),t=require("@lexical/dragon"),u=require("@lexical/rich-text"),v="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
+function w(a){return a.getEditorState().read(m.$canShowPlaceholderCurry(a.isComposing()))}function x(a){let [d,c]=l.useState(()=>w(a));v(()=>{function e(){let f=w(a);c(f)}e();return n.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return d}
+function y(a,d){let [c,e]=l.useState(()=>a.getDecorators());v(()=>a.registerDecoratorListener(f=>{p.flushSync(()=>{e(f)})}),[a]);l.useEffect(()=>{e(a.getDecorators())},[a]);return l.useMemo(()=>{let f=[],q=Object.keys(c);for(let h=0;h<q.length;h++){let k=q[h],A=l.createElement(d,{onError:z=>a._onError(z)},l.createElement(l.Suspense,{fallback:null},c[k])),r=a.getElementByKey(k);null!==r&&f.push(p.createPortal(A,r,k))}return f},[d,c,a])}
+function B(a){v(()=>n.mergeRegister(u.registerRichText(a),t.registerDragonSupport(a)),[a])}function C({content:a}){var [d]=b.useLexicalComposerContext();d=x(d);let c=g();return d?"function"===typeof a?a(c):a:null}exports.RichTextPlugin=function({contentEditable:a,placeholder:d,ErrorBoundary:c}){let [e]=b.useLexicalComposerContext();c=y(e,c);B(e);return l.createElement(l.Fragment,null,a,l.createElement(C,{content:d}),c)}

package/LexicalTabIndentationPlugin.d.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import type { LexicalEditor } from 'lexical';
+export declare function registerTabIndentation(editor: LexicalEditor): () => void;
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
  * recommend using this plugin as it could negatively affect acessibility for keyboard

package/LexicalTabIndentationPlugin.dev.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var react = require('react');
 
@@ -17,6 +18,72 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+function $filter(nodes, filterFn) {
+  const result = [];
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = filterFn(nodes[i]);
+
+    if (node !== null) {
+      result.push(node);
+    }
+  }
+
+  return result;
+}
+
+function indentOverTab(selection) {
+  // const handled = new Set();
+  const nodes = selection.getNodes();
+  const canIndentBlockNodes = $filter(nodes, node => {
+    if (lexical.$isBlockElementNode(node) && node.canIndent()) {
+      return node;
+    }
+
+    return null;
+  }); // 1. If selection spans across canIndent block nodes: indent
+
+  if (canIndentBlockNodes.length > 0) {
+    return true;
+  } // 2. If first (anchor/focus) is at block start: indent
+
+
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const first = focus.isBefore(anchor) ? focus : anchor;
+  const firstNode = first.getNode();
+  const firstBlock = utils.$getNearestBlockElementAncestorOrThrow(firstNode);
+
+  if (firstBlock.canIndent()) {
+    const firstBlockKey = firstBlock.getKey();
+    let selectionAtStart = lexical.$createRangeSelection();
+    selectionAtStart.anchor.set(firstBlockKey, 0, 'element');
+    selectionAtStart.focus.set(firstBlockKey, 0, 'element');
+    selectionAtStart = lexical.$normalizeSelection__EXPERIMENTAL(selectionAtStart);
+
+    if (selectionAtStart.anchor.is(first)) {
+      return true;
+    }
+  } // 3. Else: tab
+
+
+  return false;
+}
+
+function registerTabIndentation(editor) {
+  return editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
+    const selection = lexical.$getSelection();
+
+    if (!lexical.$isRangeSelection(selection)) {
+      return false;
+    }
+
+    event.preventDefault();
+    const command = indentOverTab(selection) ? event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND : lexical.INSERT_TAB_COMMAND;
+    return editor.dispatchCommand(command, undefined);
+  }, lexical.COMMAND_PRIORITY_EDITOR);
+}
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
  * recommend using this plugin as it could negatively affect acessibility for keyboard
@@ -26,18 +93,10 @@ var react = require('react');
 function TabIndentationPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {
-    return editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
-      const selection = lexical.$getSelection();
-
-      if (!lexical.$isRangeSelection(selection)) {
-        return false;
-      }
-
-      event.preventDefault();
-      return editor.dispatchCommand(event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND, undefined);
-    }, lexical.COMMAND_PRIORITY_EDITOR);
+    return registerTabIndentation(editor);
   });
   return null;
 }
 
 exports.TabIndentationPlugin = TabIndentationPlugin;
+exports.registerTabIndentation = registerTabIndentation;

package/LexicalTabIndentationPlugin.js.flow

@@ -7,4 +7,10 @@
  * @flow strict
  */
 
+import type {LexicalEditor} from 'lexical';
+
+declare export function registerTabIndentation(
+  editor: LexicalEditor,
+): () => void;
+
 declare export function TabIndentationPlugin(): null;

package/LexicalTabIndentationPlugin.prod.js

@@ -4,4 +4,6 @@
  * 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 a=require("@lexical/react/LexicalComposerContext"),d=require("lexical"),e=require("react");exports.TabIndentationPlugin=function(){let [b]=a.useLexicalComposerContext();e.useEffect(()=>b.registerCommand(d.KEY_TAB_COMMAND,c=>{let f=d.$getSelection();if(!d.$isRangeSelection(f))return!1;c.preventDefault();return b.dispatchCommand(c.shiftKey?d.OUTDENT_CONTENT_COMMAND:d.INDENT_CONTENT_COMMAND,void 0)},d.COMMAND_PRIORITY_EDITOR));return null}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),g=require("@lexical/utils"),h=require("lexical"),k=require("react");function l(b,a){let c=[];for(let e=0;e<b.length;e++){let f=a(b[e]);null!==f&&c.push(f)}return c}
+function m(b){var a=b.getNodes();if(0<l(a,c=>h.$isBlockElementNode(c)&&c.canIndent()?c:null).length)return!0;a=b.anchor;b=b.focus;b=b.isBefore(a)?b:a;a=b.getNode();a=g.$getNearestBlockElementAncestorOrThrow(a);if(a.canIndent()){a=a.getKey();let c=h.$createRangeSelection();c.anchor.set(a,0,"element");c.focus.set(a,0,"element");c=h.$normalizeSelection__EXPERIMENTAL(c);if(c.anchor.is(b))return!0}return!1}
+function n(b){return b.registerCommand(h.KEY_TAB_COMMAND,a=>{let c=h.$getSelection();if(!h.$isRangeSelection(c))return!1;a.preventDefault();a=m(c)?a.shiftKey?h.OUTDENT_CONTENT_COMMAND:h.INDENT_CONTENT_COMMAND:h.INSERT_TAB_COMMAND;return b.dispatchCommand(a,void 0)},h.COMMAND_PRIORITY_EDITOR)}exports.TabIndentationPlugin=function(){let [b]=d.useLexicalComposerContext();k.useEffect(()=>n(b));return null};exports.registerTabIndentation=n

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -5,60 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { LexicalCommand, LexicalEditor, NodeKey, TextNode } from 'lexical';
-import { MutableRefObject, ReactPortal } from 'react';
-export declare type QueryMatch = {
-    leadOffset: number;
-    matchingString: string;
-    replaceableString: string;
-};
-export declare type Resolution = {
-    match: QueryMatch;
-    getRect: () => DOMRect;
-};
+/// <reference types="react" />
+import type { MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn } from './shared/LexicalMenu';
+import { LexicalCommand, TextNode } from 'lexical';
+import { MenuOption } from './shared/LexicalMenu';
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
-export declare class TypeaheadOption {
-    key: string;
-    ref?: MutableRefObject<HTMLElement | null>;
-    constructor(key: string);
-    setRefElement(element: HTMLElement | null): void;
-}
-export declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElementRef: MutableRefObject<HTMLElement | null>, itemProps: {
-    selectedIndex: number | null;
-    selectOptionAndCleanUp: (option: TOption) => void;
-    setHighlightedIndex: (index: number) => void;
-    options: Array<TOption>;
-}, matchingString: string) => ReactPortal | JSX.Element | null;
 export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
-export declare function useDynamicPositioning(resolution: Resolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
+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: TypeaheadOption;
+    option: MenuOption;
 }>;
 export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLength, maxLength }: {
     minLength?: number;
     maxLength?: number;
 }): TriggerFn;
-export declare type TypeaheadMenuPluginProps<TOption extends TypeaheadOption> = {
+export declare type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
     onQueryChange: (matchingString: string | null) => void;
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     menuRenderFn: MenuRenderFn<TOption>;
     triggerFn: TriggerFn;
-    onOpen?: (resolution: Resolution) => void;
+    onOpen?: (resolution: MenuResolution) => void;
     onClose?: () => void;
     anchorClassName?: string;
 };
-export declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
-export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
-declare type NodeMenuPluginProps<TOption extends TypeaheadOption> = {
-    onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
-    options: Array<TOption>;
-    nodeKey: NodeKey | null;
-    onClose?: () => void;
-    onOpen?: (resolution: Resolution) => void;
-    menuRenderFn: MenuRenderFn<TOption>;
-    anchorClassName?: string;
-};
-export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onOpen, onSelectOption, menuRenderFn, anchorClassName, }: NodeMenuPluginProps<TOption>): JSX.Element | null;
-export {};
+export declare function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
+export { MenuOption, MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn };