From 8a25b54deb6877724f1a756a436f8f428318a6f6 Mon Sep 17 00:00:00 2001
From: Jeet Mandaliya <45892659+sereneinserenade@users.noreply.github.com>
Date: Wed, 27 Jul 2022 17:23:17 +0200
Subject: [PATCH] feat: icons for options && more options

---
 src/tiptap/Tiptap.tsx                         |  4 +-
 src/tiptap/extensions/starter-kit.ts          |  4 +
 .../TableCellNodeView.tsx                     | 44 +++++++--
 src/tiptap/mocks/defaultContent.ts            | 93 +++++--------------
 src/tiptap/proseClassString.ts                |  2 +-
 5 files changed, 66 insertions(+), 81 deletions(-)

diff --git a/src/tiptap/Tiptap.tsx b/src/tiptap/Tiptap.tsx
index 6f5f321..f69dd8b 100644
--- a/src/tiptap/Tiptap.tsx
+++ b/src/tiptap/Tiptap.tsx
@@ -72,7 +72,7 @@ export const Tiptap = () => {
 
   return (
     editor && (
-      <section className="flex flex-col gap-2 w-full">
+      <section className="flex flex-col gap-2 w-full justify-center">
         <span className="flex gap-2">
           <button
             className="btn btn-sm btn-outline"
@@ -97,7 +97,7 @@ export const Tiptap = () => {
           </button>
         </span>
 
-        <EditorContent className="w-full" editor={editor} />
+        <EditorContent className="w-full flex justify-center" editor={editor} />
 
         <CustomBubbleMenu editor={editor} />
 
diff --git a/src/tiptap/extensions/starter-kit.ts b/src/tiptap/extensions/starter-kit.ts
index a4f63cf..1d8fa49 100644
--- a/src/tiptap/extensions/starter-kit.ts
+++ b/src/tiptap/extensions/starter-kit.ts
@@ -18,6 +18,7 @@ import { DraggableBlock } from "./draggable-block";
 import { Link } from "./link";
 import { Paragraph } from "./paragraph";
 import { SuperchargedTableExtensions } from "./supercharged-table";
+import { ResizableMedia } from "./resizableMedia";
 
 interface GetExtensionsProps {
   openLinkModal: () => void;
@@ -64,5 +65,8 @@ export const getExtensions = ({
 
     // Table
     ...SuperchargedTableExtensions,
+
+    // Resizable Media
+    ResizableMedia,
   ];
 };
diff --git a/src/tiptap/extensions/supercharged-table/extension-table-cell/TableCellNodeView.tsx b/src/tiptap/extensions/supercharged-table/extension-table-cell/TableCellNodeView.tsx
index a8aebe0..c7590e2 100644
--- a/src/tiptap/extensions/supercharged-table/extension-table-cell/TableCellNodeView.tsx
+++ b/src/tiptap/extensions/supercharged-table/extension-table-cell/TableCellNodeView.tsx
@@ -9,36 +9,59 @@ import Tippy from "@tippyjs/react";
 interface CellButton {
   name: string;
   action: (editor: Editor) => boolean;
+  iconClass?: string;
 }
 
 const cellButtonsConfig: CellButton[] = [
   {
     name: "Add row above",
     action: (editor) => editor.chain().focus().addRowBefore().run(),
+    iconClass: "i-mdi-table-row-plus-before",
   },
   {
     name: "Add row below",
     action: (editor) => editor.chain().focus().addRowAfter().run(),
+    iconClass: "i-mdi-table-row-plus-after",
   },
   {
     name: "Add column before",
     action: (editor) => editor.chain().focus().addColumnBefore().run(),
+    iconClass: "i-mdi-table-column-plus-before",
   },
   {
     name: "Add column after",
     action: (editor) => editor.chain().focus().addColumnAfter().run(),
+    iconClass: "i-mdi-table-column-plus-after",
   },
   {
     name: "Remove row",
     action: (editor) => editor.chain().focus().deleteRow().run(),
+    iconClass: "i-mdi-table-row-remove",
   },
   {
     name: "Remove col",
     action: (editor) => editor.chain().focus().deleteColumn().run(),
+    iconClass: "i-mdi-table-column-remove",
+  },
+  {
+    name: "Toggle header row",
+    action: (editor) => editor.chain().focus().toggleHeaderRow().run(),
+    iconClass: "i-mdi-table-row",
+  },
+  {
+    name: "Toggle header column",
+    action: (editor) => editor.chain().focus().toggleHeaderColumn().run(),
+    iconClass: "i-mdi-table-column",
+  },
+  {
+    name: "Toggle header cell",
+    action: (editor) => editor.chain().focus().toggleHeaderCell().run(),
+    iconClass: "i-mdi-table-border",
   },
   {
     name: "Remove table",
     action: (editor) => editor.chain().focus().deleteTable().run(),
+    iconClass: "i-mdi-table-remove",
   },
 ];
 
@@ -87,6 +110,7 @@ export const TableCellNodeView: FC<NodeViewProps> = ({
   return (
     <NodeViewWrapper>
       <NodeViewContent as="span" />
+
       {(isCurrentCellActive || selected) && (
         <Tippy
           appendTo={document.body}
@@ -94,19 +118,27 @@ export const TableCellNodeView: FC<NodeViewProps> = ({
           interactive
           content={
             <article
-              className="dropdown dropdown-open z-50"
+              className="dropdown dropdown-open z-50 translate-x-2"
               contentEditable={false}
             >
               <ul
                 tabIndex={0}
-                className="dropdown-content fixed menu menu-compact p-2 shadow bg-base-100 rounded-box w-52"
+                className="dropdown-content fixed menu menu-compact p-2 shadow bg-base-100 rounded-box w-56"
                 style={gimmeDropdownStyles()}
               >
                 {cellButtonsConfig.map((btn) => {
                   return (
                     <li key={btn.name}>
-                      <button type="button" onClick={() => btn.action(editor)}>
-                        {btn.name}
+                      <button
+                        type="button"
+                        className="flex gap-2"
+                        onClick={() => btn.action(editor)}
+                      >
+                        <span>
+                          <i className={btn.iconClass} />
+                        </span>
+
+                        <span>{btn.name}</span>
                       </button>
                     </li>
                   );
@@ -117,10 +149,10 @@ export const TableCellNodeView: FC<NodeViewProps> = ({
         >
           <label
             tabIndex={0}
-            className="absolute right-0 bottom-0 btn btn-xs px-1 text-base m-1"
+            className="absolute right-0 bottom-0 btn btn-xs p-px py-0 text-base m-1"
             contentEditable={false}
           >
-            <i className="i-mdi-chevron-down" />
+            <i className="i-mdi-chevron-down text-base scale-150" />
           </label>
         </Tippy>
       )}
diff --git a/src/tiptap/mocks/defaultContent.ts b/src/tiptap/mocks/defaultContent.ts
index 3e98148..b9449be 100644
--- a/src/tiptap/mocks/defaultContent.ts
+++ b/src/tiptap/mocks/defaultContent.ts
@@ -8,6 +8,7 @@ import { Content } from "@tiptap/react";
 export const content: Content = {
   type: "doc",
   content: [
+    { type: "paragraph" },
     {
       type: "table",
       content: [
@@ -73,77 +74,25 @@ export const content: Content = {
         },
       ],
     },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
+    { type: "paragraph" },
   ],
 };
-
-// export const content: Content = {
-//   type: "doc",
-//   content: [
-//     {
-//       type: "draggableBlock",
-//       content: [
-//         {
-//           type: "paragraph",
-//           content: [
-//             { type: "text", text: "1 Something I think should work there" },
-//           ],
-//         },
-//       ],
-//     },
-//     {
-//       type: "draggableBlock",
-//       content: [
-//         {
-//           type: "paragraph",
-//           content: [
-//             { type: "text", text: "2 Something I think should work there" },
-//           ],
-//         },
-//       ],
-//     },
-//     {
-//       type: "draggableBlock",
-//       content: [
-//         {
-//           type: "paragraph",
-//           content: [
-//             { type: "text", text: "3 Something I think should work there" },
-//           ],
-//         },
-//       ],
-//     },
-//     {
-//       type: "draggableBlock",
-//       content: [
-//         {
-//           type: "paragraph",
-//           content: [
-//             { type: "text", text: "4 Something I think should work there" },
-//           ],
-//         },
-//       ],
-//     },
-//     {
-//       type: "draggableBlock",
-//       content: [
-//         {
-//           type: "paragraph",
-//           content: [
-//             { type: "text", text: "5 Something I think should work there" },
-//           ],
-//         },
-//       ],
-//     },
-//     {
-//       type: "draggableBlock",
-//       content: [
-//         {
-//           type: "paragraph",
-//           content: [
-//             { type: "text", text: "6 Something I think should work there" },
-//           ],
-//         },
-//       ],
-//     },
-//   ],
-// };
diff --git a/src/tiptap/proseClassString.ts b/src/tiptap/proseClassString.ts
index 84d8fd2..fb0ace8 100644
--- a/src/tiptap/proseClassString.ts
+++ b/src/tiptap/proseClassString.ts
@@ -1,3 +1,3 @@
 export const notitapEditorClass =
-  "prose prose-p:my-2 prose-h1:my-2 prose-h2:my-2 prose-h3:my-2 prose-ul:my-2 prose-ol:my-2";
+  "prose prose-p:my-2 prose-h1:my-2 prose-h2:my-2 prose-h3:my-2 prose-ul:my-2 prose-ol:my-2 max-w-none";
 // export const notitapEditorClass = "";