@saltcorn/builder 1.5.0-beta.12 → 1.5.0-beta.13

package/src/components/elements/MonacoEditor.js

@@ -0,0 +1,182 @@
+import React, { Fragment, useState, useEffect, useRef } from "react";
+import optionsCtx from "../context";
+
+import Editor, { useMonaco } from "@monaco-editor/react";
+
+const setMonacoLanguage = async (monaco, options, isStatements) => {
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    noLib: true,
+    allowNonTsExtensions: true,
+  });
+  if (options.setMonaco) return;
+
+  options.setMonaco = true;
+  const tsres = await fetch(
+    `/admin/ts-declares?${options.tableName ? `table=${options.tableName}` : ""}&user=yes`
+  );
+  const tsds = await tsres.text();
+
+  monaco.languages.typescript.typescriptDefaults.addExtraLib(tsds);
+  // for code ending in return: https://github.com/microsoft/monaco-editor/issues/1661
+  // codes for await ignore are shown by hover card
+  if (isStatements)
+    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      //noSemanticValidation: false,
+      //noSyntaxValidation: false,
+      diagnosticCodesToIgnore: [1108, 1378, 1375, 7044, 2580, 80005],
+    });
+};
+
+export const SingleLineEditor = ({
+  setProp,
+  value,
+  propKey,
+  onChange,
+  className,
+}) => {
+  const options = React.useContext(optionsCtx);
+
+  const handleEditorWillMount = (monaco) => {
+    setMonacoLanguage(monaco, options, false);
+  };
+  return (
+    <div className="form-control p-0 pt-1">
+      <Editor
+        className={className || ""}
+        height="22px"
+        value={value}
+        onChange={(value) => {
+          onChange && onChange(value);
+          setProp && propKey && setProp((prop) => (prop[propKey] = value));
+        }}
+        defaultLanguage="typescript"
+        //onMount={handleEditorDidMount}
+        //beforeMount={handleEditorWillMount}
+        options={singleLineEditorOptions}
+        //theme="myCoolTheme"
+        beforeMount={handleEditorWillMount}
+      />
+    </div>
+  );
+};
+
+export const MultiLineCodeEditor = ({ setProp, value, onChange }) => {
+  const options = React.useContext(optionsCtx);
+
+  const handleEditorWillMount = (monaco) => {
+    setMonacoLanguage(monaco, options, true);
+  };
+  return (
+    <div className="form-control p-0 pt-2">
+      <Editor
+        height="150px"
+        value={value}
+        onChange={onChange}
+        defaultLanguage="typescript"
+        //onMount={handleEditorDidMount}
+        //beforeMount={handleEditorWillMount}
+        options={multiLineEditorOptions}
+        //theme="myCoolTheme"
+        beforeMount={handleEditorWillMount}
+      />
+    </div>
+  );
+};
+
+const multiLineEditorOptions = {
+  fontSize: "14px",
+  fontWeight: "normal",
+  wordWrap: "off",
+  lineNumbers: "off",
+  lineNumbersMinChars: 0,
+  overviewRulerLanes: 0,
+  overviewRulerBorder: false,
+  hideCursorInOverviewRuler: true,
+  lineDecorationsWidth: 10,
+  glyphMargin: false,
+  folding: false,
+  // disable `Find`
+  find: {
+    addExtraSpaceOnTop: false,
+    autoFindInSelection: "never",
+    seedSearchStringFromSelection: false,
+  },
+  minimap: { enabled: false },
+  // see: https://github.com/microsoft/monaco-editor/issues/1746
+  wordBasedSuggestions: false,
+  // avoid links underline
+  links: false,
+  // avoid highlight hover word
+  occurrencesHighlight: false,
+  cursorStyle: "line-thin",
+  // hide current row highlight grey border
+  // see: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html#renderlinehighlight
+  renderLineHighlight: "none",
+  contextmenu: false,
+  // default selection is rounded
+  roundedSelection: false,
+  hover: {
+    // unit: ms
+    // default: 300
+    delay: 100,
+  },
+  acceptSuggestionOnEnter: "on",
+  // auto adjust width and height to parent
+  // see: https://github.com/Microsoft/monaco-editor/issues/543#issuecomment-321767059
+  automaticLayout: true,
+  // if monaco is inside a table, hover tips or completion may casue table body scroll
+  fixedOverflowWidgets: true,
+};
+
+//https://codesandbox.io/p/sandbox/react-monaco-single-line-forked-nsmhp6?file=%2Fsrc%2FApp.js%3A28%2C31
+const singleLineEditorOptions = {
+  fontSize: "14px",
+  fontWeight: "normal",
+  wordWrap: "off",
+  lineNumbers: "off",
+  lineNumbersMinChars: 0,
+  overviewRulerLanes: 0,
+  overviewRulerBorder: false,
+  hideCursorInOverviewRuler: true,
+  lineDecorationsWidth: 10,
+  glyphMargin: false,
+  folding: false,
+  scrollBeyondLastColumn: 0,
+  scrollbar: {
+    horizontal: "hidden",
+    vertical: "hidden",
+    // avoid can not scroll page when hover monaco
+    alwaysConsumeMouseWheel: false,
+  },
+  // disable `Find`
+  find: {
+    addExtraSpaceOnTop: false,
+    autoFindInSelection: "never",
+    seedSearchStringFromSelection: false,
+  },
+  minimap: { enabled: false },
+  // see: https://github.com/microsoft/monaco-editor/issues/1746
+  wordBasedSuggestions: false,
+  // avoid links underline
+  links: false,
+  // avoid highlight hover word
+  occurrencesHighlight: false,
+  cursorStyle: "line-thin",
+  // hide current row highlight grey border
+  // see: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html#renderlinehighlight
+  renderLineHighlight: "none",
+  contextmenu: false,
+  // default selection is rounded
+  roundedSelection: false,
+  hover: {
+    // unit: ms
+    // default: 300
+    delay: 100,
+  },
+  acceptSuggestionOnEnter: "on",
+  // auto adjust width and height to parent
+  // see: https://github.com/Microsoft/monaco-editor/issues/543#issuecomment-321767059
+  automaticLayout: true,
+  // if monaco is inside a table, hover tips or completion may casue table body scroll
+  fixedOverflowWidgets: true,
+};

package/src/components/elements/Text.js

@@ -26,6 +26,7 @@ import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import fas from "@fortawesome/free-solid-svg-icons";
 import far from "@fortawesome/free-regular-svg-icons";
+import { SingleLineEditor } from "./MonacoEditor";
 const ckConfig = {
   toolbarGroups: [
     { name: "document", groups: ["mode", "document", "doctools"] },
@@ -202,13 +203,7 @@ const TextSettings = () => {
       )}
       <label>Text to display</label>
       {allowFormula && isFormula.text ? (
-        <input
-          type="text"
-          className="text-to-display form-control"
-          value={text}
-          onChange={setAProp("text")}
-          spellCheck={false}
-        />
+        <SingleLineEditor setProp={setProp} value={text} propKey="text" />
       ) : (
         <ErrorBoundary>
           <div className="border">

package/src/components/elements/ViewLink.js

@@ -31,6 +31,16 @@ import {
   Relation,
   buildTableCaches,
 } from "@saltcorn/common-code";
+import { SingleLineEditor } from "./MonacoEditor";
+
+/*
+  <SingleLineEditor
+                setProp={setProp}
+                value={extra_state_fml}
+                propKey="extra_state_fml"
+              />
+
+*/
 
 export /**
  * @param {object} props

package/src/components/elements/utils.js

@@ -28,6 +28,7 @@ import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import Tippy from "@tippyjs/react";
 import { RelationType } from "@saltcorn/common-code";
 import Select from "react-select";
+import { MultiLineCodeEditor, SingleLineEditor } from "./MonacoEditor";
 
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
@@ -204,17 +205,12 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
     <Fragment>
       <div className="input-group  input-group-sm w-100">
         {isFormula[nodekey] ? (
-          <input
-            type="text"
-            className="form-control text-to-display"
+          <SingleLineEditor
             value={node[nodekey] || ""}
-            spellCheck={false}
-            onChange={(e) => {
-              if (e.target) {
-                const target_value = e.target.value;
-                setProp((prop) => (prop[nodekey] = target_value));
-              }
+            onChange={(target_value) => {
+              setProp((prop) => (prop[nodekey] = target_value));
             }}
+            className="text-to-display"
           />
         ) : (
           children
@@ -487,8 +483,12 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const Accordion = ({ titles, children }) => {
-  const [currentTab, setCurrentTab] = useState(0);
+const Accordion = ({ titles, children, value, onChange }) => {
+  const [currentTab, setCurrentTab] = useState(value || 0);
+  const setTab = (ix) => {
+    setCurrentTab(ix);
+    onChange && onChange(ix);
+  };
   return (
     <Fragment>
       {children.map((child, ix) => {
@@ -499,7 +499,7 @@ const Accordion = ({ titles, children }) => {
               className={`bg-${
                 isCurrent ? "primary" : "secondary"
               } ps-1 text-white w-100 mt-1`}
-              onClick={() => setCurrentTab(ix)}
+              onClick={() => setTab(ix)}
             >
               <span className="w-1em">
                 {isCurrent ? (
@@ -1067,17 +1067,25 @@ const ConfigField = ({
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
-    code: () => (
-      <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}
-      />
-    ),
+    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}
+          value={value}
+          onChange={myOnChange}
+        />
+      ),
     select: () => {
       if (field.class?.includes?.("selectizable")) {
         const seloptions = field.options.map((o, ix) =>