@dxos/react-ui-grid 0.6.14-main.f49f251 → 0.6.14-staging.e15392e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +5 -7
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/CellEditor/CellEditor.d.ts +4 -2
- package/dist/types/src/CellEditor/CellEditor.d.ts.map +1 -1
- package/dist/types/src/CellEditor/GridCellEditor.d.ts +1 -1
- package/dist/types/src/CellEditor/GridCellEditor.d.ts.map +1 -1
- package/package.json +11 -11
- package/src/CellEditor/CellEditor.tsx +4 -6
- package/src/CellEditor/GridCellEditor.tsx +6 -3
|
@@ -209,11 +209,9 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
209
209
|
extensions: [
|
|
210
210
|
extension ?? [],
|
|
211
211
|
preventNewline,
|
|
212
|
-
EditorView.focusChangeEffect.of((
|
|
212
|
+
EditorView.focusChangeEffect.of((state, focusing) => {
|
|
213
213
|
if (!focusing) {
|
|
214
|
-
onBlur?.(
|
|
215
|
-
type: "blur"
|
|
216
|
-
});
|
|
214
|
+
onBlur?.(state.doc.toString());
|
|
217
215
|
}
|
|
218
216
|
return null;
|
|
219
217
|
}),
|
|
@@ -252,14 +250,14 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
|
|
|
252
250
|
|
|
253
251
|
// packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx
|
|
254
252
|
import React3 from "react";
|
|
255
|
-
var GridCellEditor = ({ extension, getCellContent, __gridScope }) => {
|
|
256
|
-
const { id, editing,
|
|
253
|
+
var GridCellEditor = ({ extension, getCellContent, onBlur, __gridScope }) => {
|
|
254
|
+
const { id, editing, editBox } = useGridContext("GridSheetCellEditor", __gridScope);
|
|
257
255
|
return editing ? /* @__PURE__ */ React3.createElement(CellEditor, {
|
|
258
256
|
variant: "grid",
|
|
259
257
|
value: editing.initialContent ?? getCellContent(editing.index),
|
|
260
258
|
autoFocus: true,
|
|
261
259
|
box: editBox,
|
|
262
|
-
onBlur
|
|
260
|
+
onBlur,
|
|
263
261
|
extension,
|
|
264
262
|
gridId: id
|
|
265
263
|
}) : null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n forwardRef,\n type PropsWithChildren,\n useCallback,\n useLayoutEffect,\n useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\nimport { useForwardedRef } from '@dxos/react-ui';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n { id: string } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\nconst GridRoot = ({\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n children,\n __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n {children}\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NonNullable<NaturalDxGrid['getCells']>;\n activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const dxGrid = useForwardedRef(forwardedRef);\n\n // Needed instead of `useEffect` to ensure the DxGrid ref is defined.\n useLayoutEffect(() => {\n if (dxGrid.current && props.getCells) {\n dxGrid.current.getCells = props.getCells;\n dxGrid.current.requestUpdate('initialCells');\n }\n }, [props.getCells]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type DOMAttributes, type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n type UseTextEditorProps,\n createBasicExtensions,\n createThemeExtensions,\n preventNewline,\n useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeysProps = {\n onClose: (value: string | undefined, event: EditorKeyEvent) => void;\n onNav?: (value: string | undefined, event: EditorKeyEvent) => void;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extension?: Extension;\n variant?: keyof typeof editorVariants;\n box?: GridEditBox;\n gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> &\n Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;\n\nconst editorVariants = {\n // TODO(thure): remove when legacy is no longer used.\n legacy: {\n root: 'flex w-full',\n editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',\n content: '!px-2 !py-1',\n },\n grid: {\n root: 'absolute z-[1]',\n editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n // This must match cell styling in `dx-grid.pcss`.\n content: '!border !border-transparent !pli-[3px] !plb-0.5',\n },\n};\n\nexport const CellEditor = ({\n value,\n extension,\n autoFocus,\n onBlur,\n variant = 'legacy',\n box,\n gridId,\n}: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extension ?? [],\n preventNewline,\n EditorView.focusChangeEffect.of((_, focusing) => {\n if (!focusing) {\n onBlur?.({ type: 'blur' } as any);\n }\n return null;\n }),\n createBasicExtensions({ lineWrapping: false }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: editorVariants[variant].editor,\n },\n content: {\n className: editorVariants[variant].content,\n },\n },\n }),\n ],\n };\n }, [extension, autoFocus, value, variant, onBlur]);\n\n return (\n <div\n ref={parentRef}\n className={editorVariants[variant].root}\n style={box}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext } from '../Grid';\n\nexport const GridCellEditor = ({\n extension,\n getCellContent,\n __gridScope,\n}: GridScopedProps<Pick<CellEditorProps, 'extension'> & { getCellContent: (index: string) => string | undefined }>) => {\n const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n return editing ? (\n <CellEditor\n variant='grid'\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={() => setEditing(null)}\n extension={extension}\n gridId={id}\n />\n ) : null;\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,OAAO;AAEP,SAASA,uBAAuC;AAChD,SAASC,0BAAsC;AAC/C,SAASC,4BAA4B;AACrC,OAAOC,SAELC,YAEAC,aACAC,iBACAC,gBACK;AAEP,SAAwEC,UAAUC,qBAAqB;AACvG,SAASC,uBAAuB;AAsHhC,SAASC,iBAAiBC,iBAAiBC,aAAaC,0BAA0B;AAlHlF,IAAMC,SAASC,gBAAgB;EAC7BC,SAAS;EACTC,cAAcC;EACdC,OAAOC;EACPC,QAAQ;IACNC,cAAc;IACdC,QAAQ;IACRC,UAAU;EACZ;AACF,CAAA;AAIA,IAAMC,aAAa;EACjBC,kBAAkB;EAClBC,iBAAiB;EACjBC,YAAY;EACZC,WAAW;AACb;AAcA,IAAMC,YAAY;AAElB,IAAM,CAACC,mBAAmBC,eAAAA,IAAmBC,mBAAmBH,WAAW,CAAA,CAAE;AAE7E,IAAM,CAACI,cAAcC,cAAAA,IAAkBJ,kBAAoCD,SAAAA;AAU3E,IAAMM,WAAW,CAAC,EAChBC,IACAC,SAASC,cACTC,gBACAC,iBACAC,UACAC,YAAW,MACoB;AAC/B,QAAM,CAACL,UAAU,MAAMM,UAAAA,IAAcC,qBAAqB;IACxDC,MAAMP;IACNQ,aAAaP;IACbQ,UAAUP;EACZ,CAAA;AACA,QAAM,CAACQ,SAASC,UAAAA,IAAcC,SAAsB1B,UAAAA;AACpD,SACE,sBAAA,cAACS,cAAAA;IACCG;IACAC;IACAM;IACAK;IACAC;IACAE,OAAOT;KAEND,QAAAA;AAGP;AAEAN,SAASiB,cAAcvB;AAOvB,IAAMwB,oBAAoB;AAE1B,IAAMC,cAAcC,2BAA6D,CAACC,OAAOC,iBAAAA;AACvF,QAAM,EAAErB,IAAIC,SAASY,YAAYN,WAAU,IAAKT,eAAemB,mBAAmBG,MAAMd,WAAW;AACnG,QAAMgB,SAASC,gBAAgBF,YAAAA;AAG/BG,kBAAgB,MAAA;AACd,QAAIF,OAAOG,WAAWL,MAAMM,UAAU;AACpCJ,aAAOG,QAAQC,WAAWN,MAAMM;AAChCJ,aAAOG,QAAQE,cAAc,cAAA;IAC/B;EACF,GAAG;IAACP,MAAMM;GAAS;AAEnB,QAAME,aAAaC,YAAY,CAACC,UAAAA;AAC9BjB,eAAWiB,MAAMC,OAAO;AACxBxB,eAAW;MAAEyB,OAAOF,MAAMG;MAAWC,gBAAgBJ,MAAMI;IAAe,CAAA;EAC5E,GAAG,CAAA,CAAE;AAEL,SAAO,sBAAA,cAACzD,QAAAA;IAAQ,GAAG2C;IAAOe,QAAQnC;IAAIoC,MAAMnC,UAAU,SAAS;IAAUf,QAAQ0C;IAAYS,KAAKf;;AACpG,CAAA;AAEAJ,YAAYF,cAAcC;AAEnB,IAAMqB,OAAO;EAClBC,MAAMxC;EACNyC,SAAStB;AACX;;;AC/HA,SAASuB,wBAAwB;AAEjC,SAASC,YAAYC,cAAc;AACnC,OAAOC,
|
|
6
|
-
"names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useLayoutEffect", "useState", "DxGrid", "NaturalDxGrid", "useForwardedRef", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "dxGrid", "useForwardedRef", "useLayoutEffect", "current", "getCells", "requestUpdate", "handleEdit", "useCallback", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "createBasicExtensions", "createThemeExtensions", "preventNewline", "useTextEditor", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "editorVariants", "legacy", "root", "content", "grid", "CellEditor", "extension", "autoFocus", "onBlur", "variant", "box", "gridId", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport '@dxos/lit-grid/dx-grid.pcss';\n\nimport { createComponent, type EventName } from '@lit/react';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n forwardRef,\n type PropsWithChildren,\n useCallback,\n useLayoutEffect,\n useState,\n} from 'react';\n\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\nimport { useForwardedRef } from '@dxos/react-ui';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = { index: DxEditRequest['cellIndex']; initialContent: DxEditRequest['initialContent'] } | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n { id: string } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\nconst GridRoot = ({\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n children,\n __gridScope,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n {children}\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NonNullable<NaturalDxGrid['getCells']>;\n activeRefs?: string;\n};\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const dxGrid = useForwardedRef(forwardedRef);\n\n // Needed instead of `useEffect` to ensure the DxGrid ref is defined.\n useLayoutEffect(() => {\n if (dxGrid.current && props.getCells) {\n dxGrid.current.getCells = props.getCells;\n dxGrid.current.requestUpdate('initialCells');\n }\n }, [props.getCells]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={dxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, useGridContext, createGridScope };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport { colToA1Notation, rowToA1Notation, closestCell, commentedClassName } from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport {\n type UseTextEditorProps,\n createBasicExtensions,\n createThemeExtensions,\n preventNewline,\n useTextEditor,\n} from '@dxos/react-ui-editor';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeysProps = {\n onClose: (value: string | undefined, event: EditorKeyEvent) => void;\n onNav?: (value: string | undefined, event: EditorKeyEvent) => void;\n};\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extension?: Extension;\n variant?: keyof typeof editorVariants;\n box?: GridEditBox;\n gridId?: string;\n} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: (value?: string) => void };\n\nconst editorVariants = {\n // TODO(thure): remove when legacy is no longer used.\n legacy: {\n root: 'flex w-full',\n editor: 'flex w-full [&>.cm-scroller]:scrollbar-none',\n content: '!px-2 !py-1',\n },\n grid: {\n root: 'absolute z-[1]',\n editor: '[&>.cm-scroller]:scrollbar-none tabular-nums',\n // This must match cell styling in `dx-grid.pcss`.\n content: '!border !border-transparent !pli-[3px] !plb-0.5',\n },\n};\n\nexport const CellEditor = ({\n value,\n extension,\n autoFocus,\n onBlur,\n variant = 'legacy',\n box,\n gridId,\n}: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extension ?? [],\n preventNewline,\n EditorView.focusChangeEffect.of((state, focusing) => {\n if (!focusing) {\n onBlur?.(state.doc.toString());\n }\n return null;\n }),\n createBasicExtensions({ lineWrapping: false }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: editorVariants[variant].editor,\n },\n content: {\n className: editorVariants[variant].content,\n },\n },\n }),\n ],\n };\n }, [extension, autoFocus, value, variant, onBlur]);\n\n return (\n <div\n ref={parentRef}\n className={editorVariants[variant].root}\n style={box}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { CellEditor, type CellEditorProps } from './CellEditor';\nimport { type GridScopedProps, useGridContext } from '../Grid';\n\nexport const GridCellEditor = ({\n extension,\n getCellContent,\n onBlur,\n __gridScope,\n}: GridScopedProps<\n Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }\n>) => {\n const { id, editing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);\n\n return editing ? (\n <CellEditor\n variant='grid'\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={onBlur}\n extension={extension}\n gridId={id}\n />\n ) : null;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useLayoutEffect", "useState", "DxGrid", "NaturalDxGrid", "useForwardedRef", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "DxGrid", "createComponent", "tagName", "elementClass", "NaturalDxGrid", "react", "React", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "createContextScope", "GridProvider", "useGridContext", "GridRoot", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "children", "__gridScope", "setEditing", "useControllableState", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "useState", "scope", "displayName", "GRID_CONTENT_NAME", "GridContent", "forwardRef", "props", "forwardedRef", "dxGrid", "useForwardedRef", "useLayoutEffect", "current", "getCells", "requestUpdate", "handleEdit", "useCallback", "event", "cellBox", "index", "cellIndex", "initialContent", "gridId", "mode", "ref", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "createBasicExtensions", "createThemeExtensions", "preventNewline", "useTextEditor", "editorKeys", "onNav", "onClose", "keymap", "of", "key", "run", "editor", "value", "state", "doc", "toString", "completionStatus", "shift", "undefined", "editorVariants", "legacy", "root", "content", "grid", "CellEditor", "extension", "autoFocus", "onBlur", "variant", "box", "gridId", "themeMode", "useThemeContext", "parentRef", "useTextEditor", "initialValue", "selection", "anchor", "length", "extensions", "preventNewline", "EditorView", "focusChangeEffect", "focusing", "createBasicExtensions", "lineWrapping", "createThemeExtensions", "slots", "className", "React", "div", "ref", "style", "React", "GridCellEditor", "extension", "getCellContent", "onBlur", "__gridScope", "id", "editing", "editBox", "useGridContext", "React", "CellEditor", "variant", "value", "initialContent", "index", "autoFocus", "box", "gridId"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":12510,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytes":12510,"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytes":16671,"imports":[{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytes":2833,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"../Grid"}],"format":"esm"},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytes":620,"imports":[{"path":"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"packages/ui/react-ui-grid/src/index.ts":{"bytes":583,"imports":[{"path":"packages/ui/react-ui-grid/src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"packages/ui/react-ui-grid/src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16550},"packages/ui/react-ui-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","Grid","GridCellEditor","GridContent","GridRoot","closestCell","colToA1Notation","commentedClassName","createGridScope","editorKeys","rowToA1Notation","useGridContext"],"entryPoint":"packages/ui/react-ui-grid/src/index.ts","inputs":{"packages/ui/react-ui-grid/src/Grid/Grid.tsx":{"bytesInOutput":2460},"packages/ui/react-ui-grid/src/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/CellEditor.tsx":{"bytesInOutput":4072},"packages/ui/react-ui-grid/src/CellEditor/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-grid/src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":450}},"bytes":7392}}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Extension } from '@codemirror/state';
|
|
2
|
-
import React, { type
|
|
2
|
+
import React, { type KeyboardEvent } from 'react';
|
|
3
3
|
import { type UseTextEditorProps } from '@dxos/react-ui-editor';
|
|
4
4
|
import { type GridEditBox } from '../Grid';
|
|
5
5
|
export type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & {
|
|
@@ -16,7 +16,9 @@ export type CellEditorProps = {
|
|
|
16
16
|
variant?: keyof typeof editorVariants;
|
|
17
17
|
box?: GridEditBox;
|
|
18
18
|
gridId?: string;
|
|
19
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> &
|
|
19
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & {
|
|
20
|
+
onBlur?: (value?: string) => void;
|
|
21
|
+
};
|
|
20
22
|
declare const editorVariants: {
|
|
21
23
|
legacy: {
|
|
22
24
|
root: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAAC;AAElF,QAAA,MAAM,cAAc;;;;;;;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,UAAU,mEAQpB,eAAe,sBAwCjB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type CellEditorProps } from './CellEditor';
|
|
3
3
|
import { type GridScopedProps } from '../Grid';
|
|
4
|
-
export declare const GridCellEditor: ({ extension, getCellContent, __gridScope, }: GridScopedProps<Pick<CellEditorProps, "extension"> & {
|
|
4
|
+
export declare const GridCellEditor: ({ extension, getCellContent, onBlur, __gridScope, }: GridScopedProps<Pick<CellEditorProps, "extension" | "onBlur"> & {
|
|
5
5
|
getCellContent: (index: string) => string | undefined;
|
|
6
6
|
}>) => React.JSX.Element | null;
|
|
7
7
|
//# sourceMappingURL=GridCellEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AAE/D,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AAE/D,eAAO,MAAM,cAAc,wDAKxB,eAAe,CAChB,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IAAE,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;CAAE,CAC1G,6BAcA,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-grid",
|
|
3
|
-
"version": "0.6.14-
|
|
3
|
+
"version": "0.6.14-staging.e15392e",
|
|
4
4
|
"description": "React component which manages a `dx-grid` Lit web component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"@radix-ui/react-context": "^1.0.0",
|
|
30
30
|
"@radix-ui/react-popper": "^1.1.2",
|
|
31
31
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
32
|
-
"@dxos/lit-grid": "0.6.14-
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
32
|
+
"@dxos/lit-grid": "0.6.14-staging.e15392e",
|
|
33
|
+
"@dxos/react-ui-editor": "0.6.14-staging.e15392e",
|
|
34
|
+
"@dxos/util": "0.6.14-staging.e15392e"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~18.2.0",
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
"react": "~18.2.0",
|
|
40
40
|
"react-dom": "~18.2.0",
|
|
41
41
|
"vite": "5.4.7",
|
|
42
|
-
"@dxos/random": "0.6.14-
|
|
43
|
-
"@dxos/react-ui": "0.6.14-
|
|
44
|
-
"@dxos/react-ui-searchlist": "0.6.14-
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
42
|
+
"@dxos/random": "0.6.14-staging.e15392e",
|
|
43
|
+
"@dxos/react-ui": "0.6.14-staging.e15392e",
|
|
44
|
+
"@dxos/react-ui-searchlist": "0.6.14-staging.e15392e",
|
|
45
|
+
"@dxos/storybook-utils": "0.6.14-staging.e15392e",
|
|
46
|
+
"@dxos/react-ui-theme": "0.6.14-staging.e15392e"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "~18.2.0",
|
|
50
50
|
"react-dom": "~18.2.0",
|
|
51
|
-
"@dxos/react-ui": "0.6.14-
|
|
52
|
-
"@dxos/react-ui-theme": "0.6.14-
|
|
51
|
+
"@dxos/react-ui": "0.6.14-staging.e15392e",
|
|
52
|
+
"@dxos/react-ui-theme": "0.6.14-staging.e15392e"
|
|
53
53
|
},
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { completionStatus } from '@codemirror/autocomplete';
|
|
6
6
|
import { type Extension } from '@codemirror/state';
|
|
7
7
|
import { EditorView, keymap } from '@codemirror/view';
|
|
8
|
-
import React, { type
|
|
8
|
+
import React, { type KeyboardEvent } from 'react';
|
|
9
9
|
|
|
10
10
|
import { useThemeContext } from '@dxos/react-ui';
|
|
11
11
|
import {
|
|
@@ -24,7 +24,6 @@ export type EditorKeysProps = {
|
|
|
24
24
|
onClose: (value: string | undefined, event: EditorKeyEvent) => void;
|
|
25
25
|
onNav?: (value: string | undefined, event: EditorKeyEvent) => void;
|
|
26
26
|
};
|
|
27
|
-
|
|
28
27
|
// TODO(Zan): Should each consumer be responsible for defining these?
|
|
29
28
|
export const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {
|
|
30
29
|
return keymap.of([
|
|
@@ -114,8 +113,7 @@ export type CellEditorProps = {
|
|
|
114
113
|
variant?: keyof typeof editorVariants;
|
|
115
114
|
box?: GridEditBox;
|
|
116
115
|
gridId?: string;
|
|
117
|
-
} & Pick<UseTextEditorProps, 'autoFocus'> &
|
|
118
|
-
Pick<DOMAttributes<HTMLInputElement>, 'onBlur' | 'onKeyDown'>;
|
|
116
|
+
} & Pick<UseTextEditorProps, 'autoFocus'> & { onBlur?: (value?: string) => void };
|
|
119
117
|
|
|
120
118
|
const editorVariants = {
|
|
121
119
|
// TODO(thure): remove when legacy is no longer used.
|
|
@@ -150,9 +148,9 @@ export const CellEditor = ({
|
|
|
150
148
|
extensions: [
|
|
151
149
|
extension ?? [],
|
|
152
150
|
preventNewline,
|
|
153
|
-
EditorView.focusChangeEffect.of((
|
|
151
|
+
EditorView.focusChangeEffect.of((state, focusing) => {
|
|
154
152
|
if (!focusing) {
|
|
155
|
-
onBlur?.(
|
|
153
|
+
onBlur?.(state.doc.toString());
|
|
156
154
|
}
|
|
157
155
|
return null;
|
|
158
156
|
}),
|
|
@@ -10,9 +10,12 @@ import { type GridScopedProps, useGridContext } from '../Grid';
|
|
|
10
10
|
export const GridCellEditor = ({
|
|
11
11
|
extension,
|
|
12
12
|
getCellContent,
|
|
13
|
+
onBlur,
|
|
13
14
|
__gridScope,
|
|
14
|
-
}: GridScopedProps<
|
|
15
|
-
|
|
15
|
+
}: GridScopedProps<
|
|
16
|
+
Pick<CellEditorProps, 'extension' | 'onBlur'> & { getCellContent: (index: string) => string | undefined }
|
|
17
|
+
>) => {
|
|
18
|
+
const { id, editing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
|
|
16
19
|
|
|
17
20
|
return editing ? (
|
|
18
21
|
<CellEditor
|
|
@@ -20,7 +23,7 @@ export const GridCellEditor = ({
|
|
|
20
23
|
value={editing.initialContent ?? getCellContent(editing.index)}
|
|
21
24
|
autoFocus
|
|
22
25
|
box={editBox}
|
|
23
|
-
onBlur={
|
|
26
|
+
onBlur={onBlur}
|
|
24
27
|
extension={extension}
|
|
25
28
|
gridId={id}
|
|
26
29
|
/>
|