@lexical/react 0.7.0 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LexicalCheckListPlugin.dev.js +10 -6
- package/LexicalCheckListPlugin.prod.js +1 -1
- package/LexicalLinkPlugin.dev.js +8 -3
- package/LexicalLinkPlugin.prod.js +3 -3
- package/LexicalTabIndentationPlugin.js.flow +10 -0
- package/LexicalTreeView.dev.js +8 -5
- package/LexicalTreeView.prod.js +10 -10
- package/package.json +19 -19
|
@@ -73,13 +73,17 @@ function CheckListPlugin() {
|
|
|
73
73
|
const anchorNode = anchor.getNode();
|
|
74
74
|
const elementNode = utils.$findMatchingParent(anchorNode, node => lexical.$isElementNode(node) && !node.isInline());
|
|
75
75
|
|
|
76
|
-
if (list.$isListItemNode(elementNode)
|
|
77
|
-
const
|
|
76
|
+
if (list.$isListItemNode(elementNode)) {
|
|
77
|
+
const parent = elementNode.getParent();
|
|
78
78
|
|
|
79
|
-
if (
|
|
80
|
-
domNode.
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
if (list.$isListNode(parent) && parent.getListType() === 'check' && (isElement || elementNode.getFirstDescendant() === anchorNode)) {
|
|
80
|
+
const domNode = editor.getElementByKey(elementNode.__key);
|
|
81
|
+
|
|
82
|
+
if (domNode != null && document.activeElement !== domNode) {
|
|
83
|
+
domNode.focus();
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
return true;
|
|
86
|
+
}
|
|
83
87
|
}
|
|
84
88
|
}
|
|
85
89
|
}
|
|
@@ -11,4 +11,4 @@ function w(a,d){let b=d?a.getPreviousSibling():a.getNextSibling();for(;null==b&&
|
|
|
11
11
|
function x(a,d,b){let c=v();null!=c&&d.update(()=>{var f=l.$getNearestNodeFromDOMNode(c);if(e.$isListItemNode(f)&&(f=w(f,b),null!=f)){f.selectStart();let h=d.getElementByKey(f.__key);null!=h&&(a.preventDefault(),setTimeout(()=>{h.focus()},0))}});return!1}
|
|
12
12
|
exports.CheckListPlugin=function(){let [a]=g.useLexicalComposerContext();m.useEffect(()=>k.mergeRegister(a.registerCommand(e.INSERT_CHECK_LIST_COMMAND,()=>{e.insertList(a,"check");return!0},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_DOWN_COMMAND,d=>x(d,a,!1),l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_UP_COMMAND,d=>x(d,a,!0),l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ESCAPE_COMMAND,()=>{if(null!=v()){let d=a.getRootElement();null!=d&&d.focus();return!0}return!1},l.COMMAND_PRIORITY_LOW),
|
|
13
13
|
a.registerCommand(l.KEY_SPACE_COMMAND,d=>{let b=v();return null!=b&&a.isEditable()?(a.update(()=>{let c=l.$getNearestNodeFromDOMNode(b);e.$isListItemNode(c)&&(d.preventDefault(),c.toggleChecked())}),!0):!1},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_LEFT_COMMAND,d=>a.getEditorState().read(()=>{var b=l.$getSelection();if(l.$isRangeSelection(b)&&b.isCollapsed()){var {anchor:c}=b;if((b="element"===c.type)||0===c.offset){c=c.getNode();let f=k.$findMatchingParent(c,h=>l.$isElementNode(h)&&!h.isInline());
|
|
14
|
-
if(e.$isListItemNode(f)&&(b||f.getFirstDescendant()===c)&&(b=a.getElementByKey(f.__key),null!=b&&document.activeElement!==b))return b.focus(),d.preventDefault(),!0}}return!1}),l.COMMAND_PRIORITY_LOW),p()));return null}
|
|
14
|
+
if(e.$isListItemNode(f)){let h=f.getParent();if(e.$isListNode(h)&&"check"===h.getListType()&&(b||f.getFirstDescendant()===c)&&(b=a.getElementByKey(f.__key),null!=b&&document.activeElement!==b))return b.focus(),d.preventDefault(),!0}}}return!1}),l.COMMAND_PRIORITY_LOW),p()));return null}
|
package/LexicalLinkPlugin.dev.js
CHANGED
|
@@ -62,11 +62,16 @@ function LinkPlugin({
|
|
|
62
62
|
|
|
63
63
|
if (!validateUrl(clipboardText)) {
|
|
64
64
|
return false;
|
|
65
|
+
} // If we select nodes that are elements then avoid applying the link.
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
if (!selection.getNodes().some(node => lexical.$isElementNode(node))) {
|
|
69
|
+
editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, clipboardText);
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
return true;
|
|
65
72
|
}
|
|
66
73
|
|
|
67
|
-
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
return true;
|
|
74
|
+
return false;
|
|
70
75
|
}, lexical.COMMAND_PRIORITY_LOW) : () => {// Don't paste arbritrary text as a link when there's no validate function
|
|
71
76
|
});
|
|
72
77
|
}, [editor, validateUrl]);
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
'use strict';var
|
|
8
|
-
exports.LinkPlugin=function({validateUrl:
|
|
9
|
-
a=>{
|
|
7
|
+
'use strict';var b=require("@lexical/link"),c=require("@lexical/react/LexicalComposerContext"),k=require("@lexical/utils"),l=require("lexical"),m=require("react");
|
|
8
|
+
exports.LinkPlugin=function({validateUrl:d}){let [e]=c.useLexicalComposerContext();m.useEffect(()=>{if(!e.hasNodes([b.LinkNode]))throw Error("LinkPlugin: LinkNode not registered on editor");return k.mergeRegister(e.registerCommand(b.TOGGLE_LINK_COMMAND,a=>{if(null===a)return b.toggleLink(a),!0;if("string"===typeof a)return void 0===d||d(a)?(b.toggleLink(a),!0):!1;let {url:f,target:g,rel:h}=a;b.toggleLink(f,{rel:h,target:g});return!0},l.COMMAND_PRIORITY_LOW),void 0!==d?e.registerCommand(l.PASTE_COMMAND,
|
|
9
|
+
a=>{let f=l.$getSelection();if(!l.$isRangeSelection(f)||f.isCollapsed()||!(a instanceof ClipboardEvent)||null==a.clipboardData)return!1;let g=a.clipboardData.getData("text");return d(g)?f.getNodes().some(h=>l.$isElementNode(h))?!1:(e.dispatchCommand(b.TOGGLE_LINK_COMMAND,g),a.preventDefault(),!0):!1},l.COMMAND_PRIORITY_LOW):()=>{})},[e,d]);return null}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* @flow strict
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
declare export function TabIndentationPlugin(): null;
|
package/LexicalTreeView.dev.js
CHANGED
|
@@ -59,14 +59,17 @@ function TreeView({
|
|
|
59
59
|
}
|
|
60
60
|
}, [editor, timeTravelEnabled]);
|
|
61
61
|
React.useEffect(() => {
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
const editorState = editor.getEditorState();
|
|
63
|
+
|
|
64
|
+
if (!showLimited && editorState._nodeMap.size > 1000) {
|
|
65
|
+
setContent(generateContent(editorState, editor._config, editor._compositionKey, editor._editable));
|
|
66
|
+
}
|
|
67
|
+
}, [editor, showLimited]);
|
|
64
68
|
React.useEffect(() => {
|
|
65
69
|
return utils.mergeRegister(editor.registerUpdateListener(({
|
|
66
|
-
editorState
|
|
67
|
-
dirtyLeaves
|
|
70
|
+
editorState
|
|
68
71
|
}) => {
|
|
69
|
-
if (!showLimited &&
|
|
72
|
+
if (!showLimited && editorState._nodeMap.size > 1000) {
|
|
70
73
|
lastEditorStateRef.current = editorState;
|
|
71
74
|
setIsLimited(true);
|
|
72
75
|
|
package/LexicalTreeView.prod.js
CHANGED
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
'use strict';var h=require("@lexical/link"),
|
|
7
|
+
'use strict';var h=require("@lexical/link"),r=require("@lexical/mark"),v=require("@lexical/utils"),F=require("lexical"),I=require("react");let J=Object.freeze({"\t":"\\t","\n":"\\n"}),K=new RegExp(Object.keys(J).join("|"),"g"),L=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
|
|
8
8
|
function M(a){let c="",e=P(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
|
|
9
|
-
function Q(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(d,n)=>{const
|
|
10
|
-
k=0===k.length?"(empty)":`"${S(k)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var
|
|
9
|
+
function Q(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(d,n)=>{const y=`(${d.getKey()})`,t=d.getType()||"",q=d.isSelected(),z=r.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=q?L.selectedLine:" ",D=n.join(" ");if(F.$isTextNode(d)){var k=d.getTextContent();var p=0===k.length?"(empty)":`"${S(k)}"`;k=[P(d),T(d),U(d)].filter(Boolean).join(", ");k=[p,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else if(h.$isLinkNode(d)){k=d.getURL();
|
|
10
|
+
k=0===k.length?"(empty)":`"${S(k)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var A=Boolean;let B=d.getRel();null!=B&&(B="rel: "+B);p=[p,B].filter(A).join(", ");k=[k,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else k="";f=m+`${w} ${D} ${y} ${t} ${z} ${k}\n`;f+=V({indent:n,isSelected:q,node:d,nodeKeyDisplay:y,selection:b,typeDisplay:t})});return null===b?": null":F.$isRangeSelection(b)?M(b):F.DEPRECATED_$isGridSelection(b)?`: grid\n \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
|
|
11
11
|
`: node\n \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n \u2514 namespace ${c.namespace}`;null!==e&&(f+=`\n \u2514 compositionKey ${e}`);return f+=`\n \u2514 editable ${String(l)}`}function R(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?L.isLastChild:L.hasNextSibling));F.$isElementNode(f)&&R(f,c,e.concat(b===l-1?L.ancestorIsLastChild:L.ancestorHasNextSibling))})}
|
|
12
12
|
function S(a){return Object.entries(J).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
|
|
13
13
|
let W=[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"],X=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Y=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
|
|
14
14
|
function T(a){let c=X.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function U(a){let c=Y.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function P(a){let c=W.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
|
|
15
|
-
function V({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(e)||!F.$isRangeSelection(f)||!c||F.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,
|
|
16
|
-
d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,
|
|
15
|
+
function V({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(e)||!F.$isRangeSelection(f)||!c||F.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,y=e.getTextContent(),t=y.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
|
|
16
|
+
d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,t]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}e=(y.slice(0,f).match(K)||[]).length;d=(y.slice(f,c).match(K)||[]).length;let [q,z]=[f+e,c+e+d];if(q===z)return"";e=a[a.length-1]===L.hasNextSibling?L.ancestorHasNextSibling:L.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=Array(q+1).fill(" ");f=Array(z-q).fill(L.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[L.selectedLine,a.join(" "),[...l,...e,...f].join("")].join(" ")+
|
|
17
17
|
"\n"}
|
|
18
|
-
exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=I.useState([]),[
|
|
19
|
-
I.useEffect(()=>{
|
|
20
|
-
O&&(O.value=String(N));b.setEditorState(d[N][1]);
|
|
21
|
-
g&&(G.current=null,H(g))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!
|
|
22
|
-
1);p(!k)},type:"button"},k?"Pause":"Play"),I.createElement("input",{className:c,ref:D,onChange:g=>{g=Number(g.target.value);let
|
|
18
|
+
exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=I.useState([]),[y,t]=I.useState(""),[q,z]=I.useState(!1),m=I.useRef(0),w=I.useRef(null),D=I.useRef(null),[k,p]=I.useState(!1),[A,B]=I.useState(!1),[x,Z]=I.useState(!1),G=I.useRef(null),H=I.useCallback(g=>{const u=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(u);q||n(E=>[...E,[Date.now(),g]])},[b,q]);
|
|
19
|
+
I.useEffect(()=>{let g=b.getEditorState();!x&&1E3<g._nodeMap.size&&t(Q(g,b._config,b._compositionKey,b._editable))},[b,x]);I.useEffect(()=>v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{if(!x&&1E3<g._nodeMap.size&&(G.current=g,B(!0),!x))return;H(g)}),b.registerEditableListener(()=>{let g=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)})),[b,A,H,x]);let C=d.length;I.useEffect(()=>{if(k){let g,u=()=>{const E=m.current;E===C-1?p(!1):g=setTimeout(()=>{m.current++;const N=
|
|
20
|
+
m.current,O=D.current;null!==O&&(O.value=String(N));b.setEditorState(d[N][1]);u()},d[E+1][0]-d[E][0])};u();return()=>{clearTimeout(g)}}},[d,k,b,C]);I.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=b,()=>{g.__lexicalEditor=null}},[b]);return I.createElement("div",{className:l},!x&&A?I.createElement("div",{style:{padding:20}},I.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),I.createElement("button",{onClick:()=>
|
|
21
|
+
{Z(!0);let g=G.current;null!==g&&(G.current=null,H(g))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!q&&(x||!A)&&2<C&&I.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=C-1,z(!0))},className:a,type:"button"},"Time Travel"),(x||!A)&&I.createElement("pre",{ref:w},y),q&&(x||!A)&&I.createElement("div",{className:f},I.createElement("button",{className:e,onClick:()=>
|
|
22
|
+
{m.current===C-1&&(m.current=1);p(!k)},type:"button"},k?"Pause":"Play"),I.createElement("input",{className:c,ref:D,onChange:g=>{g=Number(g.target.value);let u=d[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:C-1}),I.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[g][1]);let u=D.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}
|
package/package.json
CHANGED
|
@@ -8,29 +8,29 @@
|
|
|
8
8
|
"rich-text"
|
|
9
9
|
],
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"version": "0.7.
|
|
11
|
+
"version": "0.7.2",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@lexical/clipboard": "0.7.
|
|
14
|
-
"@lexical/code": "0.7.
|
|
15
|
-
"@lexical/dragon": "0.7.
|
|
16
|
-
"@lexical/hashtag": "0.7.
|
|
17
|
-
"@lexical/history": "0.7.
|
|
18
|
-
"@lexical/link": "0.7.
|
|
19
|
-
"@lexical/list": "0.7.
|
|
20
|
-
"@lexical/mark": "0.7.
|
|
21
|
-
"@lexical/markdown": "0.7.
|
|
22
|
-
"@lexical/overflow": "0.7.
|
|
23
|
-
"@lexical/plain-text": "0.7.
|
|
24
|
-
"@lexical/rich-text": "0.7.
|
|
25
|
-
"@lexical/selection": "0.7.
|
|
26
|
-
"@lexical/table": "0.7.
|
|
27
|
-
"@lexical/text": "0.7.
|
|
28
|
-
"@lexical/utils": "0.7.
|
|
29
|
-
"@lexical/yjs": "0.7.
|
|
13
|
+
"@lexical/clipboard": "0.7.2",
|
|
14
|
+
"@lexical/code": "0.7.2",
|
|
15
|
+
"@lexical/dragon": "0.7.2",
|
|
16
|
+
"@lexical/hashtag": "0.7.2",
|
|
17
|
+
"@lexical/history": "0.7.2",
|
|
18
|
+
"@lexical/link": "0.7.2",
|
|
19
|
+
"@lexical/list": "0.7.2",
|
|
20
|
+
"@lexical/mark": "0.7.2",
|
|
21
|
+
"@lexical/markdown": "0.7.2",
|
|
22
|
+
"@lexical/overflow": "0.7.2",
|
|
23
|
+
"@lexical/plain-text": "0.7.2",
|
|
24
|
+
"@lexical/rich-text": "0.7.2",
|
|
25
|
+
"@lexical/selection": "0.7.2",
|
|
26
|
+
"@lexical/table": "0.7.2",
|
|
27
|
+
"@lexical/text": "0.7.2",
|
|
28
|
+
"@lexical/utils": "0.7.2",
|
|
29
|
+
"@lexical/yjs": "0.7.2",
|
|
30
30
|
"react-error-boundary": "^3.1.4"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"lexical": "0.7.
|
|
33
|
+
"lexical": "0.7.2",
|
|
34
34
|
"react": ">=17.x",
|
|
35
35
|
"react-dom": ">=17.x"
|
|
36
36
|
},
|