tldraw
Version:
A tiny little drawing editor.
227 lines (226 loc) • 10 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Tldraw_exports = {};
__export(Tldraw_exports, {
Tldraw: () => Tldraw
});
module.exports = __toCommonJS(Tldraw_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_react = require("react");
var import_TldrawHandles = require("./canvas/TldrawHandles");
var import_TldrawOverlays = require("./canvas/TldrawOverlays");
var import_TldrawScribble = require("./canvas/TldrawScribble");
var import_TldrawSelectionForeground = require("./canvas/TldrawSelectionForeground");
var import_TldrawShapeIndicators = require("./canvas/TldrawShapeIndicators");
var import_defaultBindingUtils = require("./defaultBindingUtils");
var import_defaultExternalContentHandlers = require("./defaultExternalContentHandlers");
var import_defaultShapeTools = require("./defaultShapeTools");
var import_defaultShapeUtils = require("./defaultShapeUtils");
var import_defaultSideEffects = require("./defaultSideEffects");
var import_defaultTools = require("./defaultTools");
var import_EmbedShapeUtil = require("./shapes/embed/EmbedShapeUtil");
var import_defaultFonts = require("./shapes/shared/defaultFonts");
var import_TldrawUi = require("./ui/TldrawUi");
var import_assetUrls = require("./ui/assetUrls");
var import_LoadingScreen = require("./ui/components/LoadingScreen");
var import_Spinner = require("./ui/components/Spinner");
var import_asset_urls = require("./ui/context/asset-urls");
var import_components = require("./ui/context/components");
var import_events = require("./ui/context/events");
var import_toasts = require("./ui/context/toasts");
var import_useTranslation = require("./ui/hooks/useTranslation/useTranslation");
var import_overrides = require("./ui/overrides");
var import_assetUrls2 = require("./utils/static-assets/assetUrls");
var import_richText = require("./utils/text/richText");
const allDefaultTools = [...import_defaultTools.defaultTools, ...import_defaultShapeTools.defaultShapeTools];
function Tldraw(props) {
const {
children,
maxImageDimension,
maxAssetSize,
acceptedImageMimeTypes,
acceptedVideoMimeTypes,
onMount,
components = {},
shapeUtils = [],
bindingUtils = [],
tools = [],
// needs to be here for backwards compatibility
// eslint-disable-next-line @typescript-eslint/no-deprecated
embeds,
options,
// needs to be here for backwards compatibility with TldrawEditor
// eslint-disable-next-line @typescript-eslint/no-deprecated
textOptions: _textOptions,
...rest
} = props;
const _components = (0, import_editor.useShallowObjectIdentity)(components);
const CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas;
const InFrontOfTheCanvas = (0, import_react.useMemo)(() => {
if (rest.hideUi) return CustomInFrontOfTheCanvas ?? null;
if (!CustomInFrontOfTheCanvas) return import_TldrawUi.TldrawUiInFrontOfTheCanvas;
return () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUi.TldrawUiInFrontOfTheCanvas, {}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomInFrontOfTheCanvas, {})
] });
}, [rest.hideUi, CustomInFrontOfTheCanvas]);
const componentsWithDefault = (0, import_react.useMemo)(
() => ({
Scribble: import_TldrawScribble.TldrawScribble,
ShapeIndicators: import_TldrawShapeIndicators.TldrawShapeIndicators,
CollaboratorScribble: import_TldrawScribble.TldrawScribble,
SelectionForeground: import_TldrawSelectionForeground.TldrawSelectionForeground,
Handles: import_TldrawHandles.TldrawHandles,
Overlays: import_TldrawOverlays.TldrawOverlays,
Spinner: import_Spinner.Spinner,
LoadingScreen: import_LoadingScreen.LoadingScreen,
..._components,
InFrontOfTheCanvas
}),
[_components, InFrontOfTheCanvas]
);
const _shapeUtils = (0, import_editor.useShallowArrayIdentity)(shapeUtils);
const shapeUtilsWithDefaults = (0, import_react.useMemo)(
() => (0, import_editor.mergeArraysAndReplaceDefaults)("type", _shapeUtils, import_defaultShapeUtils.defaultShapeUtils),
[_shapeUtils]
);
const _bindingUtils = (0, import_editor.useShallowArrayIdentity)(bindingUtils);
const bindingUtilsWithDefaults = (0, import_react.useMemo)(
() => (0, import_editor.mergeArraysAndReplaceDefaults)("type", _bindingUtils, import_defaultBindingUtils.defaultBindingUtils),
[_bindingUtils]
);
const _tools = (0, import_editor.useShallowArrayIdentity)(tools);
const toolsWithDefaults = (0, import_react.useMemo)(
() => (0, import_editor.mergeArraysAndReplaceDefaults)("id", _tools, allDefaultTools),
[_tools]
);
const _imageMimeTypes = (0, import_editor.useShallowArrayIdentity)(
acceptedImageMimeTypes ?? import_editor.DEFAULT_SUPPORTED_IMAGE_TYPES
);
const _videoMimeTypes = (0, import_editor.useShallowArrayIdentity)(
acceptedVideoMimeTypes ?? import_editor.DEFAULT_SUPPORT_VIDEO_TYPES
);
const _mergedTextOptions = options?.text ?? _textOptions;
const textOptionsWithDefaults = (0, import_react.useMemo)(() => {
return {
addFontsFromNode: import_richText.defaultAddFontsFromNode,
..._mergedTextOptions,
tipTapConfig: {
extensions: import_richText.tipTapDefaultExtensions,
..._mergedTextOptions?.tipTapConfig
}
};
}, [_mergedTextOptions]);
const optionsWithDefaults = (0, import_react.useMemo)(
() => ({
...options,
text: textOptionsWithDefaults
}),
[options, textOptionsWithDefaults]
);
const mediaMimeTypes = (0, import_react.useMemo)(
() => [..._imageMimeTypes, ..._videoMimeTypes],
[_imageMimeTypes, _videoMimeTypes]
);
const assets = (0, import_assetUrls2.useDefaultEditorAssetsWithOverrides)(rest.assetUrls);
const embedShapeUtil = shapeUtilsWithDefaults.find((util) => util.type === "embed");
if (embedShapeUtil && embeds) {
import_EmbedShapeUtil.EmbedShapeUtil.setEmbedDefinitions(embeds);
}
return (
// We provide an extra higher layer of asset+translations providers here so that
// loading UI (which is rendered outside of TldrawUi) may be translated.
// Ideally we would refactor to hoist all the UI context providers we can up here. Maybe later.
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_asset_urls.AssetUrlsProvider, { assetUrls: (0, import_assetUrls.useDefaultUiAssetUrlsWithOverrides)(rest.assetUrls), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_useTranslation.TldrawUiTranslationProvider,
{
overrides: (0, import_overrides.useMergedTranslationOverrides)(rest.overrides),
locale: rest.user?.userPreferences.get().locale ?? import_editor.defaultUserPreferences.locale,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_editor.TldrawEditor,
{
initialState: "select",
...rest,
components: componentsWithDefault,
shapeUtils: shapeUtilsWithDefaults,
bindingUtils: bindingUtilsWithDefaults,
tools: toolsWithDefaults,
options: optionsWithDefaults,
assetUrls: assets,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUi.TldrawUi, { ...rest, components: componentsWithDefault, mediaMimeTypes, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
InsideOfEditorAndUiContext,
{
maxImageDimension,
maxAssetSize,
acceptedImageMimeTypes: _imageMimeTypes,
acceptedVideoMimeTypes: _videoMimeTypes,
onMount
}
),
children
] })
}
)
}
) })
);
}
function InsideOfEditorAndUiContext({
maxImageDimension,
maxAssetSize,
acceptedImageMimeTypes,
acceptedVideoMimeTypes,
onMount
}) {
const editor = (0, import_editor.useEditor)();
const toasts = (0, import_toasts.useToasts)();
const msg = (0, import_useTranslation.useTranslation)();
const trackEvent = (0, import_events.useUiEvents)();
(0, import_editor.useOnMount)(() => {
const unsubs = [];
unsubs.push((0, import_defaultSideEffects.registerDefaultSideEffects)(editor));
editor.fonts.requestFonts(import_defaultFonts.allDefaultFontFaces);
editor.once("edit", () => trackEvent("edit", { source: "unknown" }));
(0, import_defaultExternalContentHandlers.registerDefaultExternalContentHandlers)(editor, {
maxImageDimension,
maxAssetSize,
acceptedImageMimeTypes,
acceptedVideoMimeTypes,
toasts,
msg
});
unsubs.push(editor.store.props.onMount(editor));
unsubs.push(onMount?.(editor));
return () => {
unsubs.forEach((fn) => fn?.());
};
});
const { Canvas } = (0, import_editor.useEditorComponents)();
const { ContextMenu } = (0, import_components.useTldrawUiComponents)();
if (ContextMenu) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {});
}
if (Canvas) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Canvas, {});
}
return null;
}
//# sourceMappingURL=Tldraw.js.map