@ekz/lexical-react 0.40.0

package/LexicalDraggableBlockPlugin.node.mjs

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalDraggableBlockPlugin.dev.mjs') : import('./LexicalDraggableBlockPlugin.prod.mjs'));
+export const DraggableBlockPlugin_EXPERIMENTAL = mod.DraggableBlockPlugin_EXPERIMENTAL;

package/LexicalDraggableBlockPlugin.prod.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+"use strict";var t=require("@ekz/lexical-react/LexicalComposerContext"),e=require("@ekz/lexical-rich-text"),n=require("@ekz/lexical-utils"),o=require("@ekz/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 f(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 h(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),h=new u(r.x/g,r.y/g),p=m.fromDOM(i),{marginTop:y,marginBottom:_}=f(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(h);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=h(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=h(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}=f(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 f=h(l,t,r,!0);if(!f)return!1;const p=o.$getNearestNodeFromDOMNode(f);if(!p)return!1;if(p===d)return c&&t.focus(),!0;const y=f.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,n)=>{function r(n){const r=n.relatedTarget;r&&r instanceof HTMLElement&&y(r)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)})),n.stopImmediatePropagation())}e&&e.addEventListener("blur",r,!0),n&&n.removeEventListener("blur",r,!0)}),t.registerCommand(o.BLUR_COMMAND,()=>{const e=t.getRootElement(),n=document.activeElement;return!!(e&&n&&n instanceof HTMLElement&&y(n))&&(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)};

package/LexicalDraggableBlockPlugin.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import{useLexicalComposerContext as t}from"@ekz/lexical-react/LexicalComposerContext";import{eventFiles as e}from"@ekz/lexical-rich-text";import{calculateZoomLevel as n,mergeRegister as o,isHTMLElement as r}from"@ekz/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"@ekz/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,k){const H=f.parentElement,z=d(!1),[I,K]=p(null),N=y(t=>{K(t),k&&k(t)},[k]);return _(()=>{function e(e){const n=e.target;if(!r(n))return void N(null);if(O(n))return;const o=M(f,t,e);N(o)}function n(){N(null)}return null!=H&&(H.addEventListener("mousemove",e),H.addEventListener("mouseleave",n)),()=>{null!=H&&(H.removeEventListener("mousemove",e),H.removeEventListener("mouseleave",n))}},[H,f,t,O,N]),_(()=>{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)`}(I,E.current,f,t)},[f,I,E]),_(()=>{function c(o){if(!z.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(!z.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),N(null),B&&h(()=>{t.focus()}),!0}(o),a))},[f,t,T,N]),_(()=>{if(B&&C)return o(t.registerRootListener((e,n)=>{function o(n){const o=n.relatedTarget;o&&o instanceof HTMLElement&&O(o)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)})),n.stopImmediatePropagation())}e&&e.addEventListener("blur",o,!0),n&&n.removeEventListener("blur",o,!0)}),t.registerCommand(c,()=>{const e=t.getRootElement(),n=document.activeElement;return!!(e&&n&&n instanceof HTMLElement&&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||!I)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,I);let o="";if(t.update(()=>{const t=g(I);t&&(o=t.getKey())}),z.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;z.current=!1,(e=T.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)"),B&&t.focus()},children:C&&R}),D]}),f)}function k({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{k as DraggableBlockPlugin_EXPERIMENTAL};

package/LexicalEditorRefPlugin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { LexicalEditor } from '@ekz/lexical';
+import { RefObject } from 'react';
+import * as React from 'react';
+/**
+ *
+ * Use this plugin to access the editor instance outside of the
+ * LexicalComposer. This can help with things like buttons or other
+ * UI components that need to update or read EditorState but need to
+ * be positioned outside the LexicalComposer in the React tree.
+ */
+export declare function EditorRefPlugin({ editorRef, }: {
+    editorRef: React.RefCallback<LexicalEditor> | RefObject<LexicalEditor | null | undefined>;
+}): null;

package/LexicalEditorRefPlugin.dev.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+var LexicalComposerContext = require('@ekz/lexical-react/LexicalComposerContext');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    for (var k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+
+/**
+ *
+ * Use this plugin to access the editor instance outside of the
+ * LexicalComposer. This can help with things like buttons or other
+ * UI components that need to update or read EditorState but need to
+ * be positioned outside the LexicalComposer in the React tree.
+ */
+function EditorRefPlugin({
+  editorRef
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React__namespace.useEffect(() => {
+    if (typeof editorRef === 'function') {
+      editorRef(editor);
+    } else if (typeof editorRef === 'object') {
+      editorRef.current = editor;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  return null;
+}
+
+exports.EditorRefPlugin = EditorRefPlugin;

package/LexicalEditorRefPlugin.dev.mjs

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useLexicalComposerContext } from '@ekz/lexical-react/LexicalComposerContext';
+import * as React from 'react';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+
+/**
+ *
+ * Use this plugin to access the editor instance outside of the
+ * LexicalComposer. This can help with things like buttons or other
+ * UI components that need to update or read EditorState but need to
+ * be positioned outside the LexicalComposer in the React tree.
+ */
+function EditorRefPlugin({
+  editorRef
+}) {
+  const [editor] = useLexicalComposerContext();
+  React.useEffect(() => {
+    if (typeof editorRef === 'function') {
+      editorRef(editor);
+    } else if (typeof editorRef === 'object') {
+      editorRef.current = editor;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  return null;
+}
+
+export { EditorRefPlugin };

package/LexicalEditorRefPlugin.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict'
+const LexicalEditorRefPlugin = process.env.NODE_ENV !== 'production' ? require('./LexicalEditorRefPlugin.dev.js') : require('./LexicalEditorRefPlugin.prod.js');
+module.exports = LexicalEditorRefPlugin;

package/LexicalEditorRefPlugin.js.flow

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type {LexicalEditor} from '@ekz/lexical';
+// $FlowFixMe[cannot-resolve-module] - Not able to type this with a flow extension
+import type {TRefFor} from 'CoreTypes.flow';
+
+
+type Props = $ReadOnly<{
+  editorRef: TRefFor<LexicalEditor>,
+}>;
+
+declare export function EditorRefPlugin(props: Props): null;

package/LexicalEditorRefPlugin.mjs

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as modDev from './LexicalEditorRefPlugin.dev.mjs';
+import * as modProd from './LexicalEditorRefPlugin.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const EditorRefPlugin = mod.EditorRefPlugin;

package/LexicalEditorRefPlugin.node.mjs

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalEditorRefPlugin.dev.mjs') : import('./LexicalEditorRefPlugin.prod.mjs'));
+export const EditorRefPlugin = mod.EditorRefPlugin;

package/LexicalEditorRefPlugin.prod.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+"use strict";var e=require("@ekz/lexical-react/LexicalComposerContext");function t(e){var t=Object.create(null);if(e)for(var r in e)t[r]=e[r];return t.default=e,t}var r=t(require("react"));exports.EditorRefPlugin=function({editorRef:t}){const[o]=e.useLexicalComposerContext();return r.useEffect(()=>{"function"==typeof t?t(o):"object"==typeof t&&(t.current=o)},[o]),null};

package/LexicalEditorRefPlugin.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import{useLexicalComposerContext as e}from"@ekz/lexical-react/LexicalComposerContext";import*as t from"react";function o({editorRef:o}){const[r]=e();return t.useEffect(()=>{"function"==typeof o?o(r):"object"==typeof o&&(o.current=r)},[r]),null}export{o as EditorRefPlugin};

package/LexicalErrorBoundary.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+export type LexicalErrorBoundaryProps = {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+};
+export declare function LexicalErrorBoundary({ children, onError, }: LexicalErrorBoundaryProps): JSX.Element;

package/LexicalErrorBoundary.dev.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+var reactErrorBoundary = require('react-error-boundary');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function LexicalErrorBoundary({
+  children,
+  onError
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
+    fallback: /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        border: '1px solid #f00',
+        color: '#f00',
+        padding: '8px'
+      },
+      children: "An error was thrown."
+    }),
+    onError: onError,
+    children: children
+  });
+}
+
+exports.LexicalErrorBoundary = LexicalErrorBoundary;

package/LexicalErrorBoundary.dev.mjs

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ErrorBoundary } from 'react-error-boundary';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function LexicalErrorBoundary({
+  children,
+  onError
+}) {
+  return /*#__PURE__*/jsx(ErrorBoundary, {
+    fallback: /*#__PURE__*/jsx("div", {
+      style: {
+        border: '1px solid #f00',
+        color: '#f00',
+        padding: '8px'
+      },
+      children: "An error was thrown."
+    }),
+    onError: onError,
+    children: children
+  });
+}
+
+export { LexicalErrorBoundary };

package/LexicalErrorBoundary.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict'
+const LexicalErrorBoundary = process.env.NODE_ENV !== 'production' ? require('./LexicalErrorBoundary.dev.js') : require('./LexicalErrorBoundary.prod.js');
+module.exports = LexicalErrorBoundary;

package/LexicalErrorBoundary.js.flow

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+export type LexicalErrorBoundaryProps = $ReadOnly<{
+  children: React.Node,
+  onError: (error: Error) => void,
+}>;
+
+declare export function LexicalErrorBoundary(
+  props: LexicalErrorBoundaryProps,
+): React.Node;

package/LexicalErrorBoundary.mjs

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as modDev from './LexicalErrorBoundary.dev.mjs';
+import * as modProd from './LexicalErrorBoundary.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const LexicalErrorBoundary = mod.LexicalErrorBoundary;

package/LexicalErrorBoundary.node.mjs

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalErrorBoundary.dev.mjs') : import('./LexicalErrorBoundary.prod.mjs'));
+export const LexicalErrorBoundary = mod.LexicalErrorBoundary;

package/LexicalErrorBoundary.prod.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+"use strict";var r=require("react-error-boundary"),e=require("react/jsx-runtime");exports.LexicalErrorBoundary=function({children:o,onError:n}){return e.jsx(r.ErrorBoundary,{fallback:e.jsx("div",{style:{border:"1px solid #f00",color:"#f00",padding:"8px"},children:"An error was thrown."}),onError:n,children:o})};

package/LexicalErrorBoundary.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import{ErrorBoundary as r}from"react-error-boundary";import{jsx as o}from"react/jsx-runtime";function n({children:n,onError:e}){return o(r,{fallback:o("div",{style:{border:"1px solid #f00",color:"#f00",padding:"8px"},children:"An error was thrown."}),onError:e,children:n})}export{n as LexicalErrorBoundary};

package/LexicalExtensionComponent.js.flow

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+/**
+ * LexicalExtensionComponent
+ */

package/LexicalExtensionComposer.d.ts

@@ -0,0 +1,69 @@
+import { ReactConfig } from '@ekz/lexical-react/ReactExtension';
+import { type AnyLexicalExtensionArgument } from '@ekz/lexical';
+export interface LexicalExtensionComposerProps {
+    /**
+     * Your root extension, typically defined with {@link defineExtension}
+     */
+    extension: AnyLexicalExtensionArgument;
+    /**
+     * Any children will have access to useLexicalComposerContext (e.g. for React plug-ins or UX)
+     */
+    children: React.ReactNode;
+    /**
+     * Override the default ContentEditable that is rendered as the first child of the
+     * composer. If this is null, then it is your responsibility to render a ContentEditable
+     * elsewhere in the tree. This is equivalent to
+     * `configExtension(ReactExtension, {contentEditable})` in your extension dependencies.
+     */
+    contentEditable?: ReactConfig['contentEditable'];
+}
+/**
+ * The equivalent of LexicalComposer for an extension. Make sure that your extension
+ * argument is stable (e.g. using module scope or useMemo) so
+ * that you are not re-creating the editor on every render!
+ *
+ * @example
+ * Module scoped extension
+ * ```tsx
+ * const extension = defineExtension({
+ *   name: "[root]",
+ *   dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
+ * });
+ * function MyEditor({ children }) {
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ *
+ * @example
+ * useMemo extension
+ * ```tsx
+ * function MyEditor({ emojiBaseUrl, children }) {
+ *   const extension = useMemo(() => {
+ *     return defineExtension({
+ *       name: "[root]",
+ *       dependencies: [
+ *         RichTextExtension,
+ *         HistoryExtension,
+ *         configExtension(EmojiExtension, { emojiBaseUrl }),
+ *       ],
+ *     });
+ *   }, [emojiBaseUrl]);
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ *
+ * @example
+ * Incorrect usage with unstable extension
+ * ```tsx
+ * function MyBrokenEditor({ emojiBaseUrl }) {
+ *   // This argument is not stable, the editor is re-created every render and
+ *   // all state is lost!
+ *   const extension = defineExtension({
+ *     name: "[root]",
+ *     dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
+ *   });
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ */
+export declare function LexicalExtensionComposer({ extension, children, contentEditable, }: LexicalExtensionComposerProps): import("react/jsx-runtime").JSX.Element;

package/LexicalExtensionComposer.dev.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+var lexicalExtension = require('@ekz/lexical-extension');
+var ReactExtension = require('@ekz/lexical-react/ReactExtension');
+var ReactProviderExtension = require('@ekz/lexical-react/ReactProviderExtension');
+var lexical = require('@ekz/lexical');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * The equivalent of LexicalComposer for an extension. Make sure that your extension
+ * argument is stable (e.g. using module scope or useMemo) so
+ * that you are not re-creating the editor on every render!
+ *
+ * @example
+ * Module scoped extension
+ * ```tsx
+ * const extension = defineExtension({
+ *   name: "[root]",
+ *   dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
+ * });
+ * function MyEditor({ children }) {
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ *
+ * @example
+ * useMemo extension
+ * ```tsx
+ * function MyEditor({ emojiBaseUrl, children }) {
+ *   const extension = useMemo(() => {
+ *     return defineExtension({
+ *       name: "[root]",
+ *       dependencies: [
+ *         RichTextExtension,
+ *         HistoryExtension,
+ *         configExtension(EmojiExtension, { emojiBaseUrl }),
+ *       ],
+ *     });
+ *   }, [emojiBaseUrl]);
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ *
+ * @example
+ * Incorrect usage with unstable extension
+ * ```tsx
+ * function MyBrokenEditor({ emojiBaseUrl }) {
+ *   // This argument is not stable, the editor is re-created every render and
+ *   // all state is lost!
+ *   const extension = defineExtension({
+ *     name: "[root]",
+ *     dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
+ *   });
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ */
+function LexicalExtensionComposer({
+  extension,
+  children,
+  contentEditable
+}) {
+  const editor = react.useMemo(() => {
+    const builder = lexicalExtension.LexicalBuilder.fromExtensions([ReactProviderExtension.ReactProviderExtension, lexical.configExtension(ReactExtension.ReactExtension, contentEditable === undefined ? {} : {
+      contentEditable
+    }), extension]);
+    return builder.buildEditor();
+  }, [contentEditable, extension]);
+  react.useEffect(() => {
+    // Strict mode workaround
+    let didMount = false;
+    queueMicrotask(() => {
+      didMount = true;
+    });
+    return () => {
+      if (didMount) {
+        editor.dispose();
+      }
+    };
+  }, [editor]);
+  const {
+    Component
+  } = lexicalExtension.getExtensionDependencyFromEditor(editor, ReactExtension.ReactExtension).output;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    children: children
+  });
+}
+
+exports.LexicalExtensionComposer = LexicalExtensionComposer;