@tldraw/tlschema
Version:
A tiny little drawing app (schema).
314 lines (313 loc) • 9.64 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 TLEmbedShape_exports = {};
__export(TLEmbedShape_exports, {
embedShapeMigrations: () => embedShapeMigrations,
embedShapeProps: () => embedShapeProps,
embedShapeVersions: () => Versions
});
module.exports = __toCommonJS(TLEmbedShape_exports);
var import_utils = require("@tldraw/utils");
var import_validate = require("@tldraw/validate");
var import_TLShape = require("../records/TLShape");
const TLDRAW_APP_RE = /(^\/r\/[^/]+\/?$)/;
const EMBED_DEFINITIONS = [
{
hostnames: ["beta.tldraw.com", "tldraw.com", "localhost:3000"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(TLDRAW_APP_RE)) {
return url;
}
return;
}
},
{
hostnames: ["figma.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(/^\/embed\/?$/)) {
const outUrl = urlObj.searchParams.get("url");
if (outUrl) {
return outUrl;
}
}
return;
}
},
{
hostnames: ["google.*"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (!urlObj) return;
const matches = urlObj.pathname.match(/^\/maps\/embed\/v1\/view\/?$/);
if (matches && urlObj.searchParams.has("center") && urlObj.searchParams.get("zoom")) {
const zoom = urlObj.searchParams.get("zoom");
const [lat, lon] = urlObj.searchParams.get("center").split(",");
return `https://www.google.com/maps/@${lat},${lon},${zoom}z`;
}
return;
}
},
{
hostnames: ["val.town"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
const matches = urlObj && urlObj.pathname.match(/\/embed\/(.+)\/?/);
if (matches) {
return `https://www.val.town/v/${matches[1]}`;
}
return;
}
},
{
hostnames: ["codesandbox.io"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
const matches = urlObj && urlObj.pathname.match(/\/embed\/([^/]+)\/?/);
if (matches) {
return `https://codesandbox.io/s/${matches[1]}`;
}
return;
}
},
{
hostnames: ["codepen.io"],
fromEmbedUrl: (url) => {
const CODEPEN_EMBED_REGEXP = /https:\/\/codepen.io\/([^/]+)\/embed\/([^/]+)/;
const matches = url.match(CODEPEN_EMBED_REGEXP);
if (matches) {
const [_, user, id] = matches;
return `https://codepen.io/${user}/pen/${id}`;
}
return;
}
},
{
hostnames: ["scratch.mit.edu"],
fromEmbedUrl: (url) => {
const SCRATCH_EMBED_REGEXP = /https:\/\/scratch.mit.edu\/projects\/embed\/([^/]+)/;
const matches = url.match(SCRATCH_EMBED_REGEXP);
if (matches) {
const [_, id] = matches;
return `https://scratch.mit.edu/projects/${id}`;
}
return;
}
},
{
hostnames: ["*.youtube.com", "youtube.com", "youtu.be"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (!urlObj) return;
const hostname = urlObj.hostname.replace(/^www./, "");
if (hostname === "youtube.com") {
const matches = urlObj.pathname.match(/^\/embed\/([^/]+)\/?/);
if (matches) {
return `https://www.youtube.com/watch?v=${matches[1]}`;
}
}
return;
}
},
{
hostnames: ["calendar.google.*"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
const srcQs = urlObj?.searchParams.get("src");
if (urlObj?.pathname.match(/\/calendar\/embed/) && srcQs) {
urlObj.pathname = "/calendar/u/0";
const keys = Array.from(urlObj.searchParams.keys());
for (const key of keys) {
urlObj.searchParams.delete(key);
}
urlObj.searchParams.set("cid", srcQs);
return urlObj.href;
}
return;
}
},
{
hostnames: ["docs.google.*"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj?.pathname.match(/^\/presentation/) && urlObj?.pathname.match(/\/embed\/?$/)) {
urlObj.pathname = urlObj.pathname.replace(/\/embed$/, "/pub");
const keys = Array.from(urlObj.searchParams.keys());
for (const key of keys) {
urlObj.searchParams.delete(key);
}
return urlObj.href;
}
return;
}
},
{
hostnames: ["gist.github.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(/\/([^/]+)\/([^/]+)/)) {
if (!url.split("/").pop()) return;
return url;
}
return;
}
},
{
hostnames: ["replit.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(/\/@([^/]+)\/([^/]+)/) && urlObj.searchParams.has("embed")) {
urlObj.searchParams.delete("embed");
return urlObj.href;
}
return;
}
},
{
hostnames: ["felt.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(/^\/embed\/map\//)) {
urlObj.pathname = urlObj.pathname.replace(/^\/embed/, "");
return urlObj.href;
}
return;
}
},
{
hostnames: ["open.spotify.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(/^\/embed\/(artist|album)\//)) {
return urlObj.origin + urlObj.pathname.replace(/^\/embed/, "");
}
return;
}
},
{
hostnames: ["vimeo.com", "player.vimeo.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.hostname === "player.vimeo.com") {
const matches = urlObj.pathname.match(/^\/video\/([^/]+)\/?$/);
if (matches) {
return "https://vimeo.com/" + matches[1];
}
}
return;
}
},
{
hostnames: ["excalidraw.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.hash.match(/#room=/)) {
return url;
}
return;
}
},
{
hostnames: ["observablehq.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.pathname.match(/^\/embed\/@([^/]+)\/([^/]+)\/?$/)) {
return `${urlObj.origin}${urlObj.pathname.replace("/embed", "")}#cell-*`;
}
if (urlObj && urlObj.pathname.match(/^\/embed\/([^/]+)\/?$/)) {
return `${urlObj.origin}${urlObj.pathname.replace("/embed", "/d")}#cell-*`;
}
return;
}
},
{
hostnames: ["desmos.com"],
fromEmbedUrl: (url) => {
const urlObj = (0, import_utils.safeParseUrl)(url);
if (urlObj && urlObj.hostname === "www.desmos.com" && urlObj.pathname.match(/^\/calculator\/([^/]+)\/?$/) && urlObj.search === "?embed" && urlObj.hash === "") {
return url.replace("?embed", "");
}
return;
}
}
];
const embedShapeProps = {
w: import_validate.T.nonZeroNumber,
h: import_validate.T.nonZeroNumber,
url: import_validate.T.string
};
const Versions = (0, import_TLShape.createShapePropsMigrationIds)("embed", {
GenOriginalUrlInEmbed: 1,
RemoveDoesResize: 2,
RemoveTmpOldUrl: 3,
RemovePermissionOverrides: 4
});
const embedShapeMigrations = (0, import_TLShape.createShapePropsMigrationSequence)({
sequence: [
{
id: Versions.GenOriginalUrlInEmbed,
// add tmpOldUrl property
up: (props) => {
try {
const url = props.url;
const host = new URL(url).host.replace("www.", "");
let originalUrl;
for (const localEmbedDef of EMBED_DEFINITIONS) {
if (localEmbedDef.hostnames.includes(host)) {
try {
originalUrl = localEmbedDef.fromEmbedUrl(url);
} catch (err) {
console.warn(err);
}
}
}
props.tmpOldUrl = props.url;
props.url = originalUrl ?? "";
} catch {
props.url = "";
props.tmpOldUrl = props.url;
}
},
down: "retired"
},
{
id: Versions.RemoveDoesResize,
up: (props) => {
delete props.doesResize;
},
down: "retired"
},
{
id: Versions.RemoveTmpOldUrl,
up: (props) => {
delete props.tmpOldUrl;
},
down: "retired"
},
{
id: Versions.RemovePermissionOverrides,
up: (props) => {
delete props.overridePermissions;
},
down: "retired"
}
]
});
//# sourceMappingURL=TLEmbedShape.js.map