tsc

app/editor/components/BlockMenu.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import useDictionary from "~/hooks/useDictionary";
 import getMenuItems from "../menus/block";
+import { useEditor } from "./EditorContext";
 import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
@@ -11,6 +12,7 @@ type Props = Omit<SuggestionsMenuProps, "renderMenuItem" | "items"> &
 
 function BlockMenu(props: Props) {
   const dictionary = useDictionary();
+  const { elementRef } = useEditor();
 
   return (
     <SuggestionsMenu
@@ -26,7 +28,7 @@ function BlockMenu(props: Props) {
           shortcut={item.shortcut}
         />
       )}
-      items={getMenuItems(dictionary)}
+      items={getMenuItems(dictionary, elementRef)}
     />
   );
 }

app/editor/menus/block.tsx

@@ -38,7 +38,12 @@ const Img = styled(Image)`
   height: 18px;
 `;
 
-export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
+export default function blockMenuItems(
+  dictionary: Dictionary,
+  documentRef: React.RefObject<HTMLDivElement>
+): MenuItem[] {
+  const documentWidth = documentRef.current?.clientWidth ?? 0;
+
   return [
     {
       name: "heading",
@@ -119,7 +124,11 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       name: "table",
       title: dictionary.table,
       icon: <TableIcon />,
-      attrs: { rowsCount: 3, colsCount: 3 },
+      attrs: {
+        rowsCount: 3,
+        colsCount: 3,
+        colWidth: documentWidth / 3,
+      },
     },
     {
       name: "blockquote",

shared/editor/commands/table.ts

@@ -1,4 +1,4 @@
-import { Fragment, Node, NodeType } from "prosemirror-model";
+import { Node, NodeType } from "prosemirror-model";
 import { Command, EditorState, TextSelection } from "prosemirror-state";
 import {
   CellSelection,
@@ -20,14 +20,19 @@ import { collapseSelection } from "./collapseSelection";
 export function createTable({
   rowsCount,
   colsCount,
+  colWidth,
 }: {
+  /** The number of rows in the table. */
   rowsCount: number;
+  /** The number of columns in the table. */
   colsCount: number;
+  /** The widths of each column in the table. */
+  colWidth: number;
 }): Command {
   return (state, dispatch) => {
     if (dispatch) {
       const offset = state.tr.selection.anchor + 1;
-      const nodes = createTableInner(state, rowsCount, colsCount);
+      const nodes = createTableInner(state, rowsCount, colsCount, colWidth);
       const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView();
       const resolvedPos = tr.doc.resolve(offset);
       tr.setSelection(TextSelection.near(resolvedPos));
@@ -41,6 +46,7 @@ function createTableInner(
   state: EditorState,
   rowsCount: number,
   colsCount: number,
+  colWidth: number,
   withHeaderRow = true,
   cellContent?: Node
 ) {
@@ -49,23 +55,27 @@ function createTableInner(
   const cells: Node[] = [];
   const rows: Node[] = [];
 
-  const createCell = (
-    cellType: NodeType,
-    cellContent: Fragment | Node | readonly Node[] | null | undefined
-  ) =>
+  const createCell = (cellType: NodeType, attrs: Record<string, any> | null) =>
     cellContent
-      ? cellType.createChecked(null, cellContent)
-      : cellType.createAndFill();
+      ? cellType.createChecked(attrs, cellContent)
+      : cellType.createAndFill(attrs);
 
   for (let index = 0; index < colsCount; index += 1) {
-    const cell = createCell(types.cell, cellContent);
+    const attrs = colWidth
+      ? {
+          colwidth: [colWidth],
+          colspan: 1,
+          rowspan: 1,
+        }
+      : null;
+    const cell = createCell(types.cell, attrs);
 
     if (cell) {
       cells.push(cell);
     }
 
     if (withHeaderRow) {
-      const headerCell = createCell(types.header_cell, cellContent);
+      const headerCell = createCell(types.header_cell, attrs);
 
       if (headerCell) {
         headerCells.push(headerCell);

shared/editor/types/index.ts

@@ -35,8 +35,8 @@ export type MenuItem = {
   children?: MenuItem[];
   defaultHidden?: boolean;
   attrs?:
-    | Record<string, Primitive>
-    | ((state: EditorState) => Record<string, Primitive>);
+    | Record<string, Primitive | null>
+    | ((state: EditorState) => Record<string, Primitive | null>);
   visible?: boolean;
   active?: (state: EditorState) => boolean;
   appendSpace?: boolean;