@examind/block-editor 0.1.35 → 0.1.37

package/dist/index.mjs

@@ -950,27 +950,65 @@ function AlignCellsAction() {
   return /* @__PURE__ */ jsx15(Fragment2, {});
 }
 
+// src/utils/$selectAdjacentCell.ts
+import {
+  $isTableNode as $isTableNode2,
+  $isTableRowNode
+} from "@lexical/table";
+import { $findMatchingParent } from "@lexical/utils";
+import { $isElementNode } from "lexical";
+function $selectAdjacentCell(tableCellNode, direction) {
+  const siblingMethod = direction === "next" ? "getNextSibling" : "getPreviousSibling";
+  const childMethod = direction === "next" ? "getFirstChild" : "getLastChild";
+  const sibling = tableCellNode[siblingMethod]();
+  if ($isElementNode(sibling)) {
+    return sibling.selectEnd();
+  }
+  const parentRow = $findMatchingParent(
+    tableCellNode,
+    $isTableRowNode
+  );
+  if (!parentRow) {
+    throw Error("selectAdjacentCell: Cell not in table row");
+  }
+  for (let nextRow = parentRow[siblingMethod](); $isTableRowNode(nextRow); nextRow = nextRow[siblingMethod]()) {
+    const child = nextRow[childMethod]();
+    if ($isElementNode(child)) {
+      return child.selectEnd();
+    }
+  }
+  const parentTable = $findMatchingParent(parentRow, $isTableNode2);
+  if (!parentTable) {
+    throw Error("selectAdjacentCell: Row not in table");
+  }
+  return direction === "next" ? parentTable.selectNext() : parentTable.selectPrevious();
+}
+
 // src/plugins/SmartTablePlugin/SmartTablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext15 } from "@lexical/react/LexicalComposerContext";
 import {
+  $findCellNode,
   $isTableCellNode as $isTableCellNode3,
   $isTableSelection as $isTableSelection3,
-  TableNode as TableNode2
+  TableNode as TableNode3
 } from "@lexical/table";
 import { mergeRegister as mergeRegister2 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode3,
   $getNodeByKey as $getNodeByKey13,
   $getSelection as $getSelection3,
+  $isRangeSelection,
+  COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR2,
   createCommand as createCommand3,
+  KEY_TAB_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useEffect as useEffect22, useRef as useRef13, useState as useState3 } from "react";
 
 // src/plugins/SmartTablePlugin/AddNewColumnAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode2 } from "@lexical/table";
+import { $isTableNode as $isTableNode3 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey4 } from "lexical";
 import { useEffect as useEffect11 } from "react";
 
@@ -1269,7 +1307,7 @@ function AddNewColumnAction() {
     if (nodeKey) {
       editor.update(() => {
         const targetNode = $getNodeByKey4(nodeKey);
-        if ($isTableNode2(targetNode)) {
+        if ($isTableNode3(targetNode)) {
           let columnIndex = -2;
           if (addDirection === "before") {
             columnIndex = currentColumnIndex - 1;
@@ -1305,7 +1343,7 @@ function AddNewColumnAction() {
 // src/plugins/SmartTablePlugin/AddNewRowAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import {
-  $isTableNode as $isTableNode3
+  $isTableNode as $isTableNode4
 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey5 } from "lexical";
 import { useEffect as useEffect12 } from "react";
@@ -1318,32 +1356,46 @@ function AddNewRowAction() {
       detail: { nodeKey, currentRowIndex, addDirection }
     } = e;
     if (nodeKey) {
-      editor.update(() => {
-        const targetNode = $getNodeByKey5(nodeKey);
-        if ($isTableNode3(targetNode)) {
-          let rowIndex = -2;
-          if (addDirection === "before") {
-            rowIndex = currentRowIndex - 1;
-          } else if (addDirection === "after") {
-            rowIndex = currentRowIndex;
-          }
-          const newTableNode = $addNewRowToTable(
-            targetNode,
-            rowIndex
-          );
-          newTableNode.setRowStriping(targetNode.getRowStriping());
-          targetNode.replace(newTableNode);
-          const tableRowNodes = newTableNode.getChildren();
-          if (tableRowNodes.length > currentRowIndex) {
-            const tableCellNodes = tableRowNodes[currentRowIndex].getChildren();
-            if (tableCellNodes.length > 0) {
-              tableCellNodes[0].selectStart();
+      let newTableNode = void 0;
+      editor.update(
+        () => {
+          const targetNode = $getNodeByKey5(nodeKey);
+          if ($isTableNode4(targetNode)) {
+            let rowIndex = -2;
+            if (addDirection === "before") {
+              rowIndex = currentRowIndex - 1;
+            } else if (addDirection === "after") {
+              rowIndex = currentRowIndex;
             }
-          } else {
-            newTableNode.selectStart();
+            newTableNode = $addNewRowToTable(targetNode, rowIndex);
+            newTableNode.setRowStriping(targetNode.getRowStriping());
+            targetNode.replace(newTableNode);
+          }
+        },
+        {
+          onUpdate: () => {
+            editor.update(() => {
+              if (newTableNode) {
+                const tableRowNodes = newTableNode.getChildren();
+                if (tableRowNodes.length > currentRowIndex) {
+                  let rowIndex = -1;
+                  if (addDirection === "before") {
+                    rowIndex = currentRowIndex;
+                  } else if (addDirection === "after") {
+                    rowIndex = currentRowIndex + 1;
+                  }
+                  const tableCellNodes = tableRowNodes[rowIndex].getChildren();
+                  if (tableCellNodes.length > 0) {
+                    tableCellNodes[0].selectStart();
+                  }
+                } else {
+                  newTableNode.selectStart();
+                }
+              }
+            });
           }
         }
-      });
+      );
     }
   };
   useEffect12(() => {
@@ -1362,12 +1414,12 @@ function AddNewRowAction() {
 }
 
 // src/utils/$selectLastDescendant.ts
-import { $isElementNode, $isTextNode } from "lexical";
+import { $isElementNode as $isElementNode2, $isTextNode } from "lexical";
 function $selectLastDescendant(node) {
   const lastDescendant = node.getLastDescendant();
   if ($isTextNode(lastDescendant)) {
     lastDescendant.select();
-  } else if ($isElementNode(lastDescendant)) {
+  } else if ($isElementNode2(lastDescendant)) {
     lastDescendant.selectEnd();
   } else if (lastDescendant !== null) {
     lastDescendant.selectNext();
@@ -1378,7 +1430,7 @@ function $selectLastDescendant(node) {
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import {
   $isTableCellNode as $isTableCellNode2,
-  $isTableNode as $isTableNode4,
+  $isTableNode as $isTableNode5,
   $isTableSelection as $isTableSelection2,
   $mergeCells
 } from "@lexical/table";
@@ -1395,7 +1447,7 @@ function MergeCellsAction() {
     if (nodeKey) {
       editor.update(() => {
         const targetNode = $getNodeByKey6(nodeKey);
-        if ($isTableNode4(targetNode)) {
+        if ($isTableNode5(targetNode)) {
           const selection = $getSelection2();
           if ($isTableSelection2(selection)) {
             const nodes = selection.getNodes();
@@ -1428,7 +1480,7 @@ function MergeCellsAction() {
 
 // src/plugins/SmartTablePlugin/MoveColumnAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode5 } from "@lexical/table";
+import { $isTableNode as $isTableNode6 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey7 } from "lexical";
 import { useEffect as useEffect14 } from "react";
 import { Fragment as Fragment6, jsx as jsx19 } from "react/jsx-runtime";
@@ -1442,7 +1494,7 @@ function MoveColumnAction() {
     if (nodeKey && currentColumnIndex !== newColumnIndex) {
       editor.update(() => {
         const targetNode = $getNodeByKey7(nodeKey);
-        if ($isTableNode5(targetNode)) {
+        if ($isTableNode6(targetNode)) {
           const newTableNode = $moveColumnInTable(
             targetNode,
             currentColumnIndex,
@@ -1472,7 +1524,7 @@ function MoveColumnAction() {
 
 // src/plugins/SmartTablePlugin/MoveRowAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode6 } from "@lexical/table";
+import { $isTableNode as $isTableNode7 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey8 } from "lexical";
 import { useEffect as useEffect15 } from "react";
 import { Fragment as Fragment7, jsx as jsx20 } from "react/jsx-runtime";
@@ -1486,7 +1538,7 @@ function MoveRowAction() {
     if (nodeKey && currentRowIndex !== newRowIndex) {
       editor.update(() => {
         const targetNode = $getNodeByKey8(nodeKey);
-        if ($isTableNode6(targetNode)) {
+        if ($isTableNode7(targetNode)) {
           const newTableNode = $moveRowInTable(
             targetNode,
             currentRowIndex,
@@ -1524,7 +1576,7 @@ function useAlert() {
 
 // src/plugins/SmartTablePlugin/RemoveColumnAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext11 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode7 } from "@lexical/table";
+import { $isTableNode as $isTableNode8 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey9 } from "lexical";
 import { useEffect as useEffect17 } from "react";
 import { Fragment as Fragment8, jsx as jsx21 } from "react/jsx-runtime";
@@ -1539,7 +1591,7 @@ function RemoveColumnAction() {
     if (nodeKey) {
       editor.update(() => {
         const targetNode = $getNodeByKey9(nodeKey);
-        if ($isTableNode7(targetNode)) {
+        if ($isTableNode8(targetNode)) {
           try {
             const newTableNode = $removeColumnFromTable(
               targetNode,
@@ -1576,7 +1628,7 @@ function RemoveColumnAction() {
 
 // src/plugins/SmartTablePlugin/RemoveRowAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext12 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode8 } from "@lexical/table";
+import { $isTableNode as $isTableNode9 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey10 } from "lexical";
 import { useEffect as useEffect18 } from "react";
 import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
@@ -1591,7 +1643,7 @@ function RemoveRowAction() {
     if (nodeKey) {
       editor.update(() => {
         const targetNode = $getNodeByKey10(nodeKey);
-        if ($isTableNode8(targetNode)) {
+        if ($isTableNode9(targetNode)) {
           try {
             const newTableNode = $removeRowFromTable(
               targetNode,
@@ -1628,7 +1680,7 @@ function RemoveRowAction() {
 
 // src/plugins/SmartTablePlugin/ResizeColumnAction.tsx
 import { useLexicalComposerContext as useLexicalComposerContext13 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode9 } from "@lexical/table";
+import { $isTableNode as $isTableNode10 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey11 } from "lexical";
 import { useEffect as useEffect19, useRef as useRef8 } from "react";
 import { Fragment as Fragment10, jsx as jsx23 } from "react/jsx-runtime";
@@ -1644,7 +1696,7 @@ function ResizeColumnAction() {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const targetNode = $getNodeByKey11(nodeKey);
-        if ($isTableNode9(targetNode)) {
+        if ($isTableNode10(targetNode)) {
           const indexKey = `${nodeKey}_${currentColumnIndex}`;
           let columnWidths = [...targetNode.getColWidths() || []];
           if (columnWidths.length === 0) {
@@ -1669,7 +1721,7 @@ function ResizeColumnAction() {
     if (nodeKey) {
       editor.update(() => {
         const targetNode = $getNodeByKey11(nodeKey);
-        if ($isTableNode9(targetNode)) {
+        if ($isTableNode10(targetNode)) {
           const indexKey = `${nodeKey}_${currentColumnIndex}`;
           const prevWidths = currentlyResizedNodesRef.current[indexKey];
           if (prevWidths) {
@@ -2070,7 +2122,7 @@ import { useMemo as useMemo4 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext14 } from "@lexical/react/LexicalComposerContext";
 import {
   $createTableSelection,
-  $isTableNode as $isTableNode10,
+  $isTableNode as $isTableNode11,
   $unmergeCell
 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey12, $setSelection } from "lexical";
@@ -2087,7 +2139,7 @@ function UnmergeCellAction() {
       editor.update(
         () => {
           const targetNode = $getNodeByKey12(nodeKey);
-          if ($isTableNode10(targetNode)) {
+          if ($isTableNode11(targetNode)) {
             const rows = targetNode.getChildren();
             if (rows.length > rowIndex) {
               const foundRow = rows[rowIndex];
@@ -2110,7 +2162,7 @@ function UnmergeCellAction() {
           onUpdate: () => {
             editor.update(() => {
               const targetNode = $getNodeByKey12(nodeKey);
-              if ($isTableNode10(targetNode)) {
+              if ($isTableNode11(targetNode)) {
                 const rows = targetNode.getChildren();
                 if (rows.length > rowIndex) {
                   const foundRow = rows[rowIndex];
@@ -3250,6 +3302,7 @@ function SmartTablePlugin() {
       let isHeader = false;
       let rowIndex = 0;
       let rowElementKey;
+      let lastCellElement = null;
       for (const rowElement of foundTableRowElements) {
         rowElementKey = `${nodeKey}:${rowIndex}`;
         let cellElements = rowElement.getElementsByTagName("td");
@@ -3279,6 +3332,8 @@ function SmartTablePlugin() {
             handleColumnMouseLeave
           );
           elementsMapRef.current[cellElementKey] = new WeakRef(cellElement);
+          cellElement.removeAttribute("data-editor-table-last-cell");
+          lastCellElement = cellElement;
           columnIndex++;
         }
         if (rowElement.rowIndex >= (isHeader ? 1 : 0)) {
@@ -3303,6 +3358,12 @@ function SmartTablePlugin() {
         }
         rowIndex++;
       }
+      if (lastCellElement) {
+        lastCellElement.setAttribute(
+          "data-editor-table-last-cell",
+          "true"
+        );
+      }
     }
   }
   useEffect22(() => {
@@ -3377,7 +3438,7 @@ function SmartTablePlugin() {
         COMMAND_PRIORITY_EDITOR2
       ),
       editor.registerMutationListener(
-        TableNode2,
+        TableNode3,
         (mutatedNodes) => {
           for (const [nodeKey, mutation] of mutatedNodes) {
             if (mutation === "updated" || mutation === "created") {
@@ -3394,6 +3455,64 @@ function SmartTablePlugin() {
           tableResizerStickyRef.current?.hideHandle();
         },
         { skipInitialization: false }
+      ),
+      editor.registerCommand(
+        KEY_TAB_COMMAND,
+        (event, _activeEditor) => {
+          const selection = $getSelection3();
+          if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+            return false;
+          }
+          const tableCellNode = $findCellNode(
+            selection.anchor.getNode()
+          );
+          if (!tableCellNode) {
+            return false;
+          }
+          let isLastCellElement = false;
+          const tableCellElement = editor.getElementByKey(
+            tableCellNode.getKey()
+          );
+          if (tableCellElement && tableCellElement.hasAttribute(
+            "data-editor-table-last-cell"
+          )) {
+            isLastCellElement = true;
+          }
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          if (isLastCellElement) {
+            console.log("Last cell");
+            const tableNodeKey = tableCellElement?.getAttribute(
+              "data-editor-table-key"
+            );
+            const cellColumnKey = tableCellElement?.getAttribute(
+              "data-editor-table-column-key"
+            );
+            if (tableNodeKey && cellColumnKey) {
+              const cellMetaData = cellColumnKey.split(":");
+              window.dispatchEvent(
+                new CustomEvent(
+                  SMART_TABLE_ADD_NEW_ROW_EVENT,
+                  {
+                    detail: {
+                      nodeKey: tableNodeKey,
+                      currentRowIndex: Number(cellMetaData[1]),
+                      addDirection: "after"
+                    }
+                  }
+                )
+              );
+            }
+          } else {
+            $selectAdjacentCell(
+              tableCellNode,
+              event.shiftKey ? "previous" : "next"
+            );
+          }
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
       )
     );
   });
@@ -3467,7 +3586,7 @@ function Table() {
       {
         hasCellMerge: true,
         hasHorizontalScroll: true,
-        hasTabHandler: true,
+        hasTabHandler: false,
         hasCellBackgroundColor: true
       }
     ),
@@ -8993,10 +9112,10 @@ import {
 import { useEffect as useEffect51, useRef as useRef29 } from "react";
 
 // src/utils/extractSelectionNode.ts
-import { $getSelection as $getSelection5, $isRangeSelection } from "lexical";
+import { $getSelection as $getSelection5, $isRangeSelection as $isRangeSelection2 } from "lexical";
 function $extractSelectionNode() {
   const selection = $getSelection5();
-  if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+  if (!$isRangeSelection2(selection) || selection.isCollapsed()) {
     return null;
   }
   const anchor = selection.anchor;
@@ -9037,7 +9156,7 @@ import { mergeRegister as mergeRegister12 } from "@lexical/utils";
 import {
   $createNodeSelection as $createNodeSelection8,
   $getSelection as $getSelection6,
-  $isRangeSelection as $isRangeSelection2,
+  $isRangeSelection as $isRangeSelection3,
   $setSelection as $setSelection9,
   CLICK_COMMAND as CLICK_COMMAND8,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR6,
@@ -9101,7 +9220,7 @@ function FillInTheBlankSpaceComponentPlugin() {
         SELECTION_CHANGE_COMMAND5,
         () => {
           const selection = $getSelection6();
-          if ($isRangeSelection2(selection)) {
+          if ($isRangeSelection3(selection)) {
             lastSelectedNodeRef.current = selection.anchor.getNode();
           }
           return false;
@@ -9291,7 +9410,7 @@ var FillInTheBlankQuestionNode = class _FillInTheBlankQuestionNode extends Decor
   }
   setPointsPerSpace(points) {
     const writable = this.getWritable();
-    writable.__pointsPerSpace = points <= 0 ? 1 : points;
+    writable.__pointsPerSpace = points < 0 ? 1 : points;
   }
   decorate() {
     return /* @__PURE__ */ jsx79(
@@ -9315,7 +9434,7 @@ function $isFillInTheBlankQuestionNode(node) {
 
 // src/plugins/SettingsPanel/SmartTableSettings.tsx
 import { useLexicalComposerContext as useLexicalComposerContext44 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode11 } from "@lexical/table";
+import { $isTableNode as $isTableNode12 } from "@lexical/table";
 import { $getNodeByKey as $getNodeByKey32 } from "lexical";
 import { useEffect as useEffect52, useRef as useRef30 } from "react";
 import { Fragment as Fragment38, jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -9328,7 +9447,7 @@ function SmartTableSettings(props) {
     if (nodeKey) {
       editor.getEditorState().read(() => {
         const targetNode = $getNodeByKey32(nodeKey);
-        if ($isTableNode11(targetNode)) {
+        if ($isTableNode12(targetNode)) {
           isHeaderRowInputRef.current?.setChecked(
             $hasTableHeader(targetNode)
           );
@@ -9350,7 +9469,7 @@ function SmartTableSettings(props) {
         onChange: (checked) => {
           editor.update(() => {
             const targetNode = $getNodeByKey32(nodeKey);
-            if ($isTableNode11(targetNode)) {
+            if ($isTableNode12(targetNode)) {
               const isRowStriping = targetNode.getRowStriping();
               const updatedTableNode = $updateTableNode(
                 checked,
@@ -9379,7 +9498,7 @@ function SmartTableSettings(props) {
         onChange: (checked) => {
           editor.update(() => {
             const targetNode = $getNodeByKey32(nodeKey);
-            if ($isTableNode11(targetNode)) {
+            if ($isTableNode12(targetNode)) {
               targetNode.setRowStriping(checked);
             }
           });
@@ -9391,13 +9510,13 @@ function SmartTableSettings(props) {
 
 // src/plugins/SettingsPanel/SettingsPanelPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext45 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode12, TableNode as TableNode3 } from "@lexical/table";
+import { $isTableNode as $isTableNode13, TableNode as TableNode4 } from "@lexical/table";
 import { mergeRegister as mergeRegister13 } from "@lexical/utils";
 import {
   $getNodeByKey as $getNodeByKey33,
   $getSelection as $getSelection7,
   $isNodeSelection as $isNodeSelection2,
-  $isRangeSelection as $isRangeSelection3,
+  $isRangeSelection as $isRangeSelection4,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR7,
   createCommand as createCommand11,
   RootNode,
@@ -9488,12 +9607,12 @@ function SettingsPanelPlugin() {
             );
           } else {
             const currentSelection = $getSelection7();
-            if ($isRangeSelection3(currentSelection)) {
+            if ($isRangeSelection4(currentSelection)) {
               const selectionNode = currentSelection.anchor.getNode();
               const parentNodes = selectionNode.getParents();
               if (parentNodes.length > 1 && parentNodes[parentNodes.length - 1].__type === RootNode.getType()) {
                 const parentNode = parentNodes[parentNodes.length - 2];
-                if ($isTableNode12(parentNode)) {
+                if ($isTableNode13(parentNode)) {
                   currentFocusedNode.current = parentNode;
                   currentFocusedElement.current = activeEditor.getElementByKey(parentNode.getKey());
                 }
@@ -9533,7 +9652,7 @@ function SettingsPanelPlugin() {
       currentStickyRef.current?.hide();
       currentStickyRef.current = null;
       if (selectedNode && currentFocusedNode.current?.__type) {
-        if (currentFocusedNode.current.__type === TableNode3.getType()) {
+        if (currentFocusedNode.current.__type === TableNode4.getType()) {
           currentStickyRef.current = tableStickyRef.current;
         } else {
           currentStickyRef.current = getSettingsPanel(currentFocusedNode.current.__type) || null;
@@ -9681,7 +9800,7 @@ function SettingsPanelNestedAgentPlugin() {
 
 // src/utils/getLineBreakNodeBeforeCaretOnLastLine.ts
 import {
-  $isElementNode as $isElementNode2,
+  $isElementNode as $isElementNode3,
   $isLineBreakNode,
   $isTextNode as $isTextNode2
 } from "lexical";
@@ -9697,7 +9816,7 @@ function getLineBreakNodeBeforeCaretOnLastLine(paragraph, selection) {
   }
   const totalLines = totalBrNodes + 1;
   let lineNumber;
-  if ($isElementNode2(focusNode)) {
+  if ($isElementNode3(focusNode)) {
     let brBefore = 0;
     for (let i = 0; i < focusOffset; i++) {
       if ($isLineBreakNode(children[i])) {
@@ -9740,7 +9859,7 @@ import {
   $getRoot as $getRoot11,
   $getSelection as $getSelection9,
   $isParagraphNode as $isParagraphNode2,
-  $isRangeSelection as $isRangeSelection4,
+  $isRangeSelection as $isRangeSelection5,
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW9,
   KEY_BACKSPACE_COMMAND as KEY_BACKSPACE_COMMAND3,
   KEY_ENTER_COMMAND
@@ -9761,7 +9880,7 @@ function CalloutBoxComponent(props) {
             activeEditor.update(
               () => {
                 const currentSelection = $getSelection9();
-                if ($isRangeSelection4(currentSelection) && currentSelection.isCollapsed()) {
+                if ($isRangeSelection5(currentSelection) && currentSelection.isCollapsed()) {
                   const firstChild = $getRoot11().getFirstChild();
                   if (firstChild?.getTextContentSize() === 0) {
                     event.stopPropagation();
@@ -9795,7 +9914,7 @@ function CalloutBoxComponent(props) {
           KEY_ENTER_COMMAND,
           (event) => {
             const currentSelection = $getSelection9();
-            if ($isRangeSelection4(currentSelection) && currentSelection.isCollapsed()) {
+            if ($isRangeSelection5(currentSelection) && currentSelection.isCollapsed()) {
               const firstChild = $getRoot11().getFirstChild();
               if ($isParagraphNode2(firstChild)) {
                 const breakNodes = getLineBreakNodeBeforeCaretOnLastLine(
@@ -10619,8 +10738,8 @@ import { LinkNode } from "@lexical/link";
 import { ListItemNode as ListItemNode2, ListNode } from "@lexical/list";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import {
-  TableCellNode as TableCellNode5,
-  TableNode as TableNode4,
+  TableCellNode as TableCellNode6,
+  TableNode as TableNode5,
   TableRowNode as TableRowNode5
 } from "@lexical/table";
 var commonEditorNodes = [
@@ -10633,8 +10752,8 @@ var commonEditorNodes = [
   ListItemNode2,
   CalloutBoxNode,
   ListNode,
-  TableCellNode5,
-  TableNode4,
+  TableCellNode6,
+  TableNode5,
   TableRowNode5,
   VariableNode,
   MultipleOptionQuestionNode,
@@ -10985,7 +11104,7 @@ var DropdownWrapper = forwardRef11((props, ref) => {
 
 // src/utils/exportNodeToJSON.ts
 import {
-  $isElementNode as $isElementNode3
+  $isElementNode as $isElementNode4
 } from "lexical";
 var LEXICAL_NODE_MIME_TYPE = "/application/x-lexical-node/";
 function exportNodeToJSON(node) {
@@ -10996,7 +11115,7 @@ function exportNodeToJSON(node) {
       `LexicalNode: Node ${nodeClass.name} does not match the serialized type. Check if .exportJSON() is implemented and it is returning the correct type.`
     );
   }
-  if ($isElementNode3(node)) {
+  if ($isElementNode4(node)) {
     const serializedChildren = serializedNode.children;
     if (!Array.isArray(serializedChildren)) {
       throw Error(
@@ -11016,16 +11135,14 @@ function exportNodeToJSON(node) {
 // src/utils/traverseTableNode.ts
 import {
   $isTableCellNode as $isTableCellNode4,
-  $isTableRowNode
+  $isTableRowNode as $isTableRowNode2
 } from "@lexical/table";
 function traverseTableCellNodes(tableNode, cb) {
   const rows = tableNode.getChildren();
-  console.log("rows: ", rows);
   if (rows.length > 0) {
     for (const row of rows) {
-      if ($isTableRowNode(row)) {
+      if ($isTableRowNode2(row)) {
         const cells = row.getChildren();
-        console.log("cells: ", cells);
         if (cells.length > 0) {
           for (const cell of cells) {
             if ($isTableCellNode4(cell)) {
@@ -11040,7 +11157,7 @@ function traverseTableCellNodes(tableNode, cb) {
 
 // src/plugins/FillInTheBlankQuestionPlugin/FillInTheBlankQuestionPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext51 } from "@lexical/react/LexicalComposerContext";
-import { $isTableNode as $isTableNode13 } from "@lexical/table";
+import { $isTableNode as $isTableNode14 } from "@lexical/table";
 import { mergeRegister as mergeRegister16 } from "@lexical/utils";
 import {
   $createNodeSelection as $createNodeSelection12,
@@ -11166,7 +11283,7 @@ function FillInTheBlankQuestionPlugin() {
                       fillInTheBlankNode = $createFillInTheBlankQuestionNode(1);
                       if (tableNodeKey) {
                         const foundTableNode = $getNodeByKey37(tableNodeKey);
-                        if ($isTableNode13(foundTableNode)) {
+                        if ($isTableNode14(foundTableNode)) {
                           nodeSerialized = exportNodeToJSON(foundTableNode);
                           serializedData = JSON.stringify(nodeSerialized);
                           foundTableNode.replace(fillInTheBlankNode);
@@ -11194,7 +11311,7 @@ function FillInTheBlankQuestionPlugin() {
                               const newNode = $parseSerializedNode(nodeSerialized2);
                               root.append(newNode);
                               const firstChild = root.getFirstChild();
-                              if ($isTableNode13(firstChild)) {
+                              if ($isTableNode14(firstChild)) {
                                 traverseTableCellNodes(
                                   firstChild,
                                   (cell) => {
@@ -14058,7 +14175,7 @@ var useNode = () => {
 
 // src/plugins/AutoBottomParagraphPlugin/AutoBottomParagraphPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext60 } from "@lexical/react/LexicalComposerContext";
-import { TableNode as TableNode6 } from "@lexical/table";
+import { TableNode as TableNode7 } from "@lexical/table";
 import { mergeRegister as mergeRegister21 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode16,
@@ -14091,7 +14208,7 @@ function AutoBottomParagraphPlugin() {
         ImageNode2,
         ImagePlaceholderNode,
         CalloutBoxNode,
-        TableNode6,
+        TableNode7,
         MultipleOptionQuestionNode,
         ShortAnswerQuestionNode,
         MatchingQuestionNode,
@@ -14153,7 +14270,7 @@ import { useLexicalComposerContext as useLexicalComposerContext63 } from "@lexic
 import {
   $getRoot as $getRoot20,
   $isDecoratorNode,
-  $isElementNode as $isElementNode4,
+  $isElementNode as $isElementNode5,
   $isLineBreakNode as $isLineBreakNode2,
   $isTextNode as $isTextNode4
 } from "lexical";
@@ -14408,7 +14525,7 @@ import {
   $isListNode as $isListNode6
 } from "@lexical/list";
 import { $isQuoteNode as $isQuoteNode2 } from "@lexical/rich-text";
-import { $findMatchingParent } from "@lexical/utils";
+import { $findMatchingParent as $findMatchingParent2 } from "@lexical/utils";
 import {
   $createLineBreakNode as $createLineBreakNode2,
   $createParagraphNode as $createParagraphNode17,
@@ -14437,7 +14554,7 @@ import {
   $createRangeSelection,
   $getSelection as $getSelection12,
   $isLineBreakNode as $isLineBreakNode3,
-  $isRangeSelection as $isRangeSelection5,
+  $isRangeSelection as $isRangeSelection6,
   $isRootOrShadowRoot,
   $isTextNode as $isTextNode5,
   $setSelection as $setSelection18
@@ -14603,7 +14720,7 @@ function $runTextFormatTransformers(anchorNode, anchorOffset, textFormatTransfor
         nextSelection.toggleFormat(format);
       }
     }
-    if ($isRangeSelection5(selection)) {
+    if ($isRangeSelection6(selection)) {
       nextSelection.format = selection.format;
     }
     return true;
@@ -14686,7 +14803,7 @@ function registerMarkdownShortcuts(editor, transformers) {
       }
       const selection = editorState.read($getSelection12);
       const prevSelection = prevEditorState.read($getSelection12);
-      if (!$isRangeSelection5(prevSelection) || !$isRangeSelection5(selection) || !selection.isCollapsed()) {
+      if (!$isRangeSelection6(prevSelection) || !$isRangeSelection6(selection) || !selection.isCollapsed()) {
         return;
       }
       const anchorKey = selection.anchor.key;
@@ -15091,7 +15208,7 @@ import {
 import { useLexicalComposerContext as useLexicalComposerContext65 } from "@lexical/react/LexicalComposerContext";
 import { HorizontalRuleNode as HorizontalRuleNode3 } from "@lexical/react/LexicalHorizontalRuleNode";
 import { HeadingNode as HeadingNode5 } from "@lexical/rich-text";
-import { $isTableCellNode as $isTableCellNode5, TableNode as TableNode7 } from "@lexical/table";
+import { $isTableCellNode as $isTableCellNode5, TableNode as TableNode8 } from "@lexical/table";
 import { mergeRegister as mergeRegister22 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode18,
@@ -15436,7 +15553,7 @@ function NodeMousePlugin() {
         ListNode5,
         ParagraphNode4,
         CalloutBoxNode,
-        TableNode7,
+        TableNode8,
         MultipleOptionQuestionNode,
         ShortAnswerQuestionNode,
         MatchingQuestionNode,
@@ -16536,7 +16653,7 @@ var PopupMenu = forwardRef16(
 import {
   $createNodeSelection as $createNodeSelection17,
   $getSelection as $getSelection14,
-  $isRangeSelection as $isRangeSelection6,
+  $isRangeSelection as $isRangeSelection7,
   $setSelection as $setSelection20
 } from "lexical";
 function getFullMatchOffset(documentText, entryText, offset) {
@@ -16550,7 +16667,7 @@ function getFullMatchOffset(documentText, entryText, offset) {
 }
 function $splitNodeContainingQuery(replaceableString, matchingString) {
   const selection = $getSelection14();
-  if (!$isRangeSelection6(selection) || !selection.isCollapsed()) {
+  if (!$isRangeSelection7(selection) || !selection.isCollapsed()) {
     return null;
   }
   const anchor = selection.anchor;
@@ -16667,12 +16784,12 @@ function useTypeaheadTriggerMatch(trigger, {
 }
 
 // src/utils/visitVariableNodes.ts
-import { $isElementNode as $isElementNode5 } from "lexical";
+import { $isElementNode as $isElementNode6 } from "lexical";
 function visitVariableNodes(rootNode, cb) {
   if ($isVariableNode(rootNode)) {
     cb(rootNode);
   }
-  if ($isElementNode5(rootNode)) {
+  if ($isElementNode6(rootNode)) {
     const children = rootNode.getChildren();
     for (const childNode of children) {
       visitVariableNodes(childNode, cb);
@@ -16779,7 +16896,7 @@ function getSelectionDOMRangeRect(editor, leadOffset) {
 import {
   $createRangeSelection as $createRangeSelection2,
   $getSelection as $getSelection15,
-  $isRangeSelection as $isRangeSelection7,
+  $isRangeSelection as $isRangeSelection8,
   $setSelection as $setSelection21
 } from "lexical";
 function removeText(editorWindow, leadOffset) {
@@ -16808,7 +16925,7 @@ function removeTextInDomSelection(editor, leadOffset, onUpdate) {
     () => {
       const selection = $getSelection15();
       let selectedNode;
-      if ($isRangeSelection7(selection)) {
+      if ($isRangeSelection8(selection)) {
         selectedNode = selection.focus.getNode();
       }
       removeText(editorWindow, leadOffset);
@@ -16839,9 +16956,9 @@ import { mergeRegister as mergeRegister25 } from "@lexical/utils";
 import {
   $createNodeSelection as $createNodeSelection18,
   $getSelection as $getSelection16,
-  $isRangeSelection as $isRangeSelection8,
+  $isRangeSelection as $isRangeSelection9,
   $setSelection as $setSelection22,
-  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
   COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH4,
   KEY_ARROW_DOWN_COMMAND,
   KEY_ARROW_UP_COMMAND,
@@ -16866,7 +16983,7 @@ function TypeaheadVariablePlugin() {
   const handleUpdate = () => {
     activeEditorRef.current?.getEditorState().read(() => {
       const selection = $getSelection16();
-      if ($isRangeSelection8(selection)) {
+      if ($isRangeSelection9(selection)) {
         if (selection.isCollapsed()) {
           const anchor = selection.anchor;
           const isEmpty = anchor.getNode().getTextContent().trim().length === 0;
@@ -17032,14 +17149,14 @@ function TypeaheadVariablePlugin() {
         handleMenuItemSelect("down"),
         // Highest priority
         // Prevents any events from nested editors
-        COMMAND_PRIORITY_CRITICAL
+        COMMAND_PRIORITY_CRITICAL2
       ),
       editor.registerCommand(
         KEY_ARROW_UP_COMMAND,
         handleMenuItemSelect("up"),
         // Highest priority
         // Prevents any events from nested editors
-        COMMAND_PRIORITY_CRITICAL
+        COMMAND_PRIORITY_CRITICAL2
       ),
       editor.registerCommand(
         CREATE_VARIABLE_FROM_SELECTION_COMMAND,
@@ -17209,15 +17326,15 @@ import {
   $getSelectionStyleValueForProperty,
   $patchStyleText
 } from "@lexical/selection";
-import { TableNode as TableNode8 } from "@lexical/table";
-import { $findMatchingParent as $findMatchingParent2, mergeRegister as mergeRegister26 } from "@lexical/utils";
+import { TableNode as TableNode9 } from "@lexical/table";
+import { $findMatchingParent as $findMatchingParent3, mergeRegister as mergeRegister26 } from "@lexical/utils";
 import {
   $getSelection as $getSelection17,
   $isDecoratorNode as $isDecoratorNode2,
-  $isElementNode as $isElementNode6,
+  $isElementNode as $isElementNode7,
   $isNodeSelection as $isNodeSelection5,
   $isParagraphNode as $isParagraphNode8,
-  $isRangeSelection as $isRangeSelection9,
+  $isRangeSelection as $isRangeSelection10,
   $isRootOrShadowRoot as $isRootOrShadowRoot2,
   $isTextNode as $isTextNode7,
   $setSelection as $setSelection23,
@@ -17279,7 +17396,7 @@ function TextToolbarPlugin() {
   const formatText = (format) => {
     activeEditorRef.current?.update(() => {
       const selection = $getSelection17();
-      if (!$isRangeSelection9(selection)) {
+      if (!$isRangeSelection10(selection)) {
         return false;
       }
       selection.formatText(format);
@@ -17288,14 +17405,14 @@ function TextToolbarPlugin() {
   const formatElement = (format) => {
     activeEditorRef.current?.update(() => {
       const selection = $getSelection17();
-      if (!$isRangeSelection9(selection) && !$isNodeSelection5(selection)) {
+      if (!$isRangeSelection10(selection) && !$isNodeSelection5(selection)) {
         return false;
       }
       const nodes = selection.getNodes();
       for (const node of nodes) {
-        const element = $findMatchingParent2(
+        const element = $findMatchingParent3(
           node,
-          (parentNode) => $isElementNode6(parentNode) && !parentNode.isInline()
+          (parentNode) => $isElementNode7(parentNode) && !parentNode.isInline()
         );
         if (element !== null) {
           element.setFormat(format);
@@ -17365,7 +17482,7 @@ function TextToolbarPlugin() {
             "font-size": null,
             "font-weight": null
           });
-          if ($isRangeSelection9(selection)) {
+          if ($isRangeSelection10(selection)) {
             const selectedNodes = selection.getNodes();
             for (const selectedNode of selectedNodes) {
               if ($isTextNode7(selectedNode)) {
@@ -17416,7 +17533,7 @@ function TextToolbarPlugin() {
           activeEditorRef.current?.getEditorState().read(() => {
             const foundParentTableNode = getParentNodeType(
               selectedNode,
-              TableNode8
+              TableNode9
             );
             if (foundParentTableNode) {
               activeEditorRef.current?.dispatchCommand(
@@ -17537,7 +17654,7 @@ function TextToolbarPlugin() {
                 popupToolbarRef.current?.hideToolbar();
                 return false;
               }
-              if (!$isRangeSelection9(selection)) {
+              if (!$isRangeSelection10(selection)) {
                 popupToolbarRef.current?.hideToolbar();
                 return false;
               }
@@ -17559,7 +17676,7 @@ function TextToolbarPlugin() {
                 return false;
               }
               const anchorNode = selection.anchor.getNode();
-              let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent2(
+              let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent3(
                 anchorNode,
                 (e) => {
                   const parent = e.getParent();
@@ -17622,7 +17739,7 @@ function TextToolbarPlugin() {
                 "background-color",
                 ""
               );
-              if ($isElementNode6(element)) {
+              if ($isElementNode7(element)) {
                 newToolbarState.textAlign = element.getFormatType();
               } else {
                 newToolbarState.textAlign = "left";
@@ -17940,7 +18057,7 @@ function TextToolbarPlugin() {
                 activeEditorRef.current?.getEditorState().read(() => {
                   const foundParentTableNode = getParentNodeType(
                     selectedNode,
-                    TableNode8
+                    TableNode9
                   );
                   if (foundParentTableNode) {
                     activeEditorRef.current?.dispatchCommand(
@@ -18473,7 +18590,7 @@ function useTypeaheadTriggerMatch2(trigger, {
 // src/plugins/TypeaheadMenuPlugin/TypeaheadMenuPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext70 } from "@lexical/react/LexicalComposerContext";
 import { $isHeadingNode as $isHeadingNode5 } from "@lexical/rich-text";
-import { $isTableCellNode as $isTableCellNode6, TableNode as TableNode9 } from "@lexical/table";
+import { $isTableCellNode as $isTableCellNode6, TableNode as TableNode10 } from "@lexical/table";
 import { mergeRegister as mergeRegister27 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode21,
@@ -18481,7 +18598,7 @@ import {
   $getRoot as $getRoot24,
   $getSelection as $getSelection18,
   $isParagraphNode as $isParagraphNode9,
-  $isRangeSelection as $isRangeSelection10,
+  $isRangeSelection as $isRangeSelection11,
   BLUR_COMMAND,
   COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH6,
   KEY_ARROW_DOWN_COMMAND as KEY_ARROW_DOWN_COMMAND2,
@@ -18618,7 +18735,7 @@ function TypeaheadMenuPlugin() {
   const handleUpdate = () => {
     activeEditorRef.current?.getEditorState().read(() => {
       const selection = $getSelection18();
-      if ($isRangeSelection10(selection)) {
+      if ($isRangeSelection11(selection)) {
         if (selection.isCollapsed()) {
           const node = selection.focus.getNode();
           const nodeKey = node.getKey();
@@ -18632,7 +18749,7 @@ function TypeaheadMenuPlugin() {
           }
           const parentNodes = node.getParents();
           const isTableParent = parentNodes.findIndex(
-            (i) => i.getType() === TableNode9.getType()
+            (i) => i.getType() === TableNode10.getType()
           ) >= 0;
           if (dom && !isTableParent) {
             if (isEmpty) {
@@ -19202,6 +19319,8 @@ var themeLight = `
   --be-bg-color-green: hsl(122, 100%, 23%, 0.1);
   
   --be-settings-node-selected-border-color: #7B00FF;
+  
+  --be-bg-color-table-selection: hsl(221, 100%, 50%, 0.1);
 }
 `;
 var themeDark = `
@@ -19512,6 +19631,8 @@ var themeDark = `
   --be-bg-color-green: hsl(122, 100%, 34%, 0.2);
   
   --be-settings-node-selected-border-color: #7B00FF;
+  
+  --be-bg-color-table-selection: hsl(221, 100%, 70%, 0.2);
 }
 `;
 
@@ -19663,7 +19784,7 @@ function BlockEditor(props) {
     [onChange]
   );
   useEffect89(() => {
-    if (editorState) {
+    if (editorState && !editorRef.current?._pendingEditorState) {
       const parsedEditorState = editorRef.current?.parseEditorState(editorState);
       if (parsedEditorState) {
         editorRef.current?.setEditorState(parsedEditorState, {
@@ -19936,7 +20057,7 @@ import { mergeRegister as mergeRegister28 } from "@lexical/utils";
 import {
   $createRangeSelection as $createRangeSelection3,
   $getSelection as $getSelection19,
-  $isRangeSelection as $isRangeSelection11,
+  $isRangeSelection as $isRangeSelection12,
   $isTextNode as $isTextNode8,
   $setSelection as $setSelection24,
   CLICK_COMMAND as CLICK_COMMAND13,
@@ -19986,7 +20107,7 @@ function LinkToolbarPlugin() {
                 return;
               }
               const selection = $getSelection19();
-              if (!$isRangeSelection11(selection)) {
+              if (!$isRangeSelection12(selection)) {
                 popupToolbarRef.current?.hideToolbar();
                 return;
               }
@@ -20920,15 +21041,24 @@ function VariableSettingsPlugin() {
 
 // src/plugins/VariablesPlugin/VariableToolbarPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext77 } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister as mergeRegister31 } from "@lexical/utils";
+import { $findMatchingParent as $findMatchingParent4, mergeRegister as mergeRegister31 } from "@lexical/utils";
 import {
   $getNodeByKey as $getNodeByKey62,
   $getSelection as $getSelection20,
+  $isElementNode as $isElementNode8,
   $isNodeSelection as $isNodeSelection6,
+  $isRootOrShadowRoot as $isRootOrShadowRoot3,
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL4
 } from "lexical";
 import debounce8 from "lodash-es/debounce";
-import { Bold as Bold2, Italic as Italic2, Underline as Underline2 } from "lucide-react";
+import {
+  AlignCenter as AlignCenter4,
+  AlignLeft as AlignLeft4,
+  AlignRight as AlignRight4,
+  Bold as Bold2,
+  Italic as Italic2,
+  Underline as Underline2
+} from "lucide-react";
 import {
   useCallback as useCallback19,
   useEffect as useEffect102,
@@ -20945,8 +21075,25 @@ function VariableToolbarPlugin() {
   const [toolbarState, setToolbarState] = useState25({
     isBold: false,
     isItalic: false,
-    isUnderline: false
+    isUnderline: false,
+    textAlign: ""
   });
+  const formatElement = (format) => {
+    activeEditorRef.current?.update(() => {
+      const foundNode = $getNodeByKey62(
+        selectedNodeRef.current?.getKey() || ""
+      );
+      if ($isVariableNode(foundNode)) {
+        const element = $findMatchingParent4(
+          foundNode,
+          (parentNode) => $isElementNode8(parentNode) && !parentNode.isInline()
+        );
+        if (element !== null) {
+          element.setFormat(format);
+        }
+      }
+    });
+  };
   function formatVariable(format) {
     activeEditorRef.current?.update(() => {
       const foundNode = $getNodeByKey62(
@@ -20997,6 +21144,21 @@ function VariableToolbarPlugin() {
             repositionPopupToolbar();
             e.preventDefault();
             e.stopPropagation();
+          } else if (e.shiftKey && (e.key === "l" || e.key === "L")) {
+            formatElement("left");
+            repositionPopupToolbar();
+            e.preventDefault();
+            e.stopPropagation();
+          } else if (e.shiftKey && (e.key === "e" || e.key === "E")) {
+            formatElement("center");
+            repositionPopupToolbar();
+            e.preventDefault();
+            e.stopPropagation();
+          } else if (e.shiftKey && (e.key === "r" || e.key === "R")) {
+            formatElement("right");
+            repositionPopupToolbar();
+            e.preventDefault();
+            e.stopPropagation();
           }
         }
       } else {
@@ -21013,6 +21175,23 @@ function VariableToolbarPlugin() {
           repositionPopupToolbar();
           e.preventDefault();
           e.stopPropagation();
+        } else if (e.ctrlKey && e.altKey) {
+          if (e.key === "l" || e.key === "L") {
+            formatElement("left");
+            repositionPopupToolbar();
+            e.preventDefault();
+            e.stopPropagation();
+          } else if (e.key === "e" || e.key === "E") {
+            formatElement("center");
+            repositionPopupToolbar();
+            e.preventDefault();
+            e.stopPropagation();
+          } else if (e.key === "r" || e.key === "R") {
+            formatElement("right");
+            repositionPopupToolbar();
+            e.preventDefault();
+            e.stopPropagation();
+          }
         }
       }
     }
@@ -21059,11 +21238,19 @@ function VariableToolbarPlugin() {
                 const nodes = selection.extract();
                 const focusedNode = nodes[0];
                 if ($isVariableNode(focusedNode)) {
+                  const element = focusedNode.getKey() === "root" ? focusedNode : $findMatchingParent4(
+                    focusedNode,
+                    (e) => {
+                      const parent = e.getParent();
+                      return parent !== null && $isRootOrShadowRoot3(parent);
+                    }
+                  );
                   selectedNodeRef.current = focusedNode;
                   setToolbarState({
                     isBold: !!focusedNode.getBold(),
                     isItalic: !!focusedNode.getItalic(),
-                    isUnderline: !!focusedNode.getUnderline()
+                    isUnderline: !!focusedNode.getUnderline(),
+                    textAlign: $isElementNode8(element) ? element.getFormatType() : "left"
                   });
                 }
               }
@@ -21125,6 +21312,44 @@ function VariableToolbarPlugin() {
         onClick: () => {
           formatVariable("underline");
         }
+      },
+      {
+        id: "text-align",
+        label: "",
+        Icon: textAlignToIcon[toolbarState.textAlign] || AlignLeft4,
+        tooltip: "Align Text",
+        subMenu: [
+          {
+            id: "text-left",
+            Icon: AlignLeft4,
+            label: `Align Left ${plt === "macOS" /* macOS */ ? "(\u2318\u21E7L)" : "(Ctrl+Alt+L)"}`,
+            selected: toolbarState.textAlign === "left",
+            onClick: () => {
+              formatElement("left");
+              repositionPopupToolbar();
+            }
+          },
+          {
+            id: "text-center",
+            Icon: AlignCenter4,
+            label: `Align Center ${plt === "macOS" /* macOS */ ? "(\u2318\u21E7E)" : "(Ctrl+Alt+E)"}`,
+            selected: toolbarState.textAlign === "center",
+            onClick: () => {
+              formatElement("center");
+              repositionPopupToolbar();
+            }
+          },
+          {
+            id: "text-right",
+            Icon: AlignRight4,
+            label: `Align Right ${plt === "macOS" /* macOS */ ? "(\u2318\u21E7R)" : "(Ctrl+Alt+R)"}`,
+            selected: toolbarState.textAlign === "right",
+            onClick: () => {
+              formatElement("right");
+              repositionPopupToolbar();
+            }
+          }
+        ]
       }
     ];
     return resultList;