@lexical/react 0.2.3 → 0.2.4

package/LexicalBlockWithAlignableContents.dev.js

@@ -0,0 +1,102 @@
+/**
+ * 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('@lexical/react/LexicalComposerContext');
+var LexicalDecoratorBlockNode = require('@lexical/react/LexicalDecoratorBlockNode');
+var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var React = require('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.
+ *
+ * 
+ */
+function BlockWithAlignableContents({
+  children,
+  format,
+  nodeKey
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const ref = React.useRef();
+  const onDelete = React.useCallback(payload => {
+    if (isSelected && lexical.$isNodeSelection(lexical.$getSelection())) {
+      const event = payload;
+      event.preventDefault();
+      editor.update(() => {
+        const node = lexical.$getNodeByKey(nodeKey);
+
+        if (lexical.$isDecoratorNode(node) && node.isTopLevel()) {
+          node.remove();
+        }
+
+        setSelected(false);
+      });
+    }
+
+    return false;
+  }, [editor, isSelected, nodeKey, setSelected]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(lexical.FORMAT_ELEMENT_COMMAND, payload => {
+      if (isSelected) {
+        const selection = lexical.$getSelection();
+
+        if (lexical.$isNodeSelection(selection)) {
+          const node = lexical.$getNodeByKey(nodeKey);
+
+          if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
+            node.setFormat(payload);
+          }
+        } else if (lexical.$isRangeSelection(selection)) {
+          const nodes = selection.getNodes();
+
+          for (const node of nodes) {
+            if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
+              node.setFormat(payload);
+            } else {
+              const element = utils.$getNearestBlockElementAncestorOrThrow(node);
+              element.setFormat(payload);
+            }
+          }
+        }
+
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.CLICK_COMMAND, payload => {
+      const event = payload;
+      event.preventDefault();
+
+      if (event.target === ref.current) {
+        if (!event.shiftKey) {
+          clearSelection();
+        }
+
+        setSelected(!isSelected);
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_DELETE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW));
+  }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `embed-block${isSelected ? ' focused' : ''}`,
+    ref: ref,
+    style: {
+      textAlign: format
+    }
+  }, children);
+}
+
+exports.BlockWithAlignableContents = BlockWithAlignableContents;

package/LexicalBlockWithAlignableContents.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'
+const LexicalBlockWithAlignableContents = process.env.NODE_ENV === 'development' ? require('./LexicalBlockWithAlignableContents.dev.js') : require('./LexicalBlockWithAlignableContents.prod.js')
+module.exports = LexicalBlockWithAlignableContents;

package/LexicalBlockWithAlignableContents.js.flow

@@ -0,0 +1,24 @@
+/**
+ * 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 {
+  ElementFormatType,
+  LexicalEditor,
+  EditorThemeClasses,
+  LexicalNode,
+  NodeKey,
+} from 'lexical';
+
+type Props = $ReadOnly<{
+  children: React$Node,
+  format: ?ElementFormatType,
+  nodeKey: NodeKey,
+}>;
+
+declare export function BlockWithAlignableContents(Props): React$Node;

package/LexicalBlockWithAlignableContents.prod.js

@@ -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.
+ */
+var a=require("@lexical/react/LexicalComposerContext"),h=require("@lexical/react/LexicalDecoratorBlockNode"),m=require("@lexical/react/useLexicalNodeSelection"),n=require("@lexical/utils"),r=require("lexical"),t=require("react");
+exports.BlockWithAlignableContents=function({children:u,format:v,nodeKey:g}){const [d]=a.useLexicalComposerContext(),[e,k,p]=m(g),q=t.useRef(),l=t.useCallback(b=>{e&&r.$isNodeSelection(r.$getSelection())&&(b.preventDefault(),d.update(()=>{const c=r.$getNodeByKey(g);r.$isDecoratorNode(c)&&c.isTopLevel()&&c.remove();k(!1)}));return!1},[d,e,g,k]);t.useEffect(()=>n.mergeRegister(d.registerCommand(r.FORMAT_ELEMENT_COMMAND,b=>{if(e){var c=r.$getSelection();if(r.$isNodeSelection(c)){var f=r.$getNodeByKey(g);
+h.$isDecoratorBlockNode(f)&&f.setFormat(b)}else if(r.$isRangeSelection(c)){c=c.getNodes();for(f of c)h.$isDecoratorBlockNode(f)?f.setFormat(b):n.$getNearestBlockElementAncestorOrThrow(f).setFormat(b)}return!0}return!1},r.COMMAND_PRIORITY_LOW),d.registerCommand(r.CLICK_COMMAND,b=>{b.preventDefault();return b.target===q.current?(b.shiftKey||p(),k(!e),!0):!1},r.COMMAND_PRIORITY_LOW),d.registerCommand(r.KEY_DELETE_COMMAND,l,r.COMMAND_PRIORITY_LOW),d.registerCommand(r.KEY_BACKSPACE_COMMAND,l,r.COMMAND_PRIORITY_LOW)),
+[p,d,e,g,l,k]);return t.createElement("div",{className:`embed-block${e?" focused":""}`,ref:q,style:{textAlign:v}},u)};

package/LexicalDecoratorBlockNode.dev.js

@@ -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.
+ */
+'use strict';
+
+var lexical = require('lexical');
+
+/**
+ * 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.
+ *
+ * 
+ */
+class DecoratorBlockNode extends lexical.DecoratorNode {
+  createDOM() {
+    return document.createElement('div');
+  }
+
+  updateDOM() {
+    return false;
+  }
+
+  setFormat(format) {
+    const self = this.getWritable();
+    self.__format = format;
+  }
+
+}
+function $createDecoratorBlockNode() {
+  return new DecoratorBlockNode();
+}
+function $isDecoratorBlockNode(node) {
+  return node instanceof DecoratorBlockNode;
+}
+
+exports.$createDecoratorBlockNode = $createDecoratorBlockNode;
+exports.$isDecoratorBlockNode = $isDecoratorBlockNode;
+exports.DecoratorBlockNode = DecoratorBlockNode;

package/LexicalDecoratorBlockNode.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'
+const LexicalDecoratorBlockNode = process.env.NODE_ENV === 'development' ? require('./LexicalDecoratorBlockNode.dev.js') : require('./LexicalDecoratorBlockNode.prod.js')
+module.exports = LexicalDecoratorBlockNode;

package/LexicalDecoratorBlockNode.js.flow

@@ -0,0 +1,23 @@
+/**
+ * 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 {ElementFormatType, LexicalNode, LexicalCommand} from 'lexical';
+
+import {DecoratorNode} from 'lexical';
+
+declare export class DecoratorBlockNode<T> extends DecoratorNode<T> {
+  __format: ?ElementFormatType;
+  createDOM(): HTMLElement;
+  setFormat(format: ElementFormatType): void;
+}
+
+declare export function $createDecoratorBlockNode<T>(): DecoratorBlockNode<T>;
+declare export function $isDecoratorBlockNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof DecoratorBlockNode);

package/LexicalDecoratorBlockNode.prod.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+var a=require("lexical");class c extends a.DecoratorNode{createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(b){this.getWritable().__format=b}}exports.$createDecoratorBlockNode=function(){return new c};exports.$isDecoratorBlockNode=function(b){return b instanceof c};exports.DecoratorBlockNode=c;

package/LexicalHorizontalRuleNode.d.ts

@@ -20,6 +20,6 @@ export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element | null
 export function $createHorizontalRuleNode(): HorizontalRuleNode;
 export function $isHorizontalRuleNode(
   node: LexicalNode | null | undefined,
-): boolean;
+): node is HorizontalRuleNode;
 
 export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;

package/package.json

@@ -8,27 +8,27 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "dependencies": {
-    "@lexical/clipboard": "0.2.3",
-    "@lexical/list": "0.2.3",
-    "@lexical/table": "0.2.3",
-    "@lexical/yjs": "0.2.3",
-    "@lexical/hashtag": "0.2.3",
-    "@lexical/selection": "0.2.3",
-    "@lexical/utils": "0.2.3",
-    "@lexical/dragon": "0.2.3",
-    "@lexical/plain-text": "0.2.3",
-    "@lexical/rich-text": "0.2.3",
-    "@lexical/code": "0.2.3",
-    "@lexical/text": "0.2.3",
-    "@lexical/link": "0.2.3",
-    "@lexical/overflow": "0.2.3",
-    "@lexical/history": "0.2.3",
-    "@lexical/markdown": "0.2.3"
+    "@lexical/clipboard": "0.2.4",
+    "@lexical/list": "0.2.4",
+    "@lexical/table": "0.2.4",
+    "@lexical/yjs": "0.2.4",
+    "@lexical/hashtag": "0.2.4",
+    "@lexical/selection": "0.2.4",
+    "@lexical/utils": "0.2.4",
+    "@lexical/dragon": "0.2.4",
+    "@lexical/plain-text": "0.2.4",
+    "@lexical/rich-text": "0.2.4",
+    "@lexical/code": "0.2.4",
+    "@lexical/text": "0.2.4",
+    "@lexical/link": "0.2.4",
+    "@lexical/overflow": "0.2.4",
+    "@lexical/history": "0.2.4",
+    "@lexical/markdown": "0.2.4"
   },
   "peerDependencies": {
-    "lexical": "0.2.3",
+    "lexical": "0.2.4",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },