@lexical/react 0.3.0 → 0.3.3

package/LexicalCheckListPlugin.dev.js

@@ -46,7 +46,7 @@ function CheckListPlugin() {
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_SPACE_COMMAND, event => {
       const activeItem = getActiveCheckListItem();
 
-      if (activeItem != null) {
+      if (activeItem != null && !editor.isReadOnly()) {
         editor.update(() => {
           const listItemNode = lexical.$getNearestNodeFromDOMNode(activeItem);
 
@@ -139,7 +139,7 @@ function handleClick(event) {
   handleCheckItemEvent(event, () => {
     const editor = findEditor(event.target);
 
-    if (editor != null) {
+    if (editor != null && !editor.isReadOnly()) {
       editor.update(() => {
         const node = lexical.$getNearestNodeFromDOMNode(event.target);
 

package/LexicalCheckListPlugin.prod.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var e=require("@lexical/list"),g=require("@lexical/react/LexicalComposerContext"),k=require("@lexical/utils"),l=require("lexical"),m=require("react");let n=0;function p(){0===n++&&(document.addEventListener("click",q),document.addEventListener("pointerdown",r));return()=>{0===--n&&(document.removeEventListener("click",q),document.removeEventListener("pointerdown",r))}}
-function t(a,c){let b=a.target;if(b instanceof HTMLElement){var d=b.firstChild;(null==d||"UL"!==d.tagName&&"OL"!==d.tagName)&&(d=b.parentNode)&&"check"===d.__lexicalListType&&(a=a.pageX,d=b.getBoundingClientRect(),("rtl"===b.dir?a<d.right&&a>d.right-20:a>d.left&&a<d.left+20)&&c())}}function q(a){t(a,()=>{let c=u(a.target);null!=c&&c.update(()=>{let b=l.$getNearestNodeFromDOMNode(a.target);e.$isListItemNode(b)&&(a.target.focus(),b.toggleChecked())})})}function r(a){t(a,()=>{a.preventDefault()})}
-function u(a){for(;a;){if(a.__lexicalEditor)return a.__lexicalEditor;a=a.parentNode}return null}function v(){let a=document.activeElement;return null!=a&&"LI"===a.tagName&&null!=a.parentNode&&"check"===a.parentNode.__lexicalListType?a:null}
+function t(a,c){let b=a.target;if(b instanceof HTMLElement){var d=b.firstChild;(null==d||"UL"!==d.tagName&&"OL"!==d.tagName)&&(d=b.parentNode)&&"check"===d.__lexicalListType&&(a=a.pageX,d=b.getBoundingClientRect(),("rtl"===b.dir?a<d.right&&a>d.right-20:a>d.left&&a<d.left+20)&&c())}}function q(a){t(a,()=>{let c=u(a.target);null==c||c.isReadOnly()||c.update(()=>{let b=l.$getNearestNodeFromDOMNode(a.target);e.$isListItemNode(b)&&(a.target.focus(),b.toggleChecked())})})}
+function r(a){t(a,()=>{a.preventDefault()})}function u(a){for(;a;){if(a.__lexicalEditor)return a.__lexicalEditor;a=a.parentNode}return null}function v(){let a=document.activeElement;return null!=a&&"LI"===a.tagName&&null!=a.parentNode&&"check"===a.parentNode.__lexicalListType?a:null}
 function w(a,c){let b=c?a.getPreviousSibling():a.getNextSibling();for(;null==b&&e.$isListItemNode(a);)a=a.getParentOrThrow().getParent(),null!=a&&(b=c?a.getPreviousSibling():a.getNextSibling());for(;e.$isListItemNode(b);){a=c?b.getLastChild():b.getFirstChild();if(!e.$isListNode(a))return b;b=c?a.getLastChild():a.getFirstChild()}return null}
 function x(a,c,b){let d=v();null!=d&&c.update(()=>{var f=l.$getNearestNodeFromDOMNode(d);if(e.$isListItemNode(f)&&(f=w(f,b),null!=f)){f.selectStart();let h=c.getElementByKey(f.__key);null!=h&&(a.preventDefault(),setTimeout(()=>{h.focus()},0))}});return!1}
 exports.CheckListPlugin=function(){let [a]=g.useLexicalComposerContext();m.useEffect(()=>k.mergeRegister(a.registerCommand(e.INSERT_CHECK_LIST_COMMAND,()=>{e.insertList(a,"check");return!0},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_DOWN_COMMAND,c=>x(c,a,!1),l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_UP_COMMAND,c=>x(c,a,!0),l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ESCAPE_COMMAND,()=>{if(null!=v()){let c=a.getRootElement();null!=c&&c.focus();return!0}return!1},l.COMMAND_PRIORITY_LOW),
-a.registerCommand(l.KEY_SPACE_COMMAND,c=>{let b=v();return null!=b?(a.update(()=>{let d=l.$getNearestNodeFromDOMNode(b);e.$isListItemNode(d)&&(c.preventDefault(),d.toggleChecked())}),!0):!1},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_LEFT_COMMAND,c=>a.getEditorState().read(()=>{var b=l.$getSelection();if(l.$isRangeSelection(b)&&b.isCollapsed()){var {anchor:d}=b;if((b="element"===d.type)||0===d.offset){d=d.getNode();let f=k.$findMatchingParent(d,h=>l.$isElementNode(h)&&!h.isInline());if(e.$isListItemNode(f)&&
-(b||f.getFirstDescendant()===d)&&(b=a.getElementByKey(f.__key),null!=b&&document.activeElement!==b))return b.focus(),c.preventDefault(),!0}}return!1}),l.COMMAND_PRIORITY_LOW),p()));return null}
+a.registerCommand(l.KEY_SPACE_COMMAND,c=>{let b=v();return null==b||a.isReadOnly()?!1:(a.update(()=>{let d=l.$getNearestNodeFromDOMNode(b);e.$isListItemNode(d)&&(c.preventDefault(),d.toggleChecked())}),!0)},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_LEFT_COMMAND,c=>a.getEditorState().read(()=>{var b=l.$getSelection();if(l.$isRangeSelection(b)&&b.isCollapsed()){var {anchor:d}=b;if((b="element"===d.type)||0===d.offset){d=d.getNode();let f=k.$findMatchingParent(d,h=>l.$isElementNode(h)&&!h.isInline());
+if(e.$isListItemNode(f)&&(b||f.getFirstDescendant()===d)&&(b=a.getElementByKey(f.__key),null!=b&&document.activeElement!==b))return b.focus(),c.preventDefault(),!0}}return!1}),l.COMMAND_PRIORITY_LOW),p()));return null}

package/LexicalCollaborationPlugin.d.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import {WebsocketProvider} from 'y-websocket';
+import type {Provider} from '@lexical/yjs';
 import type {Doc, RelativePosition} from 'yjs';
 
 export type UserState = {
@@ -31,7 +31,7 @@ type CollaborationContextType = {
 };
 export function CollaborationPlugin(arg0: {
   id: string;
-  providerFactory(id: string, yjsDocMap: Map<string, Doc>): WebsocketProvider;
+  providerFactory(id: string, yjsDocMap: Map<string, Doc>): Provider;
   shouldBootstrap: boolean;
   username?: string;
 }): JSX.Element | null;

package/LexicalComposer.d.ts

@@ -11,6 +11,7 @@ import type {EditorThemeClasses, LexicalEditor, LexicalNode} from 'lexical';
 
 type Props = {
   initialConfig: {
+    namespace: string;
     editor__DEPRECATED?: LexicalEditor | null;
     readOnly?: boolean;
     nodes?: Array<Class<LexicalNode>>;

package/LexicalComposer.dev.js

@@ -43,6 +43,7 @@ function LexicalComposer({
   const composerContext = React.useMemo(() => {
     const {
       theme,
+      namespace,
       editor__DEPRECATED: initialEditor,
       nodes,
       onError
@@ -52,6 +53,7 @@ function LexicalComposer({
 
     if (editor === null) {
       const newEditor = lexical.createEditor({
+        namespace,
         nodes,
         onError: error => onError(error, newEditor),
         readOnly: true,

package/LexicalComposer.js.flow

@@ -13,7 +13,7 @@ type Props = {
   initialConfig: $ReadOnly<{
     editor__DEPRECATED?: LexicalEditor | null,
     readOnly?: boolean,
-    namespace?: string,
+    namespace: string,
     nodes?: $ReadOnlyArray<Class<LexicalNode>>,
     theme?: EditorThemeClasses,
     onError: (error: Error, editor: LexicalEditor) => void,

package/LexicalComposer.prod.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var a=require("@lexical/react/LexicalComposerContext"),e=require("lexical"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
-exports.LexicalComposer=function({initialConfig:f,children:m}){let h=k.useMemo(()=>{const {theme:b,editor__DEPRECATED:c,nodes:n,onError:p}=f,q=a.createLexicalComposerContext(null,b);let d=c||null;if(null===d){const g=e.createEditor({nodes:n,onError:r=>p(r,g),readOnly:!0,theme:b});d=g}return[d,q]},[]);l(()=>{let b=f.readOnly,[c]=h;c.setReadOnly(b||!1)},[]);return k.createElement(a.LexicalComposerContext.Provider,{value:h},m)}
+exports.LexicalComposer=function({initialConfig:f,children:m}){let h=k.useMemo(()=>{const {theme:b,namespace:c,editor__DEPRECATED:n,nodes:p,onError:q}=f,r=a.createLexicalComposerContext(null,b);let d=n||null;if(null===d){const g=e.createEditor({namespace:c,nodes:p,onError:t=>q(t,g),readOnly:!0,theme:b});d=g}return[d,r]},[]);l(()=>{let b=f.readOnly,[c]=h;c.setReadOnly(b||!1)},[]);return k.createElement(a.LexicalComposerContext.Provider,{value:h},m)}

package/LexicalContentEditable.js.flow

@@ -24,7 +24,7 @@ export type Props = $ReadOnly<{
   className?: string,
   readOnly?: boolean,
   role?: string,
-  style?: StyleSheetList,
+  style?: $Shape<{[string]: string | number}>,
   spellCheck?: boolean,
   tabIndex?: number,
   testid?: string,

package/LexicalHorizontalRuleNode.dev.js

@@ -31,21 +31,6 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
     return new HorizontalRuleNode(node.__key);
   }
 
-  static importDOM() {
-    return {
-      hr: node => ({
-        conversion: convertHorizontalRuleElement,
-        priority: 0
-      })
-    };
-  }
-
-  exportDOM() {
-    return {
-      element: document.createElement('hr')
-    };
-  }
-
   static importJSON(serializedNode) {
     return $createHorizontalRuleNode();
   }
@@ -80,13 +65,6 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
   }
 
 }
-
-function convertHorizontalRuleElement() {
-  return {
-    node: $createHorizontalRuleNode()
-  };
-}
-
 function $createHorizontalRuleNode() {
   return new HorizontalRuleNode();
 }

package/LexicalHorizontalRuleNode.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var b=require("lexical"),c=require("react");let d=b.createCommand();function e(){return c.createElement("hr",null)}
-class f extends b.DecoratorNode{static getType(){return"horizontalrule"}static clone(a){return new f(a.__key)}static importDOM(){return{hr:()=>({conversion:g,priority:0})}}exportDOM(){return{element:document.createElement("hr")}}static importJSON(){return h()}exportJSON(){return{type:"horizontalrule",version:1}}createDOM(){let a=document.createElement("div");a.style.display="contents";return a}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return c.createElement(e,
-null)}}function g(){return{node:h()}}function h(){return new f}exports.$createHorizontalRuleNode=h;exports.$isHorizontalRuleNode=function(a){return a instanceof f};exports.HorizontalRuleNode=f;exports.INSERT_HORIZONTAL_RULE_COMMAND=d
+class f extends b.DecoratorNode{static getType(){return"horizontalrule"}static clone(a){return new f(a.__key)}static importJSON(){return g()}exportJSON(){return{type:"horizontalrule",version:1}}createDOM(){let a=document.createElement("div");a.style.display="contents";return a}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return c.createElement(e,null)}}function g(){return new f}exports.$createHorizontalRuleNode=g;
+exports.$isHorizontalRuleNode=function(a){return a instanceof f};exports.HorizontalRuleNode=f;exports.INSERT_HORIZONTAL_RULE_COMMAND=d

package/LexicalNestedComposer.dev.js

@@ -41,6 +41,7 @@ function LexicalNestedComposer({
 
     initialEditor._parentEditor = parentEditor;
     initialEditor._nodes = parentEditor._nodes;
+    initialEditor._config.namespace = parentEditor._config.namespace;
     return [initialEditor, context];
   }, // We only do this for init
   // eslint-disable-next-line react-hooks/exhaustive-deps

package/LexicalNestedComposer.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var c=require("@lexical/react/LexicalCollaborationPlugin"),d=require("@lexical/react/LexicalComposerContext"),h=require("react");
-exports.LexicalNestedComposer=function({initialEditor:a,children:k,initialTheme:l}){let e=h.useContext(d.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #9; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let p=h.useMemo(()=>{const [g,m]=e,f=l||m.getTheme()||void 0,n=d.createLexicalComposerContext(e,f);void 0!==f&&(a._config.theme=f);a._parentEditor=g;a._nodes=g._nodes;return[a,n]},[]);var {yjsDocMap:b}=
-c.useCollaborationContext();let q=void 0!==b.get("main");b=b.has(a.getKey());return h.createElement(d.LexicalComposerContext.Provider,{value:p},!q||b?k:null)}
+exports.LexicalNestedComposer=function({initialEditor:a,children:k,initialTheme:l}){let e=h.useContext(d.LexicalComposerContext);if(null==e)throw Error("Minified Lexical error #9; see codes.json for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let p=h.useMemo(()=>{const [f,m]=e,g=l||m.getTheme()||void 0,n=d.createLexicalComposerContext(e,g);void 0!==g&&(a._config.theme=g);a._parentEditor=f;a._nodes=f._nodes;a._config.namespace=f._config.namespace;
+return[a,n]},[]);var {yjsDocMap:b}=c.useCollaborationContext();let q=void 0!==b.get("main");b=b.has(a.getKey());return h.createElement(d.LexicalComposerContext.Provider,{value:p},!q||b?k:null)}

package/LexicalPlainTextPlugin.d.ts

@@ -6,9 +6,9 @@
  *
  */
 
-import type {EditorState} from 'lexical';
+import {InitialEditorStateType} from '@lexical/plain-text';
+import type {EditorState, LexicalEditor} from 'lexical';
 
-type InitialEditorStateType = null | string | EditorState | (() => void);
 export function PlainTextPlugin(arg0: {
   contentEditable: JSX.Element | null;
   initialEditorState?: InitialEditorStateType;

package/LexicalPlainTextPlugin.js.flow

@@ -7,9 +7,13 @@
  * @flow strict
  */
 
-import type {EditorState} from 'lexical';
+import type {EditorState, LexicalEditor} from 'lexical';
 
-type InitialEditorStateType = null | string | EditorState | (() => void);
+type InitialEditorStateType =
+  | null
+  | string
+  | EditorState
+  | ((editor: LexicalEditor) => void);
 
 declare export function PlainTextPlugin({
   contentEditable: React$Node,

package/LexicalRichTextPlugin.d.ts

@@ -6,9 +6,9 @@
  *
  */
 
-import type {EditorState} from 'lexical';
+import {InitialEditorStateType} from '@lexical/rich-text';
+import type {EditorState, LexicalEditor} from 'lexical';
 
-type InitialEditorStateType = null | string | EditorState | (() => void);
 export function RichTextPlugin(arg0: {
   contentEditable: JSX.Element | null;
   initialEditorState?: InitialEditorStateType;

package/LexicalRichTextPlugin.js.flow

@@ -7,9 +7,13 @@
  * @flow strict
  */
 
-import type {EditorState} from 'lexical';
+import type {EditorState, LexicalEditor} from 'lexical';
 
-type InitialEditorStateType = null | string | EditorState | (() => void);
+type InitialEditorStateType =
+  | null
+  | string
+  | EditorState
+  | ((editor: LexicalEditor) => void);
 
 declare export function RichTextPlugin({
   contentEditable: React$Node,

package/README.md

@@ -17,10 +17,10 @@ import {$getRoot, $getSelection} from 'lexical';
 import {useEffect} from 'react';
 
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
-import {LexicalPlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
-import {LexicalContentEditable} from '@lexical/react/LexicalContentEditable';
+import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import {LexicalOnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
+import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 const theme = {
@@ -66,12 +66,11 @@ function onError(error) {
 
 function Editor() {
   const initialConfig = {
+    namespace: 'MyEditor',
     theme,
     onError,
   };
 
-  
-
 return (
     <LexicalComposer initialConfig={initialConfig}>
       <LexicalPlainTextPlugin

package/package.json

@@ -8,28 +8,28 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "dependencies": {
-    "@lexical/clipboard": "0.3.0",
-    "@lexical/list": "0.3.0",
-    "@lexical/table": "0.3.0",
-    "@lexical/yjs": "0.3.0",
-    "@lexical/hashtag": "0.3.0",
-    "@lexical/selection": "0.3.0",
-    "@lexical/utils": "0.3.0",
-    "@lexical/dragon": "0.3.0",
-    "@lexical/plain-text": "0.3.0",
-    "@lexical/rich-text": "0.3.0",
-    "@lexical/code": "0.3.0",
-    "@lexical/text": "0.3.0",
-    "@lexical/link": "0.3.0",
-    "@lexical/overflow": "0.3.0",
-    "@lexical/history": "0.3.0",
-    "@lexical/markdown": "0.3.0",
-    "@lexical/mark": "0.3.0"
+    "@lexical/clipboard": "0.3.3",
+    "@lexical/code": "0.3.3",
+    "@lexical/dragon": "0.3.3",
+    "@lexical/hashtag": "0.3.3",
+    "@lexical/history": "0.3.3",
+    "@lexical/link": "0.3.3",
+    "@lexical/list": "0.3.3",
+    "@lexical/mark": "0.3.3",
+    "@lexical/markdown": "0.3.3",
+    "@lexical/overflow": "0.3.3",
+    "@lexical/plain-text": "0.3.3",
+    "@lexical/rich-text": "0.3.3",
+    "@lexical/selection": "0.3.3",
+    "@lexical/table": "0.3.3",
+    "@lexical/text": "0.3.3",
+    "@lexical/utils": "0.3.3",
+    "@lexical/yjs": "0.3.3"
   },
   "peerDependencies": {
-    "lexical": "0.3.0",
+    "lexical": "0.3.3",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },
@@ -37,5 +37,8 @@
     "type": "git",
     "url": "https://github.com/facebook/lexical",
     "directory": "packages/lexical-react"
+  },
+  "devDependencies": {
+    "utility-types": "^3.10.0"
   }
 }