> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/components/conditional-format-editor-1.md).

# Insert Link Editor

<figure><img src="/files/y0qJnzxGEekNkLMLqDti" alt=""><figcaption><p>Insert Link editor</p></figcaption></figure>

## Inserting Links

{% code overflow="wrap" %}

```tsx
import { CanvasGrid, SpreadsheetProvider } from "@rowsncolumns/spreadsheet"
import { useSpreadsheet, InsertLinkDialog, InsertLinkEditor } from "@rowsncolumns/spreadsheet-state"

const Spreadsheet = () => {
  const {
    activeSheetId,
    activeCell,
    selections,
    onInsertLink,
    onRequestInsertLink
  } = useSpreadsheetState({})

  return (
    <>
      <button onClick={() => onRequestInsertLink()}>Insert link</button>
      <InsertLinkDialog>
        <InsertLinkEditor
          sheetId={activeSheetId}
          activeCell={activeCell}
          selections={selections}
          onInsertLink={onInsertLink}
        />
      </InsertLinkDialog>
    </>
  )
}

const App = () => (
  <SpreadsheetProvider>
    <Spreadsheet />
  </SpreadsheetProvider>
)
```

{% endcode %}

## Removing Links

Use the `onRemoveLink` callback to remove hyperlinks from cells:

```tsx
import { CanvasGrid, SpreadsheetProvider } from "@rowsncolumns/spreadsheet"
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state"

const Spreadsheet = () => {
  const {
    activeSheetId,
    activeCell,
    selections,
    onInsertLink,
    onRemoveLink,
    onRequestInsertLink
  } = useSpreadsheetState({})

  const handleRemoveLink = () => {
    onRemoveLink?.(activeSheetId, activeCell, selections);
  };

  return (
    <>
      <button onClick={() => onRequestInsertLink()}>Insert Link</button>
      <button onClick={handleRemoveLink}>Remove Link</button>

      <CanvasGrid
        sheetId={activeSheetId}
        activeCell={activeCell}
        selections={selections}
        onRemoveLink={onRemoveLink}
        // ... other props
      />
    </>
  )
}
```

## Complete Example with Context Menu

```tsx
import React, { useState } from "react";
import {
  SpreadsheetProvider,
  CanvasGrid,
  Sheet,
} from "@rowsncolumns/spreadsheet";
import {
  useSpreadsheetState,
  SheetData,
  CellData,
  InsertLinkDialog,
  InsertLinkEditor,
} from "@rowsncolumns/spreadsheet-state";

function SpreadsheetWithLinks() {
  const [sheets, setSheets] = useState<Sheet[]>([
    { sheetId: 1, rowCount: 100, columnCount: 26, title: "Sheet 1" }
  ]);
  const [sheetData, setSheetData] = useState<SheetData<CellData>>({});

  const {
    activeCell,
    activeSheetId,
    selections,
    getCellData,
    onChangeActiveCell,
    onChangeSelections,
    onInsertLink,
    onRemoveLink,
    onRequestInsertLink,
  } = useSpreadsheetState({
    sheets,
    sheetData,
    onChangeSheets: setSheets,
    onChangeSheetData: setSheetData,
  });

  // Check if active cell has a link
  const cellData = getCellData(
    activeSheetId,
    activeCell.rowIndex,
    activeCell.columnIndex
  );
  const hasLink = !!cellData?.hyperlink;

  return (
    <SpreadsheetProvider>
      <div className="flex flex-col h-screen">
        <div className="p-2 border-b">
          <button
            onClick={() => onRequestInsertLink()}
            className="px-3 py-1 bg-blue-500 text-white rounded mr-2"
          >
            Insert Link
          </button>
          <button
            onClick={() => onRemoveLink?.(activeSheetId, activeCell, selections)}
            disabled={!hasLink}
            className="px-3 py-1 bg-red-500 text-white rounded disabled:opacity-50"
          >
            Remove Link
          </button>
        </div>

        <div className="flex-1">
          <CanvasGrid
            sheetId={activeSheetId}
            activeCell={activeCell}
            selections={selections}
            getCellData={getCellData}
            onChangeActiveCell={onChangeActiveCell}
            onChangeSelections={onChangeSelections}
            onRemoveLink={onRemoveLink}
          />
        </div>

        <InsertLinkDialog>
          <InsertLinkEditor
            sheetId={activeSheetId}
            activeCell={activeCell}
            selections={selections}
            onInsertLink={onInsertLink}
          />
        </InsertLinkDialog>
      </div>
    </SpreadsheetProvider>
  );
}

export default SpreadsheetWithLinks;
```

## Function Signatures

### onInsertLink

```typescript
type OnInsertLink = (
  sheetId: number,
  activeCell: CellInterface,
  selections: SelectionArea<SelectionAttributes>[],
  url: string,
  text?: string
) => void;
```

### onRemoveLink

```typescript
type OnRemoveLink = (
  sheetId: number,
  activeCell: CellInterface,
  selections: SelectionArea<SelectionAttributes>[]
) => void;
```

## Use Cases

### Adding Links to External Resources

```tsx
// Link to documentation
onInsertLink(sheetId, activeCell, selections, "https://docs.example.com", "Docs");

// Link to related file
onInsertLink(sheetId, activeCell, selections, "/files/report.pdf", "View Report");
```

### Batch Link Removal

Remove links from multiple cells:

```tsx
const removeBatchLinks = () => {
  // Remove links from all selected cells
  selections.forEach((selection) => {
    onRemoveLink?.(activeSheetId, activeCell, [selection]);
  });
};
```

## Best Practices

1. **Validate URLs**: Ensure URLs are properly formatted before insertion
2. **Provide Feedback**: Show visual indicators for cells with links
3. **Handle Errors**: Gracefully handle invalid or broken links
4. **Keyboard Shortcuts**: Support Ctrl/Cmd+K for inserting links
5. **Context Menu**: Add link operations to the cell context menu


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.rowsncolumns.app/configuration/components/conditional-format-editor-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.