@saltcorn/builder 0.6.3 → 0.6.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.6.3",
+  "version": "0.6.4-beta.1",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -15,32 +15,33 @@
   "author": "Tom Nielsen",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/core": "7.9.6",
+    "@babel/preset-env": "7.9.6",
+    "@babel/preset-react": "7.9.4",
     "@craftjs/core": "0.1.0-beta.20",
+    "@craftjs/utils": "0.1.0-beta.20",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
-    "@fonticonpicker/react-fonticonpicker": "^1.2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-regular-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "babel-loader": "^8.1.0",
-    "ckeditor4-react": "^1.4.0",
-    "classnames": "^2.2.6",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-bootstrap-icons": "^1.5.0",
-    "react-contenteditable": "^3.3.5",
-    "react-dom": "^16.13.1",
-    "react-transition-group": "^4.4.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "@fonticonpicker/react-fonticonpicker": "1.2.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.34",
+    "@fortawesome/free-regular-svg-icons": "5.15.2",
+    "@fortawesome/free-solid-svg-icons": "5.15.2",
+    "@fortawesome/react-fontawesome": "0.1.14",
+    "babel-loader": "8.1.0",
+    "ckeditor4-react": "1.4.2",
+    "classnames": "2.2.6",
+    "prop-types": "15.7.2",
+    "react": "16.13.1",
+    "react-bootstrap-icons": "1.5.0",
+    "react-contenteditable": "3.3.5",
+    "react-dom": "16.13.1",
+    "react-transition-group": "4.4.1",
+    "webpack": "4.43.0",
+    "webpack-cli": "3.3.11"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "styled-components": "^4.4.1"
+    "styled-components": "4.4.1"
   }
 }

package/src/components/elements/Field.js

@@ -10,10 +10,11 @@ import optionsCtx from "../context";
 import previewCtx from "../preview_context";
 import {
   blockProps,
-  BlockSetting,
+  BlockOrInlineSetting,
   TextStyleRow,
   ConfigForm,
   setInitialConfig,
+  isBlock,
   fetchFieldPreview,
 } from "./utils";
 
@@ -27,9 +28,16 @@ export /**
  * @returns {div}
  * @category saltcorn-builder
  * @subcategory components
- * @namespace 
+ * @namespace
  */
-const Field = ({ name, fieldview, block, textStyle, configuration }) => {
+const Field = ({
+  name,
+  fieldview,
+  block,
+  inline,
+  textStyle,
+  configuration,
+}) => {
   const {
     selected,
     node_id,
@@ -52,7 +60,7 @@ const Field = ({ name, fieldview, block, textStyle, configuration }) => {
   return (
     <div
       className={`${textStyle} ${selected ? "selected-node" : ""} ${
-        block ? "" : "d-inline-block"
+        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
       }`}
       ref={(dom) => connect(drag(dom))}
     >
@@ -80,6 +88,7 @@ const FieldSettings = () => {
     name,
     fieldview,
     block,
+    inline,
     configuration,
     node_id,
     textStyle,
@@ -87,6 +96,7 @@ const FieldSettings = () => {
     name: node.data.props.name,
     fieldview: node.data.props.fieldview,
     block: node.data.props.block,
+    inline: node.data.props.inline,
     textStyle: node.data.props.textStyle,
     configuration: node.data.props.configuration,
     node_id: node.id,
@@ -177,7 +187,12 @@ const FieldSettings = () => {
           <tr>
             <td></td>
             <td>
-              <BlockSetting block={block} setProp={setProp} />
+              <BlockOrInlineSetting
+                block={block}
+                inline={inline}
+                textStyle={textStyle}
+                setProp={setProp}
+              />
             </td>
           </tr>
           {!(handlesTextStyle && handlesTextStyle.includes(fieldview)) && (
@@ -197,8 +212,8 @@ const FieldSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Field.craft = {
   displayName: "Field",
@@ -211,6 +226,7 @@ Field.craft = {
       "fieldview",
       "textStyle",
       "block",
+      "inline",
       { name: "configuration", default: {} },
     ],
   },

package/src/components/elements/Text.js

@@ -8,12 +8,13 @@ import React, { useState, useContext, useEffect, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import {
   blockProps,
-  BlockSetting,
+  BlockOrInlineSetting,
   TextStyleSetting,
   OrFormula,
   ErrorBoundary,
   TextStyleRow,
   DynamicFontAwesomeIcon,
+  isBlock,
 } from "./utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
@@ -53,7 +54,7 @@ const ckConfig = {
 };
 
 /**
- * @param {string} str 
+ * @param {string} str
  * @returns {string}
  */
 function escape_tags(str) {
@@ -73,7 +74,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Text = ({ text, block, isFormula, textStyle, icon, font }) => {
+const Text = ({ text, block, inline, isFormula, textStyle, icon, font }) => {
   const {
     connectors: { connect, drag },
     selected,
@@ -89,10 +90,11 @@ const Text = ({ text, block, isFormula, textStyle, icon, font }) => {
   }, [selected]);
   return (
     <div
-      className={`${!block ? "d-inline-block" : ""} ${textStyle} is-text ${
-        isFormula.text ? "text-monospace" : ""
-      } ${selected ? "selected-node" : ""}`}
-      {...blockProps(block)}
+      className={`${
+        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
+      } ${textStyle} is-text ${isFormula.text ? "text-monospace" : ""} ${
+        selected ? "selected-node" : ""
+      }`}
       ref={(dom) => connect(drag(dom))}
       onClick={(e) => selected && setEditable(true)}
       style={font ? { fontFamily: font } : {}}
@@ -133,11 +135,12 @@ export /**
  * @namespace
  * @category saltcorn-builder
  * @subcategory components
-*/
+ */
 const TextSettings = () => {
   const node = useNode((node) => ({
     text: node.data.props.text,
     block: node.data.props.block,
+    inline: node.data.props.inline,
     isFormula: node.data.props.isFormula,
     textStyle: node.data.props.textStyle,
     labelFor: node.data.props.labelFor,
@@ -148,6 +151,7 @@ const TextSettings = () => {
     actions: { setProp },
     text,
     block,
+    inline,
     textStyle,
     isFormula,
     labelFor,
@@ -246,7 +250,12 @@ const TextSettings = () => {
           </tr>
         </tbody>
       </table>
-      <BlockSetting block={block} setProp={setProp} />
+      <BlockOrInlineSetting
+        block={block}
+        inline={inline}
+        textStyle={textStyle}
+        setProp={setProp}
+      />
     </div>
   );
 };
@@ -258,6 +267,7 @@ Text.craft = {
   defaultProps: {
     text: "Click here",
     block: false,
+    inline: false,
     isFormula: {},
     textStyle: "",
     labelFor: "",

package/src/components/elements/utils.js

@@ -55,6 +55,27 @@ const BlockSetting = ({ block, setProp }) => (
   </div>
 );
 
+export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
+  !textStyle || !textStyle.startsWith("h") ? (
+    <BlockSetting block={block} setProp={setProp} />
+  ) : (
+    <div className="form-check">
+      <input
+        className="form-check-input"
+        name="inline"
+        type="checkbox"
+        checked={inline}
+        onChange={(e) => {
+          if (e.target) {
+            const target_value = e.target.checked;
+            setProp((prop) => (prop.inline = target_value));
+          }
+        }}
+      />
+      <label className="form-check-label">Inline display</label>
+    </div>
+  );
+
 export /**
  * @param {object} props
  * @param {function} props.setProp
@@ -1168,3 +1189,6 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
     children
   );
 };
+
+export const isBlock = (block, inline, textStyle) =>
+  !textStyle || !textStyle.startsWith("h") ? block : !inline;

package/src/components/storage.js

@@ -125,6 +125,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           text={segment.contents}
           isFormula={segment.isFormula || {}}
           block={segment.block || false}
+          inline={segment.inline || false}
           textStyle={segment.textStyle || ""}
           labelFor={segment.labelFor || ""}
           icon={segment.icon}
@@ -387,6 +388,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         type: "blank",
         contents: node.props.text,
         block: node.props.block,
+        inline: node.props.inline,
         textStyle: node.props.textStyle,
         isFormula: node.props.isFormula,
         labelFor: node.props.labelFor,