@saltcorn/builder 1.6.0-alpha.8 → 1.6.0-beta.1

package/src/components/elements/CustomLayer.js

@@ -0,0 +1,285 @@
+
+import React, { useState, useEffect } 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";
+
+const CustomLayer = ({ children }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const [isMouseOver, setIsMouseOver] = useState(false);
+
+  const {
+    id,
+    depth,
+    expanded,
+    actions: { toggleLayer, setExpandedState },
+    connectors: { layer, drag, layerHeader },
+  } = useLayer((layer) => ({
+    expanded: layer?.expanded,
+  }));
+
+  const {
+    displayName,
+    hasNodes,
+    isHiddenColumn,
+    selected,
+    parentId,
+    childIndex,
+    siblingCount,
+    canMoveOut,
+    connectors: editorConnectors,
+    actions: editorActions,
+    query,
+  } = useEditor((state) => {
+    const node = state.nodes[id];
+    const data = node?.data;
+
+    let name =
+      data?.custom?.displayName ||
+      data?.props?.custom?.displayName ||
+      data?.displayName ||
+      data?.name ||
+      id;
+
+    if (name === "ROOT" || name === "Canvas") {
+      name = data?.name || name;
+    }
+
+    // Rename linked Columns for Tabs and Table
+    if (name === "Column" && data?.parent) {
+      const parentNode = state.nodes[data.parent];
+      const parentName = parentNode?.data?.displayName || parentNode?.data?.name;
+      const parentLinked = parentNode?.data?.linkedNodes;
+      if (parentLinked) {
+        const key = Object.keys(parentLinked).find(k => parentLinked[k] === id);
+        if (key) {
+          if (parentName === "Tabs") {
+            const index = parseInt(key.replace("Tab", ""), 10);
+            if (!isNaN(index)) {
+              name = `Tab ${index + 1}`;
+            }
+          } else if (parentName === "Table") {
+            const match = key.match(/^cell_(\d+)_(\d+)$/);
+            if (match) {
+              name = `R${parseInt(match[1], 10) + 1}C${parseInt(match[2], 10) + 1}`;
+            }
+          }
+        }
+      }
+    }
+
+    const nodes = data?.nodes;
+    const linkedNodes = data?.linkedNodes;
+    const hasChildren =
+      (nodes && nodes.length > 0) ||
+      (linkedNodes && Object.keys(linkedNodes).length > 0);
+
+    // Hide the ROOT Column and linked Columns of Card/Container
+    let shouldHide = false;
+    if (id === "ROOT") {
+      shouldHide = true;
+    } else if ((data?.displayName === "Column" || data?.name === "Column") && data?.parent) {
+      const parentNode = state.nodes[data.parent];
+      const parentName = parentNode?.data?.displayName || parentNode?.data?.name;
+      if (parentName === "Card" || parentName === "Container") {
+        const parentLinked = parentNode?.data?.linkedNodes;
+        if (parentLinked && Object.values(parentLinked).includes(id)) {
+          shouldHide = true;
+        }
+      }
+    }
+
+    const isSelected =
+      state.events?.selected?.has?.(id) || state.events?.selected === id;
+
+    const parent = data?.parent;
+    let childIx = -1;
+    let sibCount = 0;
+    if (parent && state.nodes[parent]) {
+      const parentNodes = state.nodes[parent]?.data?.nodes || [];
+      childIx = parentNodes.indexOf(id);
+      sibCount = parentNodes.length;
+    }
+
+    let moveOut = false;
+    if (parent && state.nodes[parent]) {
+      const grandparent = state.nodes[parent]?.data?.parent;
+      if (grandparent && grandparent !== "ROOT" && state.nodes[grandparent]) {
+        const greatGrandparent = state.nodes[grandparent]?.data?.parent;
+        if (greatGrandparent && state.nodes[greatGrandparent]) {
+          moveOut = true;
+        }
+      }
+    }
+
+    return {
+      displayName: name,
+      hasNodes: hasChildren,
+      isHiddenColumn: shouldHide,
+      selected: isSelected,
+      parentId: parent,
+      childIndex: childIx,
+      siblingCount: sibCount,
+      canMoveOut: moveOut,
+    };
+  });
+
+  // Keep hidden columns always expanded so their children are visible
+  useEffect(() => {
+    if (isHiddenColumn && !expanded) {
+      setExpandedState(true);
+    }
+  }, [isHiddenColumn, expanded, setExpandedState]);
+
+  return (
+    <div
+      ref={(dom) => { layer(dom); if (dom) editorConnectors.drop(dom, id); }}
+      style={isHiddenColumn ? { marginLeft: "-10px" } : undefined}
+    >
+      <div
+        ref={(dom) => { drag(dom); layerHeader(dom); }}
+        className={`builder-layer-node ${isMouseOver ? "hovered" : ""} ${selected ? "selected" : ""}`}
+        style={{
+          cursor: isHiddenColumn ? "default" : "pointer",
+          display: isHiddenColumn ? "none" : "flex",
+          alignItems: "center",
+          padding: `4px 4px 4px ${depth * 10 + 6}px`,
+          overflow: "hidden",
+        }}
+        onClick={() => editorActions.selectNode(id)}
+        onMouseEnter={() => setIsMouseOver(true)}
+        onMouseLeave={() => setIsMouseOver(false)}
+      >
+
+        {isEditing ? (
+          <input
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onBlur={() => {
+              const trimmed = editValue.trim();
+              editorActions.setCustom(id, (custom) => {
+                if (trimmed && trimmed !== (custom.displayName || "")) {
+                  custom.displayName = trimmed;
+                } else if (!trimmed) {
+                  delete custom.displayName;
+                }
+              });
+              setIsEditing(false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") e.target.blur();
+              if (e.key === "Escape") setIsEditing(false);
+            }}
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            autoFocus
+            style={{
+              flexGrow: 1,
+              minWidth: 0,
+              width: 0,
+              fontSize: 13,
+              padding: "0 2px",
+              border: "1px solid #2680eb",
+              outline: "none",
+              background: "transparent",
+              color: "inherit",
+            }}
+          />
+        ) : (
+          <span
+            style={{
+              fontSize: 13,
+              flexGrow: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              setEditValue(displayName);
+              setIsEditing(true);
+            }}
+          >
+            {displayName}
+          </span>
+        )}
+
+        {isMouseOver && !isEditing && parentId && childIndex >= 0 && (
+          <span className="layer-move-buttons" style={{ display: "inline-flex", gap: 2, marginLeft: 4, flexShrink: 0 }}>
+            {childIndex > 0 && (
+              <span
+                title="Move up"
+                style={{ cursor: "pointer", padding: "0 2px" }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  editorActions.move(id, parentId, childIndex - 1);
+                }}
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <FontAwesomeIcon icon={faArrowUp} fontSize={10} />
+              </span>
+            )}
+            {childIndex >= 0 && childIndex < siblingCount - 1 && (
+              <span
+                title="Move down"
+                style={{ cursor: "pointer", padding: "0 2px" }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  editorActions.move(id, parentId, childIndex + 2);
+                }}
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <FontAwesomeIcon icon={faArrowDown} fontSize={10} />
+              </span>
+            )}
+            {canMoveOut && (
+              <span
+                title="Move out of container"
+                style={{ cursor: "pointer", padding: "0 2px" }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  try {
+                    const parentData = query.node(parentId).get();
+                    const grandparentId = parentData.data.parent;
+                    const grandparentData = query.node(grandparentId).get();
+                    const greatGrandparentId = grandparentData.data.parent;
+                    const greatGrandparentChildren = query.node(greatGrandparentId).childNodes();
+                    const grandparentIndex = greatGrandparentChildren.indexOf(grandparentId);
+                    editorActions.move(id, greatGrandparentId, grandparentIndex >= 0 ? grandparentIndex + 1 : greatGrandparentChildren.length);
+                  } catch (err) {
+                    console.warn("Move out failed:", err);
+                  }
+                }}
+                onMouseDown={(e) => e.stopPropagation()}
+              >
+                <FontAwesomeIcon icon={faLevelUpAlt} fontSize={10} />
+              </span>
+            )}
+          </span>
+        )}
+
+        {hasNodes && (
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleLayer();
+            }}
+          >
+            <FontAwesomeIcon
+              icon={expanded ? faChevronUp : faChevronDown}
+              fontSize={14}
+              className="float-end fa-lg"
+            />
+          </span>
+        )}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default CustomLayer;

package/src/components/elements/DropDownFilter.js

@@ -4,7 +4,9 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment, useState, useContext, useEffect } from "react";
+/* globals validate_bool_expression_elem */
+
+import React, { Fragment, useState, useContext, useEffect, useRef } from "react";
 import { useNode } from "@craftjs/core";
 import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
@@ -73,6 +75,7 @@ const DropDownFilterSettings = () => {
   }));
   const options = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
+  const editorRef = useRef(null);
   let select_all_options;
   const field = options.fields.find((f) => f.name === name);
   if (field?.type === "String" && field.attributes?.options)
@@ -121,9 +124,13 @@ const DropDownFilterSettings = () => {
           </td>
           <td>
             <SingleLineEditor
+              ref={editorRef}
               value={where}
               setProp={setProp}
               propKey="where"
+              onInput={(value) =>
+                validate_bool_expression_elem(value, editorRef.current)
+              }
             />
           </td>
         </tr>

package/src/components/elements/DropMenu.js

@@ -33,7 +33,7 @@ export /**
  * @subcategory components
  */
 const DropMenu = ({
-  children,
+  contents,
   action_style,
   action_size,
   action_icon,
@@ -50,7 +50,6 @@ const DropMenu = ({
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   const [showDropdown, setDropdown] = useState(false);
-  //const [dropWidth, setDropWidth] = useState(200);
   return (
     <div
       className={`${selected ? "selected-node" : ""} ${block ? "d-block" : "d-inline"}`}
@@ -82,7 +81,9 @@ const DropMenu = ({
           showDropdown ? "show" : ""
         } ${menu_direction === "end" ? "dropdown-menu-end" : ""}`}
       >
-        <div className="canvas d-flex flex-column">{children}</div>
+        <Element canvas id="dropmenu-contents" is={Column}>
+          {contents}
+        </Element>
       </div>
     </div>
   );
@@ -177,8 +178,13 @@ DropMenu.craft = {
   related: {
     settings: DropMenuSettings,
     segment_type: "dropdown_menu",
-    hasContents: true,
     fields: [
+      {
+        label: "Contents",
+        name: "contents",
+        type: "Nodes",
+        nodeID: "dropmenu-contents",
+      },
       "label",
       "block",
       "action_style",

package/src/components/elements/HTMLCode.js

@@ -45,7 +45,9 @@ const fields = (mode) => {
     {
       label: "HTML Code",
       name: "text",
-      type: "textarea",
+      input_type: "code",
+      type: "code",
+      attributes: { mode: "text/html" },
       segment_name: "contents",
       onSave: (segment, node_props) => {
         const div = document.createElement("div");

package/src/components/elements/MonacoEditor.js

@@ -3,6 +3,24 @@ import optionsCtx from "../context";
 
 import Editor, { useMonaco } from "@monaco-editor/react";
 
+export const mimeToMonacoLanguage = (mode) => {
+  if (!mode) return "typescript";
+  const map = {
+    "text/javascript": "typescript",
+    "application/javascript": "typescript",
+    "text/html": "html",
+    "text/css": "css",
+    "application/json": "json",
+    "text/x-sql": "sql",
+    "text/x-python": "python",
+    "text/x-yaml": "yaml",
+    "text/xml": "xml",
+    "text/x-markdown": "markdown",
+    "text/typescript": "typescript",
+  };
+  return map[mode] || mode;
+};
+
 const setMonacoLanguage = async (monaco, options, isStatements) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     noLib: true,
@@ -27,33 +45,108 @@ const setMonacoLanguage = async (monaco, options, isStatements) => {
     });
 };
 
+// add hidden-prefix
+// line 1 holds the typed prefix, the user edits from line 2 onwards
+const setupVirtualPrefix = (editor, monaco) => {
+  const model = editor.getModel();
+  editor.setHiddenAreas([{ startLineNumber: 1, endLineNumber: 1 }]);
+  editor.onDidChangeCursorPosition((e) => {
+    if (e.position.lineNumber < 2)
+      editor.setPosition({ lineNumber: 2, column: 1 });
+  });
+  editor.onKeyDown((e) => {
+    const pos = editor.getPosition();
+    if (
+      pos.lineNumber === 2 &&
+      pos.column === 1 &&
+      e.keyCode === monaco.KeyCode.Backspace
+    ) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  });
+  // copy without the prefix line
+  editor.addAction({
+    id: "copy-editable-only",
+    label: "Copy Only User Content",
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyC],
+    run: (ed) => {
+      const selection = ed.getSelection();
+      if (selection.isEmpty()) return;
+      const safeSelection = selection.intersectRanges(
+        new monaco.Range(
+          2,
+          1,
+          model.getLineCount(),
+          model.getLineMaxColumn(model.getLineCount())
+        )
+      );
+      if (safeSelection)
+        navigator.clipboard.writeText(model.getValueInRange(safeSelection));
+    },
+  });
+  // select all without the prefix line
+  editor.addAction({
+    id: "select-editable-only",
+    label: "Select Only User Content",
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyA],
+    run: (ed) => {
+      ed.setSelection(
+        new monaco.Range(
+          2,
+          1,
+          model.getLineCount(),
+          model.getLineMaxColumn(model.getLineCount())
+        )
+      );
+    },
+  });
+};
+
 export const SingleLineEditor = React.forwardRef(
-  ({ setProp, value, propKey, onChange, onInput, className }, ref) => {
+  (
+    { setProp, value, propKey, onChange, onInput, className, stateExpr },
+    ref
+  ) => {
     const options = React.useContext(optionsCtx);
+    const activePrefix = stateExpr ? "const _: Row =" : null;
 
     const handleEditorWillMount = (monaco) => {
       setMonacoLanguage(monaco, options, false);
     };
 
     const handleEditorDidMount = (editor, monaco) => {
+      if (activePrefix) {
+        setupVirtualPrefix(editor, monaco);
+        return;
+      }
       if (!onInput) return;
 
       editor.onDidChangeModelContent(() => {
-        const value = editor.getValue();
-        onInput(value);
+        onInput(editor.getValue());
       });
     };
 
+    const isEmpty = !value || value.trim() === "";
+    const editorValue = activePrefix
+      ? `${isEmpty ? "//" : ""} ${activePrefix}\n${value || ""}`
+      : value;
+
     return (
       <div ref={ref} className="form-control p-0 pt-1">
         <Editor
           placeholder={"sdfffsd"}
           className={className || ""}
           height="22px"
-          value={value}
-          onChange={(value) => {
-            onChange && onChange(value);
-            setProp && propKey && setProp((prop) => (prop[propKey] = value));
+          value={editorValue}
+          onChange={(fullValue) => {
+            const userValue = activePrefix
+              ? (fullValue || "").substring((fullValue || "").indexOf("\n") + 1)
+              : fullValue;
+            onChange && onChange(userValue);
+            setProp &&
+              propKey &&
+              setProp((prop) => (prop[propKey] = userValue));
           }}
           defaultLanguage="typescript"
           //onMount={handleEditorDidMount}
@@ -68,25 +161,37 @@ export const SingleLineEditor = React.forwardRef(
   }
 );
 
-export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor = false }) => {
+export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor = false, mode }) => {
   const options = React.useContext(optionsCtx);
+  const resolvedLanguage = mimeToMonacoLanguage(mode);
+  const useTypeScriptSetup = resolvedLanguage === "typescript" || resolvedLanguage === "javascript";
 
   const handleEditorWillMount = (monaco) => {
-    setMonacoLanguage(monaco, options, true);
+    if (useTypeScriptSetup) {
+      setMonacoLanguage(monaco, options, true);
+    }
   };
+
+  const handleEditorDidMount = (editor, monaco) => {
+    if (!useTypeScriptSetup) {
+      const model = editor.getModel();
+      if (model) {
+        monaco.editor.setModelLanguage(model, resolvedLanguage);
+      }
+    }
+  };
+
   return (
     <div className="form-control p-0 pt-2">
       <Editor
         height={isModalEditor ? "100%" : "150px"}
         value={value}
         onChange={onChange}
-        defaultLanguage="typescript"
-        //onMount={handleEditorDidMount}
-        //beforeMount={handleEditorWillMount}
+        defaultLanguage={resolvedLanguage}
         options={multiLineEditorOptions}
-        //theme="myCoolTheme"
         beforeMount={handleEditorWillMount}
-        className={isModalEditor ? 'code-modal-form' : ''}
+        onMount={handleEditorDidMount}
+        className={isModalEditor ? "code-modal-form" : ""}
       />
     </div>
   );
@@ -94,7 +199,7 @@ export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor =
 
 const multiLineEditorOptions = {
   fontSize: "14px",
-  minHeight:"80vh",
+  minHeight: "80vh",
   fontWeight: "normal",
   wordWrap: "off",
   lineNumbers: "off",