HyperLink

import './style.css';

import { LocaleType, Univer, UniverInstanceType } from '@univerjs/core';
import { defaultTheme } from '@univerjs/design';
import { UniverDocsPlugin } from '@univerjs/docs';
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
import { UniverSheetsPlugin } from '@univerjs/sheets';
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
import { UniverUIPlugin } from '@univerjs/ui';
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui';
import { FUniver } from '@univerjs/facade';

import './style.css'
import { zhCN, enUS } from 'univer:locales';

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.ZH_CN]: zhCN,
    [LocaleType.EN_US]: enUS,
  },
});

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  disableAutoFocus: true,
});

univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverDocsUIPlugin);

univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsNumfmtPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin);

// create univer sheet instance
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {
  id: 'gyI0JO',
  sheetOrder: ['RSfWjJFv4opmE1JaiRj80'],
  name: '',
  appVersion: '0.1.11',
  locale: 'zhCN',
  styles: {},
  sheets: {
    RSfWjJFv4opmE1JaiRj80: {
      name: 'Worksheet1',
      id: 'RSfWjJFv4opmE1JaiRj80',
      tabColor: '',
      hidden: 0,
      rowCount: 1000,
      columnCount: 20,
      zoomRatio: 1,
      freeze: {
        xSplit: 0,
        ySplit: 0,
        startRow: -1,
        startColumn: -1,
      },
      scrollTop: 0,
      scrollLeft: 0,
      defaultColumnWidth: 88,
      defaultRowHeight: 24,
      mergeData: [],
      cellData: {
        '0': {
          '0': {
            p: {
              id: '__INTERNAL_EDITOR__DOCS_NORMAL',
              documentStyle: {
                pageSize: {
                  width: 270.44940185546875,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream:
                  '\u001fhttps://univer-preview.vercel.app/sheets/\u001e\r12323\r\u001fA100\u001e\r\n',
                textRuns: [],
                paragraphs: [
                  {
                    startIndex: 43,
                    paragraphStyle: {
                      horizontalAlign: 0,
                    },
                  },
                  {
                    startIndex: 49,
                    paragraphStyle: {
                      horizontalAlign: 0,
                    },
                  },
                  {
                    startIndex: 93,
                    paragraphStyle: {
                      horizontalAlign: 0,
                    },
                  },
                ],
                sectionBreaks: [
                  {
                    startIndex: 94,
                  },
                ],
                customRanges: [
                  {
                    startIndex: 0,
                    endIndex: 42,
                    rangeId: 'tnxxGNtWAuHrpz4fBGAYh',
                    rangeType: 0,
                    properties: {
                      url: 'https://univer-preview.vercel.app/sheets/',
                    },
                  },
                  {
                    startIndex: 50,
                    endIndex: 54,
                    rangeId: 'j4NsUHxjolNihMoYdZ-oj',
                    rangeType: 0,
                    properties: {
                      url: '#gid=RSfWjJFv4opmE1JaiRj80&range=A100',
                    },
                  },
                ],
                customDecorations: [],
              },
              drawings: {},
              drawingsOrder: [],
              settings: {
                zoomRatio: 1,
              },
            },
          },
          '5': {
            p: {
              id: 'd',
              documentStyle: {
                pageSize: {
                  width: 111.55900573730469,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream: '\u001fhttps://univer.ai/\u001e\r\n',
                customRanges: [
                  {
                    startIndex: 0,
                    endIndex: 19,
                    rangeId: 'QY6zbQrxGw8IaLGXDgVVj',
                    rangeType: 0,
                    properties: {
                      url: 'https://univer.ai/',
                    },
                  },
                ],
              },
              drawings: {},
              drawingsOrder: [],
            },
          },
        },
        '1': {
          '1': {
            p: {
              id: 'd',
              documentStyle: {
                pageSize: {
                  width: 63.48457336425781,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream: '\u001fA1:C10\u001e\r\n',
                customRanges: [
                  {
                    rangeId: '-iBTs-HYMzJzRu-mJkena',
                    rangeType: 0,
                    startIndex: 0,
                    endIndex: 7,
                    properties: {
                      url: '#gid=RSfWjJFv4opmE1JaiRj80&range=A1:C10',
                    },
                  },
                ],
                customDecorations: [],
              },
              drawings: {},
              drawingsOrder: [],
            },
          },
        },
        '7': {
          '0': {
            p: {
              id: 'd',
              documentStyle: {
                pageSize: {
                  width: 63.48457336425781,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream: '\u001fworksheet2\u001e\r\n',
                customRanges: [
                  {
                    rangeId: '-iBTs-HYMzJzRu-mJkena',
                    rangeType: 0,
                    startIndex: 0,
                    endIndex: 11,
                    properties: {
                      url: '#gid=test',
                    },
                  },
                ],
                customDecorations: [],
              },
              drawings: {},
              drawingsOrder: [],
            },
          },
          '1': {
            p: {
              id: 'd',
              documentStyle: {
                pageSize: {
                  width: 63.48457336425781,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream: '\u001fworksheet2-A100\u001e\r\n',
                customRanges: [
                  {
                    rangeId: '-iBTs-HYMzJzRu-mJkena',
                    rangeType: 0,
                    startIndex: 0,
                    endIndex: 16,
                    properties: {
                      url: '#gid=test&range=A100',
                    },
                  },
                ],
                customDecorations: [],
              },
              drawings: {},
              drawingsOrder: [],
            },
          },
          '3': {
            p: {
              id: 'd',
              documentStyle: {
                pageSize: {
                  width: 63.48457336425781,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream: '\u001funiver.ai\u001e\r\n',
                customRanges: [
                  {
                    rangeId: '-iBTs-HYMzJzRu-mJkena',
                    rangeType: 0,
                    startIndex: 0,
                    endIndex: 10,
                    properties: {
                      url: 'https://univer.ai/',
                    },
                  },
                ],
                customDecorations: [],
              },
              drawings: {},
              drawingsOrder: [],
            },
          },
        },
        '99': {
          '0': {
            p: {
              id: 'd',
              documentStyle: {
                pageSize: {
                  width: 63.48457336425781,
                  height: null,
                },
                marginTop: 0,
                marginBottom: 1,
                marginRight: 2,
                marginLeft: 2,
                renderConfig: {
                  horizontalAlign: 0,
                  verticalAlign: 0,
                  centerAngle: 0,
                  vertexAngle: 0,
                  wrapStrategy: 0,
                },
              },
              body: {
                dataStream: '\u001fA1:C10\u001e\r\n',
                customRanges: [
                  {
                    rangeId: '-iBTs-HYMzJzRu-mJkena',
                    rangeType: 0,
                    startIndex: 0,
                    endIndex: 7,
                    properties: {
                      url: '#gid=RSfWjJFv4opmE1JaiRj80&range=A1:C10',
                    },
                  },
                ],
                customDecorations: [],
              },
              drawings: {},
              drawingsOrder: [],
            },
          },
        },
      },
      rowData: {
        '0': {
          hd: 0,
          h: 24,
          ah: 49,
        },
      },
      columnData: {
        '0': {
          w: 111.109375,
          hd: 0,
        },
      },
      showGridlines: 1,
      rowHeader: {
        width: 46,
        hidden: 0,
      },
      columnHeader: {
        height: 20,
        hidden: 0,
      },
      rightToLeft: 0,
    },
    test: {
      name: 'Worksheet2',
      id: 'test',
      tabColor: '',
      hidden: 0,
      rowCount: 1000,
      columnCount: 20,
      zoomRatio: 1,
      freeze: {
        xSplit: 0,
        ySplit: 0,
        startRow: -1,
        startColumn: -1,
      },
      scrollTop: 0,
      scrollLeft: 0,
      defaultColumnWidth: 88,
      defaultRowHeight: 24,
      mergeData: [],
      cellData: {
        '0': {
          '0': {
            v: 'This is worksheet2',
          },
        },
      },
      rowData: {
        '0': {
          hd: 0,
          h: 24,
          ah: 49,
        },
      },
      columnData: {
        '0': {
          w: 111.109375,
          hd: 0,
        },
      },
      showGridlines: 1,
      rowHeader: {
        width: 46,
        hidden: 0,
      },
      columnHeader: {
        height: 20,
        hidden: 0,
      },
      rightToLeft: 0,
    },
  },
  resources: [
    {
      name: 'SHEET_DEFINED_NAME_PLUGIN',
      data: '',
    },
  ],
});

The hyperlink feature allows jumping to worksheets and cells, supporting adding, updating, parsing, and removing links.
Supports inserting hyperlinks within rich text.
Hyperlinks support sub-sheets, ranges/cells, defined names, and standard links (http, mailto, etc.).

Installation

pnpm add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-ui

Import

import '@univerjs/sheets-hyper-link-ui/lib/index.css';
 
import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link';
import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui';

Internationalization

import { LocaleType, Tools } from '@univerjs/core';
import SheetsHyperLinkUIEnUS from '@univerjs/sheets-hyper-link-ui/locale/en-US';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      SheetsHyperLinkUIEnUS
    ),
  },
});

Register

univer.registerPlugin(UniverSheetsHyperLinkPlugin);
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin);

Number Format Facade API