Merge pull request #3 from notitap/feat/cell-options-update

feat: icons for options && more options

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} />
 

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,
   ];
 };

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,26 +110,35 @@ export const TableCellNodeView: FC<NodeViewProps> = ({
   return (
     <NodeViewWrapper>
       <NodeViewContent as="span" />
+
       {(isCurrentCellActive || selected) && (
         <Tippy
           appendTo={document.body}
           trigger="click"
           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>
       )}

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" },
-//           ],
-//         },
-//       ],
-//     },
-//   ],
-// };

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 = "";