@saltcorn/builder 1.7.0-alpha.1 → 1.7.0-beta.1

package/src/components/elements/MessageList.js

@@ -0,0 +1,167 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/MessageList
+ * @subcategory components / elements
+ */
+
+import React, { useContext } from "react";
+import useTranslation from "../../hooks/useTranslation";
+import optionsCtx from "../context";
+import { useNode } from "@craftjs/core";
+import { setAPropGen, Accordion, SettingsRow } from "./utils";
+
+export /**
+ * The list of messages in a Room view. The messages themselves are rendered by
+ * the room's message show view, so this stands in for them on the canvas.
+ *
+ * @param {object} props
+ * @param {string} props.height
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const MessageList = ({ height }) => {
+  const { t } = useTranslation();
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+
+  return (
+    <div
+      className={`sc-room-msglist-preview ${selected ? "selected-node" : ""}`}
+      ref={(dom) => connect(drag(dom))}
+      style={{
+        border: "1px dashed #adb5bd",
+        borderRadius: "0.25rem",
+        padding: "0.5rem",
+        minHeight: "5rem",
+        maxHeight: height || undefined,
+        overflowY: height ? "auto" : undefined,
+      }}
+    >
+      <div className="text-muted small mb-1">
+        {t("Messages")}
+        {height ? ` (${t("scrolls")}: ${height})` : ""}
+      </div>
+      <div className="mb-1">{t("An earlier message")}</div>
+      <div className="mb-1">{t("A reply to it")}</div>
+      <div>{t("The most recent message")}</div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const MessageListSettings = () => {
+  const { t } = useTranslation();
+  const options = useContext(optionsCtx);
+  const node = useNode((node) => ({
+    height: node.data.props.height,
+    currentSettingsTab: node.data.props.currentSettingsTab,
+    animateName: node.data.props.animateName,
+    animateDelay: node.data.props.animateDelay,
+    animateDuration: node.data.props.animateDuration,
+    animateInitialHide: node.data.props.animateInitialHide,
+  }));
+  const {
+    actions: { setProp },
+    height,
+    currentSettingsTab,
+  } = node;
+  const setAProp = setAPropGen(setProp);
+
+  return (
+    <Accordion
+      value={currentSettingsTab}
+      onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
+    >
+      <div accordiontitle={t("Messages")} className="w-100">
+        <label>{t("Height")}</label>
+        <input
+          type="text"
+          className="form-control"
+          value={height || ""}
+          spellCheck={false}
+          onChange={setAProp("height")}
+        />
+        <small className="text-muted">
+          {t(
+            "A CSS length, for example 400px or 60vh. The list scrolls within this height. Leave blank to grow with the page"
+          )}
+        </small>
+      </div>
+      <table className="w-100" accordiontitle={t("Animate")}>
+        <tbody>
+          <SettingsRow
+            field={{
+              name: "animateName",
+              label: t("Animation"),
+              type: "select",
+              options: ["None", ...(options.keyframes || [])],
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "animateDuration",
+              label: t("Duration (s)"),
+              type: "Float",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "animateDelay",
+              label: t("Delay (s)"),
+              type: "Float",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "animateInitialHide",
+              label: t("Initially hidden"),
+              type: "Bool",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+        </tbody>
+      </table>
+    </Accordion>
+  );
+};
+
+/**
+ * @type {object}
+ */
+MessageList.craft = {
+  displayName: "MessageList",
+  props: {
+    height: "",
+    animateName: "None",
+    animateDuration: "",
+    animateDelay: "",
+    animateInitialHide: false,
+  },
+  related: {
+    settings: MessageListSettings,
+    segment_type: "message_list",
+    fields: [
+      { name: "height" },
+      { name: "animateName" },
+      { name: "animateDuration" },
+      { name: "animateDelay" },
+      { name: "animateInitialHide" },
+    ],
+  },
+};

package/src/components/elements/MonacoEditor.js

@@ -138,42 +138,49 @@ export const SingleLineEditor = React.forwardRef(
       : value;
 
     return (
-      <div ref={ref} className="form-control p-0 pt-1" style={{ position: "relative" }}>
+      <div ref={ref} className="form-control monaco-input monaco-input-singleline">
         {isEmpty && !activePrefix && placeholder && (
           <div style={{
             position: "absolute",
-            top: "3px",
-            left: "14px",
+            top: "0.375rem",
+            left: "10px",
+            right: "10px",
+            bottom: "0.375rem",
+            display: "flex",
+            alignItems: "center",
             color: "#999",
             pointerEvents: "none",
             zIndex: 1,
             fontSize: "14px",
             whiteSpace: "nowrap",
+            overflow: "hidden",
           }}>
             {placeholder}
           </div>
         )}
-        <Editor
-          className={className || ""}
-          height="22px"
-          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}
-          //beforeMount={handleEditorWillMount}
-          options={singleLineEditorOptions}
-          //theme="myCoolTheme"
-          beforeMount={handleEditorWillMount}
-          onMount={handleEditorDidMount}
-        />
+        <div className="monaco-input-editor">
+          <Editor
+            className={className || ""}
+            height="100%"
+            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}
+            //beforeMount={handleEditorWillMount}
+            options={singleLineEditorOptions}
+            //theme="myCoolTheme"
+            beforeMount={handleEditorWillMount}
+            onMount={handleEditorDidMount}
+          />
+        </div>
       </div>
     );
   }
@@ -203,16 +210,21 @@ export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor =
   const resolvedPlaceholder = placeholder || "// enter code here";
 
   return (
-    <div className="form-control p-0 pt-2" style={{ position: "relative" }}>
+    <div className="form-control monaco-input">
       {isEmpty && !isModalEditor && (
         <div style={{
           position: "absolute",
-          top: "10px",
-          left: "14px",
+          top: "0.375rem",
+          left: "10px",
+          right: "10px",
+          height: "21px",
+          display: "flex",
+          alignItems: "center",
           color: "#999",
           pointerEvents: "none",
           zIndex: 1,
           fontSize: "14px",
+          overflow: "hidden",
         }}>
           {resolvedPlaceholder}
         </div>

package/src/components/storage.js

@@ -31,7 +31,11 @@ import { ToggleFilter } from "./elements/ToggleFilter";
 import { DropMenu } from "./elements/DropMenu";
 import { Container } from "./elements/Container";
 import { Prompt } from "./elements/Prompt";
+import { MessageList } from "./elements/MessageList";
+import { MessageForm } from "./elements/MessageForm";
 import { rand_ident } from "./elements/utils";
+import { LibraryInstance } from "./elements/LibraryInstance";
+import { LibrarySlotInstance } from "./elements/LibrarySlotInstance";
 
 /**
  * @param {object} segment
@@ -82,9 +86,83 @@ const allElements = [
   ListColumn,
   ListColumns,
   Prompt,
+  MessageList,
+  MessageForm,
 ];
 
+/**
+ * Fills each slot in a shared component's layout with its saved field pick or dropped-in content.
+ * @param {object} segment
+ * @param {object[]} [slots]
+ * @returns {void}
+ */
+const applySlotFills = (segment, slots) => {
+  if (!segment) return;
+  if (Array.isArray(segment)) {
+    segment.forEach((s) => applySlotFills(s, slots));
+    return;
+  }
+  if (segment.type === "library-slot") {
+    const fill = (slots || []).find((s) => s.name === segment.name);
+    if (fill) Object.assign(segment, fill);
+    return;
+  }
+  if (segment.above) applySlotFills(segment.above, slots);
+  else if (segment.besides) applySlotFills(segment.besides, slots);
+  else if (segment.contents) applySlotFills(segment.contents, slots);
+};
+
 export /**
+ * Fetches the latest content for every shared component in a layout,
+ * including ones nested inside another shared component.
+ * @param {object} layout
+ * @param {object} options
+ * @param {Set<number>} [visitedIds] - library ids seen on this branch, so a
+ *   library that contains itself resolves to nothing instead of looping forever
+ * @returns {Promise<void>}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const resolveLibraryRefs = async (layout, options, visitedIds = new Set()) => {
+  const go = async (segment) => {
+    if (!segment) return;
+    if (Array.isArray(segment)) {
+      await Promise.all(segment.map(go));
+      return;
+    }
+    if (segment.type === "library" && segment.library_id) {
+      if (visitedIds.has(segment.library_id)) {
+        segment.contents = {};
+        return;
+      }
+      const r = await fetch(`/library/content/${segment.library_id}`, {
+        headers: { "CSRF-Token": options.csrfToken },
+      });
+      const lib = await r.json();
+      if (lib.error) return;
+      segment.library_name = lib.name;
+      segment.contents = lib.layout?.layout
+        ? lib.layout.layout
+        : lib.layout || {};
+      applySlotFills(segment.contents, segment.slots);
+      await resolveLibraryRefs(
+        segment.contents,
+        options,
+        new Set(visitedIds).add(segment.library_id)
+      );
+      return;
+    }
+    if (segment.above) await go(segment.above);
+    else if (segment.besides) await go(segment.besides);
+    else if (segment.contents) await go(segment.contents);
+  };
+  await go(layout);
+};
+
+export /**
+ * Builds real placed nodes from a saved layout tree, the reverse of what
+ * craftToSaltcorn does.
  * @param {object} layout
  * @param {object} query
  * @param {object} actions
@@ -103,6 +181,7 @@ const layoutToNodes = (
   index = false
 ) => {
   /**
+   * Turns one saved layout segment into its matching Craft element.
    * @param {object} segment
    * @param {string} ix
    * @returns {Element|Text|View|Action|Tabs|Columns}
@@ -235,6 +314,36 @@ const layoutToNodes = (
           isFormula={segment.isFormula || {}}
         />
       );
+    } else if (segment.type === "library") {
+      // segment.contents/library_name must already be filled in by
+      // resolveLibraryRefs before this runs - toTag itself can't be async
+      return (
+        <Element
+          key={ix}
+          canvas
+          is={LibraryInstance}
+          library_id={segment.library_id}
+          library_name={segment.library_name}
+          custom={segment._custom || {}}
+        >
+          {toTag(segment.contents)}
+        </Element>
+      );
+    } else if (segment.type === "library-slot") {
+      return (
+        <Element
+          key={ix}
+          canvas
+          is={LibrarySlotInstance}
+          slot_name={segment.name}
+          kind={segment.kind || "field"}
+          field={segment.field}
+          fieldview={segment.fieldview}
+          custom={segment._custom || {}}
+        >
+          {toTag(segment.contents)}
+        </Element>
+      );
     } else if (segment.type === "tabs") {
       let contentsArray = segment.contents.map(toTag);
       let contents;
@@ -397,6 +506,7 @@ const layoutToNodes = (
  */
 
 export /**
+ * Turns the placed canvas into a saved layout.
  * @param {object[]} nodes
  * @param {string} [startFrom = "ROOT" ]
  * @returns {object}
@@ -406,6 +516,9 @@ export /**
  */
 const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
   var columns = [];
+  // edits to shared components save to their own _sc_library row, not
+  // this page/view's layout - collected as go() walks the tree
+  var libraryUpdates = [];
   /**
    * @param {object} node
    * @returns {void|object}
@@ -419,15 +532,55 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
 
   const get_nodes = (node) => {
     if (!node.nodes || node.nodes.length == 0) return;
-    else if (node.nodes.length == 1) return go(nodes[node.nodes[0]]);
-    else return removeEmpty({ above: node.nodes.map((nm) => go(nodes[nm])) });
+    else if (node.nodes.length == 1)
+      return go(nodes[node.nodes[0]], node.nodes[0]);
+    else
+      return removeEmpty({
+        above: node.nodes.map((nm) => go(nodes[nm], nm)),
+      });
   };
 
   /**
+   * Finds each slot's fill in a layout tree, keeps it for this page/view,
+   * and clears it from the tree so it isn't saved to the shared row.
+   * @param {object} segment - layout tree (or subtree) to scan
+   * @param {object[]} [found] - accumulator, used internally for recursion
+   * @returns {object[]} the fills collected so far
+   */
+  const collectAndStripSlots = (segment, found = []) => {
+    if (!segment) return found;
+    if (Array.isArray(segment)) {
+      segment.forEach((s) => collectAndStripSlots(s, found));
+      return found;
+    }
+    if (segment.type === "library-slot") {
+      found.push({
+        name: segment.name,
+        kind: segment.kind,
+        field: segment.field,
+        fieldview: segment.fieldview,
+        contents: segment.contents,
+      });
+      delete segment.field;
+      delete segment.fieldview;
+      delete segment.contents;
+      return found;
+    }
+    if (segment.above) collectAndStripSlots(segment.above, found);
+    else if (segment.besides) collectAndStripSlots(segment.besides, found);
+    else if (segment.contents) collectAndStripSlots(segment.contents, found);
+    return found;
+  };
+
+  /**
+   * Turns one placed node (and everything under it) back into a plain
+   * layout segment, the reverse of what layoutToNodes does.
    * @param {object} node
+   * @param {string} [id] - this node's own id, so a LibraryInstance save can
+   *   be told apart from a sibling placement (see doSave)
    * @returns {object}
    */
-  const go = (node) => {
+  const go = (node, id) => {
     if (!node) return;
     let customProps = {};
     const mergedCustom = { ...(node?.props?.custom || {}), ...(node?.custom || {}) };
@@ -489,6 +642,40 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       });
       return lc;
     }
+    if (node.displayName === LibrarySlotInstance.craft.displayName) {
+      // keeps its picked field or dropped content right here - if it's
+      // part of a shared component, that gets separated out before saving
+      const kind = node.props.kind;
+      return {
+        type: "library-slot",
+        kind,
+        name: node.props.slot_name,
+        ...(kind === "container"
+          ? { contents: get_nodes(node) }
+          : { field: node.props.field, fieldview: node.props.fieldview }),
+        ...customProps,
+      };
+    }
+    if (node.displayName === LibraryInstance.craft.displayName) {
+      // must come before the generic canvas case below, or a reload turns
+      // this into a plain copy. skip if emptied out, so we don't blank the shared row
+      const childContent = get_nodes(node);
+      let slots = [];
+      if (childContent !== undefined) {
+        slots = collectAndStripSlots(childContent);
+        libraryUpdates.push({
+          library_id: node.props.library_id,
+          layout: childContent,
+          node_id: id,
+        });
+      }
+      return {
+        type: "library",
+        library_id: node.props.library_id,
+        ...(slots.length ? { slots } : {}),
+        ...customProps,
+      };
+    }
     if (node.isCanvas) {
       return get_nodes(node);
     }
@@ -671,9 +858,9 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       };
     }
   };
-  const layout = go(nodes[startFrom]) || {};
+  const layout = go(nodes[startFrom], startFrom) || {};
   /*console.log("nodes", JSON.stringify(nodes));
     console.log("cols", JSON.stringify(columns));
   console.log("layout", JSON.stringify(layout));*/
-  return { columns, layout };
+  return { columns, layout, libraryUpdates };
 };