@saltcorn/builder 1.6.0-alpha.13 → 1.6.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.6.0-alpha.13",
+  "version": "1.6.0-alpha.15",
   "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-alpha.13",
+    "@saltcorn/common-code": "1.6.0-alpha.15",
     "@tippyjs/react": "4.2.6",
     "babel-jest": "^29.7.0",
     "babel-loader": "9.2.1",

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 /**
@@ -146,13 +146,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 +450,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/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/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",

package/src/components/elements/View.js

@@ -405,6 +405,7 @@ const ViewSettings = () => {
             value={extra_state_fml}
             propKey="extra_state_fml"
             onChange={setAProp("extra_state_fml")}
+            stateExpr
           />
           {errorString ? (
             <small className="text-danger font-monospace d-block">

package/src/components/elements/ViewLink.js

@@ -321,6 +321,7 @@ const ViewLinkSettings = () => {
                 value={extra_state_fml}
                 propKey="extra_state_fml"
                 onChange={setAProp("extra_state_fml")}
+                stateExpr
               />
               {errorString ? (
                 <small className="text-danger font-monospace d-block">

package/src/components/elements/utils.js

@@ -932,6 +932,95 @@ const ColorInput = ({ value, onChange }) =>
     </button>
   );
 
+const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const { t } = useTranslation();
+  return (
+    <Fragment>
+      {!hideLabel && (
+        <label>
+          {t(label)}{" "}
+          <i
+            className="fas fa-external-link-alt ms-1"
+            style={{ cursor: "pointer" }}
+            onClick={() => setModalOpen(true)}
+            title={t("Open code popup")}
+          ></i>
+        </label>
+      )}
+      {hideLabel && (
+        <i
+          className="fas fa-external-link-alt ms-1"
+          style={{ cursor: "pointer" }}
+          onClick={() => setModalOpen(true)}
+          title={t("Open code popup")}
+        ></i>
+      )}
+      <MultiLineCodeEditor
+        setProp={setProp}
+        value={value}
+        onChange={onChange}
+        mode={mode}
+      />
+      {modalOpen ? (
+        <div
+          className={`modal fade show`}
+          style={{ display: "block", zIndex: 1055 }}
+          tabIndex={-1}
+          role="dialog"
+          aria-labelledby="codeModalLabel"
+          aria-hidden={false}
+        >
+          <div
+            className="modal-backdrop fade show"
+            style={{ zIndex: 1050 }}
+            onClick={() => setModalOpen(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(label)}
+                </h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  aria-label="Close"
+                  onClick={() => setModalOpen(false)}
+                />
+              </div>
+              <div className="modal-body">
+                <MultiLineCodeEditor
+                  setProp={setProp}
+                  value={value}
+                  onChange={onChange}
+                  isModalEditor
+                  mode={mode}
+                />
+              </div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  onClick={() => setModalOpen(false)}
+                >
+                  {t("Close")}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </Fragment>
+  );
+};
+
 export /**
  * @param {object} props
  * @param {object[]} props.fields
@@ -953,7 +1042,6 @@ const ConfigForm = ({
   onChange,
   tableName,
   fieldName,
-  openPopup
 }) => (
   <div className="form-namespace">
     {fields.map((f, ix) => {
@@ -968,7 +1056,7 @@ const ConfigForm = ({
       }
       return (
         <div key={ix} className="builder-config-field" data-field-name={f.name}>
-          {!isCheckbox(f) ? (
+          {!isCheckbox(f) && f.input_type !== "code" ? (
             <label>
               {f.label || f.name}
               {f.help ? (
@@ -978,7 +1066,7 @@ const ConfigForm = ({
                   table_name={tableName}
                 />
               ) : null}
-              {" "}{openPopup && <i class="fas fa-external-link-alt " onClick={openPopup}></i>}
+              {" "}
             </label>
           ) : null}
           <ConfigField
@@ -1233,25 +1321,33 @@ const ConfigField = ({
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
-    code: () =>
-      field?.attributes?.expression_type === "row" ||
-      field?.attributes?.expression_type === "query" ? (
-        <textarea
-          rows="6"
-          type="text"
-          className={`field-${field?.name} form-control`}
-          value={value}
-          name={field?.name}
-          onChange={(e) => e.target && myOnChange(e.target.value)}
-          spellCheck={false}
-        />
-      ) : (
-        <MultiLineCodeEditor
-          setProp={setProp}
+    code: () => {
+      if (
+        field?.attributes?.expression_type === "row" ||
+        field?.attributes?.expression_type === "query"
+      ) {
+        return (
+          <textarea
+            rows="6"
+            type="text"
+            className={`field-${field?.name} form-control`}
+            value={value}
+            name={field?.name}
+            onChange={(e) => e.target && myOnChange(e.target.value)}
+            spellCheck={false}
+          />
+        );
+      }
+      return (
+        <CodeFieldWithModal
           value={value}
           onChange={myOnChange}
+          setProp={setProp}
+          mode={field?.attributes?.mode}
+          label={field?.label || field?.name || "Code"}
         />
-      ),
+      );
+    },
     select: () => {
       if (field.class?.includes?.("selectizable")) {
         const seloptions = field.options.map((o, ix) =>
@@ -1500,7 +1596,7 @@ const SettingsRow = ({
   valuePostfix,
 }) => {
   const { t } = useTranslation();
-  const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
+  const fullWidth = ["String", "Bool", "textarea"].includes(field.type) || field.input_type === "code";
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
     <OrFormula
@@ -1530,7 +1626,7 @@ const SettingsRow = ({
     <tr>
       {fullWidth ? (
         <td colSpan="2">
-          {needLabel && <label>{field.label}</label>}
+          {needLabel && field.input_type !== "code" && <label>{field.label}</label>}
           {inner}
           {field.sublabel ? (
             <i