@excalidraw/excalidraw 0.17.1-f597bd3 → 0.17.1-f59b4f6

package/dist/excalidraw/components/App.js

@@ -653,7 +653,7 @@ class App extends React.Component {
                                         ? src.srcdoc(this.state.theme)
                                         : undefined, src: src?.type !== "document" ? src?.link ?? "" : undefined, 
                                     // https://stackoverflow.com/q/18470015
-                                    scrolling: "no", referrerPolicy: "no-referrer-when-downgrade", title: "Excalidraw Embedded Content", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads" })) })] }) }, el.id));
+                                    scrolling: "no", referrerPolicy: "no-referrer-when-downgrade", title: "Excalidraw Embedded Content", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, sandbox: `${src?.sandbox?.allowSameOrigin ? "allow-same-origin" : ""} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads` })) })] }) }, el.id));
             }) }));
     }
     getFrameNameDOMId = (frameElement) => {
@@ -2849,7 +2849,7 @@ class App extends React.Component {
                     ShapeCache.generateElementShape(element, null)[0];
                 const [, , , , cx, cy] = getElementAbsoluteCoords(element, this.scene.getNonDeletedElementsMap());
                 return shouldTestInside(element)
-                    ? getClosedCurveShape(roughShape, [element.x, element.y], element.angle, [cx, cy])
+                    ? getClosedCurveShape(element, roughShape, [element.x, element.y], element.angle, [cx, cy])
                     : getCurveShape(roughShape, [element.x, element.y], element.angle, [
                         cx,
                         cy,

package/dist/excalidraw/data/url.d.ts

@@ -1,3 +1,4 @@
+export declare const sanitizeHTMLAttribute: (html: string) => string;
 export declare const normalizeLink: (link: string) => string;
 export declare const isLocalLink: (link: string | null) => boolean;
 /**

package/dist/excalidraw/data/url.js

@@ -1,10 +1,13 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
+export const sanitizeHTMLAttribute = (html) => {
+    return html.replace(/"/g, """);
+};
 export const normalizeLink = (link) => {
     link = link.trim();
     if (!link) {
         return link;
     }
-    return sanitizeUrl(link);
+    return sanitizeUrl(sanitizeHTMLAttribute(link));
 };
 export const isLocalLink = (link) => {
     return !!(link?.includes(location.origin) || link?.startsWith("/"));

package/dist/excalidraw/element/embeddable.js

@@ -5,16 +5,17 @@ import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textElement";
 import { isIframeElement } from "./typeChecks";
+import { sanitizeHTMLAttribute } from "../data/url";
 const embeddedLinkCache = new Map();
 const RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
-const RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+const RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
-const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
-const RE_GH_GIST_EMBED = /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
+const RE_GH_GIST = /^https:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)/;
+const RE_GH_GIST_EMBED = /^<script[\s\S]*?\ssrc=["'](https:\/\/gist\.github\.com\/.*?)\.js["']/i;
 // not anchored to start to allow <blockquote> twitter embeds
-const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:twitter|x).com/;
-const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https:\/\/(?:twitter|x).com\/[^"']*)/i;
-const RE_VALTOWN = /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+const RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com\/[^/]+\/status\/(\d+)/;
+const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;
+const RE_VALTOWN = /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
 const RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
 const RE_GIPHY = /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
 const ALLOWED_DOMAINS = new Set([
@@ -115,55 +116,36 @@ export const getEmbedLink = (link) => {
         return { link, intrinsicSize: aspectRatio, type };
     }
     if (RE_TWITTER.test(link)) {
-        // the embed srcdoc still supports twitter.com domain only
-        link = link.replace(/\bx.com\b/, "twitter.com");
-        let ret;
-        // assume embed code
-        if (/<blockquote/.test(link)) {
-            const srcDoc = createSrcDoc(link);
-            ret = {
-                type: "document",
-                srcdoc: () => srcDoc,
-                intrinsicSize: { w: 480, h: 480 },
-            };
-            // assume regular tweet url
-        }
-        else {
-            ret = {
-                type: "document",
-                srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
-                intrinsicSize: { w: 480, h: 480 },
-            };
-        }
+        const postId = link.match(RE_TWITTER)[1];
+        // the embed srcdoc still supports twitter.com domain only.
+        // Note that we don't attempt to parse the username as it can consist of
+        // non-latin1 characters, and the username in the url can be set to anything
+        // without affecting the embed.
+        const safeURL = sanitizeHTMLAttribute(`https://twitter.com/x/status/${postId}`);
+        const ret = {
+            type: "document",
+            srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${safeURL}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
+            intrinsicSize: { w: 480, h: 480 },
+            sandbox: { allowSameOrigin: true },
+        };
         embeddedLinkCache.set(originalLink, ret);
         return ret;
     }
     if (RE_GH_GIST.test(link)) {
-        let ret;
-        // assume embed code
-        if (/<script>/.test(link)) {
-            const srcDoc = createSrcDoc(link);
-            ret = {
-                type: "document",
-                srcdoc: () => srcDoc,
-                intrinsicSize: { w: 550, h: 720 },
-            };
-            // assume regular url
-        }
-        else {
-            ret = {
-                type: "document",
-                srcdoc: () => createSrcDoc(`
-          <script src="${link}.js"></script>
+        const [, user, gistId] = link.match(RE_GH_GIST);
+        const safeURL = sanitizeHTMLAttribute(`https://gist.github.com/${user}/${gistId}`);
+        const ret = {
+            type: "document",
+            srcdoc: () => createSrcDoc(`
+          <script src="${safeURL}.js"></script>
           <style type="text/css">
             * { margin: 0px; }
             table, .gist { height: 100%; }
             .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
           </style>
         `),
-                intrinsicSize: { w: 550, h: 720 },
-            };
-        }
+            intrinsicSize: { w: 550, h: 720 },
+        };
         embeddedLinkCache.set(link, ret);
         return ret;
     }

package/dist/excalidraw/element/types.d.ts

@@ -98,6 +98,9 @@ export type IframeData = ({
         h: number;
     };
     error?: Error;
+    sandbox?: {
+        allowSameOrigin?: boolean;
+    };
 } & ({
     type: "video" | "generic";
     link: string;

package/dist/excalidraw/renderer/staticScene.js

@@ -1,12 +1,13 @@
 import { FRAME_STYLE } from "../constants";
 import { getElementAbsoluteCoords } from "../element";
 import { elementOverlapsWithFrame, getTargetFrame, isElementInFrame, } from "../frame";
-import { isEmbeddableElement, isIframeLikeElement, } from "../element/typeChecks";
+import { isEmbeddableElement, isIframeLikeElement, isTextElement, } from "../element/typeChecks";
 import { renderElement } from "../renderer/renderElement";
 import { createPlaceholderEmbeddableLabel } from "../element/embeddable";
 import { EXTERNAL_LINK_IMG, getLinkHandleFromCoords, } from "../components/hyperlink/helpers";
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 import { throttleRAF } from "../utils";
+import { getBoundTextElement } from "../element/textElement";
 const strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
     const BOLD_LINE_FREQUENCY = 5;
     let GridLineColor;
@@ -121,21 +122,31 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
         .forEach((element) => {
         try {
             const frameId = element.frameId || appState.frameToHighlight?.id;
+            if (isTextElement(element) &&
+                element.containerId &&
+                elementsMap.has(element.containerId)) {
+                // will be rendered with the container
+                return;
+            }
+            context.save();
             if (frameId &&
                 appState.frameRendering.enabled &&
                 appState.frameRendering.clip) {
-                context.save();
                 const frame = getTargetFrame(element, elementsMap, appState);
                 // TODO do we need to check isElementInFrame here?
                 if (frame && isElementInFrame(element, elementsMap, appState)) {
                     frameClip(frame, context, renderConfig, appState);
                 }
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
-                context.restore();
             }
             else {
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
             }
+            const boundTextElement = getBoundTextElement(element, allElementsMap);
+            if (boundTextElement) {
+                renderElement(boundTextElement, elementsMap, allElementsMap, rc, context, renderConfig, appState);
+            }
+            context.restore();
             if (!isExporting) {
                 renderLinkIcon(element, context, appState, elementsMap);
             }

package/dist/excalidraw/renderer/staticSvgScene.js

@@ -361,8 +361,18 @@ export const renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, re
         .filter((el) => !isIframeLikeElement(el))
         .forEach((element) => {
         if (!element.isDeleted) {
+            if (isTextElement(element) &&
+                element.containerId &&
+                elementsMap.has(element.containerId)) {
+                // will be rendered with the container
+                return;
+            }
             try {
                 renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);
+                const boundTextElement = getBoundTextElement(element, elementsMap);
+                if (boundTextElement) {
+                    renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);
+                }
             }
             catch (error) {
                 console.error(error);