@firestitch/markdown-editor 18.0.1 → 18.0.2

package/assets/theme/common/prosemirror.css

@@ -0,0 +1 @@
+@import '@milkdown/kit/prose/view/style/prosemirror.css';

package/assets/theme/common/reset.css

@@ -0,0 +1,288 @@
+.milkdown {
+  position: relative;
+}
+
+  .milkdown * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .milkdown button,
+  .milkdown input {
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+
+  .milkdown button:focus, .milkdown input:focus {
+      outline: none;
+    }
+
+  .milkdown :focus-visible {
+    outline: none;
+  }
+
+  .milkdown {
+
+  font-family: var(--crepe-font-default);
+  color: var(--crepe-color-on-background);
+  background: var(--crepe-color-background);
+}
+
+  .milkdown .milkdown-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .milkdown .ProseMirror-focused {
+    outline: none;
+  }
+
+  .milkdown .ProseMirror {
+    padding: 60px 120px;
+  }
+
+  .milkdown .ProseMirror *::-moz-selection {
+      background: var(--crepe-color-selected);
+    }
+
+  .milkdown .ProseMirror *::selection {
+      background: var(--crepe-color-selected);
+    }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode {
+      background: var(--crepe-color-selected);
+      outline: none;
+    }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode ::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode ::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror li.ProseMirror-selectednode:after {
+      all: unset;
+    }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode {
+      background: var(--crepe-color-selected);
+      outline: none;
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-selected),
+        transparent 60%
+      );
+    }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode ::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode ::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror .ProseMirror-selectednode::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror[data-dragging='true']::-moz-selection, .milkdown .ProseMirror[data-dragging='true'] *::-moz-selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror[data-dragging='true'] .ProseMirror-selectednode,
+      .milkdown .ProseMirror[data-dragging='true']::selection,
+      .milkdown .ProseMirror[data-dragging='true'] *::selection {
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror[data-dragging='true'] input::-moz-selection {
+        background: var(--crepe-color-selected);
+      }
+
+  .milkdown .ProseMirror[data-dragging='true'] input::selection {
+        background: var(--crepe-color-selected);
+      }
+
+  .milkdown .ProseMirror img {
+      vertical-align: bottom;
+      max-width: 100%;
+    }
+
+  .milkdown .ProseMirror img.ProseMirror-selectednode {
+        background: none;
+        outline: 2px solid var(--crepe-color-primary);
+      }
+
+  .milkdown .ProseMirror h1,
+    .milkdown .ProseMirror h2,
+    .milkdown .ProseMirror h3,
+    .milkdown .ProseMirror h4,
+    .milkdown .ProseMirror h5,
+    .milkdown .ProseMirror h6 {
+      font-family: var(--crepe-font-title);
+      font-weight: 400;
+      padding: 2px 0;
+    }
+
+  .milkdown .ProseMirror h1 {
+      font-size: 42px;
+      line-height: 50px;
+      margin-top: 32px;
+    }
+
+  .milkdown .ProseMirror h2 {
+      font-size: 36px;
+      line-height: 44px;
+      margin-top: 28px;
+    }
+
+  .milkdown .ProseMirror h3 {
+      font-size: 32px;
+      line-height: 40px;
+      margin-top: 24px;
+    }
+
+  .milkdown .ProseMirror h4 {
+      font-size: 28px;
+      line-height: 36px;
+      margin-top: 20px;
+    }
+
+  .milkdown .ProseMirror h5 {
+      font-size: 24px;
+      line-height: 32px;
+      margin-top: 16px;
+    }
+
+  .milkdown .ProseMirror h6 {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 28px;
+      margin-top: 16px;
+    }
+
+  .milkdown .ProseMirror p {
+      font-size: 16px;
+      line-height: 24px;
+      padding: 4px 0;
+    }
+
+  .milkdown .ProseMirror code {
+      color: var(--crepe-color-inline-code);
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-inline-area),
+        transparent 40%
+      );
+      font-family: var(--crepe-font-code);
+      padding: 0 2px;
+      border-radius: 4px;
+      font-size: 87.5%;
+      display: inline-block;
+      line-height: 1.4286;
+    }
+
+  .milkdown .ProseMirror a {
+      color: var(--crepe-color-primary);
+      text-decoration: underline;
+    }
+
+  .milkdown .ProseMirror pre {
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-inline-area),
+        transparent 40%
+      );
+      padding: 10px;
+      border-radius: 4px;
+    }
+
+  .milkdown .ProseMirror pre code {
+        padding: 0;
+        background: transparent;
+      }
+
+  .milkdown .ProseMirror blockquote {
+      position: relative;
+      padding-left: 40px;
+      padding-top: 0;
+      padding-bottom: 0;
+      box-sizing: content-box;
+      margin: 4px 0;
+    }
+
+  .milkdown .ProseMirror blockquote::before {
+        content: '';
+        width: 4px;
+        left: 0;
+        top: 4px;
+        bottom: 4px;
+        position: absolute;
+        background: var(--crepe-color-selected);
+        border-radius: 100px;
+      }
+
+  .milkdown .ProseMirror blockquote hr {
+        margin-bottom: 16px;
+      }
+
+  .milkdown .ProseMirror hr {
+      border: none;
+      background-color: color-mix(
+        in srgb,
+        var(--crepe-color-outline),
+        transparent 80%
+      );
+      background-clip: content-box;
+      padding: 6px 0;
+      height: 13px;
+      position: relative;
+    }
+
+  .milkdown .ProseMirror hr.ProseMirror-selectednode {
+        outline: none;
+        background-color: color-mix(
+          in srgb,
+          var(--crepe-color-outline),
+          transparent 20%
+        );
+        background-clip: content-box;
+      }
+
+  .milkdown .ProseMirror hr.ProseMirror-selectednode::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          background-color: color-mix(
+            in srgb,
+            var(--crepe-color-outline),
+            transparent 80%
+          );
+          pointer-events: none;
+        }
+
+  .milkdown .ProseMirror ul,
+    .milkdown .ProseMirror ol {
+      padding: 0;
+    }

package/assets/theme/common/style.css

@@ -0,0 +1,12 @@
+@import './prosemirror.css';
+@import './reset.css';
+@import './block-edit.css';
+@import './code-mirror.css';
+@import './cursor.css';
+@import './image-block.css';
+@import './link-tooltip.css';
+@import './list-item.css';
+@import './placeholder.css';
+@import './toolbar.css';
+@import './table.css';
+@import './latex.css';

package/assets/theme/crepe/style.css

@@ -0,0 +1,29 @@
+.milkdown {
+  --crepe-color-background: #fffdfb;
+  --crepe-color-on-background: #1f1b16;
+  --crepe-color-surface: #fff8f4;
+  --crepe-color-surface-low: #fff1e5;
+  --crepe-color-on-surface: #201b13;
+  --crepe-color-on-surface-variant: #4f4539;
+  --crepe-color-outline: #817567;
+  --crepe-color-primary: #805610;
+  --crepe-color-secondary: #fbdebc;
+  --crepe-color-on-secondary: #271904;
+  --crepe-color-inverse: #362f27;
+  --crepe-color-on-inverse: #fcefe2;
+  --crepe-color-inline-code: #ba1a1a;
+  --crepe-color-error: #ba1a1a;
+  --crepe-color-hover: #f9ecdf;
+  --crepe-color-selected: #ede0d4;
+  --crepe-color-inline-area: #e4d8cc;
+
+  --crepe-font-title: Georgia, Cambria, 'Times New Roman', Times, serif;
+  --crepe-font-default: 'Open Sans', Arial, Helvetica, sans-serif;
+  --crepe-font-code:
+    Fira Code, Menlo, Monaco, 'Courier New', Courier, monospace;
+
+  --crepe-shadow-1:
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+  --crepe-shadow-2:
+    0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+}

package/assets/theme/crepe-dark/style.css

@@ -0,0 +1,31 @@
+.milkdown {
+  --crepe-color-background: #1f1b16;
+  --crepe-color-on-background: #eae1d9;
+  --crepe-color-surface: #18120b;
+  --crepe-color-surface-low: #201b13;
+  --crepe-color-on-surface: #ede0d4;
+  --crepe-color-on-surface-variant: #d3c4b4;
+  --crepe-color-outline: #9c8f80;
+  --crepe-color-primary: #f4bd6f;
+  --crepe-color-secondary: #56442a;
+  --crepe-color-on-secondary: #fbdebc;
+  --crepe-color-inverse: #ede0d4;
+  --crepe-color-on-inverse: #362f27;
+  --crepe-color-inline-code: #ffb4ab;
+  --crepe-color-error: #ffb4ab;
+  --crepe-color-hover: #251f17;
+  --crepe-color-selected: #3b342b;
+  --crepe-color-inline-area: #3f3830;
+
+  --crepe-font-title: Georgia, Cambria, 'Times New Roman', Times, serif;
+  --crepe-font-default: 'Open Sans', Arial, Helvetica, sans-serif;
+  --crepe-font-code:
+    Fira Code, Menlo, Monaco, 'Courier New', Courier, monospace;
+
+  --crepe-shadow-1:
+    0px 1px 2px 0px rgba(255, 255, 255, 0.3),
+    0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --crepe-shadow-2:
+    0px 1px 2px 0px rgba(255, 255, 255, 0.3),
+    0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+}

package/assets/theme/frame/style.css

@@ -0,0 +1,29 @@
+.milkdown {
+  --crepe-color-background: #ffffff;
+  --crepe-color-on-background: #000000;
+  --crepe-color-surface: #f7f7f7;
+  --crepe-color-surface-low: #ededed;
+  --crepe-color-on-surface: #1c1c1c;
+  --crepe-color-on-surface-variant: #4d4d4d;
+  --crepe-color-outline: #a8a8a8;
+  --crepe-color-primary: #333333;
+  --crepe-color-secondary: #cfcfcf;
+  --crepe-color-on-secondary: #000000;
+  --crepe-color-inverse: #f0f0f0;
+  --crepe-color-on-inverse: #1a1a1a;
+  --crepe-color-inline-code: #ba1a1a;
+  --crepe-color-error: #ba1a1a;
+  --crepe-color-hover: #e0e0e0;
+  --crepe-color-selected: #d5d5d5;
+  --crepe-color-inline-area: #cacaca;
+
+  --crepe-font-title: 'Noto Serif', Cambria, 'Times New Roman', Times, serif;
+  --crepe-font-default: 'Noto Sans', Arial, Helvetica, sans-serif;
+  --crepe-font-code:
+    'Space Mono', Fira Code, Menlo, Monaco, 'Courier New', Courier, monospace;
+
+  --crepe-shadow-1:
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+  --crepe-shadow-2:
+    0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+}

package/assets/theme/frame-dark/style.css

@@ -0,0 +1,31 @@
+.milkdown {
+  --crepe-color-background: #1a1a1a;
+  --crepe-color-on-background: #e6e6e6;
+  --crepe-color-surface: #121212;
+  --crepe-color-surface-low: #1c1c1c;
+  --crepe-color-on-surface: #d1d1d1;
+  --crepe-color-on-surface-variant: #a9a9a9;
+  --crepe-color-outline: #757575;
+  --crepe-color-primary: #b5b5b5;
+  --crepe-color-secondary: #4d4d4d;
+  --crepe-color-on-secondary: #d6d6d6;
+  --crepe-color-inverse: #e5e5e5;
+  --crepe-color-on-inverse: #2a2a2a;
+  --crepe-color-inline-code: #ff6666;
+  --crepe-color-error: #ff6666;
+  --crepe-color-hover: #232323;
+  --crepe-color-selected: #2f2f2f;
+  --crepe-color-inline-area: #2b2b2b;
+
+  --crepe-font-title: 'Noto Serif', Cambria, 'Times New Roman', Times, serif;
+  --crepe-font-default: 'Noto Sans', Arial, Helvetica, sans-serif;
+  --crepe-font-code:
+    'Space Mono', Fira Code, Menlo, Monaco, 'Courier New', Courier, monospace;
+
+  --crepe-shadow-1:
+    0px 1px 2px 0px rgba(255, 255, 255, 0.3),
+    0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --crepe-shadow-2:
+    0px 1px 2px 0px rgba(255, 255, 255, 0.3),
+    0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+}

package/assets/theme/nord-dark/style.css

@@ -0,0 +1,31 @@
+.milkdown {
+  --crepe-color-background: #1b1c1d;
+  --crepe-color-on-background: #f8f9ff;
+  --crepe-color-surface: #111418;
+  --crepe-color-surface-low: #191c20;
+  --crepe-color-on-surface: #e1e2e8;
+  --crepe-color-on-surface-variant: #c3c6cf;
+  --crepe-color-outline: #8d9199;
+  --crepe-color-primary: #a1c9fd;
+  --crepe-color-secondary: #3c4858;
+  --crepe-color-on-secondary: #d7e3f8;
+  --crepe-color-inverse: #e1e2e8;
+  --crepe-color-on-inverse: #2e3135;
+  --crepe-color-inline-code: #ffb4ab;
+  --crepe-color-error: #ffb4ab;
+  --crepe-color-hover: #1d2024;
+  --crepe-color-selected: #32353a;
+  --crepe-color-inline-area: #111418;
+
+  --crepe-font-title: Rubik, Cambria, 'Times New Roman', Times, serif;
+  --crepe-font-default: Inter, Arial, Helvetica, sans-serif;
+  --crepe-font-code:
+    'JetBrains Mono', Menlo, Monaco, 'Courier New', Courier, monospace;
+
+  --crepe-shadow-1:
+    0px 1px 2px 0px rgba(255, 255, 255, 0.3),
+    0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --crepe-shadow-2:
+    0px 1px 2px 0px rgba(255, 255, 255, 0.3),
+    0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firestitch/markdown-editor",
-  "version": "18.0.1",
+  "version": "18.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/Firestitch/ngx-markdown-editor"