@firestitch/markdown-editor 18.0.0 → 18.0.2

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/common/table.css

@@ -0,0 +1,219 @@
+@import '@milkdown/kit/prose/tables/style/tables.css';
+
+.milkdown .milkdown-table-block {
+    display: block;
+    margin: 4px 0;
+  }
+
+.milkdown .milkdown-table-block th,
+    .milkdown .milkdown-table-block td {
+      border: 1px solid
+        color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      padding: 4px 16px;
+    }
+
+.milkdown .milkdown-table-block th .ProseMirror-selectednode, .milkdown .milkdown-table-block td .ProseMirror-selectednode {
+        background-color: transparent !important;
+      }
+
+.milkdown .milkdown-table-block th:has(.ProseMirror-selectednode), .milkdown .milkdown-table-block td:has(.ProseMirror-selectednode) {
+        outline: 1px solid var(--crepe-color-primary);
+        outline-offset: -1px;
+      }
+
+.milkdown .milkdown-table-block .selectedCell::after {
+        background-color: var(--crepe-color-selected);
+        opacity: 0.4;
+      }
+
+.milkdown .milkdown-table-block .selectedCell ::-moz-selection {
+        background: transparent;
+      }
+
+.milkdown .milkdown-table-block .selectedCell ::selection {
+        background: transparent;
+      }
+
+.milkdown .milkdown-table-block .drag-preview {
+      background-color: var(--crepe-color-surface);
+      opacity: 0.4;
+      position: absolute;
+      z-index: 100;
+      display: flex;
+      flex-direction: column;
+      outline: 1px solid var(--crepe-color-primary);
+      outline-offset: -1px;
+    }
+
+.milkdown .milkdown-table-block .drag-preview[data-show='false'] {
+        display: none;
+      }
+
+.milkdown .milkdown-table-block .drag-preview th:has(.ProseMirror-selectednode), .milkdown .milkdown-table-block .drag-preview td:has(.ProseMirror-selectednode) {
+          outline: none;
+        }
+
+.milkdown .milkdown-table-block .handle {
+      position: absolute;
+      font-size: 14px;
+      transition: opacity ease-in-out 0.2s;
+    }
+
+.milkdown .milkdown-table-block .handle[data-show='false'] {
+      opacity: 0;
+    }
+
+.milkdown .milkdown-table-block svg {
+      fill: var(--crepe-color-outline);
+    }
+
+.milkdown .milkdown-table-block .cell-handle {
+      z-index: 50;
+      left: -999px;
+      top: -999px;
+      cursor: grab;
+      background-color: var(--crepe-color-surface);
+      color: var(--crepe-color-outline);
+      border-radius: 100px;
+      box-shadow: var(--crepe-shadow-1);
+      transition: background-color 0.2s ease-in-out;
+    }
+
+.milkdown .milkdown-table-block .cell-handle:hover {
+        background-color: var(--crepe-color-hover);
+      }
+
+.milkdown .milkdown-table-block .cell-handle:has(.button-group:hover) {
+        background-color: var(--crepe-color-surface);
+      }
+
+.milkdown .milkdown-table-block .cell-handle[data-role='col-drag-handle'] {
+        transform: translateY(50%);
+        padding: 0 6px;
+        width: 28px;
+        height: 16px;
+      }
+
+.milkdown .milkdown-table-block .cell-handle[data-role='row-drag-handle'] {
+        transform: translateX(50%);
+        padding: 6px 0;
+        width: 16px;
+        height: 28px;
+      }
+
+.milkdown .milkdown-table-block .cell-handle .button-group {
+        position: absolute;
+        transform: translateX(-50%);
+        left: 50%;
+        top: -52px;
+        display: flex;
+        background-color: var(--crepe-color-surface);
+        border-radius: 8px;
+        box-shadow: var(--crepe-shadow-1);
+      }
+
+.milkdown .milkdown-table-block .cell-handle .button-group::after {
+          content: '';
+          position: absolute;
+          bottom: -8px;
+          height: 8px;
+          background-color: transparent;
+          width: 100%;
+        }
+
+.milkdown .milkdown-table-block .cell-handle .button-group[data-show='false'] {
+          display: none;
+        }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button {
+          cursor: pointer;
+          margin: 6px;
+          padding: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 4px;
+        }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button svg {
+            width: 24px;
+            height: 24px;
+          }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button:hover {
+            border-radius: 8px;
+            background-color: var(--crepe-color-hover);
+          }
+
+.milkdown .milkdown-table-block .cell-handle .button-group button:active {
+            background: var(--crepe-color-selected);
+          }
+
+.milkdown .milkdown-table-block .cell-handle:hover {
+        opacity: 1;
+      }
+
+.milkdown .milkdown-table-block .line-handle {
+      z-index: 20;
+      background-color: var(--crepe-color-primary);
+    }
+
+.milkdown .milkdown-table-block .line-handle:hover {
+        opacity: 1;
+      }
+
+.milkdown .milkdown-table-block .line-handle .add-button {
+        cursor: pointer;
+        background-color: var(--crepe-color-surface);
+        color: var(--crepe-color-outline);
+        border-radius: 100px;
+        box-shadow: var(--crepe-shadow-1);
+        transition: background-color 0.2s ease-in-out;
+      }
+
+.milkdown .milkdown-table-block .line-handle .add-button svg {
+          width: 16px;
+          height: 16px;
+        }
+
+.milkdown .milkdown-table-block .line-handle .add-button:hover {
+          background-color: var(--crepe-color-hover);
+        }
+
+.milkdown .milkdown-table-block .line-handle .add-button:active {
+          background: var(--crepe-color-selected);
+        }
+
+.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] {
+        height: 1px;
+        z-index: 2;
+      }
+
+.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] .add-button {
+          position: absolute;
+          transform: translateX(-50%) translateY(-50%);
+          padding: 6px 0;
+          width: 16px;
+          height: 28px;
+        }
+
+.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] {
+        width: 1px;
+        z-index: 1;
+      }
+
+.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] .add-button {
+          position: absolute;
+          transform: translateY(-50%) translateX(-50%);
+          padding: 0 6px;
+          width: 28px;
+          height: 16px;
+        }
+
+.milkdown .milkdown-table-block .line-handle[data-display-type='indicator'] .add-button {
+          display: none;
+        }
+
+.milkdown .milkdown-table-block.readonly .handle {
+      display: none;
+    }

package/assets/theme/common/toolbar.css

@@ -0,0 +1,50 @@
+.milkdown:has(.milkdown-link-preview[data-show='true']) .milkdown-toolbar,
+  .milkdown:has(.milkdown-link-edit[data-show='true']) .milkdown-toolbar {
+    display: none;
+  }
+  .milkdown .milkdown-toolbar[data-show='false'] {
+      display: none;
+    }
+  .milkdown .milkdown-toolbar {
+    z-index: 10;
+    position: absolute;
+    display: flex;
+    background: var(--crepe-color-surface);
+    box-shadow: var(--crepe-shadow-1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+  .milkdown .milkdown-toolbar .divider {
+      width: 1px;
+      background: color-mix(
+        in srgb,
+        var(--crepe-color-outline),
+        transparent 80%
+      );
+      height: 24px;
+      margin: 10px;
+    }
+  .milkdown .milkdown-toolbar .toolbar-item {
+      width: 32px;
+      height: 32px;
+      margin: 6px;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+  .milkdown .milkdown-toolbar .toolbar-item:hover {
+        background: var(--crepe-color-hover);
+      }
+  .milkdown .milkdown-toolbar .toolbar-item:active {
+        background: var(--crepe-color-selected);
+      }
+  .milkdown .milkdown-toolbar .toolbar-item svg {
+        height: 24px;
+        width: 24px;
+        color: var(--crepe-color-outline);
+        fill: var(--crepe-color-outline);
+      }
+  .milkdown .milkdown-toolbar .toolbar-item.active svg {
+          color: var(--crepe-color-primary);
+          fill: var(--crepe-color-primary);
+        }

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);
+}