@flozy/editor 3.4.7 → 3.4.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -66,6 +66,7 @@ function DisplayOption({
66
66
  onSend(option.value, option);
67
67
  },
68
68
  id: "infinity-select-popover",
69
+ className: open ? "active" : "",
69
70
  children: [/*#__PURE__*/_jsxs("div", {
70
71
  className: "option-label",
71
72
  id: "infinity-select-popover",
@@ -110,7 +110,8 @@ const Styles = theme => ({
110
110
  overflow: "auto",
111
111
  // width: "240px",
112
112
  minWidth: "200px",
113
- border: "1px solid #E0E0E0"
113
+ border: "1px solid #E0E0E0",
114
+ padding: "6px"
114
115
  },
115
116
  optionWrapper: {
116
117
  position: "relative"
@@ -124,23 +125,37 @@ const Styles = theme => ({
124
125
 
125
126
  optionBtn: {
126
127
  color: theme?.palette?.editor?.textColor || "#373232",
127
- padding: "8px 12px",
128
128
  textTransform: "none",
129
129
  justifyContent: "space-between",
130
130
  width: "100%",
131
131
  fontWeight: "normal !important",
132
+ minHeight: "36px",
133
+ padding: "4px 8px",
132
134
  "& .option-label": {
133
135
  display: "flex",
134
136
  alignItems: "center",
135
137
  gap: "8px"
138
+ },
139
+ "&:hover": {
140
+ background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
141
+ },
142
+ "&.active": {
143
+ background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`,
144
+ color: "#2563EB",
145
+ "& svg path": {
146
+ stroke: "#2563EB"
147
+ },
148
+ "& svg": {
149
+ color: "#2563EB !important"
150
+ }
136
151
  }
137
152
  },
138
153
  optionHeading: {
139
154
  color: theme?.palette?.editor?.textColor,
140
- padding: "14px 0px 8px 4px",
155
+ padding: "10px 0px 8px 4px",
141
156
  fontWeight: 600,
142
157
  borderBottom: "1px solid #DCE4EC",
143
- margin: "0px 8px"
158
+ margin: "0px 8px 4px 8px"
144
159
  },
145
160
  mobileAIInputWrapper: {
146
161
  position: "fixed",
@@ -247,7 +247,7 @@ function AppHeader(props) {
247
247
  width: "auto"
248
248
  },
249
249
  src: appLogo
250
- }) : null, "\xA0", appTitle]
250
+ }) : null, appTitle]
251
251
  }), /*#__PURE__*/_jsxs(Box, {
252
252
  sx: {
253
253
  display: {
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
- import { Box, Divider, Grid, Tooltip } from "@mui/material";
3
+ import { Box, Divider, Grid, IconButton, Tooltip } from "@mui/material";
4
4
  import { toolbarGroups } from "../toolbarGroups";
5
5
  import { MarkButton } from "../FormatTools";
6
6
  import LinkButton from "../../Elements/Link/LinkButton";
@@ -8,6 +8,7 @@ import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
8
8
  import ColorPickerButton from "../../common/ColorPickerButton";
9
9
  import { colors } from "../../Elements/Color Picker/defaultColors";
10
10
  import VariableButton from "../../Elements/Variables/VariableButton";
11
+ import Icon from "../../common/Icon";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { Fragment as _Fragment } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,10 +22,11 @@ const BasicToolbar = props => {
21
22
  variableOptions,
22
23
  fontStyleOptions,
23
24
  hideLink = false,
24
- hideTextColor = false
25
+ hideTextColor = false,
26
+ hideResetIcon = true,
27
+ onResetClick = () => {}
25
28
  }
26
29
  } = props;
27
-
28
30
  // state
29
31
  const [activeColor, setActiveColor] = useState("#000000");
30
32
  const fontStyle = allTools.filter(f => f.basic || fontStyleOptions?.includes(f.format));
@@ -83,9 +85,23 @@ const BasicToolbar = props => {
83
85
  })
84
86
  }), /*#__PURE__*/_jsx(Grid, {
85
87
  item: true,
86
- children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
87
- placeholder: "Variables",
88
- options: variableOptions
88
+ children: /*#__PURE__*/_jsxs(Grid, {
89
+ container: true,
90
+ children: [!hideResetIcon && /*#__PURE__*/_jsx(Grid, {
91
+ item: true,
92
+ children: /*#__PURE__*/_jsx(IconButton, {
93
+ onClick: onResetClick,
94
+ children: /*#__PURE__*/_jsx(Icon, {
95
+ icon: "resetIcon"
96
+ })
97
+ })
98
+ }), /*#__PURE__*/_jsx(Grid, {
99
+ item: true,
100
+ children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
101
+ placeholder: "Variables",
102
+ options: variableOptions
103
+ })
104
+ })]
89
105
  })
90
106
  })]
91
107
  }), /*#__PURE__*/_jsx(Divider, {})]
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
7
7
  import { SiLatex } from "react-icons/si";
8
8
  import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
9
9
  import { IoIosImage } from "react-icons/io";
10
- import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon } from "./iconslist";
10
+ import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
11
11
  import ArrowRightIcon from "@mui/icons-material/ArrowRight";
12
12
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
13
13
  import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
@@ -243,7 +243,8 @@ const iconList = {
243
243
  }),
244
244
  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
245
245
  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
246
- infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {})
246
+ infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
247
+ resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
247
248
  };
248
249
  const Icon = props => {
249
250
  const {
@@ -31,7 +31,6 @@ const usePopupStyles = theme => ({
31
31
  borderBottom: "1px solid #DCE4EC"
32
32
  },
33
33
  listItem: {
34
- padding: "4px",
35
34
  cursor: "pointer",
36
35
  background: "transparent",
37
36
  borderRadius: "10px",
@@ -40,10 +39,10 @@ const usePopupStyles = theme => ({
40
39
  color: theme?.palette?.editor?.textColor
41
40
  },
42
41
  "&.active": {
43
- background: "#E9F3FE"
42
+ background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
44
43
  },
45
44
  "&:hover": {
46
- background: "#E9F3FE"
45
+ background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
47
46
  },
48
47
  "&.renderComp": {
49
48
  padding: "0px",
@@ -2344,4 +2344,30 @@ export const InfinityIcon = () => /*#__PURE__*/_jsxs("svg", {
2344
2344
  })]
2345
2345
  })]
2346
2346
  })]
2347
+ });
2348
+ export const ResetIcon = () => /*#__PURE__*/_jsxs("svg", {
2349
+ width: "22",
2350
+ height: "23",
2351
+ viewBox: "0 0 22 23",
2352
+ fill: "none",
2353
+ xmlns: "http://www.w3.org/2000/svg",
2354
+ children: [/*#__PURE__*/_jsx("path", {
2355
+ d: "M13.6514 5.61292C12.8539 5.37458 11.9739 5.21875 11.0022 5.21875C6.61135 5.21875 3.05469 8.77542 3.05469 13.1662C3.05469 17.5662 6.61135 21.1229 11.0022 21.1229C15.393 21.1229 18.9497 17.5662 18.9497 13.1754C18.9497 11.5438 18.4547 10.0221 17.6114 8.75708",
2356
+ stroke: "#64748B",
2357
+ strokeWidth: "1.5",
2358
+ strokeLinecap: "round",
2359
+ strokeLinejoin: "round"
2360
+ }), /*#__PURE__*/_jsx("path", {
2361
+ d: "M14.782 5.8324L12.1328 2.78906",
2362
+ stroke: "#64748B",
2363
+ strokeWidth: "1.5",
2364
+ strokeLinecap: "round",
2365
+ strokeLinejoin: "round"
2366
+ }), /*#__PURE__*/_jsx("path", {
2367
+ d: "M14.7845 5.83203L11.6953 8.08703",
2368
+ stroke: "#64748B",
2369
+ strokeWidth: "1.5",
2370
+ strokeLinecap: "round",
2371
+ strokeLinejoin: "round"
2372
+ })]
2347
2373
  });
@@ -242,7 +242,8 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
242
242
  props.component = "a";
243
243
  const [page, section] = url?.split("#") || [];
244
244
  const sec = section ? `#${section}` : "";
245
- props.href = isHomePage(page) ? `./home${sec}` : `./${url}`;
245
+ const currentUserPage = getCurrentUserPage();
246
+ props.href = isHomePage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
246
247
  if (openInNewTab) {
247
248
  if (isCurrentPage(page)) {
248
249
  // temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
@@ -304,9 +305,13 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
304
305
  }
305
306
  return props;
306
307
  };
307
- const isCurrentPage = page => {
308
+ const getCurrentUserPage = () => {
308
309
  const paths = window.location.pathname.split("/");
309
310
  let currentUserPage = paths[paths?.length - 1];
311
+ return currentUserPage;
312
+ };
313
+ const isCurrentPage = page => {
314
+ let currentUserPage = getCurrentUserPage();
310
315
  currentUserPage = isHomePage(currentUserPage) ? "home" : currentUserPage;
311
316
  const buttonPage = isHomePage(page) ? "home" : page;
312
317
  return currentUserPage === buttonPage;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.4.7",
3
+ "version": "3.4.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"