@flozy/editor 4.6.2 → 4.6.3

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
-import { createEditor, Transforms, Range } from "slate";
+import { createEditor, Range, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -27,16 +27,16 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
 import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
-import FontLoader from "./common/FontLoader/FontLoader";
 import "./font.css";
 import "./Editor.css";
 import "animate.css";
+import FontLoader from "./common/FontLoader/FontLoader";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -82,7 +82,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
-    toolbarOptions,
     otherProps,
     isIframe,
     theme,
@@ -115,7 +114,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorClass,
     fixedWidth = "60%",
     fullWidth = "80%",
-    hideTools
+    hideTools = []
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
@@ -146,12 +145,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
       data: content
     }));
-    if (!isMobile && !ReactEditor.isFocused(editor)) {
+    if (!ReactEditor.isFocused(editor)) {
       ReactEditor.focus(editor);
     }
   }, [id, content]);
@@ -289,10 +287,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     index,
     type
   } = mentions;
-  const chars = type ? Shorthands[type]({
+  const updatedHideTools = !isFreeGrid(content) ? [...hideTools, "freegrid"] : hideTools;
+  const chars = type && !isFreeGrid(content) ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: hideTools || []
+    hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);
@@ -366,6 +365,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
+    } else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
+      upDownArrowKeyEvents(event, editor);
+    } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
+      upDownArrowKeyEvents(event, editor);
     } else if (event.key === "Backspace") {
       const isPageSettingsNode = isPageSettings(event, editor);
       if (isPageSettingsNode) {
@@ -385,7 +388,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     }
-  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
+  }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   const dotBg = needDotsBG ? {
     background: "white",
@@ -450,13 +453,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const selection = window?.getSelection();
         if (selection && selection.rangeCount > 0) {
           const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-          const containerRect = container?.getBoundingClientRect();
-          const containerBottom = containerRect?.bottom;
+          const containerBottom = container?.getBoundingClientRect()?.bottom;
           if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
-            // Calculate dynamic scroll based on remaining space
-            const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
             container?.scrollBy({
-              top: scrollAmount,
+              top: 200,
               behavior: "smooth"
             });
           }
@@ -531,7 +531,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: decorators,
+                        decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {

package/dist/Editor/Editor.css

@@ -234,6 +234,18 @@ blockquote {
   background-color: #0052cc;
 }
 
+.signature-btn-container .sign-placeholder {
+  display: none; /* will changed to flex on DnD */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #E4E6E9;
+  border-radius: 10px;
+  background: white;
+  box-shadow: 0px 4px 16px 0px #0000000D;
+  gap: 10px;
+}
+
 .signature-btn-grps {
   display: flex;
   justify-content: space-around;
@@ -244,6 +256,13 @@ blockquote {
   width: 17px !important;
 }
 
+.react-datepicker__input-container input {
+    height: 40px !important;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+}
+
 .close-popupbtn {
   border-radius: 4px !important;
   width: 24px;
@@ -884,7 +903,6 @@ blockquote {
 /* For Firefox */
 .removeScroll {
     -moz-appearance: textfield;
-    appearance: none;
 }
 
 .borderInput:focus-visible {
@@ -1188,4 +1206,17 @@ blockquote {
 
 .freegrid-section {
   max-width: 100% !important;
+}
+
+.divider-settings {
+  display: none;
+  position: absolute;
+}
+
+.dividerComponent:hover {
+  padding: 10px 0;
+}
+
+.dividerComponent:hover .divider-settings {
+  display: block;
 }

package/dist/Editor/Elements/AI/AIInput.js

@@ -90,6 +90,7 @@ function AIInput({
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
+      ref: refs[0],
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
         style: {
@@ -104,7 +105,6 @@ function AIInput({
         onSubmit: e => {
           e.preventDefault();
         },
-        ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
           className: "icon-container icons-elements",
           ref: inputWrapperRef,
@@ -116,22 +116,21 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: fromToolBar ? "" : "Ask AI to write anything...",
+          placeholder: "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
-          disabled: fromToolBar,
           onKeyDown: event => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
+        }), /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -201,6 +201,29 @@ function PopoverAIInput({
   useEffect(() => {
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
+  const framePayload = (type, option) => {
+    let payload = {
+      mode: option.mode || 0,
+      query: option?.inputValue || inputValue
+    };
+    if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
+      payload.textOptionInput = type;
+    }
+    const selectedText = getSelectedText(editor);
+    const textData = generatedText || selectedText;
+    if (option.mode) {
+      payload.textData = textData;
+    } else if (selectedText && Number(payload.mode) === 0) {
+      payload.query = `${selectedText} \n ${payload.query}`;
+    }
+    const tryAgain = type === "try_again";
+    if (tryAgain) {
+      // resetting previous payload
+      const prevPayload = selectedOption?.payload || {};
+      payload = prevPayload;
+    }
+    return payload;
+  };
   const onSend = async (type, option) => {
     try {
       if (type === "close") {
@@ -232,28 +255,12 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
-      if (type === "speech_to_text") {
-        setGeneratedText(option.text);
-        return;
-      }
-      if (type === "try_again") {
-        // resetting the previous option and try again
-        option = selectedOption;
-        type = selectedOption.value;
-      } else {
-        setSelectedOption(option);
-      }
       setLoading(true);
-      const payload = {
-        mode: option.mode || 0,
-        query: option?.inputValue || inputValue
-      };
-      if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
-        payload.textOptionInput = type;
-      }
-      if (option.mode) {
-        payload.textData = generatedText || window.getSelection().toString();
-      }
+      const payload = framePayload(type, option);
+      setSelectedOption({
+        ...option,
+        payload
+      });
       const result = await services("infinityAI", payload);
       setLoading(false);
       setInputValue("");
@@ -264,15 +271,19 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
-      if (!option.replace) {
-        if (type === "continue_writing") {
-          setGeneratedText(generatedText + text);
-        } else {
-          setGeneratedText(text);
-        }
-        return;
+
+      // if (!option.replace) {
+      if (type === "continue_writing") {
+        setGeneratedText(generatedText + text);
+      } else {
+        setGeneratedText(text);
       }
-      insertText(editor, text);
+
+      //   return;
+      // }
+
+      // ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
+      // insertText(editor, text);
 
       // scrollToAIInput();
     } catch (err) {

package/dist/Editor/Elements/AI/Styles.js

@@ -1,6 +1,5 @@
 const Styles = theme => ({
   aiContainer: {
-    background: "#FCFAFF",
     background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",
@@ -103,6 +102,7 @@ const Styles = theme => ({
   customSelectWrapper: {
     width: "fit-content",
     marginTop: "4px",
+    position: "absolute",
     "@media only screen and (max-width: 600px)": {
       marginBottom: "4px"
     }

package/dist/Editor/Elements/Button/EditorButton.js

@@ -10,10 +10,14 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
   const theme = useTheme();
+  const {
+    theme: appTheme
+  } = useEditorContext();
   const {
     attributes,
     element,
@@ -140,8 +144,8 @@ const EditorButton = props => {
           sx: {
             display: "inline-flex",
             color: "rgba(0, 0, 0, 0.54)",
-            borderRadius: '50% !important',
-            border: 'none !important'
+            borderRadius: "50% !important",
+            border: "none !important"
           },
           ...btnProps,
           children: /*#__PURE__*/_jsx(Icon, {
@@ -212,7 +216,7 @@ const EditorButton = props => {
           },
           "& svg": {
             "& path": {
-              stroke: theme.palette.text.primary
+              stroke: appTheme?.palette?.text?.primary
             }
           },
           "& button": {
@@ -277,7 +281,7 @@ const EditorButton = props => {
             right: "-42px",
             stroke: "#fff",
             "& path": {
-              fill: openMoreOptions ? theme.palette.text.blueText : ""
+              fill: openMoreOptions ? appTheme.palette.text.blueText : ""
             }
           },
           onClick: handleMoreBtn,

package/dist/Editor/Elements/Divider/Divider.js

@@ -1,30 +1,129 @@
-import React from "react";
+import React, { useState } from "react";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { IconButton, Tooltip } from "@mui/material";
+import { GridSettingsIcon } from "../../common/iconslist";
+import DividerPopup from "./DividerPopup";
+import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
   const {
     attributes,
-    children
+    children,
+    element,
+    customProps
   } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const {
+    borderColor = theme?.palette?.text?.primary || '#0F172A',
+    borderWidth = '1px',
+    borderStyle = 'solid'
+  } = element;
+  const {
+    readOnly
+  } = customProps;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [openSettings, setOpenSettings] = useState(false);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const [showTool] = useEditorSelection(editor);
+  const selected = hoverPath === path.join(",");
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const DividerToolbar = ({
+    selected,
+    showTool,
+    onSettings
+  }) => {
+    return /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      className: "divider-settings",
+      style: {
+        top: "-20px",
+        left: 0
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Divider Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          sx: {
+            boxShadow: '0px 0px 4px 0px #00000040',
+            borderRadius: '50%'
+          },
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        })
+      })
+    });
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "dividerComponent",
-    contentEditable: "false",
     style: {
-      userSelect: "none"
+      userSelect: "none",
+      position: 'relative'
     },
-    children: [/*#__PURE__*/_jsx("hr", {
-      contentEditable: "false",
+    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+      className: `element-root element-selector`,
+      contentEditable: false,
+      style: {
+        zIndex: 1000
+      },
+      children: /*#__PURE__*/_jsx(DividerToolbar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings
+      })
+    }), /*#__PURE__*/_jsx("hr", {
+      contentEditable: false,
       className: "editorDivider",
       style: {
-        userSelect: "none"
+        userSelect: "none",
+        borderTop: !borderColor?.includes("linear") ? `${borderWidth} ${borderStyle} ${borderColor}` : `transparent`,
+        backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
+        height: borderColor?.includes("linear") ? borderWidth : undefined
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {
         display: "none"
       },
       children: children
-    })]
+    }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      onDelete: onDelete,
+      customProps: customProps
+    }) : null]
   });
 };
 export default Divider;

package/dist/Editor/Elements/Divider/DividerPopup.js

@@ -0,0 +1,24 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import dividerStyle from "../../common/StyleBuilder/dividerStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    onDelete,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Divider",
+    type: "dividerStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: dividerStyle,
+    onDelete: onDelete,
+    customProps: customProps
+  });
+};
+export default DividerPopup;

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,5 +1,5 @@
 .embed {
-  /* width: fit-content; */
+  width: fit-content;
   position: relative;
   margin: 0px;
 }

package/dist/Editor/Elements/Embed/Image.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo } from "react";
+import React, { useEffect, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -94,7 +94,8 @@ const ImageContent = props => {
     onTouchEnd: onTouchEnd // for mobile
     ,
     "data-path": path.join(","),
-    draggable: false
+    draggable: false,
+    contentEditable: false
   });
 };
 const Image = props => {
@@ -222,7 +223,7 @@ const Image = props => {
   const getWidth = () => {
     if (resizing) {
       return {
-        width: `${size.widthInPercent}%`,
+        width: `${size.width}px`,
         height: objectFit ? `${size.height}px` : "auto"
       };
     } else {

package/dist/Editor/Elements/Embed/Video.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -53,8 +53,7 @@ const VideoContent = props => {
       ...videoSX
     },
     src: embedURL,
-    title: alt,
-    allowFullScreen: true
+    title: alt
   });
 };
 const VideoPlaceholder = props => {
@@ -87,7 +86,8 @@ const Video = ({
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing
+    bannerSpacing,
+    aspectRatio
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -180,7 +180,7 @@ const Video = ({
   const getWidth = () => {
     if (resizing) {
       return {
-        width: size.widthInPercent ? `${size.widthInPercent}%` : "100%",
+        width: size.width ? `${size.width}px` : "100%",
         height: url ? `${size.height || 370}px` : "auto"
       };
     } else {
@@ -189,9 +189,10 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url ? {
+          height: url && !aspectRatio ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto"
+          } : "auto",
+          aspectRatio: aspectRatio ? aspectRatio : "auto"
         }, theme)
       };
     }
@@ -221,6 +222,7 @@ const Video = ({
       alignContent: vertical
     },
     ...element.attr,
+    contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -6,7 +6,6 @@ import { insertEmoji } from "../../utils/emoji";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
 import EmojiPicker from "./EmojiPicker";
-import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +19,6 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [target, setTarget] = useState(selectionTarget);
   const open = Boolean(anchorEl);
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useImperativeHandle(ref, () => ({
     triggerClick: target => {
       setTarget(target);
@@ -56,27 +54,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
         icon: "emoji"
       }),
       icoBtnType: icoBtnType
-    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
-      open: open,
-      onClose: handleClose,
-      customClass: "emojiDrawer",
-      children: /*#__PURE__*/_jsx(Paper, {
-        style: {
-          width: '100%'
-        },
-        sx: {
-          '& em-emoji-picker': {
-            width: '100%'
-          }
-        },
-        children: /*#__PURE__*/_jsx(EmojiPicker, {
-          data: data,
-          onEmojiSelect: onEmojiSelect,
-          theme: theme?.palette?.type,
-          dynamicWidth: true
-        })
-      })
-    }) : /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsx(Popover, {
       style: {
         zIndex: 10001
       },

package/dist/Editor/Elements/Form/Form.js

@@ -401,7 +401,6 @@ const Form = props => {
               component: "button",
               onClick: onSubmitClick,
               disabled: loading,
-              contentEditable: false,
               sx: {
                 background: buttonProps?.bgColor || "rgb(30, 75, 122)",
                 borderWidth: "1px",