@pareto-engineering/design-system 5.1.0 → 5.1.2

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -67,7 +67,8 @@ const EditorInput = _ref2 => {
     description,
     disabled,
     showDebugger,
-    setEditorState
+    setEditorState,
+    setPlainTextKey
     // ...otherProps
   } = _ref2;
   const [field,,] = (0, _formik.useField)(name);
@@ -76,7 +77,12 @@ const EditorInput = _ref2 => {
   } = (0, _formik.useFormikContext)();
   const setInitialValue = () => {
     try {
-      JSON.parse(field.value);
+      const parsedValue = JSON.parse(field.value);
+      // A pure number value will break the editor, so we throw an error to return
+      // the default value in the catch block.
+      if (typeof parsedValue === 'number') {
+        throw new Error('Number');
+      }
       return field.value;
     } catch {
       const defaultValue = {
@@ -87,7 +93,7 @@ const EditorInput = _ref2 => {
               format: 0,
               mode: 'normal',
               style: '',
-              text: '',
+              text: field.value,
               type: 'text',
               version: 1
             }],
@@ -104,7 +110,6 @@ const EditorInput = _ref2 => {
           version: 1
         }
       };
-      defaultValue.root.children[0].children[0].text = field.value;
       return JSON.stringify(defaultValue);
     }
   };
@@ -139,7 +144,7 @@ const EditorInput = _ref2 => {
       '--resize': resize,
       '--rows': `${rows}em`
     }
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
+  }, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
     name: name,
     color: labelColor,
     optional: optional
@@ -158,7 +163,10 @@ const EditorInput = _ref2 => {
     className: "s-1",
     description: description,
     name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(_common2.TreeViewPlugin, null)));
+  }), showDebugger && /*#__PURE__*/React.createElement(_common2.TreeViewPlugin, null), setPlainTextKey && /*#__PURE__*/React.createElement(_common2.ExposePlainTextPlugin, {
+    setFieldValue: setFieldValue,
+    setPlainTextKey: setPlainTextKey
+  })));
 };
 EditorInput.propTypes = {
   /**

package/dist/cjs/f/fields/EditorInput/common/ExposePlainTextPlugin.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * This is the component description
+ */
+const ExposePlainTextPlugin = _ref => {
+  let {
+    setFieldValue,
+    setPlainTextKey
+  } = _ref;
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  (0, _react.useEffect)(() => editor.registerUpdateListener(_ref2 => {
+    let {
+      editorState
+    } = _ref2;
+    editorState.read(() => {
+      const root = (0, _lexical.$getRoot)();
+      const textContent = root.getTextContent();
+      setFieldValue(setPlainTextKey, textContent);
+    });
+  }), [editor]);
+  return null;
+};
+ExposePlainTextPlugin.propTypes = {
+  setFieldValue: _propTypes.default.func.isRequired,
+  setPlainTextKey: _propTypes.default.string.isRequired
+};
+ExposePlainTextPlugin.defaultProps = {
+  //
+};
+var _default = exports.default = ExposePlainTextPlugin;

package/dist/cjs/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.js

@@ -180,7 +180,7 @@ const ToolbarPlugin = _ref => {
   }, [applyStyleText]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor} b-x`].filter(e => e).join(' '),
     style: inlineStyles
   }, /*#__PURE__*/React.createElement("div", {
     className: "group"

package/dist/cjs/f/fields/EditorInput/common/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ColorPicker", {
     return _ColorPicker.ColorPicker;
   }
 });
+Object.defineProperty(exports, "ExposePlainTextPlugin", {
+  enumerable: true,
+  get: function () {
+    return _ExposePlainTextPlugin.default;
+  }
+});
 Object.defineProperty(exports, "FontSizeDropDown", {
   enumerable: true,
   get: function () {
@@ -45,4 +51,5 @@ var _StopPropagationPlugin = _interopRequireDefault(require("./StopPropagationPl
 var _ToolbarPlugin = require("./ToolbarPlugin");
 var _ColorPicker = require("./ColorPicker");
 var _FontSizeDropDown = require("./FontSizeDropDown");
+var _ExposePlainTextPlugin = _interopRequireDefault(require("./ExposePlainTextPlugin"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -38,7 +38,8 @@ const ExpandableLexicalPreview = _ref => {
     pageTitle,
     onBlock,
     onOpen,
-    header
+    header,
+    rows
     // ...otherProps
   } = _ref;
   const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
@@ -79,7 +80,8 @@ const ExpandableLexicalPreview = _ref => {
     name: name,
     resize: resize,
     disabled: true,
-    id: "the-bad-ass-input"
+    id: `${id}-editor-input`,
+    rows: rows
   }), /*#__PURE__*/React.createElement(_b.Button, {
     id: id,
     className: "expand-button ai-icon",

package/dist/cjs/g/ExpandableLexicalPreview/styles.scss

@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
 
-
   &.collapsed {
     flex-direction: row;
   }

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -25,7 +25,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 // Local Definitions
 
 import { FormLabel, FormDescription } from "../../common";
-import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin } from "./common";
+import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin, ExposePlainTextPlugin } from "./common";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'editor-input';
@@ -56,7 +56,8 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
-  setEditorState
+  setEditorState,
+  setPlainTextKey
   // ...otherProps
 }) => {
   const [field,,] = useField(name);
@@ -65,7 +66,12 @@ const EditorInput = ({
   } = useFormikContext();
   const setInitialValue = () => {
     try {
-      JSON.parse(field.value);
+      const parsedValue = JSON.parse(field.value);
+      // A pure number value will break the editor, so we throw an error to return
+      // the default value in the catch block.
+      if (typeof parsedValue === 'number') {
+        throw new Error('Number');
+      }
       return field.value;
     } catch {
       const defaultValue = {
@@ -76,7 +82,7 @@ const EditorInput = ({
               format: 0,
               mode: 'normal',
               style: '',
-              text: '',
+              text: field.value,
               type: 'text',
               version: 1
             }],
@@ -93,7 +99,6 @@ const EditorInput = ({
           version: 1
         }
       };
-      defaultValue.root.children[0].children[0].text = field.value;
       return JSON.stringify(defaultValue);
     }
   };
@@ -128,7 +133,7 @@ const EditorInput = ({
       '--resize': resize,
       '--rows': `${rows}em`
     }
-  }, /*#__PURE__*/React.createElement(FormLabel, {
+  }, label && /*#__PURE__*/React.createElement(FormLabel, {
     name: name,
     color: labelColor,
     optional: optional
@@ -147,7 +152,10 @@ const EditorInput = ({
     className: "s-1",
     description: description,
     name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null)));
+  }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null), setPlainTextKey && /*#__PURE__*/React.createElement(ExposePlainTextPlugin, {
+    setFieldValue: setFieldValue,
+    setPlainTextKey: setPlainTextKey
+  })));
 };
 EditorInput.propTypes = {
   /**

package/dist/es/f/fields/EditorInput/common/ExposePlainTextPlugin.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot } from 'lexical';
+import PropTypes from 'prop-types';
+
+/**
+ * This is the component description
+ */
+const ExposePlainTextPlugin = ({
+  setFieldValue,
+  setPlainTextKey
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => editor.registerUpdateListener(({
+    editorState
+  }) => {
+    editorState.read(() => {
+      const root = $getRoot();
+      const textContent = root.getTextContent();
+      setFieldValue(setPlainTextKey, textContent);
+    });
+  }), [editor]);
+  return null;
+};
+ExposePlainTextPlugin.propTypes = {
+  setFieldValue: PropTypes.func.isRequired,
+  setPlainTextKey: PropTypes.string.isRequired
+};
+ExposePlainTextPlugin.defaultProps = {
+  //
+};
+export default ExposePlainTextPlugin;

package/dist/es/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.js

@@ -168,7 +168,7 @@ const ToolbarPlugin = ({
   }, [applyStyleText]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor} b-x`].filter(e => e).join(' '),
     style: inlineStyles
   }, /*#__PURE__*/React.createElement("div", {
     className: "group"

package/dist/es/f/fields/EditorInput/common/index.js

@@ -3,4 +3,5 @@ export { default as TreeViewPlugin } from "./TreeViewPlugin";
 export { default as StopPropagationPlugin } from "./StopPropagationPlugin";
 export { ToolbarPlugin } from "./ToolbarPlugin";
 export { ColorPicker } from "./ColorPicker";
-export { FontSizeDropDown } from "./FontSizeDropDown";
+export { FontSizeDropDown } from "./FontSizeDropDown";
+export { default as ExposePlainTextPlugin } from "./ExposePlainTextPlugin";

package/dist/es/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -27,7 +27,8 @@ const ExpandableLexicalPreview = ({
   pageTitle,
   onBlock,
   onOpen,
-  header
+  header,
+  rows
   // ...otherProps
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -68,7 +69,8 @@ const ExpandableLexicalPreview = ({
     name: name,
     resize: resize,
     disabled: true,
-    id: "the-bad-ass-input"
+    id: `${id}-editor-input`,
+    rows: rows
   }), /*#__PURE__*/React.createElement(Button, {
     id: id,
     className: "expand-button ai-icon",

package/dist/es/g/ExpandableLexicalPreview/styles.scss

@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
 
-
   &.collapsed {
     flex-direction: row;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^5.1.0",
+    "@pareto-engineering/assets": "^5.1.1",
     "@pareto-engineering/bem": "^5.0.0",
     "@pareto-engineering/styles": "^5.0.0",
     "@pareto-engineering/utils": "^5.0.0",
@@ -87,5 +87,5 @@
     "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "df984562befbec687e458242d3b8696ee7286d1e"
+  "gitHead": "4a9a1e6c37055bd9aba28e04c9d5a4dcc7dd7d93"
 }

package/src/ui/f/fields/EditorInput/EditorInput.jsx

@@ -26,7 +26,12 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 
 import { FormLabel, FormDescription } from '../../common'
-import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin } from './common'
+import {
+  ToolbarPlugin,
+  TreeViewPlugin,
+  StopPropagationPlugin,
+  ExposePlainTextPlugin,
+} from './common'
 
 import './styles.scss'
 
@@ -60,6 +65,7 @@ const EditorInput = ({
   disabled,
   showDebugger,
   setEditorState,
+  setPlainTextKey,
   // ...otherProps
 }) => {
   const [field, ,] = useField(name)
@@ -67,7 +73,12 @@ const EditorInput = ({
 
   const setInitialValue = () => {
     try {
-      JSON.parse(field.value)
+      const parsedValue = JSON.parse(field.value)
+      // A pure number value will break the editor, so we throw an error to return
+      // the default value in the catch block.
+      if (typeof parsedValue === 'number') {
+        throw new Error('Number')
+      }
       return field.value
     } catch {
       const defaultValue = {
@@ -80,7 +91,7 @@ const EditorInput = ({
                   format :0,
                   mode   :'normal',
                   style  :'',
-                  text   :'',
+                  text   :field.value,
                   type   :'text',
                   version:1,
                 },
@@ -99,7 +110,6 @@ const EditorInput = ({
           version  :1,
         },
       }
-      defaultValue.root.children[0].children[0].text = field.value
       return JSON.stringify(defaultValue)
     }
   }
@@ -157,14 +167,17 @@ const EditorInput = ({
           '--rows'  :`${rows}em`,
         }}
       >
-        <FormLabel
-          name={name}
-          color={labelColor}
-          optional={optional}
-        >
-          {label}
-        </FormLabel>
-
+        {
+          label && (
+            <FormLabel
+              name={name}
+              color={labelColor}
+              optional={optional}
+            >
+              {label}
+            </FormLabel>
+          )
+        }
         { !disabled && <ToolbarPlugin /> }
         <RichTextPlugin
           contentEditable={(
@@ -187,6 +200,12 @@ const EditorInput = ({
         <StopPropagationPlugin />
         <FormDescription className="s-1" description={description} name={name} />
         { showDebugger && <TreeViewPlugin /> }
+        {setPlainTextKey && (
+          <ExposePlainTextPlugin
+            setFieldValue={setFieldValue}
+            setPlainTextKey={setPlainTextKey}
+          />
+        )}
       </div>
     </LexicalComposer>
   )

package/src/ui/f/fields/EditorInput/common/ExposePlainTextPlugin.jsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+import {
+  $getRoot,
+} from 'lexical'
+
+import PropTypes from 'prop-types'
+
+/**
+ * This is the component description
+ */
+const ExposePlainTextPlugin = ({
+  setFieldValue,
+  setPlainTextKey,
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => (
+    editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const root = $getRoot()
+        const textContent = root.getTextContent()
+        setFieldValue(setPlainTextKey, textContent)
+      })
+    })
+  ), [editor])
+
+  return null
+}
+
+ExposePlainTextPlugin.propTypes = {
+  setFieldValue  :PropTypes.func.isRequired,
+  setPlainTextKey:PropTypes.string.isRequired,
+}
+
+ExposePlainTextPlugin.defaultProps = {
+  //
+}
+
+export default ExposePlainTextPlugin

package/src/ui/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.jsx

@@ -254,7 +254,7 @@ const ToolbarPlugin = ({
         baseClassName,
         componentClassName,
         userClassName,
-        `x-${baseBgColor}`,
+        `x-${baseBgColor} b-x`,
       ]
         .filter((e) => e)
         .join(' ')}

package/src/ui/f/fields/EditorInput/common/index.js

@@ -4,3 +4,4 @@ export { default as StopPropagationPlugin } from './StopPropagationPlugin'
 export { ToolbarPlugin } from './ToolbarPlugin'
 export { ColorPicker } from './ColorPicker'
 export { FontSizeDropDown } from './FontSizeDropDown'
+export { default as ExposePlainTextPlugin } from './ExposePlainTextPlugin'

package/src/ui/g/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -37,6 +37,7 @@ const ExpandableLexicalPreview = ({
   onBlock,
   onOpen,
   header,
+  rows,
   // ...otherProps
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
@@ -54,9 +55,7 @@ const ExpandableLexicalPreview = ({
       <div
         id={id}
         className={[
-
           baseClassName,
-
           componentClassName,
           userClassName,
           `y-${color}`,
@@ -102,7 +101,8 @@ const ExpandableLexicalPreview = ({
               name={name}
               resize={resize}
               disabled
-              id="the-bad-ass-input"
+              id={`${id}-editor-input`}
+              rows={rows}
             />
             <Button
               id={id}

package/src/ui/g/ExpandableLexicalPreview/styles.scss

@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
 
-
   &.collapsed {
     flex-direction: row;
   }

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -29426,7 +29426,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
         Project Instructions
       </label>
       <div
-        className="base toolbar-plugin x-background-far"
+        className="base toolbar-plugin x-background-far b-x"
       >
         <div
           className="group"
@@ -29906,7 +29906,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
          (Optional)
       </label>
       <div
-        className="base toolbar-plugin x-background-far"
+        className="base toolbar-plugin x-background-far b-x"
       >
         <div
           className="group"
@@ -34992,7 +34992,7 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
   </p>
   <div
     className="base editor-input y-paragraph disabled"
-    id="the-bad-ass-input"
+    id="undefined-editor-input"
     style={
       {
         "--resize": "vertical",
@@ -35000,10 +35000,6 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
       }
     }
   >
-    <label
-      className="base form-label x-paragraph"
-      htmlFor="taskDescription"
-    />
     <div
       aria-autocomplete="none"
       aria-readonly={true}
@@ -35088,7 +35084,7 @@ exports[`Storyshots g/FormBuilder Builder 1`] = `
               Form description
             </label>
             <div
-              className="base toolbar-plugin x-background-far"
+              className="base toolbar-plugin x-background-far b-x"
             >
               <div
                 className="group"
@@ -35627,7 +35623,7 @@ exports[`Storyshots g/FormBuilder Renderer 1`] = `
           >
             <div
               className="base editor-input y-paragraph disabled"
-              id="the-bad-ass-input"
+              id="undefined-editor-input"
               style={
                 {
                   "--resize": "vertical",
@@ -35635,10 +35631,6 @@ exports[`Storyshots g/FormBuilder Renderer 1`] = `
                 }
               }
             >
-              <label
-                className="base form-label x-paragraph"
-                htmlFor="instructions"
-              />
               <div
                 aria-autocomplete="none"
                 aria-readonly={true}
@@ -35726,7 +35718,7 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
           >
             <div
               className="base editor-input y-paragraph disabled"
-              id="the-bad-ass-input"
+              id="undefined-editor-input"
               style={
                 {
                   "--resize": "vertical",
@@ -35734,10 +35726,6 @@ exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
                 }
               }
             >
-              <label
-                className="base form-label x-paragraph"
-                htmlFor="instructions"
-              />
               <div
                 aria-autocomplete="none"
                 aria-readonly={true}
@@ -35825,7 +35813,7 @@ exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
           >
             <div
               className="base editor-input y-paragraph disabled"
-              id="the-bad-ass-input"
+              id="undefined-editor-input"
               style={
                 {
                   "--resize": "vertical",
@@ -35833,10 +35821,6 @@ exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
                 }
               }
             >
-              <label
-                className="base form-label x-paragraph"
-                htmlFor="instructions"
-              />
               <div
                 aria-autocomplete="none"
                 aria-readonly={true}