@flozy/editor 1.8.4 → 1.8.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
13
13
  import withCommon from "./hooks/withCommon";
14
14
  import DialogWrapper from "./DialogWrapper";
15
15
  import { serializeToText } from "./utils/serializeToText";
16
- import { getPageSettings } from "./utils/pageSettings";
16
+ import { findPageSettings, getPageSettings } from "./utils/pageSettings";
17
17
  import { getThumbnailImage, invertColor } from "./helper";
18
18
  import PopupTool from "./Toolbar/PopupTool";
19
19
  import "./font.css";
@@ -17,6 +17,11 @@ export const PrevArrow = props => {
17
17
  zIndex: 3
18
18
  },
19
19
  onClick: onClick,
20
+ sx: {
21
+ '&.MuiButtonBase-root': {
22
+ lineHeight: "0px !important"
23
+ }
24
+ },
20
25
  contentEditable: false,
21
26
  children: /*#__PURE__*/_jsx(Icon, {
22
27
  icon: "leftArrow"
@@ -37,6 +42,11 @@ export const NextArrow = props => {
37
42
  right: '5px',
38
43
  zIndex: 3
39
44
  },
45
+ sx: {
46
+ '&.MuiButtonBase-root': {
47
+ lineHeight: "0px !important"
48
+ }
49
+ },
40
50
  onClick: onClick,
41
51
  contentEditable: false,
42
52
  children: /*#__PURE__*/_jsx(Icon, {
@@ -11,6 +11,7 @@
11
11
  font-family: slick;
12
12
  -webkit-font-smoothing: antialiased;
13
13
  -moz-osx-font-smoothing: grayscale;
14
+ content: none;
14
15
  }
15
16
  .slick-loading .slick-list {
16
17
  background: #fff;
@@ -12,7 +12,7 @@ import GridPopup from "./GridPopup";
12
12
  import SectionPopup from "./SectionPopup";
13
13
  import { gridItem } from "../../utils/gridItem";
14
14
  import { useEditorContext } from "../../hooks/useMouseMove";
15
- import { getTRBLBreakPoints } from "../../helper/theme";
15
+ import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { Fragment as _Fragment } from "react/jsx-runtime";
18
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,7 +42,8 @@ const Grid = props => {
42
42
  borderWidth,
43
43
  borderColor,
44
44
  borderStyle,
45
- borderRadius
45
+ borderRadius,
46
+ flexWrap
46
47
  } = element;
47
48
  const {
48
49
  vertical,
@@ -305,7 +306,10 @@ const Grid = props => {
305
306
  alignItems: vertical || "start",
306
307
  justifyContent: horizantal || "start",
307
308
  flexDirection: flexDirection || "row",
308
- width: "100%"
309
+ width: "100%",
310
+ flexWrap: {
311
+ ...getBreakPointsValue(flexWrap || "wrap")
312
+ }
309
313
  },
310
314
  "data-path": path.join(","),
311
315
  children: children
@@ -33,7 +33,8 @@ const GridItem = props => {
33
33
  bgColorHover,
34
34
  borderColorHover,
35
35
  textColor,
36
- animation
36
+ animation,
37
+ cellGHeight
37
38
  } = element;
38
39
  const {
39
40
  vertical,
@@ -104,6 +105,9 @@ const GridItem = props => {
104
105
  width: {
105
106
  ...getBreakPointsValue(grid, null, "overrideGridSize", true)
106
107
  },
108
+ height: {
109
+ ...getBreakPointsValue(cellGHeight || "auto")
110
+ },
107
111
  display: "flex",
108
112
  flexDirection: flexDirection || "column",
109
113
  background: bgColor || "transparent",
@@ -6,11 +6,6 @@ const IframeEditor = () => {
6
6
  const [message, sendMessage] = useWindowMessage({
7
7
  type: "editorProps"
8
8
  });
9
- const device = {
10
- label: "Mobile",
11
- breakpoint: "sm",
12
- width: 425
13
- };
14
9
  const onSave = (a, b) => {
15
10
  sendMessage({
16
11
  type: "Editor:onSave",
@@ -24,8 +19,7 @@ const IframeEditor = () => {
24
19
  return /*#__PURE__*/_jsx(CommonEditor, {
25
20
  ...message,
26
21
  isIframe: true,
27
- onSave: onSave,
28
- device: device
22
+ onSave: onSave
29
23
  });
30
24
  } else {
31
25
  return /*#__PURE__*/_jsx("div", {
@@ -41,7 +41,6 @@ const editorStyles = ({
41
41
  "& .editor-wrapper": {
42
42
  maxWidth: "100%",
43
43
  height: "100%",
44
- backgroundColor: "#FFF",
45
44
  overflow: "visible",
46
45
  "& .section-wrapper-fluid": {
47
46
  "& .grid-container": {
@@ -10,6 +10,9 @@ const usePopupStyle = () => ({
10
10
  "& .papper-wrpr": {
11
11
  boxShadow: "none"
12
12
  }
13
+ },
14
+ "&.xs": {
15
+ transform: "none !important"
13
16
  }
14
17
  },
15
18
  textFormatWrapper: {
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Popper, Fade, Paper } from "@mui/material";
2
+ import { Popper, Fade, Paper, Popover } from "@mui/material";
3
3
  import { Editor, Range } from "slate";
4
4
  import { useSlate, useFocused } from "slate-react";
5
5
  import TextFormat from "./TextFormat";
@@ -7,6 +7,7 @@ import usePopupStyle from "./PopupToolStyle";
7
7
  import useDrag from "../../hooks/useDrag";
8
8
  import PopperHeader from "./PopperHeader";
9
9
  import { TableUtil } from "../../utils/table";
10
+ import useWindowResize from "../../hooks/useWindowResize";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const PopupTool = props => {
@@ -21,6 +22,7 @@ const PopupTool = props => {
21
22
  const [event] = useDrag(anchorEl);
22
23
  const id = open ? "popup-edit-tool" : "";
23
24
  const table = new TableUtil(editor);
25
+ const [size] = useWindowResize();
24
26
  useEffect(() => {
25
27
  if (event === "end" && anchorEl && !open) {
26
28
  // for table cell selection
@@ -66,7 +68,7 @@ const PopupTool = props => {
66
68
  transition: true,
67
69
  placement: "auto-end",
68
70
  sx: classes.popupWrapper,
69
- className: "tools-drawer",
71
+ className: `tools-drawer ${size?.device}`,
70
72
  children: ({
71
73
  TransitionProps
72
74
  }) => /*#__PURE__*/_jsx(Fade, {
@@ -1,25 +1,39 @@
1
1
  import React from "react";
2
2
  import { Grid, MenuItem, Select, Typography } from "@mui/material";
3
+ import { getBreakPointsValue } from "../../../helper/theme";
4
+ import useWindowResize from "../../../hooks/useWindowResize";
3
5
  import { jsx as _jsx } from "react/jsx-runtime";
4
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
7
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
8
  const TextOptions = props => {
7
9
  const {
8
- value,
10
+ value: val,
9
11
  data,
10
12
  onChange,
11
13
  elementProps
12
14
  } = props;
13
15
  const {
14
16
  key,
17
+ isBreakpoint,
15
18
  options,
16
19
  renderOption,
17
20
  width
18
21
  } = data;
22
+ const [size] = useWindowResize();
23
+ const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
19
24
  const handleChange = e => {
20
- onChange({
21
- [key]: e.target.value
22
- });
25
+ if (isBreakpoint) {
26
+ onChange({
27
+ [key]: {
28
+ ...getBreakPointsValue(val),
29
+ [size?.device]: e.target.value
30
+ }
31
+ });
32
+ } else {
33
+ onChange({
34
+ [key]: e.target.value
35
+ });
36
+ }
23
37
  };
24
38
  return /*#__PURE__*/_jsx(_Fragment, {
25
39
  children: /*#__PURE__*/_jsxs(Grid, {
@@ -71,9 +71,26 @@ const gridItemStyle = [{
71
71
  tab: "Size",
72
72
  value: "gridSize",
73
73
  fields: [{
74
- label: "Grid Size",
74
+ label: "Width Size",
75
75
  key: "grid",
76
76
  type: "gridSize"
77
+ }, {
78
+ label: "Height",
79
+ key: "cellGHeight",
80
+ type: "textOptions",
81
+ isBreakpoint: true,
82
+ options: [{
83
+ text: "Auto",
84
+ value: "auto"
85
+ }, {
86
+ text: "Full",
87
+ value: "100%"
88
+ }],
89
+ renderOption: option => {
90
+ return /*#__PURE__*/_jsx("span", {
91
+ children: option.text
92
+ });
93
+ }
77
94
  }]
78
95
  }, {
79
96
  tab: "Animation",
@@ -90,9 +90,27 @@ const gridStyle = [{
90
90
  tab: "Size",
91
91
  value: "gridSize",
92
92
  fields: [{
93
- label: "Grid Size",
93
+ label: "Width Size",
94
94
  key: "gridSize",
95
95
  type: "gridSize"
96
+ }, {
97
+ label: "Wrap",
98
+ key: "flexWrap",
99
+ type: "textOptions",
100
+ width: 12,
101
+ isBreakpoint: true,
102
+ options: [{
103
+ text: "Wrap",
104
+ value: "wrap"
105
+ }, {
106
+ text: "No Wrap",
107
+ value: "nowrap"
108
+ }],
109
+ renderOption: option => {
110
+ return /*#__PURE__*/_jsx("span", {
111
+ children: option.text
112
+ });
113
+ }
96
114
  }]
97
115
  }, {
98
116
  tab: "Save As Template",
@@ -27,7 +27,7 @@ const useWindowMessage = props => {
27
27
  if (window.parent) {
28
28
  window.parent.postMessage({
29
29
  ...action
30
- }, "http://localhost:3000");
30
+ }, "*");
31
31
  }
32
32
  };
33
33
  return [message, sendMessage];
@@ -1,4 +1,21 @@
1
1
  import { Editor, Transforms, Element } from "slate";
2
+ export const findPageSettings = editor => {
3
+ try {
4
+ console.log(editor?.children);
5
+ return {
6
+ element: editor?.children?.find(f => f.type === "page-settings")
7
+ };
8
+ } catch (err) {
9
+ return {
10
+ path: null,
11
+ element: {
12
+ pageProps: {
13
+ pageWidth: "fixed"
14
+ }
15
+ }
16
+ };
17
+ }
18
+ };
2
19
  export const getPageSettings = editor => {
3
20
  try {
4
21
  const [pageSettingsNode] = Editor.nodes(editor, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.8.4",
3
+ "version": "1.8.5",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"