@saltcorn/builder 1.7.0-beta.2 → 1.7.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.7.0-beta.2",
+  "version": "1.7.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.7.0-beta.2",
+    "@saltcorn/common-code": "1.7.0-beta.3",
     "@tippyjs/react": "4.2.6",
     "babel-loader": "9.2.1",
     "ckeditor4-react": "2.0.0",

package/src/components/elements/Container.js

@@ -5,7 +5,7 @@
  */
 /* globals $, validate_expression_elem */
 
-import React, { useContext, Fragment } from "react";
+import React, { useContext, Fragment, useRef } from "react";
 
 import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
@@ -48,6 +48,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faScroll, faRobot } from "@fortawesome/free-solid-svg-icons";
 import { BoxModelEditor } from "./BoxModelEditor";
+import { SingleLineEditor } from "./MonacoEditor";
 import previewCtx from "../preview_context";
 
 export /**
@@ -344,6 +345,7 @@ const ContainerSettings = () => {
    * @returns {function}
    */
   const setAProp = setAPropGen(setProp);
+  const showIfEditorRef = useRef(null);
   //console.log("transform", transform);
 
   return (
@@ -1033,14 +1035,15 @@ const ContainerSettings = () => {
           )}
           <tr>
             <td colSpan={2}>
-              <input
-                type="text"
-                placeholder={t("Example: x === y")}
-                className="form-control text-to-display"
+              <SingleLineEditor
+                ref={showIfEditorRef}
                 value={showIfFormula}
-                spellCheck={false}
-                onChange={setAProp("showIfFormula")}
-                onInput={(e) => validate_expression_elem($(e.target))}
+                setProp={setProp}
+                propKey="showIfFormula"
+                placeholder={t("Example: x === y")}
+                onInput={(value) =>
+                  validate_expression_elem(value, showIfEditorRef.current)
+                }
               />
               <div style={{ marginTop: "-5px" }}>
                 <small className="text-muted font-monospace">

package/src/components/elements/Tabs.js

@@ -3,14 +3,16 @@
  * @module components/elements/Tabs
  * @subcategory components / elements
  */
+/* globals validate_expression_elem */
 
-import React, { Fragment, useState, useContext, useEffect } from "react";
+import React, { Fragment, useState, useContext, useEffect, useRef } from "react";
 import useTranslation from "../../hooks/useTranslation";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
 import { setAPropGen, buildOptions, ConfigField } from "./utils";
 import { ArrayManager } from "./ArrayManager";
+import { SingleLineEditor } from "./MonacoEditor";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -235,6 +237,7 @@ const TabsSettings = () => {
         });
   }, [field]);
   const setAProp = setAPropGen(setProp);
+  const showIfEditorRef = useRef(null);
   const styleOptions = ["Tabs", "Pills", "Accordion"];
   if (["show", "edit"].includes(options.mode))
     styleOptions.push("Value switch");
@@ -456,19 +459,18 @@ const TabsSettings = () => {
                 </tr>
                 <tr>
                   <td colSpan={2}>
-                    <input
-                      type="text"
-                      spellCheck={false}
-                      className="form-control text-to-display"
+                    <SingleLineEditor
+                      ref={showIfEditorRef}
                       value={showif?.[use_setting_tab_n] || ""}
-                      onChange={(e) => {
-                        if (!e.target) return;
-                        const value = e.target.value;
+                      onChange={(value) => {
                         setProp((prop) => {
                           if (!prop.showif) prop.showif = [];
                           prop.showif[use_setting_tab_n] = value;
                         });
                       }}
+                      onInput={(value) =>
+                        validate_expression_elem(value, showIfEditorRef.current)
+                      }
                     />
                   </td>
                 </tr>