Skip to content

Commit 2130716

Browse files
caio-pizzolCopilot
caio-pizzol
and
Copilot
authored
feat: add table module documentation + keyboard shortcuts (#818)
* feat: add keyboard shortcuts for text formatting extensions and enhance table module documentation - Added keyboard shortcuts for bold (Mod-b, Mod-B), italic (Mod-i, Mod-I), underline (Mod-u, Mod-U), highlight (Mod-Shift-h), and strikethrough (Mod-Shift-s). - Enhanced table module with detailed configuration options, commands, and helper functions for better usability and documentation clarity. * chore: remove asterisk Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * refactor(table): streamline command functions for better readability - Simplified the syntax of command functions in the table extension by removing unnecessary line breaks and indentation. - Improved overall code clarity while maintaining functionality. * docs(table): enhance JSDoc comments and remove unused helper functions - Added detailed JSDoc comments for table extension options and attributes to improve documentation clarity. - Removed unused helper functions related to cell creation and column styling to streamline the codebase. * docs: enhance JSDoc comments across various extensions - Improved documentation by adding detailed JSDoc comments for attributes in bold, highlight, link, document section, table, table cell, table header, table row, and underline extensions. - Ensured clarity and consistency in attribute descriptions to aid developers in understanding usage. * docs(underline): update JSDoc for underline style configuration - Revised JSDoc comments to enhance clarity by changing the UnderlineType definition to an object type with a value property for style variants. - Improved formatting of command functions for better readability. * docs(table): remove unused type definitions for table cell and header attributes - Eliminated outdated JSDoc type definitions for TableCellAttributes and TableHeaderAttributes to streamline the codebase. - Improved overall documentation clarity by focusing on relevant attributes. * docs(table): enhance JSDoc comments and add new helper functions - Added detailed JSDoc comments for various table helper functions to improve documentation clarity. - Introduced a new command in package.json to run all checks, including formatting, linting, and type building for better code quality assurance. - Removed unused type definitions and helper functions to streamline the codebase. * chore: fix type import Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(underline): rename JSDoc type definition for underline configuration - Updated the JSDoc type definition from UnderlineType to UnderlineConfig for clarity. - Adjusted parameter documentation to reflect the new type name, enhancing overall documentation consistency. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent da7bca9 commit 2130716

23 files changed

Lines changed: 596 additions & 19 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@
3232
"pack": "npm run build:super-editor && npm --prefix ./packages/superdoc run pack",
3333
"prepare": "husky",
3434
"lint:staged": "lint-staged",
35-
"watch": "npm run watch:es --workspace=packages/superdoc"
35+
"watch": "npm run watch:es --workspace=packages/superdoc",
36+
"check:all": "npm run format && npm run lint:fix && npm --workspace=packages/super-editor run types:build"
3637
},
3738
"lint-staged": {
3839
"*.{js,jsx}": [

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
// @ts-check
2+
/**
3+
* Check if cursor is inside a table
4+
* @private
5+
* @category Helper
6+
* @param {Object} state - Editor state
7+
* @returns {boolean} True if cursor is in table
8+
* @example
9+
* if (isInTable(state)) {
10+
* // Enable table-specific commands
11+
* }
12+
*/
113
export const isInTable = (state) => {
214
const { $head } = state.selection;
315

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Mark, Attribute } from '@core/index.js';
55
* @module Bold
66
* @sidebarTitle Bold
77
* @snippetPath /snippets/extensions/bold.mdx
8+
* @shortcut Mod-b | toggleBold | Toggle bold formatting
9+
* @shortcut Mod-B | toggleBold | Toggle bold formatting (uppercase)
810
*/
911
export const Bold = Mark.create({
1012
name: 'bold',
@@ -17,11 +19,14 @@ export const Bold = Mark.create({
1719

1820
addAttributes() {
1921
return {
22+
/**
23+
* @category Attribute
24+
* @param {string} [value] - Bold weight value ('0' renders as normal)
25+
*/
2026
value: {
2127
default: null,
2228
renderDOM: (attrs) => {
2329
if (!attrs.value) return {};
24-
2530
if (attrs.value === '0') {
2631
return { style: 'font-weight: normal' };
2732
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Mark, Attribute } from '@core/index.js';
55
* @module Highlight
66
* @sidebarTitle Highlight
77
* @snippetPath /snippets/extensions/highlight.mdx
8+
* @shortcut Mod-Shift-h | toggleHighlight | Toggle highlighted formatting
89
*/
910
export const Highlight = Mark.create({
1011
name: 'highlight',
@@ -17,6 +18,10 @@ export const Highlight = Mark.create({
1718

1819
addAttributes() {
1920
return {
21+
/**
22+
* @category Attribute
23+
* @param {string} [color] - Background color (CSS color value)
24+
*/
2025
color: {
2126
default: null,
2227
parseDOM: (element) => element.getAttribute('data-color') || element.style.backgroundColor,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Mark, Attribute } from '@core/index.js';
55
* @module Italic
66
* @sidebarTitle Italic
77
* @snippetPath /snippets/extensions/italic.mdx
8+
* @shortcut Mod-i | toggleItalic | Toggle italic formatting
9+
* @shortcut Mod-I | toggleItalic | Toggle italic formatting (uppercase)
810
*/
911
export const Italic = Mark.create({
1012
name: 'italic',

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ export const Link = Mark.create({
5555

5656
addAttributes() {
5757
return {
58+
/**
59+
* @category Attribute
60+
* @param {string} [href] - URL or anchor reference
61+
*/
5862
href: {
5963
default: null,
6064
renderDOM: ({ href, name }) => {
@@ -63,10 +67,31 @@ export const Link = Mark.create({
6367
return {};
6468
},
6569
},
70+
/**
71+
* @category Attribute
72+
* @param {string} [target='_blank'] - Link target window
73+
*/
6674
target: { default: this.options.htmlAttributes.target },
75+
/**
76+
* @category Attribute
77+
* @param {string} [rel='noopener noreferrer nofollow'] - Relationship attributes
78+
*/
6779
rel: { default: this.options.htmlAttributes.rel },
80+
/**
81+
* @private
82+
* @category Attribute
83+
* @param {string} [rId] - Word relationship ID for internal links
84+
*/
6885
rId: { default: this.options.htmlAttributes.rId || null },
86+
/**
87+
* @category Attribute
88+
* @param {string} [text] - Display text for the link
89+
*/
6990
text: { default: null },
91+
/**
92+
* @category Attribute
93+
* @param {string} [name] - Anchor name for internal references
94+
*/
7095
name: { default: null },
7196
};
7297
},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Mark, Attribute } from '@core/index.js';
55
* @module Strike
66
* @sidebarTitle Strike
77
* @snippetPath /snippets/extensions/strike.mdx
8+
* @shortcut Mod-Shift-s | toggleStrike | Toggle strikethrough formatting
89
*/
910
export const Strike = Mark.create({
1011
name: 'strike',

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,16 @@ export const DocumentSection = Node.create({
7575

7676
addAttributes() {
7777
return {
78+
/**
79+
* @category Attribute
80+
* @param {number} [id] - Unique section identifier
81+
*/
7882
id: {},
83+
/**
84+
* @private
85+
* @category Attribute
86+
* @param {string} [sdBlockId] - Internal block tracking
87+
*/
7988
sdBlockId: {
8089
default: null,
8190
keepOnSplit: false,
@@ -84,9 +93,25 @@ export const DocumentSection = Node.create({
8493
return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
8594
},
8695
},
96+
/**
97+
* @category Attribute
98+
* @param {string} [title] - Section display label
99+
*/
87100
title: {},
101+
/**
102+
* @category Attribute
103+
* @param {string} [description] - Section metadata
104+
*/
88105
description: {},
106+
/**
107+
* @category Attribute
108+
* @param {string} [sectionType] - Business classification (e.g., 'legal', 'pricing')
109+
*/
89110
sectionType: {},
111+
/**
112+
* @category Attribute
113+
* @param {boolean} [isLocked=false] - Lock state preventing edits
114+
*/
90115
isLocked: { default: false },
91116
};
92117
},

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1+
// @ts-check
2+
/**
3+
* Cell border configuration
4+
* @typedef {Object} CellBorder
5+
* @property {number} [size=1] - Border width in pixels
6+
* @property {string} [color='#000000'] - Border color
7+
* @property {string} [style='solid'] - Border style
8+
*/
9+
10+
/**
11+
* Cell borders object
12+
* @typedef {Object} CellBorders
13+
* @property {CellBorder} [top] - Top border
14+
* @property {CellBorder} [right] - Right border
15+
* @property {CellBorder} [bottom] - Bottom border
16+
* @property {CellBorder} [left] - Left border
17+
*/
18+
19+
/**
20+
* Create cell border configuration object
21+
* @private
22+
* @category Helper
23+
* @param {Object} [options] - Border options
24+
* @param {number} [options.size=0.66665] - Border width in pixels
25+
* @param {string} [options.color='#000000'] - Border color (hex)
26+
* @returns {CellBorders} Complete borders object for all cell sides
27+
*/
128
export const createCellBorders = ({ size = 0.66665, color = '#000000' } = {}) => {
229
return {
330
top: { size, color },

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

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,27 @@
1+
// @ts-check
2+
/**
3+
* Cell margins configuration
4+
* @typedef {Object} CellMargins
5+
* @property {number} [top] - Top margin in pixels
6+
* @property {number} [right] - Right margin in pixels
7+
* @property {number} [bottom] - Bottom margin in pixels
8+
* @property {number} [left] - Left margin in pixels
9+
*/
10+
11+
/**
12+
* Cell background configuration
13+
* @typedef {Object} CellBackground
14+
* @property {string} color - Background color (hex without #)
15+
*/
16+
117
import { Node, Attribute } from '@core/index.js';
218
import { createCellBorders } from './helpers/createCellBorders.js';
319

20+
/**
21+
* @module TableCell
22+
* @sidebarTitle Table Cell
23+
* @snippetPath /snippets/extensions/table-cell.mdx
24+
*/
425
export const TableCell = Node.create({
526
name: 'tableCell',
627

@@ -20,14 +41,26 @@ export const TableCell = Node.create({
2041

2142
addAttributes() {
2243
return {
44+
/**
45+
* @category Attribute
46+
* @param {number} [colspan=1] - Number of columns this cell spans
47+
*/
2348
colspan: {
2449
default: 1,
2550
},
2651

52+
/**
53+
* @category Attribute
54+
* @param {number} [rowspan=1] - Number of rows this cell spans
55+
*/
2756
rowspan: {
2857
default: 1,
2958
},
3059

60+
/**
61+
* @category Attribute
62+
* @param {number[]} [colwidth=[100]] - Column widths array in pixels
63+
*/
3164
colwidth: {
3265
default: [100],
3366
parseDOM: (elem) => {
@@ -43,16 +76,10 @@ export const TableCell = Node.create({
4376
},
4477
},
4578

46-
/* width: {
47-
renderDOM: ({ width, widthType, widthUnit }) => {
48-
if (!width) return {};
49-
let unit = widthUnit === 'px' ? widthUnit : 'in';
50-
if (widthType === 'pct') unit = '%';
51-
const style = `width: ${width}${unit}`;
52-
return { style };
53-
},
54-
}, */
55-
79+
/**
80+
* @category Attribute
81+
* @param {CellBackground} [background] - Cell background color configuration
82+
*/
5683
background: {
5784
renderDOM({ background }) {
5885
if (!background) return {};
@@ -62,6 +89,10 @@ export const TableCell = Node.create({
6289
},
6390
},
6491

92+
/**
93+
* @category Attribute
94+
* @param {string} [verticalAlign] - Vertical content alignment (top, middle, bottom)
95+
*/
6596
verticalAlign: {
6697
renderDOM({ verticalAlign }) {
6798
if (!verticalAlign) return {};
@@ -70,6 +101,10 @@ export const TableCell = Node.create({
70101
},
71102
},
72103

104+
/**
105+
* @category Attribute
106+
* @param {CellMargins} [cellMargins] - Internal cell padding
107+
*/
73108
cellMargins: {
74109
renderDOM({ cellMargins }) {
75110
if (!cellMargins) return {};
@@ -85,6 +120,10 @@ export const TableCell = Node.create({
85120
},
86121
},
87122

123+
/**
124+
* @category Attribute
125+
* @param {CellBorders} [borders] - Cell border configuration
126+
*/
88127
borders: {
89128
default: () => createCellBorders(),
90129
renderDOM({ borders }) {
@@ -102,11 +141,21 @@ export const TableCell = Node.create({
102141
},
103142
},
104143

144+
/**
145+
* @private
146+
* @category Attribute
147+
* @param {string} [widthType='auto'] - Internal width type
148+
*/
105149
widthType: {
106150
default: 'auto',
107151
rendered: false,
108152
},
109153

154+
/**
155+
* @private
156+
* @category Attribute
157+
* @param {string} [widthUnit='px'] - Internal width unit
158+
*/
110159
widthUnit: {
111160
default: 'px',
112161
rendered: false,

0 commit comments

Comments
 (0)