From 94ce5ce3325f9d1e4846d03bf7c6509f42513fb3 Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Fri, 13 Oct 2023 14:41:34 +0530 Subject: [PATCH] color support added for row and columns and fixed naming conventions --- packages/editor/core/src/index.ts | 2 +- .../core/src/ui/components/editor-content.tsx | 3 - .../editor/core/src/ui/extensions/index.tsx | 18 +-- .../ui/extensions/table-new/Table/index.ts | 1 - .../table-new/TableCell/TableCell.ts | 55 -------- .../extensions/table-new/TableCell/index.ts | 1 - .../table-new/TableHeader/TableHeader.ts | 54 -------- .../extensions/table-new/TableHeader/index.ts | 1 - .../ui/extensions/table-new/TableRow/index.ts | 1 - .../ui/extensions/table/table-cell/index.ts | 1 + .../extensions/table/table-cell/table-cell.ts | 58 +++++++++ .../ui/extensions/table/table-header/index.ts | 1 + .../table/table-header/table-header.ts | 57 +++++++++ .../ui/extensions/table/table-row/index.ts | 1 + .../table-row/table-row.ts} | 0 .../{table-new/Table => table/table}/icons.ts | 0 .../src/ui/extensions/table/table/index.ts | 1 + .../table/table-controls.ts} | 0 .../table/table-view.tsx} | 36 +++--- .../Table/Table.ts => table/table/table.ts} | 76 +++-------- .../table/utilities/create-cell.ts} | 0 .../table/utilities/create-table.ts} | 6 +- .../delete-table-when-all-cells-selected.ts} | 6 +- .../table/utilities/get-table-node-types.ts} | 0 .../table/utilities/is-cell-selection.ts} | 0 .../core/src/ui/hooks/useReadOnlyEditor.tsx | 2 +- .../table-menu/InsertBottomTableIcon.tsx | 16 --- .../menus/table-menu/InsertLeftTableIcon.tsx | 15 --- .../menus/table-menu/InsertRightTableIcon.tsx | 16 --- .../menus/table-menu/InsertTopTableIcon.tsx | 15 --- .../core/src/ui/menus/table-menu/index.tsx | 120 ------------------ .../core/src/ui/menus/table-menu/tooltip.tsx | 77 ----------- web/styles/tables.css | 6 +- 33 files changed, 169 insertions(+), 477 deletions(-) delete mode 100644 packages/editor/core/src/ui/extensions/table-new/Table/index.ts delete mode 100644 packages/editor/core/src/ui/extensions/table-new/TableCell/TableCell.ts delete mode 100644 packages/editor/core/src/ui/extensions/table-new/TableCell/index.ts delete mode 100644 packages/editor/core/src/ui/extensions/table-new/TableHeader/TableHeader.ts delete mode 100644 packages/editor/core/src/ui/extensions/table-new/TableHeader/index.ts delete mode 100644 packages/editor/core/src/ui/extensions/table-new/TableRow/index.ts create mode 100644 packages/editor/core/src/ui/extensions/table/table-cell/index.ts create mode 100644 packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts create mode 100644 packages/editor/core/src/ui/extensions/table/table-header/index.ts create mode 100644 packages/editor/core/src/ui/extensions/table/table-header/table-header.ts create mode 100644 packages/editor/core/src/ui/extensions/table/table-row/index.ts rename packages/editor/core/src/ui/extensions/{table-new/TableRow/TableRow.ts => table/table-row/table-row.ts} (100%) rename packages/editor/core/src/ui/extensions/{table-new/Table => table/table}/icons.ts (100%) create mode 100644 packages/editor/core/src/ui/extensions/table/table/index.ts rename packages/editor/core/src/ui/extensions/{table-new/Table/tableControls.ts => table/table/table-controls.ts} (100%) rename packages/editor/core/src/ui/extensions/{table-new/Table/TableView.ts => table/table/table-view.tsx} (92%) rename packages/editor/core/src/ui/extensions/{table-new/Table/Table.ts => table/table/table.ts} (77%) rename packages/editor/core/src/ui/extensions/{table-new/Table/utilities/createCell.ts => table/table/utilities/create-cell.ts} (100%) rename packages/editor/core/src/ui/extensions/{table-new/Table/utilities/createTable.ts => table/table/utilities/create-table.ts} (88%) rename packages/editor/core/src/ui/extensions/{table-new/Table/utilities/deleteTableWhenAllCellsSelected.ts => table/table/utilities/delete-table-when-all-cells-selected.ts} (86%) rename packages/editor/core/src/ui/extensions/{table-new/Table/utilities/getTableNodeTypes.ts => table/table/utilities/get-table-node-types.ts} (100%) rename packages/editor/core/src/ui/extensions/{table-new/Table/utilities/isCellSelection.ts => table/table/utilities/is-cell-selection.ts} (100%) delete mode 100644 packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx delete mode 100644 packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx delete mode 100644 packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx delete mode 100644 packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx delete mode 100644 packages/editor/core/src/ui/menus/table-menu/index.tsx delete mode 100644 packages/editor/core/src/ui/menus/table-menu/tooltip.tsx diff --git a/packages/editor/core/src/index.ts b/packages/editor/core/src/index.ts index 6268323e5..13fb14297 100644 --- a/packages/editor/core/src/index.ts +++ b/packages/editor/core/src/index.ts @@ -2,7 +2,7 @@ // import "./styles/tailwind.css"; // import "./styles/editor.css"; -export * from "./ui/extensions/table-new/Table"; +export * from "./ui/extensions/table/table"; // utils export * from "./lib/utils"; diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx index 11468e757..80c3a8cad 100644 --- a/packages/editor/core/src/ui/components/editor-content.tsx +++ b/packages/editor/core/src/ui/components/editor-content.tsx @@ -1,7 +1,6 @@ import { Editor, EditorContent } from "@tiptap/react"; import { ReactNode } from "react"; import { ImageResizer } from "../extensions/image/image-resize"; -import { TableMenu } from "../menus/table-menu"; interface EditorContentProps { editor: Editor | null; @@ -11,9 +10,7 @@ interface EditorContentProps { export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
- {/* @ts-ignore */} - {/* */} {editor?.isActive("image") && } {children}
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index 3c394205d..fc2b6393c 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/packages/editor/core/src/ui/extensions/index.tsx @@ -8,20 +8,14 @@ import TaskList from "@tiptap/extension-task-list"; import { Markdown } from "tiptap-markdown"; import Gapcursor from "@tiptap/extension-gapcursor"; -// import { CustomTableCell } from "./table/table-cell"; -// import { Table } from "./table"; -// import { TableHeader } from "./table/table-header"; -// import { TableRow } from "@tiptap/extension-table-row"; - import ImageExtension from "./image"; import { DeleteImage } from "../../types/delete-image"; import { isValidHttpUrl } from "../../lib/utils"; -import Table from "./table-new/Table"; -import TableHeader from "./table-new/TableHeader"; -import TableCell from "./table-new/TableCell"; -import TableRow from "./table-new/TableRow"; - +import TableHeader from "./table/table-header/table-header"; +import Table from "./table/table"; +import TableCell from "./table/table-cell/table-cell"; +import TableRow from "./table/table-row/table-row"; export const CoreEditorExtensions = ( deleteFile: DeleteImage, @@ -98,8 +92,4 @@ export const CoreEditorExtensions = ( TableHeader, TableCell, TableRow, - // Table, - // TableHeader, - // CustomTableCell, - // TableRow, ]; diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/index.ts b/packages/editor/core/src/ui/extensions/table-new/Table/index.ts deleted file mode 100644 index ccdae7fd2..000000000 --- a/packages/editor/core/src/ui/extensions/table-new/Table/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as default } from "./Table" diff --git a/packages/editor/core/src/ui/extensions/table-new/TableCell/TableCell.ts b/packages/editor/core/src/ui/extensions/table-new/TableCell/TableCell.ts deleted file mode 100644 index dfa25c94d..000000000 --- a/packages/editor/core/src/ui/extensions/table-new/TableCell/TableCell.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { mergeAttributes, Node } from "@tiptap/core" - -export interface TableCellOptions { - HTMLAttributes: Record -} - -export default Node.create({ - name: "tableCell", - - addOptions() { - return { - HTMLAttributes: {} - } - }, - - content: "paragraph+", - - addAttributes() { - return { - colspan: { - default: 1 - }, - rowspan: { - default: 1 - }, - colwidth: { - default: null, - parseHTML: (element) => { - const colwidth = element.getAttribute("colwidth") - const value = colwidth ? [parseInt(colwidth, 10)] : null - - return value - } - } - } - }, - - tableRole: "cell", - - isolating: true, - - parseHTML() { - return [{ tag: "td" }] - }, - - renderHTML({ node, HTMLAttributes }) { - return [ - "td", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { - style: `background-color: ${node.attrs.background}` - }), - 0 - ] - } -}) diff --git a/packages/editor/core/src/ui/extensions/table-new/TableCell/index.ts b/packages/editor/core/src/ui/extensions/table-new/TableCell/index.ts deleted file mode 100644 index e4acbea9e..000000000 --- a/packages/editor/core/src/ui/extensions/table-new/TableCell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as default } from "./TableCell" diff --git a/packages/editor/core/src/ui/extensions/table-new/TableHeader/TableHeader.ts b/packages/editor/core/src/ui/extensions/table-new/TableHeader/TableHeader.ts deleted file mode 100644 index 8e8d0f1d4..000000000 --- a/packages/editor/core/src/ui/extensions/table-new/TableHeader/TableHeader.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { mergeAttributes, Node } from "@tiptap/core" - -export interface TableHeaderOptions { - HTMLAttributes: Record -} -export default Node.create({ - name: "tableHeader", - - addOptions() { - return { - HTMLAttributes: {} - } - }, - - content: "paragraph+", - - addAttributes() { - return { - colspan: { - default: 1 - }, - rowspan: { - default: 1 - }, - colwidth: { - default: null, - parseHTML: (element) => { - const colwidth = element.getAttribute("colwidth") - const value = colwidth ? [parseInt(colwidth, 10)] : null - - return value - } - } - } - }, - - tableRole: "header_cell", - - isolating: true, - - parseHTML() { - return [{ tag: "th" }] - }, - - renderHTML({ node, HTMLAttributes }) { - return [ - "th", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { - style: `background-color: ${node.attrs.background}` - }), - 0 - ] - } -}) diff --git a/packages/editor/core/src/ui/extensions/table-new/TableHeader/index.ts b/packages/editor/core/src/ui/extensions/table-new/TableHeader/index.ts deleted file mode 100644 index f260509cf..000000000 --- a/packages/editor/core/src/ui/extensions/table-new/TableHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as default } from "./TableHeader" diff --git a/packages/editor/core/src/ui/extensions/table-new/TableRow/index.ts b/packages/editor/core/src/ui/extensions/table-new/TableRow/index.ts deleted file mode 100644 index f01744bf7..000000000 --- a/packages/editor/core/src/ui/extensions/table-new/TableRow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as default } from "./TableRow" diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts new file mode 100644 index 000000000..b39fe7104 --- /dev/null +++ b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts @@ -0,0 +1 @@ +export { default as default } from "./table-cell" 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 new file mode 100644 index 000000000..ac43875da --- /dev/null +++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts @@ -0,0 +1,58 @@ +import { mergeAttributes, Node } from "@tiptap/core" + +export interface TableCellOptions { + HTMLAttributes: Record +} + +export default Node.create({ + name: "tableCell", + + addOptions() { + return { + HTMLAttributes: {} + } + }, + + content: "paragraph+", + + addAttributes() { + return { + colspan: { + default: 1 + }, + rowspan: { + default: 1 + }, + colwidth: { + default: null, + parseHTML: (element) => { + const colwidth = element.getAttribute("colwidth") + const value = colwidth ? [parseInt(colwidth, 10)] : null + + return value + } + }, + background: { + default: "none" + } + } + }, + + tableRole: "cell", + + isolating: true, + + parseHTML() { + return [{ tag: "td" }] + }, + + renderHTML({ node, HTMLAttributes }) { + return [ + "td", + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + style: `background-color: ${node.attrs.background}` + }), + 0 + ] + } +}) diff --git a/packages/editor/core/src/ui/extensions/table/table-header/index.ts b/packages/editor/core/src/ui/extensions/table/table-header/index.ts new file mode 100644 index 000000000..57137dedd --- /dev/null +++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts @@ -0,0 +1 @@ +export { default as default } from "./table-header" diff --git a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts new file mode 100644 index 000000000..712ca65f0 --- /dev/null +++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts @@ -0,0 +1,57 @@ +import { mergeAttributes, Node } from "@tiptap/core" + +export interface TableHeaderOptions { + HTMLAttributes: Record +} +export default Node.create({ + name: "tableHeader", + + addOptions() { + return { + HTMLAttributes: {} + } + }, + + content: "paragraph+", + + addAttributes() { + return { + colspan: { + default: 1 + }, + rowspan: { + default: 1 + }, + colwidth: { + default: null, + parseHTML: (element) => { + const colwidth = element.getAttribute("colwidth") + const value = colwidth ? [parseInt(colwidth, 10)] : null + + return value + } + }, + background: { + default: "rgb(var(--color-primary-100))" + } + } + }, + + tableRole: "header_cell", + + isolating: true, + + parseHTML() { + return [{ tag: "th" }] + }, + + renderHTML({ node, HTMLAttributes }) { + return [ + "th", + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + style: `background-color: ${node.attrs.background}` + }), + 0 + ] + } +}) diff --git a/packages/editor/core/src/ui/extensions/table/table-row/index.ts b/packages/editor/core/src/ui/extensions/table/table-row/index.ts new file mode 100644 index 000000000..9ecc2c0ae --- /dev/null +++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts @@ -0,0 +1 @@ +export { default as default } from "./table-row" diff --git a/packages/editor/core/src/ui/extensions/table-new/TableRow/TableRow.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts similarity index 100% rename from packages/editor/core/src/ui/extensions/table-new/TableRow/TableRow.ts rename to packages/editor/core/src/ui/extensions/table/table-row/table-row.ts diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts similarity index 100% rename from packages/editor/core/src/ui/extensions/table-new/Table/icons.ts rename to packages/editor/core/src/ui/extensions/table/table/icons.ts diff --git a/packages/editor/core/src/ui/extensions/table/table/index.ts b/packages/editor/core/src/ui/extensions/table/table/index.ts new file mode 100644 index 000000000..5dbd0f38a --- /dev/null +++ b/packages/editor/core/src/ui/extensions/table/table/index.ts @@ -0,0 +1 @@ +export { default as default } from "./table" diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/tableControls.ts b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts similarity index 100% rename from packages/editor/core/src/ui/extensions/table-new/Table/tableControls.ts rename to packages/editor/core/src/ui/extensions/table/table/table-controls.ts diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/TableView.ts b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx similarity index 92% rename from packages/editor/core/src/ui/extensions/table-new/Table/TableView.ts rename to packages/editor/core/src/ui/extensions/table/table/table-view.tsx index c11a69e31..14f75efe7 100644 --- a/packages/editor/core/src/ui/extensions/table-new/Table/TableView.ts +++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx @@ -1,7 +1,7 @@ import { h } from "jsx-dom-cjs" import { Node as ProseMirrorNode } from "@tiptap/pm/model" import { Decoration, NodeView } from "@tiptap/pm/view" -import tippy, { Instance, Props, Tippy } from "tippy.js" +import tippy, { Instance, Props } from "tippy.js" import { Editor } from "@tiptap/core" import { @@ -109,7 +109,7 @@ const columnsToolboxItems = [ { label: "Pick Column Color", icon: icons.colorPicker, - action: ({ editor, triggerButton, controlsContainer }) => { + action: ({ editor, triggerButton, controlsContainer }: { editor: Editor, triggerButton: HTMLElement, controlsContainer }) => { createColorPickerToolbox({ triggerButton, tippyOptions: { @@ -140,7 +140,7 @@ const rowsToolboxItems = [ { label: "Pick a Color", icon: icons.colorPicker, - action: ({ editor, triggerButton, controlsContainer }: { editor: Editor, triggerButton: HTMLElement, controlsContainer: any }) => { + action: ({ editor, triggerButton, controlsContainer }: { editor: Editor, triggerButton: HTMLButtonElement, controlsContainer: Element | "parent" | ((ref: Element) => Element) | undefined }) => { createColorPickerToolbox({ triggerButton, tippyOptions: { @@ -202,12 +202,12 @@ function createColorPickerToolbox({ onSelectColor?: (color: string) => void }) { const items = { - "Fond par défault": "#ffffff", - "Fond gris clair": "#e7f3f8", - "Fond gris foncé": "#c7d2d7", - "Fond bleu": "#e7f3f8", - "Fond rouge": "#ffc4c7", - "Fond jaune": "#fbf3db" + "Default": "rgb(var(--color-primary-100))", + "Light gray": "#e7f3f8", + "Dark gray": "#c7d2d7", + "Light blue": "#e7f3f8", + "Light red": "#ffc4c7", + "Light yellow": "#fbf3db" } const colorPicker = tippy(triggerButton, { @@ -265,11 +265,11 @@ export class TableView implements NodeView { table: HTMLElement colgroup: HTMLElement tbody: HTMLElement - rowsControl: HTMLElement - columnsControl: HTMLElement - columnsToolbox: Instance - rowsToolbox: Instance - controls: HTMLElement + rowsControl?: HTMLElement + columnsControl?: HTMLElement + columnsToolbox?: Instance + rowsToolbox?: Instance + controls?: HTMLElement get dom() { return this.root @@ -333,10 +333,10 @@ export class TableView implements NodeView { onClickItem: (item) => { item.action({ editor: this.editor, - triggerButton: this.columnsControl.firstElementChild, + triggerButton: this.columnsControl?.firstElementChild, controlsContainer: this.controls }) - this.columnsToolbox.hide() + this.columnsToolbox?.hide() } }) @@ -350,10 +350,10 @@ export class TableView implements NodeView { onClickItem: (item) => { item.action({ editor: this.editor, - triggerButton: this.rowsControl.firstElementChild, + triggerButton: this.rowsControl?.firstElementChild, controlsContainer: this.controls }) - this.rowsToolbox.hide() + this.rowsToolbox?.hide() } }) } diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/Table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts similarity index 77% rename from packages/editor/core/src/ui/extensions/table-new/Table/Table.ts rename to packages/editor/core/src/ui/extensions/table/table/table.ts index 1bded42af..eab3cad92 100644 --- a/packages/editor/core/src/ui/extensions/table-new/Table/Table.ts +++ b/packages/editor/core/src/ui/extensions/table/table/table.ts @@ -21,15 +21,10 @@ import { toggleHeaderCell } from "@tiptap/prosemirror-tables" -import { tableControls } from "./tableControls" -import { TableView } from "./TableView" -import { createTable } from "./utilities/createTable" -import { deleteTableWhenAllCellsSelected } from "./utilities/deleteTableWhenAllCellsSelected" - -/** - * Extension based on: - * - Tiptap TableExtension (https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/src/table.ts) - */ +import { tableControls } from "./table-controls" +import { TableView } from "./table-view" +import { createTable } from "./utilities/create-table" +import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected" export interface TableOptions { HTMLAttributes: Record @@ -73,9 +68,6 @@ declare module "@tiptap/core" { } interface NodeConfig { - /** - * Table Role - */ tableRole?: | string | ((this: { @@ -149,64 +141,40 @@ export default Node.create({ }, addColumnBefore: () => - ({ state, dispatch }) => { - return addColumnBefore(state, dispatch) - }, + ({ state, dispatch }) => addColumnBefore(state, dispatch), addColumnAfter: () => - ({ state, dispatch }) => { - return addColumnAfter(state, dispatch) - }, + ({ state, dispatch }) => addColumnAfter(state, dispatch), deleteColumn: () => - ({ state, dispatch }) => { - return deleteColumn(state, dispatch) - }, + ({ state, dispatch }) => deleteColumn(state, dispatch), addRowBefore: () => - ({ state, dispatch }) => { - return addRowBefore(state, dispatch) - }, + ({ state, dispatch }) => addRowBefore(state, dispatch), addRowAfter: () => - ({ state, dispatch }) => { - return addRowAfter(state, dispatch) - }, + ({ state, dispatch }) => addRowAfter(state, dispatch), deleteRow: () => - ({ state, dispatch }) => { - return deleteRow(state, dispatch) - }, + ({ state, dispatch }) => deleteRow(state, dispatch), deleteTable: () => - ({ state, dispatch }) => { - return deleteTable(state, dispatch) - }, + ({ state, dispatch }) => deleteTable(state, dispatch), mergeCells: () => - ({ state, dispatch }) => { - return mergeCells(state, dispatch) - }, + ({ state, dispatch }) => mergeCells(state, dispatch), splitCell: () => - ({ state, dispatch }) => { - return splitCell(state, dispatch) - }, + ({ state, dispatch }) => splitCell(state, dispatch), toggleHeaderColumn: () => - ({ state, dispatch }) => { - return toggleHeader("column")(state, dispatch) - }, + ({ state, dispatch }) => toggleHeader("column")(state, dispatch), toggleHeaderRow: () => - ({ state, dispatch }) => { - return toggleHeader("row")(state, dispatch) - }, + ({ state, dispatch }) => toggleHeader("row")(state, dispatch), toggleHeaderCell: () => - ({ state, dispatch }) => { - return toggleHeaderCell(state, dispatch) - }, + ({ state, dispatch }) => toggleHeaderCell(state, dispatch), mergeOrSplit: () => ({ state, dispatch }) => { @@ -218,19 +186,13 @@ export default Node.create({ }, setCellAttribute: (name, value) => - ({ state, dispatch }) => { - return setCellAttr(name, value)(state, dispatch) - }, + ({ state, dispatch }) => setCellAttr(name, value)(state, dispatch), goToNextCell: () => - ({ state, dispatch }) => { - return goToNextCell(1)(state, dispatch) - }, + ({ state, dispatch }) => goToNextCell(1)(state, dispatch), goToPreviousCell: () => - ({ state, dispatch }) => { - return goToNextCell(-1)(state, dispatch) - }, + ({ state, dispatch }) => goToNextCell(-1)(state, dispatch), fixTables: () => ({ state, dispatch }) => { diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/createCell.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts similarity index 100% rename from packages/editor/core/src/ui/extensions/table-new/Table/utilities/createCell.ts rename to packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/createTable.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts similarity index 88% rename from packages/editor/core/src/ui/extensions/table-new/Table/utilities/createTable.ts rename to packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts index c59aadac1..75bf7cb41 100644 --- a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/createTable.ts +++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts @@ -1,9 +1,7 @@ import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model" -import { ReactNodeViewRenderer } from "@tiptap/react" - -import { createCell } from "./createCell" -import { getTableNodeTypes } from "./getTableNodeTypes" +import { createCell } from "./create-cell" +import { getTableNodeTypes } from "./get-table-node-types" export function createTable( schema: Schema, diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/deleteTableWhenAllCellsSelected.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts similarity index 86% rename from packages/editor/core/src/ui/extensions/table-new/Table/utilities/deleteTableWhenAllCellsSelected.ts rename to packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts index b76cdca5d..dcb20b323 100644 --- a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/deleteTableWhenAllCellsSelected.ts +++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts @@ -1,6 +1,6 @@ import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core" -import { isCellSelection } from "./isCellSelection" +import { isCellSelection } from "./is-cell-selection" export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ editor @@ -14,9 +14,7 @@ export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ let cellCount = 0 const table = findParentNodeClosestToPos( selection.ranges[0].$from, - (node) => { - return node.type.name === "table" - } + (node) => node.type.name === "table" ) table?.node.descendants((node) => { diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/getTableNodeTypes.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts similarity index 100% rename from packages/editor/core/src/ui/extensions/table-new/Table/utilities/getTableNodeTypes.ts rename to packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts diff --git a/packages/editor/core/src/ui/extensions/table-new/Table/utilities/isCellSelection.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts similarity index 100% rename from packages/editor/core/src/ui/extensions/table-new/Table/utilities/isCellSelection.ts rename to packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts diff --git a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx index 3791c4c5d..3e32c5044 100644 --- a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx +++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx @@ -11,7 +11,7 @@ interface CustomReadOnlyEditorProps { editorProps?: EditorProps; } -export const useReadOnlyEditor = ({ value, forwardedRef, extensions, editorProps }: CustomReadOnlyEditorProps) => { +export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {} }: CustomReadOnlyEditorProps) => { const editor = useCustomEditor({ editable: false, content: (typeof value === "string" && value.trim() !== "") ? value : "

", diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx deleted file mode 100644 index 0e42ba648..000000000 --- a/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -const InsertBottomTableIcon = (props: any) => ( - - - -); - -export default InsertBottomTableIcon; diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx deleted file mode 100644 index 1fd75fe87..000000000 --- a/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -const InsertLeftTableIcon = (props: any) => ( - - - -); -export default InsertLeftTableIcon; diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx deleted file mode 100644 index 1a6570969..000000000 --- a/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -const InsertRightTableIcon = (props: any) => ( - - - -); - -export default InsertRightTableIcon; diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx deleted file mode 100644 index 8f04f4f61..000000000 --- a/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -const InsertTopTableIcon = (props: any) => ( - - - -); -export default InsertTopTableIcon; diff --git a/packages/editor/core/src/ui/menus/table-menu/index.tsx b/packages/editor/core/src/ui/menus/table-menu/index.tsx deleted file mode 100644 index c115196db..000000000 --- a/packages/editor/core/src/ui/menus/table-menu/index.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { useState, useEffect } from "react"; -import { Rows, Columns, ToggleRight } from "lucide-react"; -import InsertLeftTableIcon from "./InsertLeftTableIcon"; -import InsertRightTableIcon from "./InsertRightTableIcon"; -import InsertTopTableIcon from "./InsertTopTableIcon"; -import InsertBottomTableIcon from "./InsertBottomTableIcon"; -import { cn, findTableAncestor } from "../../../lib/utils"; -import { Tooltip } from "./tooltip"; - -interface TableMenuItem { - command: () => void; - icon: any; - key: string; - name: string; -} - - - -export const TableMenu = ({ editor }: { editor: any }) => { - const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 }); - const isOpen = editor?.isActive("table"); - - const items: TableMenuItem[] = [ - { - command: () => editor.chain().focus().addColumnBefore().run(), - icon: InsertLeftTableIcon, - key: "insert-column-left", - name: "Insert 1 column left", - }, - { - command: () => editor.chain().focus().addColumnAfter().run(), - icon: InsertRightTableIcon, - key: "insert-column-right", - name: "Insert 1 column right", - }, - { - command: () => editor.chain().focus().addRowBefore().run(), - icon: InsertTopTableIcon, - key: "insert-row-above", - name: "Insert 1 row above", - }, - { - command: () => editor.chain().focus().addRowAfter().run(), - icon: InsertBottomTableIcon, - key: "insert-row-below", - name: "Insert 1 row below", - }, - { - command: () => editor.chain().focus().deleteColumn().run(), - icon: Columns, - key: "delete-column", - name: "Delete column", - }, - { - command: () => editor.chain().focus().deleteRow().run(), - icon: Rows, - key: "delete-row", - name: "Delete row", - }, - { - command: () => editor.chain().focus().toggleHeaderRow().run(), - icon: ToggleRight, - key: "toggle-header-row", - name: "Toggle header row", - }, - ]; - - useEffect(() => { - if (!window) return; - - const handleWindowClick = () => { - const selection: any = window?.getSelection(); - - if (selection.rangeCount !== 0) { - const range = selection.getRangeAt(0); - const tableNode = findTableAncestor(range.startContainer); - - if (tableNode) { - const tableRect = tableNode.getBoundingClientRect(); - const tableCenter = tableRect.left + tableRect.width / 2; - const menuWidth = 45; - const menuLeft = tableCenter - menuWidth / 2; - const tableBottom = tableRect.bottom; - - setTableLocation({ bottom: tableBottom, left: menuLeft }); - } - } - }; - - window.addEventListener("click", handleWindowClick); - - return () => { - window.removeEventListener("click", handleWindowClick); - }; - }, [tableLocation, editor]); - - return ( -
- {items.map((item, index) => ( - - - - ))} -
- ); -}; diff --git a/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx b/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx deleted file mode 100644 index f29d8a491..000000000 --- a/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react'; - -// next-themes -import { useTheme } from "next-themes"; -// tooltip2 -import { Tooltip2 } from "@blueprintjs/popover2"; - -type Props = { - tooltipHeading?: string; - tooltipContent: string | React.ReactNode; - position?: - | "top" - | "right" - | "bottom" - | "left" - | "auto" - | "auto-end" - | "auto-start" - | "bottom-left" - | "bottom-right" - | "left-bottom" - | "left-top" - | "right-bottom" - | "right-top" - | "top-left" - | "top-right"; - children: JSX.Element; - disabled?: boolean; - className?: string; - openDelay?: number; - closeDelay?: number; -}; - -export const Tooltip: React.FC = ({ - tooltipHeading, - tooltipContent, - position = "top", - children, - disabled = false, - className = "", - openDelay = 200, - closeDelay, -}) => { - const { theme } = useTheme(); - - return ( - - {tooltipHeading && ( -
- {tooltipHeading} -
- )} - {tooltipContent} - - } - position={position} - renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) => - React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props }) - } - /> - ); -}; diff --git a/web/styles/tables.css b/web/styles/tables.css index f43390120..8b3f105f4 100644 --- a/web/styles/tables.css +++ b/web/styles/tables.css @@ -45,9 +45,9 @@ background-color: rgb(var(--color-primary-100)); } -.tableWrapper table td:hover{ - background-color: rgba(var(--color-primary-300), 0.1); -} +/* .tableWrapper table td:hover{ */ +/* background-color: rgba(var(--color-primary-300), 0.1); */ +/* } */ .tableWrapper table th * { font-weight: 600;