fix: removed repetitive css styles and removed header row by default

- fixed css - removed header row to render by default - added row and column header toggle options
2024-06-14 14:31:34 +00:00 · 2024-01-06 10:22:27 +05:30 · 2024-01-06 10:22:27 +05:30 · 44dc602ac3
commit 44dc602ac3
parent bb4bee00cb
10 changed files with 100 additions and 139 deletions
--- a/packages/editor/core/src/lib/editor-commands.ts
+++ b/packages/editor/core/src/lib/editor-commands.ts
@ -73,8 +73,8 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
      }
    }
  }
-  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-  else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3 }).run();
+  else editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run();
 };

 export const unsetLinkEditor = (editor: Editor) => {
--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@ -170,67 +170,67 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
  }
 }

-#editor-container {
-  table {
-    border-collapse: collapse;
-    table-layout: fixed;
-    margin: 0.5em 0 0.5em 0;
-
-    border: 1px solid rgb(var(--color-border-200));
-    width: 100%;
-
-    td,
-    th {
-      min-width: 1em;
-      border: 1px solid rgb(var(--color-border-200));
-      padding: 10px 15px;
-      vertical-align: top;
-      box-sizing: border-box;
-      position: relative;
-      transition: background-color 0.3s ease;
-
-      > * {
-        margin-bottom: 0;
-      }
-    }
-
-    th {
-      font-weight: bold;
-      text-align: left;
-      background-color: rgb(var(--color-primary-100));
-    }
-
-    td:hover {
-      background-color: rgba(var(--color-primary-300), 0.1);
-    }
-
-    .selectedCell:after {
-      z-index: 2;
-      position: absolute;
-      content: "";
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background-color: rgba(var(--color-primary-300), 0.1);
-      pointer-events: none;
-    }
-
-    .column-resize-handle {
-      position: absolute;
-      right: -2px;
-      top: 0;
-      bottom: -2px;
-      width: 2px;
-      background-color: rgb(var(--color-primary-400));
-      pointer-events: none;
-    }
-  }
-}
-
-.tableWrapper {
-  overflow-x: auto;
-}
+/* #editor-container { */
+/*   table { */
+/*     border-collapse: collapse; */
+/*     table-layout: fixed; */
+/*     margin: 0.5em 0 0.5em 0; */
+/**/
+/*     border: 1px solid rgb(var(--color-border-200)); */
+/*     width: 100%; */
+/**/
+/*     td, */
+/*     th { */
+/*       min-width: 1em; */
+/*       border: 1px solid rgb(var(--color-border-200)); */
+/*       padding: 10px 15px; */
+/*       vertical-align: top; */
+/*       box-sizing: border-box; */
+/*       position: relative; */
+/*       transition: background-color 0.3s ease; */
+/**/
+/*       > * { */
+/*         margin-bottom: 0; */
+/*       } */
+/*     } */
+/**/
+/*     th { */
+/*       font-weight: bold; */
+/*       text-align: left; */
+/*       background-color: rgb(var(--color-primary-100)); */
+/*     } */
+/**/
+/*     td:hover { */
+/*       background-color: rgba(var(--color-primary-300), 0.1); */
+/*     } */
+/**/
+/*     .selectedCell:after { */
+/*       z-index: 2; */
+/*       position: absolute; */
+/*       content: ""; */
+/*       left: 0; */
+/*       right: 0; */
+/*       top: 0; */
+/*       bottom: 0; */
+/*       background-color: rgba(var(--color-primary-300), 0.1); */
+/*       pointer-events: none; */
+/*     } */
+/**/
+/*     .column-resize-handle { */
+/*       position: absolute; */
+/*       right: -2px; */
+/*       top: 0; */
+/*       bottom: -2px; */
+/*       width: 2px; */
+/*       background-color: rgb(var(--color-primary-400)); */
+/*       pointer-events: none; */
+/*     } */
+/*   } */
+/* } */
+/**/
+/* .tableWrapper { */
+/*   overflow-x: auto; */
+/* } */

 .resize-cursor {
  cursor: ew-resize;
--- a/packages/editor/core/src/styles/table.css
+++ b/packages/editor/core/src/styles/table.css
@ -9,8 +9,8 @@
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
-  margin-bottom: 3rem;
-  border: 1px solid rgba(var(--color-border-200));
+  margin-bottom: 1rem;
+  border: 2px solid rgba(var(--color-border-200));
  width: 100%;
 }

@ -118,9 +118,7 @@
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
-  transition:
-    transform ease-out 100ms,
-    background-color ease-out 100ms;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
  outline: none;
  box-shadow: #000 0px 2px 4px;
  cursor: pointer;
@ -133,13 +131,12 @@
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
-  transition:
-    transform ease-out 100ms,
-    background-color ease-out 100ms;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
  outline: none;
  box-shadow: #000 0px 2px 4px;
  cursor: pointer;
 }
+
 .tableWrapper .tableControls .tableToolbox,
 .tableWrapper .tableControls .tableColorPickerToolbox {
  border: 1px solid rgba(var(--color-border-300));
--- a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
@ -13,7 +13,7 @@ export const TableCell = Node.create<TableCellOptions>({
    };
  },

-  content: "paragraph+",
+  content: "block+",

  addAttributes() {
    return {
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@ -1,5 +1,6 @@
 import { h } from "jsx-dom-cjs";
 import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
+// import { setCellAttr } from "prosemirror-tables";
 import { Decoration, NodeView } from "@tiptap/pm/view";
 import tippy, { Instance, Props } from "tippy.js";

@ -82,19 +83,30 @@ const defaultTippyOptions: Partial<Props> = {
 };

 function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
-  return editor
-    .chain()
-    .focus()
-    .updateAttributes("tableCell", {
-      background: backgroundColor,
-    })
-    .updateAttributes("tableHeader", {
-      background: backgroundColor,
-    })
-    .run();
+  const curr_color = editor.getAttributes("tableCell").background;
+  // __AUTO_GENERATED_PRINT_VAR_START__
+  console.log("setCellsBackgroundColor curr_color: %s", curr_color); // __AUTO_GENERATED_PRINT_VAR_END__
+  return (
+    editor
+      .chain()
+      .focus()
+      // .setCellAttribute("backgroundColor", backgroundColor)
+      .updateAttributes("tableCell", {
+        background: backgroundColor,
+      })
+      .updateAttributes("tableHeader", {
+        background: backgroundColor,
+      })
+      .run()
+  );
 }

 const columnsToolboxItems: ToolboxItem[] = [
+  {
+    label: "Toggle Column Header",
+    icon: icons.insertBottomTableIcon,
+    action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderColumn().run(),
+  },
  {
    label: "Add Column Before",
    icon: icons.insertLeftTableIcon,
@ -134,6 +146,11 @@ const columnsToolboxItems: ToolboxItem[] = [
 ];

 const rowsToolboxItems: ToolboxItem[] = [
+  {
+    label: "Toggle Row Header",
+    icon: icons.insertBottomTableIcon,
+    action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderRow().run(),
+  },
  {
    label: "Add Row Above",
    icon: icons.insertTopTableIcon,
--- a/packages/editor/core/src/ui/extensions/table/table/table.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@ -107,7 +107,7 @@ export const Table = Node.create({
  addCommands() {
    return {
      insertTable:
-        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+        ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
        ({ tr, dispatch, editor }) => {
          const node = createTable(editor.schema, rows, cols, withHeaderRow);

--- a/packages/editor/core/src/ui/props.tsx
+++ b/packages/editor/core/src/ui/props.tsx
@ -42,15 +42,6 @@ export function CoreEditorProps(
      return false;
    },
    handleDrop: (view, event, _slice, moved) => {
-      if (typeof window !== "undefined") {
-        const selection: any = window?.getSelection();
-        if (selection.rangeCount !== 0) {
-          const range = selection.getRangeAt(0);
-          if (findTableAncestor(range.startContainer)) {
-            return;
-          }
-        }
-      }
      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
        event.preventDefault();
        const file = event.dataTransfer.files[0];
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@ -48,34 +48,13 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
  function getComplexItems(): BubbleMenuItem[] {
    const items: BubbleMenuItem[] = [TableItem(editor)];

-    if (shouldShowImageItem()) {
-      items.push(ImageItem(editor, uploadFile, setIsSubmitting));
-    }
+    items.push(ImageItem(editor, uploadFile, setIsSubmitting));

    return items;
  }

  const complexItems: BubbleMenuItem[] = getComplexItems();

-  function shouldShowImageItem(): boolean {
-    if (typeof window !== "undefined") {
-      const selectionRange: any = window?.getSelection();
-      const { selection } = props.editor.state;
-
-      if (selectionRange.rangeCount !== 0) {
-        const range = selectionRange.getRangeAt(0);
-        if (findTableAncestor(range.startContainer)) {
-          return false;
-        }
-        if (isCellSelection(selection)) {
-          return false;
-        }
-      }
-      return true;
-    }
-    return false;
-  }
-
  return (
    <div className="flex items-center divide-x divide-custom-border-200">
      <div className="flex items-center gap-0.5 pr-2">
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@ -59,35 +59,12 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {

  function getComplexItems(): BubbleMenuItem[] {
    const items: BubbleMenuItem[] = [TableItem(props.editor)];
-
-    if (shouldShowImageItem()) {
-      items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
-    }
-
+    items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
    return items;
  }

  const complexItems: BubbleMenuItem[] = getComplexItems();

-  function shouldShowImageItem(): boolean {
-    if (typeof window !== "undefined") {
-      const selectionRange: any = window?.getSelection();
-      const { selection } = props.editor.state;
-
-      if (selectionRange.rangeCount !== 0) {
-        const range = selectionRange.getRangeAt(0);
-        if (findTableAncestor(range.startContainer)) {
-          return false;
-        }
-        if (isCellSelection(selection)) {
-          return false;
-        }
-      }
-      return true;
-    }
-    return false;
-  }
-
  const handleAccessChange = (accessKey: string) => {
    props.commentAccessSpecifier?.onAccessChange(accessKey);
  };
--- a/yarn.lock
+++ b/yarn.lock
@ -2786,7 +2786,7 @@
  dependencies:
    "@types/react" "*"

-"@types/react@*", "@types/react@^18.2.42":
+"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
  version "18.2.42"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
  integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==