diff --git a/.build/webpack.config.umd.js b/.build/webpack.config.umd.js index fdfd78e..cf4e46e 100644 --- a/.build/webpack.config.umd.js +++ b/.build/webpack.config.umd.js @@ -1,5 +1,7 @@ const path = require("path"); const webpack = require("webpack"); +const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") + .BundleAnalyzerPlugin; module.exports = { entry: "./src", @@ -13,7 +15,12 @@ module.exports = { new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), - new webpack.DefinePlugin({ "process.env.NODE_ENV": '"production"' }) + new webpack.DefinePlugin({ "process.env.NODE_ENV": '"production"' }), + new BundleAnalyzerPlugin({ + analyzerMode: "static", + defaultSizes: "gzip", + generateStatsFile: true + }) ], module: { rules: [ diff --git a/package-lock.json b/package-lock.json index 406827b..2ef7670 100644 --- a/package-lock.json +++ b/package-lock.json @@ -672,6 +672,12 @@ "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=", "dev": true }, + "async-limiter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", + "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1696,6 +1702,17 @@ "tweetnacl": "0.14.5" } }, + "bfj-node4": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.2.1.tgz", + "integrity": "sha512-w+OTPD/R0AvDVR/sy/uVUVeoCpEgUoYj9/1P2zB6mR1yx7F/ADzLX4nlvZ/91WWzGgdZnuLxWP/J89D7ZDt0DA==", + "dev": true, + "requires": { + "bluebird": "3.5.1", + "check-types": "7.3.0", + "tryer": "1.0.0" + } + }, "big.js": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", @@ -2066,6 +2083,12 @@ "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", "dev": true }, + "check-types": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.3.0.tgz", + "integrity": "sha1-Ro9XGkQ1wkJI9f0MsOjYfDw0Hn0=", + "dev": true + }, "chokidar": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz", @@ -2189,17 +2212,6 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, - "clipboard": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz", - "integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=", - "optional": true, - "requires": { - "good-listener": "1.2.2", - "select": "1.1.2", - "tiny-emitter": "2.0.2" - } - }, "cliui": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", @@ -2307,14 +2319,6 @@ "delayed-stream": "1.0.0" } }, - "comma-separated-tokens": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.4.tgz", - "integrity": "sha1-cgg+WNSkYvAYZvZhf02Yo807ikY=", - "requires": { - "trim": "0.0.1" - } - }, "commander": { "version": "2.12.2", "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz", @@ -3279,7 +3283,8 @@ "date-fns": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz", - "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==" + "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==", + "dev": true }, "date-now": { "version": "0.1.4", @@ -3408,12 +3413,6 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, - "delegate": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.1.3.tgz", - "integrity": "sha1-moJRp3fXAl+qVXN7w7BxdCEnqf0=", - "optional": true - }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -3608,6 +3607,12 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", "dev": true }, + "ejs": { + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.5.7.tgz", + "integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo=", + "dev": true + }, "electron-to-chromium": { "version": "1.3.27", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz", @@ -4339,6 +4344,12 @@ "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=", "dev": true }, + "filesize": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.0.tgz", + "integrity": "sha512-g5OWtoZWcPI56js1DFhIEqyG9tnu/7sG3foHwgS9KGYFMfsYguI3E+PRVCmtmE96VajQIEMRU2OhN+ME589Gdw==", + "dev": true + }, "fill-range": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz", @@ -5779,15 +5790,6 @@ "pinkie-promise": "2.0.1" } }, - "good-listener": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", - "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", - "optional": true, - "requires": { - "delegate": "3.1.3" - } - }, "graceful-fs": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", @@ -5947,30 +5949,6 @@ "minimalistic-assert": "1.0.0" } }, - "hast-util-parse-selector": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.1.0.tgz", - "integrity": "sha1-tVwPS7e7IEDIicMl74erKcOBArQ=" - }, - "hastscript": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-3.1.0.tgz", - "integrity": "sha512-8V34dMSDT1Ik+ZSgTzCLdyp89MrWxcxctXPxhmb72GQj1Xkw1aHPM9UaHCWewvH2Q+PVkYUm4ZJVw4T0dgEGNA==", - "requires": { - "camelcase": "3.0.0", - "comma-separated-tokens": "1.0.4", - "hast-util-parse-selector": "2.1.0", - "property-information": "3.2.0", - "space-separated-tokens": "1.1.1" - }, - "dependencies": { - "camelcase": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", - "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=" - } - } - }, "hawk": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz", @@ -5989,11 +5967,6 @@ "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=", "dev": true }, - "highlight.js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", - "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6954,11 +6927,6 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, - "javascript-stringify": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-1.6.0.tgz", - "integrity": "sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=" - }, "jest-get-type": { "version": "21.2.0", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-21.2.0.tgz", @@ -7833,14 +7801,6 @@ "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", "dev": true }, - "lowlight": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.1.tgz", - "integrity": "sha512-CpDhyVhI+xHjruiGvH2F/Fr5q5aTn5A6Oyh7MI+4oI8G0A1E7p9a3Zqv9Hzx9WByK8gAiNifEueAXz+cA2xdEA==", - "requires": { - "highlight.js": "9.12.0" - } - }, "lru-cache": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", @@ -8417,6 +8377,12 @@ "mimic-fn": "1.1.0" } }, + "opener": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz", + "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=", + "dev": true + }, "opn": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz", @@ -10448,17 +10414,6 @@ } } }, - "prism-themes": { - "version": "git+https://github.com/PrismJS/prism-themes.git#afb4116547cd854074ad705b8171768403ca11f3" - }, - "prismjs": { - "version": "1.8.4", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.8.4.tgz", - "integrity": "sha1-VzzHoUwsBlZuHsog2BP1rlXbgNI=", - "requires": { - "clipboard": "1.7.1" - } - }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -10500,11 +10455,6 @@ "object-assign": "4.1.1" } }, - "property-information": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-3.2.0.tgz", - "integrity": "sha1-/RSDyPusYYCPX+NZ52k6H0ilgzE=" - }, "prosemirror-commands": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.0.2.tgz", @@ -10941,19 +10891,6 @@ "react-deep-force-update": "1.1.1" } }, - "react-syntax-highlighter": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-6.0.4.tgz", - "integrity": "sha1-SGujILMfBjItFTKjX0PMBv6pwQE=", - "requires": { - "babel-runtime": "6.26.0", - "highlight.js": "9.12.0", - "lowlight": "1.9.1", - "prism-themes": "git+https://github.com/PrismJS/prism-themes.git#afb4116547cd854074ad705b8171768403ca11f3", - "prismjs": "1.8.4", - "refractor": "2.1.0" - } - }, "react-tabs": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-2.1.1.tgz", @@ -11163,15 +11100,6 @@ } } }, - "refractor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.1.0.tgz", - "integrity": "sha512-btaiS5pnqDUbSB7aG5VWLTf28CYnT4lhhWxBBE7Ia5NKzxkyTKtMt7ngYILk5ffxxXxmhXy+SRi7h43depzCvg==", - "requires": { - "hastscript": "3.1.0", - "prismjs": "1.8.4" - } - }, "regenerate": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz", @@ -11521,12 +11449,6 @@ "ajv": "5.5.1" } }, - "select": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", - "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", - "optional": true - }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -11795,14 +11717,6 @@ } } }, - "space-separated-tokens": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.1.tgz", - "integrity": "sha1-lpW5355lrsGBHUw/nOUlILwvfk0=", - "requires": { - "trim": "0.0.1" - } - }, "spawn-sync": { "version": "1.0.15", "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz", @@ -12210,12 +12124,6 @@ "setimmediate": "1.0.5" } }, - "tiny-emitter": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", - "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", - "optional": true - }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -12278,11 +12186,6 @@ "integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=", "dev": true }, - "trim": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", - "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=" - }, "trim-newlines": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", @@ -12301,6 +12204,12 @@ "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", "dev": true }, + "tryer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.0.tgz", + "integrity": "sha1-Antp+oIyJeVRys4+8DsR9qs3wdc=", + "dev": true + }, "tryit": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tryit/-/tryit-1.0.3.tgz", @@ -12848,6 +12757,75 @@ } } }, + "webpack-bundle-analyzer": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.10.1.tgz", + "integrity": "sha512-T2iic9o30N2J/ryR+dFIYAZdSka47zwYKaYLTBWWlvFRJGskzSeeEkqo3C+AinQtnhw+5M1JiHkBetZfI3RBPw==", + "dev": true, + "requires": { + "acorn": "5.4.1", + "bfj-node4": "5.2.1", + "chalk": "2.3.1", + "commander": "2.14.1", + "ejs": "2.5.7", + "express": "4.16.2", + "filesize": "3.6.0", + "gzip-size": "4.1.0", + "lodash": "4.17.4", + "mkdirp": "0.5.1", + "opener": "1.4.3", + "ws": "4.1.0" + }, + "dependencies": { + "acorn": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.4.1.tgz", + "integrity": "sha512-XLmq3H/BVvW6/GbxKryGxWORz1ebilSsUDlyC27bXhWGWAZWkGwS6FLHjOlwFXNFoWFQEO/Df4u0YYd0K3BQgQ==", + "dev": true + }, + "ansi-styles": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", + "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", + "dev": true, + "requires": { + "color-convert": "1.9.1" + } + }, + "chalk": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz", + "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "5.2.0" + } + }, + "commander": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz", + "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "supports-color": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz", + "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==", + "dev": true, + "requires": { + "has-flag": "3.0.0" + } + } + } + }, "webpack-dev-middleware": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz", @@ -13198,6 +13176,24 @@ "slide": "1.1.6" } }, + "ws": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz", + "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==", + "dev": true, + "requires": { + "async-limiter": "1.0.0", + "safe-buffer": "5.1.1" + }, + "dependencies": { + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", + "dev": true + } + } + }, "xdg-basedir": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz", diff --git a/package.json b/package.json index 68d9835..10bff67 100644 --- a/package.json +++ b/package.json @@ -30,19 +30,16 @@ "url": "https://github.com/d4rkr00t/prosemirror-dev-tools" }, "dependencies": { - "date-fns": "^1.28.2", "es6-object-assign": "^1.1.0", "glamor": "^2.20.40", "glamorous": "^4.11.6", "html": "^1.0.0", "ie-array-find-polyfill": "^1.1.0", - "javascript-stringify": "^1.6.0", "jsondiffpatch": "github:d4rkr00t/jsondiffpatch#d80390b4354befe55802e292122b8059462c1b7d", "prosemirror-model": ">=1.0.0", "prosemirror-state": ">=1.0.0", "react-dock": "^0.2.3", "react-json-tree": "^0.11.0", - "react-syntax-highlighter": "^6.0.4", "react-tabs": "^2.1.1", "unstated": "^1.0.3" }, @@ -74,7 +71,8 @@ "react": "^16.2.0", "react-dom": "^16.2.0", "rimraf": "^2.6.1", - "webpack": "^3.9.1" + "webpack": "^3.9.1", + "webpack-bundle-analyzer": "^2.10.1" }, "eslintConfig": { "extends": "./node_modules/aik/lib/eslint-config.js" diff --git a/src/components/highlighter.js b/src/components/highlighter.js index a2bd6f5..b4e3c73 100644 --- a/src/components/highlighter.js +++ b/src/components/highlighter.js @@ -1,27 +1,36 @@ import React from "react"; import glamorous from "glamorous/dist/glamorous.esm.tiny"; -import SyntaxHighlighter, { - registerLanguage -} from "react-syntax-highlighter/light"; -import htmlLang from "react-syntax-highlighter/languages/hljs/xml"; -import colorTheme from "react-syntax-highlighter/styles/hljs/tomorrow-night-blue"; - -colorTheme.hljs.background = "transparent"; - -registerLanguage("html", htmlLang); +import theme from "../theme"; const CustomPre = glamorous("pre")({ padding: "9px 0 18px 0 !important", - margin: 0 + margin: 0, + color: theme.white80, + "& .prosemirror-dev-tools-highlighter-tag": { + color: theme.main + } }); CustomPre.displayName = "CustomPre"; -export function Highlighter(props) { - if (!props.children) return null; +const regexp = /(<\/?[\w\d\s="']+>)/gim; +const highlight = str => + str + .replace(//g, ">") + .replace( + regexp, + "$&" + ); - return ( - - {props.children} - - ); +export class Highlighter extends React.Component { + render() { + if (!this.props.children) return null; + return ( + + ); + } } diff --git a/src/components/json-diff.js b/src/components/json-diff.js index a80096d..15eabc6 100644 --- a/src/components/json-diff.js +++ b/src/components/json-diff.js @@ -2,7 +2,6 @@ import React from "react"; import JSONTree from "./json-tree"; import glamorous from "glamorous/dist/glamorous.esm.tiny"; import theme from "../theme"; -import stringify from "javascript-stringify"; const Updated = glamorous("span")({ color: theme.main @@ -64,7 +63,7 @@ function stringifyAndShrink(val) { return "null"; } - const str = stringify(val); + const str = JSON.stringify(val); if (typeof str === "undefined") { return "undefined"; } diff --git a/src/tabs/history.js b/src/tabs/history.js index 38d112b..59d701b 100644 --- a/src/tabs/history.js +++ b/src/tabs/history.js @@ -1,6 +1,5 @@ import React from "react"; import glamorous from "glamorous/dist/glamorous.esm.tiny"; -import format from "date-fns/format"; import { Subscribe } from "unstated"; import EditorStateContainer from "../state/editor"; import { InfoPanel } from "../components/info-panel"; @@ -21,8 +20,23 @@ const Section = glamorous("div")({ }); Section.displayName = "Section"; -const formatTimestamp = timestamp => - format(new Date(timestamp), "HH:mm:ss:SSS"); +function pad(num) { + return ("00" + num).slice(-2); +} + +function pad3(num) { + return ("000" + num).slice(-3); +} + +const formatTimestamp = timestamp => { + const date = new Date(timestamp); + return [ + pad(date.getHours()), + pad(date.getMinutes()), + pad(date.getSeconds()), + pad3(date.getMilliseconds()) + ].join(":"); +}; export function SelectionContentSection(props) { if (!props.selectionContent) return null;