@lexical/react 0.3.7 → 0.3.10

package/LexicalTreeView.dev.js

@@ -6,6 +6,7 @@
  */
 'use strict';
 
+var link = require('@lexical/link');
 var mark = require('@lexical/mark');
 var lexical = require('lexical');
 var React = require('react');
@@ -92,7 +93,7 @@ function TreeView({
 
       play();
       return () => {
-        window.clearTimeout(timeoutId);
+        clearTimeout(timeoutId);
       };
     }
   }, [timeStampedEditorStates, isPlaying, editor, totalEditorStates]);
@@ -120,7 +121,8 @@ function TreeView({
         setTimeTravelEnabled(true);
       }
     },
-    className: timeTravelButtonClassName
+    className: timeTravelButtonClassName,
+    type: "button"
   }, "Time Travel"), /*#__PURE__*/React.createElement("pre", {
     ref: treeElementRef
   }, content), timeTravelEnabled && /*#__PURE__*/React.createElement("div", {
@@ -129,7 +131,8 @@ function TreeView({
     className: timeTravelPanelButtonClassName,
     onClick: () => {
       setIsPlaying(!isPlaying);
-    }
+    },
+    type: "button"
   }, isPlaying ? 'Pause' : 'Play'), /*#__PURE__*/React.createElement("input", {
     className: timeTravelPanelSliderClassName,
     ref: inputRef,
@@ -164,7 +167,8 @@ function TreeView({
         setTimeTravelEnabled(false);
         setIsPlaying(false);
       }
-    }
+    },
+    type: "button"
   }, "Exit")));
 }
 
@@ -228,27 +232,37 @@ function visitTree(currentNode, visitor, indent = []) {
 
 function normalize(text) {
   return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
-}
+} // TODO Pass via props to allow customizability
+
 
 function printNode(node) {
   if (lexical.$isTextNode(node)) {
     const text = node.getTextContent(true);
     const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
-    const properties = printAllProperties(node);
+    const properties = printAllTextNodeProperties(node);
     return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else if (link.$isLinkNode(node)) {
+    const link = node.getURL();
+    const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
+    const properties = printAllLinkNodeProperties(node);
+    return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
+  } else {
+    return '';
   }
-
-  return '';
 }
 
 const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => node.hasFormat('code') && 'Code', node => node.hasFormat('italic') && 'Italic', node => node.hasFormat('strikethrough') && 'Strikethrough', node => node.hasFormat('subscript') && 'Subscript', node => node.hasFormat('superscript') && 'Superscript', node => node.hasFormat('underline') && 'Underline'];
 const DETAIL_PREDICATES = [node => node.isDirectionless() && 'Directionless', node => node.isUnmergeable() && 'Unmergeable'];
 const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented', node => node.isInert() && 'Inert'];
 
-function printAllProperties(node) {
+function printAllTextNodeProperties(node) {
   return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
 }
 
+function printAllLinkNodeProperties(node) {
+  return [printTargetProperties(node), printRelProperties(node)].filter(Boolean).join(', ');
+}
+
 function printDetailProperties(nodeOrSelection) {
   let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
 
@@ -279,6 +293,26 @@ function printFormatProperties(nodeOrSelection) {
   return str;
 }
 
+function printTargetProperties(node) {
+  let str = node.getTarget(); // TODO Fix nullish on LinkNode
+
+  if (str != null) {
+    str = 'target: ' + str;
+  }
+
+  return str;
+}
+
+function printRelProperties(node) {
+  let str = node.getRel(); // TODO Fix nullish on LinkNode
+
+  if (str != null) {
+    str = 'rel: ' + str;
+  }
+
+  return str;
+}
+
 function printSelectedCharsLine({
   indent,
   isSelected,

package/LexicalTreeView.prod.js

@@ -4,17 +4,17 @@
  * 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 l=require("@lexical/mark"),p=require("lexical"),r=require("react");let D=Object.freeze({"\t":"\\t","\n":"\\n"}),E=new RegExp(Object.keys(D).join("|"),"g"),F=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function G(a){let b="",c=H(a),e=a.anchor;a=a.focus;let d=e.offset,f=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${e.key}, offset: ${null===d?"null":d}, type: ${e.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
-function J(a){let b=" root\n";a=a.read(()=>{const c=p.$getSelection();K(p.$getRoot(),(e,d)=>{const f=`(${e.getKey()})`,g=e.getType()||"",m=e.isSelected(),v=l.$isMarkNode(e)?` id: [ ${e.getIDs().join(", ")} ] `:"";var u=b,q=m?F.selectedLine:" ",w=d.join(" ");if(p.$isTextNode(e)){var k=e.getTextContent(!0);let t=0===k.length?"(empty)":`"${L(k)}"`;k=[H(e),M(e),N(e)].filter(Boolean).join(", ");k=[t,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else k="";b=u+`${q} ${w} ${f} ${g} ${v} ${k}\n`;
-b+=O({indent:d,isSelected:m,node:e,nodeKeyDisplay:f,selection:c,typeDisplay:g})});return null===c?": null":p.$isRangeSelection(c)?G(c):p.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}
-function K(a,b,c=[]){a=a.getChildren();let e=a.length;a.forEach((d,f)=>{b(d,c.concat(f===e-1?F.isLastChild:F.hasNextSibling));p.$isElementNode(d)&&K(d,b,c.concat(f===e-1?F.ancestorIsLastChild:F.ancestorHasNextSibling))})}function L(a){return Object.entries(D).reduce((b,[c,e])=>b.replace(new RegExp(c,"g"),String(e)),a)}
-let P=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],Q=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],R=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
-function M(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function H(a){let b=P.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function O({indent:a,isSelected:b,node:c,nodeKeyDisplay:e,selection:d,typeDisplay:f}){if(!p.$isTextNode(c)||!p.$isRangeSelection(d)||!b||p.$isElementNode(c))return"";b=d.anchor;var g=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===g.offset)return"";g=d.anchor;let m=d.focus,v=c.getTextContent(!0),u=v.length;b=d=-1;if("text"===g.type&&"text"===m.type){let k=g.getNode(),t=m.getNode();k===t&&c===k&&g.offset!==m.offset?[d,b]=g.offset<m.offset?[g.offset,m.offset]:[m.offset,
-g.offset]:c===k?[d,b]=k.isBefore(t)?[g.offset,u]:[0,g.offset]:c===t?[d,b]=t.isBefore(k)?[m.offset,u]:[0,m.offset]:[d,b]=[0,u]}c=(v.slice(0,d).match(E)||[]).length;g=(v.slice(d,b).match(E)||[]).length;let [q,w]=[d+c,b+c+g];if(q===w)return"";c=a[a.length-1]===F.hasNextSibling?F.ancestorHasNextSibling:F.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(q+1).fill(" ");d=Array(w-q).fill(F.selectedChar);e=Array(e.length+(f.length+3)).fill(" ");return[F.selectedLine,a.join(" "),[...e,...c,...d].join("")].join(" ")+
+'use strict';var l=require("@lexical/link"),q=require("@lexical/mark"),t=require("lexical"),D=require("react");let E=Object.freeze({"\t":"\\t","\n":"\\n"}),F=new RegExp(Object.keys(E).join("|"),"g"),G=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function H(a){let b="",c=I(a),d=a.anchor;a=a.focus;let e=d.offset,g=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${d.key}, offset: ${null===e?"null":e}, type: ${d.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===g?"null":g}, type: ${a.type} }`}
+function K(a){let b=" root\n";a=a.read(()=>{const c=t.$getSelection();L(t.$getRoot(),(d,e)=>{const g=`(${d.getKey()})`,h=d.getType()||"",n=d.isSelected(),w=q.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var v=b,r=n?G.selectedLine:" ",x=e.join(" ");if(t.$isTextNode(d)){var f=d.getTextContent(!0);var m=0===f.length?"(empty)":`"${M(f)}"`;f=[I(d),N(d),O(d)].filter(Boolean).join(", ");f=[m,0!==f.length?`{ ${f} }`:null].filter(Boolean).join(" ").trim()}else if(l.$isLinkNode(d)){f=d.getURL();f=
+0===f.length?"(empty)":`"${M(f)}"`;m=d.getTarget();null!=m&&(m="target: "+m);var y=Boolean;let u=d.getRel();null!=u&&(u="rel: "+u);m=[m,u].filter(y).join(", ");f=[f,0!==m.length?`{ ${m} }`:null].filter(Boolean).join(" ").trim()}else f="";b=v+`${r} ${x} ${g} ${h} ${w} ${f}\n`;b+=P({indent:e,isSelected:n,node:d,nodeKeyDisplay:g,selection:c,typeDisplay:h})});return null===c?": null":t.$isRangeSelection(c)?H(c):t.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:
+`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}function L(a,b,c=[]){a=a.getChildren();let d=a.length;a.forEach((e,g)=>{b(e,c.concat(g===d-1?G.isLastChild:G.hasNextSibling));t.$isElementNode(e)&&L(e,b,c.concat(g===d-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}function M(a){return Object.entries(E).reduce((b,[c,d])=>b.replace(new RegExp(c,"g"),String(d)),a)}
+let Q=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],R=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],S=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
+function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function O(a){let b=S.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function I(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
+function P({indent:a,isSelected:b,node:c,nodeKeyDisplay:d,selection:e,typeDisplay:g}){if(!t.$isTextNode(c)||!t.$isRangeSelection(e)||!b||t.$isElementNode(c))return"";b=e.anchor;var h=e.focus;if(""===c.getTextContent()||b.getNode()===e.focus.getNode()&&b.offset===h.offset)return"";h=e.anchor;let n=e.focus,w=c.getTextContent(!0),v=w.length;b=e=-1;if("text"===h.type&&"text"===n.type){let f=h.getNode(),m=n.getNode();f===m&&c===f&&h.offset!==n.offset?[e,b]=h.offset<n.offset?[h.offset,n.offset]:[n.offset,
+h.offset]:c===f?[e,b]=f.isBefore(m)?[h.offset,v]:[0,h.offset]:c===m?[e,b]=m.isBefore(f)?[n.offset,v]:[0,n.offset]:[e,b]=[0,v]}c=(w.slice(0,e).match(F)||[]).length;h=(w.slice(e,b).match(F)||[]).length;let [r,x]=[e+c,b+c+h];if(r===x)return"";c=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r+1).fill(" ");e=Array(x-r).fill(G.selectedChar);d=Array(d.length+(g.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...d,...c,...e].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:e,timeTravelPanelClassName:d,editor:f}){let [g,m]=r.useState([]),[v,u]=r.useState(""),[q,w]=r.useState(!1),k=r.useRef(0),t=r.useRef(null),B=r.useRef(null),[z,C]=r.useState(!1);r.useEffect(()=>{u(J(f.getEditorState()));return f.registerUpdateListener(({editorState:h})=>{let n=f._compositionKey,x=J(f.getEditorState());u([x,null!==n&&`Composition key: ${n}`].filter(Boolean).join("\n\n"));q||
-m(A=>[...A,[Date.now(),h]])})},[q,f]);let y=g.length;r.useEffect(()=>{if(z){let h,n=()=>{const x=k.current;x===y-1?C(!1):h=setTimeout(()=>{k.current++;const A=k.current,I=B.current;null!==I&&(I.value=String(A));f.setEditorState(g[A][1]);n()},g[x+1][0]-g[x][0])};n();return()=>{window.clearTimeout(h)}}},[g,z,f,y]);r.useEffect(()=>{let h=t.current;if(null!==h)return h.__lexicalEditor=f,()=>{h.__lexicalEditor=null}},[f]);return r.createElement("div",{className:e},!q&&2<y&&r.createElement("button",{onClick:()=>
-{let h=f.getRootElement();null!==h&&(h.contentEditable="false",k.current=y-1,w(!0))},className:a},"Time Travel"),r.createElement("pre",{ref:t},v),q&&r.createElement("div",{className:d},r.createElement("button",{className:c,onClick:()=>{C(!z)}},z?"Pause":"Play"),r.createElement("input",{className:b,ref:B,onChange:h=>{h=Number(h.target.value);let n=g[h];n&&(k.current=h,f.setEditorState(n[1]))},type:"range",min:"1",max:y-1}),r.createElement("button",{className:c,onClick:()=>{var h=f.getRootElement();
-if(null!==h){h.contentEditable="true";h=g.length-1;f.setEditorState(g[h][1]);let n=B.current;null!==n&&(n.value=String(h));w(!1);C(!1)}}},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:d,timeTravelPanelClassName:e,editor:g}){let [h,n]=D.useState([]),[w,v]=D.useState(""),[r,x]=D.useState(!1),f=D.useRef(0),m=D.useRef(null),y=D.useRef(null),[u,C]=D.useState(!1);D.useEffect(()=>{v(K(g.getEditorState()));return g.registerUpdateListener(({editorState:k})=>{let p=g._compositionKey,z=K(g.getEditorState());v([z,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
+n(B=>[...B,[Date.now(),k]])})},[r,g]);let A=h.length;D.useEffect(()=>{if(u){let k,p=()=>{const z=f.current;z===A-1?C(!1):k=setTimeout(()=>{f.current++;const B=f.current,J=y.current;null!==J&&(J.value=String(B));g.setEditorState(h[B][1]);p()},h[z+1][0]-h[z][0])};p();return()=>{clearTimeout(k)}}},[h,u,g,A]);D.useEffect(()=>{let k=m.current;if(null!==k)return k.__lexicalEditor=g,()=>{k.__lexicalEditor=null}},[g]);return D.createElement("div",{className:d},!r&&2<A&&D.createElement("button",{onClick:()=>
+{let k=g.getRootElement();null!==k&&(k.contentEditable="false",f.current=A-1,x(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:m},w),r&&D.createElement("div",{className:e},D.createElement("button",{className:c,onClick:()=>{C(!u)},type:"button"},u?"Pause":"Play"),D.createElement("input",{className:b,ref:y,onChange:k=>{k=Number(k.target.value);let p=h[k];p&&(f.current=k,g.setEditorState(p[1]))},type:"range",min:"1",max:A-1}),D.createElement("button",{className:c,onClick:()=>
+{var k=g.getRootElement();if(null!==k){k.contentEditable="true";k=h.length-1;g.setEditorState(h[k][1]);let p=y.current;null!==p&&(p.value=String(k));x(!1);C(!1)}},type:"button"},"Exit")))}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 { 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: () => ClientRect;
+};
+export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+export declare class TypeaheadOption {
+    key: string;
+    ref?: MutableRefObject<HTMLElement | null>;
+    constructor(key: string);
+    setRefElement(element: HTMLElement | null): void;
+}
+declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElement: HTMLElement | null, itemProps: {
+    selectedIndex: number | null;
+    selectOptionAndCleanUp: (option: TOption) => void;
+    setHighlightedIndex: (index: number) => void;
+}, matchingString: string) => ReactPortal | JSX.Element | null;
+export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLength, maxLength }: {
+    minLength?: number;
+    maxLength?: number;
+}): TriggerFn;
+declare type TypeaheadMenuPluginArgs<TOption extends TypeaheadOption> = {
+    onQueryChange: (matchingString: string | null) => void;
+    onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
+    options: Array<TOption>;
+    menuRenderFn: MenuRenderFn<TOption>;
+    triggerFn: TriggerFn;
+};
+declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
+export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, menuRenderFn, triggerFn, }: TypeaheadMenuPluginArgs<TOption>): JSX.Element | null;
+declare type NodeMenuPluginArgs<TOption extends TypeaheadOption> = {
+    onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
+    options: Array<TOption>;
+    nodeKey: NodeKey | null;
+    onClose: () => void;
+    menuRenderFn: MenuRenderFn<TOption>;
+};
+export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onSelectOption, menuRenderFn, }: NodeMenuPluginArgs<TOption>): JSX.Element | null;
+export {};