@standardnotes/markdown-hybrid 1.7.6

package/src/main.scss

@@ -0,0 +1,339 @@
+@import 'font-awesome/css/font-awesome.css';
+
+body, html {
+  font-family: sans-serif;
+  font-size: var(--sn-stylekit-base-font-size);
+  background-color: transparent;
+}
+
+* {
+  // To prevent gray flash when focusing input on mobile Safari
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+.editor-toolbar.fullscreen, .CodeMirror-fullscreen {
+  // On Mobile, resizing the webview to avoid keyboard causes the option bar to be offset because its position is fixed.
+  position: absolute !important
+}
+
+.CodeMirror {
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  background-color: transparent;
+  border: none;
+  font-size: var(--sn-stylekit-font-size-editor) !important;
+  // For momentum scrolling on mobile
+  -webkit-overflow-scrolling: touch;
+}
+
+.editor-toolbar, .editor-toolbar.fullscreen {
+  background-color: var(--sn-stylekit-contrast-background-color);
+  border-bottom: 1px solid var(--sn-stylekit-border-color);
+  overflow: visible; // on windows, if window is too small, horizontal scrollbar will appear fixed without this
+
+  &::before, &::after {
+    background: none !important;
+  }
+}
+
+.editor-toolbar i.separator {
+  border-left-color: var(--sn-stylekit-contrast-border-color);
+  border-right-color: var(--sn-stylekit-contrast-background-color);
+}
+
+.editor-toolbar button {
+  color: var(--sn-stylekit-info-color) !important;
+  outline: none;
+  border-radius: 0;
+  font-size: var(--sn-stylekit-base-font-size);
+}
+
+.editor-toolbar button.active, .editor-toolbar button:hover {
+  border-color: transparent;
+  background: var(--sn-stylekit-background-color);
+}
+
+.editor-toolbar.disabled-for-preview button:not(.no-disable) {
+  background: inherit;
+}
+
+.editor-toolbar.fullscreen {
+  @media screen and (max-width: 525px) {
+    height: 80px !important;
+  }
+  @media screen and (min-width: 526px) {
+    height: 50px !important;
+  }
+}
+
+.EasyMDEContainer {
+  .CodeMirror-fullscreen {
+    @media screen and (max-width: 525px) {
+      top: 80px !important;
+
+      .CodeMirror-scroll {
+        min-height: unset !important;
+      }
+    }
+    @media screen and (min-width: 526px) {
+      top: 50px !important;
+    }
+  }
+  .editor-preview-side {
+    @media screen and (max-width: 525px) {
+      top: 80px !important;
+    }
+    @media screen and (min-width: 526px) {
+      top: 50px !important;
+    }
+  }
+}
+
+.editor-preview-active, .editor-preview-active-side {
+  background-color: var(--sn-stylekit-contrast-background-color);
+  border: 0;
+  border-left: 1px solid var(--sn-stylekit-border-color);
+  color: var(--sn-stylekit-contrast-foreground-color);
+  font-size: var(--sn-stylekit-font-size-editor);
+  padding: 10px 15px;
+
+  a {
+    color: var(--sn-stylekit-info-color);
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  pre {
+    background: var(--sn-stylekit-background-color);
+    color: var(--sn-stylekit-foreground-color);
+    border: 1px solid var(--sn-stylekit-border-color);
+    padding: 20px;
+    border-radius: 3px;
+    overflow-x: auto;
+  }
+
+  table {
+    display: block;
+    margin-bottom: 12px;
+    width: 100%;
+    overflow: auto;
+    border-collapse: collapse;
+    border-spacing: 0px;
+    border-color: var(--sn-stylekit-border-color);
+
+    th, td {
+      padding: 6px 13px;
+      border: 1px solid var(--sn-stylekit-border-color);
+    }
+
+    tr:nth-child(2n) {
+      background-color: var(--sn-stylekit-background-color);
+    }
+  }
+
+  p code, ul li code {
+    padding: 3px 6px;
+    background-color: var(--sn-stylekit-background-color);
+    color: var(--sn-stylekit-info-color);
+    border: 1px solid var(--sn-stylekit-border-color);
+    border-radius: 3px;
+  }
+
+  code {
+    font-family: var(--sn-stylekit-monospace-font);
+  }
+
+  blockquote {
+    padding: 0 0.5rem;
+    margin-left: 0;
+    color: var(--sn-stylekit-neutral-color);
+    border-left: 0.3rem solid var(--sn-stylekit-background-color);
+  }
+
+  blockquote > :first-child {
+    margin-top: 0;
+  }
+
+  blockquote > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.editor-preview-active {
+  border: 0;
+}
+
+.CodeMirror {
+  background-color: var(--sn-stylekit-editor-background-color) !important;
+  color: var(--sn-stylekit-editor-foreground-color) !important;
+  border: 0 !important;
+
+  .CodeMirror-code .cm-comment {
+    background: var(--sn-stylekit-contrast-background-color);
+    color: var(--sn-stylekit-info-color);
+    font-family: Consolas,monaco,"Ubuntu Mono",courier,monospace!important;
+    font-size: 90%; // font-family makes font look a bit big
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: var(--sn-stylekit-info-color) !important;
+    }
+  }
+
+  .cm-header {
+    color: var(--sn-stylekit-editor-foreground-color);
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: var(--sn-stylekit-info-color) !important;;
+    }
+  }
+
+  // Faded Markdown syntax
+  .cm-formatting-header, .cm-formatting-strong, .cm-formatting-em {
+    opacity: 0.2;
+  }
+
+  .cm-link, .cm-url {
+    &.cm-variable-2 {
+      color: var(--sn-stylekit-info-color) !important;
+
+      &.CodeMirror-selectedtext {
+        color: var(--sn-stylekit-info-contrast-color) !important;
+        background: var(--sn-stylekit-info-color) !important;;
+      }
+    }
+  }
+
+  .cm-formatting-list-ol {
+    font-weight: bold;
+  }
+
+  .cm-link, .cm-string {
+    color: var(--sn-stylekit-info-color) !important;
+
+    &.CodeMirror-selectedtext {
+      color: var(--sn-stylekit-info-contrast-color) !important;
+      background: var(--sn-stylekit-info-color) !important;;
+    }
+  }
+
+  .CodeMirror-linenumber {
+    color: gray !important;
+  }
+
+}
+
+.CodeMirror-cursor {
+  border-color: var(--sn-stylekit-editor-foreground-color);
+}
+
+.CodeMirror-selected {
+  background: var(--sn-stylekit-info-color) !important;
+}
+
+.CodeMirror-selectedtext {
+  color: var(--sn-stylekit-info-contrast-color);
+  background: var(--sn-stylekit-info-color) !important;
+}
+
+.CodeMirror-gutters {
+  background-color: var(--sn-stylekit-background-color) !important;
+  color: var(--sn-stylekit-editor-foreground-color) !important;
+  border-color: var(--sn-stylekit-border-color) !important;
+}
+
+// remove built in simplemde rule
+@media only screen and (max-width: 700px) {
+  .editor-toolbar a.no-mobile {
+    display: inline-block;
+  }
+}
+
+/*
+  Highlight JS theming
+*/
+.hljs-comment,
+.hljs-quote {
+  font-style: italic;
+  color: var(--sn-stylekit-neutral-color);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  font-weight: bold;
+}
+
+.hljs-attribute {
+  color: var(--sn-stylekit-warning-color);
+}
+
+.hljs-number,
+.hljs-literal {
+  color: var(--sn-stylekit-info-color);
+}
+
+.hljs-string,
+.hljs-doctag,
+.hljs-formula {
+  color: var(--sn-stylekit-success-color);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-name {
+  color: var(--sn-stylekit-danger-color);
+  font-weight: bold;
+}
+
+.hljs-tag {
+  color: var(--sn-stylekit-neutral-color);
+}
+
+.hljs-regexp {
+  color: var(--sn-stylekit-success-color);
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: var(--sn-stylekit-info-color);
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  text-decoration: underline;
+}
+
+.hljs-meta {
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  color: var(--sn-stylekit-danger-color);
+}
+
+.hljs-addition {
+  color: var(--sn-stylekit-success-color);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

package/webpack.config.js

@@ -0,0 +1,73 @@
+const path = require('path')
+const CopyPlugin = require('copy-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: [path.resolve(__dirname, 'src', 'main.js'), path.resolve(__dirname, 'src', 'main.scss')],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'dist.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                includePaths: ['src/main.scss'],
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: require.resolve('easymde/dist/easymde.min.js'),
+          to: path.resolve(__dirname, 'dist/vendor/easymd/easymd.js'),
+        },
+        {
+          from: require.resolve('easymde/dist/easymde.min.css'),
+          to: path.resolve(__dirname, 'dist/vendor/easymd/easymde.css'),
+        },
+        {
+          from: require.resolve('highlightjs/highlight.pack.min.js'),
+          to: path.resolve(__dirname, 'dist/vendor/highlightjs/highlightjs.js'),
+        },
+        {
+          from: require.resolve('@standardnotes/component-relay/dist/dist.js'),
+          to: path.resolve(__dirname, 'dist/lib/component-relay.js'),
+        },
+        { from: require.resolve('sn-stylekit/dist/stylekit.css'), to: path.resolve(__dirname, 'dist/stylekit.css') },
+      ],
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'dist.css',
+    }),
+    new HtmlWebpackPlugin({
+      title: 'Markdown Pro',
+      template: 'editor.index.ejs',
+    }),
+  ],
+}

package/webpack.dev.js

@@ -0,0 +1,23 @@
+const { merge } = require('webpack-merge');
+const config = require('./webpack.config.js');
+const path = require("path");
+
+module.exports = merge(config, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  stats: {
+    colors: true
+  },
+  devServer: {
+    port: 8001,
+    contentBase: path.join(__dirname, 'dist'),
+    disableHostCheck: true,
+    historyApiFallback: true,
+    watchOptions: { aggregateTimeout: 300, poll: 1000 },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
+    }
+  }
+});

package/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const config = require('./webpack.config.js');
+
+module.exports = merge(config, {
+  mode: 'production',
+  devtool: 'source-map'
+});