@lexical/react 0.43.1-nightly.20260417.0 → 0.44.0
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/LexicalAutoLinkPlugin.js.flow +3 -1
- package/LexicalCharacterLimitPlugin.dev.js +3 -1
- package/LexicalCharacterLimitPlugin.dev.mjs +3 -1
- package/LexicalCharacterLimitPlugin.prod.js +1 -1
- package/LexicalCharacterLimitPlugin.prod.mjs +1 -1
- package/LexicalDraggableBlockPlugin.dev.js +2 -2
- package/LexicalDraggableBlockPlugin.dev.mjs +2 -2
- package/LexicalDraggableBlockPlugin.prod.js +1 -1
- package/LexicalDraggableBlockPlugin.prod.mjs +1 -1
- package/LexicalExtensionEditorComposer.d.ts +7 -1
- package/LexicalExtensionEditorComposer.dev.js +0 -13
- package/LexicalExtensionEditorComposer.dev.mjs +0 -13
- package/LexicalExtensionEditorComposer.prod.js +1 -1
- package/LexicalExtensionEditorComposer.prod.mjs +1 -1
- package/LexicalNodeContextMenuPlugin.dev.js +1 -1
- package/LexicalNodeContextMenuPlugin.dev.mjs +2 -2
- package/LexicalNodeContextMenuPlugin.prod.js +1 -1
- package/LexicalNodeContextMenuPlugin.prod.mjs +1 -1
- package/package.json +25 -19
|
@@ -8,11 +8,13 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
import type {LinkAttributes, ChangeHandler, LinkMatcher} from '@lexical/link';
|
|
11
|
+
import type {ElementNode} from 'lexical';
|
|
11
12
|
import {createLinkMatcherWithRegExp} from '@lexical/link';
|
|
12
13
|
export {createLinkMatcherWithRegExp};
|
|
13
14
|
export type {ChangeHandler, LinkMatcher};
|
|
14
15
|
|
|
15
16
|
declare export function AutoLinkPlugin(props: {
|
|
16
|
-
|
|
17
|
+
excludeParents?: ((parent: ElementNode) => boolean)[],
|
|
18
|
+
matchers: LinkMatcher[],
|
|
17
19
|
onChange?: ChangeHandler,
|
|
18
20
|
}): React.Node;
|
|
@@ -46,7 +46,9 @@ function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({}))
|
|
|
46
46
|
}
|
|
47
47
|
}, [editor]);
|
|
48
48
|
react.useEffect(() => {
|
|
49
|
-
let text$1 = editor.getEditorState().read(text.$rootTextContent
|
|
49
|
+
let text$1 = editor.getEditorState().read(text.$rootTextContent, {
|
|
50
|
+
editor
|
|
51
|
+
});
|
|
50
52
|
let lastComputedTextLength = 0;
|
|
51
53
|
return utils.mergeRegister(editor.registerTextContentListener(currentText => {
|
|
52
54
|
text$1 = currentText;
|
|
@@ -44,7 +44,9 @@ function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({}))
|
|
|
44
44
|
}
|
|
45
45
|
}, [editor]);
|
|
46
46
|
useEffect(() => {
|
|
47
|
-
let text = editor.getEditorState().read($rootTextContent
|
|
47
|
+
let text = editor.getEditorState().read($rootTextContent, {
|
|
48
|
+
editor
|
|
49
|
+
});
|
|
48
50
|
let lastComputedTextLength = 0;
|
|
49
51
|
return mergeRegister(editor.registerTextContentListener(currentText => {
|
|
50
52
|
text = currentText;
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("react"),n=require("@lexical/overflow"),r=require("@lexical/text"),i=require("@lexical/utils"),o=require("lexical"),s=require("react/jsx-runtime");function l(e,s,l=Object.freeze({})){const{strlen:f=e=>e.length,remainingCharacters:g=()=>{}}=l;t.useEffect(()=>{e.hasNodes([n.OverflowNode])||function(e,...t){const n=new URL("https://lexical.dev/docs/error"),r=new URLSearchParams;r.append("code",e);for(const e of t)r.append("v",e);throw n.search=r.toString(),Error(`Minified Lexical error #${e}; visit ${n.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(57)},[e]),t.useEffect(()=>{let t=e.getEditorState().read(r.$rootTextContent),l=0;return i.mergeRegister(e.registerTextContentListener(e=>{t=e}),e.registerUpdateListener(({dirtyLeaves:r,dirtyElements:
|
|
9
|
+
"use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("react"),n=require("@lexical/overflow"),r=require("@lexical/text"),i=require("@lexical/utils"),o=require("lexical"),s=require("react/jsx-runtime");function l(e,s,l=Object.freeze({})){const{strlen:f=e=>e.length,remainingCharacters:g=()=>{}}=l;t.useEffect(()=>{e.hasNodes([n.OverflowNode])||function(e,...t){const n=new URL("https://lexical.dev/docs/error"),r=new URLSearchParams;r.append("code",e);for(const e of t)r.append("v",e);throw n.search=r.toString(),Error(`Minified Lexical error #${e}; visit ${n.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(57)},[e]),t.useEffect(()=>{let t=e.getEditorState().read(r.$rootTextContent,{editor:e}),l=0;return i.mergeRegister(e.registerTextContentListener(e=>{t=e}),e.registerUpdateListener(({dirtyLeaves:r,dirtyElements:d})=>{const u=e.isComposing(),h=r.size>0||d.size>0;if(u||!h)return;const m=f(t),x=m>s||null!==l&&l>s;if(g(s-m),null===l||x){const r=function(e,t,n){const r=Intl.Segmenter;let i=0,o=0;if("function"==typeof r){const s=(new r).segment(e);for(const{segment:e}of s){const r=o+n(e);if(r>t)break;o=r,i+=e.length}}else{const r=Array.from(e),s=r.length;for(let e=0;e<s;e++){const s=r[e],l=o+n(s);if(l>t)break;o=l,i+=s.length}}return i}(t,s,f);e.update(()=>{!function(e){const t=i.$dfs(),r=t.length;let s=0;for(let l=0;l<r;l+=1){const{node:r}=t[l],f=o.$isLeafNode(r)&&!i.$findMatchingParent(r,n.$isOverflowNode);if(n.$isOverflowNode(r)){const t=s;if(s+r.getTextContentSize()<=e){const e=r.getParent(),t=r.getPreviousSibling(),n=r.getNextSibling();i.$unwrapNode(r);const s=o.$getSelection();!o.$isRangeSelection(s)||s.anchor.getNode().isAttached()&&s.focus.getNode().isAttached()||(o.$isTextNode(t)?t.select():o.$isTextNode(n)?n.select():null!==e&&e.select())}else if(t<e){const n=r.getFirstDescendant(),s=t+(null!==n?n.getTextContentSize():0);(o.$isTextNode(n)&&n.isSimpleText()||s<=e)&&i.$unwrapNode(r)}}else if(f){const t=s;if(s+=r.getTextContentSize(),s>e&&!n.$isOverflowNode(r.getParent())){const n=o.$getSelection();let i;if(t<e&&o.$isTextNode(r)&&r.isSimpleText()){const[,n]=r.splitText(e-t);i=c(n)}else i=c(r);null!==n&&o.$setSelection(n),a(i)}}}}(r)},{tag:o.HISTORY_MERGE_TAG})}l=m}),e.registerCommand(o.DELETE_CHARACTER_COMMAND,e=>{const t=o.$getSelection();if(!o.$isRangeSelection(t))return!1;const n=t.anchor.getNode().getParent(),r=n?n.getParent():null,i=r?r.getNextSibling():null;return t.deleteCharacter(e),r&&r.isEmpty()?r.remove():o.$isElementNode(i)&&i.isEmpty()&&i.remove(),!0},o.COMMAND_PRIORITY_LOW))},[e,s,g,f])}function c(e){const t=n.$createOverflowNode();return e.replace(t),t.append(e),t}function a(e){const t=e.getPreviousSibling();if(!n.$isOverflowNode(t))return;const r=e.getFirstChild(),i=t.getChildren(),s=i.length;if(null===r)e.append(...i);else for(let e=0;e<s;e++)r.insertBefore(i[e]);const l=o.$getSelection();if(o.$isRangeSelection(l)){const n=l.anchor,r=n.getNode(),i=l.focus,o=n.getNode();r.is(t)?n.set(e.getKey(),n.offset,"element"):r.is(e)&&n.set(e.getKey(),s+n.offset,"element"),o.is(t)?i.set(e.getKey(),i.offset,"element"):o.is(e)&&i.set(e.getKey(),s+i.offset,"element")}t.remove()}let f=null;function g(e){const t=void 0===window.TextEncoder?null:(null===f&&(f=new window.TextEncoder),f);if(null===t){const t=encodeURIComponent(e).match(/%[89ABab]/g);return e.length+(t?t.length:0)}return t.encode(e).length}function d({remainingCharacters:e}){return s.jsx("span",{className:"characters-limit "+(e<0?"characters-limit-exceeded":""),children:e})}exports.CharacterLimitPlugin=function({charset:n="UTF-16",maxLength:r=5,renderer:i=d}){const[o]=e.useLexicalComposerContext(),[s,c]=t.useState(r),a=t.useMemo(()=>({remainingCharacters:c,strlen:e=>{if("UTF-8"===n)return g(e);if("UTF-16"===n)return e.length;throw new Error("Unrecognized charset")}}),[n]);return l(o,r,a),i({remainingCharacters:s})};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{useEffect as t,useState as n,useMemo as r}from"react";import{OverflowNode as o,$isOverflowNode as i,$createOverflowNode as s}from"@lexical/overflow";import{$rootTextContent as l}from"@lexical/text";import{mergeRegister as c,$dfs as a,$findMatchingParent as f,$unwrapNode as g}from"@lexical/utils";import{HISTORY_MERGE_TAG as m,DELETE_CHARACTER_COMMAND as
|
|
9
|
+
import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{useEffect as t,useState as n,useMemo as r}from"react";import{OverflowNode as o,$isOverflowNode as i,$createOverflowNode as s}from"@lexical/overflow";import{$rootTextContent as l}from"@lexical/text";import{mergeRegister as c,$dfs as a,$findMatchingParent as f,$unwrapNode as g}from"@lexical/utils";import{HISTORY_MERGE_TAG as m,DELETE_CHARACTER_COMMAND as d,$getSelection as u,$isRangeSelection as h,$isElementNode as p,COMMAND_PRIORITY_LOW as x,$isLeafNode as C,$isTextNode as S,$setSelection as v}from"lexical";import{jsx as w}from"react/jsx-runtime";function T(e,n,r=Object.freeze({})){const{strlen:s=e=>e.length,remainingCharacters:w=()=>{}}=r;t(()=>{e.hasNodes([o])||function(e,...t){const n=new URL("https://lexical.dev/docs/error"),r=new URLSearchParams;r.append("code",e);for(const e of t)r.append("v",e);throw n.search=r.toString(),Error(`Minified Lexical error #${e}; visit ${n.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(57)},[e]),t(()=>{let t=e.getEditorState().read(l,{editor:e}),r=0;return c(e.registerTextContentListener(e=>{t=e}),e.registerUpdateListener(({dirtyLeaves:o,dirtyElements:l})=>{const c=e.isComposing(),d=o.size>0||l.size>0;if(c||!d)return;const p=s(t),x=p>n||null!==r&&r>n;if(w(n-p),null===r||x){const r=function(e,t,n){const r=Intl.Segmenter;let o=0,i=0;if("function"==typeof r){const s=(new r).segment(e);for(const{segment:e}of s){const r=i+n(e);if(r>t)break;i=r,o+=e.length}}else{const r=Array.from(e),s=r.length;for(let e=0;e<s;e++){const s=r[e],l=i+n(s);if(l>t)break;i=l,o+=s.length}}return o}(t,n,s);e.update(()=>{!function(e){const t=a(),n=t.length;let r=0;for(let o=0;o<n;o+=1){const{node:n}=t[o],s=C(n)&&!f(n,i);if(i(n)){const t=r;if(r+n.getTextContentSize()<=e){const e=n.getParent(),t=n.getPreviousSibling(),r=n.getNextSibling();g(n);const o=u();!h(o)||o.anchor.getNode().isAttached()&&o.focus.getNode().isAttached()||(S(t)?t.select():S(r)?r.select():null!==e&&e.select())}else if(t<e){const r=n.getFirstDescendant(),o=t+(null!==r?r.getTextContentSize():0);(S(r)&&r.isSimpleText()||o<=e)&&g(n)}}else if(s){const t=r;if(r+=n.getTextContentSize(),r>e&&!i(n.getParent())){const r=u();let o;if(t<e&&S(n)&&n.isSimpleText()){const[,r]=n.splitText(e-t);o=y(r)}else o=y(n);null!==r&&v(r),N(o)}}}}(r)},{tag:m})}r=p}),e.registerCommand(d,e=>{const t=u();if(!h(t))return!1;const n=t.anchor.getNode().getParent(),r=n?n.getParent():null,o=r?r.getNextSibling():null;return t.deleteCharacter(e),r&&r.isEmpty()?r.remove():p(o)&&o.isEmpty()&&o.remove(),!0},x))},[e,n,w,s])}function y(e){const t=s();return e.replace(t),t.append(e),t}function N(e){const t=e.getPreviousSibling();if(!i(t))return;const n=e.getFirstChild(),r=t.getChildren(),o=r.length;if(null===n)e.append(...r);else for(let e=0;e<o;e++)n.insertBefore(r[e]);const s=u();if(h(s)){const n=s.anchor,r=n.getNode(),i=s.focus,l=n.getNode();r.is(t)?n.set(e.getKey(),n.offset,"element"):r.is(e)&&n.set(e.getKey(),o+n.offset,"element"),l.is(t)?i.set(e.getKey(),i.offset,"element"):l.is(e)&&i.set(e.getKey(),o+i.offset,"element")}t.remove()}let b=null;function E(e){const t=void 0===window.TextEncoder?null:(null===b&&(b=new window.TextEncoder),b);if(null===t){const t=encodeURIComponent(e).match(/%[89ABab]/g);return e.length+(t?t.length:0)}return t.encode(e).length}function L({remainingCharacters:e}){return w("span",{className:"characters-limit "+(e<0?"characters-limit-exceeded":""),children:e})}function U({charset:t="UTF-16",maxLength:o=5,renderer:i=L}){const[s]=e(),[l,c]=n(o);return T(s,o,r(()=>({remainingCharacters:c,strlen:e=>{if("UTF-8"===t)return E(e);if("UTF-16"===t)return e.length;throw new Error("Unrecognized charset")}}),[t])),i({remainingCharacters:l})}export{U as CharacterLimitPlugin};
|
|
@@ -536,7 +536,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
|
|
|
536
536
|
return utils.mergeRegister(editor.registerRootListener(rootElement => {
|
|
537
537
|
function onBlur(event) {
|
|
538
538
|
const relatedTarget = event.relatedTarget;
|
|
539
|
-
if (relatedTarget &&
|
|
539
|
+
if (utils.isHTMLElement(relatedTarget) && isOnMenu(relatedTarget)) {
|
|
540
540
|
// Blur is caused by clicking on drag handle - restore focus immediately
|
|
541
541
|
// to prevent cursor from disappearing. This must be synchronous to work.
|
|
542
542
|
if (rootElement) {
|
|
@@ -564,7 +564,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
|
|
|
564
564
|
editor.registerCommand(lexical.BLUR_COMMAND, () => {
|
|
565
565
|
const rootElement = editor.getRootElement();
|
|
566
566
|
const activeElement = document.activeElement;
|
|
567
|
-
if (rootElement && activeElement &&
|
|
567
|
+
if (rootElement && utils.isHTMLElement(activeElement) && isOnMenu(activeElement)) {
|
|
568
568
|
// Focus is on menu - restore to root and prevent blur command
|
|
569
569
|
rootElement.focus({
|
|
570
570
|
preventScroll: true
|
|
@@ -534,7 +534,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
|
|
|
534
534
|
return mergeRegister(editor.registerRootListener(rootElement => {
|
|
535
535
|
function onBlur(event) {
|
|
536
536
|
const relatedTarget = event.relatedTarget;
|
|
537
|
-
if (relatedTarget &&
|
|
537
|
+
if (isHTMLElement(relatedTarget) && isOnMenu(relatedTarget)) {
|
|
538
538
|
// Blur is caused by clicking on drag handle - restore focus immediately
|
|
539
539
|
// to prevent cursor from disappearing. This must be synchronous to work.
|
|
540
540
|
if (rootElement) {
|
|
@@ -562,7 +562,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
|
|
|
562
562
|
editor.registerCommand(BLUR_COMMAND, () => {
|
|
563
563
|
const rootElement = editor.getRootElement();
|
|
564
564
|
const activeElement = document.activeElement;
|
|
565
|
-
if (rootElement && activeElement &&
|
|
565
|
+
if (rootElement && isHTMLElement(activeElement) && isOnMenu(activeElement)) {
|
|
566
566
|
// Focus is on menu - restore to root and prevent blur command
|
|
567
567
|
rootElement.focus({
|
|
568
568
|
preventScroll: true
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var t=require("@lexical/react/LexicalComposerContext"),e=require("@lexical/rich-text"),n=require("@lexical/utils"),o=require("lexical"),r=require("react"),i=require("react-dom"),s=require("react/jsx-runtime");const l="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,a=l&&"documentMode"in document?document.documentMode:null,c=l&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);l&&"InputEvent"in window&&!a&&new window.InputEvent("input");class u{_x;_y;constructor(t,e){this._x=t,this._y=e}get x(){return this._x}get y(){return this._y}equals({x:t,y:e}){return this.x===t&&this.y===e}calcDeltaXTo({x:t}){return this.x-t}calcDeltaYTo({y:t}){return this.y-t}calcHorizontalDistanceTo(t){return Math.abs(this.calcDeltaXTo(t))}calcVerticalDistance(t){return Math.abs(this.calcDeltaYTo(t))}calcDistanceTo(t){return Math.sqrt(Math.pow(this.calcDeltaXTo(t),2)+Math.pow(this.calcDeltaYTo(t),2))}}class m{_left;_top;_right;_bottom;constructor(t,e,n,o){const[r,i]=e<=o?[e,o]:[o,e],[s,l]=t<=n?[t,n]:[n,t];this._top=r,this._right=l,this._left=s,this._bottom=i}get top(){return this._top}get right(){return this._right}get bottom(){return this._bottom}get left(){return this._left}get width(){return Math.abs(this._left-this._right)}get height(){return Math.abs(this._bottom-this._top)}equals({top:t,left:e,bottom:n,right:o}){return t===this._top&&n===this._bottom&&e===this._left&&o===this._right}contains(t){if(t instanceof u){const{x:e,y:n}=t,o=n<this._top,r=n>this._bottom,i=e<this._left,s=e>this._right;return{reason:{isOnBottomSide:r,isOnLeftSide:i,isOnRightSide:s,isOnTopSide:o},result:!(o||r||i||s)}}{const{top:e,left:n,bottom:o,right:r}=t;return e>=this._top&&e<=this._bottom&&o>=this._top&&o<=this._bottom&&n>=this._left&&n<=this._right&&r>=this._left&&r<=this._right}}intersectsWith(t){const{left:e,top:n,width:o,height:r}=t,{left:i,top:s,width:l,height:a}=this;return(e+o>=i+l?e+o:i+l)-(e<=i?e:i)<=o+l&&(n+r>=s+a?n+r:s+a)-(n<=s?n:s)<=r+a}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:o=this.bottom}){return new m(t,e,n,o)}static fromLTRB(t,e,n,o){return new m(t,e,n,o)}static fromLWTH(t,e,n,o){return new m(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return m.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return m.fromLWTH(o,n,e,r)}}const g="application/x-lexical-drag-block";let
|
|
9
|
+
"use strict";var t=require("@lexical/react/LexicalComposerContext"),e=require("@lexical/rich-text"),n=require("@lexical/utils"),o=require("lexical"),r=require("react"),i=require("react-dom"),s=require("react/jsx-runtime");const l="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,a=l&&"documentMode"in document?document.documentMode:null,c=l&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);l&&"InputEvent"in window&&!a&&new window.InputEvent("input");class u{_x;_y;constructor(t,e){this._x=t,this._y=e}get x(){return this._x}get y(){return this._y}equals({x:t,y:e}){return this.x===t&&this.y===e}calcDeltaXTo({x:t}){return this.x-t}calcDeltaYTo({y:t}){return this.y-t}calcHorizontalDistanceTo(t){return Math.abs(this.calcDeltaXTo(t))}calcVerticalDistance(t){return Math.abs(this.calcDeltaYTo(t))}calcDistanceTo(t){return Math.sqrt(Math.pow(this.calcDeltaXTo(t),2)+Math.pow(this.calcDeltaYTo(t),2))}}class m{_left;_top;_right;_bottom;constructor(t,e,n,o){const[r,i]=e<=o?[e,o]:[o,e],[s,l]=t<=n?[t,n]:[n,t];this._top=r,this._right=l,this._left=s,this._bottom=i}get top(){return this._top}get right(){return this._right}get bottom(){return this._bottom}get left(){return this._left}get width(){return Math.abs(this._left-this._right)}get height(){return Math.abs(this._bottom-this._top)}equals({top:t,left:e,bottom:n,right:o}){return t===this._top&&n===this._bottom&&e===this._left&&o===this._right}contains(t){if(t instanceof u){const{x:e,y:n}=t,o=n<this._top,r=n>this._bottom,i=e<this._left,s=e>this._right;return{reason:{isOnBottomSide:r,isOnLeftSide:i,isOnRightSide:s,isOnTopSide:o},result:!(o||r||i||s)}}{const{top:e,left:n,bottom:o,right:r}=t;return e>=this._top&&e<=this._bottom&&o>=this._top&&o<=this._bottom&&n>=this._left&&n<=this._right&&r>=this._left&&r<=this._right}}intersectsWith(t){const{left:e,top:n,width:o,height:r}=t,{left:i,top:s,width:l,height:a}=this;return(e+o>=i+l?e+o:i+l)-(e<=i?e:i)<=o+l&&(n+r>=s+a?n+r:s+a)-(n<=s?n:s)<=r+a}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:o=this.bottom}){return new m(t,e,n,o)}static fromLTRB(t,e,n,o){return new m(t,e,n,o)}static fromLWTH(t,e,n,o){return new m(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return m.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return m.fromLWTH(o,n,e,r)}}const g="application/x-lexical-drag-block";let d=1/0;function h(t){const e=(t,e)=>t?parseFloat(window.getComputedStyle(t)[e]):0,{marginTop:n,marginBottom:o}=window.getComputedStyle(t),r=e(t.previousElementSibling,"marginBottom"),i=e(t.nextElementSibling,"marginTop"),s=Math.max(parseFloat(n),r);return{marginBottom:Math.max(parseFloat(o),i),marginTop:s}}function f(t,e,r,i=!1){const s=t.getBoundingClientRect(),l=function(t){return t.getEditorState().read(()=>o.$getRoot().getChildrenKeys())}(e);let a=null;return e.getEditorState().read(()=>{if(i){const[t,o]=[e.getElementByKey(l[0]),e.getElementByKey(l[l.length-1])],[i,s]=[null!=t?t.getBoundingClientRect():void 0,null!=o?o.getBoundingClientRect():void 0];if(i&&s){const e=n.calculateZoomLevel(t),l=n.calculateZoomLevel(o);if(r.y/e<i.top?a=t:r.y/l>s.bottom&&(a=o),a)return}}let t=0===(o=l.length)?1/0:d>=0&&d<o?d:Math.floor(o/2);var o;let c=0;for(;t>=0&&t<l.length;){const o=l[t],i=e.getElementByKey(o);if(null===i)break;const g=n.calculateZoomLevel(i),f=new u(r.x/g,r.y/g),p=m.fromDOM(i),{marginTop:y,marginBottom:_}=h(i),v=p.generateNewRect({bottom:p.bottom+_,left:s.left,right:s.right,top:p.top-y}),{result:x,reason:{isOnTopSide:E,isOnBottomSide:M}}=v.contains(f);if(x){a=i,d=t;break}0===c&&(c=E?-1:M?1:1/0),t+=c}}),a}function p(t,l,a,u,m,d,p,y,_){const v=l.parentElement,x=r.useRef(!1),[E,M]=r.useState(null),R=r.useCallback(t=>{M(t),_&&_(t)},[_]);return r.useEffect(()=>{function e(e){const o=e.target;if(!n.isHTMLElement(o))return void R(null);if(y(o))return;const r=f(l,t,e);R(r)}function o(){R(null)}return null!=v&&(v.addEventListener("mousemove",e),v.addEventListener("mouseleave",o)),()=>{null!=v&&(v.removeEventListener("mousemove",e),v.removeEventListener("mouseleave",o))}},[v,l,t,y,R]),r.useEffect(()=>{const t=n.calculateZoomLevel(document.getElementsByClassName("ContentEditable__root")[0],!0);a.current&&function(t,e,n,o){if(!t)return void(e.style.display="none");const r=t.getBoundingClientRect(),i=window.getComputedStyle(t),s=e.getBoundingClientRect(),l=n.getBoundingClientRect();let a=parseInt(i.lineHeight,10);isNaN(a)&&(a=r.bottom-r.top);const c=(r.top+(a-(s.height||a))/2-l.top+n.scrollTop)/o;e.style.display="flex",e.style.opacity="1",e.style.transform=`translate(4px, ${c}px)`}(E,a.current,l,t)},[l,E,a]),r.useEffect(()=>{function r(o){if(!x.current)return!1;const[r]=e.eventFiles(o);if(r)return!1;const{pageY:i,target:s}=o;if(!n.isHTMLElement(s))return!1;const a=f(l,t,o,!0),c=u.current;return null!==a&&null!==c&&(function(t,e,n,o){const{top:r,height:i}=e.getBoundingClientRect(),{top:s,width:l}=o.getBoundingClientRect(),{marginTop:a,marginBottom:c}=h(e);let u=r;n>=r?u+=i+c/2:u-=a/2;const m=u-s-2+o.scrollTop;t.style.transform=`translate(24px, ${m}px)`,t.style.width=l-48+"px",t.style.opacity=".4"}(c,a,i/n.calculateZoomLevel(s),l),o.preventDefault(),!0)}return n.mergeRegister(t.registerCommand(o.DRAGOVER_COMMAND,t=>r(t),o.COMMAND_PRIORITY_LOW),t.registerCommand(o.DROP_COMMAND,r=>function(r){if(!x.current)return!1;const[i]=e.eventFiles(r);if(i)return!1;const{target:s,dataTransfer:a,pageY:u}=r,m=null!=a?a.getData(g):"",d=o.$getNodeByKey(m);if(!d)return!1;if(!n.isHTMLElement(s))return!1;const h=f(l,t,r,!0);if(!h)return!1;const p=o.$getNearestNodeFromDOMNode(h);if(!p)return!1;if(p===d)return c&&t.focus(),!0;const y=h.getBoundingClientRect().top;return u/n.calculateZoomLevel(s)>=y?p.insertAfter(d):p.insertBefore(d),R(null),c&&o.$onUpdate(()=>{t.focus()}),!0}(r),o.COMMAND_PRIORITY_HIGH))},[l,t,u,R]),r.useEffect(()=>{if(c&&m)return n.mergeRegister(t.registerRootListener(e=>{function r(r){const i=r.relatedTarget;n.isHTMLElement(i)&&y(i)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)})),r.stopImmediatePropagation())}if(e)return e.addEventListener("blur",r,!0),()=>e.removeEventListener("blur",r,!0)}),t.registerCommand(o.BLUR_COMMAND,()=>{const e=t.getRootElement(),r=document.activeElement;return!!(e&&n.isHTMLElement(r)&&y(r))&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)}),!0)},o.COMMAND_PRIORITY_HIGH))},[t,m,y]),i.createPortal(s.jsxs(s.Fragment,{children:[s.jsx("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!E)return;!function(t,e){const{transform:n}=e.style;e.style.transform="translateZ(0)",t.setDragImage(e,0,0),setTimeout(()=>{e.style.transform=n})}(n,E);let r="";if(t.update(()=>{const t=o.$getNearestNodeFromDOMNode(E);t&&(r=t.getKey())}),x.current=!0,n.setData(g,r),c){const e=t.getRootElement();null!==e&&document.activeElement!==e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)}))}},onDragEnd:function(){var e;x.current=!1,(e=u.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)"),c&&t.focus()},children:m&&d}),p]}),l)}exports.DraggableBlockPlugin_EXPERIMENTAL=function({anchorElem:e=document.body,menuRef:n,targetLineRef:o,menuComponent:r,targetLineComponent:i,isOnMenu:s,onElementChanged:l}){const[a]=t.useLexicalComposerContext();return p(a,e,n,o,a._editable,r,i,s,l)};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{eventFiles as e}from"@lexical/rich-text";import{calculateZoomLevel as n,mergeRegister as o,isHTMLElement as r}from"@lexical/utils";import{DRAGOVER_COMMAND as i,COMMAND_PRIORITY_LOW as s,DROP_COMMAND as l,COMMAND_PRIORITY_HIGH as a,BLUR_COMMAND as c,$getSelection as u,$getNodeByKey as m,$getNearestNodeFromDOMNode as g,$onUpdate as h,$getRoot as f}from"lexical";import{useRef as d,useState as p,useCallback as y,useEffect as _}from"react";import{createPortal as x}from"react-dom";import{jsxs as b,Fragment as v,jsx as w}from"react/jsx-runtime";const E="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,T=E&&"documentMode"in document?document.documentMode:null,B=E&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);E&&"InputEvent"in window&&!T&&new window.InputEvent("input");class C{_x;_y;constructor(t,e){this._x=t,this._y=e}get x(){return this._x}get y(){return this._y}equals({x:t,y:e}){return this.x===t&&this.y===e}calcDeltaXTo({x:t}){return this.x-t}calcDeltaYTo({y:t}){return this.y-t}calcHorizontalDistanceTo(t){return Math.abs(this.calcDeltaXTo(t))}calcVerticalDistance(t){return Math.abs(this.calcDeltaYTo(t))}calcDistanceTo(t){return Math.sqrt(Math.pow(this.calcDeltaXTo(t),2)+Math.pow(this.calcDeltaYTo(t),2))}}class R{_left;_top;_right;_bottom;constructor(t,e,n,o){const[r,i]=e<=o?[e,o]:[o,e],[s,l]=t<=n?[t,n]:[n,t];this._top=r,this._right=l,this._left=s,this._bottom=i}get top(){return this._top}get right(){return this._right}get bottom(){return this._bottom}get left(){return this._left}get width(){return Math.abs(this._left-this._right)}get height(){return Math.abs(this._bottom-this._top)}equals({top:t,left:e,bottom:n,right:o}){return t===this._top&&n===this._bottom&&e===this._left&&o===this._right}contains(t){if(t instanceof C){const{x:e,y:n}=t,o=n<this._top,r=n>this._bottom,i=e<this._left,s=e>this._right;return{reason:{isOnBottomSide:r,isOnLeftSide:i,isOnRightSide:s,isOnTopSide:o},result:!(o||r||i||s)}}{const{top:e,left:n,bottom:o,right:r}=t;return e>=this._top&&e<=this._bottom&&o>=this._top&&o<=this._bottom&&n>=this._left&&n<=this._right&&r>=this._left&&r<=this._right}}intersectsWith(t){const{left:e,top:n,width:o,height:r}=t,{left:i,top:s,width:l,height:a}=this;return(e+o>=i+l?e+o:i+l)-(e<=i?e:i)<=o+l&&(n+r>=s+a?n+r:s+a)-(n<=s?n:s)<=r+a}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:o=this.bottom}){return new R(t,e,n,o)}static fromLTRB(t,e,n,o){return new R(t,e,n,o)}static fromLWTH(t,e,n,o){return new R(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return R.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return R.fromLWTH(o,n,e,r)}}const S="application/x-lexical-drag-block";let D=1/0;function L(t){const e=(t,e)=>t?parseFloat(window.getComputedStyle(t)[e]):0,{marginTop:n,marginBottom:o}=window.getComputedStyle(t),r=e(t.previousElementSibling,"marginBottom"),i=e(t.nextElementSibling,"marginTop"),s=Math.max(parseFloat(n),r);return{marginBottom:Math.max(parseFloat(o),i),marginTop:s}}function M(t,e,o,r=!1){const i=t.getBoundingClientRect(),s=function(t){return t.getEditorState().read(()=>f().getChildrenKeys())}(e);let l=null;return e.getEditorState().read(()=>{if(r){const[t,r]=[e.getElementByKey(s[0]),e.getElementByKey(s[s.length-1])],[i,a]=[null!=t?t.getBoundingClientRect():void 0,null!=r?r.getBoundingClientRect():void 0];if(i&&a){const e=n(t),s=n(r);if(o.y/e<i.top?l=t:o.y/s>a.bottom&&(l=r),l)return}}let t=0===(a=s.length)?1/0:D>=0&&D<a?D:Math.floor(a/2);var a;let c=0;for(;t>=0&&t<s.length;){const r=s[t],a=e.getElementByKey(r);if(null===a)break;const u=n(a),m=new C(o.x/u,o.y/u),g=R.fromDOM(a),{marginTop:h,marginBottom:f}=L(a),d=g.generateNewRect({bottom:g.bottom+f,left:i.left,right:i.right,top:g.top-h}),{result:p,reason:{isOnTopSide:y,isOnBottomSide:_}}=d.contains(m);if(p){l=a,D=t;break}0===c&&(c=y?-1:_?1:1/0),t+=c}}),l}function O(t,f,E,T,C,R,D,O,
|
|
9
|
+
import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{eventFiles as e}from"@lexical/rich-text";import{calculateZoomLevel as n,mergeRegister as o,isHTMLElement as r}from"@lexical/utils";import{DRAGOVER_COMMAND as i,COMMAND_PRIORITY_LOW as s,DROP_COMMAND as l,COMMAND_PRIORITY_HIGH as a,BLUR_COMMAND as c,$getSelection as u,$getNodeByKey as m,$getNearestNodeFromDOMNode as g,$onUpdate as h,$getRoot as f}from"lexical";import{useRef as d,useState as p,useCallback as y,useEffect as _}from"react";import{createPortal as x}from"react-dom";import{jsxs as b,Fragment as v,jsx as w}from"react/jsx-runtime";const E="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,T=E&&"documentMode"in document?document.documentMode:null,B=E&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);E&&"InputEvent"in window&&!T&&new window.InputEvent("input");class C{_x;_y;constructor(t,e){this._x=t,this._y=e}get x(){return this._x}get y(){return this._y}equals({x:t,y:e}){return this.x===t&&this.y===e}calcDeltaXTo({x:t}){return this.x-t}calcDeltaYTo({y:t}){return this.y-t}calcHorizontalDistanceTo(t){return Math.abs(this.calcDeltaXTo(t))}calcVerticalDistance(t){return Math.abs(this.calcDeltaYTo(t))}calcDistanceTo(t){return Math.sqrt(Math.pow(this.calcDeltaXTo(t),2)+Math.pow(this.calcDeltaYTo(t),2))}}class R{_left;_top;_right;_bottom;constructor(t,e,n,o){const[r,i]=e<=o?[e,o]:[o,e],[s,l]=t<=n?[t,n]:[n,t];this._top=r,this._right=l,this._left=s,this._bottom=i}get top(){return this._top}get right(){return this._right}get bottom(){return this._bottom}get left(){return this._left}get width(){return Math.abs(this._left-this._right)}get height(){return Math.abs(this._bottom-this._top)}equals({top:t,left:e,bottom:n,right:o}){return t===this._top&&n===this._bottom&&e===this._left&&o===this._right}contains(t){if(t instanceof C){const{x:e,y:n}=t,o=n<this._top,r=n>this._bottom,i=e<this._left,s=e>this._right;return{reason:{isOnBottomSide:r,isOnLeftSide:i,isOnRightSide:s,isOnTopSide:o},result:!(o||r||i||s)}}{const{top:e,left:n,bottom:o,right:r}=t;return e>=this._top&&e<=this._bottom&&o>=this._top&&o<=this._bottom&&n>=this._left&&n<=this._right&&r>=this._left&&r<=this._right}}intersectsWith(t){const{left:e,top:n,width:o,height:r}=t,{left:i,top:s,width:l,height:a}=this;return(e+o>=i+l?e+o:i+l)-(e<=i?e:i)<=o+l&&(n+r>=s+a?n+r:s+a)-(n<=s?n:s)<=r+a}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:o=this.bottom}){return new R(t,e,n,o)}static fromLTRB(t,e,n,o){return new R(t,e,n,o)}static fromLWTH(t,e,n,o){return new R(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return R.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return R.fromLWTH(o,n,e,r)}}const S="application/x-lexical-drag-block";let D=1/0;function L(t){const e=(t,e)=>t?parseFloat(window.getComputedStyle(t)[e]):0,{marginTop:n,marginBottom:o}=window.getComputedStyle(t),r=e(t.previousElementSibling,"marginBottom"),i=e(t.nextElementSibling,"marginTop"),s=Math.max(parseFloat(n),r);return{marginBottom:Math.max(parseFloat(o),i),marginTop:s}}function M(t,e,o,r=!1){const i=t.getBoundingClientRect(),s=function(t){return t.getEditorState().read(()=>f().getChildrenKeys())}(e);let l=null;return e.getEditorState().read(()=>{if(r){const[t,r]=[e.getElementByKey(s[0]),e.getElementByKey(s[s.length-1])],[i,a]=[null!=t?t.getBoundingClientRect():void 0,null!=r?r.getBoundingClientRect():void 0];if(i&&a){const e=n(t),s=n(r);if(o.y/e<i.top?l=t:o.y/s>a.bottom&&(l=r),l)return}}let t=0===(a=s.length)?1/0:D>=0&&D<a?D:Math.floor(a/2);var a;let c=0;for(;t>=0&&t<s.length;){const r=s[t],a=e.getElementByKey(r);if(null===a)break;const u=n(a),m=new C(o.x/u,o.y/u),g=R.fromDOM(a),{marginTop:h,marginBottom:f}=L(a),d=g.generateNewRect({bottom:g.bottom+f,left:i.left,right:i.right,top:g.top-h}),{result:p,reason:{isOnTopSide:y,isOnBottomSide:_}}=d.contains(m);if(p){l=a,D=t;break}0===c&&(c=y?-1:_?1:1/0),t+=c}}),l}function O(t,f,E,T,C,R,D,O,I){const K=f.parentElement,N=d(!1),[Y,k]=p(null),F=y(t=>{k(t),I&&I(t)},[I]);return _(()=>{function e(e){const n=e.target;if(!r(n))return void F(null);if(O(n))return;const o=M(f,t,e);F(o)}function n(){F(null)}return null!=K&&(K.addEventListener("mousemove",e),K.addEventListener("mouseleave",n)),()=>{null!=K&&(K.removeEventListener("mousemove",e),K.removeEventListener("mouseleave",n))}},[K,f,t,O,F]),_(()=>{const t=n(document.getElementsByClassName("ContentEditable__root")[0],!0);E.current&&function(t,e,n,o){if(!t)return void(e.style.display="none");const r=t.getBoundingClientRect(),i=window.getComputedStyle(t),s=e.getBoundingClientRect(),l=n.getBoundingClientRect();let a=parseInt(i.lineHeight,10);isNaN(a)&&(a=r.bottom-r.top);const c=(r.top+(a-(s.height||a))/2-l.top+n.scrollTop)/o;e.style.display="flex",e.style.opacity="1",e.style.transform=`translate(4px, ${c}px)`}(Y,E.current,f,t)},[f,Y,E]),_(()=>{function c(o){if(!N.current)return!1;const[i]=e(o);if(i)return!1;const{pageY:s,target:l}=o;if(!r(l))return!1;const a=M(f,t,o,!0),c=T.current;return null!==a&&null!==c&&(function(t,e,n,o){const{top:r,height:i}=e.getBoundingClientRect(),{top:s,width:l}=o.getBoundingClientRect(),{marginTop:a,marginBottom:c}=L(e);let u=r;n>=r?u+=i+c/2:u-=a/2;const m=u-s-2+o.scrollTop;t.style.transform=`translate(24px, ${m}px)`,t.style.width=l-48+"px",t.style.opacity=".4"}(c,a,s/n(l),f),o.preventDefault(),!0)}return o(t.registerCommand(i,t=>c(t),s),t.registerCommand(l,o=>function(o){if(!N.current)return!1;const[i]=e(o);if(i)return!1;const{target:s,dataTransfer:l,pageY:a}=o,c=null!=l?l.getData(S):"",u=m(c);if(!u)return!1;if(!r(s))return!1;const d=M(f,t,o,!0);if(!d)return!1;const p=g(d);if(!p)return!1;if(p===u)return B&&t.focus(),!0;const y=d.getBoundingClientRect().top;return a/n(s)>=y?p.insertAfter(u):p.insertBefore(u),F(null),B&&h(()=>{t.focus()}),!0}(o),a))},[f,t,T,F]),_(()=>{if(B&&C)return o(t.registerRootListener(e=>{function n(n){const o=n.relatedTarget;r(o)&&O(o)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)})),n.stopImmediatePropagation())}if(e)return e.addEventListener("blur",n,!0),()=>e.removeEventListener("blur",n,!0)}),t.registerCommand(c,()=>{const e=t.getRootElement(),n=document.activeElement;return!!(e&&r(n)&&O(n))&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)}),!0)},a))},[t,C,O]),x(b(v,{children:[w("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!Y)return;!function(t,e){const{transform:n}=e.style;e.style.transform="translateZ(0)",t.setDragImage(e,0,0),setTimeout(()=>{e.style.transform=n})}(n,Y);let o="";if(t.update(()=>{const t=g(Y);t&&(o=t.getKey())}),N.current=!0,n.setData(S,o),B){const e=t.getRootElement();null!==e&&document.activeElement!==e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)}))}},onDragEnd:function(){var e;N.current=!1,(e=T.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)"),B&&t.focus()},children:C&&R}),D]}),f)}function I({anchorElem:e=document.body,menuRef:n,targetLineRef:o,menuComponent:r,targetLineComponent:i,isOnMenu:s,onElementChanged:l}){const[a]=t();return O(a,e,n,o,a._editable,r,i,s,l)}export{I as DraggableBlockPlugin_EXPERIMENTAL};
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { LexicalEditorWithDispose } from 'lexical';
|
|
2
2
|
export interface LexicalExtensionEditorComposerProps {
|
|
3
3
|
/**
|
|
4
|
-
* Your root extension, typically defined with {@link defineExtension}
|
|
4
|
+
* Your root extension, typically defined with {@link defineExtension}.
|
|
5
|
+
* The lifecycle of this editor is not owned by this component,
|
|
6
|
+
* you are responsible for calling `initialEditor.dispose()` if needed.
|
|
7
|
+
* Note also that any LexicalEditor can only be rendered to one root
|
|
8
|
+
* element, so if you try and use it from multiple components
|
|
9
|
+
* simultaneously then it will only be managed correctly by the last one
|
|
10
|
+
* to render.
|
|
5
11
|
*/
|
|
6
12
|
initialEditor: LexicalEditorWithDispose;
|
|
7
13
|
/**
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
|
|
11
11
|
var extension = require('@lexical/extension');
|
|
12
12
|
var ReactExtension = require('@lexical/react/ReactExtension');
|
|
13
|
-
var react = require('react');
|
|
14
13
|
var jsxRuntime = require('react/jsx-runtime');
|
|
15
14
|
|
|
16
15
|
/**
|
|
@@ -32,18 +31,6 @@ function LexicalExtensionEditorComposer({
|
|
|
32
31
|
initialEditor: editor,
|
|
33
32
|
children
|
|
34
33
|
}) {
|
|
35
|
-
react.useEffect(() => {
|
|
36
|
-
// Strict mode workaround
|
|
37
|
-
let didMount = false;
|
|
38
|
-
queueMicrotask(() => {
|
|
39
|
-
didMount = true;
|
|
40
|
-
});
|
|
41
|
-
return () => {
|
|
42
|
-
if (didMount) {
|
|
43
|
-
editor.dispose();
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
}, [editor]);
|
|
47
34
|
const {
|
|
48
35
|
Component
|
|
49
36
|
} = extension.getExtensionDependencyFromEditor(editor, ReactExtension.ReactExtension).output;
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
import { getExtensionDependencyFromEditor } from '@lexical/extension';
|
|
10
10
|
import { ReactExtension } from '@lexical/react/ReactExtension';
|
|
11
|
-
import { useEffect } from 'react';
|
|
12
11
|
import { jsx } from 'react/jsx-runtime';
|
|
13
12
|
|
|
14
13
|
/**
|
|
@@ -30,18 +29,6 @@ function LexicalExtensionEditorComposer({
|
|
|
30
29
|
initialEditor: editor,
|
|
31
30
|
children
|
|
32
31
|
}) {
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
// Strict mode workaround
|
|
35
|
-
let didMount = false;
|
|
36
|
-
queueMicrotask(() => {
|
|
37
|
-
didMount = true;
|
|
38
|
-
});
|
|
39
|
-
return () => {
|
|
40
|
-
if (didMount) {
|
|
41
|
-
editor.dispose();
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
}, [editor]);
|
|
45
32
|
const {
|
|
46
33
|
Component
|
|
47
34
|
} = getExtensionDependencyFromEditor(editor, ReactExtension).output;
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@lexical/extension"),t=require("@lexical/react/ReactExtension"),
|
|
9
|
+
"use strict";var e=require("@lexical/extension"),t=require("@lexical/react/ReactExtension"),i=require("react/jsx-runtime");exports.LexicalExtensionEditorComposer=function({initialEditor:n,children:r}){const{Component:o}=e.getExtensionDependencyFromEditor(n,t.ReactExtension).output;return i.jsx(o,{children:r})};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{getExtensionDependencyFromEditor as t}from"@lexical/extension";import{ReactExtension as
|
|
9
|
+
import{getExtensionDependencyFromEditor as t}from"@lexical/extension";import{ReactExtension as i}from"@lexical/react/ReactExtension";import{jsx as o}from"react/jsx-runtime";function r({initialEditor:r,children:e}){const{Component:n}=t(r,i).output;return o(n,{children:e})}export{r as LexicalExtensionEditorComposer};
|
|
@@ -163,7 +163,7 @@ const NodeContextMenuPlugin = /*#__PURE__*/react.forwardRef(({
|
|
|
163
163
|
let visibleItems = [];
|
|
164
164
|
if (items) {
|
|
165
165
|
editor.read(() => {
|
|
166
|
-
const node = lexical.$getNearestNodeFromDOMNode(e.target);
|
|
166
|
+
const node = lexical.$getNearestNodeFromDOMNode(e.target) ?? lexical.$getRoot();
|
|
167
167
|
if (node) {
|
|
168
168
|
visibleItems = items.filter(option => option.$showOn ? option.$showOn(node) : true);
|
|
169
169
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
import { useFloating, autoUpdate, offset, flip, shift, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
|
|
10
10
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
11
|
-
import { $getNearestNodeFromDOMNode } from 'lexical';
|
|
11
|
+
import { $getNearestNodeFromDOMNode, $getRoot } from 'lexical';
|
|
12
12
|
import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
|
|
13
13
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
14
14
|
|
|
@@ -161,7 +161,7 @@ const NodeContextMenuPlugin = /*#__PURE__*/forwardRef(({
|
|
|
161
161
|
let visibleItems = [];
|
|
162
162
|
if (items) {
|
|
163
163
|
editor.read(() => {
|
|
164
|
-
const node = $getNearestNodeFromDOMNode(e.target);
|
|
164
|
+
const node = $getNearestNodeFromDOMNode(e.target) ?? $getRoot();
|
|
165
165
|
if (node) {
|
|
166
166
|
visibleItems = items.filter(option => option.$showOn ? option.$showOn(node) : true);
|
|
167
167
|
}
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
"use strict";var e=require("@floating-ui/react"),t=require("@lexical/react/LexicalComposerContext"),s=require("lexical"),n=require("react"),i=require("react/jsx-runtime");class a{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}const o=n.forwardRef(({className:e,disabled:t,...s},n)=>i.jsx("hr",{className:e})),r=n.forwardRef(({className:e,label:t,disabled:s,icon:n,...a},o)=>i.jsxs("button",{...a,className:e,ref:o,role:"menuitem",disabled:s,children:[n,t]})),l=n.forwardRef(({items:a,className:l,itemClassName:c,separatorClassName:u},d)=>{const[m]=t.useLexicalComposerContext(),[p,h]=n.useState(null),[f,x]=n.useState(!1),
|
|
9
|
+
"use strict";var e=require("@floating-ui/react"),t=require("@lexical/react/LexicalComposerContext"),s=require("lexical"),n=require("react"),i=require("react/jsx-runtime");class a{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}const o=n.forwardRef(({className:e,disabled:t,...s},n)=>i.jsx("hr",{className:e})),r=n.forwardRef(({className:e,label:t,disabled:s,icon:n,...a},o)=>i.jsxs("button",{...a,className:e,ref:o,role:"menuitem",disabled:s,children:[n,t]})),l=n.forwardRef(({items:a,className:l,itemClassName:c,separatorClassName:u},d)=>{const[m]=t.useLexicalComposerContext(),[p,h]=n.useState(null),[f,x]=n.useState(!1),g=n.useRef([]),y=n.useRef([]),{refs:N,floatingStyles:b,context:k}=e.useFloating({middleware:[e.offset({alignmentAxis:4,mainAxis:5}),e.flip({fallbackPlacements:["left-start"]}),e.shift({padding:10})],onOpenChange:x,open:f,placement:"right-start",strategy:"fixed",whileElementsMounted:e.autoUpdate}),w=e.useRole(k,{role:"menu"}),$=e.useDismiss(k),C=e.useListNavigation(k,{activeIndex:p,listRef:g,onNavigate:h}),R=e.useTypeahead(k,{activeIndex:p,enabled:f,listRef:y,onMatch:h}),{getFloatingProps:O,getItemProps:v}=e.useInteractions([w,$,C,R]),[S,E]=n.useState([]);return n.useEffect(()=>{function e(e){e.preventDefault(),N.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});let t=[];a&&m.read(()=>{const n=s.$getNearestNodeFromDOMNode(e.target)??s.$getRoot();n&&(t=a.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:u,key:e.key+"-"+t,type:e.type}:{className:c,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>m.update(()=>e.$onSelect()),title:e.title,type:e.type});y.current=n.map(e=>e.key),E(n),x(!0)}return m.registerRootListener(t=>{if(null!==t)return t.addEventListener("contextmenu",e),()=>t.removeEventListener("contextmenu",e)})},[a,c,u,N,m]),i.jsx(e.FloatingPortal,{children:f&&i.jsx(e.FloatingOverlay,{lockScroll:!0,children:i.jsx(e.FloatingFocusManager,{context:k,initialFocus:N.floating,children:i.jsx("div",{className:l,ref:N.setFloating,style:b,...O(),children:S.map((e,t)=>"item"===e.type?n.createElement(r,{...v({...e,onClick(){e.onClick(),x(!1)},onMouseUp(){e.onClick(),x(!1)},ref(e){g.current[t]=e},tabIndex:p===t?0:-1}),key:e.key}):"separator"===e.type?n.createElement(o,{...v({...e,ref(e){g.current[t]=e},tabIndex:p===t?0:-1}),key:e.key}):void 0)})})})})});exports.NodeContextMenuOption=class extends a{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}},exports.NodeContextMenuPlugin=l,exports.NodeContextMenuSeparator=class extends a{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}};
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import{useFloating as e,autoUpdate as t,offset as n,flip as s,shift as i,useRole as l,useDismiss as o,useListNavigation as r,useTypeahead as a,useInteractions as c,FloatingPortal as m,FloatingOverlay as d,FloatingFocusManager as h}from"@floating-ui/react";import{useLexicalComposerContext as p}from"@lexical/react/LexicalComposerContext";import{$getNearestNodeFromDOMNode as u}from"lexical";import{forwardRef as
|
|
9
|
+
import{useFloating as e,autoUpdate as t,offset as n,flip as s,shift as i,useRole as l,useDismiss as o,useListNavigation as r,useTypeahead as a,useInteractions as c,FloatingPortal as m,FloatingOverlay as d,FloatingFocusManager as h}from"@floating-ui/react";import{useLexicalComposerContext as p}from"@lexical/react/LexicalComposerContext";import{$getNearestNodeFromDOMNode as u,$getRoot as f}from"lexical";import{forwardRef as y,useState as x,useRef as g,useEffect as b,createElement as k}from"react";import{jsx as $,jsxs as w}from"react/jsx-runtime";class N{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}class O extends N{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}}class C extends N{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}}const v=y(({className:e,disabled:t,...n},s)=>$("hr",{className:e})),R=y(({className:e,label:t,disabled:n,icon:s,...i},l)=>w("button",{...i,className:e,ref:l,role:"menuitem",disabled:n,children:[s,t]})),E=y(({items:y,className:w,itemClassName:N,separatorClassName:O},C)=>{const[E]=p(),[S,I]=x(null),[L,P]=x(!1),F=g([]),M=g([]),{refs:X,floatingStyles:Y,context:A}=e({middleware:[n({alignmentAxis:4,mainAxis:5}),s({fallbackPlacements:["left-start"]}),i({padding:10})],onOpenChange:P,open:L,placement:"right-start",strategy:"fixed",whileElementsMounted:t}),j=l(A,{role:"menu"}),B=o(A),D=r(A,{activeIndex:S,listRef:F,onNavigate:I}),U=a(A,{activeIndex:S,enabled:L,listRef:M,onMatch:I}),{getFloatingProps:_,getItemProps:q}=c([j,B,D,U]),[z,G]=x([]);return b(()=>{function e(e){e.preventDefault(),X.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});let t=[];y&&E.read(()=>{const n=u(e.target)??f();n&&(t=y.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:O,key:e.key+"-"+t,type:e.type}:{className:N,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>E.update(()=>e.$onSelect()),title:e.title,type:e.type});M.current=n.map(e=>e.key),G(n),P(!0)}return E.registerRootListener(t=>{if(null!==t)return t.addEventListener("contextmenu",e),()=>t.removeEventListener("contextmenu",e)})},[y,N,O,X,E]),$(m,{children:L&&$(d,{lockScroll:!0,children:$(h,{context:A,initialFocus:X.floating,children:$("div",{className:w,ref:X.setFloating,style:Y,..._(),children:z.map((e,t)=>"item"===e.type?k(R,{...q({...e,onClick(){e.onClick(),P(!1)},onMouseUp(){e.onClick(),P(!1)},ref(e){F.current[t]=e},tabIndex:S===t?0:-1}),key:e.key}):"separator"===e.type?k(v,{...q({...e,ref(e){F.current[t]=e},tabIndex:S===t?0:-1}),key:e.key}):void 0)})})})})});export{O as NodeContextMenuOption,E as NodeContextMenuPlugin,C as NodeContextMenuSeparator};
|
package/package.json
CHANGED
|
@@ -8,31 +8,37 @@
|
|
|
8
8
|
"rich-text"
|
|
9
9
|
],
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"version": "0.
|
|
11
|
+
"version": "0.44.0",
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@floating-ui/react": "^0.27.16",
|
|
14
|
-
"@lexical/devtools-core": "0.
|
|
15
|
-
"@lexical/dragon": "0.
|
|
16
|
-
"@lexical/extension": "0.
|
|
17
|
-
"@lexical/hashtag": "0.
|
|
18
|
-
"@lexical/history": "0.
|
|
19
|
-
"@lexical/link": "0.
|
|
20
|
-
"@lexical/list": "0.
|
|
21
|
-
"@lexical/mark": "0.
|
|
22
|
-
"@lexical/markdown": "0.
|
|
23
|
-
"@lexical/overflow": "0.
|
|
24
|
-
"@lexical/plain-text": "0.
|
|
25
|
-
"@lexical/rich-text": "0.
|
|
26
|
-
"@lexical/table": "0.
|
|
27
|
-
"@lexical/text": "0.
|
|
28
|
-
"@lexical/utils": "0.
|
|
29
|
-
"@lexical/yjs": "0.
|
|
30
|
-
"lexical": "0.
|
|
14
|
+
"@lexical/devtools-core": "0.44.0",
|
|
15
|
+
"@lexical/dragon": "0.44.0",
|
|
16
|
+
"@lexical/extension": "0.44.0",
|
|
17
|
+
"@lexical/hashtag": "0.44.0",
|
|
18
|
+
"@lexical/history": "0.44.0",
|
|
19
|
+
"@lexical/link": "0.44.0",
|
|
20
|
+
"@lexical/list": "0.44.0",
|
|
21
|
+
"@lexical/mark": "0.44.0",
|
|
22
|
+
"@lexical/markdown": "0.44.0",
|
|
23
|
+
"@lexical/overflow": "0.44.0",
|
|
24
|
+
"@lexical/plain-text": "0.44.0",
|
|
25
|
+
"@lexical/rich-text": "0.44.0",
|
|
26
|
+
"@lexical/table": "0.44.0",
|
|
27
|
+
"@lexical/text": "0.44.0",
|
|
28
|
+
"@lexical/utils": "0.44.0",
|
|
29
|
+
"@lexical/yjs": "0.44.0",
|
|
30
|
+
"lexical": "0.44.0",
|
|
31
31
|
"react-error-boundary": "^6.0.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=17.x",
|
|
35
|
-
"react-dom": ">=17.x"
|
|
35
|
+
"react-dom": ">=17.x",
|
|
36
|
+
"yjs": ">=13.5.22"
|
|
37
|
+
},
|
|
38
|
+
"peerDependenciesMeta": {
|
|
39
|
+
"yjs": {
|
|
40
|
+
"optional": true
|
|
41
|
+
}
|
|
36
42
|
},
|
|
37
43
|
"repository": {
|
|
38
44
|
"type": "git",
|