fix: make toc toolbar icon configurable

Author: VladaHarbour

packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js

@@ -1076,17 +1076,11 @@ export const makeDefaultItems = ({
   const stickyItemsWidth = 120;
   const toolbarPadding = 32;
 
-  const itemsToHideXL = [
-    'linkedStyles',
-    'clearFormatting',
-    'copyFormat',
-    'ruler',
-    'formattingMarks',
-    'tableOfContents',
-  ];
+  const itemsToHideXL = ['linkedStyles', 'clearFormatting', 'copyFormat', 'ruler', 'formattingMarks'];
   const itemsToHideSM = ['zoom', 'fontFamily', 'fontSize', 'redo'];
   const shouldUseLgCompactStyles = availableWidth <= RESPONSIVE_BREAKPOINTS.lg;
   const shouldIncludeFormattingMarks = superToolbar.config?.showFormattingMarksButton === true;
+  const shouldIncludeTableOfContents = superToolbar.config?.showTableOfContentsButton === true;
 
   if (shouldUseLgCompactStyles) {
     documentMode.attributes.value = {
@@ -1122,7 +1116,7 @@ export const makeDefaultItems = ({
     separator,
     link,
     image,
-    tableOfContents,
+    ...(shouldIncludeTableOfContents ? [tableOfContents] : []),
     tableItem,
     tableActionsItem,
     separator,

packages/super-editor/src/editors/v1/components/toolbar/defaultItems.test.js

@@ -44,6 +44,23 @@ function buildItems(availableWidth, superToolbarOverrides = {}) {
   });
 }
 
+describe('makeDefaultItems table of contents button opt-in', () => {
+  it('does not include tableOfContents in the default toolbar items', () => {
+    const { defaultItems, overflowItems } = buildItems(2000);
+    expect(getItem(defaultItems, overflowItems, 'tableOfContents')).toBeUndefined();
+  });
+
+  it('includes tableOfContents when showTableOfContentsButton is true', () => {
+    const { defaultItems, overflowItems } = buildItems(2000, {
+      config: { showTableOfContentsButton: true },
+    });
+    const tableOfContents = getItem(defaultItems, overflowItems, 'tableOfContents');
+
+    expect(tableOfContents).toBeDefined();
+    expect(tableOfContents.command).toBe('insertTableOfContents');
+  });
+});
+
 describe('makeDefaultItems formatting marks button opt-in', () => {
   it('does not include formattingMarks in the default toolbar items', () => {
     const { defaultItems, overflowItems } = buildItems(2000);
@@ -73,7 +90,7 @@ describe('makeDefaultItems formatting marks button opt-in', () => {
 describe('makeDefaultItems XL overflow boundary (SD-2328)', () => {
   const XL_OVERFLOW_SAFETY_BUFFER = 20;
   const XL_CUTOFF = RESPONSIVE_BREAKPOINTS.xl + XL_OVERFLOW_SAFETY_BUFFER;
-  const XL_ITEMS = ['linkedStyles', 'clearFormatting', 'copyFormat', 'ruler', 'tableOfContents'];
+  const XL_ITEMS = ['linkedStyles', 'clearFormatting', 'copyFormat', 'ruler'];
 
   it(`moves XL items into overflow at ${XL_CUTOFF - 1}px (below cutoff)`, () => {
     const { defaultItems, overflowItems } = buildItems(XL_CUTOFF - 1);

packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js

@@ -49,6 +49,7 @@ import { insertTableOfContentsAtSelection } from '@extensions/table-of-contents/
  * @property {string} [aiEndpoint] - Endpoint for AI integration
  * @property {Array<Record<string, unknown>> | ToolbarItem[]} [customButtons=[]] - Custom buttons to add to the toolbar. SuperDoc forwards the structural `Array<Record<string, unknown>>` shape from `Modules.toolbar.customButtons`; the runtime wraps each entry into a full `ToolbarItem` via `useToolbarItem`.
  * @property {boolean} [showFormattingMarksButton=false] - Show the formatting marks (pilcrow) button in the toolbar. Distinct from `layoutEngineOptions.showFormattingMarks`, which controls whether the marks render in the document.
+ * @property {boolean} [showTableOfContentsButton=false] - Show the table of contents insert button in the toolbar. Off by default until the feature is generally available.
  * @property {boolean} [isDev] - Dev-mode flag forwarded from `SuperDoc.isDev`; gates debug tooltips and overlays.
  * @property {object} [superdoc] - The owning SuperDoc instance. Set by SuperDoc when constructing the toolbar; the toolbar uses it to dispatch commands back through the parent.
  * @property {boolean} [responsiveToContainer=false] - When `true`, the toolbar measures the container width instead of the document width when deciding which items to collapse.
@@ -169,6 +170,7 @@ export class SuperToolbar extends EventEmitter {
     aiEndpoint: null,
     customButtons: [],
     showFormattingMarksButton: false,
+    showTableOfContentsButton: false,
   };
 
   /**

packages/superdoc/src/core/types/index.ts

@@ -1227,6 +1227,10 @@ export interface Modules {
      * controls whether the marks render in the document.
      */
     showFormattingMarksButton?: boolean;
+    /**
+     * Show the table of contents insert button in the toolbar. Off by default.
+     */
+    showTableOfContentsButton?: boolean;
   } & Record<string, unknown>;
   /** Link click popover configuration. */
   links?: {