feat: add table module documentation + keyboard shortcuts

package.json

@@ -32,7 +32,8 @@
     "pack": "npm run build:super-editor && npm --prefix ./packages/superdoc run pack",
     "prepare": "husky",
     "lint:staged": "lint-staged",
-    "watch": "npm run watch:es --workspace=packages/superdoc"
+    "watch": "npm run watch:es --workspace=packages/superdoc",
+    "check:all": "npm run format && npm run lint:fix && npm --workspace=packages/super-editor run types:build"
   },
   "lint-staged": {
     "*.{js,jsx}": [

packages/super-editor/src/core/helpers/isInTable.js

@@ -1,3 +1,15 @@
+// @ts-check
+/**
+ * Check if cursor is inside a table
+ * @private
+ * @category Helper
+ * @param {Object} state - Editor state
+ * @returns {boolean} True if cursor is in table
+ * @example
+ * if (isInTable(state)) {
+ *   // Enable table-specific commands
+ * }
+ */
 export const isInTable = (state) => {
   const { $head } = state.selection;
 

packages/super-editor/src/extensions/bold/bold.js

@@ -5,6 +5,8 @@ import { Mark, Attribute } from '@core/index.js';
  * @module Bold
  * @sidebarTitle Bold
  * @snippetPath /snippets/extensions/bold.mdx
+ * @shortcut Mod-b | toggleBold | Toggle bold formatting
+ * @shortcut Mod-B | toggleBold | Toggle bold formatting (uppercase)
  */
 export const Bold = Mark.create({
   name: 'bold',
@@ -17,11 +19,14 @@ export const Bold = Mark.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {string} [value] - Bold weight value ('0' renders as normal)
+       */
       value: {
         default: null,
         renderDOM: (attrs) => {
           if (!attrs.value) return {};
-
           if (attrs.value === '0') {
             return { style: 'font-weight: normal' };
           }

packages/super-editor/src/extensions/highlight/highlight.js

@@ -5,6 +5,7 @@ import { Mark, Attribute } from '@core/index.js';
  * @module Highlight
  * @sidebarTitle Highlight
  * @snippetPath /snippets/extensions/highlight.mdx
+ * @shortcut Mod-Shift-h | toggleHighlight | Toggle highlighted formatting
  */
 export const Highlight = Mark.create({
   name: 'highlight',
@@ -17,6 +18,10 @@ export const Highlight = Mark.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {string} [color] - Background color (CSS color value)
+       */
       color: {
         default: null,
         parseDOM: (element) => element.getAttribute('data-color') || element.style.backgroundColor,

packages/super-editor/src/extensions/italic/italic.js

@@ -5,6 +5,8 @@ import { Mark, Attribute } from '@core/index.js';
  * @module Italic
  * @sidebarTitle Italic
  * @snippetPath /snippets/extensions/italic.mdx
+ * @shortcut Mod-i | toggleItalic | Toggle italic formatting
+ * @shortcut Mod-I | toggleItalic | Toggle italic formatting (uppercase)
  */
 export const Italic = Mark.create({
   name: 'italic',

packages/super-editor/src/extensions/link/link.js

@@ -55,6 +55,10 @@ export const Link = Mark.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {string} [href] - URL or anchor reference
+       */
       href: {
         default: null,
         renderDOM: ({ href, name }) => {
@@ -63,10 +67,31 @@ export const Link = Mark.create({
           return {};
         },
       },
+      /**
+       * @category Attribute
+       * @param {string} [target='_blank'] - Link target window
+       */
       target: { default: this.options.htmlAttributes.target },
+      /**
+       * @category Attribute
+       * @param {string} [rel='noopener noreferrer nofollow'] - Relationship attributes
+       */
       rel: { default: this.options.htmlAttributes.rel },
+      /**
+       * @private
+       * @category Attribute
+       * @param {string} [rId] - Word relationship ID for internal links
+       */
       rId: { default: this.options.htmlAttributes.rId || null },
+      /**
+       * @category Attribute
+       * @param {string} [text] - Display text for the link
+       */
       text: { default: null },
+      /**
+       * @category Attribute
+       * @param {string} [name] - Anchor name for internal references
+       */
       name: { default: null },
     };
   },

packages/super-editor/src/extensions/strike/strike.js

@@ -5,6 +5,7 @@ import { Mark, Attribute } from '@core/index.js';
  * @module Strike
  * @sidebarTitle Strike
  * @snippetPath /snippets/extensions/strike.mdx
+ * @shortcut Mod-Shift-s | toggleStrike | Toggle strikethrough formatting
  */
 export const Strike = Mark.create({
   name: 'strike',

packages/super-editor/src/extensions/structured-content/document-section.js

@@ -75,7 +75,16 @@ export const DocumentSection = Node.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {number} [id] - Unique section identifier
+       */
       id: {},
+      /**
+       * @private
+       * @category Attribute
+       * @param {string} [sdBlockId] - Internal block tracking
+       */
       sdBlockId: {
         default: null,
         keepOnSplit: false,
@@ -84,9 +93,25 @@ export const DocumentSection = Node.create({
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
+      /**
+       * @category Attribute
+       * @param {string} [title] - Section display label
+       */
       title: {},
+      /**
+       * @category Attribute
+       * @param {string} [description] - Section metadata
+       */
       description: {},
+      /**
+       * @category Attribute
+       * @param {string} [sectionType] - Business classification (e.g., 'legal', 'pricing')
+       */
       sectionType: {},
+      /**
+       * @category Attribute
+       * @param {boolean} [isLocked=false] - Lock state preventing edits
+       */
       isLocked: { default: false },
     };
   },

packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.js

@@ -1,3 +1,30 @@
+// @ts-check
+/**
+ * Cell border configuration
+ * @typedef {Object} CellBorder
+ * @property {number} [size=1] - Border width in pixels
+ * @property {string} [color='#000000'] - Border color
+ * @property {string} [style='solid'] - Border style
+ */
+
+/**
+ * Cell borders object
+ * @typedef {Object} CellBorders
+ * @property {CellBorder} [top] - Top border
+ * @property {CellBorder} [right] - Right border
+ * @property {CellBorder} [bottom] - Bottom border
+ * @property {CellBorder} [left] - Left border
+ */
+
+/**
+ * Create cell border configuration object
+ * @private
+ * @category Helper
+ * @param {Object} [options] - Border options
+ * @param {number} [options.size=0.66665] - Border width in pixels
+ * @param {string} [options.color='#000000'] - Border color (hex)
+ * @returns {CellBorders} Complete borders object for all cell sides
+ */
 export const createCellBorders = ({ size = 0.66665, color = '#000000' } = {}) => {
   return {
     top: { size, color },

packages/super-editor/src/extensions/table-cell/table-cell.js

@@ -1,6 +1,27 @@
+// @ts-check
+/**
+ * Cell margins configuration
+ * @typedef {Object} CellMargins
+ * @property {number} [top] - Top margin in pixels
+ * @property {number} [right] - Right margin in pixels
+ * @property {number} [bottom] - Bottom margin in pixels
+ * @property {number} [left] - Left margin in pixels
+ */
+
+/**
+ * Cell background configuration
+ * @typedef {Object} CellBackground
+ * @property {string} color - Background color (hex without #)
+ */
+
 import { Node, Attribute } from '@core/index.js';
 import { createCellBorders } from './helpers/createCellBorders.js';
 
+/**
+ * @module TableCell
+ * @sidebarTitle Table Cell
+ * @snippetPath /snippets/extensions/table-cell.mdx
+ */
 export const TableCell = Node.create({
   name: 'tableCell',
 
@@ -20,14 +41,26 @@ export const TableCell = Node.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {number} [colspan=1] - Number of columns this cell spans
+       */
       colspan: {
         default: 1,
       },
 
+      /**
+       * @category Attribute
+       * @param {number} [rowspan=1] - Number of rows this cell spans
+       */
       rowspan: {
         default: 1,
       },
 
+      /**
+       * @category Attribute
+       * @param {number[]} [colwidth=[100]] - Column widths array in pixels
+       */
       colwidth: {
         default: [100],
         parseDOM: (elem) => {
@@ -43,16 +76,10 @@ export const TableCell = Node.create({
         },
       },
 
-      /* width: {
-        renderDOM: ({ width, widthType, widthUnit }) => {
-          if (!width) return {};
-          let unit = widthUnit === 'px' ? widthUnit : 'in';
-          if (widthType === 'pct') unit = '%';
-          const style = `width: ${width}${unit}`;
-          return { style };
-        },
-      }, */
-
+      /**
+       * @category Attribute
+       * @param {CellBackground} [background] - Cell background color configuration
+       */
       background: {
         renderDOM({ background }) {
           if (!background) return {};
@@ -62,6 +89,10 @@ export const TableCell = Node.create({
         },
       },
 
+      /**
+       * @category Attribute
+       * @param {string} [verticalAlign] - Vertical content alignment (top, middle, bottom)
+       */
       verticalAlign: {
         renderDOM({ verticalAlign }) {
           if (!verticalAlign) return {};
@@ -70,6 +101,10 @@ export const TableCell = Node.create({
         },
       },
 
+      /**
+       * @category Attribute
+       * @param {CellMargins} [cellMargins] - Internal cell padding
+       */
       cellMargins: {
         renderDOM({ cellMargins }) {
           if (!cellMargins) return {};
@@ -85,6 +120,10 @@ export const TableCell = Node.create({
         },
       },
 
+      /**
+       * @category Attribute
+       * @param {CellBorders} [borders] - Cell border configuration
+       */
       borders: {
         default: () => createCellBorders(),
         renderDOM({ borders }) {
@@ -102,11 +141,21 @@ export const TableCell = Node.create({
         },
       },
 
+      /**
+       * @private
+       * @category Attribute
+       * @param {string} [widthType='auto'] - Internal width type
+       */
       widthType: {
         default: 'auto',
         rendered: false,
       },
 
+      /**
+       * @private
+       * @category Attribute
+       * @param {string} [widthUnit='px'] - Internal width unit
+       */
       widthUnit: {
         default: 'px',
         rendered: false,

packages/super-editor/src/extensions/table-header/table-header.js

@@ -1,5 +1,11 @@
+// @ts-check
 import { Node, Attribute } from '@core/index.js';
 
+/**
+ * @module TableHeader
+ * @sidebarTitle Table Header
+ * @snippetPath /snippets/extensions/table-header.mdx
+ */
 export const TableHeader = Node.create({
   name: 'tableHeader',
 
@@ -19,12 +25,26 @@ export const TableHeader = Node.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {number} [colspan=1] - Number of columns this header spans
+       */
       colspan: {
         default: 1,
       },
+
+      /**
+       * @category Attribute
+       * @param {number} [rowspan=1] - Number of rows this header spans
+       */
       rowspan: {
         default: 1,
       },
+
+      /**
+       * @category Attribute
+       * @param {number[]} [colwidth] - Column widths array in pixels
+       */
       colwidth: {
         default: null,
         parseDOM: (element) => {

packages/super-editor/src/extensions/table-row/table-row.js

@@ -1,5 +1,11 @@
+// @ts-check
 import { Node, Attribute } from '@core/index.js';
 
+/**
+ * @module TableRow
+ * @sidebarTitle Table Row
+ * @snippetPath /snippets/extensions/table-row.mdx
+ */
 export const TableRow = Node.create({
   name: 'tableRow',
 
@@ -17,6 +23,10 @@ export const TableRow = Node.create({
 
   addAttributes() {
     return {
+      /**
+       * @category Attribute
+       * @param {number} [rowHeight] - Fixed row height in pixels
+       */
       rowHeight: {
         renderDOM({ rowHeight }) {
           if (!rowHeight) return {};