@flozy/editor 3.9.8 → 4.0.0

package/dist/Editor/common/iconslist.js

@@ -855,37 +855,6 @@ export const Carousal = props => /*#__PURE__*/_jsxs("svg", {
     fill: "#64748B"
   })]
 });
-export const PageSettings = (props = {}) => /*#__PURE__*/_jsxs("svg", {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  ...props,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M13.2386 0.535156H2.76091C2.30289 0.535814 1.86383 0.718051 1.53996 1.04192C1.2161 1.36578 1.03386 1.80485 1.0332 2.26286V11.7453C1.03386 12.2033 1.2161 12.6424 1.53996 12.9663C1.86383 13.2901 2.30289 13.4724 2.76091 13.473H4.29405C4.30918 13.5774 4.3571 13.6743 4.43089 13.7497L5.23503 14.5539C5.3155 14.6344 5.42114 14.6849 5.53434 14.6969C5.64753 14.7089 5.76143 14.6818 5.85704 14.62L6.42979 14.2498C6.5507 14.308 6.67481 14.3594 6.80151 14.4036L6.94482 15.0704C6.96871 15.1816 7.02999 15.2813 7.11846 15.3528C7.20692 15.4243 7.31722 15.4634 7.43099 15.4635H8.56852C8.68229 15.4634 8.79259 15.4243 8.88105 15.3528C8.96952 15.2813 9.0308 15.1816 9.05469 15.0704L9.198 14.4036C9.32471 14.3594 9.44881 14.308 9.56972 14.2498L10.1425 14.62C10.2381 14.6818 10.352 14.7089 10.4652 14.6969C10.5784 14.6849 10.684 14.6344 10.7645 14.5539L11.5686 13.7497C11.6424 13.6743 11.6903 13.5774 11.7055 13.473H13.2386C13.6966 13.4724 14.1357 13.2901 14.4595 12.9663C14.7834 12.6424 14.9657 12.2033 14.9663 11.7453V2.26286C14.9657 1.80485 14.7834 1.36578 14.4595 1.04192C14.1357 0.718051 13.6966 0.535814 13.2386 0.535156ZM2.76091 1.53038H13.2386C13.4328 1.53051 13.6191 1.60772 13.7564 1.74506C13.8937 1.8824 13.971 2.06864 13.9711 2.26286V3.52082H2.02842V2.26286C2.02856 2.06864 2.10577 1.8824 2.24311 1.74506C2.38045 1.60772 2.56668 1.53051 2.76091 1.53038ZM10.345 13.5656L9.8643 13.2546C9.78643 13.2042 9.696 13.1765 9.60323 13.1747C9.51047 13.173 9.41906 13.1972 9.33932 13.2446C9.12471 13.3725 8.89275 13.4687 8.65063 13.5303C8.56076 13.553 8.47904 13.6005 8.41468 13.6672C8.35032 13.7339 8.30588 13.8173 8.28638 13.908L8.16596 14.4683H7.83355L7.71313 13.908C7.69363 13.8173 7.64919 13.7339 7.58483 13.6672C7.52047 13.6005 7.43875 13.553 7.34888 13.5303C7.10676 13.4687 6.8748 13.3725 6.66019 13.2446C6.58045 13.1972 6.48904 13.173 6.39628 13.1747C6.30351 13.1765 6.21308 13.2042 6.13521 13.2546L5.65452 13.5656L5.41915 13.3302L5.73015 12.8495C5.78059 12.7717 5.80825 12.6812 5.81001 12.5885C5.81177 12.4957 5.78755 12.4043 5.7401 12.3246C5.61223 12.1099 5.51603 11.878 5.45448 11.6359C5.4317 11.546 5.38428 11.4643 5.31754 11.3999C5.25081 11.3355 5.16743 11.2911 5.07679 11.2716L4.51648 11.1512V10.8188L5.07679 10.6984C5.16743 10.6789 5.25081 10.6344 5.31754 10.5701C5.38428 10.5057 5.4317 10.424 5.45448 10.3341C5.51603 10.092 5.61223 9.86003 5.7401 9.64542C5.78755 9.56568 5.81177 9.47427 5.81001 9.38151C5.80825 9.28874 5.78059 9.19831 5.73015 9.12044L5.41915 8.63975L5.65452 8.40438L6.13521 8.71538C6.21308 8.76582 6.30351 8.79348 6.39628 8.79524C6.48904 8.797 6.58045 8.77278 6.66019 8.72533C6.8748 8.59746 7.10676 8.50126 7.34888 8.43971C7.43875 8.41693 7.52047 8.36951 7.58483 8.30277C7.64919 8.23604 7.69363 8.15266 7.71313 8.06202L7.83355 7.50171H8.16596L8.28638 8.06202C8.30588 8.15266 8.35032 8.23604 8.41468 8.30277C8.47904 8.36951 8.56076 8.41693 8.65063 8.43971C8.89275 8.50126 9.12471 8.59746 9.33932 8.72533C9.41906 8.77278 9.51047 8.797 9.60323 8.79524C9.696 8.79348 9.78643 8.76582 9.8643 8.71538L10.345 8.40438L10.5804 8.63975L10.2694 9.12044C10.2189 9.19831 10.1913 9.28874 10.1895 9.38151C10.1877 9.47427 10.212 9.56568 10.2594 9.64542C10.3873 9.86003 10.4835 10.092 10.545 10.3341C10.5678 10.424 10.6152 10.5057 10.682 10.5701C10.7487 10.6344 10.8321 10.6789 10.9227 10.6984L11.483 10.8188V11.1512L10.9227 11.2716C10.8321 11.2911 10.7487 11.3355 10.682 11.3999C10.6152 11.4643 10.5678 11.546 10.545 11.6359C10.4835 11.878 10.3873 12.1099 10.2594 12.3246C10.212 12.4043 10.1877 12.4957 10.1895 12.5885C10.1913 12.6812 10.2189 12.7717 10.2694 12.8495L10.5804 13.3302L10.345 13.5656ZM11.7132 12.4001L11.7055 13.473C11.7493 13.3735 11.385 12.2838 11.4198 12.1832L12.0866 12.0399C12.1979 12.016 12.2975 11.9547 12.3691 11.8663C12.4406 11.7778 12.4797 11.6675 12.4797 11.5538V10.4162C12.4797 10.3025 12.4406 10.1921 12.3691 10.1037C12.2975 10.0152 12.1979 9.95394 12.0866 9.93005L11.4198 9.78674C11.3756 9.66004 11.3243 9.53593 11.2661 9.41502L11.6363 8.84227C11.6981 8.74666 11.7252 8.63276 11.7132 8.51957C11.7011 8.40637 11.6506 8.30073 11.5701 8.22026L10.766 7.41612C10.6855 7.33561 10.5799 7.28512 10.4667 7.27307C10.3535 7.26103 10.2396 7.28816 10.144 7.34994L9.57121 7.72016C9.4503 7.66194 9.3262 7.61061 9.1995 7.5664L9.05618 6.8996C9.03229 6.78837 8.97101 6.68869 8.88255 6.61716C8.79408 6.54563 8.68378 6.50657 8.57002 6.50649H7.43099C7.31722 6.50657 7.20692 6.54563 7.11846 6.61716C7.02999 6.68869 6.96871 6.78837 6.94482 6.8996L6.80151 7.5664C6.67481 7.61061 6.5507 7.66194 6.42979 7.72016L5.85704 7.35243C5.76143 7.29065 5.64753 7.26352 5.53434 7.27556C5.42114 7.28761 5.3155 7.3381 5.23503 7.41861L4.43089 8.22026C4.35038 8.30073 4.29989 8.40637 4.28784 8.51957C4.2758 8.63276 4.30293 8.74666 4.36471 8.84227L4.73493 9.41502C4.67671 9.53593 4.62538 9.66004 4.58117 9.78674L3.91437 9.93005C3.80314 9.95394 3.70346 10.0152 3.63193 10.1037C3.5604 10.1921 3.52134 10.3025 3.52126 10.4162V11.5538C3.52134 11.6675 3.5604 11.7778 3.63193 11.8663C3.70346 11.9547 3.80314 12.016 3.91437 12.0399L4.58117 12.1832C4.616 12.2828 4.25026 13.3775 4.29405 13.473V12.5C4.19775 12.5001 2.57072 12.4591 2.48171 12.4224C2.3927 12.3856 2.3118 12.3317 2.24364 12.2637C2.17548 12.1956 2.12138 12.1148 2.08446 12.0259C2.04753 11.937 2.02849 11.8416 2.02842 11.7453V4.51604H13.9711V11.7453C13.971 11.9396 13.8937 12.1258 13.7564 12.2631C13.6191 12.4005 11.9074 12.4 11.7132 12.4001Z",
-    fill: "#64748A"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M4.29405 13.473H2.76091C2.30289 13.4724 1.86383 13.2901 1.53996 12.9663C1.2161 12.6424 1.03386 12.2033 1.0332 11.7453V2.26286C1.03386 1.80485 1.2161 1.36578 1.53996 1.04192C1.86383 0.718051 2.30289 0.535814 2.76091 0.535156H13.2386C13.6966 0.535814 14.1357 0.718051 14.4595 1.04192C14.7834 1.36578 14.9657 1.80485 14.9663 2.26286V11.7453C14.9657 12.2033 14.7834 12.6424 14.4595 12.9663C14.1357 13.2901 13.6966 13.4724 13.2386 13.473H11.7055M4.29405 13.473C4.30918 13.5774 4.3571 13.6743 4.43089 13.7497L5.23503 14.5539C5.3155 14.6344 5.42114 14.6849 5.53434 14.6969C5.64753 14.7089 5.76143 14.6818 5.85704 14.62L6.42979 14.2498C6.5507 14.308 6.67481 14.3594 6.80151 14.4036L6.94482 15.0704C6.96871 15.1816 7.02999 15.2813 7.11846 15.3528C7.20692 15.4243 7.31722 15.4634 7.43099 15.4635H8.56852C8.68229 15.4634 8.79259 15.4243 8.88105 15.3528C8.96952 15.2813 9.0308 15.1816 9.05469 15.0704L9.198 14.4036C9.32471 14.3594 9.44881 14.308 9.56972 14.2498L10.1425 14.62C10.2381 14.6818 10.352 14.7089 10.4652 14.6969C10.5784 14.6849 10.684 14.6344 10.7645 14.5539L11.5686 13.7497C11.6424 13.6743 11.6903 13.5774 11.7055 13.473M4.29405 13.473C4.25026 13.3775 4.616 12.2828 4.58117 12.1832L3.91437 12.0399C3.80314 12.016 3.70346 11.9547 3.63193 11.8663C3.5604 11.7778 3.52134 11.6675 3.52126 11.5538V10.4162C3.52134 10.3025 3.5604 10.1921 3.63193 10.1037C3.70346 10.0152 3.80314 9.95394 3.91437 9.93005L4.58117 9.78674C4.62538 9.66004 4.67671 9.53593 4.73493 9.41502L4.36471 8.84227C4.30293 8.74666 4.2758 8.63276 4.28784 8.51957C4.29989 8.40637 4.35038 8.30073 4.43089 8.22026L5.23503 7.41861C5.3155 7.3381 5.42114 7.28761 5.53434 7.27556C5.64753 7.26352 5.76143 7.29065 5.85704 7.35243L6.42979 7.72016C6.5507 7.66194 6.67481 7.61061 6.80151 7.5664L6.94482 6.8996C6.96871 6.78837 7.02999 6.68869 7.11846 6.61716C7.20692 6.54563 7.31722 6.50657 7.43099 6.50649H8.57002C8.68378 6.50657 8.79408 6.54563 8.88255 6.61716C8.97101 6.68869 9.03229 6.78837 9.05618 6.8996L9.1995 7.5664C9.3262 7.61061 9.4503 7.66194 9.57121 7.72016L10.144 7.34994C10.2396 7.28816 10.3535 7.26103 10.4667 7.27307C10.5799 7.28512 10.6855 7.33561 10.766 7.41612L11.5701 8.22026C11.6506 8.30073 11.7011 8.40637 11.7132 8.51957C11.7252 8.63276 11.6981 8.74666 11.6363 8.84227L11.2661 9.41502C11.3243 9.53593 11.3756 9.66004 11.4198 9.78674L12.0866 9.93005C12.1979 9.95394 12.2975 10.0152 12.3691 10.1037C12.4406 10.1921 12.4797 10.3025 12.4797 10.4162V11.5538C12.4797 11.6675 12.4406 11.7778 12.3691 11.8663C12.2975 11.9547 12.1979 12.016 12.0866 12.0399L11.4198 12.1832C11.385 12.2838 11.7493 13.3735 11.7055 13.473M4.29405 13.473V12.5C4.19775 12.5001 2.57072 12.4591 2.48171 12.4224C2.3927 12.3856 2.3118 12.3317 2.24364 12.2637C2.17548 12.1956 2.12138 12.1148 2.08446 12.0259C2.04753 11.937 2.02849 11.8416 2.02842 11.7453V4.51604H13.9711V11.7453C13.971 11.9396 13.8937 12.1258 13.7564 12.2631C13.6191 12.4005 11.9074 12.4 11.7132 12.4001L11.7055 13.473M2.76091 1.53038H13.2386C13.4328 1.53051 13.6191 1.60772 13.7564 1.74506C13.8937 1.8824 13.971 2.06864 13.9711 2.26286V3.52082H2.02842V2.26286C2.02856 2.06864 2.10577 1.8824 2.24311 1.74506C2.38045 1.60772 2.56668 1.53051 2.76091 1.53038ZM10.345 13.5656L9.8643 13.2546C9.78643 13.2042 9.696 13.1765 9.60323 13.1747C9.51047 13.173 9.41906 13.1972 9.33932 13.2446C9.12471 13.3725 8.89275 13.4687 8.65063 13.5303C8.56076 13.553 8.47904 13.6005 8.41468 13.6672C8.35032 13.7339 8.30588 13.8173 8.28638 13.908L8.16596 14.4683H7.83355L7.71313 13.908C7.69363 13.8173 7.64919 13.7339 7.58483 13.6672C7.52047 13.6005 7.43875 13.553 7.34888 13.5303C7.10676 13.4687 6.8748 13.3725 6.66019 13.2446C6.58045 13.1972 6.48904 13.173 6.39628 13.1747C6.30351 13.1765 6.21308 13.2042 6.13521 13.2546L5.65452 13.5656L5.41915 13.3302L5.73015 12.8495C5.78059 12.7717 5.80825 12.6812 5.81001 12.5885C5.81177 12.4957 5.78755 12.4043 5.7401 12.3246C5.61223 12.1099 5.51603 11.878 5.45448 11.6359C5.4317 11.546 5.38428 11.4643 5.31754 11.3999C5.25081 11.3355 5.16743 11.2911 5.07679 11.2716L4.51648 11.1512V10.8188L5.07679 10.6984C5.16743 10.6789 5.25081 10.6344 5.31754 10.5701C5.38428 10.5057 5.4317 10.424 5.45448 10.3341C5.51603 10.092 5.61223 9.86003 5.7401 9.64542C5.78755 9.56568 5.81177 9.47427 5.81001 9.38151C5.80825 9.28874 5.78059 9.19831 5.73015 9.12044L5.41915 8.63975L5.65452 8.40438L6.13521 8.71538C6.21308 8.76582 6.30351 8.79348 6.39628 8.79524C6.48904 8.797 6.58045 8.77278 6.66019 8.72533C6.8748 8.59746 7.10676 8.50126 7.34888 8.43971C7.43875 8.41693 7.52047 8.36951 7.58483 8.30277C7.64919 8.23604 7.69363 8.15266 7.71313 8.06202L7.83355 7.50171H8.16596L8.28638 8.06202C8.30588 8.15266 8.35032 8.23604 8.41468 8.30277C8.47904 8.36951 8.56076 8.41693 8.65063 8.43971C8.89275 8.50126 9.12471 8.59746 9.33932 8.72533C9.41906 8.77278 9.51047 8.797 9.60323 8.79524C9.696 8.79348 9.78643 8.76582 9.8643 8.71538L10.345 8.40438L10.5804 8.63975L10.2694 9.12044C10.2189 9.19831 10.1913 9.28874 10.1895 9.38151C10.1877 9.47427 10.212 9.56568 10.2594 9.64542C10.3873 9.86003 10.4835 10.092 10.545 10.3341C10.5678 10.424 10.6152 10.5057 10.682 10.5701C10.7487 10.6344 10.8321 10.6789 10.9227 10.6984L11.483 10.8188V11.1512L10.9227 11.2716C10.8321 11.2911 10.7487 11.3355 10.682 11.3999C10.6152 11.4643 10.5678 11.546 10.545 11.6359C10.4835 11.878 10.3873 12.1099 10.2594 12.3246C10.212 12.4043 10.1877 12.4957 10.1895 12.5885C10.1913 12.6812 10.2189 12.7717 10.2694 12.8495L10.5804 13.3302L10.345 13.5656Z",
-    stroke: "white",
-    strokeWidth: "0.1"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M3.52105 3.02257C3.79587 3.02257 4.01866 2.79978 4.01866 2.52495C4.01866 2.25013 3.79587 2.02734 3.52105 2.02734C3.24623 2.02734 3.02344 2.25013 3.02344 2.52495C3.02344 2.79978 3.24623 3.02257 3.52105 3.02257Z",
-    fill: "#64748A",
-    stroke: "white",
-    strokeWidth: "0.1"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M5.01421 3.02257C5.28904 3.02257 5.51182 2.79978 5.51182 2.52495C5.51182 2.25013 5.28904 2.02734 5.01421 2.02734C4.73939 2.02734 4.5166 2.25013 4.5166 2.52495C4.5166 2.79978 4.73939 3.02257 5.01421 3.02257Z",
-    fill: "#64748A",
-    stroke: "white",
-    strokeWidth: "0.1"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M7.99972 8.99414C7.60605 8.99414 7.22122 9.11088 6.89389 9.32959C6.56656 9.5483 6.31144 9.85917 6.16079 10.2229C6.01014 10.5866 5.97072 10.9868 6.04752 11.3729C6.12433 11.759 6.3139 12.1137 6.59227 12.392C6.87063 12.6704 7.2253 12.86 7.61141 12.9368C7.99751 13.0136 8.39773 12.9742 8.76143 12.8235C9.12514 12.6729 9.436 12.4177 9.65472 12.0904C9.87343 11.7631 9.99017 11.3783 9.99017 10.9846C9.99017 10.4567 9.78046 9.95041 9.40718 9.57713C9.0339 9.20385 8.52762 8.99414 7.99972 8.99414ZM7.99972 11.9798C7.80289 11.9798 7.61047 11.9214 7.44681 11.8121C7.28314 11.7027 7.15558 11.5473 7.08026 11.3654C7.00493 11.1836 6.98522 10.9835 7.02362 10.7904C7.06202 10.5974 7.15681 10.42 7.29599 10.2809C7.43518 10.1417 7.61251 10.0469 7.80556 10.0085C7.99862 9.97008 8.19872 9.98979 8.38058 10.0651C8.56243 10.1404 8.71786 10.268 8.82722 10.4317C8.93658 10.5953 8.99494 10.7877 8.99494 10.9846C8.99494 11.2485 8.89009 11.5017 8.70345 11.6883C8.51681 11.875 8.26367 11.9798 7.99972 11.9798Z",
-    fill: "#64748A",
-    stroke: "white",
-    strokeWidth: "0.1"
-  })]
-});
 export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",

package/dist/Editor/helper/deserialize/index.js

@@ -72,15 +72,20 @@ const ELEMENT_TAGS = {
     type: "paragraph"
   }),
   TABLE: (el, children = []) => {
-    const bodyChild = children[0]?.children || [];
-    const firstRowChildren = bodyChild[0]?.children || [];
-    return {
-      type: "table",
-      overwriteChild: bodyChild,
-      // we are not having table-body in our json format, just we are wrapping table-row's inside the table
-      rows: bodyChild?.length,
-      columns: firstRowChildren?.length
-    };
+    try {
+      const tableBody = (children || [])?.find(f => f?.type === "table-body");
+      const bodyChild = tableBody?.children || [];
+      const firstRowChildren = tableBody[0]?.children || [];
+      return {
+        type: "table",
+        overwriteChild: bodyChild,
+        // we are not having table-body in our json format, just we are wrapping table-row's inside the table
+        rows: bodyChild?.length,
+        columns: firstRowChildren?.length
+      };
+    } catch (err) {
+      console.log(err);
+    }
   },
   THEAD: () => ({
     type: "table-head"

package/dist/Editor/helper/theme.js

@@ -1,4 +1,6 @@
-import { sizeMap } from "../utils/font";
+import { ReactEditor } from "slate-react";
+import { fontFamilyMap, sizeMap } from "../utils/font";
+import { Editor, Node } from "slate";
 export const breakpoints = {
   small: 0,
   mobile: 600,
@@ -27,7 +29,7 @@ const overrideValues = (value, ot) => {
   return Object.keys(value).reduce((a, b) => {
     return {
       ...a,
-      [b]: overrides[ot] ? overrides[ot](value[b]) : value
+      [b]: overrides[ot] ? overrides[ot](value[b], value) : value
     };
   }, {});
 };
@@ -44,7 +46,15 @@ const overrides = {
   overrideReSizeH: val => {
     return `${val?.height}px`;
   },
-  overrideBorderRadius: val => {
+  overrideBorderRadius: (val, breakpointValues) => {
+    if (!val?.topLeft) {
+      Object.values(breakpointValues || {}).forEach(v => {
+        if (v) {
+          // Applying the values from breakpoints that exist to those that do not have
+          val = v;
+        }
+      });
+    }
     return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
   }
 };
@@ -97,4 +107,180 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
   } catch (err) {
     console.log(err);
   }
-};
+};
+export function getElementStyle(editor, element, stylePropertyName) {
+  try {
+    const path = ReactEditor.findPath(editor, element);
+    if (path?.length) {
+      const currentEle = Node.get(editor, path);
+      const dom = ReactEditor.toDOMNode(editor, currentEle);
+      const editorBtn = dom?.querySelector("button.theme-element");
+      const elementStyle = window.getComputedStyle(editorBtn);
+      const style = elementStyle[stylePropertyName];
+      if (stylePropertyName === "fontFamily") {
+        const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
+        return val;
+      }
+      return style;
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+}
+export function getTextSizeVal(editor) {
+  try {
+    const currentNode = Node.get(editor, editor.selection.anchor.path);
+    const currentElement = ReactEditor.toDOMNode(editor, currentNode);
+    if (currentElement) {
+      const element = document.querySelector('span[data-slate-string="true"]');
+      const computedStyle = window.getComputedStyle(element);
+      return computedStyle.getPropertyValue("font-size") || "";
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+}
+export function getVariableValue(val) {
+  const bodyElement = document.body;
+  const computedStyle = getComputedStyle(bodyElement);
+  const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
+  const varValue = computedStyle.getPropertyValue(variableName).trim();
+  return varValue;
+}
+export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
+// "underline",
+// "strikethrough",
+];
+
+const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
+export const isTextCustomized = editor => {
+  try {
+    if (editor.selection) {
+      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
+      if (!currentElement) {
+        return false;
+      }
+      const {
+        children,
+        type
+      } = currentElement;
+      if (!themeElements.includes(type)) {
+        return false;
+      }
+      if (children?.length > 1) {
+        return true;
+      }
+      const customized = textThemeFields.some(field => {
+        const element = children[0] || {};
+        const value = element[field];
+        if (field === "fontSize") {
+          return Object.keys(value || {}).length;
+        } else {
+          return value;
+        }
+      });
+      return customized;
+    } else {
+      return null;
+    }
+  } catch (err) {
+    return null;
+  }
+};
+const addToTheme = (field, value, element) => {
+  switch (field) {
+    case "fontFamily":
+      return {
+        fontFamily: fontFamilyMap[value]
+      };
+    case "fontSize":
+      return {
+        fontSize: value?.lg
+      };
+    case "color":
+      return {
+        color: value
+      };
+    case "bold":
+      return {
+        fontWeight: "bold"
+      };
+    case "italic":
+      return {
+        fontStyle: "italic"
+      };
+    // case "underline":
+    // case "strikethrough":
+    //   let textDecoration = "";
+
+    //   if (element.underline) {
+    //     textDecoration = "underline";
+    //   }
+
+    //   if (element.strikethrough) {
+    //     textDecoration += " strikethrough";
+    //   }
+
+    //   return { textDecoration };
+    default:
+      return {};
+  }
+};
+const MAP_TEXT_THEME_FIELD = {
+  headingOne: "h1",
+  headingTwo: "h2",
+  headingThree: "h3",
+  headingFour: "h4",
+  headingFive: "h5",
+  headingSix: "h6",
+  paragraphOne: "para1",
+  paragraphTwo: "para2",
+  paragraphThree: "para3"
+};
+export const saveToTheme = editor => {
+  try {
+    if (editor.selection) {
+      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
+      if (!currentElement) {
+        return false;
+      }
+      const {
+        children
+      } = currentElement;
+      if (children?.length > 1) {
+        return true;
+      }
+      let theme = {};
+      textThemeFields.forEach(field => {
+        const element = children[0] || {};
+        const value = element[field];
+        let style = {};
+        let isValueExist = false;
+        if (value) {
+          isValueExist = true;
+          if (field === "fontSize") {
+            isValueExist = !!Object.keys(value).length;
+          }
+        }
+        if (isValueExist) {
+          style = addToTheme(field, value, element);
+        }
+        theme = {
+          ...theme,
+          ...style
+        };
+      });
+      textThemeFields.forEach(field => {
+        Editor.removeMark(editor, field);
+      });
+      return {
+        field: MAP_TEXT_THEME_FIELD[currentElement?.type],
+        theme
+      };
+    }
+  } catch (err) {
+    return;
+  }
+};
+export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];

package/dist/Editor/hooks/useEditorTheme.js

@@ -0,0 +1,139 @@
+import { useSlate } from "slate-react";
+import { defaultTheme } from "../theme";
+import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
+import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
+const MAP_FIELDS = {
+  HEADING: HEADING_THEME_FIELDS,
+  PARAGRAPH: PARAGRAPH_THEME_FIELDS
+};
+function getUpdatePayload(prevTheme = {}, update, actionData) {
+  const {
+    action,
+    fieldName
+  } = actionData || {};
+  const {
+    theme: prev
+  } = prevTheme;
+  let theme = {};
+  let themeProps = {};
+  switch (action) {
+    case "THEME_CHANGE":
+      theme = update;
+      break;
+    case "CSS_VAR_CHANGE":
+      const prevCssVars = prev?.cssVars || {};
+      const prevValue = prevCssVars[fieldName] || {};
+      themeProps = {
+        ...(prev || {}),
+        cssVars: {
+          ...prevCssVars,
+          [fieldName]: {
+            ...prevValue,
+            ...update
+          }
+        }
+      };
+      theme = {
+        ...prevTheme,
+        theme: themeProps
+      };
+      break;
+    case "ELEMENT_PROPS_CHANGE":
+      const prevEleProps = prev?.elementProps || {};
+      const prevEleValue = prevEleProps[fieldName] || {};
+      themeProps = {
+        ...(prev || {}),
+        elementProps: {
+          ...prevEleProps,
+          [fieldName]: {
+            ...prevEleValue,
+            ...update
+          }
+        }
+      };
+      theme = {
+        ...prevTheme,
+        theme: themeProps
+      };
+      break;
+    case "OTHER_PROPS_CHANGE":
+      themeProps = {
+        ...(prev || {}),
+        otherProps: {
+          ...(prev.otherProps || {}),
+          ...update
+        }
+      };
+      theme = {
+        ...prevTheme,
+        theme: themeProps
+      };
+      break;
+    case "FONT_CHANGE":
+      const {
+        elementProps = {},
+        otherProps = {}
+      } = prev;
+      const fields = MAP_FIELDS[actionData?.fieldType];
+      const headingUpdate = {};
+      fields?.forEach(field => {
+        const prevHeadingData = elementProps[field];
+        headingUpdate[field] = {
+          ...prevHeadingData,
+          ...update
+        };
+      });
+      themeProps = {
+        ...(prev || {}),
+        elementProps: {
+          ...elementProps,
+          ...headingUpdate
+        },
+        otherProps: {
+          ...otherProps,
+          headingFontFamily: update?.fontFamily
+        }
+      };
+      theme = {
+        ...prevTheme,
+        theme: themeProps
+      };
+      break;
+    default:
+      theme = {
+        ...prevTheme,
+        ...(update || {})
+      };
+      break;
+  }
+  return theme;
+}
+const updateTheme = (editor, pageSt, update, actionData) => {
+  const {
+    pageProps
+  } = pageSt || {};
+  const {
+    theme
+  } = pageProps || {};
+  updatePageSettings(editor, {
+    ...(pageProps || {}),
+    theme: getUpdatePayload(theme, update, actionData)
+  });
+};
+export const useEditorTheme = () => {
+  const editor = useSlate();
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const {
+    pageProps
+  } = pageSt || {};
+  const {
+    theme
+  } = pageProps || {};
+  return {
+    selectedTheme: theme?.theme || defaultTheme?.theme,
+    updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData),
+    theme
+  };
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -29,6 +29,7 @@ export const EditorProvider = ({
   const path = event?.target?.getAttribute("data-path");
   const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
   const [openAI, setOpenAI] = useState("");
+  const [selectedTheme, setSelectedTheme] = useState({});
   const onDrop = () => {
     setDrop(drop + 1);
   };
@@ -55,7 +56,9 @@ export const EditorProvider = ({
       popupType,
       setPopupType,
       openAI,
-      setOpenAI
+      setOpenAI,
+      selectedTheme,
+      setSelectedTheme
     },
     children: children
   });
@@ -75,7 +78,6 @@ const useMouseMove = () => {
   }, []);
   const onMouseMove = e => {
     const dpath = e?.target?.closest(".dpath");
-    console.log(dpath);
     if (dpath) {
       console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
       setEvent({

package/dist/Editor/hooks/useWindowMessage.js

@@ -4,9 +4,19 @@ const useWindowMessage = props => {
     type
   } = props;
   const [message, setMessage] = useState(null);
+  const sendMessage = action => {
+    if (window.parent) {
+      window.parent.postMessage({
+        ...action
+      }, "*");
+    }
+  };
   useEffect(() => {
     if (window.addEventListener) {
       window.addEventListener("message", onMessage, false);
+      sendMessage({
+        isLoaded: true
+      });
     } else {
       window.attachEvent("onmessage", onMessage);
     }
@@ -23,13 +33,6 @@ const useWindowMessage = props => {
       setMessage(e?.data[type]);
     }
   };
-  const sendMessage = action => {
-    if (window.parent) {
-      window.parent.postMessage({
-        ...action
-      }, "*");
-    }
-  };
   return [message, sendMessage];
 };
 export default useWindowMessage;

package/dist/Editor/plugins/withEmbeds.js

@@ -1,5 +1,5 @@
 import { Transforms, Path, Node } from "slate";
-const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
+const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
 const withEmbeds = editor => {
   const {
     isVoid,

package/dist/Editor/plugins/withHTML.js

@@ -1,4 +1,4 @@
-import { Transforms, Editor, Element, Node } from "slate";
+import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
@@ -15,7 +15,7 @@ const loopChildren = (children = [], defaultInsert) => {
   }
   return defaultInsert;
 };
-const getCurrentElement = editor => {
+export const getCurrentElement = editor => {
   try {
     if (editor.selection) {
       return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -26,6 +26,48 @@ const getCurrentElement = editor => {
     return null;
   }
 };
+const getCurrentElementText = editor => {
+  try {
+    if (editor.selection) {
+      return Editor.string(editor, editor?.selection?.anchor?.path);
+    } else {
+      return null;
+    }
+  } catch (err) {
+    return null;
+  }
+};
+const insertAtNextNode = (editor, formattedFragment) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      const parentPath = Path.parent(editor?.selection?.anchor?.path);
+      const nextPath = Path.next(parentPath);
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }, {
+        at: nextPath
+      });
+      Transforms.insertFragment(editor, formattedFragment, {
+        at: nextPath
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const handleInsert = (editor, defaultInsert, fragment = []) => {
+  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
+    insertAtNextNode(editor, fragment);
+  } else {
+    defaultInsert();
+  }
+};
 const formatFragment = {
   "list-item": fragment => {
     let refactorFragment = [];
@@ -64,11 +106,11 @@ const withHtml = editor => {
     const currentEl = getCurrentElement(editor);
     const eltype = currentEl?.type;
     if (slateHTML && !formatFragment[eltype]) {
+      const decoded = decodeAndParseBase64(slateHTML);
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
       });
       if (tableNode && tableNode[0]) {
-        const decoded = decodeAndParseBase64(slateHTML);
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
@@ -79,7 +121,7 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        insertData(data);
+        handleInsert(editor, () => insertData(data), decoded);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -96,7 +138,7 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      Transforms.insertFragment(editor, formattedFragment);
+      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -32,16 +32,21 @@ const withLayout = editor => {
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
       if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
-        const title = {
-          type: "title",
-          children: [{
-            text: "Untitled"
-          }]
-        };
-        Transforms.insertNodes(editor, title, {
-          at: path.concat(0),
-          select: true
-        });
+        const {
+          anchor
+        } = editor?.selection || {};
+        if (anchor?.offset !== 0) {
+          const title = {
+            type: "title",
+            children: [{
+              text: "Untitled"
+            }]
+          };
+          Transforms.insertNodes(editor, title, {
+            at: path.concat(0),
+            select: true
+          });
+        }
       }
       if (editor.children.length === 0) {
         const paragraph = {

package/dist/Editor/plugins/withTable.js

@@ -1,6 +1,6 @@
 import { Editor, Range, Point, Element, Transforms, Node } from "slate";
 import { TableUtil, createTableCell } from "../utils/table";
-const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
+const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
 const withTable = editor => {
   const {
     deleteBackward,
@@ -8,7 +8,7 @@ const withTable = editor => {
     delete: slateDelete
   } = editor;
   editor.delete = arg => {
-    if (arg.reverse) {
+    if (arg?.reverse) {
       const table = new TableUtil(editor);
       const cellsSelected = table.isCellSelected(editor.selection);
       if (cellsSelected && cellsSelected.length > 1) {