From 44dc602ac32845765cf89bafec91fea69f2cf73c Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Sat, 6 Jan 2024 10:22:27 +0530 Subject: [PATCH] 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 --- .../editor/core/src/lib/editor-commands.ts | 4 +- packages/editor/core/src/styles/editor.css | 122 +++++++++--------- packages/editor/core/src/styles/table.css | 13 +- .../extensions/table/table-cell/table-cell.ts | 2 +- .../ui/extensions/table/table/table-view.tsx | 37 ++++-- .../src/ui/extensions/table/table/table.ts | 2 +- packages/editor/core/src/ui/props.tsx | 9 -- .../src/ui/menu/fixed-menu.tsx | 23 +--- .../src/ui/menus/fixed-menu/index.tsx | 25 +--- yarn.lock | 2 +- 10 files changed, 100 insertions(+), 139 deletions(-) diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts index 147797e2d..3bd4471ad 100644 --- 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) => { diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css index b0d2a1021..a6899e794 100644 --- 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; diff --git a/packages/editor/core/src/styles/table.css b/packages/editor/core/src/styles/table.css index 8a47a8c59..f68e315da 100644 --- 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)); diff --git 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 index aedb59411..ebc22cc71 100644 --- 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({ }; }, - content: "paragraph+", + content: "block+", addAttributes() { return { diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx index bd96ff1b1..2c7865296 100644 --- 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 = { }; 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, diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts index 5600fd82a..9d37327db 100644 --- 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); diff --git a/packages/editor/core/src/ui/props.tsx b/packages/editor/core/src/ui/props.tsx index 2aaeb4264..1846efe47 100644 --- 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]; diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx index cac42e1f9..436937e28 100644 --- 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 (
diff --git 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 index 71ad4e0e1..5acdab432 100644 --- 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); }; diff --git a/yarn.lock b/yarn.lock index a99b36055..de2e4a562 100644 --- 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==