@saltcorn/builder 1.6.0-beta.1 → 1.6.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.6.0-beta.1",
+  "version": "1.6.0-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -30,7 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "@monaco-editor/react": "4.7.0",
-    "@saltcorn/common-code": "1.6.0-beta.1",
+    "@saltcorn/common-code": "1.6.0-beta.3",
     "@tippyjs/react": "4.2.6",
     "babel-jest": "^29.7.0",
     "babel-loader": "9.2.1",

package/src/components/Builder.js

@@ -826,6 +826,9 @@ const Builder = ({ options, layout, mode }) => {
 
   const canvasHeight =
     Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
+
+  const smallSidebarWidth = options.isRTL ? '17.5rem' : '16.5rem'
+
   return (
     <ErrorBoundary>
       <Editor
@@ -885,7 +888,7 @@ const Builder = ({ options, layout, mode }) => {
                   layoutToNodes,
                 }}
               >
-                <div className="row" ref={ref} style={{ marginTop: "-5px" }}>
+                <div className="row" ref={ref} style={{ marginTop: "-5px" }} dir={options.isRTL ? "rtl" : "ltr"}>
                   <div
                     className={`col-sm-auto left-builder-col ${
                       isLeftEnlarged
@@ -973,7 +976,7 @@ const Builder = ({ options, layout, mode }) => {
                     </div>
                   </div>
                   <div className="col-sm-auto builder-sidebar">
-                    <div style={{ width: isEnlarged ? "28rem" : "16.5rem" }}>
+                    <div style={{ width: isEnlarged ? "28rem" : smallSidebarWidth }}>
                       {document.getElementById("builder-header-actions") &&
                         createPortal(
                           <Fragment>

package/src/components/RenderNode.js

@@ -6,9 +6,10 @@
 
 import { useNode, useEditor } from "@craftjs/core";
 //import { ROOT_NODE } from "@craftjs/utils";
-import React, { useEffect, useRef, useCallback, Fragment } from "react";
+import React, { useEffect, useRef, useCallback, Fragment, useContext } from "react";
 import ReactDOM from "react-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import optionsCtx from "./context";
 import {
   faCopy,
   faUndo,
@@ -32,6 +33,7 @@ export /**
  */
 const RenderNode = ({ render }) => {
   const { id } = useNode();
+  const options = useContext(optionsCtx);
   const { actions, query, isActive } = useEditor((state) => ({
     isActive: state.nodes[id].events.selected,
   }));
@@ -60,14 +62,16 @@ const RenderNode = ({ render }) => {
     const { top, left, bottom, height, width, right } = dom
       ? dom.getBoundingClientRect()
       : { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
+    const rightPos = window.innerWidth - right;
     return {
       top: `${top > 0 ? top : bottom}px`,
       left: `${left}px`,
+      right: `${rightPos}px`,
       topn: top,
       leftn: left,
+      rightn: rightPos,
       height,
       width,
-      right,
       bottom,
     };
   }, []);
@@ -75,10 +79,16 @@ const RenderNode = ({ render }) => {
   const scroll = useCallback(() => {
     const { current: currentDOM } = currentRef;
     if (!currentDOM) return;
-    const { top, left } = getPos(dom);
-    currentDOM.style.top = top;
-    currentDOM.style.left = left;
-  }, [dom, getPos]);
+    const pos = getPos(dom);
+    currentDOM.style.top = pos.top;
+    if (options.isRTL) {
+      currentDOM.style.right = pos.right;
+      currentDOM.style.left = 'auto';
+    } else {
+      currentDOM.style.left = pos.left;
+      currentDOM.style.right = 'auto';
+    }
+  }, [dom, getPos, options.isRTL]);
 
   const hiddenColumnParents = new Set(["Card", "Container", "Table", "DropMenu"]);
   useEffect(() => {
@@ -145,7 +155,7 @@ const RenderNode = ({ render }) => {
                 isActive ? "activeind" : "hoverind"
               } px-1 text-white`}
               style={{
-                left: getPos(dom).left,
+                ...(options.isRTL ? { right: getPos(dom).right, left: 'auto' } : { left: getPos(dom).left, right: 'auto' }),
                 top: getPos(dom).top,
                 zIndex: 1029,
               }}

package/src/components/elements/Aggregation.js

@@ -5,7 +5,13 @@
  */
 /* globals validate_expression_elem */
 
-import React, { Fragment, useState, useContext, useEffect, useRef } from "react";
+import React, {
+  Fragment,
+  useState,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
 import useTranslation from "../../hooks/useTranslation";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
@@ -157,7 +163,9 @@ const AggregationSettings = () => {
           <tr>
             <td>
               <label>
-                {options.mode === "filter" ? t("Field") : t("Child table field")}
+                {options.mode === "filter"
+                  ? t("Field")
+                  : t("Child table field")}
               </label>
             </td>
             <td>
@@ -187,13 +195,13 @@ const AggregationSettings = () => {
               >
                 {buildOptions(
                   [
-                    t("Count"),
-                    t("CountUnique"),
-                    t("Avg"),
-                    t("Sum"),
-                    t("Max"),
-                    t("Min"),
-                    t("Array_Agg"),
+                    "Count",
+                    "CountUnique",
+                    "Avg",
+                    "Sum",
+                    "Max",
+                    "Min",
+                    "Array_Agg",
                   ],
                   { valAttr: true }
                 )}

package/src/components/elements/CustomLayer.js

@@ -1,11 +1,14 @@
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useEditor } from "@craftjs/core";
 import { useLayer } from "@craftjs/layers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown, faChevronUp, faArrowUp, faArrowDown, faLevelUpAlt } from "@fortawesome/free-solid-svg-icons";
+import optionsCtx from "../context";
 
 const CustomLayer = ({ children }) => {
+  const options = useContext(optionsCtx);
+  const isRTL = options?.isRTL;
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState("");
   const [isMouseOver, setIsMouseOver] = useState(false);
@@ -136,7 +139,7 @@ const CustomLayer = ({ children }) => {
   return (
     <div
       ref={(dom) => { layer(dom); if (dom) editorConnectors.drop(dom, id); }}
-      style={isHiddenColumn ? { marginLeft: "-10px" } : undefined}
+      style={isHiddenColumn ? (isRTL ? { marginRight: "-10px" } : { marginLeft: "-10px" }) : undefined}
     >
       <div
         ref={(dom) => { drag(dom); layerHeader(dom); }}
@@ -145,7 +148,7 @@ const CustomLayer = ({ children }) => {
           cursor: isHiddenColumn ? "default" : "pointer",
           display: isHiddenColumn ? "none" : "flex",
           alignItems: "center",
-          padding: `4px 4px 4px ${depth * 10 + 6}px`,
+          padding: isRTL ? `4px ${depth * 10 + 6}px 4px 4px` : `4px 4px 4px ${depth * 10 + 6}px`,
           overflow: "hidden",
         }}
         onClick={() => editorActions.selectNode(id)}
@@ -208,7 +211,7 @@ const CustomLayer = ({ children }) => {
         )}
 
         {isMouseOver && !isEditing && parentId && childIndex >= 0 && (
-          <span className="layer-move-buttons" style={{ display: "inline-flex", gap: 2, marginLeft: 4, flexShrink: 0 }}>
+          <span className="layer-move-buttons" style={{ display: "inline-flex", gap: 2, marginInlineStart: 4, flexShrink: 0 }}>
             {childIndex > 0 && (
               <span
                 title="Move up"

package/src/components/elements/SearchBar.js

@@ -25,6 +25,7 @@ export /**
  */
 const SearchBar = ({ has_dropdown, children, contents, show_badges }) => {
   const { t } = useTranslation();
+  const options = useContext(optionsCtx);
   const {
     selected,
     connectors: { connect, drag },
@@ -80,7 +81,7 @@ const SearchBar = ({ has_dropdown, children, contents, show_badges }) => {
             className={`dropdown-menu searchbar-dropdown ${
               showDropdown ? "show" : ""
             }`}
-            style={{ width: dropWidth, left: 0 }}
+            style={{ width: dropWidth, ...(options?.isRTL ? { right: 0 } : { left: 0 }) }}
           >
             <Element canvas id="searchbar-contents" is={Column}>
               {renderContents()}

package/src/components/elements/Text.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 
-import React, { useState, useContext, useEffect, Fragment } from "react";
+import React, { useState, useContext, useEffect, useRef, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import {
   blockProps,
@@ -82,7 +82,7 @@ export /**
  * @subcategory components
  */
 const Text = ({
-  text,
+  text: propText,
   block,
   inline,
   isFormula,
@@ -97,13 +97,20 @@ const Text = ({
   const {
     connectors: { connect, drag },
     selected,
+    nodeText,
     actions: { setProp },
   } = useNode((state) => ({
     selected: state.events.selected,
     dragged: state.events.dragged,
+    nodeText: state.data.props.text,
   }));
+  // Use nodeText from store (reacts to undo) with fallback to prop
+  const text = nodeText !== undefined ? nodeText : propText;
   const [editable, setEditable] = useState(false);
   const { previewDevice } = useContext(PreviewCtx);
+  const ckInitRef = useRef(true);
+  const lastSavedTextRef = useRef(text);
+  const skipDestroyRef = useRef(false);
 
   const baseStyle = {
     ...(font ? { fontFamily: font } : {}),
@@ -117,6 +124,19 @@ const Text = ({
   );
   if (activeFontSize) baseStyle.fontSize = activeFontSize;
 
+  useEffect(() => {
+    if (editable) {
+      ckInitRef.current = true;
+      lastSavedTextRef.current = text;
+    }
+  }, [editable]);
+  // Close CKEditor when text changes externally (e.g. undo/redo)
+  useEffect(() => {
+    if (editable && text !== lastSavedTextRef.current) {
+      skipDestroyRef.current = true;
+      setEditable(false);
+    }
+  }, [text]);
   useEffect(() => {
     !selected && setEditable(false);
   }, [selected]);
@@ -149,9 +169,29 @@ const Text = ({
           <CKEditor
             initData={text || ""}
             style={{ display: "inline" }}
-            onChange={(e) =>
-              setProp((props) => (props.text = e.editor.getData()))
-            }
+            onChange={(e) => {
+              if (ckInitRef.current) {
+                ckInitRef.current = false;
+                return;
+              }
+              if (e?.editor) {
+                const newText = e.editor.getData();
+                setProp((props) => (props.text = newText), 500);
+                lastSavedTextRef.current = newText;
+              }
+            }}
+            onBeforeDestroy={(e) => {
+              if (skipDestroyRef.current) {
+                skipDestroyRef.current = false;
+                return;
+              }
+              if (e?.editor) {
+                const newText = e.editor.getData();
+                if (newText !== lastSavedTextRef.current) {
+                  setProp((props) => (props.text = newText));
+                }
+              }
+            }}
             config={ckConfig}
             type="inline"
           />