tldraw/dist-esm/lib/ui/components/EditLinkDialog.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../src/lib/ui/components/EditLinkDialog.tsx"],
  "sourcesContent": ["import { ExtractShapeByProps, T, TLShape, track, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { TLUiDialogProps } from '../context/dialogs'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDialogBody,\n\tTldrawUiDialogCloseButton,\n\tTldrawUiDialogFooter,\n\tTldrawUiDialogHeader,\n\tTldrawUiDialogTitle,\n} from './primitives/TldrawUiDialog'\nimport { TldrawUiInput } from './primitives/TldrawUiInput'\n\n// A url can either be invalid, or valid with a protocol, or valid without a protocol.\n// For example, \"aol.com\" would be valid with a protocol ()\nfunction validateUrl(url: string) {\n\tif (T.linkUrl.isValid(url)) {\n\t\treturn { isValid: true, hasProtocol: true }\n\t}\n\tif (T.linkUrl.isValid('https://' + url)) {\n\t\treturn { isValid: true, hasProtocol: false }\n\t}\n\treturn { isValid: false, hasProtocol: false }\n}\n\ntype ShapeWithUrl = ExtractShapeByProps<{ url: string }>\n\nfunction isShapeWithUrl(shape: TLShape | null | undefined): shape is ShapeWithUrl {\n\treturn !!(shape && 'url' in shape.props && typeof shape.props.url === 'string')\n}\n\nfunction assertShapeWithUrl(shape: TLShape | null | undefined): asserts shape is ShapeWithUrl {\n\tif (!isShapeWithUrl(shape)) {\n\t\tthrow new Error('Shape is not a valid ShapeWithUrl')\n\t}\n}\n\nexport const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {\n\tconst editor = useEditor()\n\n\tconst selectedShape = editor.getOnlySelectedShape()\n\n\tif (!isShapeWithUrl(selectedShape)) {\n\t\treturn null\n\t}\n\n\treturn <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape} />\n})\n\nexport const EditLinkDialogInner = track(function EditLinkDialogInner({\n\tonClose,\n\tselectedShape,\n}: TLUiDialogProps & { selectedShape: ShapeWithUrl }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rInput = useRef<HTMLInputElement>(null)\n\n\tuseEffect(() => {\n\t\teditor.timers.requestAnimationFrame(() => rInput.current?.focus())\n\t}, [editor])\n\n\tconst rInitialValue = useRef(selectedShape.props.url)\n\n\tconst [urlInputState, setUrlInputState] = useState(() => {\n\t\tconst urlValidResult = validateUrl(selectedShape.props.url)\n\n\t\tconst initialValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? selectedShape.props.url\n\t\t\t\t\t: 'https://' + selectedShape.props.url\n\t\t\t\t: 'https://'\n\n\t\treturn {\n\t\t\tactual: initialValue,\n\t\t\tsafe: initialValue,\n\t\t\tvalid: true,\n\t\t}\n\t})\n\n\tconst handleChange = useCallback((rawValue: string) => {\n\t\t// Just auto-correct double https:// from a bad paste.\n\t\tconst fixedRawValue = rawValue.replace(/https?:\\/\\/(https?:\\/\\/)/, (_match, arg1) => {\n\t\t\treturn arg1\n\t\t})\n\n\t\tconst urlValidResult = validateUrl(fixedRawValue)\n\n\t\tconst safeValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? fixedRawValue\n\t\t\t\t\t: 'https://' + fixedRawValue\n\t\t\t\t: 'https://'\n\n\t\tsetUrlInputState({\n\t\t\tactual: fixedRawValue,\n\t\t\tsafe: safeValue,\n\t\t\tvalid: urlValidResult.isValid,\n\t\t})\n\t}, [])\n\n\tconst handleClear = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\tif (!onlySelectedShape) return\n\t\tassertShapeWithUrl(onlySelectedShape)\n\t\teditor.updateShapes([\n\t\t\t{ id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: '' } },\n\t\t])\n\t\tonClose()\n\t}, [editor, onClose])\n\n\tconst handleComplete = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\tif (!onlySelectedShape) return\n\t\tassertShapeWithUrl(onlySelectedShape)\n\n\t\t// ? URL is a magic value\n\t\tif (onlySelectedShape && 'url' in onlySelectedShape.props) {\n\t\t\t// Here would be a good place to validate the next shape\u2014would setting the empty\n\t\t\tif (onlySelectedShape.props.url !== urlInputState.safe) {\n\t\t\t\teditor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\tid: onlySelectedShape.id,\n\t\t\t\t\t\ttype: onlySelectedShape.type,\n\t\t\t\t\t\tprops: { url: urlInputState.safe },\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t}\n\t\tonClose()\n\t}, [editor, onClose, urlInputState])\n\n\tconst handleCancel = useCallback(() => {\n\t\tonClose()\n\t}, [onClose])\n\n\tif (!selectedShape) {\n\t\t// dismiss modal\n\t\tonClose()\n\t\treturn null\n\t}\n\n\t// Are we going from a valid state to an invalid state?\n\tconst isRemoving = rInitialValue.current && !urlInputState.valid\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiDialogHeader>\n\t\t\t\t<TldrawUiDialogTitle>{msg('edit-link-dialog.title')}</TldrawUiDialogTitle>\n\t\t\t\t<TldrawUiDialogCloseButton />\n\t\t\t</TldrawUiDialogHeader>\n\t\t\t<TldrawUiDialogBody>\n\t\t\t\t<div className=\"tlui-edit-link-dialog\">\n\t\t\t\t\t<TldrawUiInput\n\t\t\t\t\t\tref={rInput}\n\t\t\t\t\t\tclassName=\"tlui-edit-link-dialog__input\"\n\t\t\t\t\t\tlabel=\"edit-link-dialog.url\"\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tautoSelect\n\t\t\t\t\t\tplaceholder=\"https://example.com\"\n\t\t\t\t\t\tvalue={urlInputState.actual}\n\t\t\t\t\t\tonValueChange={handleChange}\n\t\t\t\t\t\tonComplete={handleComplete}\n\t\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{urlInputState.valid\n\t\t\t\t\t\t\t? msg('edit-link-dialog.detail')\n\t\t\t\t\t\t\t: msg('edit-link-dialog.invalid-url')}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiDialogBody>\n\t\t\t<TldrawUiDialogFooter className=\"tlui-dialog__footer__actions\">\n\t\t\t\t<TldrawUiButton type=\"normal\" onClick={handleCancel} onTouchEnd={handleCancel}>\n\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.cancel')}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t\t{isRemoving ? (\n\t\t\t\t\t<TldrawUiButton type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>\n\t\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.clear')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t) : (\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t\tdisabled={!urlInputState.valid}\n\t\t\t\t\t\tonTouchEnd={handleComplete}\n\t\t\t\t\t\tonClick={handleComplete}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.save')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t)}\n\t\t\t</TldrawUiDialogFooter>\n\t\t</>\n\t)\n})\n"],
  "mappings": "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",
  "names": ["EditLinkDialog", "EditLinkDialogInner"]
}