From ef63de497d6fda8f49ce40aae4fd22255e45d374 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Thu, 1 Jul 2021 12:46:34 +0500
Subject: [PATCH] fix: properly handle editor premium features

---
 apps/web/src/components/editor/tinymce.js | 47 ++++++++++++++++-------
 apps/web/src/utils/toast.js               |  9 +++--
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/editor/tinymce.js b/apps/web/src/components/editor/tinymce.js
index 72207f165..3d779dbf5 100644
--- a/apps/web/src/components/editor/tinymce.js
+++ b/apps/web/src/components/editor/tinymce.js
@@ -30,6 +30,7 @@ import { showBuyDialog } from "../../common/dialog-controller";
 import { useStore as useThemeStore } from "../../stores/theme-store";
 import { isTablet } from "../../utils/dimensions";
 import { KeyboardEventManager } from "../../utils/keyboard";
+import { showToast } from "../../utils/toast";
 
 const markdownPatterns = [
   { start: "```", replacement: "<pre></pre>" },
@@ -83,18 +84,12 @@ const markdownPatterns = [
 ];
 
 const premiumCommands = [
-  "InsertUnorderedList",
-  "InsertOrderedList",
-  "indent",
   "JustifyFull",
   "JustifyLeft",
   "JustifyRight",
   "JustifyCenter",
   "FontSize",
-  "mceApplyTextcolor",
-  "mceInsertContent",
   "mceMedia",
-  "mceDirectionRTL",
 ];
 
 function useSkin() {
@@ -146,8 +141,9 @@ function TinyMCE(props) {
         statusbar: false,
         link_quicklink: true,
         width: "100%",
-        plugins:
-          "checklist paste importcss searchreplace autolink directionality code quickimage shortlink media table hr advlist lists imagetools textpattern noneditable quickbars autoresize",
+        plugins: isUserPremium()
+          ? "checklist paste importcss searchreplace autolink directionality code quickimage shortlink media table hr advlist lists imagetools textpattern noneditable quickbars autoresize"
+          : "checklist paste importcss searchreplace autolink directionality code quickimage shortlink media table hr advlist lists imagetools noneditable quickbars autoresize",
         toolbar_mode: isTablet() ? "scrolling" : "sliding",
         contextmenu: false,
         quickbars_insert_toolbar: false,
@@ -182,7 +178,7 @@ function TinyMCE(props) {
 `,
         toolbar: simple
           ? false
-          : `bold italic underline strikethrough blockquote code | fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor removeformat | hr | image media link table | ltr rtl | searchreplace`,
+          : `bold italic underline strikethrough blockquote code | fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent subscript superscript |  numlist bullist checklist | forecolor backcolor removeformat | hr | image media link table | ltr rtl | searchreplace`,
         quickbars_selection_toolbar:
           "bold italic underline strikethrough code h2 h3 quicklink blockquote",
         mobile: {
@@ -212,14 +208,39 @@ function TinyMCE(props) {
         autoresize_bottom_margin: 100,
       }}
       onBeforeExecCommand={async (command) => {
+        console.log(command);
         if (
-          premiumCommands.some(
-            (cmd) => command.command === cmd && !command?.value?.paste
-          ) &&
+          premiumCommands.some((cmd) => {
+            let isPremium = command.command === cmd && !command?.value?.paste;
+            if (
+              command.command === "mceInsertContent" &&
+              !command?.value?.paste
+            ) {
+              isPremium =
+                command.value.startsWith(`<pre`) ||
+                command.value.startsWith(`<table`) ||
+                command.value.startsWith(`<img`) ||
+                command.value.includes("tox-checklist");
+            }
+            return isPremium;
+          }) &&
           !isUserPremium()
         ) {
           command.preventDefault();
-          await showBuyDialog();
+          command.stopImmediatePropagation();
+          command.stopPropagation();
+          showToast(
+            "error",
+            "Upgrade to Pro to enjoy full rich text editor with markdown support.",
+            [
+              {
+                text: "Upgrade",
+                onClick: () => {
+                  showBuyDialog();
+                },
+              },
+            ]
+          );
           return;
         }
       }}
diff --git a/apps/web/src/utils/toast.js b/apps/web/src/utils/toast.js
index ddc970541..6800696aa 100644
--- a/apps/web/src/utils/toast.js
+++ b/apps/web/src/utils/toast.js
@@ -23,7 +23,7 @@ function showToast(type, message, actions) {
       renderIcon: () => {
         return (
           <ThemeProvider>
-            <IconComponent color={type} />
+            <IconComponent size={28} color={type} />
           </ThemeProvider>
         );
       },
@@ -39,12 +39,12 @@ function ToastContainer(props) {
         data-test-id="toast"
         justifyContent="center"
         alignContent="center"
-        my={1}
+        my={2}
       >
         <Text
           data-test-id="toast-message"
           variant="body"
-          fontSize="menu"
+          fontSize="body"
           color="text"
           mr={2}
         >
@@ -52,8 +52,9 @@ function ToastContainer(props) {
         </Text>
         {actions?.map((action) => (
           <Button
+            flexShrink={0}
             variant="anchor"
-            fontSize="menu"
+            fontSize="body"
             color={type}
             key={action.text}
             onClick={action.onClick}