Merge branch 'acceptance' into feat/update-inputs-pagevar-belongsto-s…

…upport-PAGE-4109
bettyblocks · Mar 11, 2024 · 3e795f0 · 3e795f0
2 parents 576a75b + ddd5683
commit 3e795f0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,22 @@
+# [2.184.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.183.0...v2.184.0) (2024-03-08)
+
+
+### Features
+
+* added richtext support for pagevariables ([81702c7](https://github.com/bettyblocks/material-ui-component-set/commit/81702c7bed107d9975e0fd4c6159c17996f08399))
+
+# [2.183.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.182.2...v2.183.0) (2024-03-08)
+
+
+### Bug Fixes
+
+* remove console ([91dd925](https://github.com/bettyblocks/material-ui-component-set/commit/91dd925faa0cd93a1c367f7a5491799739ce22c5))
+
+
+### Features
+
+* added pagevariable belongsto support for radio, select and autocomplete components ([3658315](https://github.com/bettyblocks/material-ui-component-set/commit/365831587307934ebeef96e0ff19e53f56e1c23b))
+
 ## [2.182.2](https://github.com/bettyblocks/material-ui-component-set/compare/v2.182.1...v2.182.2) (2024-03-04)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "component-set",
-  "version": "2.182.2",
+  "version": "2.184.0",
   "main": "dist/templates.json",
   "license": "UNLICENSED",
   "private": false,

diff --git a/src/components/richTextInput.js b/src/components/richTextInput.js
@@ -113,16 +113,32 @@
       floatLabel,
     } = options;
     const isDev = env === 'dev';
-
-    const [currentValue, setCurrentValue] = useState(
-      useText(valueProp, { rawValue: true }),
-    );
+    const optionValue = useText(valueProp, { rawValue: true });
+    const [currentValue, setCurrentValue] = useState(optionValue);
+    const [valueKey, setValueKey] = useState(0);
     const labelText = useText(label);
     const [showDropdown, setShowDropdown] = useState(false);
+    const [multipleStyles, setMultipleStyles] = useState(false);
     const [activeStyleName, setActiveStyleName] = useState('Body 1');
     const placeholderText = useText(placeholder);
     const helperTextResolved = useText(helperText);
 
+    useEffect(() => {
+      setCurrentValue(optionValue);
+      setValueKey(valueKey + 1);
+    }, [optionValue]);
+
+    const KeyCode = {
+      Digit1: 49,
+      Digit2: 50,
+      Digit3: 51,
+      Digit4: 52,
+      Digit5: 53,
+      Digit6: 54,
+      Digit7: 55,
+      Digit8: 56,
+    };
+
     const isMarkActive = (editor, format) => {
       const marks = Editor.marks(editor);
       return marks ? marks[format] === true : false;
@@ -381,7 +397,18 @@
       return <span {...attributes}>{children}</span>;
     }
 
+    const checkMultipleStyles = (value) => {
+      const diverseStyle = value.filter(({ type }) => type !== value[0].type);
+      return diverseStyle.length > 0;
+    };
+
     const onChangeHandler = (value) => {
+      if (value.length > 1) {
+        const hasMultipleStyles = checkMultipleStyles(value);
+        if (hasMultipleStyles) {
+          setMultipleStyles(true);
+        }
+      }
       setCurrentValue(value.map((row) => serialize(row)).join(''));
       B.triggerEvent('onChange', currentValue);
     };
@@ -527,35 +554,32 @@
 
       if (event.altKey) {
         switch (event.keyCode) {
-          case 49:
+          case KeyCode.Digit1:
             event.preventDefault();
             toggleBlock(editor, 'heading-one');
             break;
-          case 50:
+          case KeyCode.Digit2:
             event.preventDefault();
             toggleBlock(editor, 'heading-two');
             break;
-          case 51:
+          case KeyCode.Digit3:
             event.preventDefault();
             toggleBlock(editor, 'heading-three');
             break;
-          case 52:
+          case KeyCode.Digit4:
             event.preventDefault();
             toggleBlock(editor, 'heading-four');
             break;
-          case 53:
+          case KeyCode.Digit5:
             event.preventDefault();
             toggleBlock(editor, 'heading-five');
             break;
-          case 54:
+          case KeyCode.Digit6:
             event.preventDefault();
             toggleBlock(editor, 'heading-six');
             break;
-          case 55:
-            event.preventDefault();
-            toggleBlock(editor, 'paragraph');
-            break;
-          case 56:
+          case KeyCode.Digit7:
+          case KeyCode.Digit8:
             event.preventDefault();
             toggleBlock(editor, 'paragraph');
             break;
@@ -791,9 +815,6 @@
                 setAmountOfHeadersInSelection(Math.abs(anchor - focus) + 1);
               }
             }
-          } else {
-            setAmountOfHeadersInSelection(0);
-            setAmountOfHeadersInSelection(1);
           }
         }, 500);
       }
@@ -813,6 +834,8 @@
         activeStyleName !== '\u00A0'
       ) {
         setActiveStyleName('\u00A0');
+      } else if (multipleStyles) {
+        setActiveStyleName('\u00A0');
       }
       return (
         <li
@@ -909,6 +932,7 @@
         )}
         <div className={classes.editorWrapper}>
           <Slate
+            key={valueKey}
             editor={editor}
             value={fragment}
             onChange={(value) => {
@@ -1145,7 +1169,7 @@
       },
       dropdownButton: {
         display: 'inline-flex',
-        maxWitdh: '100%',
+        maxWidth: '100%',
         cursor: 'pointer',
         backgroundColor: 'transparent',
         padding: '4px',