@lexical/react 0.11.0 → 0.11.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/LexicalAutoEmbedPlugin.d.ts +2 -2
- package/LexicalAutoFocusPlugin.d.ts +1 -1
- package/LexicalAutoLinkPlugin.d.ts +3 -3
- package/LexicalAutoLinkPlugin.prod.js +7 -7
- package/LexicalBlockWithAlignableContents.d.ts +1 -1
- package/LexicalBlockWithAlignableContents.dev.js +5 -9
- package/LexicalBlockWithAlignableContents.prod.js +3 -3
- package/LexicalCharacterLimitPlugin.dev.js +4 -3
- package/LexicalCharacterLimitPlugin.prod.js +8 -7
- package/LexicalClearEditorPlugin.d.ts +1 -1
- package/LexicalCollaborationContext.d.ts +1 -1
- package/LexicalCollaborationPlugin.d.ts +1 -1
- package/LexicalComposer.d.ts +3 -3
- package/LexicalComposerContext.d.ts +2 -2
- package/LexicalComposerContext.prod.js +2 -2
- package/LexicalContentEditable.d.ts +1 -1
- package/LexicalContentEditable.dev.js +2 -1
- package/LexicalContentEditable.js.flow +11 -11
- package/LexicalContentEditable.prod.js +1 -1
- package/LexicalContextMenuPlugin.d.ts +2 -2
- package/LexicalContextMenuPlugin.dev.js +1 -1
- package/LexicalContextMenuPlugin.prod.js +11 -11
- package/LexicalDecoratorBlockNode.d.ts +1 -1
- package/LexicalEditorRefPlugin.d.ts +20 -0
- package/LexicalEditorRefPlugin.dev.js +42 -0
- package/LexicalEditorRefPlugin.js +9 -0
- package/LexicalEditorRefPlugin.prod.js +7 -0
- package/LexicalErrorBoundary.d.ts +1 -1
- package/LexicalHorizontalRuleNode.d.ts +1 -1
- package/LexicalHorizontalRuleNode.dev.js +2 -5
- package/LexicalHorizontalRuleNode.prod.js +5 -5
- package/LexicalLinkPlugin.d.ts +1 -1
- package/LexicalNestedComposer.prod.js +3 -4
- package/LexicalNodeMenuPlugin.d.ts +1 -1
- package/LexicalNodeMenuPlugin.dev.js +1 -1
- package/LexicalNodeMenuPlugin.prod.js +1 -1
- package/LexicalPlainTextPlugin.dev.js +1 -1
- package/LexicalPlainTextPlugin.prod.js +4 -4
- package/LexicalRichTextPlugin.dev.js +1 -1
- package/LexicalRichTextPlugin.prod.js +4 -4
- package/LexicalTableOfContents.d.ts +2 -2
- package/LexicalTablePlugin.d.ts +2 -1
- package/LexicalTablePlugin.dev.js +4 -3
- package/LexicalTablePlugin.js.flow +1 -0
- package/LexicalTablePlugin.prod.js +5 -6
- package/LexicalTypeaheadMenuPlugin.d.ts +1 -1
- package/LexicalTypeaheadMenuPlugin.dev.js +1 -1
- package/LexicalTypeaheadMenuPlugin.prod.js +15 -15
- package/package.json +19 -19
- package/shared/LexicalMenu.d.ts +4 -4
- package/shared/useCharacterLimit.d.ts +1 -1
- package/shared/useDecorators.d.ts +2 -2
- package/shared/useYjsCollaboration.d.ts +1 -1
- package/useLexicalSubscription.d.ts +1 -1
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import type { LexicalNode } from 'lexical';
|
|
10
10
|
import { MenuOption, MenuRenderFn } from '@lexical/react/LexicalNodeMenuPlugin';
|
|
11
11
|
import { LexicalCommand, LexicalEditor } from 'lexical';
|
|
12
|
-
export
|
|
12
|
+
export type EmbedMatchResult<TEmbedMatchResult = unknown> = {
|
|
13
13
|
url: string;
|
|
14
14
|
id: string;
|
|
15
15
|
data?: TEmbedMatchResult;
|
|
@@ -28,7 +28,7 @@ export declare class AutoEmbedOption extends MenuOption {
|
|
|
28
28
|
onSelect: (targetNode: LexicalNode | null) => void;
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
|
|
32
32
|
embedConfigs: Array<TEmbedConfig>;
|
|
33
33
|
onOpenEmbedModalForConfig: (embedConfig: TEmbedConfig) => void;
|
|
34
34
|
getMenuOptions: (activeEmbedConfig: TEmbedConfig, embedFn: () => void, dismissFn: () => void) => Array<AutoEmbedOption>;
|
|
@@ -7,15 +7,15 @@
|
|
|
7
7
|
*/
|
|
8
8
|
/// <reference types="react" />
|
|
9
9
|
import type { LinkAttributes } from '@lexical/link';
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
type ChangeHandler = (url: string | null, prevUrl: string | null) => void;
|
|
11
|
+
type LinkMatcherResult = {
|
|
12
12
|
attributes?: LinkAttributes;
|
|
13
13
|
index: number;
|
|
14
14
|
length: number;
|
|
15
15
|
text: string;
|
|
16
16
|
url: string;
|
|
17
17
|
};
|
|
18
|
-
export
|
|
18
|
+
export type LinkMatcher = (text: string) => LinkMatcherResult | null;
|
|
19
19
|
export declare function createLinkMatcherWithRegExp(regExp: RegExp, urlTransformer?: (text: string) => string): (text: string) => {
|
|
20
20
|
index: number;
|
|
21
21
|
length: number;
|
|
@@ -4,10 +4,10 @@
|
|
|
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"),n=require("@lexical/react/LexicalComposerContext"),p=require("@lexical/utils"),u=require("lexical"),w=require("react");function A(a,
|
|
8
|
-
function E(a){a=a.getNextSibling();u.$isElementNode(a)&&(a=a.getFirstDescendant());return null===a||u.$isLineBreakNode(a)||u.$isTextNode(a)&&
|
|
9
|
-
function
|
|
10
|
-
null,d)))):(
|
|
11
|
-
function
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
'use strict';var h=require("@lexical/link"),n=require("@lexical/react/LexicalComposerContext"),p=require("@lexical/utils"),u=require("lexical"),w=require("react");function A(a){let b=new URLSearchParams;b.append("code",a);for(let c=1;c<arguments.length;c++)b.append("v",arguments[c]);throw Error(`Minified Lexical error #${a}; visit https://lexical.dev/docs/error?${b} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
|
|
8
|
+
function B(a,b){for(let c=0;c<b.length;c++){let d=b[c](a);if(d)return d}return null}let C=/[.,;\s]/;function E(a){a=a.getPreviousSibling();u.$isElementNode(a)&&(a=a.getLastDescendant());var b;!(b=null===a||u.$isLineBreakNode(a))&&(b=u.$isTextNode(a))&&(a=a.getTextContent(),b=C.test(a[a.length-1]));return b}function F(a){a=a.getNextSibling();u.$isElementNode(a)&&(a=a.getFirstDescendant());return null===a||u.$isLineBreakNode(a)||u.$isTextNode(a)&&C.test(a.getTextContent()[0])}
|
|
9
|
+
function G(a,b,c){var d=a.getChildren();let e=d.length;for(let f=0;f<e;f++){let l=d[f];if(!u.$isTextNode(l)||!l.isSimpleText()){H(a);c(null,a.getURL());return}}d=a.getTextContent();b=B(d,b);null===b||b.text!==d?(H(a),c(null,a.getURL())):E(a)&&F(a)?(d=a.getURL(),d!==b.url&&(a.setURL(b.url),c(b.url,d)),b.attributes&&(d=a.getRel(),d!==b.attributes.rel&&(a.setRel(b.attributes.rel||null),c(b.attributes.rel||null,d)),d=a.getTarget(),d!==b.attributes.target&&(a.setTarget(b.attributes.target||null),c(b.attributes.target||
|
|
10
|
+
null,d)))):(H(a),c(null,a.getURL()))}function H(a){let b=a.getChildren();var c=b.length;for(--c;0<=c;c--)a.insertAfter(b[c]);a.remove();return b.map(d=>d.getLatest())}
|
|
11
|
+
function I(a,b,c){w.useEffect(()=>{a.hasNodes([h.AutoLinkNode])||A(77);let d=(e,f)=>{c&&c(e,f)};return p.mergeRegister(a.registerNodeTransform(u.TextNode,e=>{var f=e.getParentOrThrow(),l=e.getPreviousSibling();if(h.$isAutoLinkNode(f))G(f,b,d);else if(!h.$isLinkNode(f)){if(e.isSimpleText()&&(C.test(e.getTextContent()[0])||!h.$isAutoLinkNode(l))){l=f=e.getTextContent();let m=0,v=e;for(var g;(g=B(l,b))&&null!==g;){let r=g.index,x=g.length,y=r+x;var t=m+r,q=m+y,z=f,D=e;if((0<t?C.test(z[t-1]):E(D))&&(q<
|
|
12
|
+
z.length?C.test(z[q]):F(D))){var k=void 0;0===m+r?[k,v]=v.splitText(m+x):[,k,v]=v.splitText(m+r,m+r+x);t=h.$createAutoLinkNode(g.url,g.attributes);q=u.$createTextNode(g.text);q.setFormat(k.getFormat());q.setDetail(k.getDetail());t.append(q);k.replace(t);c&&c(g.url,null);m=0}else m+=y;l=l.substring(y)}}f=e.getPreviousSibling();g=e.getNextSibling();k=e.getTextContent();h.$isAutoLinkNode(f)&&!C.test(k[0])&&(f.append(e),G(f,b,d),e=f.getURL(),c&&c(null,e));h.$isAutoLinkNode(g)&&!C.test(k[k.length-1])&&
|
|
13
|
+
(H(g),G(g,b,d),e=g.getURL(),c&&c(null,e))}}))},[a,b,c])}exports.AutoLinkPlugin=function({matchers:a,onChange:b}){let [c]=n.useLexicalComposerContext();I(c,a,b);return null};exports.createLinkMatcherWithRegExp=function(a,b=c=>c){return c=>{let d=a.exec(c);return null===d?null:{index:d.index,length:d[0].length,text:d[0],url:b(c)}}}
|
|
@@ -32,19 +32,15 @@ function BlockWithAlignableContents({
|
|
|
32
32
|
const onDelete = React.useCallback(event => {
|
|
33
33
|
if (isSelected && lexical.$isNodeSelection(lexical.$getSelection())) {
|
|
34
34
|
event.preventDefault();
|
|
35
|
-
|
|
36
|
-
const node = lexical.$getNodeByKey(nodeKey);
|
|
37
|
-
if (node === null) return;
|
|
38
|
-
lexical.$setSelection(node.selectPrevious());
|
|
35
|
+
const node = lexical.$getNodeByKey(nodeKey);
|
|
39
36
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
});
|
|
37
|
+
if (lexical.$isDecoratorNode(node)) {
|
|
38
|
+
node.remove();
|
|
39
|
+
}
|
|
44
40
|
}
|
|
45
41
|
|
|
46
42
|
return false;
|
|
47
|
-
}, [
|
|
43
|
+
}, [isSelected, nodeKey]);
|
|
48
44
|
React.useEffect(() => {
|
|
49
45
|
return utils.mergeRegister(editor.registerCommand(lexical.FORMAT_ELEMENT_COMMAND, formatType => {
|
|
50
46
|
if (isSelected) {
|
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
'use strict';var a=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/LexicalDecoratorBlockNode"),l=require("@lexical/react/useLexicalNodeSelection"),m=require("@lexical/utils"),u=require("lexical"),v=require("react");
|
|
8
|
-
exports.BlockWithAlignableContents=function({children:w,format:n,nodeKey:
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
exports.BlockWithAlignableContents=function({children:w,format:n,nodeKey:e,className:p}){let [f]=a.useLexicalComposerContext(),[c,q,r]=l.useLexicalNodeSelection(e),t=v.useRef(null),k=v.useCallback(b=>{c&&u.$isNodeSelection(u.$getSelection())&&(b.preventDefault(),b=u.$getNodeByKey(e),u.$isDecoratorNode(b)&&b.remove());return!1},[c,e]);v.useEffect(()=>m.mergeRegister(f.registerCommand(u.FORMAT_ELEMENT_COMMAND,b=>{if(c){var g=u.$getSelection();if(u.$isNodeSelection(g)){var d=u.$getNodeByKey(e);h.$isDecoratorBlockNode(d)&&
|
|
9
|
+
d.setFormat(b)}else if(u.$isRangeSelection(g)){g=g.getNodes();for(d of g)h.$isDecoratorBlockNode(d)?d.setFormat(b):m.$getNearestBlockElementAncestorOrThrow(d).setFormat(b)}return!0}return!1},u.COMMAND_PRIORITY_LOW),f.registerCommand(u.CLICK_COMMAND,b=>b.target===t.current?(b.preventDefault(),b.shiftKey||r(),q(!c),!0):!1,u.COMMAND_PRIORITY_LOW),f.registerCommand(u.KEY_DELETE_COMMAND,k,u.COMMAND_PRIORITY_LOW),f.registerCommand(u.KEY_BACKSPACE_COMMAND,k,u.COMMAND_PRIORITY_LOW)),[r,f,c,e,k,q]);return v.createElement("div",
|
|
10
|
+
{className:[p.base,c?p.focus:null].filter(Boolean).join(" "),ref:t,style:{textAlign:n?n:void 0}},w)}
|
|
@@ -41,12 +41,13 @@ function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({}))
|
|
|
41
41
|
return utils.mergeRegister(editor.registerTextContentListener(currentText => {
|
|
42
42
|
text$1 = currentText;
|
|
43
43
|
}), editor.registerUpdateListener(({
|
|
44
|
-
dirtyLeaves
|
|
44
|
+
dirtyLeaves,
|
|
45
|
+
dirtyElements
|
|
45
46
|
}) => {
|
|
46
47
|
const isComposing = editor.isComposing();
|
|
47
|
-
const
|
|
48
|
+
const hasContentChanges = dirtyLeaves.size > 0 || dirtyElements.size > 0;
|
|
48
49
|
|
|
49
|
-
if (isComposing || !
|
|
50
|
+
if (isComposing || !hasContentChanges) {
|
|
50
51
|
return;
|
|
51
52
|
}
|
|
52
53
|
|
|
@@ -4,11 +4,12 @@
|
|
|
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
|
-
function D(b
|
|
9
|
-
{var w=b.isComposing();f=0<f.size;if(!w&&f){w=e(
|
|
10
|
-
|
|
11
|
-
else
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
'use strict';var p=require("@lexical/react/LexicalComposerContext"),u=require("react"),v=require("@lexical/overflow"),z=require("@lexical/text"),A=require("@lexical/utils"),C=require("lexical");
|
|
8
|
+
function D(b){let c=new URLSearchParams;c.append("code",b);for(let k=1;k<arguments.length;k++)c.append("v",arguments[k]);throw Error(`Minified Lexical error #${b}; visit https://lexical.dev/docs/error?${c} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
|
|
9
|
+
function F(b,c,k=Object.freeze({})){let {strlen:e=m=>m.length,remainingCharacters:q=()=>{}}=k;u.useEffect(()=>{b.hasNodes([v.OverflowNode])||D(57)},[b]);u.useEffect(()=>{let m=b.getEditorState().read(z.$rootTextContent),d=0;return A.mergeRegister(b.registerTextContentListener(f=>{m=f}),b.registerUpdateListener(({dirtyLeaves:f,dirtyElements:J})=>{var w=b.isComposing();f=0<f.size||0<J.size;if(!w&&f){w=e(m);f=w>c||null!==d&&d>c;q(c-w);if(null===d||f){let r=G(m,c,e);b.update(()=>{let B=A.$dfs(),L=B.length,
|
|
10
|
+
x=0;for(let y=0;y<L;y+=1){var {node:a}=B[y];if(v.$isOverflowNode(a)){var g=x;if(x+a.getTextContentSize()<=r){var h=a.getParent();g=a.getPreviousSibling();var l=a.getNextSibling();H(a);a=C.$getSelection();!C.$isRangeSelection(a)||a.anchor.getNode().isAttached()&&a.focus.getNode().isAttached()||(C.$isTextNode(g)?g.select():C.$isTextNode(l)?l.select():null!==h&&h.select())}else g<r&&(h=a.getFirstDescendant(),l=null!==h?h.getTextContentSize():0,g+=l,h=C.$isTextNode(h)&&h.isSimpleText(),g=g<=r,(h||g)&&
|
|
11
|
+
H(a))}else if(C.$isLeafNode(a)&&(g=x,x+=a.getTextContentSize(),x>r&&!v.$isOverflowNode(a.getParent())&&(h=C.$getSelection(),g<r&&C.$isTextNode(a)&&a.isSimpleText()?([,a]=a.splitText(r-g),a=I(a)):a=I(a),null!==h&&C.$setSelection(h),g=a.getPreviousSibling(),v.$isOverflowNode(g)))){l=a.getFirstChild();var t=g.getChildren();h=t.length;if(null===l)a.append(...t);else for(var n=0;n<h;n++)l.insertBefore(t[n]);n=C.$getSelection();if(C.$isRangeSelection(n)){l=n.anchor;t=l.getNode();n=n.focus;let E=l.getNode();
|
|
12
|
+
t.is(g)?l.set(a.getKey(),l.offset,"element"):t.is(a)&&l.set(a.getKey(),h+l.offset,"element");E.is(g)?n.set(a.getKey(),n.offset,"element"):E.is(a)&&n.set(a.getKey(),h+n.offset,"element")}g.remove()}}},{tag:"history-merge"})}d=w}}))},[b,c,q,e])}
|
|
13
|
+
function G(b,c,k){var e=Intl.Segmenter;let q=0;var m=0;if("function"===typeof e){b=(new e).segment(b);for(var {segment:d}of b){m+=k(d);if(m>c)break;q+=d.length}}else for(d=Array.from(b),b=d.length,e=0;e<b;e++){let f=d[e];m+=k(f);if(m>c)break;q+=f.length}return q}function I(b){let c=v.$createOverflowNode();b.insertBefore(c);c.append(b);return c}function H(b){let c=b.getChildren(),k=c.length;for(let e=0;e<k;e++)b.insertBefore(c[e]);b.remove();return 0<k?c[k-1]:null}let K=null;
|
|
14
|
+
exports.CharacterLimitPlugin=function({charset:b="UTF-16",maxLength:c=5}){let [k]=p.useLexicalComposerContext(),[e,q]=u.useState(c),m=u.useMemo(()=>({remainingCharacters:q,strlen:d=>{if("UTF-8"===b){if(void 0===window.TextEncoder)var f=null;else null===K&&(K=new window.TextEncoder),f=K;null===f?(f=encodeURIComponent(d).match(/%[89ABab]/g),d=d.length+(f?f.length:0)):d=f.encode(d).length;return d}if("UTF-16"===b)return d.length;throw Error("Unrecognized charset");}}),[b]);F(k,c,m);return u.createElement("span",
|
|
14
15
|
{className:`characters-limit ${0>e?"characters-limit-exceeded":""}`},e)}
|
|
@@ -10,7 +10,7 @@ import type { Doc } from 'yjs';
|
|
|
10
10
|
import { ExcludedProperties, Provider } from '@lexical/yjs';
|
|
11
11
|
import { InitialEditorStateType } from './LexicalComposer';
|
|
12
12
|
import { CursorsContainerRef } from './shared/useYjsCollaboration';
|
|
13
|
-
|
|
13
|
+
type Props = {
|
|
14
14
|
id: string;
|
|
15
15
|
providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => Provider;
|
|
16
16
|
shouldBootstrap: boolean;
|
package/LexicalComposer.d.ts
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
*/
|
|
8
8
|
/// <reference types="react" />
|
|
9
9
|
import { EditorState, EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
|
|
10
|
-
export
|
|
11
|
-
export
|
|
10
|
+
export type InitialEditorStateType = null | string | EditorState | ((editor: LexicalEditor) => void);
|
|
11
|
+
export type InitialConfigType = Readonly<{
|
|
12
12
|
editor__DEPRECATED?: LexicalEditor | null;
|
|
13
13
|
namespace: string;
|
|
14
14
|
nodes?: ReadonlyArray<Klass<LexicalNode> | {
|
|
@@ -22,7 +22,7 @@ export declare type InitialConfigType = Readonly<{
|
|
|
22
22
|
theme?: EditorThemeClasses;
|
|
23
23
|
editorState?: InitialEditorStateType;
|
|
24
24
|
}>;
|
|
25
|
-
|
|
25
|
+
type Props = {
|
|
26
26
|
children: JSX.Element | string | (JSX.Element | string)[];
|
|
27
27
|
initialConfig: InitialConfigType;
|
|
28
28
|
};
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
*/
|
|
8
8
|
/// <reference types="react" />
|
|
9
9
|
import type { EditorThemeClasses, LexicalEditor } from 'lexical';
|
|
10
|
-
export
|
|
10
|
+
export type LexicalComposerContextType = {
|
|
11
11
|
getTheme: () => EditorThemeClasses | null | undefined;
|
|
12
12
|
};
|
|
13
|
-
export
|
|
13
|
+
export type LexicalComposerContextWithEditor = [
|
|
14
14
|
LexicalEditor,
|
|
15
15
|
LexicalComposerContextType
|
|
16
16
|
];
|
|
@@ -4,5 +4,5 @@
|
|
|
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.
|
|
7
|
+
'use strict';var d=require("react");function e(a){let c=new URLSearchParams;c.append("code",a);for(let b=1;b<arguments.length;b++)c.append("v",arguments[b]);throw Error(`Minified Lexical error #${a}; visit https://lexical.dev/docs/error?${c} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}let f=d.createContext(null);exports.LexicalComposerContext=f;
|
|
8
|
+
exports.createLexicalComposerContext=function(a,c){let b=null;null!=a&&(b=a[1]);return{getTheme:function(){return null!=c?c:null!=b?b.getTheme():null}}};exports.useLexicalComposerContext=function(){let a=d.useContext(f);null==a&&e(8);return a}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import * as React from 'react';
|
|
9
|
-
export
|
|
9
|
+
export type Props = {
|
|
10
10
|
ariaActiveDescendant?: React.AriaAttributes['aria-activedescendant'];
|
|
11
11
|
ariaAutoComplete?: React.AriaAttributes['aria-autocomplete'];
|
|
12
12
|
ariaControls?: React.AriaAttributes['aria-controls'];
|
|
@@ -87,6 +87,7 @@ function ContentEditable({
|
|
|
87
87
|
"aria-labelledby": ariaLabelledBy,
|
|
88
88
|
"aria-multiline": ariaMultiline,
|
|
89
89
|
"aria-owns": !isEditable ? undefined : ariaOwns,
|
|
90
|
+
"aria-readonly": !isEditable ? true : undefined,
|
|
90
91
|
"aria-required": ariaRequired,
|
|
91
92
|
autoCapitalize: autoCapitalize,
|
|
92
93
|
className: className,
|
|
@@ -94,7 +95,7 @@ function ContentEditable({
|
|
|
94
95
|
"data-testid": testid,
|
|
95
96
|
id: id,
|
|
96
97
|
ref: ref,
|
|
97
|
-
role:
|
|
98
|
+
role: role,
|
|
98
99
|
spellCheck: spellCheck,
|
|
99
100
|
style: style,
|
|
100
101
|
tabIndex: tabIndex
|
|
@@ -11,17 +11,17 @@ import * as React from 'react';
|
|
|
11
11
|
|
|
12
12
|
export type Props = $ReadOnly<{
|
|
13
13
|
...Partial<HTMLDivElement>,
|
|
14
|
-
ariaActiveDescendant?:
|
|
15
|
-
ariaAutoComplete?:
|
|
16
|
-
ariaControls?:
|
|
17
|
-
ariaDescribedBy?:
|
|
18
|
-
ariaExpanded?:
|
|
19
|
-
ariaLabel?:
|
|
20
|
-
ariaLabelledBy?:
|
|
21
|
-
ariaMultiline?:
|
|
22
|
-
ariaOwns?:
|
|
23
|
-
ariaRequired?:
|
|
24
|
-
autoCapitalize?:
|
|
14
|
+
ariaActiveDescendant?: string,
|
|
15
|
+
ariaAutoComplete?: string,
|
|
16
|
+
ariaControls?: string,
|
|
17
|
+
ariaDescribedBy?: string,
|
|
18
|
+
ariaExpanded?: boolean,
|
|
19
|
+
ariaLabel?: string,
|
|
20
|
+
ariaLabelledBy?: string,
|
|
21
|
+
ariaMultiline?: boolean,
|
|
22
|
+
ariaOwns?: string,
|
|
23
|
+
ariaRequired?: boolean,
|
|
24
|
+
autoCapitalize?: boolean,
|
|
25
25
|
'data-testid'?: string | null,
|
|
26
26
|
...
|
|
27
27
|
}>;
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*/
|
|
7
7
|
'use strict';var c=require("@lexical/react/LexicalComposerContext"),h=require("react");function n(){n=Object.assign?Object.assign.bind():function(g){for(var d=1;d<arguments.length;d++){var e=arguments[d],b;for(b in e)Object.prototype.hasOwnProperty.call(e,b)&&(g[b]=e[b])}return g};return n.apply(this,arguments)}var p="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;
|
|
8
8
|
exports.ContentEditable=function({ariaActiveDescendant:g,ariaAutoComplete:d,ariaControls:e,ariaDescribedBy:b,ariaExpanded:q,ariaLabel:r,ariaLabelledBy:t,ariaMultiline:u,ariaOwns:v,ariaRequired:w,autoCapitalize:x,className:y,id:z,role:l="textbox",spellCheck:A=!0,style:B,tabIndex:C,"data-testid":D,...E}){let [f]=c.useLexicalComposerContext(),[a,m]=h.useState(!1),F=h.useCallback(k=>{f.setRootElement(k)},[f]);p(()=>{m(f.isEditable());return f.registerEditableListener(k=>{m(k)})},[f]);return h.createElement("div",
|
|
9
|
-
n({},E,{"aria-activedescendant":a?g:void 0,"aria-autocomplete":a?d:"none","aria-controls":a?e:void 0,"aria-describedby":b,"aria-expanded":a?"combobox"===l?!!q:void 0:void 0,"aria-label":r,"aria-labelledby":t,"aria-multiline":u,"aria-owns":a?v:void 0,"aria-required":w,autoCapitalize:x,className:y,contentEditable:a,"data-testid":D,id:z,ref:F,role:
|
|
9
|
+
n({},E,{"aria-activedescendant":a?g:void 0,"aria-autocomplete":a?d:"none","aria-controls":a?e:void 0,"aria-describedby":b,"aria-expanded":a?"combobox"===l?!!q:void 0:void 0,"aria-label":r,"aria-labelledby":t,"aria-multiline":u,"aria-owns":a?v:void 0,"aria-readonly":a?void 0:!0,"aria-required":w,autoCapitalize:x,className:y,contentEditable:a,"data-testid":D,id:z,ref:F,role:l,spellCheck:A,style:B,tabIndex:C}))}
|
|
@@ -9,7 +9,7 @@ import type { MenuRenderFn, MenuResolution } from './shared/LexicalMenu';
|
|
|
9
9
|
import { LexicalNode } from 'lexical';
|
|
10
10
|
import { MutableRefObject, ReactPortal } from 'react';
|
|
11
11
|
import { MenuOption } from './shared/LexicalMenu';
|
|
12
|
-
export
|
|
12
|
+
export type ContextMenuRenderFn<TOption extends MenuOption> = (anchorElementRef: MutableRefObject<HTMLElement | null>, itemProps: {
|
|
13
13
|
selectedIndex: number | null;
|
|
14
14
|
selectOptionAndCleanUp: (option: TOption) => void;
|
|
15
15
|
setHighlightedIndex: (index: number) => void;
|
|
@@ -17,7 +17,7 @@ export declare type ContextMenuRenderFn<TOption extends MenuOption> = (anchorEle
|
|
|
17
17
|
}, menuProps: {
|
|
18
18
|
setMenuRef: (element: HTMLElement | null) => void;
|
|
19
19
|
}) => ReactPortal | JSX.Element | null;
|
|
20
|
-
export
|
|
20
|
+
export type LexicalContextMenuPluginProps<TOption extends MenuOption> = {
|
|
21
21
|
onSelectOption: (option: TOption, textNodeContainingQuery: LexicalNode | null, closeMenu: () => void, matchingString: string) => void;
|
|
22
22
|
options: Array<TOption>;
|
|
23
23
|
onClose?: () => void;
|
|
@@ -376,7 +376,7 @@ function useMenuAnchorRef(resolution, setResolution, className) {
|
|
|
376
376
|
const rootElementRect = rootElement.getBoundingClientRect();
|
|
377
377
|
|
|
378
378
|
if (left + menuWidth > rootElementRect.right) {
|
|
379
|
-
containerDiv.style.left = `${
|
|
379
|
+
containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
const margin = 10;
|
|
@@ -6,16 +6,16 @@
|
|
|
6
6
|
*/
|
|
7
7
|
'use strict';var k=require("@lexical/react/LexicalComposerContext"),t=require("react"),w=require("@lexical/utils"),x=require("lexical"),y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?t.useLayoutEffect:t.useEffect;class z{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
|
|
8
8
|
let A=b=>{const a=document.getElementById("typeahead-menu");if(a){var d=a.getBoundingClientRect();d.top+d.height>window.innerHeight&&a.scrollIntoView({block:"center"});0>d.top&&a.scrollIntoView({block:"center"});b.scrollIntoView({block:"nearest"})}};
|
|
9
|
-
function B(b){var a=x.$getSelection();if(!x.$isRangeSelection(a)||!a.isCollapsed())return null;var d=a.anchor;if("text"!==d.type)return null;a=d.getNode();if(!a.isSimpleText())return null;d=d.offset;let l=a.getTextContent().slice(0,d);var f=b.matchingString;b=b.replaceableString.length;for(let m=b;m<=f.length;m++)l.substr(-m)===f.substr(0,m)&&(b=m);b=d-b;if(0>b)return null;let
|
|
9
|
+
function B(b){var a=x.$getSelection();if(!x.$isRangeSelection(a)||!a.isCollapsed())return null;var d=a.anchor;if("text"!==d.type)return null;a=d.getNode();if(!a.isSimpleText())return null;d=d.offset;let l=a.getTextContent().slice(0,d);var f=b.matchingString;b=b.replaceableString.length;for(let m=b;m<=f.length;m++)l.substr(-m)===f.substr(0,m)&&(b=m);b=d-b;if(0>b)return null;let q;0===b?[q]=a.splitText(d):[,q]=a.splitText(b,d);return q}
|
|
10
10
|
function C(b,a){let d=getComputedStyle(b),l="absolute"===d.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===d.position)return document.body;for(;b=b.parentElement;)if(d=getComputedStyle(b),(!l||"static"!==d.position)&&a.test(d.overflow+d.overflowY+d.overflowX))return b;return document.body}function D(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}
|
|
11
|
-
function E(b,a,d,l){let [f]=k.useLexicalComposerContext();t.useEffect(()=>{if(null!=a&&null!=b){let
|
|
11
|
+
function E(b,a,d,l){let [f]=k.useLexicalComposerContext();t.useEffect(()=>{if(null!=a&&null!=b){let q=f.getRootElement(),m=null!=q?C(q,!1):document.body,h=!1,c=D(a,m),n=function(){h||(window.requestAnimationFrame(function(){d();h=!1}),h=!0);const r=D(a,m);r!==c&&(c=r,null!=l&&l(r))},p=new ResizeObserver(d);window.addEventListener("resize",d);document.addEventListener("scroll",n,{capture:!0,passive:!0});p.observe(a);return()=>{p.unobserve(a);window.removeEventListener("resize",d);document.removeEventListener("scroll",
|
|
12
12
|
n)}}},[a,f,l,d,b])}let F=x.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
|
|
13
|
-
function G({close:b,editor:a,anchorElementRef:d,resolution:l,options:f,menuRenderFn:
|
|
14
|
-
()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},[a]);y(()=>{null===f?n(null):null===c&&
|
|
15
|
-
g.preventDefault();g.stopImmediatePropagation()}return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ARROW_UP_COMMAND,g=>{if(null!==f&&f.length&&null!==c){var e=0!==c?c-1:f.length-1;
|
|
16
|
-
f||null===c||null==f[c])return!1;g.preventDefault();g.stopImmediatePropagation();p(f[c]);return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ENTER_COMMAND,g=>{if(null===f||null===c||null==f[c])return!1;null!==g&&(g.preventDefault(),g.stopImmediatePropagation());p(f[c]);return!0},x.COMMAND_PRIORITY_LOW)),[p,b,a,f,c,
|
|
17
|
-
function H(b,a,d){let [l]=k.useLexicalComposerContext(),f=t.useRef(document.createElement("div")),
|
|
18
|
-
`${
|
|
19
|
-
()=>{null!==h&&h.removeAttribute("aria-controls");let c=f.current;null!==c&&c.isConnected&&c.remove()}},[l,
|
|
20
|
-
exports.LexicalContextMenuPlugin=function({options:b,onClose:a,onOpen:d,onSelectOption:l,menuRenderFn:f,anchorClassName:
|
|
21
|
-
p()},[p,h]);t.useEffect(()=>{let e=m.getRootElement();if(e)return e.addEventListener("contextmenu",u),()=>e.removeEventListener("contextmenu",u)},[m,u]);t.useEffect(()=>{document.addEventListener("click",g);return()=>document.removeEventListener("click",g)},[m,g]);return null===h||null===m?null:t.createElement(G,{close:p,resolution:h,editor:m,anchorElementRef:
|
|
13
|
+
function G({close:b,editor:a,anchorElementRef:d,resolution:l,options:f,menuRenderFn:q,onSelectOption:m,shouldSplitNodeWithQuery:h=!1}){let [c,n]=t.useState(null);t.useEffect(()=>{n(0)},[l.match&&l.match.matchingString]);let p=t.useCallback(g=>{a.update(()=>{const e=null!=l.match&&h?B(l.match):null;m(g,e,b,l.match?l.match.matchingString:"")})},[a,h,l.match,m,b]),r=t.useCallback(g=>{const e=a.getRootElement();null!==e&&(e.setAttribute("aria-activedescendant","typeahead-item-"+g),n(g))},[a]);t.useEffect(()=>
|
|
14
|
+
()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},[a]);y(()=>{null===f?n(null):null===c&&r(0)},[f,c,r]);t.useEffect(()=>w.mergeRegister(a.registerCommand(F,({option:g})=>g.ref&&null!=g.ref.current?(A(g.ref.current),!0):!1,x.COMMAND_PRIORITY_LOW)),[a,r]);t.useEffect(()=>w.mergeRegister(a.registerCommand(x.KEY_ARROW_DOWN_COMMAND,g=>{if(null!==f&&f.length&&null!==c){let e=c!==f.length-1?c+1:0;r(e);let v=f[e];null!=v.ref&&v.ref.current&&a.dispatchCommand(F,{index:e,option:v});
|
|
15
|
+
g.preventDefault();g.stopImmediatePropagation()}return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ARROW_UP_COMMAND,g=>{if(null!==f&&f.length&&null!==c){var e=0!==c?c-1:f.length-1;r(e);e=f[e];null!=e.ref&&e.ref.current&&A(e.ref.current);g.preventDefault();g.stopImmediatePropagation()}return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ESCAPE_COMMAND,g=>{g.preventDefault();g.stopImmediatePropagation();b();return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_TAB_COMMAND,g=>{if(null===
|
|
16
|
+
f||null===c||null==f[c])return!1;g.preventDefault();g.stopImmediatePropagation();p(f[c]);return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ENTER_COMMAND,g=>{if(null===f||null===c||null==f[c])return!1;null!==g&&(g.preventDefault(),g.stopImmediatePropagation());p(f[c]);return!0},x.COMMAND_PRIORITY_LOW)),[p,b,a,f,c,r]);let u=t.useMemo(()=>({options:f,selectOptionAndCleanUp:p,selectedIndex:c,setHighlightedIndex:n}),[p,c,f]);return q(d,u,l.match?l.match.matchingString:"")}
|
|
17
|
+
function H(b,a,d){let [l]=k.useLexicalComposerContext(),f=t.useRef(document.createElement("div")),q=t.useCallback(()=>{const h=l.getRootElement(),c=f.current;var n=c.firstChild;if(null!==h&&null!==b){const {left:r,top:u,width:g,height:e}=b.getRect();c.style.top=`${u+window.pageYOffset}px`;c.style.left=`${r+window.pageXOffset}px`;c.style.height=`${e}px`;c.style.width=`${g}px`;if(null!==n){var p=n.getBoundingClientRect();n=p.height;p=p.width;const v=h.getBoundingClientRect();r+p>v.right&&(c.style.left=
|
|
18
|
+
`${v.right-p+window.pageXOffset}px`);(u+n>window.innerHeight||u+n>v.bottom)&&u-v.top>n&&(c.style.top=`${u-n+window.pageYOffset-(e+10)}px`)}c.isConnected||(null!=d&&(c.className=d),c.setAttribute("aria-label","Typeahead menu"),c.setAttribute("id","typeahead-menu"),c.setAttribute("role","listbox"),c.style.display="block",c.style.position="absolute",document.body.append(c));f.current=c;h.setAttribute("aria-controls","typeahead-menu")}},[l,b,d]);t.useEffect(()=>{let h=l.getRootElement();if(null!==b)return q(),
|
|
19
|
+
()=>{null!==h&&h.removeAttribute("aria-controls");let c=f.current;null!==c&&c.isConnected&&c.remove()}},[l,q,b]);let m=t.useCallback(h=>{null!==b&&(h||a(null))},[b,a]);E(b,f.current,q,m);return f}
|
|
20
|
+
exports.LexicalContextMenuPlugin=function({options:b,onClose:a,onOpen:d,onSelectOption:l,menuRenderFn:f,anchorClassName:q}){let [m]=k.useLexicalComposerContext(),[h,c]=t.useState(null),n=t.useRef(null);q=H(h,c,q);let p=t.useCallback(()=>{c(null);null!=a&&null!==h&&a()},[a,h]),r=t.useCallback(e=>{c(e);null!=d&&null===h&&d(e)},[d,h]),u=t.useCallback(e=>{e.preventDefault();r({getRect:()=>new DOMRect(e.clientX,e.clientY,1,1)})},[r]),g=t.useCallback(e=>{null===h||null==n.current||null==e.target||n.current.contains(e.target)||
|
|
21
|
+
p()},[p,h]);t.useEffect(()=>{let e=m.getRootElement();if(e)return e.addEventListener("contextmenu",u),()=>e.removeEventListener("contextmenu",u)},[m,u]);t.useEffect(()=>{document.addEventListener("click",g);return()=>document.removeEventListener("click",g)},[m,g]);return null===h||null===m?null:t.createElement(G,{close:p,resolution:h,editor:m,anchorElementRef:q,options:b,menuRenderFn:(e,v)=>f(e,v,{setMenuRef:I=>{n.current=I}}),onSelectOption:l})};exports.MenuOption=z
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
/// <reference types="react" />
|
|
9
9
|
import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
|
|
10
10
|
import { DecoratorNode } from 'lexical';
|
|
11
|
-
export
|
|
11
|
+
export type SerializedDecoratorBlockNode = Spread<{
|
|
12
12
|
format: ElementFormatType;
|
|
13
13
|
}, SerializedLexicalNode>;
|
|
14
14
|
export declare class DecoratorBlockNode extends DecoratorNode<JSX.Element> {
|
|
@@ -0,0 +1,20 @@
|
|
|
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
|
+
*/
|
|
8
|
+
import { LexicalEditor } from 'lexical';
|
|
9
|
+
import { MutableRefObject } from 'react';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
*
|
|
13
|
+
* Use this plugin to access the editor instance outside of the
|
|
14
|
+
* LexicalComposer. This can help with things like buttons or other
|
|
15
|
+
* UI components that need to update or read EditorState but need to
|
|
16
|
+
* be positioned outside the LexicalComposer in the React tree.
|
|
17
|
+
*/
|
|
18
|
+
export declare function EditorRefPlugin({ editorRef, }: {
|
|
19
|
+
editorRef: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor>;
|
|
20
|
+
}): void;
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
'use strict';
|
|
8
|
+
|
|
9
|
+
var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the MIT license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
*
|
|
21
|
+
* Use this plugin to access the editor instance outside of the
|
|
22
|
+
* LexicalComposer. This can help with things like buttons or other
|
|
23
|
+
* UI components that need to update or read EditorState but need to
|
|
24
|
+
* be positioned outside the LexicalComposer in the React tree.
|
|
25
|
+
*/
|
|
26
|
+
function EditorRefPlugin({
|
|
27
|
+
editorRef
|
|
28
|
+
}) {
|
|
29
|
+
const [editor] = LexicalComposerContext.useLexicalComposerContext();
|
|
30
|
+
|
|
31
|
+
if (typeof editorRef === 'function') {
|
|
32
|
+
editorRef(editor);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (typeof editorRef === 'object') {
|
|
37
|
+
editorRef.current = editor;
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
exports.EditorRefPlugin = EditorRefPlugin;
|
|
@@ -0,0 +1,9 @@
|
|
|
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
|
+
'use strict'
|
|
8
|
+
const LexicalEditorRefPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalEditorRefPlugin.dev.js') : require('./LexicalEditorRefPlugin.prod.js')
|
|
9
|
+
module.exports = LexicalEditorRefPlugin;
|
|
@@ -0,0 +1,7 @@
|
|
|
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
|
+
'use strict';var c=require("@lexical/react/LexicalComposerContext");exports.EditorRefPlugin=function({editorRef:a}){let [b]=c.useLexicalComposerContext();"function"===typeof a?a(b):"object"===typeof a&&(a.current=b)}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
/// <reference types="react" />
|
|
9
9
|
import type { DOMConversionMap, DOMExportOutput, LexicalCommand, LexicalNode, SerializedLexicalNode } from 'lexical';
|
|
10
10
|
import { DecoratorNode } from 'lexical';
|
|
11
|
-
export
|
|
11
|
+
export type SerializedHorizontalRuleNode = SerializedLexicalNode;
|
|
12
12
|
export declare const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;
|
|
13
13
|
export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
|
|
14
14
|
static getType(): string;
|
|
@@ -26,21 +26,18 @@ function HorizontalRuleComponent({
|
|
|
26
26
|
}) {
|
|
27
27
|
const [editor] = LexicalComposerContext.useLexicalComposerContext();
|
|
28
28
|
const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
|
|
29
|
-
const onDelete = React.useCallback(
|
|
29
|
+
const onDelete = React.useCallback(event => {
|
|
30
30
|
if (isSelected && lexical.$isNodeSelection(lexical.$getSelection())) {
|
|
31
|
-
const event = payload;
|
|
32
31
|
event.preventDefault();
|
|
33
32
|
const node = lexical.$getNodeByKey(nodeKey);
|
|
34
33
|
|
|
35
34
|
if ($isHorizontalRuleNode(node)) {
|
|
36
35
|
node.remove();
|
|
37
36
|
}
|
|
38
|
-
|
|
39
|
-
setSelected(false);
|
|
40
37
|
}
|
|
41
38
|
|
|
42
39
|
return false;
|
|
43
|
-
}, [isSelected, nodeKey
|
|
40
|
+
}, [isSelected, nodeKey]);
|
|
44
41
|
React.useEffect(() => {
|
|
45
42
|
return utils.mergeRegister(editor.registerCommand(lexical.CLICK_COMMAND, event => {
|
|
46
43
|
const hrElem = editor.getElementByKey(nodeKey);
|
|
@@ -4,8 +4,8 @@
|
|
|
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 a=require("@lexical/react/LexicalComposerContext"),f=require("@lexical/react/useLexicalNodeSelection"),
|
|
8
|
-
function q({nodeKey:b}){let [d]=a.useLexicalComposerContext(),[e,
|
|
9
|
-
k
|
|
10
|
-
class t extends
|
|
11
|
-
function w(){return{node:u()}}function u(){return
|
|
7
|
+
'use strict';var a=require("@lexical/react/LexicalComposerContext"),f=require("@lexical/react/useLexicalNodeSelection"),g=require("@lexical/utils"),k=require("lexical"),n=require("react");let p=k.createCommand("INSERT_HORIZONTAL_RULE_COMMAND");
|
|
8
|
+
function q({nodeKey:b}){let [d]=a.useLexicalComposerContext(),[e,l,m]=f.useLexicalNodeSelection(b),h=n.useCallback(c=>{e&&k.$isNodeSelection(k.$getSelection())&&(c.preventDefault(),c=k.$getNodeByKey(b),r(c)&&c.remove());return!1},[e,b]);n.useEffect(()=>g.mergeRegister(d.registerCommand(k.CLICK_COMMAND,c=>{let v=d.getElementByKey(b);return c.target===v?(c.shiftKey||m(),l(!e),!0):!1},k.COMMAND_PRIORITY_LOW),d.registerCommand(k.KEY_DELETE_COMMAND,h,k.COMMAND_PRIORITY_LOW),d.registerCommand(k.KEY_BACKSPACE_COMMAND,
|
|
9
|
+
h,k.COMMAND_PRIORITY_LOW)),[m,d,e,b,h,l]);n.useEffect(()=>{let c=d.getElementByKey(b);null!==c&&(c.className=e?"selected":"")},[d,e,b]);return null}
|
|
10
|
+
class t extends k.DecoratorNode{static getType(){return"horizontalrule"}static clone(b){return new t(b.__key)}static importJSON(){return u()}static importDOM(){return{hr:()=>({conversion:w,priority:0})}}exportJSON(){return{type:"horizontalrule",version:1}}exportDOM(){return{element:document.createElement("hr")}}createDOM(){return document.createElement("hr")}getTextContent(){return"\n"}isInline(){return!1}updateDOM(){return!1}decorate(){return n.createElement(q,{nodeKey:this.__key})}}
|
|
11
|
+
function w(){return{node:u()}}function u(){return k.$applyNodeReplacement(new t)}function r(b){return b instanceof t}exports.$createHorizontalRuleNode=u;exports.$isHorizontalRuleNode=r;exports.HorizontalRuleNode=t;exports.INSERT_HORIZONTAL_RULE_COMMAND=p
|
package/LexicalLinkPlugin.d.ts
CHANGED
|
@@ -4,7 +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 c=require("@lexical/react/LexicalCollaborationContext"),
|
|
8
|
-
exports.LexicalNestedComposer=function({initialEditor:a,children:
|
|
9
|
-
|
|
10
|
-
{k&&(m.current=!0)},[k]);n.useEffect(()=>d.registerEditableListener(b=>{a.setEditable(b)}),[a,d]);return n.createElement(f.LexicalComposerContext.Provider,{value:w},!x||k?p:null)}
|
|
7
|
+
'use strict';var c=require("@lexical/react/LexicalCollaborationContext"),h=require("@lexical/react/LexicalComposerContext"),p=require("react");function q(a){let f=new URLSearchParams;f.append("code",a);for(let d=1;d<arguments.length;d++)f.append("v",arguments[d]);throw Error(`Minified Lexical error #${a}; visit https://lexical.dev/docs/error?${f} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
|
|
8
|
+
exports.LexicalNestedComposer=function({initialEditor:a,children:f,initialNodes:d,initialTheme:r,skipCollabChecks:t}){let n=p.useRef(!1),k=p.useContext(h.LexicalComposerContext);null==k&&q(9);let [e,{getTheme:u}]=k,x=p.useMemo(()=>{var b=r||u()||void 0;const v=h.createLexicalComposerContext(k,b);void 0!==b&&(a._config.theme=b);a._parentEditor=e;if(d)for(var g of d)b=g.getType(),a._nodes.set(b,{klass:g,replace:null,replaceWithKlass:null,transforms:new Set});else{g=a._nodes=new Map(e._nodes);for(const [w,
|
|
9
|
+
l]of g)a._nodes.set(w,{klass:l.klass,replace:l.replace,replaceWithKlass:l.replaceWithKlass,transforms:new Set})}a._config.namespace=e._config.namespace;a._editable=e._editable;return[a,v]},[]),{isCollabActive:y,yjsDocMap:z}=c.useCollaborationContext(),m=t||n.current||z.has(a.getKey());p.useEffect(()=>{m&&(n.current=!0)},[m]);p.useEffect(()=>e.registerEditableListener(b=>{a.setEditable(b)}),[a,e]);return p.createElement(h.LexicalComposerContext.Provider,{value:x},!y||m?f:null)}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import type { MenuRenderFn, MenuResolution } from './shared/LexicalMenu';
|
|
10
10
|
import { NodeKey, TextNode } from 'lexical';
|
|
11
11
|
import { MenuOption } from './shared/LexicalMenu';
|
|
12
|
-
export
|
|
12
|
+
export type NodeMenuPluginProps<TOption extends MenuOption> = {
|
|
13
13
|
onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
|
|
14
14
|
options: Array<TOption>;
|
|
15
15
|
nodeKey: NodeKey | null;
|
|
@@ -376,7 +376,7 @@ function useMenuAnchorRef(resolution, setResolution, className) {
|
|
|
376
376
|
const rootElementRect = rootElement.getBoundingClientRect();
|
|
377
377
|
|
|
378
378
|
if (left + menuWidth > rootElementRect.right) {
|
|
379
|
-
containerDiv.style.left = `${
|
|
379
|
+
containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
const margin = 10;
|
|
@@ -15,7 +15,7 @@ function G({close:c,editor:a,anchorElementRef:d,resolution:g,options:f,menuRende
|
|
|
15
15
|
e.preventDefault();e.stopImmediatePropagation()}return!0},r.COMMAND_PRIORITY_LOW),a.registerCommand(r.KEY_ARROW_UP_COMMAND,e=>{if(null!==f&&f.length&&null!==b){var l=0!==b?b-1:f.length-1;q(l);l=f[l];null!=l.ref&&l.ref.current&&A(l.ref.current);e.preventDefault();e.stopImmediatePropagation()}return!0},r.COMMAND_PRIORITY_LOW),a.registerCommand(r.KEY_ESCAPE_COMMAND,e=>{e.preventDefault();e.stopImmediatePropagation();c();return!0},r.COMMAND_PRIORITY_LOW),a.registerCommand(r.KEY_TAB_COMMAND,e=>{if(null===
|
|
16
16
|
f||null===b||null==f[b])return!1;e.preventDefault();e.stopImmediatePropagation();n(f[b]);return!0},r.COMMAND_PRIORITY_LOW),a.registerCommand(r.KEY_ENTER_COMMAND,e=>{if(null===f||null===b||null==f[b])return!1;null!==e&&(e.preventDefault(),e.stopImmediatePropagation());n(f[b]);return!0},r.COMMAND_PRIORITY_LOW)),[n,c,a,f,b,q]);let u=w.useMemo(()=>({options:f,selectOptionAndCleanUp:n,selectedIndex:b,setHighlightedIndex:m}),[n,b,f]);return t(d,u,g.match?g.match.matchingString:"")}
|
|
17
17
|
function H(c,a,d){let [g]=h.useLexicalComposerContext(),f=w.useRef(document.createElement("div")),t=w.useCallback(()=>{const k=g.getRootElement(),b=f.current;var m=b.firstChild;if(null!==k&&null!==c){const {left:q,top:u,width:e,height:l}=c.getRect();b.style.top=`${u+window.pageYOffset}px`;b.style.left=`${q+window.pageXOffset}px`;b.style.height=`${l}px`;b.style.width=`${e}px`;if(null!==m){var n=m.getBoundingClientRect();m=n.height;n=n.width;const v=k.getBoundingClientRect();q+n>v.right&&(b.style.left=
|
|
18
|
-
`${
|
|
18
|
+
`${v.right-n+window.pageXOffset}px`);(u+m>window.innerHeight||u+m>v.bottom)&&u-v.top>m&&(b.style.top=`${u-m+window.pageYOffset-(l+10)}px`)}b.isConnected||(null!=d&&(b.className=d),b.setAttribute("aria-label","Typeahead menu"),b.setAttribute("id","typeahead-menu"),b.setAttribute("role","listbox"),b.style.display="block",b.style.position="absolute",document.body.append(b));f.current=b;k.setAttribute("aria-controls","typeahead-menu")}},[g,c,d]);w.useEffect(()=>{let k=g.getRootElement();if(null!==c)return t(),
|
|
19
19
|
()=>{null!==k&&k.removeAttribute("aria-controls");let b=f.current;null!==b&&b.isConnected&&b.remove()}},[g,t,c]);let p=w.useCallback(k=>{null!==c&&(k||a(null))},[c,a]);E(c,f.current,t,p);return f}function I(c){w.startTransition?w.startTransition(c):c()}
|
|
20
20
|
exports.LexicalNodeMenuPlugin=function({options:c,nodeKey:a,onClose:d,onOpen:g,onSelectOption:f,menuRenderFn:t,anchorClassName:p}){let [k]=h.useLexicalComposerContext(),[b,m]=w.useState(null);p=H(b,m,p);let n=w.useCallback(()=>{m(null);null!=d&&null!==b&&d()},[d,b]),q=w.useCallback(e=>{m(e);null!=g&&null===b&&g(e)},[g,b]),u=w.useCallback(()=>{a?k.update(()=>{const e=r.$getNodeByKey(a),l=k.getElementByKey(a);null!=e&&null!=l&&null==b&&I(()=>q({getRect:()=>l.getBoundingClientRect()}))}):null==a&&null!=
|
|
21
21
|
b&&n()},[n,k,a,q,b]);w.useEffect(()=>{u()},[u,a]);w.useEffect(()=>{if(null!=a)return k.registerUpdateListener(({dirtyElements:e})=>{e.get(a)&&u()})},[k,u,a]);return null===b||null===k?null:w.createElement(G,{close:n,resolution:b,editor:k,anchorElementRef:p,options:c,menuRenderFn:t,onSelectOption:f})};exports.MenuOption=z
|
|
@@ -103,7 +103,7 @@ function useDecorators(editor, ErrorBoundary) {
|
|
|
103
103
|
const element = editor.getElementByKey(nodeKey);
|
|
104
104
|
|
|
105
105
|
if (element !== null) {
|
|
106
|
-
decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element));
|
|
106
|
+
decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element, nodeKey));
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
@@ -4,7 +4,7 @@
|
|
|
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 b=require("@lexical/react/LexicalComposerContext"),
|
|
8
|
-
function
|
|
9
|
-
function
|
|
10
|
-
function
|
|
7
|
+
'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/plain-text"),v="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
|
|
8
|
+
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}
|
|
9
|
+
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])}
|
|
10
|
+
function B(a){v(()=>n.mergeRegister(u.registerPlainText(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.PlainTextPlugin=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)}
|
|
@@ -103,7 +103,7 @@ function useDecorators(editor, ErrorBoundary) {
|
|
|
103
103
|
const element = editor.getElementByKey(nodeKey);
|
|
104
104
|
|
|
105
105
|
if (element !== null) {
|
|
106
|
-
decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element));
|
|
106
|
+
decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element, nodeKey));
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
@@ -4,7 +4,7 @@
|
|
|
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 b=require("@lexical/react/LexicalComposerContext"),
|
|
8
|
-
function
|
|
9
|
-
function
|
|
10
|
-
function
|
|
7
|
+
'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;
|
|
8
|
+
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}
|
|
9
|
+
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])}
|
|
10
|
+
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)}
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
/// <reference types="react" />
|
|
9
9
|
import type { LexicalEditor, NodeKey } from 'lexical';
|
|
10
10
|
import { HeadingTagType } from '@lexical/rich-text';
|
|
11
|
-
export
|
|
11
|
+
export type TableOfContentsEntry = [
|
|
12
12
|
key: NodeKey,
|
|
13
13
|
text: string,
|
|
14
14
|
tag: HeadingTagType
|
|
15
15
|
];
|
|
16
|
-
|
|
16
|
+
type Props = {
|
|
17
17
|
children: (values: Array<TableOfContentsEntry>, editor: LexicalEditor) => JSX.Element;
|
|
18
18
|
};
|
|
19
19
|
export default function LexicalTableOfContentsPlugin({ children, }: Props): JSX.Element;
|
package/LexicalTablePlugin.d.ts
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
/// <reference types="react" />
|
|
9
|
-
export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, }: {
|
|
9
|
+
export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, hasTabHandler, }: {
|
|
10
10
|
hasCellMerge?: boolean;
|
|
11
11
|
hasCellBackgroundColor?: boolean;
|
|
12
|
+
hasTabHandler?: boolean;
|
|
12
13
|
}): JSX.Element | null;
|
|
@@ -32,7 +32,8 @@ function $insertFirst(parent, node) {
|
|
|
32
32
|
|
|
33
33
|
function TablePlugin({
|
|
34
34
|
hasCellMerge = true,
|
|
35
|
-
hasCellBackgroundColor = true
|
|
35
|
+
hasCellBackgroundColor = true,
|
|
36
|
+
hasTabHandler = true
|
|
36
37
|
}) {
|
|
37
38
|
const [editor] = LexicalComposerContext.useLexicalComposerContext();
|
|
38
39
|
react.useEffect(() => {
|
|
@@ -66,7 +67,7 @@ function TablePlugin({
|
|
|
66
67
|
const tableElement = editor.getElementByKey(nodeKey);
|
|
67
68
|
|
|
68
69
|
if (tableElement && !tableSelections.has(nodeKey)) {
|
|
69
|
-
const tableSelection = table.applyTableHandlers(tableNode, tableElement, editor);
|
|
70
|
+
const tableSelection = table.applyTableHandlers(tableNode, tableElement, editor, hasTabHandler);
|
|
70
71
|
tableSelections.set(nodeKey, tableSelection);
|
|
71
72
|
}
|
|
72
73
|
}; // Plugins might be loaded _after_ initial content is set, hence existing table nodes
|
|
@@ -110,7 +111,7 @@ function TablePlugin({
|
|
|
110
111
|
tableSelection.removeListeners();
|
|
111
112
|
}
|
|
112
113
|
};
|
|
113
|
-
}, [editor]); // Unmerge cells when the feature isn't enabled
|
|
114
|
+
}, [editor, hasTabHandler]); // Unmerge cells when the feature isn't enabled
|
|
114
115
|
|
|
115
116
|
react.useEffect(() => {
|
|
116
117
|
if (hasCellMerge) {
|
|
@@ -4,9 +4,8 @@
|
|
|
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 c=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/table"),
|
|
8
|
-
exports.TablePlugin=function({hasCellMerge:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
let
|
|
12
|
-
[d,q]);w.useEffect(()=>{if(!t)return d.registerNodeTransform(h.TableCellNode,a=>{null!==a.getBackgroundColor()&&a.setBackgroundColor(null)})},[d,t,q]);return null}
|
|
7
|
+
'use strict';var c=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/table"),r=require("@lexical/utils"),w=require("lexical"),x=require("react");function y(m){let n=new URLSearchParams;n.append("code",m);for(let p=1;p<arguments.length;p++)n.append("v",arguments[p]);throw Error(`Minified Lexical error #${m}; visit https://lexical.dev/docs/error?${n} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
|
|
8
|
+
exports.TablePlugin=function({hasCellMerge:m=!0,hasCellBackgroundColor:n=!0,hasTabHandler:p=!0}){let [d]=c.useLexicalComposerContext();x.useEffect(()=>{d.hasNodes([h.TableNode,h.TableCellNode,h.TableRowNode])||y(10);return d.registerCommand(h.INSERT_TABLE_COMMAND,({columns:a,rows:e,includeHeaders:g})=>{a=h.$createTableNodeWithDimensions(Number(e),Number(a),g);r.$insertNodeToNearestRoot(a);a=a.getFirstDescendant();w.$isTextNode(a)&&a.select();return!0},w.COMMAND_PRIORITY_EDITOR)},[d]);x.useEffect(()=>
|
|
9
|
+
{let a=new Map,e=b=>{const f=b.getKey(),l=d.getElementByKey(f);l&&!a.has(f)&&(b=h.applyTableHandlers(b,l,d,p),a.set(f,b))};d.getEditorState().read(()=>{let b=w.$nodesOfType(h.TableNode);for(let f of b)h.$isTableNode(f)&&e(f)});let g=d.registerMutationListener(h.TableNode,b=>{for(const [f,l]of b)"created"===l?d.getEditorState().read(()=>{const q=w.$getNodeByKey(f);h.$isTableNode(q)&&e(q)}):"destroyed"===l&&(b=a.get(f),void 0!==b&&(b.removeListeners(),a.delete(f)))});return()=>{g();for(let [,b]of a)b.removeListeners()}},
|
|
10
|
+
[d,p]);x.useEffect(()=>{if(!m)return d.registerNodeTransform(h.TableCellNode,a=>{if(1<a.getColSpan()||1<a.getRowSpan()){var [,,e]=w.DEPRECATED_$getNodeTriplet(a);[a]=w.DEPRECATED_$computeGridMap(e,a,a);let f=a.length,l=a[0].length;e=e.getFirstChild();if(!w.DEPRECATED_$isGridRowNode(e))throw Error("Expected TableNode first child to be a RowNode");let q=[];for(let k=0;k<f;k++){if(0!==k&&(e=e.getNextSibling(),!w.DEPRECATED_$isGridRowNode(e)))throw Error("Expected TableNode first child to be a RowNode");
|
|
11
|
+
let u=null;for(let t=0;t<l;t++){var g=a[k][t],b=g.cell;if(g.startRow===k&&g.startColumn===t)u=b,q.push(b);else if(1<b.getColSpan()||1<b.getRowSpan())if(b=h.$createTableCellNode(b.__headerState),null!==u)u.insertAfter(b);else{g=e;let v=g.getFirstChild();null!==v?v.insertBefore(b):g.append(b)}}}for(let k of q)k.setColSpan(1),k.setRowSpan(1)}})},[d,m]);x.useEffect(()=>{if(!n)return d.registerNodeTransform(h.TableCellNode,a=>{null!==a.getBackgroundColor()&&a.setBackgroundColor(null)})},[d,n,m]);return null}
|
|
@@ -20,7 +20,7 @@ export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLeng
|
|
|
20
20
|
minLength?: number;
|
|
21
21
|
maxLength?: number;
|
|
22
22
|
}): TriggerFn;
|
|
23
|
-
export
|
|
23
|
+
export type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
|
|
24
24
|
onQueryChange: (matchingString: string | null) => void;
|
|
25
25
|
onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
|
|
26
26
|
options: Array<TOption>;
|
|
@@ -376,7 +376,7 @@ function useMenuAnchorRef(resolution, setResolution, className) {
|
|
|
376
376
|
const rootElementRect = rootElement.getBoundingClientRect();
|
|
377
377
|
|
|
378
378
|
if (left + menuWidth > rootElementRect.right) {
|
|
379
|
-
containerDiv.style.left = `${
|
|
379
|
+
containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
const margin = 10;
|
|
@@ -4,23 +4,23 @@
|
|
|
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 k=require("@lexical/react/LexicalComposerContext"),
|
|
7
|
+
'use strict';var k=require("@lexical/react/LexicalComposerContext"),m=require("lexical"),x=require("react"),y=require("@lexical/utils"),z="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?x.useLayoutEffect:x.useEffect;class A{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
|
|
8
8
|
let B=b=>{const a=document.getElementById("typeahead-menu");if(a){var c=a.getBoundingClientRect();c.top+c.height>window.innerHeight&&a.scrollIntoView({block:"center"});0>c.top&&a.scrollIntoView({block:"center"});b.scrollIntoView({block:"nearest"})}};
|
|
9
|
-
function C(b){var a=
|
|
9
|
+
function C(b){var a=m.$getSelection();if(!m.$isRangeSelection(a)||!a.isCollapsed())return null;var c=a.anchor;if("text"!==c.type)return null;a=c.getNode();if(!a.isSimpleText())return null;c=c.offset;let e=a.getTextContent().slice(0,c);var f=b.matchingString;b=b.replaceableString.length;for(let t=b;t<=f.length;t++)e.substr(-t)===f.substr(0,t)&&(b=t);b=c-b;if(0>b)return null;let r;0===b?[r]=a.splitText(c):[,r]=a.splitText(b,c);return r}
|
|
10
10
|
function D(b,a){let c=getComputedStyle(b),e="absolute"===c.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===c.position)return document.body;for(;b=b.parentElement;)if(c=getComputedStyle(b),(!e||"static"!==c.position)&&a.test(c.overflow+c.overflowY+c.overflowX))return b;return document.body}function F(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}
|
|
11
|
-
function G(b,a,c,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=b){let r=f.getRootElement(),t=null!=r?D(r,!1):document.body,l=!1,d=F(a,t),h=function(){l||(window.requestAnimationFrame(function(){c();l=!1}),l=!0);const
|
|
12
|
-
h)}}},[a,f,e,c,b])}let H=
|
|
13
|
-
function I({close:b,editor:a,anchorElementRef:c,resolution:e,options:f,menuRenderFn:r,onSelectOption:t,shouldSplitNodeWithQuery:l=!1}){let [d,h]=x.useState(null);x.useEffect(()=>{h(0)},[e.match&&e.match.matchingString]);let q=x.useCallback(g=>{a.update(()=>{const p=null!=e.match&&l?C(e.match):null;t(g,p,b,e.match?e.match.matchingString:"")})},[a,l,e.match,t,b]),
|
|
14
|
-
()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},[a]);z(()=>{null===f?h(null):null===d&&
|
|
15
|
-
g.preventDefault();g.stopImmediatePropagation()}return!0},
|
|
16
|
-
f||null===d||null==f[d])return!1;g.preventDefault();g.stopImmediatePropagation();q(f[d]);return!0},
|
|
17
|
-
function J(b,a,c){let [e]=k.useLexicalComposerContext(),f=x.useRef(document.createElement("div")),r=x.useCallback(()=>{const l=e.getRootElement(),d=f.current;var h=d.firstChild;if(null!==l&&null!==b){const {left:
|
|
18
|
-
`${
|
|
11
|
+
function G(b,a,c,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=b){let r=f.getRootElement(),t=null!=r?D(r,!1):document.body,l=!1,d=F(a,t),h=function(){l||(window.requestAnimationFrame(function(){c();l=!1}),l=!0);const n=F(a,t);n!==d&&(d=n,null!=e&&e(n))},q=new ResizeObserver(c);window.addEventListener("resize",c);document.addEventListener("scroll",h,{capture:!0,passive:!0});q.observe(a);return()=>{q.unobserve(a);window.removeEventListener("resize",c);document.removeEventListener("scroll",
|
|
12
|
+
h)}}},[a,f,e,c,b])}let H=m.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
|
|
13
|
+
function I({close:b,editor:a,anchorElementRef:c,resolution:e,options:f,menuRenderFn:r,onSelectOption:t,shouldSplitNodeWithQuery:l=!1}){let [d,h]=x.useState(null);x.useEffect(()=>{h(0)},[e.match&&e.match.matchingString]);let q=x.useCallback(g=>{a.update(()=>{const p=null!=e.match&&l?C(e.match):null;t(g,p,b,e.match?e.match.matchingString:"")})},[a,l,e.match,t,b]),n=x.useCallback(g=>{const p=a.getRootElement();null!==p&&(p.setAttribute("aria-activedescendant","typeahead-item-"+g),h(g))},[a]);x.useEffect(()=>
|
|
14
|
+
()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},[a]);z(()=>{null===f?h(null):null===d&&n(0)},[f,d,n]);x.useEffect(()=>y.mergeRegister(a.registerCommand(H,({option:g})=>g.ref&&null!=g.ref.current?(B(g.ref.current),!0):!1,m.COMMAND_PRIORITY_LOW)),[a,n]);x.useEffect(()=>y.mergeRegister(a.registerCommand(m.KEY_ARROW_DOWN_COMMAND,g=>{if(null!==f&&f.length&&null!==d){let p=d!==f.length-1?d+1:0;n(p);let u=f[p];null!=u.ref&&u.ref.current&&a.dispatchCommand(H,{index:p,option:u});
|
|
15
|
+
g.preventDefault();g.stopImmediatePropagation()}return!0},m.COMMAND_PRIORITY_LOW),a.registerCommand(m.KEY_ARROW_UP_COMMAND,g=>{if(null!==f&&f.length&&null!==d){var p=0!==d?d-1:f.length-1;n(p);p=f[p];null!=p.ref&&p.ref.current&&B(p.ref.current);g.preventDefault();g.stopImmediatePropagation()}return!0},m.COMMAND_PRIORITY_LOW),a.registerCommand(m.KEY_ESCAPE_COMMAND,g=>{g.preventDefault();g.stopImmediatePropagation();b();return!0},m.COMMAND_PRIORITY_LOW),a.registerCommand(m.KEY_TAB_COMMAND,g=>{if(null===
|
|
16
|
+
f||null===d||null==f[d])return!1;g.preventDefault();g.stopImmediatePropagation();q(f[d]);return!0},m.COMMAND_PRIORITY_LOW),a.registerCommand(m.KEY_ENTER_COMMAND,g=>{if(null===f||null===d||null==f[d])return!1;null!==g&&(g.preventDefault(),g.stopImmediatePropagation());q(f[d]);return!0},m.COMMAND_PRIORITY_LOW)),[q,b,a,f,d,n]);let v=x.useMemo(()=>({options:f,selectOptionAndCleanUp:q,selectedIndex:d,setHighlightedIndex:h}),[q,d,f]);return r(c,v,e.match?e.match.matchingString:"")}
|
|
17
|
+
function J(b,a,c){let [e]=k.useLexicalComposerContext(),f=x.useRef(document.createElement("div")),r=x.useCallback(()=>{const l=e.getRootElement(),d=f.current;var h=d.firstChild;if(null!==l&&null!==b){const {left:n,top:v,width:g,height:p}=b.getRect();d.style.top=`${v+window.pageYOffset}px`;d.style.left=`${n+window.pageXOffset}px`;d.style.height=`${p}px`;d.style.width=`${g}px`;if(null!==h){var q=h.getBoundingClientRect();h=q.height;q=q.width;const u=l.getBoundingClientRect();n+q>u.right&&(d.style.left=
|
|
18
|
+
`${u.right-q+window.pageXOffset}px`);(v+h>window.innerHeight||v+h>u.bottom)&&v-u.top>h&&(d.style.top=`${v-h+window.pageYOffset-(p+10)}px`)}d.isConnected||(null!=c&&(d.className=c),d.setAttribute("aria-label","Typeahead menu"),d.setAttribute("id","typeahead-menu"),d.setAttribute("role","listbox"),d.style.display="block",d.style.position="absolute",document.body.append(d));f.current=d;l.setAttribute("aria-controls","typeahead-menu")}},[e,b,c]);x.useEffect(()=>{let l=e.getRootElement();if(null!==b)return r(),
|
|
19
19
|
()=>{null!==l&&l.removeAttribute("aria-controls");let d=f.current;null!==d&&d.isConnected&&d.remove()}},[e,r,b]);let t=x.useCallback(l=>{null!==b&&(l||a(null))},[b,a]);G(b,f.current,r,t);return f}function K(b,a){var c=window.getSelection();if(null===c||!c.isCollapsed)return!1;let e=c.anchorNode;c=c.anchorOffset;if(null==e||null==c)return!1;try{a.setStart(e,b),a.setEnd(e,c)}catch(f){return!1}return!0}
|
|
20
|
-
function L(b){let a=null;b.getEditorState().read(()=>{var c=
|
|
21
|
-
function O(b,a){let c=getComputedStyle(b),e="absolute"===c.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===c.position)return document.body;for(;b=b.parentElement;)if(c=getComputedStyle(b),(!e||"static"!==c.position)&&a.test(c.overflow+c.overflowY+c.overflowX))return b;return document.body}function P(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}let Q=
|
|
22
|
-
exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,onOpen:e,onClose:f,menuRenderFn:r,triggerFn:t,anchorClassName:l}){let [d]=k.useLexicalComposerContext(),[h,q]=x.useState(null);l=J(h,q,l);let
|
|
23
|
-
u.isCollapsed()&&null!==E&&null!==p){var w=t(E,d);a(w?w.matchingString:null);null===w||M(d,w.leadOffset)||null===K(w.leadOffset,p)?
|
|
20
|
+
function L(b){let a=null;b.getEditorState().read(()=>{var c=m.$getSelection();if(m.$isRangeSelection(c)){var e=c.anchor;"text"!==e.type?a=null:(c=e.getNode(),c.isSimpleText()?(e=e.offset,a=c.getTextContent().slice(0,e)):a=null)}});return a}function M(b,a){return 0!==a?!1:b.getEditorState().read(()=>{var c=m.$getSelection();return m.$isRangeSelection(c)?(c=c.anchor.getNode().getPreviousSibling(),m.$isTextNode(c)&&c.isTextEntity()):!1})}function N(b){x.startTransition?x.startTransition(b):b()}
|
|
21
|
+
function O(b,a){let c=getComputedStyle(b),e="absolute"===c.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===c.position)return document.body;for(;b=b.parentElement;)if(c=getComputedStyle(b),(!e||"static"!==c.position)&&a.test(c.overflow+c.overflowY+c.overflowX))return b;return document.body}function P(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}let Q=m.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
|
|
22
|
+
exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,onOpen:e,onClose:f,menuRenderFn:r,triggerFn:t,anchorClassName:l}){let [d]=k.useLexicalComposerContext(),[h,q]=x.useState(null);l=J(h,q,l);let n=x.useCallback(()=>{q(null);null!=f&&null!==h&&f()},[f,h]),v=x.useCallback(g=>{q(g);null!=e&&null===h&&e(g)},[e,h]);x.useEffect(()=>{let g=d.registerUpdateListener(()=>{d.getEditorState().read(()=>{const p=document.createRange(),u=m.$getSelection(),E=L(d);if(m.$isRangeSelection(u)&&
|
|
23
|
+
u.isCollapsed()&&null!==E&&null!==p){var w=t(E,d);a(w?w.matchingString:null);null===w||M(d,w.leadOffset)||null===K(w.leadOffset,p)?n():N(()=>v({getRect:()=>p.getBoundingClientRect(),match:w}))}else n()})});return()=>{g()}},[d,t,a,h,n,v]);return null===h||null===d?null:x.createElement(I,{close:n,resolution:h,editor:d,anchorElementRef:l,options:b,menuRenderFn:r,shouldSplitNodeWithQuery:!0,onSelectOption:c})};exports.MenuOption=A;exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
|
|
24
24
|
exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND=Q;exports.getScrollParent=O;exports.useBasicTypeaheadTriggerMatch=function(b,{minLength:a=1,maxLength:c=75}){return x.useCallback(e=>{e=(new RegExp("(^|\\s|\\()(["+b+"]((?:[^"+(b+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+c+"}))$")).exec(e);if(null!==e){let f=e[1],r=e[3];if(r.length>=a)return{leadOffset:e.index+f.length,matchingString:r,replaceableString:e[2]}}return null},[c,a,b])};
|
|
25
|
-
exports.useDynamicPositioning=function(b,a,c,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=b){let r=f.getRootElement(),t=null!=r?O(r,!1):document.body,l=!1,d=P(a,t),h=function(){l||(window.requestAnimationFrame(function(){c();l=!1}),l=!0);const
|
|
25
|
+
exports.useDynamicPositioning=function(b,a,c,e){let [f]=k.useLexicalComposerContext();x.useEffect(()=>{if(null!=a&&null!=b){let r=f.getRootElement(),t=null!=r?O(r,!1):document.body,l=!1,d=P(a,t),h=function(){l||(window.requestAnimationFrame(function(){c();l=!1}),l=!0);const n=P(a,t);n!==d&&(d=n,null!=e&&e(n))},q=new ResizeObserver(c);window.addEventListener("resize",c);document.addEventListener("scroll",h,{capture:!0,passive:!0});q.observe(a);return()=>{q.unobserve(a);window.removeEventListener("resize",
|
|
26
26
|
c);document.removeEventListener("scroll",h)}}},[a,f,e,c,b])}
|
package/package.json
CHANGED
|
@@ -8,29 +8,29 @@
|
|
|
8
8
|
"rich-text"
|
|
9
9
|
],
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"version": "0.11.
|
|
11
|
+
"version": "0.11.2",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@lexical/clipboard": "0.11.
|
|
14
|
-
"@lexical/code": "0.11.
|
|
15
|
-
"@lexical/dragon": "0.11.
|
|
16
|
-
"@lexical/hashtag": "0.11.
|
|
17
|
-
"@lexical/history": "0.11.
|
|
18
|
-
"@lexical/link": "0.11.
|
|
19
|
-
"@lexical/list": "0.11.
|
|
20
|
-
"@lexical/mark": "0.11.
|
|
21
|
-
"@lexical/markdown": "0.11.
|
|
22
|
-
"@lexical/overflow": "0.11.
|
|
23
|
-
"@lexical/plain-text": "0.11.
|
|
24
|
-
"@lexical/rich-text": "0.11.
|
|
25
|
-
"@lexical/selection": "0.11.
|
|
26
|
-
"@lexical/table": "0.11.
|
|
27
|
-
"@lexical/text": "0.11.
|
|
28
|
-
"@lexical/utils": "0.11.
|
|
29
|
-
"@lexical/yjs": "0.11.
|
|
13
|
+
"@lexical/clipboard": "0.11.2",
|
|
14
|
+
"@lexical/code": "0.11.2",
|
|
15
|
+
"@lexical/dragon": "0.11.2",
|
|
16
|
+
"@lexical/hashtag": "0.11.2",
|
|
17
|
+
"@lexical/history": "0.11.2",
|
|
18
|
+
"@lexical/link": "0.11.2",
|
|
19
|
+
"@lexical/list": "0.11.2",
|
|
20
|
+
"@lexical/mark": "0.11.2",
|
|
21
|
+
"@lexical/markdown": "0.11.2",
|
|
22
|
+
"@lexical/overflow": "0.11.2",
|
|
23
|
+
"@lexical/plain-text": "0.11.2",
|
|
24
|
+
"@lexical/rich-text": "0.11.2",
|
|
25
|
+
"@lexical/selection": "0.11.2",
|
|
26
|
+
"@lexical/table": "0.11.2",
|
|
27
|
+
"@lexical/text": "0.11.2",
|
|
28
|
+
"@lexical/utils": "0.11.2",
|
|
29
|
+
"@lexical/yjs": "0.11.2",
|
|
30
30
|
"react-error-boundary": "^3.1.4"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"lexical": "0.11.
|
|
33
|
+
"lexical": "0.11.2",
|
|
34
34
|
"react": ">=17.x",
|
|
35
35
|
"react-dom": ">=17.x"
|
|
36
36
|
},
|
package/shared/LexicalMenu.d.ts
CHANGED
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { LexicalCommand, LexicalEditor, TextNode } from 'lexical';
|
|
9
9
|
import { MutableRefObject, ReactPortal } from 'react';
|
|
10
|
-
export
|
|
10
|
+
export type MenuTextMatch = {
|
|
11
11
|
leadOffset: number;
|
|
12
12
|
matchingString: string;
|
|
13
13
|
replaceableString: string;
|
|
14
14
|
};
|
|
15
|
-
export
|
|
15
|
+
export type MenuResolution = {
|
|
16
16
|
match?: MenuTextMatch;
|
|
17
17
|
getRect: () => DOMRect;
|
|
18
18
|
};
|
|
@@ -23,7 +23,7 @@ export declare class MenuOption {
|
|
|
23
23
|
constructor(key: string);
|
|
24
24
|
setRefElement(element: HTMLElement | null): void;
|
|
25
25
|
}
|
|
26
|
-
export
|
|
26
|
+
export type MenuRenderFn<TOption extends MenuOption> = (anchorElementRef: MutableRefObject<HTMLElement | null>, itemProps: {
|
|
27
27
|
selectedIndex: number | null;
|
|
28
28
|
selectOptionAndCleanUp: (option: TOption) => void;
|
|
29
29
|
setHighlightedIndex: (index: number) => void;
|
|
@@ -46,4 +46,4 @@ export declare function LexicalMenu<TOption extends MenuOption>({ close, editor,
|
|
|
46
46
|
onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
|
|
47
47
|
}): JSX.Element | null;
|
|
48
48
|
export declare function useMenuAnchorRef(resolution: MenuResolution | null, setResolution: (r: MenuResolution | null) => void, className?: string): MutableRefObject<HTMLElement>;
|
|
49
|
-
export
|
|
49
|
+
export type TriggerFn = (text: string, editor: LexicalEditor) => MenuTextMatch | null;
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import type { LexicalEditor } from 'lexical';
|
|
9
9
|
import * as React from 'react';
|
|
10
|
-
|
|
10
|
+
type ErrorBoundaryProps = {
|
|
11
11
|
children: JSX.Element;
|
|
12
12
|
onError: (error: Error) => void;
|
|
13
13
|
};
|
|
14
|
-
export
|
|
14
|
+
export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
|
|
15
15
|
export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
|
|
16
16
|
export {};
|
|
@@ -10,7 +10,7 @@ import type { LexicalEditor } from 'lexical';
|
|
|
10
10
|
import * as React from 'react';
|
|
11
11
|
import { Doc } from 'yjs';
|
|
12
12
|
import { InitialEditorStateType } from '../LexicalComposer';
|
|
13
|
-
export
|
|
13
|
+
export type CursorsContainerRef = React.MutableRefObject<HTMLElement | null>;
|
|
14
14
|
export declare function useYjsCollaboration(editor: LexicalEditor, id: string, provider: Provider, docMap: Map<string, Doc>, name: string, color: string, shouldBootstrap: boolean, cursorsContainerRef?: CursorsContainerRef, initialEditorState?: InitialEditorStateType, excludedProperties?: ExcludedProperties, awarenessData?: object): [JSX.Element, Binding];
|
|
15
15
|
export declare function useYjsFocusTracking(editor: LexicalEditor, provider: Provider, name: string, color: string, awarenessData?: object): void;
|
|
16
16
|
export declare function useYjsHistory(editor: LexicalEditor, binding: Binding): () => void;
|