2023-04-25 11:01:25 +00:00
|
|
|
// Important! don't move this tlschema re-export to lib/index.ts, doing so causes esbuild to produce
|
|
|
|
// incorrect output. https://github.com/evanw/esbuild/issues/1737
|
|
|
|
|
|
|
|
// eslint-disable-next-line local/no-export-star
|
|
|
|
export * from '@tldraw/tlschema'
|
|
|
|
export { getHashForString } from '@tldraw/utils'
|
|
|
|
export {
|
|
|
|
ErrorScreen,
|
|
|
|
LoadingScreen,
|
|
|
|
TldrawEditor,
|
|
|
|
type TldrawEditorProps,
|
|
|
|
} from './lib/TldrawEditor'
|
|
|
|
export {
|
|
|
|
App,
|
|
|
|
isShapeWithHandles,
|
|
|
|
type AnimationOptions,
|
|
|
|
type AppOptions,
|
|
|
|
type TLChange,
|
|
|
|
} from './lib/app/App'
|
|
|
|
export { TLArrowShapeDef, TLArrowUtil } from './lib/app/shapeutils/TLArrowUtil/TLArrowUtil'
|
|
|
|
export {
|
|
|
|
TLBookmarkShapeDef,
|
|
|
|
TLBookmarkUtil,
|
|
|
|
} from './lib/app/shapeutils/TLBookmarkUtil/TLBookmarkUtil'
|
|
|
|
export { TLBoxUtil } from './lib/app/shapeutils/TLBoxUtil'
|
|
|
|
export { TLDrawShapeDef, TLDrawUtil } from './lib/app/shapeutils/TLDrawUtil/TLDrawUtil'
|
|
|
|
export { TLEmbedShapeDef, TLEmbedUtil } from './lib/app/shapeutils/TLEmbedUtil/TLEmbedUtil'
|
|
|
|
export { TLFrameShapeDef, TLFrameUtil } from './lib/app/shapeutils/TLFrameUtil/TLFrameUtil'
|
|
|
|
export { TLGeoShapeDef, TLGeoUtil } from './lib/app/shapeutils/TLGeoUtil/TLGeoUtil'
|
|
|
|
export { TLGroupShapeDef, TLGroupUtil } from './lib/app/shapeutils/TLGroupUtil/TLGroupUtil'
|
|
|
|
export { TLImageShapeDef, TLImageUtil } from './lib/app/shapeutils/TLImageUtil/TLImageUtil'
|
|
|
|
export {
|
|
|
|
TLLineShapeDef,
|
|
|
|
TLLineUtil,
|
|
|
|
getSplineForLineShape,
|
|
|
|
} from './lib/app/shapeutils/TLLineUtil/TLLineUtil'
|
|
|
|
export { TLNoteShapeDef, TLNoteUtil } from './lib/app/shapeutils/TLNoteUtil/TLNoteUtil'
|
|
|
|
export {
|
|
|
|
TLShapeUtil,
|
|
|
|
type OnBeforeCreateHandler,
|
|
|
|
type OnBeforeUpdateHandler,
|
|
|
|
type OnBindingChangeHandler,
|
|
|
|
type OnChildrenChangeHandler,
|
|
|
|
type OnClickHandler,
|
|
|
|
type OnDoubleClickHandleHandler,
|
|
|
|
type OnDoubleClickHandler,
|
|
|
|
type OnDragHandler,
|
|
|
|
type OnEditEndHandler,
|
|
|
|
type OnHandleChangeHandler,
|
|
|
|
type OnResizeEndHandler,
|
|
|
|
type OnResizeHandler,
|
|
|
|
type OnResizeStartHandler,
|
|
|
|
type OnRotateEndHandler,
|
|
|
|
type OnRotateHandler,
|
|
|
|
type OnRotateStartHandler,
|
|
|
|
type OnTranslateEndHandler,
|
|
|
|
type OnTranslateHandler,
|
|
|
|
type OnTranslateStartHandler,
|
add docs for TLShapeUtil (#1215)
This PR adds docs for the methods in the TLShapeUtil class.
I think that it's a good page to have docs on, as it shows people what's
possible with the custom shape API.
Currently, our docs are not showing `@param` info for lots of methods,
including the ones added in this PR.
I'll do fix for that in a follow-up PR, so that it's easier to review.
---
Note: Moving forward, we probably want to consider **_where_** these
docs are shown, and how we achieve that.
For example, do we put the docs for these methods in:
* The docs page for the `TLShapeUtil` class?
* The docs pages for the handler types, eg:
[`OnResizeHandler`](http://localhost:3000/gen/editor/OnResizeHandler-type)?
* Both?
Right now, I opted for putting them in the the TLShapeUtil class, as it
keeps them all in one place, and it's what we already do for some
others.
We should consider both - what works best for the docs? and what works
best for code editors?
---
This PR also includes a fix to our pre-commit step that @SomeHats did.
2023-05-05 14:05:25 +00:00
|
|
|
type TLResizeInfo,
|
2023-04-25 11:01:25 +00:00
|
|
|
type TLResizeMode,
|
|
|
|
type TLShapeUtilConstructor,
|
|
|
|
type TLShapeUtilFlag,
|
|
|
|
} from './lib/app/shapeutils/TLShapeUtil'
|
[improvement] refactor paste to support multi-line text (#1398)
This PR refactors our clipboard handlers. It should simplify the way
that things work and better handle the difference between how the native
API events are handled vs. the browser's clipboard API events.
![Kapture 2023-05-17 at 13 26
34](https://github.com/tldraw/tldraw/assets/23072548/5dedcc25-a1d2-423f-8bc2-415f761b643b)
Everything that used to be supported now also still works.
In addition, we now have several useful features:
### Multiline text can be pasted into the app
When pasting text that contains more than one line, the text is pasted
correctly; even if the clipboard also includes HTML data. Previously, we
would try to paste HTML data if we found it, because that data might
contain tldraw's own content as a comment; but if that failed, we would
paste the data as text instead. This led to pasting text that lost lots
of information from that text, such as line breaks and indentations.
### Multiline text shapes are aligned correctly
When pasting raw text that has more than one line, the text will be left
aligned—or right aligned if the text is likely from a RTL language.
![Kapture 2023-05-17 at 13 42
54](https://github.com/tldraw/tldraw/assets/23072548/f705acd5-136c-4144-80da-6e97ff766a58)
### Common minimum indentation is removed from each line
![Kapture 2023-05-17 at 13 56
28](https://github.com/tldraw/tldraw/assets/23072548/d45c95f6-6d28-4c9f-8cd3-8078700ce928)
This is something that absolutely every app should implement, but here
we go. When multiline text has "common indentation" on each line, which
is often the case when pasting text from code, then that indentation is
removed from each line.
### Auto wrapping for big pastes
When a line has no text breaks but a lot of text, we now set the width
of the text shape.
![Kapture 2023-05-17 at 14 00
04](https://github.com/tldraw/tldraw/assets/23072548/0b7f69c3-bcf9-42e9-a1ed-df026f868793)
## How it works
A `ClipboardThing` is the common interface for things that we found on
the clipboard, native or otherwise. Both `handlePasteFromClipboardApi`
and `handlePasteFromEventClipboardData` parse out `ClipboardThing`s and
pass them to `handleClipboardThings`.
<img width="905" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/fd087539-edbb-4527-b5ff-ca7d7c1726b2">
A `ClipboardResult` is the result of processing a `ClipboardThing`, and
usually contains text and other information about that text. We make
decisions on what to create based on which `ClipboardResult`s we find.
When pasting text, we check to see whether the result would be bigger
than the viewport, or if the text is multiline, or if the text is of an
RTL language by testing certain common RTL characters. We make some
adjustments based on those factors, ensuring that the top-left corner of
the text is on screen and reasonably positioned within the viewport if
possible.
### Change Type
- [x] `minor` — New Feature
### Test Plan
1. Copy and paste shapes
2. Copy and paste text from elsewhere into the app
3. Copy and paste images from elsewhere into the app
4. Try on different browsers
### Release Notes
- Improves clipboard logic when pasting text
- Adds support for pasting multi-line text
- Adds maximum widths when pasting single-line text
- Adds support for RTL languages when pasting multi-line or wrapped text
- Strips leading indentation when pasting text
2023-05-17 16:32:25 +00:00
|
|
|
export { INDENT, TLTextShapeDef, TLTextUtil } from './lib/app/shapeutils/TLTextUtil/TLTextUtil'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { TLVideoShapeDef, TLVideoUtil } from './lib/app/shapeutils/TLVideoUtil/TLVideoUtil'
|
|
|
|
export { StateNode, type StateNodeConstructor } from './lib/app/statechart/StateNode'
|
|
|
|
export { TLBoxTool, type TLBoxLike } from './lib/app/statechart/TLBoxTool/TLBoxTool'
|
|
|
|
export { type ClipboardPayload, type TLClipboardModel } from './lib/app/types/clipboard-types'
|
2023-05-11 22:14:58 +00:00
|
|
|
export { type TLEventMap, type TLEventMapHandler } from './lib/app/types/emit-types'
|
2023-04-25 11:01:25 +00:00
|
|
|
export {
|
|
|
|
EVENT_NAME_MAP,
|
|
|
|
type TLBaseEventInfo,
|
|
|
|
type TLCLickEventName,
|
|
|
|
type TLCancelEvent,
|
|
|
|
type TLCancelEventInfo,
|
|
|
|
type TLClickEvent,
|
|
|
|
type TLClickEventInfo,
|
|
|
|
type TLCompleteEvent,
|
|
|
|
type TLCompleteEventInfo,
|
|
|
|
type TLEventHandlers,
|
|
|
|
type TLEventInfo,
|
|
|
|
type TLEventName,
|
|
|
|
type TLInterruptEvent,
|
|
|
|
type TLInterruptEventInfo,
|
|
|
|
type TLKeyboardEvent,
|
|
|
|
type TLKeyboardEventInfo,
|
|
|
|
type TLKeyboardEventName,
|
|
|
|
type TLPinchEvent,
|
|
|
|
type TLPinchEventInfo,
|
|
|
|
type TLPinchEventName,
|
|
|
|
type TLPointerEvent,
|
|
|
|
type TLPointerEventInfo,
|
|
|
|
type TLPointerEventName,
|
|
|
|
type TLPointerEventTarget,
|
|
|
|
type TLTickEvent,
|
|
|
|
type TLWheelEvent,
|
|
|
|
type TLWheelEventInfo,
|
|
|
|
type UiEnterHandler,
|
|
|
|
type UiEvent,
|
|
|
|
type UiEventType,
|
|
|
|
type UiExitHandler,
|
|
|
|
} from './lib/app/types/event-types'
|
|
|
|
export {
|
|
|
|
type TLCommand,
|
|
|
|
type TLCommandHandler,
|
|
|
|
type TLHistoryEntry,
|
|
|
|
type TLMark,
|
|
|
|
} from './lib/app/types/history-types'
|
|
|
|
export { type RequiredKeys, type TLEasingType } from './lib/app/types/misc-types'
|
|
|
|
export { type TLResizeHandle, type TLSelectionHandle } from './lib/app/types/selection-types'
|
2023-05-05 13:10:36 +00:00
|
|
|
export {
|
|
|
|
defaultEditorAssetUrls,
|
|
|
|
setDefaultEditorAssetUrls,
|
|
|
|
type EditorAssetUrls,
|
|
|
|
} from './lib/assetUrls'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { Canvas } from './lib/components/Canvas'
|
|
|
|
export { DefaultErrorFallback } from './lib/components/DefaultErrorFallback'
|
|
|
|
export {
|
|
|
|
ErrorBoundary,
|
|
|
|
OptionalErrorBoundary,
|
|
|
|
type ErrorBoundaryProps,
|
|
|
|
} from './lib/components/ErrorBoundary'
|
|
|
|
export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
|
|
|
|
export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
|
|
|
|
export {
|
|
|
|
type ErrorSyncedStore,
|
|
|
|
type InitializingSyncedStore,
|
|
|
|
type ReadySyncedStore,
|
|
|
|
type SyncedStore,
|
|
|
|
} from './lib/config/SyncedStore'
|
|
|
|
export {
|
|
|
|
defineShape,
|
|
|
|
type TLShapeDef,
|
|
|
|
type TLUnknownShapeDef,
|
|
|
|
} from './lib/config/TLShapeDefinition'
|
|
|
|
export { TldrawEditorConfig } from './lib/config/TldrawEditorConfig'
|
|
|
|
export {
|
|
|
|
ANIMATION_MEDIUM_MS,
|
|
|
|
ANIMATION_SHORT_MS,
|
|
|
|
ARROW_LABEL_FONT_SIZES,
|
|
|
|
BOUND_ARROW_OFFSET,
|
|
|
|
DEFAULT_ANIMATION_OPTIONS,
|
|
|
|
DEFAULT_BOOKMARK_HEIGHT,
|
|
|
|
DEFAULT_BOOKMARK_WIDTH,
|
|
|
|
DOUBLE_CLICK_DURATION,
|
|
|
|
DRAG_DISTANCE,
|
|
|
|
FONT_ALIGNMENT,
|
|
|
|
FONT_FAMILIES,
|
|
|
|
FONT_SIZES,
|
|
|
|
GRID_INCREMENT,
|
|
|
|
GRID_STEPS,
|
|
|
|
HAND_TOOL_FRICTION,
|
|
|
|
HASH_PATERN_ZOOM_NAMES,
|
|
|
|
ICON_SIZES,
|
|
|
|
LABEL_FONT_SIZES,
|
|
|
|
MAJOR_NUDGE_FACTOR,
|
|
|
|
MAX_ASSET_HEIGHT,
|
|
|
|
MAX_ASSET_WIDTH,
|
|
|
|
MAX_PAGES,
|
|
|
|
MAX_SHAPES_PER_PAGE,
|
|
|
|
MAX_ZOOM,
|
|
|
|
MINOR_NUDGE_FACTOR,
|
|
|
|
MIN_ARROW_LENGTH,
|
|
|
|
MIN_ZOOM,
|
|
|
|
MULTI_CLICK_DURATION,
|
|
|
|
REMOVE_SYMBOL,
|
|
|
|
RICH_TYPES,
|
|
|
|
ROTATING_SHADOWS,
|
|
|
|
STYLES,
|
|
|
|
SVG_PADDING,
|
|
|
|
TEXT_PROPS,
|
|
|
|
WAY_TOO_BIG_ARROW_BEND_FACTOR,
|
|
|
|
ZOOMS,
|
|
|
|
} from './lib/constants'
|
|
|
|
export { normalizeWheel } from './lib/hooks/shared'
|
|
|
|
export { useApp } from './lib/hooks/useApp'
|
|
|
|
export { useContainer } from './lib/hooks/useContainer'
|
|
|
|
export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
|
2023-05-03 13:48:46 +00:00
|
|
|
export { usePeerIds } from './lib/hooks/usePeerIds'
|
|
|
|
export { usePresence } from './lib/hooks/usePresence'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { useQuickReactor } from './lib/hooks/useQuickReactor'
|
|
|
|
export { useReactor } from './lib/hooks/useReactor'
|
|
|
|
export { WeakMapCache } from './lib/utils/WeakMapCache'
|
|
|
|
export {
|
|
|
|
ACCEPTED_ASSET_TYPE,
|
|
|
|
ACCEPTED_IMG_TYPE,
|
|
|
|
ACCEPTED_VID_TYPE,
|
|
|
|
containBoxSize,
|
|
|
|
createAssetShapeAtPoint,
|
|
|
|
createBookmarkShapeAtPoint,
|
|
|
|
createEmbedShapeAtPoint,
|
|
|
|
createShapesFromFiles,
|
|
|
|
dataUrlToFile,
|
|
|
|
getFileMetaData,
|
|
|
|
getImageSizeFromSrc,
|
|
|
|
getMediaAssetFromFile,
|
|
|
|
getResizedImageDataUrl,
|
|
|
|
getValidHttpURLList,
|
|
|
|
getVideoSizeFromSrc,
|
|
|
|
isImage,
|
|
|
|
isSvgText,
|
|
|
|
isValidHttpURL,
|
|
|
|
} from './lib/utils/assets'
|
|
|
|
export { buildFromV1Document, type LegacyTldrawDocument } from './lib/utils/buildFromV1Document'
|
|
|
|
export {
|
|
|
|
checkFlag,
|
|
|
|
fileToBase64,
|
|
|
|
getIncrementedName,
|
|
|
|
isSerializable,
|
|
|
|
snapToGrid,
|
|
|
|
uniqueId,
|
|
|
|
} from './lib/utils/data'
|
|
|
|
export { debugFlags } from './lib/utils/debug-flags'
|
|
|
|
export {
|
|
|
|
loopToHtmlElement,
|
|
|
|
preventDefault,
|
|
|
|
releasePointerCapture,
|
|
|
|
rotateBoxShadow,
|
|
|
|
setPointerCapture,
|
|
|
|
truncateStringWithEllipsis,
|
|
|
|
usePrefersReducedMotion,
|
|
|
|
} from './lib/utils/dom'
|
|
|
|
export {
|
|
|
|
getEmbedInfo,
|
|
|
|
getEmbedInfoUnsafely,
|
|
|
|
matchEmbedUrl,
|
|
|
|
matchUrl,
|
|
|
|
type EmbedResult,
|
|
|
|
} from './lib/utils/embeds'
|
|
|
|
export {
|
|
|
|
downloadDataURLAsFile,
|
|
|
|
getSvgAsDataUrl,
|
|
|
|
getSvgAsDataUrlSync,
|
|
|
|
getSvgAsImage,
|
|
|
|
getSvgAsString,
|
|
|
|
getTextBoundingBox,
|
|
|
|
isGeoShape,
|
|
|
|
isNoteShape,
|
|
|
|
type TLCopyType,
|
|
|
|
type TLExportType,
|
|
|
|
} from './lib/utils/export'
|
|
|
|
export { hardResetApp } from './lib/utils/hard-reset'
|
|
|
|
export { isAnimated, isGIF } from './lib/utils/is-gif-animated'
|
|
|
|
export { setPropsForNextShape } from './lib/utils/props-for-next-shape'
|
|
|
|
export { refreshPage } from './lib/utils/refresh-page'
|
|
|
|
export {
|
|
|
|
getIndexAbove,
|
|
|
|
getIndexBelow,
|
|
|
|
getIndexBetween,
|
|
|
|
getIndexGenerator,
|
|
|
|
getIndices,
|
|
|
|
getIndicesAbove,
|
|
|
|
getIndicesBelow,
|
|
|
|
getIndicesBetween,
|
|
|
|
getMaxIndex,
|
|
|
|
indexGenerator,
|
|
|
|
sortById,
|
|
|
|
sortByIndex,
|
|
|
|
} from './lib/utils/reordering/reordering'
|
|
|
|
export {
|
|
|
|
applyRotationToSnapshotShapes,
|
|
|
|
getRotationSnapshot,
|
|
|
|
type RotationSnapshot,
|
|
|
|
} from './lib/utils/rotation'
|
|
|
|
export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
|
|
|
|
export {
|
|
|
|
blobAsString,
|
|
|
|
correctSpacesToNbsp,
|
|
|
|
dataTransferItemAsString,
|
|
|
|
defaultEmptyAs,
|
|
|
|
} from './lib/utils/string'
|
|
|
|
export { getPointerInfo, getSvgPathFromStroke, getSvgPathFromStrokePoints } from './lib/utils/svg'
|
|
|
|
export { openWindow } from './lib/utils/window-open'
|