feat: add custom-shortcut playground

content/en-US/guides/sheets/features/core/range-selection.mdx

@@ -71,6 +71,8 @@ console.log(fRange.getValue()); // The value of the top-left cell in the range
 console.log(fRange.getRawValue()); // The raw value of the top-left cell in the range
 console.log(fRange.getDisplayValue()); // The displayed value of the top-left cell in the range
 console.log(fRange.getCellData()); // The cell data of the top-left cell in the range
+console.log(fRange.getRichTextValue()); // The rich text value of the top-left cell in the range
+console.log(fRange.getRichTextValue().toPlainText()); // The plain text of the rich text value of the top-left cell in the range
 ```
 
 Get all cell values in the range
@@ -84,6 +86,7 @@ console.log(fRange.getValues()); // The values of all cells in the range
 console.log(fRange.getRawValues()); // The raw values of all cells in the range
 console.log(fRange.getDisplayValues()); // The displayed values of all cells in the range
 console.log(fRange.getCellDatas()); // The cell data of all cells in the range
+console.log(fRange.getRichTextValues()); // The rich text values of all cells in the range
 ```
 
 Get all formulas in the range

content/en-US/guides/sheets/features/import-export.mdx

@@ -71,8 +71,9 @@ UniverSheetsAdvancedPreset({
      * 2. Excel does not show formula results unless editing is enabled
      * 3. Array formulas with the @ prefix cannot expand calculation results
      * Note: The server configuration file needs to set `SSC_SERVER_ENABLED=true`.
+     * @version 0.8.3+
      */
-    enableServerSideComputing?: boolean; 
+    enableServerSideComputing?: boolean;
   };
 })
 ```
@@ -141,6 +142,7 @@ univer.registerPlugin(UniverExchangeClientPlugin, {
      * 2. Excel does not show formula results unless editing is enabled
      * 3. Array formulas with the @ prefix cannot expand calculation results
      * Note: The server configuration file needs to set `SSC_SERVER_ENABLED=true`.
+     * @version 0.8.3+
      */
     enableServerSideComputing?: boolean;
   };

content/en-US/playground/sheets/_meta.ts

@@ -47,6 +47,12 @@ export default {
       layout: 'full',
     },
   },
+  'custom-shortcut': {
+    title: 'Custom Shortcut',
+    theme: {
+      layout: 'full',
+    },
+  },
   'uniscript': {
     title: 'Uniscript',
     theme: {

content/en-US/playground/sheets/custom-shortcut.mdx

@@ -0,0 +1,11 @@
+# Custom Shortcut
+
+import Showcase from '@/showcase/sheets/custom-shortcut'
+
+This example adds a custom shortcut with a high priority to override the default shortcut.
+
+Delete (Windows) / Backspace (Mac) example: When the selection is cell C3, clear the entire row; otherwise, clear the selected content.
+
+- [View source](https://github.com/dream-num/univer-documentation/blob/dev/showcase/sheets/custom-shortcut/entry.tsx)
+
+<Showcase lang="en-US" toolbar={{ showCode: true }} />

content/zh-CN/guides/sheets/features/core/range-selection.mdx

@@ -71,6 +71,8 @@ console.log(fRange.getValue()); // 范围左上角单元格值
 console.log(fRange.getRawValue()); // 范围左上角单元格原始值
 console.log(fRange.getDisplayValue()); // 范围左上角单元格显示值
 console.log(fRange.getCellData()); // 范围左上角单元格 ICellData 对象
+console.log(fRange.getRichTextValue()); // 范围左上角单元格富文本值
+console.log(fRange.getRichTextValue().toPlainText()); // 范围左上角单元格富文本值的纯文本
 ```
 
 获取范围的所有值
@@ -84,6 +86,7 @@ console.log(fRange.getValues()); // 范围所有单元格值
 console.log(fRange.getRawValues()); // 范围所有单元格原始值
 console.log(fRange.getDisplayValues()); // 范围所有单元格显示值
 console.log(fRange.getCellDatas()); // 范围所有单元格 ICellData 对象
+console.log(fRange.getRichTextValues()); // 范围所有单元格富文本值
 ```
 
 获取范围的所有公式

content/zh-CN/guides/sheets/features/import-export.mdx

@@ -71,8 +71,9 @@ UniverSheetsAdvancedPreset({
      * 2. EXCEL 不启用编辑，无法看到公式计算结果
      * 3. 数组公式存在前缀@，导致无法展开计算结果
      * 注意，服务端配置文件需要配置 SSC_SERVER_ENABLED=true。
+     * @version 0.8.3+
      */
-    enableServerSideComputing?: boolean; 
+    enableServerSideComputing?: boolean;
   };
 })
 ```
@@ -141,6 +142,7 @@ univer.registerPlugin(UniverExchangeClientPlugin, {
      * 2. EXCEL 不启用编辑，无法看到公式计算结果
      * 3. 数组公式存在前缀@，导致无法展开计算结果
      * 注意，服务端配置文件需要配置 SSC_SERVER_ENABLED=true。
+     * @version 0.8.3+
      */
     enableServerSideComputing?: boolean; 
   };

content/zh-CN/playground/sheets/_meta.ts

@@ -47,6 +47,12 @@ export default {
       layout: 'full',
     },
   },
+  'custom-shortcut': {
+    title: '自定义快捷键',
+    theme: {
+      layout: 'full',
+    },
+  },
   'uniscript': {
     title: 'Uniscript',
     theme: {

content/zh-CN/playground/sheets/custom-shortcut.mdx

@@ -0,0 +1,11 @@
+# 自定义快捷键
+
+import Showcase from '@/showcase/sheets/custom-shortcut'
+
+此示例添加了一个自定义快捷方式，设置了高优先级从而覆盖了默认的快捷方式。
+
+Delete (Windows) / Backspace (Mac) 键示例：当选区为 C3 单元格时，清除整行内容，否则清除选区内容。
+
+- [查看源码](https://github.com/dream-num/univer-documentation/blob/dev/showcase/sheets/custom-shortcut/entry.tsx)
+
+<Showcase lang="zh-CN" toolbar={{ showCode: true }} />

showcase/sheets/custom-shortcut/entry.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets'
+import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'
+import sheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US'
+import sheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN'
+import { useTheme } from 'nextra-theme-docs'
+import { useEffect, useRef } from 'react'
+import { Preview } from '@/components/preview'
+import { useCodeHighlight } from '@/hooks/use-code'
+import { UniverSheetsCustomShortcutPlugin } from './plugin'
+
+const code = `
+import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets'
+
+import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'
+import sheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US'
+import '@univerjs/presets/lib/styles/preset-sheets-core.css'
+
+import { UniverSheetsCustomShortcutPlugin } from './plugin'
+
+const { univerAPI } = createUniver({
+  locale: LocaleType.EN_US,
+  locales: {
+    [LocaleType.EN_US]: merge(
+      {},
+      sheetsCoreEnUS,
+    ),
+  },
+  theme: defaultTheme,
+  presets: [
+    UniverSheetsCorePreset(),
+  ],
+  plugins: [
+    UniverSheetsCustomShortcutPlugin,
+  ],
+})
+
+univerAPI.createWorkbook({})
+`
+
+interface IDemoProps {
+  lang: 'zh-CN' | 'en-US'
+}
+
+const localesMap = {
+  'zh-CN': {
+    name: 'ZH_CN',
+    locale: LocaleType.ZH_CN,
+    locales: merge({}, sheetsCoreZhCN),
+  },
+  'en-US': {
+    name: 'EN_US',
+    locale: LocaleType.EN_US,
+    locales: merge({}, sheetsCoreEnUS),
+  },
+}
+
+export default function Demo(props: IDemoProps) {
+  const { lang } = props
+
+  const containerRef = useRef<HTMLDivElement>(null!)
+
+  const { theme } = useTheme()
+
+  const { locale, locales } = localesMap[lang]
+
+  useEffect(() => {
+    const { univerAPI } = createUniver({
+      darkMode: theme === 'dark',
+      locale,
+      locales: {
+        [locale]: locales,
+      },
+      theme: defaultTheme,
+      presets: [
+        UniverSheetsCorePreset({
+          container: containerRef.current,
+        }),
+      ],
+      plugins: [
+        UniverSheetsCustomShortcutPlugin,
+      ],
+    })
+
+    univerAPI.createWorkbook({})
+
+    return () => {
+      univerAPI.dispose()
+    }
+  }, [])
+
+  const codeWithHighlight = useCodeHighlight({
+    code,
+    lang,
+  })
+
+  return (
+    <Preview ref={containerRef} code={codeWithHighlight} />
+  )
+}

showcase/sheets/custom-shortcut/index.ts

@@ -0,0 +1,7 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+export default dynamic(() => import('./entry'), {
+  ssr: false,
+})

showcase/sheets/custom-shortcut/plugin/commands/commands/custom.command.ts

@@ -0,0 +1,57 @@
+import type { IAccessor, ICommand } from '@univerjs/presets'
+import { CommandType, ICommandService, IUniverInstanceService } from '@univerjs/presets'
+import { ClearSelectionContentCommand, getSheetCommandTarget, SheetsSelectionsService } from '@univerjs/presets/preset-sheets-core'
+
+/**
+ * The command to clear content in current selected ranges.
+ */
+export const CustomClearSelectionContentCommand: ICommand = {
+  id: 'sheet.command.custom-clear-selection-content',
+
+  type: CommandType.COMMAND,
+
+  handler: (accessor: IAccessor) => {
+    const target = getSheetCommandTarget(accessor.get(IUniverInstanceService))
+    if (!target) return false
+
+    const { unitId, subUnitId, worksheet } = target
+
+    const selectionManagerService = accessor.get(SheetsSelectionsService)
+    const range = selectionManagerService.getCurrentLastSelection()?.range
+    if (!range) return false
+
+    const commandService = accessor.get(ICommandService)
+    const { startRow, endRow, startColumn, endColumn } = range
+    const isSingleCell = startRow === endRow && startColumn === endColumn
+
+    if (isSingleCell && startRow === 2 && startColumn === 2) {
+      // If the range is cell C3, clear the entire row.
+      return commandService.executeCommand(ClearSelectionContentCommand.id, {
+        unitId,
+        subUnitId,
+        ranges: [
+          {
+            startRow,
+            endRow,
+            startColumn: 0,
+            endColumn: worksheet.getMaxColumns() - 1,
+          },
+        ],
+      })
+    } else {
+      // Clear the selected range.
+      return commandService.executeCommand(ClearSelectionContentCommand.id, {
+        unitId,
+        subUnitId,
+        ranges: [
+          {
+            startRow,
+            endRow,
+            startColumn,
+            endColumn,
+          },
+        ],
+      })
+    }
+  },
+}

showcase/sheets/custom-shortcut/plugin/controllers/shortcuts/custom.shortcut.ts

@@ -0,0 +1,13 @@
+import type { IShortcutItem } from '@univerjs/presets/preset-sheets-core'
+import { KeyCode, whenSheetEditorFocused } from '@univerjs/presets/preset-sheets-core'
+import { CustomClearSelectionContentCommand } from '../../commands/commands/custom.command'
+
+export const CustomClearSelectionValueShortcutItem: IShortcutItem = {
+  id: CustomClearSelectionContentCommand.id,
+  // high priority to ensure it is checked first
+  priority: 9999,
+  // when focusing on any other input tag do not trigger this shortcut
+  preconditions: whenSheetEditorFocused,
+  binding: KeyCode.DELETE,
+  mac: KeyCode.BACKSPACE,
+}

showcase/sheets/custom-shortcut/plugin/index.ts

@@ -0,0 +1 @@
+export { UniverSheetsCustomShortcutPlugin } from './plugin'

showcase/sheets/custom-shortcut/plugin/plugin.ts

@@ -0,0 +1,34 @@
+import { ICommandService, Inject, Injector, Plugin, UniverInstanceType } from '@univerjs/presets'
+import { IShortcutService } from '@univerjs/presets/preset-sheets-core'
+import { CustomClearSelectionContentCommand } from './commands/commands/custom.command'
+import { CustomClearSelectionValueShortcutItem } from './controllers/shortcuts/custom.shortcut'
+
+const SHEET_CUSTOM_SHORTCUT_PLUGIN = 'SHEET_CUSTOM_SHORTCUT_PLUGIN'
+
+export class UniverSheetsCustomShortcutPlugin extends Plugin {
+  static override type = UniverInstanceType.UNIVER_SHEET
+  static override pluginName = SHEET_CUSTOM_SHORTCUT_PLUGIN
+
+  constructor(
+    @Inject(Injector) protected readonly _injector: Injector,
+    @ICommandService private readonly _commandService: ICommandService,
+    @IShortcutService private readonly _shortcutService: IShortcutService,
+  ) {
+    super()
+
+    this._initCommands()
+    this._initShortcuts()
+  }
+
+  private _initCommands() {
+    [
+      CustomClearSelectionContentCommand,
+    ].forEach(command => this.disposeWithMe(this._commandService.registerCommand(command)))
+  }
+
+  private _initShortcuts() {
+    [
+      CustomClearSelectionValueShortcutItem,
+    ].forEach(item => this.disposeWithMe(this._shortcutService.registerShortcut(item)))
+  }
+}