= {
};
export type ReactNodeViewOptions = {
- props?: P;
+ props?: Partial
;
component?: React.ComponentType
;
componentKey?: (node: PMNode) => string;
shouldUpdate?: ShouldUpdate;
diff --git a/packages/editor/src/extensions/table-cell/table-cell.ts b/packages/editor/src/extensions/table-cell/table-cell.ts
index e56a58df9..1f68093ba 100644
--- a/packages/editor/src/extensions/table-cell/table-cell.ts
+++ b/packages/editor/src/extensions/table-cell/table-cell.ts
@@ -17,18 +17,115 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import TiptapTableCell from "@tiptap/extension-table-cell";
import { addStyleAttribute } from "./utils.js";
+import { Attribute } from "@tiptap/core";
+import { mergeAttributes, Node } from "@tiptap/core";
-export const TableCell = TiptapTableCell.extend({
- addAttributes() {
+export interface TableCellOptions {
+ /**
+ * The HTML attributes for a table cell node.
+ * @default {}
+ * @example { class: 'foo' }
+ */
+ HTMLAttributes: Record;
+}
+
+/**
+ * This extension allows you to create table cells.
+ * @see https://www.tiptap.dev/api/nodes/table-cell
+ */
+export const TableCell = Node.create({
+ name: "tableCell",
+
+ addOptions() {
return {
- ...this.parent?.(),
- backgroundColor: addStyleAttribute("backgroundColor", "background-color"),
- color: addStyleAttribute("color", "color"),
- borderWidth: addStyleAttribute("borderWidth", "border-width", "px"),
- borderStyle: addStyleAttribute("borderStyle", "border-style"),
- borderColor: addStyleAttribute("borderColor", "border-color")
+ HTMLAttributes: {}
};
+ },
+
+ content: "block+",
+
+ addAttributes() {
+ return addTableCellAttributes();
+ },
+
+ tableRole: "cell",
+
+ isolating: true,
+
+ parseHTML() {
+ return [{ tag: "td" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "td",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+ 0
+ ];
}
});
+
+export function addTableCellAttributes(): Record {
+ return {
+ colwidth: {
+ default: null,
+ parseHTML(element) {
+ const widthAttr =
+ element.getAttribute("data-colwidth") ||
+ element.getAttribute("colwidth");
+ const widths =
+ widthAttr && /^\d+(,\d+)*$/.test(widthAttr)
+ ? widthAttr.split(",").map((s) => Number(s))
+ : null;
+ const colspan = Number(element.getAttribute("colspan") || 1);
+
+ // migrate to data-colwidth attribute
+ if (element.hasAttribute("colwidth")) {
+ element.setAttribute(
+ "data-colwidth",
+ element.getAttribute("colwidth")!
+ );
+ element.removeAttribute("colwidth");
+ }
+
+ return widths && widths.length == colspan ? widths : null;
+ },
+ renderHTML(attributes) {
+ if (!attributes.colwidth) {
+ return {};
+ }
+ return {
+ "data-colwidth": attributes.colwidth.join(",")
+ };
+ }
+ },
+ colspan: {
+ default: 1,
+ parseHTML(element) {
+ return Number(element.getAttribute("colspan") || 1);
+ },
+ renderHTML(attributes) {
+ return {
+ colspan: attributes.colspan || 1
+ };
+ }
+ },
+ rowspan: {
+ default: 1,
+ parseHTML(element) {
+ return Number(element.getAttribute("rowspan") || 1);
+ },
+ renderHTML(attributes) {
+ return {
+ rowspan: attributes.rowspan || 1
+ };
+ }
+ },
+ backgroundColor: addStyleAttribute("backgroundColor", "background-color"),
+ color: addStyleAttribute("color", "color"),
+ borderWidth: addStyleAttribute("borderWidth", "border-width", "px"),
+ borderStyle: addStyleAttribute("borderStyle", "border-style"),
+ borderColor: addStyleAttribute("borderColor", "border-color")
+ };
+}
diff --git a/packages/editor/src/extensions/table-header/table-header.ts b/packages/editor/src/extensions/table-header/table-header.ts
index a2f899213..5187029e4 100644
--- a/packages/editor/src/extensions/table-header/table-header.ts
+++ b/packages/editor/src/extensions/table-header/table-header.ts
@@ -17,18 +17,50 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import TipTapTableHeader from "@tiptap/extension-table-header";
-import { addStyleAttribute } from "../table-cell/utils.js";
+import { mergeAttributes, Node } from "@tiptap/core";
+import { addTableCellAttributes } from "../table-cell/table-cell.js";
-export const TableHeader = TipTapTableHeader.extend({
- addAttributes() {
+export interface TableHeaderOptions {
+ /**
+ * The HTML attributes for a table header node.
+ * @default {}
+ * @example { class: 'foo' }
+ */
+ HTMLAttributes: Record;
+}
+
+/**
+ * This extension allows you to create table headers.
+ * @see https://www.tiptap.dev/api/nodes/table-header
+ */
+export const TableHeader = Node.create({
+ name: "tableHeader",
+
+ addOptions() {
return {
- ...this.parent?.(),
- backgroundColor: addStyleAttribute("backgroundColor", "background-color"),
- color: addStyleAttribute("color", "color"),
- borderWidth: addStyleAttribute("borderWidth", "border-width", "px"),
- borderStyle: addStyleAttribute("borderStyle", "border-style"),
- borderColor: addStyleAttribute("borderColor", "border-color")
+ HTMLAttributes: {}
};
+ },
+
+ content: "block+",
+
+ addAttributes() {
+ return addTableCellAttributes();
+ },
+
+ tableRole: "header_cell",
+
+ isolating: true,
+
+ parseHTML() {
+ return [{ tag: "th" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "th",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+ 0
+ ];
}
});
diff --git a/packages/editor/src/extensions/table/TableView.ts b/packages/editor/src/extensions/table/TableView.ts
new file mode 100644
index 000000000..70a45614a
--- /dev/null
+++ b/packages/editor/src/extensions/table/TableView.ts
@@ -0,0 +1,49 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { NodeView } from "@tiptap/pm/view";
+import { updateColumnsOnResize } from "./prosemirror-tables/tableview.js";
+
+export class TableView implements NodeView {
+ node: ProseMirrorNode;
+
+ cellMinWidth: number;
+
+ dom: HTMLElement;
+
+ table: HTMLTableElement;
+
+ colgroup: HTMLTableColElement;
+
+ contentDOM: HTMLElement;
+
+ constructor(node: ProseMirrorNode, cellMinWidth: number) {
+ this.node = node;
+ this.cellMinWidth = cellMinWidth;
+ this.dom = document.createElement("div");
+ this.dom.className = "tableWrapper";
+ this.table = this.dom.appendChild(document.createElement("table"));
+ this.colgroup = this.table.appendChild(document.createElement("colgroup"));
+ updateColumnsOnResize(node, this.colgroup, this.table, cellMinWidth);
+ this.contentDOM = this.table.appendChild(document.createElement("tbody"));
+ }
+
+ update(node: ProseMirrorNode) {
+ if (node.type !== this.node.type) {
+ return false;
+ }
+
+ this.node = node;
+ updateColumnsOnResize(node, this.colgroup, this.table, this.cellMinWidth);
+
+ return true;
+ }
+
+ ignoreMutation(
+ mutation: MutationRecord | { type: "selection"; target: Element }
+ ) {
+ return (
+ mutation.type === "attributes" &&
+ (mutation.target === this.table ||
+ this.colgroup.contains(mutation.target))
+ );
+ }
+}
diff --git a/packages/editor/src/extensions/table/actions.ts b/packages/editor/src/extensions/table/actions.ts
index 6dfc48d44..420b3ba1d 100644
--- a/packages/editor/src/extensions/table/actions.ts
+++ b/packages/editor/src/extensions/table/actions.ts
@@ -18,9 +18,9 @@ along with this program. If not, see .
*/
import { Editor } from "@tiptap/core";
-import { selectedRect, TableRect } from "@tiptap/pm/tables";
import { EditorState, TextSelection, Transaction } from "prosemirror-state";
import { Node } from "prosemirror-model";
+import { selectedRect, TableRect } from "./prosemirror-tables/commands.js";
type TableCell = {
cell: Node;
diff --git a/packages/editor/src/extensions/table/component.tsx b/packages/editor/src/extensions/table/component.tsx
index 58df8987d..d9ee1f43a 100644
--- a/packages/editor/src/extensions/table/component.tsx
+++ b/packages/editor/src/extensions/table/component.tsx
@@ -23,7 +23,6 @@ import { Node as ProsemirrorNode } from "prosemirror-model";
import { Editor } from "../../types.js";
import { Editor as TiptapEditor } from "@tiptap/core";
import { useCallback, useEffect, useRef } from "react";
-import { updateColumnsOnResize } from "@tiptap/pm/tables";
import { EditorView, NodeView } from "prosemirror-view";
import {
InsertColumnRight,
@@ -37,14 +36,17 @@ import {
findSelectedDOMNode,
hasSameAttributes
} from "../../utils/prosemirror.js";
-import { DesktopOnly } from "../../components/responsive/index.js";
+import { DesktopOnly, MobileOnly } from "../../components/responsive/index.js";
import { TextDirections } from "../text-direction/index.js";
import { strings } from "@notesnook/intl";
import SimpleBar from "simplebar-react";
import { useIsMobile } from "../../toolbar/stores/toolbar-store.js";
+import { updateColumnsOnResize } from "./prosemirror-tables/tableview.js";
-export function TableComponent(props: ReactNodeViewProps) {
- const { editor, node, forwardRef } = props;
+export function TableComponent(
+ props: ReactNodeViewProps & { cellMinWidth: number }
+) {
+ const { editor, node, forwardRef, cellMinWidth } = props;
const colgroupRef = useRef(null);
const tableRef = useRef();
const { textDirection } = node.attrs;
@@ -53,24 +55,37 @@ export function TableComponent(props: ReactNodeViewProps) {
useEffect(() => {
if (!colgroupRef.current || !tableRef.current) return;
- updateColumnsOnResize(node, colgroupRef.current, tableRef.current, 50);
- }, [node]);
-
- const renderScrollContent = useCallback(() => {
- return (
-
-
{
- forwardRef?.(ref);
- tableRef.current = ref || undefined;
- }}
- >
-
- {/* */}
-
-
+
{
+ forwardRef?.(ref);
+ tableRef.current = ref || undefined;
+ }}
+ >
+
+ {/* */}
+
+
+
{
+ forwardRef?.(ref);
+ tableRef.current = ref || undefined;
+ }}
+ >
+
+ {/* */}
+
+