tldraw zero - package shuffle (#1710)

This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw

At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.

## Library changes

@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.

- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.

- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw

Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.

## API Changes

The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.

All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.

You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.

The `components` prop now also accepts `SelectionForeground`.

The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.

Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.

The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.

- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
- [x] End to end tests

### Release Notes

- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw

---------

Co-authored-by: alex <alex@dytry.ch>

packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx

@@ -0,0 +1,73 @@
+import { TLArrowShape, TLShapeId, VecLike, stopEventPropagation } from '@tldraw/editor'
+import * as React from 'react'
+import { TextHelpers } from '../../shared/TextHelpers'
+import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../shared/default-shape-constants'
+import { useEditableText } from '../../shared/useEditableText'
+
+export const ArrowTextLabel = React.memo(function ArrowTextLabel({
+	id,
+	text,
+	size,
+	font,
+	position,
+	width,
+	labelColor,
+}: { id: TLShapeId; position: VecLike; width?: number; labelColor: string } & Pick<
+	TLArrowShape['props'],
+	'text' | 'size' | 'font'
+>) {
+	const { rInput, isEditing, handleFocus, handleBlur, handleKeyDown, handleChange, isEmpty } =
+		useEditableText(id, 'arrow', text)
+
+	if (!isEditing && isEmpty) {
+		return null
+	}
+
+	return (
+		<div
+			className="tl-arrow-label"
+			data-font={font}
+			data-align={'center'}
+			data-hastext={!isEmpty}
+			data-isediting={isEditing}
+			style={{
+				textAlign: 'center',
+				fontSize: ARROW_LABEL_FONT_SIZES[size],
+				lineHeight: ARROW_LABEL_FONT_SIZES[size] * TEXT_PROPS.lineHeight + 'px',
+				transform: `translate(${position.x}px, ${position.y}px)`,
+				color: labelColor,
+			}}
+		>
+			<div className="tl-arrow-label__inner">
+				<p style={{ width: width ? width : '9px' }}>
+					{text ? TextHelpers.normalizeTextForDom(text) : ' '}
+				</p>
+				{isEditing && (
+					// Consider replacing with content-editable
+					<textarea
+						ref={rInput}
+						className="tl-text tl-text-input"
+						name="text"
+						tabIndex={-1}
+						autoComplete="false"
+						autoCapitalize="false"
+						autoCorrect="false"
+						autoSave="false"
+						autoFocus
+						placeholder=""
+						spellCheck="true"
+						wrap="off"
+						dir="auto"
+						datatype="wysiwyg"
+						defaultValue={text}
+						onFocus={handleFocus}
+						onChange={handleChange}
+						onKeyDown={handleKeyDown}
+						onBlur={handleBlur}
+						onContextMenu={stopEventPropagation}
+					/>
+				)}
+			</div>
+		</div>
+	)
+})