docusaurus-live-brython 3.0.0-beta.9 → 3.0.1

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.jsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
-import Graphics from 'docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
 import styles from './styles.module.css';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 const downloadCanvas = (canvasId) => {
     const canvas = document.getElementById(canvasId);
     if (!canvas) {
@@ -14,7 +14,7 @@ const downloadCanvas = (canvasId) => {
     dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
     /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
     dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');
-    var downloadLink = document.createElement("a");
+    var downloadLink = document.createElement('a');
     downloadLink.href = dt;
     downloadLink.download = `${canvasId}.png`;
     document.body.appendChild(downloadLink);
@@ -22,10 +22,9 @@ const downloadCanvas = (canvasId) => {
     document.body.removeChild(downloadLink);
 };
 const Canvas = () => {
-    const { store } = useScript();
-    // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
-    const codeId = useStore(store, (state) => state.codeId);
-    return (<Graphics controls={<Button icon='Download' iconSize='12px' onClick={() => {
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
+    return (<Graphics controls={<Button icon="Download" iconSize="12px" onClick={() => {
                 downloadCanvas(DOM_ELEMENT_IDS.canvasContainer(codeId));
             }} title="Download SVG" className={styles.slimStrippedButton}/>} main={<canvas id={DOM_ELEMENT_IDS.canvasContainer(codeId)} width="500" height="500" style={{
                 display: 'block',

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 declare const Turtle: () => React.JSX.Element;
 export default Turtle;
+//# sourceMappingURL=Turtle.d.ts.map

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Turtle.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/CodeEditor/Editor/Result/Graphics/Turtle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,QAAA,MAAM,MAAM,yBAwCX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.jsx

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
-import Graphics from 'docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics';
-import { saveSvg } from 'docusaurus-live-brython/theme/CodeEditor/Editor/utils/saveSvg';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
+import { saveSvg } from '@theme/CodeEditor/Editor/utils/saveSvg';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 const Turtle = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
-    const code = useStore(store, (state) => state.code);
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
+    const code = useScript(store, 'code');
     return (<Graphics controls={<React.Fragment>
-                    <Button icon='AnimationPlay' onClick={() => {
+                    <Button icon="AnimationPlay" onClick={() => {
                 const turtleResult = document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId));
                 if (turtleResult) {
                     saveSvg(turtleResult, `${codeId}`, code, true);
                 }
-            }} className={clsx(styles.slimStrippedButton)} iconSize='12px' title="Download Animated SVG"/>
-                    <Button icon='Download' iconSize='12px' onClick={() => {
+            }} className={clsx(styles.slimStrippedButton)} iconSize="12px" title="Download Animated SVG"/>
+                    <Button icon="Download" iconSize="12px" onClick={() => {
                 const turtleResult = document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId));
                 if (turtleResult) {
                     saveSvg(turtleResult, `${codeId}`, code);

package/lib/theme/CodeEditor/Editor/Result/Graphics/index.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-interface Props {
-    controls?: JSX.Element;
-    main?: JSX.Element;
+export interface Props {
+    controls?: React.ReactNode;
+    main?: React.ReactNode;
 }
 declare const Graphics: (props: Props) => React.JSX.Element;
 export default Graphics;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/Editor/Result/Graphics/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/CodeEditor/Editor/Result/Graphics/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,QAAA,MAAM,QAAQ,GAAI,OAAO,KAAK,sBAgC7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/theme/CodeEditor/Editor/Result/Graphics/index.jsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import Draggable from 'react-draggable';
-import { checkForButtonClick } from 'docusaurus-live-brython/theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 const Graphics = (props) => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
-    return (<Draggable onStop={checkForButtonClick} positionOffset={{ x: 0, y: '-50%' }}>
-            <div className={styles.brythonGraphicsResult}>
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
+    const nodeRef = React.useRef(null);
+    return (<Draggable onStop={checkForButtonClick} positionOffset={{ x: '15%', y: '25%' }} nodeRef={nodeRef}>
+            <div className={styles.brythonGraphicsResult} ref={nodeRef}>
                 <div className={styles.brythonGraphicsResultHead}>
                     <span>Output</span>
                     <span className={styles.spacer}></span>
@@ -18,9 +20,9 @@ const Graphics = (props) => {
                     <Button icon="Close" className={clsx(styles.closeButton)} onClick={() => {
             store.stopScript();
             store.closeGraphicsModal();
-        }} iconSize='12px'/>
+        }} iconSize="12px"/>
                 </div>
-                <div id={DOM_ELEMENT_IDS.graphicsResult(codeId)} className="brython-graphics-result">
+                <div id={DOM_ELEMENT_IDS.graphicsResult(codeId)} className="brython-graphics-result" key={`exec-${graphicsModalExecutionNr}`}>
                     {props.main}
                 </div>
             </div>

package/lib/theme/CodeEditor/Editor/Result/Graphics/styles.module.css

@@ -38,6 +38,6 @@
     margin-right: 0;
 }
 
-html[data-theme='dark'] .brythonGraphicsResult {    
+html[data-theme='dark'] .brythonGraphicsResult {
     background-color: rgba(179, 179, 179, 0.671);
-}
+}

package/lib/theme/CodeEditor/Editor/Result/index.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-interface Props {
-}
-declare const Result: (props: Props) => React.JSX.Element;
+declare const Result: () => React.JSX.Element;
 export default Result;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/Editor/Result/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/CodeEditor/Editor/Result/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,MAAM,yBAqBX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/theme/CodeEditor/Editor/Result/index.jsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-// @ts-ignore
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-const Result = (props) => {
-    const { store } = useScript();
-    const logs = useStore(store, (state) => state.logs);
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+const Result = () => {
+    const store = useStore();
+    const logs = useScript(store, 'logs');
     if (logs.length === 0) {
         return null;
     }
     const errors = [];
     let lineNr = 1;
-    const code = logs.map((msg) => {
+    const code = logs.slice().map((msg) => {
         const msgLen = (msg.output || '').split('\n').length - 1;
         if (msg.type === 'stderr') {
             errors.push(`${lineNr}-${lineNr + msgLen}`);
@@ -20,9 +19,7 @@ const Result = (props) => {
         return msg.output;
     });
     return (<div className={styles.result}>
-            <CodeBlock metastring={`{${errors.join(',')}}`}>
-                {code.join('')}
-            </CodeBlock>
+            <CodeBlock metastring={`{${errors.join(',')}}`}>{code.join('')}</CodeBlock>
         </div>);
 };
 export default Result;

package/lib/theme/CodeEditor/Editor/Result/styles.module.css

@@ -1,19 +1,24 @@
 .result {
-	grid-area: result;
-	max-width: 100%;
-	overflow-x: auto;
+    grid-area: result;
+    max-width: 100%;
+    overflow-x: auto;
     --ifm-leading: 0;
     flex-grow: 1;
     flex-basis: 80ch;
 }
 
-.result>pre {
-	margin-bottom: 0px;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
+.result > pre {
+    margin-bottom: 0px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
 
 .result :global(.theme-code-block-highlighted-line) {
-	color: var(--ifm-color-danger-darker) !important;
-	background: transparent;
-}
+    color: var(--ifm-color-danger-darker) !important;
+    background: transparent;
+}
+
+.result pre {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

package/lib/theme/CodeEditor/Editor/index.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-interface Props {
+import * as React from 'react';
+export interface Props {
     slim: boolean;
     title: string;
     resettable: boolean;
@@ -7,9 +7,12 @@ interface Props {
     download: boolean;
     lang: string;
     noCompare: boolean;
-    precode: string;
+    preCode: string;
+    postCode: string;
     maxLines?: number;
     versioned?: boolean;
+    onChange?: (code: string) => void;
 }
 declare const Editor: (props: Props) => React.JSX.Element;
 export default Editor;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/Editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Editor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,MAAM,GAAI,OAAO,KAAK,sBA0C3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/theme/CodeEditor/Editor/index.jsx

@@ -1,32 +1,38 @@
-import * as React from "react";
-import { DOM_ELEMENT_IDS, } from "docusaurus-live-brython/theme/CodeEditor/constants";
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Result from "docusaurus-live-brython/theme/CodeEditor/Editor/Result";
-import Turtle from "docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics/Turtle";
-import Canvas from "docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics/Canvas";
-import Graphics from "docusaurus-live-brython/theme/CodeEditor/Editor/Result/Graphics";
-import Header from "docusaurus-live-brython/theme/CodeEditor/Editor/Header";
-import EditorAce from "docusaurus-live-brython/theme/CodeEditor/Editor/EditorAce";
+import * as React from 'react';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Result from '@theme/CodeEditor/Editor/Result';
+import Turtle from '@theme/CodeEditor/Editor/Result/Graphics/Turtle';
+import Canvas from '@theme/CodeEditor/Editor/Result/Graphics/Canvas';
+import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
+import Header from '@theme/CodeEditor/Editor/Header';
+import EditorAce from '@theme/CodeEditor/Editor/EditorAce';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import HiddenCode from '@theme/CodeEditor/Editor/HiddenCode';
 const Editor = (props) => {
-    const { store } = useScript();
-    const lang = useStore(store, (state) => state.lang);
-    const codeId = useStore(store, (state) => state.codeId);
-    const hasCanvasOutput = useStore(store, (state) => state.hasCanvasOutput);
-    const hasTurtleOutput = useStore(store, (state) => state.hasTurtleOutput);
-    const isGraphicsmodalOpen = useStore(store, (state) => state.isGraphicsmodalOpen);
+    const store = useStore();
+    const lang = useScript(store, 'lang');
+    const codeId = useScript(store, 'codeId');
+    const hasCanvasOutput = useScript(store, 'hasCanvasOutput');
+    const hasTurtleOutput = useScript(store, 'hasTurtleOutput');
+    const graphicsModalExecutionNr = useScript(store, 'graphicsModalExecutionNr');
     return (<React.Fragment>
-      <Header slim={props.slim} title={props.title} resettable={props.resettable} download={props.download} noCompare={props.noCompare}/>
-      <EditorAce showLineNumbers={props.showLineNumbers} maxLines={props.maxLines} versioned={props.versioned}/>
-      {lang === 'python' &&
-            <>
-          <Result />
-          <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
-          {isGraphicsmodalOpen && (<>
-              {hasTurtleOutput && (<Turtle />)}
-              {hasCanvasOutput && (<Canvas />)}
-              {!hasCanvasOutput && !hasTurtleOutput && (<Graphics />)}
-            </>)}
-        </>}
-    </React.Fragment>);
+            <Header slim={props.slim} title={props.title} resettable={props.resettable} download={props.download} noCompare={props.noCompare}/>
+            <div className={clsx(styles.editorContainer)}>
+                <HiddenCode type="pre" code={props.preCode}/>
+                <EditorAce showLineNumbers={props.showLineNumbers} maxLines={props.maxLines} versioned={props.versioned} onChange={props.onChange}/>
+                <HiddenCode type="post" code={props.postCode}/>
+            </div>
+            {lang === 'python' && (<>
+                    <Result />
+                    <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
+                    {graphicsModalExecutionNr > 0 && (<>
+                            {hasTurtleOutput && <Turtle />}
+                            {hasCanvasOutput && <Canvas />}
+                            {!hasCanvasOutput && !hasTurtleOutput && <Graphics />}
+                        </>)}
+                </>)}
+        </React.Fragment>);
 };
 export default Editor;

package/lib/theme/CodeEditor/Editor/styles.module.css

@@ -1,20 +1,28 @@
+.editorContainer {
+    grid-area: editor;
+    position: relative;
+    --show-hidden-code-toggle-opacity: 0;
+}
 .editor {
-	grid-area: editor;
     display: flex;
     flex-wrap: wrap;
 }
 
 .editor .noGutter :global(.ace_scroller) {
-	left: 4px !important;
+    left: 4px !important;
 }
 
 .editor :global(.ace_scrollbar.ace_scrollbar-h) {
-	overflow-x: hidden !important;
+    overflow-x: hidden !important;
 }
 
 .brythonEditor {
-	flex-grow: 1;
-	flex-basis: 80ch;
-	/*rtl:ignore*/
-	direction: ltr;
+    flex-grow: 1;
+    flex-basis: 80ch;
+    /*rtl:ignore*/
+    direction: ltr;
+}
+
+.editorContainer:hover {
+    --show-hidden-code-toggle-opacity: 1;
 }

package/lib/theme/CodeEditor/Editor/utils/checkForButtonClick.d.ts

@@ -6,3 +6,4 @@ import { DraggableEvent } from 'react-draggable';
  */
 declare const checkForButtonClick: (event: DraggableEvent) => void;
 export { checkForButtonClick };
+//# sourceMappingURL=checkForButtonClick.d.ts.map

package/lib/theme/CodeEditor/Editor/utils/checkForButtonClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkForButtonClick.d.ts","sourceRoot":"","sources":["../../../../../src/theme/CodeEditor/Editor/utils/checkForButtonClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD;;;;GAIG;AACH,QAAA,MAAM,mBAAmB,GAAI,OAAO,cAAc,SAwBjD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/theme/CodeEditor/Editor/utils/saveSvg.d.ts

@@ -1,2 +1,3 @@
 declare const saveSvg: (svgEl: SVGSVGElement, name: string, code?: string, animated?: boolean) => void;
 export { saveSvg };
+//# sourceMappingURL=saveSvg.d.ts.map

package/lib/theme/CodeEditor/Editor/utils/saveSvg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"saveSvg.d.ts","sourceRoot":"","sources":["../../../../../src/theme/CodeEditor/Editor/utils/saveSvg.ts"],"names":[],"mappings":"AAYA,QAAA,MAAM,OAAO,GAAI,OAAO,aAAa,EAAE,MAAM,MAAM,EAAE,OAAO,MAAM,EAAE,WAAW,OAAO,SAyErF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/lib/theme/CodeEditor/Editor/utils/saveSvg.js

@@ -1,4 +1,4 @@
-import { removeAnimations } from "docusaurus-live-brython/theme/CodeEditor/Editor/utils/svgWithoutAnimations";
+import { removeAnimations } from '@theme/CodeEditor/Editor/utils/svgWithoutAnimations';
 const duration = (anim) => {
     const dur = anim.getAttribute('dur') || '';
     if (/ms$/.test(dur)) {
@@ -10,7 +10,7 @@ const duration = (anim) => {
     return 0;
 };
 const saveSvg = (svgEl, name, code, animated) => {
-    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     const bbox = svgEl.getBBox();
     const svgProps = {
         viewBox: `${bbox.x - 5},${bbox.y - 5},${bbox.width + 10},${bbox.height + 10}`,
@@ -25,12 +25,16 @@ const saveSvg = (svgEl, name, code, animated) => {
     if (animated || window.__KEEP_TURTLE_ANIMATIONS__) {
         const saveSvg = svgEl.cloneNode(true);
         const anims = saveSvg.querySelectorAll('animate');
-        const frameIds = Array.from(anims).map((n) => (n.id.match(/\d+/) || [])[0]).filter((nr) => nr).map(nr => Number.parseInt(nr)).sort((a, b) => a > b ? 1 : -1);
+        const frameIds = Array.from(anims)
+            .map((n) => (n.id.match(/\d+/) || [])[0])
+            .filter((nr) => nr)
+            .map((nr) => Number.parseInt(nr))
+            .sort((a, b) => (a > b ? 1 : -1));
         if (frameIds.length > 0) {
             const lastAnim = frameIds[frameIds.length - 1];
             const firstAnim = saveSvg.getElementById('animation_frame0');
             if (firstAnim) {
-                const looper = document.createElement("rect");
+                const looper = document.createElement('rect');
                 looper.innerHTML = `  <rect><animate id="looper_animation" begin="0;animation_frame${lastAnim}.end" dur="1ms" attributeName="visibility" from="hide" to="hide"/></rect>`;
                 firstAnim.parentElement.insertBefore(looper, firstAnim);
                 firstAnim.setAttribute('begin', 'looper_animation.end');
@@ -47,7 +51,9 @@ const saveSvg = (svgEl, name, code, animated) => {
         saveSvg.setAttribute('height', `${svgProps.height}`);
         saveSvg.setAttribute('width', `${svgProps.width}`);
         wrapper.innerHTML = `${preface}\r\n${saveSvg.outerHTML}`;
-        animDuration = Array.from(saveSvg.querySelectorAll('animate')).map(duration).reduce((d, c) => d + c, 0);
+        animDuration = Array.from(saveSvg.querySelectorAll('animate'))
+            .map(duration)
+            .reduce((d, c) => d + c, 0);
     }
     else {
         const svgWithoutAnim = removeAnimations(`${preface}${svgData}`, svgProps);
@@ -62,11 +68,16 @@ const saveSvg = (svgEl, name, code, animated) => {
         metadata.appendChild(script);
         svg.appendChild(metadata);
     }
-    var svgBlob = new Blob([wrapper.innerHTML], { type: "image/svg+xml;charset=utf-8" });
+    var svgBlob = new Blob([wrapper.innerHTML], {
+        type: 'image/svg+xml;charset=utf-8'
+    });
     var svgUrl = URL.createObjectURL(svgBlob);
-    var downloadLink = document.createElement("a");
+    var downloadLink = document.createElement('a');
     downloadLink.href = svgUrl;
-    downloadLink.download = animDuration > 0 ? `${name}__${(Math.round(animDuration * 10) / 10).toString().replace('.', '_')}s.svg` : `${name}.svg`;
+    downloadLink.download =
+        animDuration > 0
+            ? `${name}__${(Math.round(animDuration * 10) / 10).toString().replace('.', '_')}s.svg`
+            : `${name}.svg`;
     document.body.appendChild(downloadLink);
     downloadLink.click();
     document.body.removeChild(downloadLink);

package/lib/theme/CodeEditor/Editor/utils/svgWithoutAnimations.d.ts

@@ -1,2 +1,3 @@
 declare const removeAnimations: (svg: string, svgProps: Record<string, string | number>) => string;
 export { removeAnimations };
+//# sourceMappingURL=svgWithoutAnimations.d.ts.map

package/lib/theme/CodeEditor/Editor/utils/svgWithoutAnimations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgWithoutAnimations.d.ts","sourceRoot":"","sources":["../../../../../src/theme/CodeEditor/Editor/utils/svgWithoutAnimations.ts"],"names":[],"mappings":"AA6LA,QAAA,MAAM,gBAAgB,GAAI,KAAK,MAAM,EAAE,UAAU,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAG,MAOlF,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}