├── .gitignore
├── LICENSE
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
    ├── app
    │   └── background.js
    ├── favicon.ico
    ├── icon
    │   ├── icon-on-128.png
    │   ├── icon-on-16.png
    │   └── icon-on-48.png
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components
    │   ├── Settings.jsx
    │   └── Widget.jsx
    ├── content.js
    ├── cssreset.css
    ├── daniel-avatar.jpg
    ├── index.js
    ├── registerServiceWorker.js
    ├── theme.js
    └── util
    │   ├── api.js
    │   ├── chakra-provider.js
    │   ├── frame-provider.js
    │   ├── highlighter.js
    │   └── scope-provider.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Satendra Rai
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dynalist Highlighter
2 | 
3 | A small chrome extension to highlight text on a web page and sync them to Dynalist.
4 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebookincubator/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // In development, we always serve from the root. This makes config easier.
 17 | const publicPath = '/';
 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 21 | const publicUrl = '';
 22 | // Get environment variables to inject into our app.
 23 | const env = getClientEnvironment(publicUrl);
 24 | 
 25 | // This is the development configuration.
 26 | // It is focused on developer experience and fast rebuilds.
 27 | // The production configuration is different and lives in a separate file.
 28 | module.exports = {
 29 |   mode: 'development',
 30 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 31 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 32 |   devtool: 'cheap-module-source-map',
 33 |   // These are the "entry points" to our application.
 34 |   // This means they will be the "root" imports that are included in JS bundle.
 35 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 36 |   entry: [
 37 |     // We ship a few polyfills by default:
 38 |     require.resolve('./polyfills'),
 39 |     // Include an alternative client for WebpackDevServer. A client's job is to
 40 |     // connect to WebpackDevServer by a socket and get notified about changes.
 41 |     // When you save a file, the client will either apply hot updates (in case
 42 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 43 |     // make a syntax error, this client will display a syntax error overlay.
 44 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 45 |     // to bring better experience for Create React App users. You can replace
 46 |     // the line below with these two lines if you prefer the stock client:
 47 |     // require.resolve('webpack-dev-server/client') + '?/',
 48 |     // require.resolve('webpack/hot/dev-server'),
 49 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 50 |     // Finally, this is your app's code:
 51 |     paths.appIndexJs,
 52 |     // We include the app code last so that if there is a runtime error during
 53 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 54 |     // changing JS code would still trigger a refresh.
 55 |   ],
 56 |   output: {
 57 |     // Add /* filename */ comments to generated require()s in the output.
 58 |     pathinfo: true,
 59 |     // This does not produce a real file. It's just the virtual path that is
 60 |     // served by WebpackDevServer in development. This is the JS bundle
 61 |     // containing code from all our entry points, and the Webpack runtime.
 62 |     filename: 'static/js/bundle.js',
 63 |     // There are also additional JS chunk files if you use code splitting.
 64 |     chunkFilename: 'static/js/[name].chunk.js',
 65 |     // This is the URL that app is served from. We use "/" in development.
 66 |     publicPath: publicPath,
 67 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 68 |     devtoolModuleFilenameTemplate: info =>
 69 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 70 |   },
 71 |   resolve: {
 72 |     // This allows you to set a fallback for where Webpack should look for modules.
 73 |     // We placed these paths second because we want `node_modules` to "win"
 74 |     // if there are any conflicts. This matches Node resolution mechanism.
 75 |     // https://github.com/facebookincubator/create-react-app/issues/253
 76 |     modules: ['node_modules', paths.appNodeModules].concat(
 77 |       // It is guaranteed to exist because we tweak it in `env.js`
 78 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 79 |     ),
 80 |     // These are the reasonable defaults supported by the Node ecosystem.
 81 |     // We also include JSX as a common component filename extension to support
 82 |     // some tools, although we do not recommend using it, see:
 83 |     // https://github.com/facebookincubator/create-react-app/issues/290
 84 |     // `web` extension prefixes have been added for better support
 85 |     // for React Native Web.
 86 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 87 |     alias: {
 88 |       
 89 |       // Support React Native Web
 90 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 91 |       'react-native': 'react-native-web',
 92 |     },
 93 |     plugins: [
 94 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 95 |       // This often causes confusion because we only process files within src/ with babel.
 96 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 97 |       // please link the files into your node_modules/ and let module-resolution kick in.
 98 |       // Make sure your source files are compiled, as they will not be processed in any way.
 99 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
100 |     ],
101 |   },
102 |   module: {
103 |     strictExportPresence: true,
104 |     rules: [
105 |       // TODO: Disable require.ensure as it's not a standard language feature.
106 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
107 |       // { parser: { requireEnsure: false } },
108 | 
109 |       // First, run the linter.
110 |       // It's important to do this before Babel processes the JS.
111 |       {
112 |         test: /\.(js|jsx|mjs)$/,
113 |         enforce: 'pre',
114 |         use: [
115 |           {
116 |             options: {
117 |               formatter: eslintFormatter,
118 |               eslintPath: require.resolve('eslint'),
119 |               
120 |             },
121 |             loader: require.resolve('eslint-loader'),
122 |           },
123 |         ],
124 |         include: paths.appSrc,
125 |       },
126 |       {
127 |         // "oneOf" will traverse all following loaders until one will
128 |         // match the requirements. When no loader matches it will fall
129 |         // back to the "file" loader at the end of the loader list.
130 |         oneOf: [
131 |           // "url" loader works like "file" loader except that it embeds assets
132 |           // smaller than specified limit in bytes as data URLs to avoid requests.
133 |           // A missing `test` is equivalent to a match.
134 |           {
135 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
136 |             loader: require.resolve('url-loader'),
137 |             options: {
138 |               limit: 10000,
139 |               name: 'static/media/[name].[hash:8].[ext]',
140 |             },
141 |           },
142 |           // Process JS with Babel.
143 |           {
144 |             test: /\.(js|jsx|mjs)$/,
145 |             include: paths.appSrc,
146 |             loader: require.resolve('babel-loader'),
147 |             options: {
148 |               
149 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
150 |               // It enables caching results in ./node_modules/.cache/babel-loader/
151 |               // directory for faster rebuilds.
152 |               cacheDirectory: true,
153 |             },
154 |           },
155 |           // "postcss" loader applies autoprefixer to our CSS.
156 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
157 |           // "style" loader turns CSS into JS modules that inject <style> tags.
158 |           // In production, we use a plugin to extract that CSS to a file, but
159 |           // in development "style" loader enables hot editing of CSS.
160 |           {
161 |             test: /\.css$/,
162 |             use: [
163 |               require.resolve('style-loader'),
164 |               {
165 |                 loader: require.resolve('css-loader'),
166 |                 options: {
167 |                   importLoaders: 1,
168 |                 },
169 |               },
170 |               {
171 |                 loader: require.resolve('postcss-loader'),
172 |                 options: {
173 |                   // Necessary for external CSS imports to work
174 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
175 |                   ident: 'postcss',
176 |                   plugins: () => [
177 |                     require('postcss-flexbugs-fixes'),
178 |                     autoprefixer({
179 |                       browsers: [
180 |                         '>1%',
181 |                         'last 4 versions',
182 |                         'Firefox ESR',
183 |                         'not ie < 9', // React doesn't support IE8 anyway
184 |                       ],
185 |                       flexbox: 'no-2009',
186 |                     }),
187 |                   ],
188 |                 },
189 |               },
190 |             ],
191 |           },
192 |           // "file" loader makes sure those assets get served by WebpackDevServer.
193 |           // When you `import` an asset, you get its (virtual) filename.
194 |           // In production, they would get copied to the `build` folder.
195 |           // This loader doesn't use a "test" so it will catch all modules
196 |           // that fall through the other loaders.
197 |           {
198 |             // Exclude `js` files to keep "css" loader working as it injects
199 |             // its runtime that would otherwise processed through "file" loader.
200 |             // Also exclude `html` and `json` extensions so they get processed
201 |             // by webpacks internal loaders.
202 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
203 |             loader: require.resolve('file-loader'),
204 |             options: {
205 |               name: 'static/media/[name].[hash:8].[ext]',
206 |             },
207 |           },
208 |         ],
209 |       },
210 |       // ** STOP ** Are you adding a new loader?
211 |       // Make sure to add the new loader(s) before the "file" loader.
212 |     ],
213 |   },
214 |   plugins: [
215 |     // Makes some environment variables available in index.html.
216 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
217 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
218 |     // In development, this will be an empty string.
219 |     // new InterpolateHtmlPlugin(env.raw),
220 |     // Generates an `index.html` file with the <script> injected.
221 |     new HtmlWebpackPlugin({
222 |       inject: true,
223 |       template: paths.appHtml,
224 |     }),
225 |     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
226 |     // Add module names to factory functions so they appear in browser profiler.
227 |     new webpack.NamedModulesPlugin(),
228 |     // Makes some environment variables available to the JS code, for example:
229 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
230 |     new webpack.DefinePlugin(env.stringified),
231 |     // This is necessary to emit hot updates (currently CSS only):
232 |     new webpack.HotModuleReplacementPlugin(),
233 |     // Watcher doesn't work well if you mistype casing in a path so we use
234 |     // a plugin that prints an error when you attempt to do this.
235 |     // See https://github.com/facebookincubator/create-react-app/issues/240
236 |     new CaseSensitivePathsPlugin(),
237 |     // If you require a missing module and then `npm install` it, you still have
238 |     // to restart the development server for Webpack to discover it. This plugin
239 |     // makes the discovery automatic so you don't have to restart.
240 |     // See https://github.com/facebookincubator/create-react-app/issues/186
241 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
242 |     // Moment.js is an extremely popular library that bundles large locale files
243 |     // by default due to how Webpack interprets its code. This is a practical
244 |     // solution that requires the user to opt into importing specific locales.
245 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
246 |     // You can remove this if you don't use Moment.js:
247 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
248 |   ],
249 |   // Some libraries import Node modules but don't use them in the browser.
250 |   // Tell Webpack to provide empty mocks for them so importing them works.
251 |   node: {
252 |     dgram: 'empty',
253 |     fs: 'empty',
254 |     net: 'empty',
255 |     tls: 'empty',
256 |     child_process: 'empty',
257 |   },
258 |   // Turn off performance hints during development because we don't do any
259 |   // splitting or minification in interest of speed. These warnings become
260 |   // cumbersome.
261 |   performance: {
262 |     hints: false,
263 |   },
264 | };
265 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   mode: 'production',
 54 |   // Don't attempt to continue if there are any errors.
 55 |   bail: true,
 56 |   // We generate sourcemaps in production. This is slow but gives good results.
 57 |   // You can exclude the *.map files from the build during deployment.
 58 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 59 |   // In production, we only want to load the polyfills and the app code.
 60 |   entry: {
 61 |     app: [require.resolve('./polyfills'), paths.appIndexJs],
 62 |     content: [require.resolve('./polyfills'), './src/content.js']
 63 |   },
 64 |   optimization: {
 65 |     minimize: false //Update this to true or false
 66 |   },
 67 |   output: {
 68 |     // The build folder.
 69 |     path: paths.appBuild,
 70 |     // Generated JS file names (with nested folders).
 71 |     // There will be one main bundle, and one file per asynchronous chunk.
 72 |     // We don't currently advertise code splitting but Webpack supports it.
 73 |     filename: 'static/js/[name].js',
 74 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 75 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 76 |     publicPath: publicPath,
 77 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 78 |     devtoolModuleFilenameTemplate: info =>
 79 |       path
 80 |         .relative(paths.appSrc, info.absoluteResourcePath)
 81 |         .replace(/\\/g, '/'),
 82 |   },
 83 |   resolve: {
 84 |     // This allows you to set a fallback for where Webpack should look for modules.
 85 |     // We placed these paths second because we want `node_modules` to "win"
 86 |     // if there are any conflicts. This matches Node resolution mechanism.
 87 |     // https://github.com/facebookincubator/create-react-app/issues/253
 88 |     modules: ['node_modules', paths.appNodeModules].concat(
 89 |       // It is guaranteed to exist because we tweak it in `env.js`
 90 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 91 |     ),
 92 |     // These are the reasonable defaults supported by the Node ecosystem.
 93 |     // We also include JSX as a common component filename extension to support
 94 |     // some tools, although we do not recommend using it, see:
 95 |     // https://github.com/facebookincubator/create-react-app/issues/290
 96 |     // `web` extension prefixes have been added for better support
 97 |     // for React Native Web.
 98 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 99 |     alias: {
100 |       
101 |       // Support React Native Web
102 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
103 |       'react-native': 'react-native-web',
104 |     },
105 |     plugins: [
106 |       // Prevents users from importing files from outside of src/ (or node_modules/).
107 |       // This often causes confusion because we only process files within src/ with babel.
108 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
109 |       // please link the files into your node_modules/ and let module-resolution kick in.
110 |       // Make sure your source files are compiled, as they will not be processed in any way.
111 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
112 |     ],
113 |   },
114 |   module: {
115 |     strictExportPresence: true,
116 |     rules: [
117 |       // TODO: Disable require.ensure as it's not a standard language feature.
118 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
119 |       // { parser: { requireEnsure: false } },
120 | 
121 |       // First, run the linter.
122 |       // It's important to do this before Babel processes the JS.
123 |       {
124 |         test: /\.(js|jsx|mjs)$/,
125 |         enforce: 'pre',
126 |         use: [
127 |           {
128 |             options: {
129 |               formatter: eslintFormatter,
130 |               eslintPath: require.resolve('eslint'),
131 |               
132 |             },
133 |             loader: require.resolve('eslint-loader'),
134 |           },
135 |         ],
136 |         include: paths.appSrc,
137 |       },
138 |       {
139 |         // "oneOf" will traverse all following loaders until one will
140 |         // match the requirements. When no loader matches it will fall
141 |         // back to the "file" loader at the end of the loader list.
142 |         oneOf: [
143 |           // "url" loader works just like "file" loader but it also embeds
144 |           // assets smaller than specified size as data URLs to avoid requests.
145 |           {
146 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
147 |             loader: require.resolve('url-loader'),
148 |             options: {
149 |               limit: 10000,
150 |               name: 'static/media/[name].[hash:8].[ext]',
151 |             },
152 |           },
153 |           // Process JS with Babel.
154 |           {
155 |             test: /\.(js|jsx|mjs)$/,
156 |             include: paths.appSrc,
157 |             loader: require.resolve('babel-loader'),
158 |             options: {
159 |               
160 |               compact: true,
161 |             },
162 |           },
163 |           // The notation here is somewhat confusing.
164 |           // "postcss" loader applies autoprefixer to our CSS.
165 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
166 |           // "style" loader normally turns CSS into JS modules injecting <style>,
167 |           // but unlike in development configuration, we do something different.
168 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
169 |           // (second argument), then grabs the result CSS and puts it into a
170 |           // separate file in our build process. This way we actually ship
171 |           // a single CSS file in production instead of JS code injecting <style>
172 |           // tags. If you use code splitting, however, any async bundles will still
173 |           // use the "style" loader inside the async code so CSS from them won't be
174 |           // in the main CSS file.
175 |           {
176 |             test: /\.css$/,
177 |             use: [{loader: MiniCssExtractPlugin.loader},'css-loader']
178 |             // loader: ExtractTextPlugin.extract(
179 |             //   Object.assign(
180 |             //     {
181 |             //       fallback: {
182 |             //         loader: require.resolve('style-loader'),
183 |             //         options: {
184 |             //           hmr: false,
185 |             //         },
186 |             //       },
187 |             //       use: [
188 |             //         {
189 |             //           loader: require.resolve('css-loader'),
190 |             //           options: {
191 |             //             importLoaders: 1,
192 |             //             minimize: true,
193 |             //             sourceMap: shouldUseSourceMap,
194 |             //           },
195 |             //         },
196 |             //         {
197 |             //           loader: require.resolve('postcss-loader'),
198 |             //           options: {
199 |             //             // Necessary for external CSS imports to work
200 |             //             // https://github.com/facebookincubator/create-react-app/issues/2677
201 |             //             ident: 'postcss',
202 |             //             plugins: () => [
203 |             //               require('postcss-flexbugs-fixes'),
204 |             //               autoprefixer({
205 |             //                 browsers: [
206 |             //                   '>1%',
207 |             //                   'last 4 versions',
208 |             //                   'Firefox ESR',
209 |             //                   'not ie < 9', // React doesn't support IE8 anyway
210 |             //                 ],
211 |             //                 flexbox: 'no-2009',
212 |             //               }),
213 |             //             ],
214 |             //           },
215 |             //         },
216 |             //       ],
217 |             //     },
218 |             //     extractTextPluginOptions
219 |             //   )
220 |             // ),
221 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
222 |           },
223 |           // "file" loader makes sure assets end up in the `build` folder.
224 |           // When you `import` an asset, you get its filename.
225 |           // This loader doesn't use a "test" so it will catch all modules
226 |           // that fall through the other loaders.
227 |           {
228 |             loader: require.resolve('file-loader'),
229 |             // Exclude `js` files to keep "css" loader working as it injects
230 |             // it's runtime that would otherwise processed through "file" loader.
231 |             // Also exclude `html` and `json` extensions so they get processed
232 |             // by webpacks internal loaders.
233 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
234 |             options: {
235 |               name: 'static/media/[name].[hash:8].[ext]',
236 |             },
237 |           },
238 |           // ** STOP ** Are you adding a new loader?
239 |           // Make sure to add the new loader(s) before the "file" loader.
240 |         ],
241 |       },
242 |     ],
243 |   },
244 |   plugins: [
245 |     // Makes some environment variables available in index.html.
246 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
247 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
248 |     // In production, it will be an empty string unless you specify "homepage"
249 |     // in `package.json`, in which case it will be the pathname of that URL.
250 |     // new InterpolateHtmlPlugin(env.raw),
251 |     // Generates an `index.html` file with the <script> injected.
252 |     new HtmlWebpackPlugin({
253 |       inject: true,
254 |       template: paths.appHtml,
255 |       minify: {
256 |         removeComments: true,
257 |         collapseWhitespace: true,
258 |         removeRedundantAttributes: true,
259 |         useShortDoctype: true,
260 |         removeEmptyAttributes: true,
261 |         removeStyleLinkTypeAttributes: true,
262 |         keepClosingSlash: true,
263 |         minifyJS: true,
264 |         minifyCSS: true,
265 |         minifyURLs: true,
266 |       },
267 |     }),
268 |     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
269 |     // Makes some environment variables available to the JS code, for example:
270 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
271 |     // It is absolutely essential that NODE_ENV was set to production here.
272 |     // Otherwise React will be compiled in the very slow development mode.
273 |     new webpack.DefinePlugin(env.stringified),
274 |     // Minify the code.
275 |     // new webpack.optimize.UglifyJsPlugin({
276 |     //   compress: {
277 |     //     warnings: false,
278 |     //     // Disabled because of an issue with Uglify breaking seemingly valid code:
279 |     //     // https://github.com/facebookincubator/create-react-app/issues/2376
280 |     //     // Pending further investigation:
281 |     //     // https://github.com/mishoo/UglifyJS2/issues/2011
282 |     //     comparisons: false,
283 |     //   },
284 |     //   mangle: {
285 |     //     safari10: true,
286 |     //   },
287 |     //   output: {
288 |     //     comments: false,
289 |     //     // Turned on because emoji and regex is not minified properly using default
290 |     //     // https://github.com/facebookincubator/create-react-app/issues/2488
291 |     //     ascii_only: true,
292 |     //   },
293 |     //   sourceMap: shouldUseSourceMap,
294 |     // }),
295 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
296 |     new MiniCssExtractPlugin({
297 |       filename: cssFilename,
298 |     }),
299 |     // Generate a manifest file which contains a mapping of all asset filenames
300 |     // to their corresponding output file so that tools can pick it up without
301 |     // having to parse `index.html`.
302 |     new ManifestPlugin({
303 |       fileName: 'asset-manifest.json',
304 |     }),
305 |     // Generate a service worker script that will precache, and keep up to date,
306 |     // the HTML & assets that are part of the Webpack build.
307 |     new SWPrecacheWebpackPlugin({
308 |       // By default, a cache-busting query parameter is appended to requests
309 |       // used to populate the caches, to ensure the responses are fresh.
310 |       // If a URL is already hashed by Webpack, then there is no concern
311 |       // about it being stale, and the cache-busting can be skipped.
312 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
313 |       filename: 'service-worker.js',
314 |       logger(message) {
315 |         if (message.indexOf('Total precache size is') === 0) {
316 |           // This message occurs for every build and is a bit too noisy.
317 |           return;
318 |         }
319 |         if (message.indexOf('Skipping static resource') === 0) {
320 |           // This message obscures real errors so we ignore it.
321 |           // https://github.com/facebookincubator/create-react-app/issues/2612
322 |           return;
323 |         }
324 |         console.log(message);
325 |       },
326 |       minify: true,
327 |       // For unknown URLs, fallback to the index page
328 |       navigateFallback: publicUrl + '/index.html',
329 |       // Ignores URLs starting from /__ (useful for Firebase):
330 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
331 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
332 |       // Don't precache sourcemaps (they're large) and build asset manifest:
333 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
334 |     }),
335 |     // Moment.js is an extremely popular library that bundles large locale files
336 |     // by default due to how Webpack interprets its code. This is a practical
337 |     // solution that requires the user to opt into importing specific locales.
338 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
339 |     // You can remove this if you don't use Moment.js:
340 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
341 |   ],
342 |   // Some libraries import Node modules but don't use them in the browser.
343 |   // Tell Webpack to provide empty mocks for them so importing them works.
344 |   node: {
345 |     dgram: 'empty',
346 |     fs: 'empty',
347 |     net: 'empty',
348 |     tls: 'empty',
349 |     child_process: 'empty',
350 |   },
351 | };
352 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
 6 | const config = require('./webpack.config.dev');
 7 | const paths = require('./paths');
 8 | 
 9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
10 | const host = process.env.HOST || '0.0.0.0';
11 | 
12 | module.exports = function(proxy, allowedHost) {
13 |   return {
14 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
15 |     // websites from potentially accessing local content through DNS rebinding:
16 |     // https://github.com/webpack/webpack-dev-server/issues/887
17 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
18 |     // However, it made several existing use cases such as development in cloud
19 |     // environment or subdomains in development significantly more complicated:
20 |     // https://github.com/facebookincubator/create-react-app/issues/2271
21 |     // https://github.com/facebookincubator/create-react-app/issues/2233
22 |     // While we're investigating better solutions, for now we will take a
23 |     // compromise. Since our WDS configuration only serves files in the `public`
24 |     // folder we won't consider accessing them a vulnerability. However, if you
25 |     // use the `proxy` feature, it gets more dangerous because it can expose
26 |     // remote code execution vulnerabilities in backends like Django and Rails.
27 |     // So we will disable the host check normally, but enable it if you have
28 |     // specified the `proxy` setting. Finally, we let you override it if you
29 |     // really know what you're doing with a special environment variable.
30 |     disableHostCheck:
31 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
32 |     // Enable gzip compression of generated files.
33 |     compress: true,
34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
35 |     // It will still show compile warnings and errors with this setting.
36 |     clientLogLevel: 'none',
37 |     // By default WebpackDevServer serves physical files from current directory
38 |     // in addition to all the virtual build products that it serves from memory.
39 |     // This is confusing because those files won’t automatically be available in
40 |     // production build folder unless we copy them. However, copying the whole
41 |     // project directory is dangerous because we may expose sensitive files.
42 |     // Instead, we establish a convention that only files in `public` directory
43 |     // get served. Our build script will copy `public` into the `build` folder.
44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
47 |     // Note that we only recommend to use `public` folder as an escape hatch
48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
49 |     // for some reason broken when imported through Webpack. If you just want to
50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
51 |     contentBase: paths.appPublic,
52 |     // By default files from `contentBase` will not trigger a page reload.
53 |     watchContentBase: true,
54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
55 |     // for the WebpackDevServer client so it can learn when the files were
56 |     // updated. The WebpackDevServer client is included as an entry point
57 |     // in the Webpack development configuration. Note that only changes
58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
59 |     hot: true,
60 |     // It is important to tell WebpackDevServer to use the same "root" path
61 |     // as we specified in the config. In development, we always serve from /.
62 |     publicPath: config.output.publicPath,
63 |     // WebpackDevServer is noisy by default so we emit custom message instead
64 |     // by listening to the compiler events with `compiler.plugin` calls above.
65 |     quiet: true,
66 |     // Reportedly, this avoids CPU overload on some systems.
67 |     // https://github.com/facebookincubator/create-react-app/issues/293
68 |     // src/node_modules is not ignored to support absolute imports
69 |     // https://github.com/facebookincubator/create-react-app/issues/1065
70 |     watchOptions: {
71 |       ignored: ignoredFiles(paths.appSrc),
72 |     },
73 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
74 |     https: protocol === 'https',
75 |     host: host,
76 |     overlay: false,
77 |     historyApiFallback: {
78 |       // Paths with dots should still use the history fallback.
79 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
80 |       disableDotRule: true,
81 |     },
82 |     public: allowedHost,
83 |     proxy,
84 |     before(app) {
85 |       // This lets us open files from the runtime error overlay.
86 |       app.use(errorOverlayMiddleware());
87 |       // This service worker file is effectively a 'no-op' that will reset any
88 |       // previous service worker registered for the same host:port combination.
89 |       // We do this in development to avoid hitting the production cache if
90 |       // it used the same host and port.
91 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
92 |       app.use(noopServiceWorkerMiddleware());
93 |     },
94 |   };
95 | };
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "dynalist-highlighter",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@chakra-ui/core": "^0.5.2",
  7 |     "@emotion/core": "^10.0.27",
  8 |     "@emotion/styled": "^10.0.27",
  9 |     "autoprefixer": "7.1.6",
 10 |     "axios": "^0.19.2",
 11 |     "babel-core": "6.26.3",
 12 |     "babel-eslint": "10.x",
 13 |     "babel-jest": "20.0.3",
 14 |     "babel-preset-react-app": "^9.0.1",
 15 |     "babel-runtime": "6.26.0",
 16 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 17 |     "chalk": "1.1.3",
 18 |     "css-loader": "0.28.7",
 19 |     "dotenv": "4.0.0",
 20 |     "dotenv-expand": "4.2.0",
 21 |     "emotion-theming": "^10.0.27",
 22 |     "eslint": "6.x",
 23 |     "eslint-config-react-app": "^5.0.1",
 24 |     "eslint-loader": "2.2.1",
 25 |     "eslint-plugin-flowtype": "3.x",
 26 |     "eslint-plugin-import": "2.x",
 27 |     "eslint-plugin-jsx-a11y": "6.x",
 28 |     "eslint-plugin-react": "7.x",
 29 |     "file-loader": "4.2.0",
 30 |     "fs-extra": "3.0.1",
 31 |     "html-webpack-plugin": "^4.0.0-beta.8",
 32 |     "jest": "20.0.4",
 33 |     "object-assign": "4.1.1",
 34 |     "postcss-flexbugs-fixes": "3.2.0",
 35 |     "postcss-loader": "2.0.8",
 36 |     "promise": "8.0.1",
 37 |     "prop-types": "^15.7.2",
 38 |     "raf": "3.4.0",
 39 |     "rangy": "^1.3.0",
 40 |     "react": "^16.4.1",
 41 |     "react-dev-utils": "^9.0.0-next.68",
 42 |     "react-dom": "^16.4.1",
 43 |     "react-frame-component": "^4.0.0",
 44 |     "resolve": "1.6.0",
 45 |     "style-loader": "0.19.0",
 46 |     "stylis-plugin-extra-scope": "^0.2.0",
 47 |     "sw-precache-webpack-plugin": "^0.11.5",
 48 |     "turndown": "^5.0.3",
 49 |     "url-loader": "0.6.2",
 50 |     "webpack-dev-server": ">=3.1.11",
 51 |     "webpack-manifest-plugin": "2.0.4",
 52 |     "whatwg-fetch": "2.0.3"
 53 |   },
 54 |   "scripts": {
 55 |     "start": "node scripts/start.js",
 56 |     "build": "node scripts/build.js",
 57 |     "test": "node scripts/test.js --env=jsdom"
 58 |   },
 59 |   "jest": {
 60 |     "collectCoverageFrom": [
 61 |       "src/**/*.{js,jsx,mjs}"
 62 |     ],
 63 |     "setupFiles": [
 64 |       "<rootDir>/config/polyfills.js"
 65 |     ],
 66 |     "testMatch": [
 67 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
 68 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
 69 |     ],
 70 |     "testEnvironment": "node",
 71 |     "testURL": "http://localhost",
 72 |     "transform": {
 73 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 74 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 75 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 76 |     },
 77 |     "transformIgnorePatterns": [
 78 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
 79 |     ],
 80 |     "moduleNameMapper": {
 81 |       "^react-native$": "react-native-web"
 82 |     },
 83 |     "moduleFileExtensions": [
 84 |       "web.js",
 85 |       "js",
 86 |       "json",
 87 |       "web.jsx",
 88 |       "jsx",
 89 |       "node",
 90 |       "mjs"
 91 |     ]
 92 |   },
 93 |   "babel": {
 94 |     "presets": [
 95 |       "react-app",
 96 |       "@babel/preset-env",
 97 |       "@babel/preset-react"
 98 |     ]
 99 |   },
100 |   "eslintConfig": {
101 |     "extends": "react-app"
102 |   },
103 |   "devDependencies": {
104 |     "@babel/core": "^7.1.6",
105 |     "@babel/preset-env": "^7.1.6",
106 |     "@babel/preset-react": "^7.0.0",
107 |     "@typescript-eslint/eslint-plugin": "^2.3.0",
108 |     "@typescript-eslint/parser": "^2.3.0",
109 |     "babel-loader": "^8.0.4",
110 |     "eslint-plugin-react-hooks": "^2.0.1",
111 |     "mini-css-extract-plugin": "^0.8.0",
112 |     "webpack": "4.16.5",
113 |     "webpack-cli": "3.1.0"
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/public/app/background.js:
--------------------------------------------------------------------------------
 1 | // Called when the user clicks on the browser action
 2 | chrome.browserAction.onClicked.addListener(function(tab) {
 3 |   // Send a message to the active tab
 4 |   chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
 5 |     var activeTab = tabs[0];
 6 |     chrome.tabs.sendMessage(activeTab.id, {
 7 |       message: "clicked_browser_action"
 8 |     });
 9 |   });
10 | });
11 | 
12 | chrome.runtime.onInstalled.addListener(function(object) {
13 |   chrome.tabs.create({
14 |     url: "https://dynalist-highlighter.danielwirtz.com/install/"
15 |   });
16 | });
17 | 
18 | chrome.browserAction.onClicked.addListener(function() {
19 |   chrome.tabs.insertCSS({ file: "/static/css/app.css" });
20 |   chrome.tabs.executeScript(
21 |     null,
22 |     { file: "/static/js/content.js" },
23 |     activateExtension
24 |   );
25 | });
26 | 
27 | function activateExtension() {
28 |   chrome.tabs.query({ active: true, currentWindow: true }, function(
29 |     tabs,
30 |     sender
31 |   ) {
32 |     chrome.tabs.sendMessage(tabs[0].id, { msg: "activate" }, function(
33 |       response
34 |     ) {});
35 |   });
36 | }
37 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wirtzdan/dynalist-highlighter/ffce75514f60a77c23a4be000d8399738ca9c64d/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon/icon-on-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wirtzdan/dynalist-highlighter/ffce75514f60a77c23a4be000d8399738ca9c64d/public/icon/icon-on-128.png


--------------------------------------------------------------------------------
/public/icon/icon-on-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wirtzdan/dynalist-highlighter/ffce75514f60a77c23a4be000d8399738ca9c64d/public/icon/icon-on-16.png


--------------------------------------------------------------------------------
/public/icon/icon-on-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wirtzdan/dynalist-highlighter/ffce75514f60a77c23a4be000d8399738ca9c64d/public/icon/icon-on-48.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="theme-color" content="#000000" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is added to the
12 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>
29 |       You need to enable JavaScript to run this app.
30 |     </noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Dynalist Highlighter",
 3 |   "version": "1.0",
 4 |   "manifest_version": 2,
 5 |   "icons": {
 6 |     "16": "./icon/icon-on-16.png",
 7 |     "48": "./icon/icon-on-48.png",
 8 |     "128": "./icon/icon-on-128.png"
 9 |   },
10 |   "background": {
11 |     "scripts": ["app/background.js"],
12 |     "persistent": false
13 |   },
14 | 
15 |   "browser_action": {},
16 |   "permissions": ["storage", "activeTab", "<all_urls>", "contextMenus"],
17 |   "web_accessible_resources": [
18 |     "/static/css/content.css",
19 |     "/static/css/app.css",
20 |     "/static/css/cssreset.css"
21 |   ],
22 |   "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'"
23 | }
24 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const fs = require('fs');
 18 | const chalk = require('chalk');
 19 | const webpack = require('webpack');
 20 | const WebpackDevServer = require('webpack-dev-server');
 21 | const clearConsole = require('react-dev-utils/clearConsole');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const {
 24 |   choosePort,
 25 |   createCompiler,
 26 |   prepareProxy,
 27 |   prepareUrls,
 28 | } = require('react-dev-utils/WebpackDevServerUtils');
 29 | const openBrowser = require('react-dev-utils/openBrowser');
 30 | const paths = require('../config/paths');
 31 | const config = require('../config/webpack.config.dev');
 32 | const createDevServerConfig = require('../config/webpackDevServer.config');
 33 | 
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | const isInteractive = process.stdout.isTTY;
 36 | 
 37 | // Warn and crash if required files are missing
 38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 39 |   process.exit(1);
 40 | }
 41 | 
 42 | // Tools like Cloud9 rely on this.
 43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 44 | const HOST = process.env.HOST || '0.0.0.0';
 45 | 
 46 | if (process.env.HOST) {
 47 |   console.log(
 48 |     chalk.cyan(
 49 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 50 |         chalk.bold(process.env.HOST)
 51 |       )}`
 52 |     )
 53 |   );
 54 |   console.log(
 55 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 56 |   );
 57 |   console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
 58 |   console.log();
 59 | }
 60 | 
 61 | // We attempt to use the default port but if it is busy, we offer the user to
 62 | // run on a different port. `choosePort()` Promise resolves to the next free port.
 63 | choosePort(HOST, DEFAULT_PORT)
 64 |   .then(port => {
 65 |     if (port == null) {
 66 |       // We have not found a port.
 67 |       return;
 68 |     }
 69 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 70 |     const appName = require(paths.appPackageJson).name;
 71 |     const urls = prepareUrls(protocol, HOST, port);
 72 |     // Create a webpack compiler that is configured with custom messages.
 73 |     const compiler = createCompiler({webpack, config, appName, urls, useYarn});
 74 |     // Load proxy config
 75 |     const proxySetting = require(paths.appPackageJson).proxy;
 76 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 77 |     // Serve webpack assets generated by the compiler over a web sever.
 78 |     const serverConfig = createDevServerConfig(
 79 |       proxyConfig,
 80 |       urls.lanUrlForConfig
 81 |     );
 82 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 83 |     // Launch WebpackDevServer.
 84 |     devServer.listen(port, HOST, err => {
 85 |       if (err) {
 86 |         return console.log(err);
 87 |       }
 88 |       if (isInteractive) {
 89 |         clearConsole();
 90 |       }
 91 |       console.log(chalk.cyan('Starting the development server...\n'));
 92 |       openBrowser(urls.localUrlForBrowser);
 93 |     });
 94 | 
 95 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
 96 |       process.on(sig, function() {
 97 |         devServer.close();
 98 |         process.exit();
 99 |       });
100 |     });
101 |   })
102 |   .catch(err => {
103 |     if (err && err.message) {
104 |       console.log(err.message);
105 |     }
106 |     process.exit(1);
107 |   });
108 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | let argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   background-color: transparent !important;
 3 | }
 4 | 
 5 | :root {
 6 |   --dyn-highlight: #ffec99;
 7 |   --dyn-highlight-hover: #ffe066;
 8 | }
 9 | 
10 | .dynalist-highlighter-app {
11 |   width: 400px;
12 |   height: 100%;
13 |   position: fixed;
14 |   top: 0px;
15 |   right: 0px;
16 |   z-index: 9999;
17 |   background-color: white;
18 |   box-shadow: 0px 0px 5px #0000009e;
19 | }
20 | 
21 | .dynalist-highlighter {
22 |   z-index: 9999 !important;
23 | }
24 | 
25 | .dyn-highlight {
26 |   position: relative !important;
27 |   font-family: inherit !important;
28 |   font-size: inherit !important;
29 |   color: inherit !important;
30 |   font-weight: inherit !important;
31 |   cursor: pointer !important;
32 |   background-color: var(--dyn-highlight);
33 |   box-shadow: 0px 3px 0px 0px var(--dyn-highlight),
34 |     0px -3px 0px 0px var(--dyn-highlight);
35 | }
36 | 
37 | .dyn-highlight:hover {
38 |   background-color: var(--dyn-highlight-hover);
39 |   box-shadow: 0px 3px 0px 0px var(--dyn-highlight-hover),
40 |     0px -3px 0px 0px var(--dyn-highlight-hover);
41 | }
42 | 
43 | .dynalist-highlighter-app {
44 |   width: 400px;
45 |   height: 100%;
46 |   position: fixed;
47 |   top: 0px;
48 |   right: 0px;
49 |   z-index: 2147483647;
50 |   background-color: white;
51 |   box-shadow: 0px 0px 5px #0000009e;
52 | }
53 | 
54 | #dyn-widget {
55 |   position: fixed;
56 |   bottom: 0;
57 |   right: 0;
58 |   border: none;
59 |   z-index: 9999;
60 |   width: 320px;
61 |   background-color: transparent !important;
62 | }
63 | 
64 | #dyn-settings {
65 |   width: 100%;
66 |   height: 100%;
67 |   position: absolute;
68 |   top: 0;
69 |   left: 0;
70 |   border: none;
71 |   z-index: 999999999999999999;
72 |   overflow: hidden;
73 |   position: fixed;
74 |   background-color: transparent !important;
75 | }
76 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import "./app.css";
 3 | 
 4 | class App extends Component {
 5 |   render() {
 6 |     return <div className="App">/></div>;
 7 |   }
 8 | }
 9 | 
10 | export default App;
11 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/Settings.jsx:
--------------------------------------------------------------------------------
  1 | /*global chrome*/
  2 | import React, { useState, useEffect } from "react";
  3 | import Frame from "react-frame-component";
  4 | import { ScopeProvider } from "../util/scope-provider";
  5 | import { FrameProvider } from "../util/frame-provider";
  6 | import { ChakraProvider } from "../util/chakra-provider";
  7 | import "../cssreset.css";
  8 | 
  9 | import { isKeyValid, getFiles } from "../util/api";
 10 | 
 11 | import {
 12 |   Modal,
 13 |   ModalOverlay,
 14 |   ModalContent,
 15 |   ModalHeader,
 16 |   ModalCloseButton,
 17 |   ModalBody,
 18 |   Input,
 19 |   Button,
 20 |   InputGroup,
 21 |   InputLeftElement,
 22 |   InputRightElement,
 23 |   FormControl,
 24 |   FormLabel,
 25 |   Select,
 26 |   Icon,
 27 |   Link,
 28 |   Text,
 29 |   SlideIn,
 30 |   IconButton,
 31 |   Alert,
 32 |   AlertIcon,
 33 |   Flex,
 34 |   Divider,
 35 |   useColorMode,
 36 |   CSSReset,
 37 |   Avatar
 38 | } from "@chakra-ui/core";
 39 | 
 40 | function Settings({ isOpen, onClose, setWidgetState }) {
 41 |   const [isAlertVisible, setIsAlertVisible] = useState(false);
 42 |   const [areDetailsVisible, setAreDetailsVisible] = useState(false);
 43 |   const [isLoading, setIsLoading] = useState(false);
 44 |   const { colorMode, toggleColorMode } = useColorMode();
 45 | 
 46 |   const color = { light: "gray.800", dark: "white" };
 47 |   const descColor = { light: "gray.500", dark: "gray.400" };
 48 |   const footerColor = { light: "gray.400", dark: "gray.600" };
 49 |   const keyColor = { light: "gray.300", dark: "gray.500" };
 50 |   const primaryColor = { light: "blue.500", dark: "blue.300" };
 51 |   const bgColor = { light: "white", dark: "gray.900" };
 52 | 
 53 |   const initialRef = React.useRef();
 54 |   const finalRef = React.useRef();
 55 | 
 56 |   useEffect(() => {
 57 |     if (isOpen) {
 58 |       chrome.storage.sync.get(["key"], function(result) {
 59 |         const { key } = result;
 60 | 
 61 |         if (key) {
 62 |           restoreOptions();
 63 |         }
 64 |       });
 65 |     }
 66 |   }, [isOpen]);
 67 | 
 68 |   async function handleClick() {
 69 |     const buttonText = document
 70 |       .getElementById("dyn-settings")
 71 |       .contentWindow.document.getElementById("dyn-api-key-button").innerHTML;
 72 |     const key = document
 73 |       .getElementById("dyn-settings")
 74 |       .contentWindow.document.getElementById("dyn-api-key").value;
 75 | 
 76 |     if (buttonText === "Save") {
 77 |       setIsLoading(true);
 78 |       const response = await isKeyValid(key);
 79 |       setIsLoading(false);
 80 | 
 81 |       if (response) {
 82 |         chrome.storage.sync.set({
 83 |           key: key
 84 |         });
 85 | 
 86 |         loadDetails();
 87 |         setWidgetState("active");
 88 |       } else {
 89 |         setIsAlertVisible(true);
 90 |       }
 91 |     } else if (buttonText === "Reset") {
 92 |       document
 93 |         .getElementById("dyn-settings")
 94 |         .contentWindow.document.getElementById("dyn-api-key").value = "";
 95 |       setAreDetailsVisible(false);
 96 |       chrome.storage.sync.clear(() => {
 97 |         setWidgetState("setup");
 98 |       });
 99 |     }
100 |   }
101 | 
102 |   function handleSelect(e) {
103 |     const el = e.target;
104 | 
105 |     if (el.id === "dyn-inbox-select") {
106 |       chrome.storage.sync.set({
107 |         fileid: el.value
108 |       });
109 |     } else if (el.id === "dyn-toposition-select") {
110 |       chrome.storage.sync.set({
111 |         toposition: el.value
112 |       });
113 |     }
114 |   }
115 | 
116 |   function loadDetails() {
117 |     chrome.storage.sync.get(["key"], async function(result) {
118 |       const { key } = result;
119 | 
120 |       if (key) {
121 |         const files = await getFiles(key);
122 |         document
123 |           .getElementById("dyn-settings")
124 |           .contentWindow.document.getElementById("dyn-api-key").value = key;
125 |         updateSelect(files);
126 |         selectOption("dyn-inbox-select");
127 |         selectOption("dyn-toposition-select");
128 |         setAreDetailsVisible(true);
129 |         setIsAlertVisible(false);
130 |       }
131 |     });
132 |   }
133 | 
134 |   function restoreOptions() {
135 |     chrome.storage.sync.get(["key", "fileid", "toposition"], async function(
136 |       result
137 |     ) {
138 |       const { key, fileid, toposition } = result;
139 | 
140 |       const files = await getFiles(key);
141 |       document
142 |         .getElementById("dyn-settings")
143 |         .contentWindow.document.getElementById("dyn-api-key").value = key;
144 |       updateSelect(files);
145 |       selectOption("dyn-inbox-select", fileid);
146 |       selectOption("dyn-toposition-select", toposition);
147 |       setAreDetailsVisible(true);
148 |       setIsAlertVisible(false);
149 |     });
150 |   }
151 | 
152 |   function updateSelect(files) {
153 |     let options = "";
154 |     const select = document
155 |       .getElementById("dyn-settings")
156 |       .contentWindow.document.getElementById("dyn-inbox-select");
157 | 
158 |     for (const file of files) {
159 |       const option = `<option value="${file.id}">${file.title}</option>`;
160 |       options = options + option;
161 |     }
162 | 
163 |     select.innerHTML = options;
164 |   }
165 | 
166 |   function selectOption(selectid, value) {
167 |     if (value) {
168 |       var select = document
169 |         .getElementById("dyn-settings")
170 |         .contentWindow.document.getElementById(selectid);
171 |       const key = `"${value}"`;
172 | 
173 |       chrome.storage.sync.get(key, function(result) {
174 |         select.value = value;
175 |       });
176 |     } else {
177 |       var select = document
178 |         .getElementById("dyn-settings")
179 |         .contentWindow.document.getElementById(selectid);
180 |       select.options[0].selected = true;
181 | 
182 |       if (selectid === "dyn-inbox-select") {
183 |         chrome.storage.sync.set({
184 |           fileid: select.options[0].value
185 |         });
186 |       } else if (selectid === "dyn-toposition-select") {
187 |         chrome.storage.sync.set({
188 |           toposition: select.options[0].value
189 |         });
190 |       }
191 |     }
192 |   }
193 | 
194 |   return (
195 |     <SlideIn in={isOpen}>
196 |       {styles => (
197 |         <Modal
198 |           initialFocusRef={initialRef}
199 |           finalFocusRef={finalRef}
200 |           isOpen={isOpen}
201 |           onClose={onClose}
202 |           isCentered
203 |         >
204 |           <ScopeProvider scope={"#root .App"}>
205 |             <Frame
206 |               head={[
207 |                 <>
208 |                   <link
209 |                     type="text/css"
210 |                     rel="stylesheet"
211 |                     href={chrome.runtime.getURL("/static/css/content.css")}
212 |                   ></link>
213 |                   <link
214 |                     type="text/css"
215 |                     rel="stylesheet"
216 |                     href={chrome.runtime.getURL("/static/css/cssreset.css")}
217 |                   ></link>
218 |                 </>
219 |               ]}
220 |               id="dyn-settings"
221 |             >
222 |               <ChakraProvider>
223 |                 <CSSReset />
224 |                 <FrameProvider>
225 |                   <ModalOverlay opacity={styles.opacity} />
226 |                   <ModalContent
227 |                     rounded="lg"
228 |                     bg={bgColor[colorMode]}
229 |                     {...styles}
230 |                   >
231 |                     <ModalHeader color={color[colorMode]}>Settings</ModalHeader>
232 |                     <ModalCloseButton
233 |                       top="16px"
234 |                       right="24px"
235 |                       color={color[colorMode]}
236 |                     />
237 |                     <ModalBody pb={6}>
238 |                       <FormControl color={color[colorMode]}>
239 |                         <FormLabel fontWeight="bold">
240 |                           <Flex align="center">
241 |                             <Icon
242 |                               mr={2}
243 |                               name="check-circle"
244 |                               size="16px"
245 |                               color="green.500"
246 |                               d={areDetailsVisible ? "block" : "none"}
247 |                             />
248 |                             <Text>API Key</Text>
249 |                           </Flex>
250 |                         </FormLabel>
251 |                         <Text color={descColor[colorMode]} fontSize="sm">
252 |                           {" "}
253 |                           You can find your API key on the{" "}
254 |                           <Link
255 |                             href="https://dynalist.io/developer"
256 |                             isExternal
257 |                             color={primaryColor[colorMode]}
258 |                           >
259 |                             Developer Page
260 |                           </Link>
261 |                           .
262 |                         </Text>
263 |                         <InputGroup size="md" mt={2}>
264 |                           <InputLeftElement
265 |                             children={
266 |                               <Icon
267 |                                 name="key"
268 |                                 color={
269 |                                   areDetailsVisible
270 |                                     ? keyColor[colorMode]
271 |                                     : primaryColor[colorMode]
272 |                                 }
273 |                               />
274 |                             }
275 |                           />
276 |                           <Input
277 |                             id="dyn-api-key"
278 |                             pr="4.5rem"
279 |                             type={areDetailsVisible ? "password" : "text"}
280 |                             placeholder="API Key"
281 |                             isDisabled={areDetailsVisible ? true : false}
282 |                             variant="filled"
283 |                           />
284 |                           <InputRightElement width="4.5rem">
285 |                             <Button
286 |                               id="dyn-api-key-button"
287 |                               h="1.75rem"
288 |                               variantColor={areDetailsVisible ? "gray" : "blue"}
289 |                               size="sm"
290 |                               onClick={handleClick}
291 |                               isLoading={isLoading}
292 |                             >
293 |                               {areDetailsVisible ? "Reset" : "Save"}
294 |                             </Button>
295 |                           </InputRightElement>
296 |                         </InputGroup>
297 |                         <Alert
298 |                           status="error"
299 |                           variant="subtle"
300 |                           rounded="md"
301 |                           mt={2}
302 |                           lineHeight="shorter"
303 |                           d={isAlertVisible ? "block" : "none"}
304 |                         >
305 |                           <AlertIcon />
306 |                           There was an error. Verify your API Key.
307 |                         </Alert>
308 |                       </FormControl>
309 |                       <FormControl
310 |                         mt={4}
311 |                         d={areDetailsVisible ? "block" : "none"}
312 |                       >
313 |                         <FormLabel fontWeight="bold" color={color[colorMode]}>
314 |                           Highlight Inbox
315 |                         </FormLabel>
316 |                         <Text color={descColor[colorMode]} fontSize="sm">
317 |                           Highlights are send to one of your choosen files.
318 |                         </Text>
319 |                         <Select
320 |                           id="dyn-inbox-select"
321 |                           placeholder="Select a file"
322 |                           mt={2}
323 |                           onChange={e => handleSelect(e)}
324 |                         >
325 |                           <option value="option1">File 1</option>
326 |                         </Select>
327 |                       </FormControl>
328 |                       <FormControl
329 |                         mt={4}
330 |                         d={areDetailsVisible ? "block" : "none"}
331 |                       >
332 |                         <FormLabel fontWeight="bold" color={color[colorMode]}>
333 |                           Move to position
334 |                         </FormLabel>
335 |                         <Text color={descColor[colorMode]} fontSize="sm">
336 |                           Add the highlight bookmark to the end or to the start
337 |                         </Text>
338 |                         <Select
339 |                           id="dyn-toposition-select"
340 |                           mt={2}
341 |                           onChange={e => handleSelect(e)}
342 |                         >
343 |                           <option value="0">Start</option>
344 |                           <option value="-1">End</option>
345 |                         </Select>
346 |                       </FormControl>
347 |                       <Divider my={4} />
348 |                       <Flex justify="space-between" align="center">
349 |                         <Link
350 |                           href="https://twitter.com/wirtzdan"
351 |                           isExternal
352 |                           _hover={{ textDecoration: "none" }}
353 |                         >
354 |                           <Button
355 |                             size="sm"
356 |                             variant="ghost"
357 |                             color={footerColor[colorMode]}
358 |                             fontWeight="normal"
359 |                           >
360 |                             <Avatar
361 |                               size="2xs"
362 |                               name="Daniel Wirtz"
363 |                               src="http://bit.ly/daniel-avatar"
364 |                               mr={2}
365 |                             />
366 |                             @wirtzdan
367 |                           </Button>
368 |                         </Link>
369 |                         <Link
370 |                           href="mailto:danielwirtzx@gmail.com"
371 |                           isExternal
372 |                           _hover={{ textDecoration: "none" }}
373 |                         >
374 |                           <Button
375 |                             leftIcon="feedback"
376 |                             size="sm"
377 |                             variant="ghost"
378 |                             color={footerColor[colorMode]}
379 |                             fontWeight="normal"
380 |                           >
381 |                             Feedback
382 |                           </Button>
383 |                         </Link>
384 |                         <Button
385 |                           leftIcon={colorMode === "light" ? "moon" : "sun"}
386 |                           size="sm"
387 |                           onClick={toggleColorMode}
388 |                           variant="ghost"
389 |                           color={footerColor[colorMode]}
390 |                           fontWeight="normal"
391 |                         >
392 |                           {colorMode === "light" ? "Dark Mode" : "Light Mode"}
393 |                         </Button>
394 |                       </Flex>
395 |                     </ModalBody>
396 |                   </ModalContent>
397 |                 </FrameProvider>
398 |               </ChakraProvider>
399 |             </Frame>
400 |           </ScopeProvider>
401 |         </Modal>
402 |       )}
403 |     </SlideIn>
404 |   );
405 | }
406 | 
407 | export default Settings;
408 | 


--------------------------------------------------------------------------------
/src/components/Widget.jsx:
--------------------------------------------------------------------------------
  1 | /*global chrome*/
  2 | import React, { useState, useEffect } from "react";
  3 | import { sendToDynalist } from "../util/api";
  4 | import { highlighter } from "../util/highlighter";
  5 | 
  6 | import Settings from "./Settings";
  7 | 
  8 | import {
  9 |   Textarea,
 10 |   Box,
 11 |   Button,
 12 |   Flex,
 13 |   IconButton,
 14 |   useDisclosure,
 15 |   useColorMode
 16 | } from "@chakra-ui/core";
 17 | 
 18 | function Widget({ buttonText }) {
 19 |   const [title, setTitle] = useState("");
 20 |   const [isLoading, setIsLoading] = useState(false);
 21 |   const { colorMode } = useColorMode();
 22 |   const bgColor = { light: "white", dark: "gray.900" };
 23 |   const borderColor = { light: "gray.200", dark: "gray.700" };
 24 |   const color = { light: "gray.800", dark: "white" };
 25 | 
 26 |   const [widgetState, setWidgetState] = useState("setup");
 27 |   const [url, setUrl] = useState("");
 28 | 
 29 |   const { isOpen, onOpen, onClose } = useDisclosure();
 30 | 
 31 |   const html = document
 32 |     .getElementById("dyn-widget")
 33 |     .contentWindow.document.getElementsByTagName("html")[0];
 34 |   console.log("TCL: Widget -> html", html);
 35 | 
 36 |   html.style.backgroundColor = "transparent";
 37 | 
 38 |   useEffect(() => {
 39 |     setTitle(document.title);
 40 | 
 41 |     chrome.storage.sync.get(["key"], function(result) {
 42 |       const { key } = result;
 43 | 
 44 |       if (key) {
 45 |         setWidgetState("active");
 46 |         resizeTextareaToContent();
 47 |       } else {
 48 |         onOpen();
 49 |         resizeTextareaToContent();
 50 |       }
 51 |     });
 52 |   }, []);
 53 | 
 54 |   let handleTitleChange = e => {
 55 |     let value = e.target.value;
 56 |     setTitle(value);
 57 |   };
 58 | 
 59 |   function resizeTextareaToContent() {
 60 |     const textarea = document
 61 |       .getElementById("dyn-widget")
 62 |       .contentWindow.document.getElementById("dyn-title");
 63 |     textarea.style.height = "";
 64 |     textarea.style.height = textarea.scrollHeight + "px";
 65 |   }
 66 | 
 67 |   async function handleClick() {
 68 |     if (widgetState === "success") {
 69 |       window.open(url, "_blank");
 70 |     } else {
 71 |       setIsLoading(true);
 72 |       const { fileid, nodeid } = await sendToDynalist(highlighter.highlights);
 73 |       setUrl(`https://dynalist.io/d/${fileid}#z=${nodeid}`);
 74 |       setIsLoading(false);
 75 |       setWidgetState("success");
 76 |     }
 77 |   }
 78 | 
 79 |   return (
 80 |     <>
 81 |       <Settings
 82 |         isOpen={isOpen}
 83 |         onClose={onClose}
 84 |         setWidgetState={setWidgetState}
 85 |       />
 86 |       <Box
 87 |         w={300}
 88 |         borderWidth="1px"
 89 |         borderColor={borderColor[colorMode]}
 90 |         rounded="lg"
 91 |         roundedBottomRight={2}
 92 |         p="3"
 93 |         pos="fixed"
 94 |         right="3"
 95 |         bottom="3"
 96 |         boxShadow="md"
 97 |         bg={bgColor[colorMode]}
 98 |         zIndex={9999}
 99 |       >
100 |         <Textarea
101 |           placeholder="Title"
102 |           value={title}
103 |           onChange={handleTitleChange}
104 |           resize="none"
105 |           variant="unstyled"
106 |           height="auto"
107 |           minH={2}
108 |           isDisabled={
109 |             widgetState === "setup" || widgetState === "success" ? true : false
110 |           }
111 |           opacity={widgetState === "setup" ? "50%" : ""}
112 |           onInput={resizeTextareaToContent}
113 |           pt={0}
114 |           fontWeight="600"
115 |           lineHeight="1.2"
116 |           id="dyn-title"
117 |           color={color[colorMode]}
118 |         />
119 |         <Flex justify="space-between">
120 |           <Button
121 |             variantColor={widgetState === "success" ? "green" : "blue"}
122 |             rightIcon={widgetState === "success" ? "external-link" : ""}
123 |             size="sm"
124 |             loadingText="Saving"
125 |             isLoading={isLoading}
126 |             onClick={handleClick}
127 |             id="dyn-save-button"
128 |             isDisabled={widgetState === "setup" ? true : false}
129 |           >
130 |             {widgetState === "success" ? "Open in Dynalist" : buttonText}
131 |           </Button>
132 | 
133 |           <Flex>
134 |             <IconButton
135 |               icon="settings"
136 |               variant={widgetState === "setup" ? "solid" : "ghost"}
137 |               variantColor={widgetState === "setup" ? "red" : "gray"}
138 |               size="sm"
139 |               onClick={onOpen}
140 |             ></IconButton>
141 |           </Flex>
142 |         </Flex>
143 |       </Box>
144 |     </>
145 |   );
146 | }
147 | 
148 | export default Widget;
149 | 


--------------------------------------------------------------------------------
/src/content.js:
--------------------------------------------------------------------------------
 1 | /*global chrome*/
 2 | /* src/content.js */
 3 | import React, { useState } from "react";
 4 | import ReactDOM from "react-dom";
 5 | import Widget from "./components/Widget";
 6 | import "./app.css";
 7 | import Frame from "react-frame-component";
 8 | import { ScopeProvider } from "./util/scope-provider";
 9 | import { FrameProvider } from "./util/frame-provider";
10 | import { ChakraProvider } from "./util/chakra-provider";
11 | import { CSSReset } from "@chakra-ui/core";
12 | import { highlighter, rangy } from "./util/highlighter";
13 | 
14 | function Main() {
15 |   const [buttonText, setButtonText] = useState("Save Bookmark");
16 | 
17 |   function addHighlight(e) {
18 |     highlighter.highlightSelection("dyn-highlight");
19 |     highlighter.getHighlightForElement(e.target);
20 |     rangy.getSelection().removeAllRanges();
21 |     updateButtonText();
22 |   }
23 | 
24 |   function updateButtonText() {
25 |     const highlights = highlighter.highlights;
26 |     const length = highlights.length;
27 | 
28 |     if (length > 0) {
29 |       if (length === 1) {
30 |         setButtonText(`Save ${length} Highlight`);
31 |       } else {
32 |         setButtonText(`Save ${length} Highlights`);
33 |       }
34 |     } else {
35 |       setButtonText(`Save Bookmark`);
36 |     }
37 |   }
38 | 
39 |   function removeHighlight(e) {
40 |     const target = e.target;
41 |     var highlight = highlighter.getHighlightForElement(target);
42 | 
43 |     if (highlight) {
44 |       highlighter.removeHighlights([highlight]);
45 |       updateButtonText();
46 |     }
47 |   }
48 | 
49 |   // ---- Handle Functions ---- //
50 |   function handleMouseup(e) {
51 |     if (e.target.className === "dyn-highlight") {
52 |       removeHighlight(e);
53 |     } else if (!rangy.getSelection.isCollapsed) {
54 |       rangy.getSelection().expand("word", {
55 |         trim: true
56 |       });
57 |       addHighlight(e);
58 |     }
59 |   }
60 | 
61 |   function addHighlightListener() {
62 |     document.addEventListener("mouseup", e => handleMouseup(e));
63 |   }
64 | 
65 |   addHighlightListener();
66 | 
67 |   return (
68 |     <ScopeProvider scope={"#root .App"}>
69 |       <Frame head={[<></>]} id="dyn-widget">
70 |         <ChakraProvider>
71 |           <FrameProvider>
72 |             <CSSReset />
73 |             <Widget buttonText={buttonText} />
74 |           </FrameProvider>
75 |         </ChakraProvider>
76 |       </Frame>
77 |     </ScopeProvider>
78 |   );
79 | }
80 | 
81 | let active = false;
82 | 
83 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
84 |   if (request.msg === "deactivate") {
85 |     sendResponse("Response: Deactivate");
86 |   } else if (request.msg === "activate" && active === false) {
87 |     const app = document.createElement("div");
88 |     app.id = "dynalist-highlighter-app";
89 |     document.body.appendChild(app);
90 |     ReactDOM.render(<Main />, app);
91 |     active = true;
92 |     sendResponse("Activated.");
93 |   } else {
94 |     sendResponse("Response: Nothing happend.");
95 |   }
96 | });
97 | 


--------------------------------------------------------------------------------
/src/cssreset.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15;
 13 |   /* 1 */
 14 |   -webkit-text-size-adjust: 100%;
 15 |   /* 2 */
 16 | }
 17 | 
 18 | /* Sections
 19 |    ========================================================================== */
 20 | 
 21 | /**
 22 |  * Remove the margin in all browsers.
 23 |  */
 24 | 
 25 | body {
 26 |   margin: 0;
 27 | }
 28 | 
 29 | /**
 30 |  * Render the `main` element consistently in IE.
 31 |  */
 32 | 
 33 | main {
 34 |   display: block;
 35 | }
 36 | 
 37 | /**
 38 |  * Correct the font size and margin on `h1` elements within `section` and
 39 |  * `article` contexts in Chrome, Firefox, and Safari.
 40 |  */
 41 | 
 42 | h1 {
 43 |   font-size: 2em;
 44 |   margin: 0.67em 0;
 45 | }
 46 | 
 47 | /* Grouping content
 48 |    ========================================================================== */
 49 | 
 50 | /**
 51 |  * 1. Add the correct box sizing in Firefox.
 52 |  * 2. Show the overflow in Edge and IE.
 53 |  */
 54 | 
 55 | hr {
 56 |   box-sizing: content-box;
 57 |   /* 1 */
 58 |   height: 0;
 59 |   /* 1 */
 60 |   overflow: visible;
 61 |   /* 2 */
 62 | }
 63 | 
 64 | /**
 65 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 66 |  * 2. Correct the odd `em` font sizing in all browsers.
 67 |  */
 68 | 
 69 | pre {
 70 |   font-family: monospace, monospace;
 71 |   /* 1 */
 72 |   font-size: 1em;
 73 |   /* 2 */
 74 | }
 75 | 
 76 | /* Text-level semantics
 77 |    ========================================================================== */
 78 | 
 79 | /**
 80 |  * Remove the gray background on active links in IE 10.
 81 |  */
 82 | 
 83 | a {
 84 |   background-color: transparent;
 85 | }
 86 | 
 87 | /**
 88 |  * 1. Remove the bottom border in Chrome 57-
 89 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 90 |  */
 91 | 
 92 | abbr[title] {
 93 |   border-bottom: none;
 94 |   /* 1 */
 95 |   text-decoration: underline;
 96 |   /* 2 */
 97 |   -webkit-text-decoration: underline dotted;
 98 |   text-decoration: underline dotted;
 99 |   /* 2 */
100 | }
101 | 
102 | /**
103 |  * Add the correct font weight in Chrome, Edge, and Safari.
104 |  */
105 | 
106 | b,
107 | strong {
108 |   font-weight: bolder;
109 | }
110 | 
111 | /**
112 |  * 1. Correct the inheritance and scaling of font size in all browsers.
113 |  * 2. Correct the odd `em` font sizing in all browsers.
114 |  */
115 | 
116 | code,
117 | kbd,
118 | samp {
119 |   font-family: monospace, monospace;
120 |   /* 1 */
121 |   font-size: 1em;
122 |   /* 2 */
123 | }
124 | 
125 | /**
126 |  * Add the correct font size in all browsers.
127 |  */
128 | 
129 | small {
130 |   font-size: 80%;
131 | }
132 | 
133 | /**
134 |  * Prevent `sub` and `sup` elements from affecting the line height in
135 |  * all browsers.
136 |  */
137 | 
138 | sub,
139 | sup {
140 |   font-size: 75%;
141 |   line-height: 0;
142 |   position: relative;
143 |   vertical-align: baseline;
144 | }
145 | 
146 | sub {
147 |   bottom: -0.25em;
148 | }
149 | 
150 | sup {
151 |   top: -0.5em;
152 | }
153 | 
154 | /* Embedded content
155 |    ========================================================================== */
156 | 
157 | /**
158 |  * Remove the border on images inside links in IE 10.
159 |  */
160 | 
161 | img {
162 |   border-style: none;
163 | }
164 | 
165 | /* Forms
166 |    ========================================================================== */
167 | 
168 | /**
169 |  * 1. Change the font styles in all browsers.
170 |  * 2. Remove the margin in Firefox and Safari.
171 |  */
172 | 
173 | button,
174 | input,
175 | optgroup,
176 | select,
177 | textarea {
178 |   font-family: inherit;
179 |   /* 1 */
180 |   font-size: 100%;
181 |   /* 1 */
182 |   line-height: 1.15;
183 |   /* 1 */
184 |   margin: 0;
185 |   /* 2 */
186 | }
187 | 
188 | /**
189 |  * Show the overflow in IE.
190 |  * 1. Show the overflow in Edge.
191 |  */
192 | 
193 | button,
194 | input {
195 |   /* 1 */
196 |   overflow: visible;
197 | }
198 | 
199 | /**
200 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
201 |  * 1. Remove the inheritance of text transform in Firefox.
202 |  */
203 | 
204 | button,
205 | select {
206 |   /* 1 */
207 |   text-transform: none;
208 | }
209 | 
210 | /**
211 |  * Correct the inability to style clickable types in iOS and Safari.
212 |  */
213 | 
214 | button,
215 | [type="button"],
216 | [type="reset"],
217 | [type="submit"] {
218 |   -webkit-appearance: button;
219 | }
220 | 
221 | /**
222 |  * Remove the inner border and padding in Firefox.
223 |  */
224 | 
225 | button::-moz-focus-inner,
226 | [type="button"]::-moz-focus-inner,
227 | [type="reset"]::-moz-focus-inner,
228 | [type="submit"]::-moz-focus-inner {
229 |   border-style: none;
230 |   padding: 0;
231 | }
232 | 
233 | /**
234 |  * Restore the focus styles unset by the previous rule.
235 |  */
236 | 
237 | button:-moz-focusring,
238 | [type="button"]:-moz-focusring,
239 | [type="reset"]:-moz-focusring,
240 | [type="submit"]:-moz-focusring {
241 |   outline: 1px dotted ButtonText;
242 | }
243 | 
244 | /**
245 |  * Correct the padding in Firefox.
246 |  */
247 | 
248 | fieldset {
249 |   padding: 0.35em 0.75em 0.625em;
250 | }
251 | 
252 | /**
253 |  * 1. Correct the text wrapping in Edge and IE.
254 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
255 |  * 3. Remove the padding so developers are not caught out when they zero out
256 |  *    `fieldset` elements in all browsers.
257 |  */
258 | 
259 | legend {
260 |   box-sizing: border-box;
261 |   /* 1 */
262 |   color: inherit;
263 |   /* 2 */
264 |   display: table;
265 |   /* 1 */
266 |   max-width: 100%;
267 |   /* 1 */
268 |   padding: 0;
269 |   /* 3 */
270 |   white-space: normal;
271 |   /* 1 */
272 | }
273 | 
274 | /**
275 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
276 |  */
277 | 
278 | progress {
279 |   vertical-align: baseline;
280 | }
281 | 
282 | /**
283 |  * Remove the default vertical scrollbar in IE 10+.
284 |  */
285 | 
286 | textarea {
287 |   overflow: auto;
288 | }
289 | 
290 | /**
291 |  * 1. Add the correct box sizing in IE 10.
292 |  * 2. Remove the padding in IE 10.
293 |  */
294 | 
295 | [type="checkbox"],
296 | [type="radio"] {
297 |   box-sizing: border-box;
298 |   /* 1 */
299 |   padding: 0;
300 |   /* 2 */
301 | }
302 | 
303 | /**
304 |  * Correct the cursor style of increment and decrement buttons in Chrome.
305 |  */
306 | 
307 | [type="number"]::-webkit-inner-spin-button,
308 | [type="number"]::-webkit-outer-spin-button {
309 |   height: auto;
310 | }
311 | 
312 | /**
313 |  * 1. Correct the odd appearance in Chrome and Safari.
314 |  * 2. Correct the outline style in Safari.
315 |  */
316 | 
317 | [type="search"] {
318 |   -webkit-appearance: textfield;
319 |   /* 1 */
320 |   outline-offset: -2px;
321 |   /* 2 */
322 | }
323 | 
324 | /**
325 |  * Remove the inner padding in Chrome and Safari on macOS.
326 |  */
327 | 
328 | [type="search"]::-webkit-search-decoration {
329 |   -webkit-appearance: none;
330 | }
331 | 
332 | /**
333 |  * 1. Correct the inability to style clickable types in iOS and Safari.
334 |  * 2. Change font properties to `inherit` in Safari.
335 |  */
336 | 
337 | ::-webkit-file-upload-button {
338 |   -webkit-appearance: button;
339 |   /* 1 */
340 |   font: inherit;
341 |   /* 2 */
342 | }
343 | 
344 | /* Interactive
345 |    ========================================================================== */
346 | 
347 | /*
348 |  * Add the correct display in Edge, IE 10+, and Firefox.
349 |  */
350 | 
351 | details {
352 |   display: block;
353 | }
354 | 
355 | /*
356 |  * Add the correct display in all browsers.
357 |  */
358 | 
359 | summary {
360 |   display: list-item;
361 | }
362 | 
363 | /* Misc
364 |    ========================================================================== */
365 | 
366 | /**
367 |  * Add the correct display in IE 10+.
368 |  */
369 | 
370 | template {
371 |   display: none;
372 | }
373 | 
374 | /**
375 |  * Add the correct display in IE 10.
376 |  */
377 | 
378 | [hidden] {
379 |   display: none;
380 | }
381 | 
382 | /**
383 |  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
384 |  * A thin layer on top of normalize.css that provides a starting point more
385 |  * suitable for web applications.
386 |  */
387 | 
388 | /**
389 |  * 1. Prevent padding and border from affecting element width
390 |  * https://goo.gl/pYtbK7
391 |  * 2. Change the default font family in all browsers (opinionated)
392 |  */
393 | 
394 | html {
395 |   box-sizing: border-box;
396 |   /* 1 */
397 |   font-family: sans-serif;
398 |   /* 2 */
399 | }
400 | 
401 | *,
402 | *::before,
403 | *::after {
404 |   box-sizing: inherit;
405 | }
406 | 
407 | /**
408 |  * Removes the default spacing and border for appropriate elements.
409 |  */
410 | 
411 | blockquote,
412 | dl,
413 | dd,
414 | h1,
415 | h2,
416 | h3,
417 | h4,
418 | h5,
419 | h6,
420 | hr,
421 | figure,
422 | p,
423 | pre {
424 |   margin: 0;
425 | }
426 | 
427 | button {
428 |   background: transparent;
429 |   padding: 0;
430 | }
431 | 
432 | /**
433 |  * Work around a Firefox/IE bug where the transparent `button` background
434 |  * results in a loss of the default `button` focus styles.
435 |  */
436 | 
437 | button:focus {
438 |   outline: 1px dotted;
439 |   outline: 5px auto -webkit-focus-ring-color;
440 | }
441 | 
442 | fieldset {
443 |   margin: 0;
444 |   padding: 0;
445 | }
446 | 
447 | ol,
448 | ul {
449 |   list-style: none;
450 |   margin: 0;
451 |   padding: 0;
452 | }
453 | 
454 | /**
455 |  * Tailwind custom reset styles
456 |  */
457 | 
458 | /**
459 |  * 1. Use the system font stack as a sane default.
460 |  * 2. Use Tailwind's default "normal" line-height so the user isn't forced
461 |  * to override it to ensure consistency even when using the default theme.
462 |  */
463 | 
464 | html {
465 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
466 |     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
467 |     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
468 |   /* 1 */
469 |   line-height: 1.5;
470 |   /* 2 */
471 | }
472 | 
473 | /**
474 |  * Allow adding a border to an element by just adding a border-width.
475 |  *
476 |  * By default, the way the browser specifies that an element should have no
477 |  * border is by setting it's border-style to `none` in the user-agent
478 |  * stylesheet.
479 |  *
480 |  * In order to easily add borders to elements by just setting the `border-width`
481 |  * property, we change the default border-style for all elements to `solid`, and
482 |  * use border-width to hide them instead. This way our `border` utilities only
483 |  * need to set the `border-width` property instead of the entire `border`
484 |  * shorthand, making our border utilities much more straightforward to compose.
485 |  *
486 |  * https://github.com/tailwindcss/tailwindcss/pull/116
487 |  */
488 | 
489 | *,
490 | *::before,
491 | *::after {
492 |   border-width: 0;
493 |   border-style: solid;
494 |   border-color: #e2e8f0;
495 | }
496 | 
497 | /*
498 |  * Ensure horizontal rules are visible by default
499 |  */
500 | 
501 | hr {
502 |   border-top-width: 1px;
503 | }
504 | 
505 | /**
506 |  * Undo the `border-style: none` reset that Normalize applies to images so that
507 |  * our `border-{width}` utilities have the expected effect.
508 |  *
509 |  * The Normalize reset is unnecessary for us since we default the border-width
510 |  * to 0 on all elements.
511 |  *
512 |  * https://github.com/tailwindcss/tailwindcss/issues/362
513 |  */
514 | 
515 | img {
516 |   border-style: solid;
517 | }
518 | 
519 | textarea {
520 |   resize: vertical;
521 | }
522 | 
523 | input:-ms-input-placeholder,
524 | textarea:-ms-input-placeholder {
525 |   color: #a0aec0;
526 | }
527 | 
528 | input::-ms-input-placeholder,
529 | textarea::-ms-input-placeholder {
530 |   color: #a0aec0;
531 | }
532 | 
533 | input::placeholder,
534 | textarea::placeholder {
535 |   color: #a0aec0;
536 | }
537 | 
538 | button,
539 | [role="button"] {
540 |   cursor: pointer;
541 | }
542 | 
543 | table {
544 |   border-collapse: collapse;
545 | }
546 | 
547 | h1,
548 | h2,
549 | h3,
550 | h4,
551 | h5,
552 | h6 {
553 |   font-size: inherit;
554 |   font-weight: inherit;
555 | }
556 | 
557 | /**
558 |  * Reset links to optimize for opt-in styling instead of
559 |  * opt-out.
560 |  */
561 | 
562 | a {
563 |   color: inherit;
564 |   text-decoration: inherit;
565 | }
566 | 
567 | /**
568 |  * Reset form element properties that are easy to forget to
569 |  * style explicitly so you don't inadvertently introduce
570 |  * styles that deviate from your design system. These styles
571 |  * supplement a partial reset that is already applied by
572 |  * normalize.css.
573 |  */
574 | 
575 | button,
576 | input,
577 | optgroup,
578 | select,
579 | textarea {
580 |   padding: 0;
581 |   line-height: inherit;
582 |   color: inherit;
583 | }
584 | 
585 | /**
586 |  * Use the configured 'mono' font family for elements that
587 |  * are expected to be rendered with a monospace font, falling
588 |  * back to the system monospace stack if there is no configured
589 |  * 'mono' font family.
590 |  */
591 | 
592 | pre,
593 | code,
594 | kbd,
595 | samp {
596 |   font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
597 |     monospace;
598 | }
599 | 
600 | /**
601 |  * Make replaced elements `display: block` by default as that's
602 |  * the behavior you want almost all of the time. Inspired by
603 |  * CSS Remedy, with `svg` added as well.
604 |  *
605 |  * https://github.com/mozdevs/cssremedy/issues/14
606 |  */
607 | 
608 | img,
609 | svg,
610 | video,
611 | canvas,
612 | audio,
613 | iframe,
614 | embed,
615 | object {
616 |   display: block;
617 |   vertical-align: middle;
618 | }
619 | 
620 | /**
621 |  * Constrain images and videos to the parent width and preserve
622 |  * their instrinsic aspect ratio.
623 |  *
624 |  * https://github.com/mozdevs/cssremedy/issues/14
625 |  */
626 | 
627 | img,
628 | video {
629 |   max-width: 100%;
630 |   height: auto;
631 | }
632 | 
633 | /*# sourceMappingURL=base.css.map */
634 | 


--------------------------------------------------------------------------------
/src/daniel-avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wirtzdan/dynalist-highlighter/ffce75514f60a77c23a4be000d8399738ca9c64d/src/daniel-avatar.jpg


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import registerServiceWorker from "./registerServiceWorker";
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | registerServiceWorker();
8 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { theme } from "@chakra-ui/core";
  3 | 
  4 | const customIcons = {
  5 |   feedback: {
  6 |     path: (
  7 |       <g fill="currentColor" stroke="currentColor">
  8 |         <path d="M22 1h-7a2.44 2.44 0 00-2.41 2l-.92 5.05a2.44 2.44 0 00.53 2 2.47 2.47 0 001.88.88H17l-.25.66a3.26 3.26 0 003 4.41 1 1 0 00.92-.59l2.24-5.06A1 1 0 0023 10V2a1 1 0 00-1-1zm-1 8.73l-1.83 4.13a1.33 1.33 0 01-.45-.4 1.23 1.23 0 01-.14-1.16l.38-1a1.68 1.68 0 00-.2-1.58A1.7 1.7 0 0017.35 9h-3.29a.46.46 0 01-.35-.16.5.5 0 01-.09-.37l.92-5A.44.44 0 0115 3h6zM9.94 13.05H7.05l.25-.66A3.26 3.26 0 004.25 8a1 1 0 00-.92.59l-2.24 5.06a1 1 0 00-.09.4v8a1 1 0 001 1h7a2.44 2.44 0 002.41-2l.92-5a2.44 2.44 0 00-.53-2 2.47 2.47 0 00-1.86-1zm-.48 7.58A.44.44 0 019 21H3v-6.73l1.83-4.13a1.33 1.33 0 01.45.4 1.23 1.23 0 01.14 1.16l-.38 1a1.68 1.68 0 00.2 1.58 1.7 1.7 0 001.41.74h3.29a.46.46 0 01.35.16.5.5 0 01.09.37z" />
  9 |       </g>
 10 |     )
 11 |   },
 12 |   key: {
 13 |     path: (
 14 |       <g
 15 |         fill="none"
 16 |         stroke="currentColor"
 17 |         stroke-linecap="round"
 18 |         stroke-linejoin="round"
 19 |         stroke-width="2"
 20 |       >
 21 |         <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
 22 |       </g>
 23 |     )
 24 |   },
 25 |   help: {
 26 |     path: (
 27 |       <g
 28 |         fill="none"
 29 |         stroke="currentColor"
 30 |         stroke-linecap="round"
 31 |         stroke-linejoin="round"
 32 |         stroke-width="2"
 33 |       >
 34 |         <circle cx="12" cy="12" r="10" />
 35 |         <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" />
 36 |       </g>
 37 |     )
 38 |   },
 39 |   undo: {
 40 |     path: (
 41 |       <g
 42 |         fill="none"
 43 |         stroke="currentColor"
 44 |         stroke-linecap="round"
 45 |         stroke-linejoin="round"
 46 |         stroke-width="2"
 47 |       >
 48 |         <path d="M1 4v6h6" />
 49 |         <path d="M3.51 15a9 9 0 102.13-9.36L1 10" />
 50 |       </g>
 51 |     )
 52 |   },
 53 |   inbox: {
 54 |     path: (
 55 |       <g
 56 |         fill="none"
 57 |         stroke="currentColor"
 58 |         stroke-linecap="round"
 59 |         stroke-linejoin="round"
 60 |         stroke-width="2"
 61 |       >
 62 |         <path d="M22 12h-6l-2 3h-4l-2-3H2" />
 63 |         <path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z" />
 64 |       </g>
 65 |     )
 66 |   },
 67 |   settings: {
 68 |     path: (
 69 |       <g
 70 |         fill="none"
 71 |         stroke="currentColor"
 72 |         stroke-linecap="round"
 73 |         stroke-linejoin="round"
 74 |         stroke-width="2"
 75 |       >
 76 |         <circle cx="12" cy="12" r="3" />
 77 |         <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
 78 |       </g>
 79 |     )
 80 |   },
 81 |   end: {
 82 |     path: (
 83 |       <g
 84 |         fill="none"
 85 |         stroke="currentColor"
 86 |         stroke-linecap="round"
 87 |         stroke-linejoin="round"
 88 |         stroke-width="2"
 89 |       >
 90 |         <path d="M15 10l5 5-5 5" />
 91 |         <path d="M4 4v7a4 4 0 004 4h12" />
 92 |       </g>
 93 |     )
 94 |   },
 95 |   start: {
 96 |     path: (
 97 |       <g
 98 |         fill="none"
 99 |         stroke="currentColor"
100 |         stroke-linecap="round"
101 |         stroke-linejoin="round"
102 |         stroke-width="2"
103 |       >
104 |         <path d="M15 14l5-5-5-5" />
105 |         <path d="M4 20v-7a4 4 0 014-4h12" />
106 |       </g>
107 |     )
108 |   }
109 | };
110 | 
111 | export default {
112 |   ...theme,
113 |   icons: {
114 |     ...theme.icons,
115 |     ...customIcons
116 |   }
117 | };
118 | 


--------------------------------------------------------------------------------
/src/util/api.js:
--------------------------------------------------------------------------------
  1 | /*global chrome*/
  2 | import TurndownService from "turndown";
  3 | const axios = require("axios").default;
  4 | 
  5 | const dynInbox = axios.create({
  6 |   baseURL: "https://dynalist.io/api/v1/inbox/add",
  7 |   timeout: 2000
  8 | });
  9 | 
 10 | const dynFiles = axios.create({
 11 |   baseURL: "https://dynalist.io/api/v1/file/list",
 12 |   timeout: 2000
 13 | });
 14 | 
 15 | const dynDocument = axios.create({
 16 |   baseURL: "https://dynalist.io/api/v1/doc",
 17 |   timeout: 2000
 18 | });
 19 | 
 20 | export async function isKeyValid(key) {
 21 |   const response = await dynFiles.post("", {
 22 |     token: key
 23 |   });
 24 | 
 25 |   if (response.data._code === "Ok") {
 26 |     return true;
 27 |   } else {
 28 |     return false;
 29 |   }
 30 | }
 31 | 
 32 | export async function getFiles(key) {
 33 |   const response = await dynFiles.post("", {
 34 |     token: key
 35 |   });
 36 | 
 37 |   return response.data.files;
 38 | }
 39 | 
 40 | export async function sendToDynalist(highlights) {
 41 |   const title = document
 42 |     .getElementById("dyn-widget")
 43 |     .contentWindow.document.getElementById("dyn-title")
 44 |     .value.trim();
 45 |   const url = document.URL;
 46 | 
 47 |   const turndown = new TurndownService({
 48 |     emDelimiter: "__"
 49 |   });
 50 | 
 51 |   turndown.remove("hr");
 52 | 
 53 |   turndown.addRule("code", {
 54 |     filter: "pre",
 55 |     replacement: function(content) {
 56 |       return "```" + content + "```";
 57 |     }
 58 |   });
 59 | 
 60 |   turndown.addRule("bullets", {
 61 |     filter: "li",
 62 |     replacement: function(content) {
 63 |       return "" + content + "\n\n";
 64 |     }
 65 |   });
 66 | 
 67 |   const { key, fileid, toposition } = await new Promise((res, rej) => {
 68 |     chrome.storage.sync.get(["key", "fileid", "toposition"], result =>
 69 |       res(result)
 70 |     );
 71 |   });
 72 | 
 73 |   const response = await dynDocument.post("/edit", {
 74 |     token: key,
 75 |     file_id: fileid,
 76 |     changes: [
 77 |       {
 78 |         action: "insert",
 79 |         parent_id: "root",
 80 |         index: toposition,
 81 |         content: `[${title}](${url})`
 82 |       }
 83 |     ]
 84 |   });
 85 | 
 86 |   for (const highlight of highlights) {
 87 |     await dynDocument.post("/edit", {
 88 |       token: key,
 89 |       file_id: fileid,
 90 |       changes: [
 91 |         {
 92 |           action: "insert",
 93 |           parent_id: response.data.new_node_ids[0],
 94 |           index: -1,
 95 |           content: turndown.turndown(highlight.getRange().toHtml())
 96 |         }
 97 |       ]
 98 |     });
 99 |   }
100 | 
101 |   const nodeid = response.data.new_node_ids[0];
102 | 
103 |   return { fileid, nodeid };
104 | }
105 | 


--------------------------------------------------------------------------------
/src/util/chakra-provider.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
 3 | import theme from "../theme";
 4 | 
 5 | export function ChakraProvider({ children }) {
 6 |   return (
 7 |     <ThemeProvider theme={theme}>
 8 |       <ColorModeProvider>{children}</ColorModeProvider>
 9 |     </ThemeProvider>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/src/util/frame-provider.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { CacheProvider } from "@emotion/core";
 3 | import createCache from "@emotion/cache";
 4 | import weakMemoize from "@emotion/weak-memoize";
 5 | import { FrameContextConsumer } from "react-frame-component";
 6 | 
 7 | let memoizedCreateCacheWithContainer = weakMemoize(container => {
 8 |   let newCache = createCache({ container });
 9 |   return newCache;
10 | });
11 | 
12 | export const FrameProvider = props => (
13 |   <FrameContextConsumer>
14 |     {({ document }) => {
15 |       return (
16 |         <CacheProvider value={memoizedCreateCacheWithContainer(document.head)}>
17 |           {props.children}
18 |         </CacheProvider>
19 |       );
20 |     }}
21 |   </FrameContextConsumer>
22 | );
23 | 


--------------------------------------------------------------------------------
/src/util/highlighter.js:
--------------------------------------------------------------------------------
 1 | import rangy from "rangy";
 2 | import "rangy/lib/rangy-classapplier";
 3 | import "rangy/lib/rangy-highlighter";
 4 | import "rangy/lib/rangy-textrange";
 5 | import "rangy/lib/rangy-serializer";
 6 | 
 7 | rangy.init();
 8 | 
 9 | const highlighter = rangy.createHighlighter();
10 | highlighter.addClassApplier(rangy.createClassApplier("dyn-highlight"));
11 | 
12 | export { highlighter, rangy };
13 | 


--------------------------------------------------------------------------------
/src/util/scope-provider.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import createCache from "@emotion/cache";
 3 | import { CacheProvider } from "@emotion/core";
 4 | import memoize from "@emotion/memoize";
 5 | import stylisPluginExtraScope from "stylis-plugin-extra-scope";
 6 | 
 7 | let memoizedCreateCacheWithScope = memoize(scope => {
 8 |   return createCache({
 9 |     stylisPlugins: [stylisPluginExtraScope(scope)]
10 |   });
11 | });
12 | 
13 | export const ScopeProvider = props => {
14 |   return (
15 |     <CacheProvider value={memoizedCreateCacheWithScope(props.scope)}>
16 |       {props.children}
17 |     </CacheProvider>
18 |   );
19 | };
20 | 


--------------------------------------------------------------------------------