@saltcorn/builder 1.6.0-alpha.9 → 1.6.0-beta.2

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,
   }));
@@ -47,7 +49,7 @@ const RenderNode = ({ render }) => {
   } = useNode((node) => ({
     isHover: node.events.hovered,
     dom: node.dom,
-    name: node.data.custom.displayName || node.data.displayName,
+    name: node.data.custom.displayName || node.data.props?.custom?.displayName || node.data.displayName,
     moveable: query.node(node.id).isDraggable(),
     deletable: query.node(node.id).isDeletable(),
     parent: node.data.parent,
@@ -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,14 +79,38 @@ 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(() => {
-    if (name === "Column" && parent && parent !== "ROOT")
-      actions.selectNode(parent);
+    if (!isActive) return;
+    if (name === "Column" && parent && parent !== "ROOT") {
+      const parentNode = query.node(parent).get();
+      const parentName = parentNode?.data?.displayName;
+      const parentLinked = parentNode?.data?.linkedNodes;
+      if (
+        hiddenColumnParents.has(parentName) &&
+        parentLinked &&
+        Object.values(parentLinked).includes(id)
+      ) {
+        const currentlySelected = query.getEvent("selected").all();
+        const otherSelected = currentlySelected.filter((nid) => nid !== id);
+        if (otherSelected.length > 0) {
+          actions.selectNode([...otherSelected, parent]);
+        } else {
+          actions.selectNode(parent);
+        }
+      }
+    }
   }, [isActive]);
 
   useEffect(() => {
@@ -127,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/Toolbox.js

@@ -29,6 +29,7 @@ import { View } from "./elements/View";
 import { SearchBar } from "./elements/SearchBar";
 import { Link } from "./elements/Link";
 import { Page } from "./elements/Page";
+import { Prompt } from "./elements/Prompt";
 import optionsCtx from "./context";
 import {
   BoundingBox,
@@ -84,6 +85,7 @@ const WrapElem = ({
     }  d-inline-flex wrap-builder-elem align-items-center justify-content-center`}
     title={title}
     ref={disable ? undefined : (ref) => connectors.create(ref, children)}
+    onContextMenu={(e) => e.preventDefault()}
   >
     <div
       className={`inner ${innerClass || ""}`}
@@ -115,7 +117,7 @@ const TextElem = ({ connectors }) => {
       fontSize="22px"
       title={t("Text")}
       bold
-      label={t("Text")}
+      label="Text"
     >
       <Text text="Hello world" block={false} textStyle={""} />
     </WrapElem>
@@ -137,7 +139,7 @@ const ColumnsElem = ({ connectors }) => {
       innerClass="mt-m1px"
       icon="fas fa-columns"
       title={t("Split into columns")}
-      label={t("Columns")}
+      label="Columns"
     >
       <Columns contents={[]} setting_col_n={1} />
     </WrapElem>
@@ -158,7 +160,7 @@ const TabsElem = ({ connectors }) => {
       connectors={connectors}
       icon={<SegmentedNav className="mb-2 h4" />}
       title={t("Tabbed content")}
-      label={t("Tabs")}
+      label="Tabs"
     >
       <Tabs contents={[]} />
     </WrapElem>
@@ -180,7 +182,7 @@ const LineBreakElem = ({ connectors }) => {
       text="↵"
       fontSize="26px"
       title={t("Line break")}
-      label={t("Break")}
+      label="Break"
     >
       <LineBreak />
     </WrapElem>
@@ -201,7 +203,7 @@ const HTMLElem = ({ connectors }) => {
       connectors={connectors}
       icon="fas fa-code"
       title={t("HTML code")}
-      label={t("Code")}
+      label="Code"
     >
       <HTMLCode text={""} />
     </WrapElem>
@@ -222,7 +224,7 @@ const CardElem = ({ connectors }) => {
       connectors={connectors}
       title={t("Card")}
       icon="far fa-square"
-      label={t("Card")}
+      label="Card"
     >
       <Element canvas is={Card} isFormula={{}} url=""></Element>
     </WrapElem>
@@ -243,7 +245,7 @@ const ImageElem = ({ connectors, images }) => {
       connectors={connectors}
       icon="fas fa-image"
       title={t("Image")}
-      label={t("Image")}
+      label="Image"
     >
       <Image fileid={images.length > 0 ? images[0].id : 0} />
     </WrapElem>
@@ -264,7 +266,7 @@ const LinkElem = ({ connectors }) => {
       connectors={connectors}
       icon="fas fa-link"
       title={t("Link")}
-      label={t("Link")}
+      label="Link"
     >
       <Link />
     </WrapElem>
@@ -285,7 +287,7 @@ const ViewElem = ({ connectors, views, isPageEdit }) => {
       connectors={connectors}
       icon="fas fa-eye"
       title={t("Embed a view")}
-      label={t("View")}
+      label="View"
       disable={!views || views.length < (!isPageEdit ? 2 : 1)}
     >
       <View
@@ -311,7 +313,7 @@ const SearchElem = ({ connectors }) => {
       connectors={connectors}
       icon="fas fa-search"
       title={t("Search bar")}
-      label={t("Search")}
+      label="Search"
     >
       <Element canvas is={SearchBar}></Element>
     </WrapElem>
@@ -332,7 +334,7 @@ const ContainerElem = ({ connectors }) => {
       connectors={connectors}
       icon={<BoundingBox className="mb-2 h5" />}
       title={t("Container")}
-      label={t("Contain")}
+      label="Contain"
     >
       <Element canvas is={Container}></Element>
     </WrapElem>
@@ -353,7 +355,7 @@ const FieldElem = ({ connectors, fields, field_view_options }) => {
       connectors={connectors}
       icon="fas fa-asterisk"
       title={t("Field")}
-      label={t("Field")}
+      label="Field"
     >
       <Field
         name={fields[0].name}
@@ -380,7 +382,7 @@ const DropDownFilterElem = ({ connectors, fields }) => {
       connectors={connectors}
       icon="far fa-caret-square-down"
       title={t("Dropdown filter")}
-      label={t("Select")}
+      label="Select"
     >
       <DropDownFilter
         name={fields[0].name}
@@ -399,7 +401,7 @@ const DropMenuElem = ({ connectors }) => {
       connectors={connectors}
       icon="far fa-caret-square-down"
       title={t("Dropdown menu")}
-      label={t("DropMenu")}
+      label="DropMenu"
     >
       <Element canvas is={DropMenu}></Element>
     </WrapElem>
@@ -413,7 +415,7 @@ const PageElem = ({ connectors, pages }) => {
       connectors={connectors}
       icon="fa-fw far fa-file"
       title={t("Embed a page")}
-      label={t("Page")}
+      label="Page"
       disable={pages.length <= 1}
     >
       <Page page={pages.length > 0 ? pages[0].name : "page"} />
@@ -436,7 +438,7 @@ const ToggleFilterElem = ({ connectors, fields }) => {
       connectors={connectors}
       icon="fas fa-toggle-on"
       title={t("Toggle filter")}
-      label={t("Toggle")}
+      label="Toggle"
     >
       <ToggleFilter name={fields[0].name} value={""} label={""} block={false} />
     </WrapElem>
@@ -457,7 +459,7 @@ const JoinFieldElem = ({ connectors, options }) => {
       connectors={connectors}
       icon={<Diagram3Fill className="mb-2 h5" />}
       title={t("Join field")}
-      label={t("Join")}
+      label="Join"
       disable={options.parent_field_list.length === 0}
     >
       <JoinField
@@ -484,7 +486,7 @@ const ViewLinkElem = ({ connectors, options }) => {
       connectors={connectors}
       icons={["fas fa-eye", "fas fa-link"]}
       title={t("Link to a view")}
-      label={t("ViewLink")}
+      label="ViewLink"
       disable={!options.views || options.views.length < 2}
     >
       <ViewLink
@@ -510,7 +512,7 @@ const ActionElem = ({ connectors, options }) => {
   return (
     <WrapElem
       connectors={connectors}
-      label={t("Action")}
+      label="Action"
       icon="fas fa-running"
       title={t("Action button")}
     >
@@ -549,7 +551,7 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => {
       connectors={connectors}
       text="∑"
       title={t("Aggregation")}
-      label={t("Aggreg8")}
+      label="Aggreg8"
       bold
       fontSize="16px"
       disable={child_field_list.length === 0}
@@ -574,15 +576,71 @@ const TableElem = ({ connectors }) => {
       innerClass="mt-m1px"
       icon="fas fa-table"
       title={t("Table")}
-      label={t("Table")}
+      label="Table"
     >
       <Table contents={[[], []]} rows={2} columns={2} />
     </WrapElem>
   );
 };
 
+const PromptContainerElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-robot"
+      title={t("Generate with AI")}
+      label="Generate"
+    >
+      <Prompt promptType="container" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptViewElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-eye"
+      title={t("Prompt View")}
+      label="Prompt View"
+    >
+      <Prompt promptType="view" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptFieldElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-i-cursor"
+      title={t("Prompt Field")}
+      label="Prompt Field"
+    >
+      <Prompt promptType="field" promptText="" />
+    </WrapElem>
+  );
+};
+
+const PromptActionElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-bolt"
+      title={t("Prompt Action")}
+      label="Prompt Action"
+    >
+      <Prompt promptType="action" promptText="" />
+    </WrapElem>
+  );
+};
+
 const chunkToolBox = (elems, expanded) => {
-  const chunks = chunk(elems, expanded ? 3 : 2);
+  const chunks = chunk(elems.filter(Boolean), expanded ? 3 : 2);
   return chunks.map((es, ix) => (
     <div className="toolbar-row" key={ix}>
       {es.map((e, j) => (
@@ -638,6 +696,10 @@ const ToolboxShow = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <TableElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -696,6 +758,10 @@ const ToolboxList = ({ expanded }) => {
         <DropMenuElem connectors={connectors} />
       ),
       //  <TableElem connectors={connectors} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
       options.allowMultipleElementsPerColumn &&
         !disable_toolbox?.line_break && (
           <LineBreakElem connectors={connectors} />
@@ -750,6 +816,10 @@ const ToolboxFilter = ({ expanded }) => {
       <TableElem connectors={connectors} />,
       <DropMenuElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -787,6 +857,10 @@ const ToolboxEdit = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <TableElem connectors={connectors} />,
       <ViewLinkElem connectors={connectors} options={options} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );
@@ -819,6 +893,10 @@ const ToolboxPage = ({ expanded }) => {
       <DropMenuElem connectors={connectors} />,
       <PageElem connectors={connectors} pages={pages} />,
       <TableElem connectors={connectors} />,
+      options.has_copilot_generate && <PromptContainerElem connectors={connectors} />,
+      // <PromptViewElem connectors={connectors} />,
+      // <PromptFieldElem connectors={connectors} />,
+      // <PromptActionElem connectors={connectors} />,
     ],
     expanded
   );

package/src/components/elements/Action.js

@@ -5,7 +5,7 @@
  */
 /*global notifyAlert, apply_showif*/
 
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import React, { Fragment, useContext, useEffect } from "react";
 import { useNode } from "@craftjs/core";
 import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
@@ -25,7 +25,7 @@ import {
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
-import { MultiLineCodeEditor } from "./MonacoEditor";
+
 import Select from "react-select";
 
 export /**
@@ -55,6 +55,7 @@ const Action = ({
   action_bgcol,
   action_bordercol,
   action_textcol,
+  action_class
 }) => {
   const {
     selected,
@@ -65,7 +66,7 @@ const Action = ({
    */
   return (
     <button
-      className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${
+      className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${action_class || ""} ${
         selected ? "selected-node" : ""
       } ${block ? "d-block" : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -146,13 +147,6 @@ const ActionSettings = () => {
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
-  const cfgFieldsForForm =
-    name === "run_js_code"
-      ? (cfgFields || []).filter((f) => f.name !== "code")
-      : cfgFields;
-
-  const runJsCodeModalOnly = false;
-  const [codeModalOpen, setCodeModalOpen] = useState(false);
   const setAProp = setAPropGen(setProp);
   const use_setting_action_n =
     setting_action_n || setting_action_n === 0 ? setting_action_n : 0;
@@ -457,116 +451,12 @@ const ActionSettings = () => {
           ) : null}
         </Fragment>
       ) : cfgFields ? (
-        <Fragment>
-          {name === "run_js_code" && runJsCodeModalOnly ? (
-            <div className="builder-config-field" data-field-name="code">
-              <label>{t("Code")}</label>
-              <button
-                type="button"
-                className="btn btn-secondary btn-sm"
-                onClick={() => setCodeModalOpen(true)}
-              >
-                {t("Open Code Popup")}
-              </button>
-            </div>
-          ) : null}
-          {name === "run_js_code" && !runJsCodeModalOnly ? (
-            <Fragment>
-              <ConfigForm
-                fields={(cfgFields || []).filter((f) => f.name === "code")}
-                configuration={configuration}
-                setProp={setProp}
-                node={node}
-                openPopup={() => setCodeModalOpen(true)}
-              />
-              {/* <div className="builder-config-field mt-2" data-field-name="code-modal-trigger">
-                <button
-                  type="button"
-                  className="btn btn-secondary btn-sm"
-                  onClick={() => setCodeModalOpen(true)}
-                >
-                  {t("Open Code Popup")}
-                </button>
-              </div> */}
-              <ConfigForm
-                fields={cfgFieldsForForm}
-                configuration={configuration}
-                setProp={setProp}
-                node={node}
-              />
-            </Fragment>
-          ) : (
-            <ConfigForm
-              fields={runJsCodeModalOnly ? cfgFieldsForForm : cfgFields}
-              configuration={configuration}
-              setProp={setProp}
-              node={node}
-            />
-          )}
-          {name === "run_js_code" && codeModalOpen ? (
-                <div
-                  className={`modal fade ${codeModalOpen ? "show" : ""}`}
-                  style={{
-                    display: codeModalOpen ? "block" : "none",
-                    zIndex: 1055,
-                  }}
-                  tabIndex={-1}
-                  role="dialog"
-                  aria-labelledby="codeModalLabel"
-                  aria-hidden={!codeModalOpen}
-                >
-                  <div
-                    className="modal-backdrop fade show"
-                    style={{ zIndex: 1050 }}
-                    onClick={() => setCodeModalOpen(false)}
-                    aria-hidden="true"
-                  />
-                  <div
-                    className="modal-dialog modal-dialog-centered modal-lg"
-                    role="document"
-                    style={{ zIndex: 1060 }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div className="modal-content code-modal">
-                      <div className="modal-header">
-                        <h5 className="modal-title" id="codeModalLabel">
-                          {t("Code")}
-                        </h5>
-                        <button
-                          type="button"
-                          className="btn-close"
-                          aria-label="Close"
-                          onClick={() => setCodeModalOpen(false)}
-                        />
-                      </div>
-                      <div className="modal-body">
-                        <MultiLineCodeEditor
-                          setProp={setProp}
-                          value={configuration?.code ?? ""}
-                          onChange={(code) =>
-                            setProp((prop) => {
-                              if (!prop.configuration)
-                                prop.configuration = {};
-                              prop.configuration.code = code;
-                            })
-                          }
-                          isModalEditor
-                        />
-                      </div>
-                      <div className="modal-footer">
-                        <button
-                          type="button"
-                          className="btn btn-secondary"
-                          onClick={() => setCodeModalOpen(false)}
-                        >
-                          {t("Close")}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : null}
-        </Fragment>
+        <ConfigForm
+          fields={cfgFields}
+          configuration={configuration}
+          setProp={setProp}
+          node={node}
+        />
       ) : null}
       {cfg_link ? (
         <a className="d-block mt-2" target="_blank" href={cfg_link}>

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/ArrayManager.js

@@ -56,6 +56,8 @@ export const ArrayManager = ({
   managedArrays,
   manageContents,
   initialAddProps,
+   contentsKey = "contents",
+  onLayoutChange,
 }) => {
   const { t } = useTranslation();
   const { actions, query, connectors } = useEditor((state, query) => {
@@ -77,13 +79,14 @@ export const ArrayManager = ({
         node.id,
         options
       );
-      layout.contents.splice(rmIx, 1);
+      layout[contentsKey].splice(rmIx, 1);
 
       managedArrays.forEach((arrNm) => {
-        layout[arrNm].splice(rmIx, 1);
+         if (layout[arrNm]) layout[arrNm].splice(rmIx, 1);
       });
       layout[countProp] = node[countProp] - 1;
-      layout[currentProp] = node[currentProp] - 1;
+      layout[currentProp] = Math.max(0, node[currentProp] - 1);
+      if (onLayoutChange) onLayoutChange(layout, "delete");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else {
@@ -119,7 +122,7 @@ export const ArrayManager = ({
         options
       );
 
-      swapElements(layout.contents, curIx, curIx + delta);
+      swapElements(layout[contentsKey], curIx, curIx + delta);
 
       managedArrays.forEach((arrNm) => {
         if (arrNm.includes(".")) {
@@ -130,6 +133,7 @@ export const ArrayManager = ({
           swapElements(layout[arrNm], curIx, curIx + delta);
       });
       layout[currentProp] = node[currentProp] + delta;
+      if (onLayoutChange) onLayoutChange(layout, "move");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else
@@ -156,7 +160,7 @@ export const ArrayManager = ({
         options
       );
 
-      layout.contents.push(null);
+      layout[contentsKey].push(null);
       managedArrays.forEach((arrNm) => {
         if (initialAddProps?.[arrNm])
           layout[arrNm][node[countProp]] = initialAddProps?.[arrNm];
@@ -164,6 +168,7 @@ export const ArrayManager = ({
       layout[currentProp] = +node[countProp];
       layout[countProp] = +node[countProp] + 1;
 
+      if (onLayoutChange) onLayoutChange(layout, "add");
       actions.delete(node.id);
       layoutToNodes(layout, query, actions, parentId, options, sibIx);
     } else