@flozy/editor 3.3.3 → 3.3.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -96,6 +96,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
96
96
  });
97
97
  const [isScrolling, setIsScrolling] = useState(false);
98
98
  const [isTextSelected, setIsTextSelected] = useState(false);
99
+ const [openInfiniti, setOpenInfiniti] = useState(false);
99
100
  const [size] = useWindowResize();
100
101
  const {
101
102
  needDotsBG,
@@ -381,6 +382,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
381
382
  return /*#__PURE__*/_jsx(EditorProvider, {
382
383
  theme: theme,
383
384
  editor: editor,
385
+ setOpenInfiniti: setOpenInfiniti,
384
386
  children: /*#__PURE__*/_jsx(DialogWrapper, {
385
387
  classes: classes,
386
388
  ...props,
@@ -402,13 +404,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
402
404
  children: [/*#__PURE__*/_jsx(Box, {
403
405
  className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
404
406
  sx: classes.slateWrapper,
405
- id: "slate-wrapper-scroll-container",
406
- style: editorWrapperStyle,
407
+ id: "slate-wrapper-scroll-container"
408
+ // style={editorWrapperStyle}
409
+ ,
407
410
  ref: editorWrapper,
408
411
  onClick: e => {
409
412
  handleInsertLastElement(e, editor);
410
413
  },
411
414
  onScroll: handleScroll,
415
+ style: {
416
+ ...editorWrapperStyle,
417
+ overflowY: openInfiniti ? "hidden" : "auto"
418
+ },
412
419
  children: /*#__PURE__*/_jsxs(Box, {
413
420
  component: "div",
414
421
  className: "max-content",
@@ -7,6 +7,7 @@ import { ReactEditor, useSlate } from "slate-react";
7
7
  import { Node, Path, Transforms } from "slate";
8
8
  import useWindowResize from "../../hooks/useWindowResize";
9
9
  import { MODES } from "./helper";
10
+ import { getSelectedText } from "../../utils/helper";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const scrollToAIInput = () => {
@@ -33,13 +34,20 @@ const updateAnchorEl = (setAnchorEl, editor) => {
33
34
  if (!editor.selection) {
34
35
  return;
35
36
  }
36
- const focussedNode = Node.get(editor, editor.selection.anchor.path);
37
- const focussedDom = ReactEditor.toDOMNode(editor, focussedNode);
38
37
  const selection = window.getSelection();
39
38
  if (selection.rangeCount) {
39
+ let caret;
40
+ if (getSelectedText(editor)) {
41
+ // selected text as caret
42
+ caret = selection.getRangeAt(0);
43
+ } else {
44
+ const focussedNode = Node.get(editor, editor?.selection?.anchor?.path);
45
+ // foccussed DOM as caret
46
+ caret = ReactEditor.toDOMNode(editor, focussedNode);
47
+ }
40
48
  const getBoundingClientRect = () => {
41
49
  const editorEle = document.querySelector(".ed-section-inner").getBoundingClientRect();
42
- const caretPos = focussedDom.getBoundingClientRect();
50
+ const caretPos = caret.getBoundingClientRect();
43
51
  return {
44
52
  y: caretPos.y,
45
53
  height: caretPos.height,
@@ -11,7 +11,7 @@ const Styles = theme => ({
11
11
  padding: "0px 12px",
12
12
  minHeight: "36px",
13
13
  position: "relative",
14
- background: theme?.palette?.editor?.background,
14
+ background: "#FCFAFF",
15
15
  borderRadius: "7px",
16
16
  "& .icon-container": {
17
17
  display: "flex",
@@ -82,8 +82,9 @@ const Styles = theme => ({
82
82
  },
83
83
  generatedText: {
84
84
  margin: "8px",
85
- maxHeight: "80px",
86
- overflow: "auto"
85
+ maxHeight: "100px",
86
+ overflow: "auto",
87
+ fontSize: "inherit"
87
88
  },
88
89
  customSelectWrapper: {
89
90
  width: "fit-content",
@@ -17,11 +17,11 @@ const VariableStyles = () => ({
17
17
  textTransform: "none",
18
18
  border: "1px solid #D8DDE1",
19
19
  height: "36px",
20
- paddingLeft: '8px',
21
- paddingRight: '18px',
20
+ paddingLeft: "8px",
21
+ paddingRight: "18px",
22
22
  "& svg": {
23
- width: '20px',
24
- height: '20px',
23
+ width: "20px",
24
+ height: "20px",
25
25
  "& path": {
26
26
  stroke: "#64748B"
27
27
  }
@@ -29,8 +29,16 @@ const VariableStyles = () => ({
29
29
  "&:hover": {
30
30
  border: "1px solid #64748B"
31
31
  },
32
- '& .MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input': {
33
- paddingRight: '5px'
32
+ "& .MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input": {
33
+ paddingRight: "5px"
34
+ }
35
+ },
36
+ variableMenuItem: {
37
+ "& .MuiMenuItem-root": {
38
+ color: "#64748B"
39
+ },
40
+ "& .Mui-selected": {
41
+ backgroundColor: "rgba(0, 0, 0, 0.04) !important"
34
42
  }
35
43
  }
36
44
  });
@@ -21,10 +21,13 @@ const VariableButton = props => {
21
21
  labelId: "variable-selection",
22
22
  id: "variable-selection-mini",
23
23
  displayEmpty: true,
24
- value: '',
24
+ value: "",
25
25
  sx: classes.variableBtn,
26
26
  onChange: updateVariable,
27
27
  IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
28
+ MenuProps: {
29
+ sx: classes.variableMenuItem
30
+ },
28
31
  children: [/*#__PURE__*/_jsx(MenuItem, {
29
32
  value: "",
30
33
  children: "Variables"
@@ -251,6 +251,10 @@ const editorStyles = ({
251
251
  "&::-webkit-scrollbar-thumb:hover": {
252
252
  background: "none !important"
253
253
  }
254
+ },
255
+ "& ::selection": {
256
+ color: "black",
257
+ background: "#EAEBFE"
254
258
  }
255
259
  },
256
260
  fullScreenWrapper: {
@@ -47,7 +47,8 @@ const ElementListCard = props => {
47
47
  component: "div",
48
48
  variant: "h6",
49
49
  style: {
50
- fontSize: "14px"
50
+ fontSize: "14px",
51
+ fontWeight: "normal"
51
52
  },
52
53
  children: name
53
54
  }), /*#__PURE__*/_jsx(Typography, {
@@ -226,7 +226,7 @@ const ELEMENTS_LIST = [{
226
226
  }
227
227
  }, {
228
228
  name: "Ask AI to write anything",
229
- group: "Infinity AI",
229
+ group: "INFINITY AI",
230
230
  desc: "",
231
231
  type: "infinityAI",
232
232
  icon: /*#__PURE__*/_jsx(Icon, {
@@ -19,7 +19,8 @@ export const useEditorSelection = editor => {
19
19
  export const EditorProvider = ({
20
20
  editor,
21
21
  theme,
22
- children
22
+ children,
23
+ setOpenInfiniti
23
24
  }) => {
24
25
  const [event] = useMouseMove();
25
26
  const [previous, setPrevious] = useState("");
@@ -54,7 +55,10 @@ export const EditorProvider = ({
54
55
  popupType,
55
56
  setPopupType,
56
57
  openAI,
57
- setOpenAI
58
+ setOpenAI: value => {
59
+ setOpenAI(value);
60
+ setOpenInfiniti(!!value);
61
+ }
58
62
  },
59
63
  children: children
60
64
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.3.3",
3
+ "version": "3.3.5",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"