@excalidraw/common 0.18.0-de715913e → 0.18.0-ec07091

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.
Files changed (61) hide show
  1. package/dist/dev/index.js +67 -6
  2. package/dist/dev/index.js.map +2 -2
  3. package/dist/prod/index.js +3 -3
  4. package/dist/types/common/src/constants.d.ts +20 -4
  5. package/dist/types/common/src/utils.d.ts +3 -0
  6. package/dist/types/element/src/bounds.d.ts +1 -1
  7. package/dist/types/element/src/delta.d.ts +2 -2
  8. package/dist/types/element/src/index.d.ts +1 -0
  9. package/dist/types/element/src/positionElementsOnGrid.d.ts +2 -0
  10. package/dist/types/element/src/renderElement.d.ts +4 -1
  11. package/dist/types/element/src/store.d.ts +3 -2
  12. package/dist/types/element/src/textElement.d.ts +1 -1
  13. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +6 -3
  14. package/dist/types/excalidraw/actions/actionBoundText.d.ts +4 -2
  15. package/dist/types/excalidraw/actions/actionCanvas.d.ts +29 -15
  16. package/dist/types/excalidraw/actions/actionClipboard.d.ts +12 -6
  17. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +2 -1
  18. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +6 -3
  19. package/dist/types/excalidraw/actions/actionElementLink.d.ts +2 -1
  20. package/dist/types/excalidraw/actions/actionElementLock.d.ts +4 -2
  21. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +2 -1
  22. package/dist/types/excalidraw/actions/actionExport.d.ts +18 -9
  23. package/dist/types/excalidraw/actions/actionFinalize.d.ts +4 -2
  24. package/dist/types/excalidraw/actions/actionFrame.d.ts +8 -4
  25. package/dist/types/excalidraw/actions/actionGroup.d.ts +4 -2
  26. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +3 -2
  27. package/dist/types/excalidraw/actions/actionLink.d.ts +2 -1
  28. package/dist/types/excalidraw/actions/actionMenu.d.ts +6 -3
  29. package/dist/types/excalidraw/actions/actionNavigate.d.ts +4 -2
  30. package/dist/types/excalidraw/actions/actionProperties.d.ts +48 -24
  31. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +2 -1
  32. package/dist/types/excalidraw/actions/actionStyles.d.ts +2 -1
  33. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +2 -1
  34. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +2 -1
  35. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +2 -1
  36. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +2 -1
  37. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +2 -1
  38. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +2 -1
  39. package/dist/types/excalidraw/actions/index.d.ts +1 -1
  40. package/dist/types/excalidraw/actions/types.d.ts +1 -1
  41. package/dist/types/excalidraw/appState.d.ts +1 -0
  42. package/dist/types/excalidraw/clipboard.d.ts +64 -1
  43. package/dist/types/excalidraw/components/Actions.d.ts +8 -1
  44. package/dist/types/excalidraw/components/App.d.ts +10 -8
  45. package/dist/types/excalidraw/components/ColorPicker/ColorPicker.d.ts +2 -1
  46. package/dist/types/excalidraw/components/CommandPalette/CommandPalette.d.ts +1 -0
  47. package/dist/types/excalidraw/components/FontPicker/FontPicker.d.ts +2 -1
  48. package/dist/types/excalidraw/components/FontPicker/FontPickerTrigger.d.ts +2 -1
  49. package/dist/types/excalidraw/components/InlineIcon.d.ts +3 -1
  50. package/dist/types/excalidraw/components/LibraryMenuSection.d.ts +1 -1
  51. package/dist/types/excalidraw/components/PropertiesPopover.d.ts +1 -0
  52. package/dist/types/excalidraw/components/TextField.d.ts +1 -0
  53. package/dist/types/excalidraw/components/icons.d.ts +6 -0
  54. package/dist/types/excalidraw/components/shapes.d.ts +129 -1
  55. package/dist/types/excalidraw/data/blob.d.ts +3 -7
  56. package/dist/types/excalidraw/data/types.d.ts +4 -1
  57. package/dist/types/excalidraw/hooks/useLibraryItemSvg.d.ts +1 -1
  58. package/dist/types/excalidraw/hooks/useTextEditorFocus.d.ts +14 -0
  59. package/dist/types/excalidraw/types.d.ts +5 -1
  60. package/dist/types/math/src/segment.d.ts +1 -0
  61. package/package.json +1 -1
@@ -85,7 +85,7 @@ export declare const actionToggleSearchMenu: {
85
85
  value: import("../types").NormalizedZoomValue;
86
86
  }>;
87
87
  openMenu: "canvas" | "shape" | null;
88
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
88
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
89
89
  defaultSidebarDockedPreference: boolean;
90
90
  lastPointerDownWith: import("../../element/src/types").PointerType;
91
91
  selectedElementIds: Readonly<{
@@ -171,6 +171,7 @@ export declare const actionToggleSearchMenu: {
171
171
  lockedMultiSelections: {
172
172
  [groupId: string]: true;
173
173
  };
174
+ stylesPanelMode: "compact" | "full";
174
175
  };
175
176
  captureUpdate: "EVENTUALLY";
176
177
  };
@@ -81,7 +81,7 @@ export declare const actionToggleStats: {
81
81
  value: import("../types").NormalizedZoomValue;
82
82
  }>;
83
83
  openMenu: "canvas" | "shape" | null;
84
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
84
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
85
85
  openSidebar: {
86
86
  name: string;
87
87
  tab?: string | undefined;
@@ -178,6 +178,7 @@ export declare const actionToggleStats: {
178
178
  lockedMultiSelections: {
179
179
  [groupId: string]: true;
180
180
  };
181
+ stylesPanelMode: "compact" | "full";
181
182
  };
182
183
  captureUpdate: "EVENTUALLY";
183
184
  };
@@ -78,7 +78,7 @@ export declare const actionToggleViewMode: {
78
78
  value: import("../types").NormalizedZoomValue;
79
79
  }>;
80
80
  openMenu: "canvas" | "shape" | null;
81
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
81
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
82
82
  openSidebar: {
83
83
  name: string;
84
84
  tab?: string | undefined;
@@ -178,6 +178,7 @@ export declare const actionToggleViewMode: {
178
178
  lockedMultiSelections: {
179
179
  [groupId: string]: true;
180
180
  };
181
+ stylesPanelMode: "compact" | "full";
181
182
  };
182
183
  captureUpdate: "EVENTUALLY";
183
184
  };
@@ -78,7 +78,7 @@ export declare const actionToggleZenMode: {
78
78
  value: import("../types").NormalizedZoomValue;
79
79
  }>;
80
80
  openMenu: "canvas" | "shape" | null;
81
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
81
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
82
82
  openSidebar: {
83
83
  name: string;
84
84
  tab?: string | undefined;
@@ -178,6 +178,7 @@ export declare const actionToggleZenMode: {
178
178
  lockedMultiSelections: {
179
179
  [groupId: string]: true;
180
180
  };
181
+ stylesPanelMode: "compact" | "full";
181
182
  };
182
183
  captureUpdate: "EVENTUALLY";
183
184
  };
@@ -2,7 +2,7 @@ export { actionDeleteSelected } from "./actionDeleteSelected";
2
2
  export { actionBringForward, actionBringToFront, actionSendBackward, actionSendToBack, } from "./actionZindex";
3
3
  export { actionSelectAll } from "./actionSelectAll";
4
4
  export { actionDuplicateSelection } from "./actionDuplicateSelection";
5
- export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, actionChangeVerticalAlign, } from "./actionProperties";
5
+ export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, actionChangeVerticalAlign, actionChangeArrowProperties, } from "./actionProperties";
6
6
  export { actionChangeViewBackgroundColor, actionClearCanvas, actionZoomIn, actionZoomOut, actionResetZoom, actionZoomToFit, actionToggleTheme, } from "./actionCanvas";
7
7
  export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";
8
8
  export { actionFinalize } from "./actionFinalize";
@@ -14,7 +14,7 @@ export type ActionResult = {
14
14
  type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
15
15
  export type UpdaterFn = (res: ActionResult) => void;
16
16
  export type ActionFilterFn = (action: Action) => void;
17
- export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
17
+ export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeArrowProperties" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
18
18
  export type PanelComponentProps = {
19
19
  elements: readonly ExcalidrawElement[];
20
20
  appState: AppState;
@@ -69,6 +69,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
69
69
  lockedMultiSelections?: {
70
70
  [groupId: string]: true;
71
71
  } | undefined;
72
+ stylesPanelMode?: "compact" | "full" | undefined;
72
73
  };
73
74
  export declare const cleanAppStateForExport: (appState: Partial<AppState>) => {
74
75
  viewBackgroundColor?: string | undefined;
@@ -1,5 +1,8 @@
1
1
  import { ALLOWED_PASTE_MIME_TYPES } from "@excalidraw/common";
2
+ import type { ValueOf } from "@excalidraw/common/utility-types";
3
+ import type { IMAGE_MIME_TYPES, STRING_MIME_TYPES } from "@excalidraw/common";
2
4
  import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
5
+ import type { FileSystemHandle } from "./data/filesystem";
3
6
  import type { Spreadsheet } from "./charts";
4
7
  import type { BinaryFiles } from "./types";
5
8
  export type PastedMixedContent = {
@@ -57,10 +60,70 @@ export declare const readSystemClipboard: () => Promise<{
57
60
  "image/avif"?: string | File | undefined;
58
61
  "image/jfif"?: string | File | undefined;
59
62
  }>;
63
+ type AllowedParsedDataTransferItem = {
64
+ type: ValueOf<typeof IMAGE_MIME_TYPES>;
65
+ kind: "file";
66
+ file: File;
67
+ fileHandle: FileSystemHandle | null;
68
+ } | {
69
+ type: ValueOf<typeof STRING_MIME_TYPES>;
70
+ kind: "string";
71
+ value: string;
72
+ };
73
+ type ParsedDataTransferItem = {
74
+ type: string;
75
+ kind: "file";
76
+ file: File;
77
+ fileHandle: FileSystemHandle | null;
78
+ } | {
79
+ type: string;
80
+ kind: "string";
81
+ value: string;
82
+ };
83
+ type ParsedDataTransferItemType<T extends AllowedParsedDataTransferItem["type"]> = AllowedParsedDataTransferItem & {
84
+ type: T;
85
+ };
86
+ export type ParsedDataTransferFile = Extract<AllowedParsedDataTransferItem, {
87
+ kind: "file";
88
+ }>;
89
+ type ParsedDataTranferList = ParsedDataTransferItem[] & {
90
+ /**
91
+ * Only allows filtering by known `string` data types, since `file`
92
+ * types can have multiple items of the same type (e.g. multiple image files)
93
+ * unlike `string` data transfer items.
94
+ */
95
+ findByType: typeof findDataTransferItemType;
96
+ /**
97
+ * Only allows filtering by known `string` data types, since `file`
98
+ * types can have multiple items of the same type (e.g. multiple image files)
99
+ * unlike `string` data transfer items.
100
+ */
101
+ getData: typeof getDataTransferItemData;
102
+ getFiles: typeof getDataTransferFiles;
103
+ };
104
+ declare const findDataTransferItemType: <T extends ValueOf<{
105
+ readonly text: "text/plain";
106
+ readonly html: "text/html";
107
+ readonly json: "application/json";
108
+ readonly excalidraw: "application/vnd.excalidraw+json";
109
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
110
+ readonly excalidrawlibIds: "application/vnd.excalidrawlib.ids+json";
111
+ }>>(this: ParsedDataTranferList, type: T) => ParsedDataTransferItemType<T> | null;
112
+ declare const getDataTransferItemData: <T extends ValueOf<{
113
+ readonly text: "text/plain";
114
+ readonly html: "text/html";
115
+ readonly json: "application/json";
116
+ readonly excalidraw: "application/vnd.excalidraw+json";
117
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
118
+ readonly excalidrawlibIds: "application/vnd.excalidrawlib.ids+json";
119
+ }>>(this: ParsedDataTranferList, type: T) => ParsedDataTransferItemType<ValueOf<typeof STRING_MIME_TYPES>>["value"] | null;
120
+ declare const getDataTransferFiles: (this: ParsedDataTranferList) => ParsedDataTransferFile[];
121
+ export declare const parseDataTransferEvent: (event: ClipboardEvent | DragEvent | React.DragEvent<HTMLDivElement>) => Promise<ParsedDataTranferList>;
60
122
  /**
61
123
  * Attempts to parse clipboard event.
62
124
  */
63
- export declare const parseClipboard: (event: ClipboardEvent, isPlainPaste?: boolean) => Promise<ClipboardData>;
125
+ export declare const parseClipboard: (dataList: ParsedDataTranferList, isPlainPaste?: boolean) => Promise<ClipboardData>;
64
126
  export declare const copyBlobToClipboardAsPng: (blob: Blob | Promise<Blob>) => Promise<void>;
65
127
  export declare const copyTextToSystemClipboard: (text: string | null, clipboardEvent?: ClipboardEvent | null) => Promise<void>;
128
+ export declare const isClipboardEvent: (event: React.SyntheticEvent | Event) => event is ClipboardEvent;
66
129
  export {};
@@ -1,6 +1,6 @@
1
1
  import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
2
2
  import "./Actions.scss";
3
- import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
3
+ import type { AppClassProperties, AppProps, UIAppState, Zoom, AppState } from "../types";
4
4
  import type { ActionManager } from "../actions/manager";
5
5
  export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
6
6
  export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
@@ -10,6 +10,13 @@ export declare const SelectedShapeActions: ({ appState, elementsMap, renderActio
10
10
  renderAction: ActionManager["renderAction"];
11
11
  app: AppClassProperties;
12
12
  }) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const CompactShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
14
+ appState: UIAppState;
15
+ elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
16
+ renderAction: ActionManager["renderAction"];
17
+ app: AppClassProperties;
18
+ setAppState: React.Component<any, AppState>["setState"];
19
+ }) => import("react/jsx-runtime").JSX.Element;
13
20
  export declare const ShapesSwitcher: ({ activeTool, appState, app, UIOptions, }: {
14
21
  activeTool: UIAppState["activeTool"];
15
22
  appState: UIAppState;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { type EXPORT_IMAGE_TYPES, Emitter } from "@excalidraw/common";
3
3
  import { LinearElementEditor, FlowChartCreator, Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
4
- import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, OrderedExcalidrawElement, SceneElementsMap } from "@excalidraw/element/types";
4
+ import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
5
5
  import type { Mutable } from "@excalidraw/common/utility-types";
6
6
  import { ActionManager } from "../actions/manager";
7
7
  import { AnimationFrameHandler } from "../animation-frame-handler";
@@ -153,6 +153,7 @@ declare class App extends React.Component<AppProps, AppState> {
153
153
  x: number;
154
154
  y: number;
155
155
  };
156
+ blockDragging: boolean;
156
157
  };
157
158
  eventListeners: {
158
159
  onMove: {
@@ -222,6 +223,7 @@ declare class App extends React.Component<AppProps, AppState> {
222
223
  x: number;
223
224
  y: number;
224
225
  };
226
+ blockDragging: boolean;
225
227
  };
226
228
  eventListeners: {
227
229
  onMove: {
@@ -243,6 +245,7 @@ declare class App extends React.Component<AppProps, AppState> {
243
245
  }>]>;
244
246
  missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
245
247
  onRemoveEventListenersEmitter: Emitter<[]>;
248
+ defaultSelectionTool: "selection" | "lasso";
246
249
  constructor(props: AppProps);
247
250
  updateEditorAtom: <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
248
251
  private onWindowMessage;
@@ -265,7 +268,7 @@ declare class App extends React.Component<AppProps, AppState> {
265
268
  private toggleOverscrollBehavior;
266
269
  render(): import("react/jsx-runtime").JSX.Element;
267
270
  focusContainer: AppClassProperties["focusContainer"];
268
- getSceneElementsIncludingDeleted: () => readonly OrderedExcalidrawElement[];
271
+ getSceneElementsIncludingDeleted: () => readonly import("@excalidraw/element/types").OrderedExcalidrawElement[];
269
272
  getSceneElementsMapIncludingDeleted: () => Map<string, Ordered<ExcalidrawElement>> & import("@excalidraw/common/utility-types").MakeBrand<"SceneElementsMap">;
270
273
  getSceneElements: () => readonly Ordered<NonDeletedExcalidrawElement>[];
271
274
  onInsertElements: (elements: readonly ExcalidrawElement[]) => void;
@@ -298,6 +301,7 @@ declare class App extends React.Component<AppProps, AppState> {
298
301
  private resetScene;
299
302
  private initializeScene;
300
303
  private isMobileBreakpoint;
304
+ private isTabletBreakpoint;
301
305
  private refreshViewportBreakpoints;
302
306
  private refreshEditorBreakpoints;
303
307
  private clearImageShapeCache;
@@ -316,6 +320,7 @@ declare class App extends React.Component<AppProps, AppState> {
316
320
  private static resetTapTwice;
317
321
  private onTouchStart;
318
322
  private onTouchEnd;
323
+ private insertClipboardContent;
319
324
  pasteFromClipboard: (event: ClipboardEvent) => Promise<void>;
320
325
  addElementsFromPasteOrLibrary: (opts: {
321
326
  elements: readonly ExcalidrawElement[];
@@ -489,7 +494,7 @@ declare class App extends React.Component<AppProps, AppState> {
489
494
  sceneY: number;
490
495
  link: string;
491
496
  }) => NonDeleted<ExcalidrawEmbeddableElement> | undefined;
492
- private createImageElement;
497
+ private newImagePlaceholder;
493
498
  private handleLinearElementOnPointerDown;
494
499
  private getCurrentItemRoundness;
495
500
  private createGenericElementOnPointerDown;
@@ -510,11 +515,7 @@ declare class App extends React.Component<AppProps, AppState> {
510
515
  * and when you don't want to loose those modifications
511
516
  */
512
517
  private getLatestInitializedImageElement;
513
- /**
514
- * inserts image into elements array and rerenders
515
- */
516
- private insertImageElement;
517
- private onImageAction;
518
+ private onImageToolbarButtonClick;
518
519
  private getImageNaturalDimensions;
519
520
  /** updates image cache, refreshing updated elements and/or setting status
520
521
  to error for images that fail during <img> element creation */
@@ -528,6 +529,7 @@ declare class App extends React.Component<AppProps, AppState> {
528
529
  private maybeSuggestBindingAtCursor;
529
530
  private clearSelection;
530
531
  private handleInteractiveCanvasRef;
532
+ private insertImages;
531
533
  private handleAppOnDrop;
532
534
  loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
533
535
  private handleCanvasContextMenu;
@@ -18,6 +18,7 @@ interface ColorPickerProps {
18
18
  palette?: ColorPaletteCustom | null;
19
19
  topPicks?: ColorTuple;
20
20
  updateData: (formData?: any) => void;
21
+ compactMode?: boolean;
21
22
  }
22
- export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
23
+ export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, compactMode, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
23
24
  export {};
@@ -8,6 +8,7 @@ export declare const DEFAULT_CATEGORIES: {
8
8
  editor: string;
9
9
  elements: string;
10
10
  links: string;
11
+ library: string;
11
12
  };
12
13
  type CommandPaletteProps = {
13
14
  customCommandPaletteItems?: CommandPaletteItem[];
@@ -16,6 +16,7 @@ interface FontPickerProps {
16
16
  onHover: (fontFamily: FontFamilyValues) => void;
17
17
  onLeave: () => void;
18
18
  onPopupChange: (open: boolean) => void;
19
+ compactMode?: boolean;
19
20
  }
20
- export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
21
+ export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
21
22
  export {};
@@ -1,6 +1,7 @@
1
1
  import type { FontFamilyValues } from "@excalidraw/element/types";
2
2
  interface FontPickerTriggerProps {
3
3
  selectedFontFamily: FontFamilyValues | null;
4
+ isOpened?: boolean;
4
5
  }
5
- export declare const FontPickerTrigger: ({ selectedFontFamily, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const FontPickerTrigger: ({ selectedFontFamily, isOpened, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
6
7
  export {};
@@ -1,3 +1,5 @@
1
- export declare const InlineIcon: ({ icon }: {
1
+ export declare const InlineIcon: ({ className, icon, size, }: {
2
+ className?: string | undefined;
2
3
  icon: React.ReactNode;
4
+ size?: string | undefined;
3
5
  }) => import("react/jsx-runtime").JSX.Element;
@@ -3,7 +3,7 @@ import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types";
3
3
  import type { SvgCache } from "../hooks/useLibraryItemSvg";
4
4
  import type { LibraryItem } from "../types";
5
5
  import type { ReactNode } from "react";
6
- type LibraryOrPendingItem = (LibraryItem | /* pending library item */ {
6
+ type LibraryOrPendingItem = readonly (LibraryItem | /* pending library item */ {
7
7
  id: null;
8
8
  elements: readonly NonDeleted<ExcalidrawElement>[];
9
9
  })[];
@@ -10,6 +10,7 @@ interface PropertiesPopoverProps {
10
10
  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
11
11
  onFocusOutside?: Popover.PopoverContentProps["onFocusOutside"];
12
12
  onPointerDownOutside?: Popover.PopoverContentProps["onPointerDownOutside"];
13
+ preventAutoFocusOnTouch?: boolean;
13
14
  }
14
15
  export declare const PropertiesPopover: React.ForwardRefExoticComponent<PropertiesPopoverProps & React.RefAttributes<HTMLDivElement>>;
15
16
  export {};
@@ -12,6 +12,7 @@ type TextFieldProps = {
12
12
  className?: string;
13
13
  placeholder?: string;
14
14
  isRedacted?: boolean;
15
+ type?: "text" | "search";
15
16
  } & ({
16
17
  value: string;
17
18
  } | {
@@ -11,6 +11,7 @@ export declare const PlusPromoIcon: import("react/jsx-runtime").JSX.Element;
11
11
  export declare const LibraryIcon: import("react/jsx-runtime").JSX.Element;
12
12
  export declare const PlusIcon: import("react/jsx-runtime").JSX.Element;
13
13
  export declare const DotsIcon: import("react/jsx-runtime").JSX.Element;
14
+ export declare const DotsHorizontalIcon: import("react/jsx-runtime").JSX.Element;
14
15
  export declare const PinIcon: import("react/jsx-runtime").JSX.Element;
15
16
  export declare const polygonIcon: import("react/jsx-runtime").JSX.Element;
16
17
  export declare const UnlockedIcon: import("react/jsx-runtime").JSX.Element;
@@ -30,6 +31,7 @@ export declare const LineIcon: import("react/jsx-runtime").JSX.Element;
30
31
  export declare const PenModeIcon: import("react/jsx-runtime").JSX.Element;
31
32
  export declare const FreedrawIcon: import("react/jsx-runtime").JSX.Element;
32
33
  export declare const TextIcon: import("react/jsx-runtime").JSX.Element;
34
+ export declare const TextSizeIcon: import("react/jsx-runtime").JSX.Element;
33
35
  export declare const ImageIcon: import("react/jsx-runtime").JSX.Element;
34
36
  export declare const EraserIcon: import("react/jsx-runtime").JSX.Element;
35
37
  export declare const ZoomInIcon: import("react/jsx-runtime").JSX.Element;
@@ -222,4 +224,8 @@ export declare const collapseUpIcon: import("react/jsx-runtime").JSX.Element;
222
224
  export declare const upIcon: import("react/jsx-runtime").JSX.Element;
223
225
  export declare const cropIcon: import("react/jsx-runtime").JSX.Element;
224
226
  export declare const elementLinkIcon: import("react/jsx-runtime").JSX.Element;
227
+ export declare const resizeIcon: import("react/jsx-runtime").JSX.Element;
228
+ export declare const adjustmentsIcon: import("react/jsx-runtime").JSX.Element;
229
+ export declare const backgroundIcon: import("react/jsx-runtime").JSX.Element;
230
+ export declare const strokeIcon: import("react/jsx-runtime").JSX.Element;
225
231
  export {};
@@ -1,3 +1,4 @@
1
+ import type { AppClassProperties } from "../types";
1
2
  export declare const SHAPES: readonly [{
2
3
  readonly icon: import("react/jsx-runtime").JSX.Element;
3
4
  readonly value: "selection";
@@ -59,4 +60,131 @@ export declare const SHAPES: readonly [{
59
60
  readonly numericKey: "0";
60
61
  readonly fillable: false;
61
62
  }];
62
- export declare const findShapeByKey: (key: string) => "text" | "line" | "ellipse" | "rectangle" | "diamond" | "image" | "selection" | "arrow" | "freedraw" | "eraser" | null;
63
+ export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
64
+ readonly icon: import("react/jsx-runtime").JSX.Element;
65
+ readonly value: "selection";
66
+ readonly key: "v";
67
+ readonly numericKey: "1";
68
+ readonly fillable: true;
69
+ }, {
70
+ readonly icon: import("react/jsx-runtime").JSX.Element;
71
+ readonly value: "rectangle";
72
+ readonly key: "r";
73
+ readonly numericKey: "2";
74
+ readonly fillable: true;
75
+ }, {
76
+ readonly icon: import("react/jsx-runtime").JSX.Element;
77
+ readonly value: "diamond";
78
+ readonly key: "d";
79
+ readonly numericKey: "3";
80
+ readonly fillable: true;
81
+ }, {
82
+ readonly icon: import("react/jsx-runtime").JSX.Element;
83
+ readonly value: "ellipse";
84
+ readonly key: "o";
85
+ readonly numericKey: "4";
86
+ readonly fillable: true;
87
+ }, {
88
+ readonly icon: import("react/jsx-runtime").JSX.Element;
89
+ readonly value: "arrow";
90
+ readonly key: "a";
91
+ readonly numericKey: "5";
92
+ readonly fillable: true;
93
+ }, {
94
+ readonly icon: import("react/jsx-runtime").JSX.Element;
95
+ readonly value: "line";
96
+ readonly key: "l";
97
+ readonly numericKey: "6";
98
+ readonly fillable: true;
99
+ }, {
100
+ readonly icon: import("react/jsx-runtime").JSX.Element;
101
+ readonly value: "freedraw";
102
+ readonly key: readonly ["p", "x"];
103
+ readonly numericKey: "7";
104
+ readonly fillable: false;
105
+ }, {
106
+ readonly icon: import("react/jsx-runtime").JSX.Element;
107
+ readonly value: "text";
108
+ readonly key: "t";
109
+ readonly numericKey: "8";
110
+ readonly fillable: false;
111
+ }, {
112
+ readonly icon: import("react/jsx-runtime").JSX.Element;
113
+ readonly value: "image";
114
+ readonly key: null;
115
+ readonly numericKey: "9";
116
+ readonly fillable: false;
117
+ }, {
118
+ readonly icon: import("react/jsx-runtime").JSX.Element;
119
+ readonly value: "eraser";
120
+ readonly key: "e";
121
+ readonly numericKey: "0";
122
+ readonly fillable: false;
123
+ }] | readonly [{
124
+ readonly value: "lasso";
125
+ readonly icon: import("react/jsx-runtime").JSX.Element;
126
+ readonly key: "v";
127
+ readonly numericKey: "1";
128
+ readonly fillable: true;
129
+ }, ...({
130
+ readonly icon: import("react/jsx-runtime").JSX.Element;
131
+ readonly value: "selection";
132
+ readonly key: "v";
133
+ readonly numericKey: "1";
134
+ readonly fillable: true;
135
+ } | {
136
+ readonly icon: import("react/jsx-runtime").JSX.Element;
137
+ readonly value: "rectangle";
138
+ readonly key: "r";
139
+ readonly numericKey: "2";
140
+ readonly fillable: true;
141
+ } | {
142
+ readonly icon: import("react/jsx-runtime").JSX.Element;
143
+ readonly value: "diamond";
144
+ readonly key: "d";
145
+ readonly numericKey: "3";
146
+ readonly fillable: true;
147
+ } | {
148
+ readonly icon: import("react/jsx-runtime").JSX.Element;
149
+ readonly value: "ellipse";
150
+ readonly key: "o";
151
+ readonly numericKey: "4";
152
+ readonly fillable: true;
153
+ } | {
154
+ readonly icon: import("react/jsx-runtime").JSX.Element;
155
+ readonly value: "arrow";
156
+ readonly key: "a";
157
+ readonly numericKey: "5";
158
+ readonly fillable: true;
159
+ } | {
160
+ readonly icon: import("react/jsx-runtime").JSX.Element;
161
+ readonly value: "line";
162
+ readonly key: "l";
163
+ readonly numericKey: "6";
164
+ readonly fillable: true;
165
+ } | {
166
+ readonly icon: import("react/jsx-runtime").JSX.Element;
167
+ readonly value: "freedraw";
168
+ readonly key: readonly ["p", "x"];
169
+ readonly numericKey: "7";
170
+ readonly fillable: false;
171
+ } | {
172
+ readonly icon: import("react/jsx-runtime").JSX.Element;
173
+ readonly value: "text";
174
+ readonly key: "t";
175
+ readonly numericKey: "8";
176
+ readonly fillable: false;
177
+ } | {
178
+ readonly icon: import("react/jsx-runtime").JSX.Element;
179
+ readonly value: "image";
180
+ readonly key: null;
181
+ readonly numericKey: "9";
182
+ readonly fillable: false;
183
+ } | {
184
+ readonly icon: import("react/jsx-runtime").JSX.Element;
185
+ readonly value: "eraser";
186
+ readonly key: "e";
187
+ readonly numericKey: "0";
188
+ readonly fillable: false;
189
+ })[]];
190
+ export declare const findShapeByKey: (key: string, app: AppClassProperties) => "text" | "line" | "ellipse" | "rectangle" | "diamond" | "image" | "selection" | "arrow" | "freedraw" | "lasso" | "eraser" | null;
@@ -2,7 +2,7 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "@excalidraw/common";
2
2
  import type { ValueOf } from "@excalidraw/common/utility-types";
3
3
  import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
4
4
  import type { AppState, DataURL, LibraryItem } from "../types";
5
- import type { FileSystemHandle } from "./filesystem";
5
+ import type { FileSystemHandle } from "browser-fs-access";
6
6
  import type { ImportedLibraryData } from "./types";
7
7
  export declare const getMimeType: (blob: Blob | string) => string;
8
8
  export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
@@ -40,12 +40,8 @@ export declare const SVGStringToFile: (SVGString: string, filename?: string) =>
40
40
  type: typeof MIME_TYPES.svg;
41
41
  };
42
42
  export declare const ImageURLToFile: (imageUrl: string, filename?: string) => Promise<File | undefined>;
43
- export declare const getFileFromEvent: (event: React.DragEvent<HTMLDivElement>) => Promise<{
44
- file: File | null;
45
- fileHandle: FileSystemHandle | null;
46
- }>;
47
- export declare const getFileHandle: (event: React.DragEvent<HTMLDivElement>) => Promise<FileSystemHandle | null>;
48
- export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>, name: string | undefined) => File;
43
+ export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemHandle | null>;
44
+ export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: string, name: string | undefined) => File;
49
45
  /** attempts to detect correct mimeType if none is set, or if an image
50
46
  * has an incorrect extension.
51
47
  * Note: doesn't handle missing .excalidraw/.excalidrawlib extension */
@@ -1,7 +1,7 @@
1
1
  import type { VERSIONS } from "@excalidraw/common";
2
2
  import type { ExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { cleanAppStateForExport } from "../appState";
4
- import type { AppState, BinaryFiles, LibraryItems, LibraryItems_anyVersion } from "../types";
4
+ import type { AppState, BinaryFiles, LibraryItem, LibraryItems, LibraryItems_anyVersion } from "../types";
5
5
  export interface ExportedDataState {
6
6
  type: string;
7
7
  version: number;
@@ -43,3 +43,6 @@ export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
43
43
  /** @deprecated v1 */
44
44
  library?: LibraryItems;
45
45
  }
46
+ export type ExcalidrawLibraryIds = {
47
+ itemIds: LibraryItem["id"][];
48
+ };
@@ -3,7 +3,7 @@ export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
3
3
  export declare const libraryItemSvgsCache: import("jotai/vanilla/atom").PrimitiveAtom<SvgCache> & {
4
4
  init: SvgCache;
5
5
  };
6
- export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache) => SVGSVGElement | undefined;
6
+ export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache, ref: React.RefObject<HTMLDivElement | null>) => SVGSVGElement | undefined;
7
7
  export declare const useLibraryCache: () => {
8
8
  clearLibraryCache: () => void;
9
9
  deleteItemsFromLibraryCache: (items: LibraryItem["id"][]) => void;
@@ -0,0 +1,14 @@
1
+ export type CaretPosition = {
2
+ start: number;
3
+ end: number;
4
+ };
5
+ export declare const saveCaretPosition: () => CaretPosition | null;
6
+ export declare const restoreCaretPosition: (position: CaretPosition | null) => void;
7
+ export declare const withCaretPositionPreservation: (callback: () => void, isCompactMode: boolean, isEditingText: boolean, onPreventClose?: () => void) => void;
8
+ export declare const useTextEditorFocus: () => {
9
+ saveCaretPosition: () => void;
10
+ restoreCaretPosition: () => void;
11
+ clearSavedPosition: () => void;
12
+ hasSavedPosition: boolean;
13
+ };
14
+ export declare const temporarilyDisableTextEditorBlur: (duration?: number) => void;
@@ -252,7 +252,7 @@ export interface AppState {
252
252
  isRotating: boolean;
253
253
  zoom: Zoom;
254
254
  openMenu: "canvas" | "shape" | null;
255
- openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
255
+ openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
256
256
  openSidebar: {
257
257
  name: SidebarName;
258
258
  tab?: SidebarTabName;
@@ -351,6 +351,8 @@ export interface AppState {
351
351
  lockedMultiSelections: {
352
352
  [groupId: string]: true;
353
353
  };
354
+ /** properties sidebar mode - determines whether to show compact or complete sidebar */
355
+ stylesPanelMode: "compact" | "full";
354
356
  }
355
357
  export type SearchMatch = {
356
358
  id: string;
@@ -557,6 +559,7 @@ export type AppClassProperties = {
557
559
  excalidrawContainerValue: App["excalidrawContainerValue"];
558
560
  onPointerUpEmitter: App["onPointerUpEmitter"];
559
561
  updateEditorAtom: App["updateEditorAtom"];
562
+ defaultSelectionTool: "selection" | "lasso";
560
563
  };
561
564
  export type PointerDownState = Readonly<{
562
565
  origin: Readonly<{
@@ -604,6 +607,7 @@ export type PointerDownState = Readonly<{
604
607
  x: number;
605
608
  y: number;
606
609
  };
610
+ blockDragging: boolean;
607
611
  };
608
612
  eventListeners: {
609
613
  onMove: null | ReturnType<typeof throttleRAF>;