@jvs-milkdown/crepe 1.2.0 → 1.2.2

package/lib/theme/common/code-mirror.css

@@ -35,6 +35,10 @@
       background: transparent;
     }
 
+    .milkdown .milkdown-code-block .cm-activeLineGutter {
+      background-color: #f5f5f5;
+    }
+
     .milkdown .milkdown-code-block .cm-panel {
       font-family: var(--crepe-font-default);
       background: transparent;
@@ -152,6 +156,15 @@
           border-bottom-right-radius: 100px;
         }
 
+    .milkdown .milkdown-code-block .tools .tools-button-group button.word-wrap-active {
+          background: var(--crepe-color-selected);
+          color: var(--crepe-color-primary);
+        }
+
+    .milkdown .milkdown-code-block .tools .tools-button-group button.word-wrap-active svg {
+            stroke: var(--crepe-color-primary);
+          }
+
     .milkdown .milkdown-code-block .tools .language-button {
         display: flex;
         align-items: center;

package/lib/theme/common/image-block.css

@@ -160,11 +160,16 @@
     outline: none;
     margin: 4px 0;
     display: block;
+    position: relative;
   }
+  .milkdown .milkdown-image-block:hover {
+      z-index: 120;
+    }
   .milkdown .milkdown-image-block > .image-wrapper {
       position: relative;
       width: -moz-fit-content;
       width: fit-content;
+      max-width: 100%;
       margin: 0 auto;
       min-width: 100px;
     }
@@ -174,13 +179,6 @@
   .milkdown .milkdown-image-block[data-align='right'] > .image-wrapper {
       margin: 0 0 0 auto;
     }
-  .milkdown .milkdown-image-block > .image-wrapper .operation {
-      position: absolute;
-      display: flex;
-    }
-  .milkdown .milkdown-image-block > .image-wrapper .operation > .operation-item {
-      cursor: pointer;
-    }
   .milkdown .milkdown-image-block > .image-wrapper img {
       max-width: 100%;
       min-height: 100px;
@@ -262,28 +260,58 @@
       justify-content: center;
       align-items: center;
     }
-  .milkdown .milkdown-image-block .image-wrapper .operation {
-      gap: 12px;
-      right: 12px;
-      top: 12px;
+  .milkdown .milkdown-image-block .image-wrapper.cropping {
+        outline: none !important;
+      }
+  .milkdown .milkdown-image-block .image-toolbar {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 4px 8px;
+      background: var(--crepe-color-surface);
+      border-radius: 8px;
+      box-shadow: var(--crepe-shadow-1);
       opacity: 0;
-      transition: all 0.2s;
+      pointer-events: none;
+      transition: opacity 0.2s;
+      width: -moz-fit-content;
+      width: fit-content;
+      z-index: 10;
+      white-space: nowrap;
     }
-  .milkdown .milkdown-image-block:hover > .image-wrapper .operation {
+  .milkdown .milkdown-image-block .image-toolbar::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -8px;
+        height: 8px;
+      }
+  .milkdown .milkdown-image-block:hover > .image-toolbar {
       opacity: 1;
+      pointer-events: auto;
     }
-  .milkdown .milkdown-image-block .image-wrapper .operation > .operation-item {
-      color: var(--crepe-color-on-inverse);
-      padding: 4px;
-      background: var(--crepe-color-inverse);
-      opacity: 0.6;
-      border-radius: 50%;
+  .milkdown .milkdown-image-block .image-toolbar-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
       width: 32px;
       height: 32px;
+      border-radius: 6px;
+      color: var(--crepe-color-on-surface-variant);
     }
-  .milkdown .milkdown-image-block .image-wrapper .operation > .operation-item svg {
-        width: 24px;
-        height: 24px;
+  .milkdown .milkdown-image-block .image-toolbar-item svg {
+        width: 20px;
+        height: 20px;
+      }
+  .milkdown .milkdown-image-block .image-toolbar-item:hover {
+        background: var(--crepe-color-hover);
       }
   .milkdown .milkdown-image-block .image-wrapper .image-resize-handle {
       position: absolute;
@@ -401,3 +429,277 @@
           ),
           var(--crepe-color-secondary);
       }
+  .milkdown .milkdown-image-block .setting-panel {
+      position: absolute;
+      top: 44px;
+      right: 0;
+      z-index: 10;
+      background: var(--crepe-color-surface);
+      border-radius: 8px;
+      box-shadow: var(--crepe-shadow-1);
+      padding: 12px;
+      min-width: 200px;
+    }
+  .milkdown .milkdown-image-block .setting-panel-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--crepe-color-on-surface-variant);
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      font-family: var(--crepe-font-default);
+    }
+  .milkdown .milkdown-image-block .crop-options {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+  .milkdown .milkdown-image-block .crop-option {
+      padding: 4px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      background: var(--crepe-color-surface-low);
+      color: var(--crepe-color-on-surface-variant);
+      font-family: var(--crepe-font-default);
+    }
+  .milkdown .milkdown-image-block .crop-option:hover {
+        background: var(--crepe-color-hover);
+      }
+  .milkdown .milkdown-image-block .crop-option.active {
+        background: var(--crepe-color-selected);
+        color: var(--crepe-color-primary);
+      }
+  .milkdown .milkdown-image-block .setting-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+  .milkdown .milkdown-image-block .setting-label {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--crepe-color-on-surface-variant);
+      min-width: 32px;
+      font-family: var(--crepe-font-default);
+    }
+  .milkdown .milkdown-image-block .setting-value {
+      font-size: 12px;
+      color: var(--crepe-color-on-surface-variant);
+      min-width: 30px;
+      font-family: var(--crepe-font-default);
+    }
+  .milkdown .milkdown-image-block .border-style-options {
+      display: flex;
+      gap: 4px;
+    }
+  .milkdown .milkdown-image-block .border-style-option {
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      background: var(--crepe-color-surface-low);
+      color: var(--crepe-color-on-surface-variant);
+      font-family: var(--crepe-font-default);
+    }
+  .milkdown .milkdown-image-block .border-style-option:hover {
+        background: var(--crepe-color-hover);
+      }
+  .milkdown .milkdown-image-block .border-style-option.active {
+        background: var(--crepe-color-selected);
+        color: var(--crepe-color-primary);
+      }
+  .milkdown .milkdown-image-block input[type='range'] {
+      flex: 1;
+      height: 4px;
+      accent-color: var(--crepe-color-primary);
+    }
+  .milkdown .milkdown-image-block input[type='color'] {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: 1px solid var(--crepe-color-outline);
+      border-radius: 4px;
+      cursor: pointer;
+      background: transparent;
+    }
+  .milkdown .milkdown-image-block .crop-actions {
+      display: flex;
+      gap: 4px;
+      margin-top: 8px;
+      flex-wrap: wrap;
+    }
+  .milkdown .milkdown-image-block .crop-action-btn {
+      padding: 4px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      border: 1px solid var(--crepe-color-outline);
+      background: var(--crepe-color-surface-low);
+      color: var(--crepe-color-on-surface-variant);
+      font-family: var(--crepe-font-default);
+    }
+  .milkdown .milkdown-image-block .crop-action-btn:hover {
+        background: var(--crepe-color-hover);
+      }
+  .milkdown .milkdown-image-block .crop-action-btn.primary {
+        background: var(--crepe-color-primary);
+        color: #fff;
+        border-color: var(--crepe-color-primary);
+      }
+  .milkdown .milkdown-image-block .crop-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 5;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+  .milkdown .milkdown-image-block .crop-box {
+      position: absolute;
+      /* border: 2px solid transparent; */
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+      cursor: move;
+      z-index: 2;
+    }
+  .milkdown .milkdown-image-block .crop-grid {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+  .milkdown .milkdown-image-block .crop-grid-line {
+      position: absolute;
+      background: rgba(255, 255, 255, 0.4);
+    }
+  .milkdown .milkdown-image-block .crop-grid-line.horizontal {
+        left: 0;
+        right: 0;
+        height: 1px;
+      }
+  .milkdown .milkdown-image-block .crop-grid-line.horizontal.first {
+        top: 33.33%;
+      }
+  .milkdown .milkdown-image-block .crop-grid-line.horizontal.second {
+        top: 66.66%;
+      }
+  .milkdown .milkdown-image-block .crop-grid-line.vertical {
+        top: 0;
+        bottom: 0;
+        width: 1px;
+      }
+  .milkdown .milkdown-image-block .crop-grid-line.vertical.first {
+        left: 33.33%;
+      }
+  .milkdown .milkdown-image-block .crop-grid-line.vertical.second {
+        left: 66.66%;
+      }
+  .milkdown .milkdown-image-block .crop-handle {
+      position: absolute;
+      background: transparent;
+      z-index: 3;
+    }
+  .milkdown .milkdown-image-block .crop-handle.nw {
+        top: 0;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        border-top: 2px solid #000;
+        border-left: 2px solid #000;
+        cursor: nwse-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.ne {
+        top: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        border-top: 2px solid #000;
+        border-right: 2px solid #000;
+        cursor: nesw-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.sw {
+        bottom: 0;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        border-bottom: 2px solid #000;
+        border-left: 2px solid #000;
+        cursor: nesw-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.se {
+        bottom: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        border-bottom: 2px solid #000;
+        border-right: 2px solid #000;
+        cursor: nwse-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.n {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 0;
+        border-top: 2px solid #000;
+        cursor: ns-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.s {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 0;
+        border-bottom: 2px solid #000;
+        cursor: ns-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.w {
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 20px;
+        border-left: 2px solid #000;
+        cursor: ew-resize;
+      }
+  .milkdown .milkdown-image-block .crop-handle.e {
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 20px;
+        border-right: 2px solid #000;
+        cursor: ew-resize;
+      }
+  .milkdown .milkdown-image-block .crop-toolbar {
+      position: absolute;
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 8px;
+      z-index: 10;
+      background: var(--crepe-color-surface);
+      border-radius: 8px;
+      padding: 4px;
+      box-shadow: var(--crepe-shadow-1);
+    }
+  .milkdown .milkdown-image-block .crop-toolbar-btn {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 6px;
+      color: var(--crepe-color-on-surface-variant);
+    }
+  .milkdown .milkdown-image-block .crop-toolbar-btn svg {
+        width: 20px;
+        height: 20px;
+      }
+  .milkdown .milkdown-image-block .crop-toolbar-btn:hover {
+        background: var(--crepe-color-hover);
+      }

package/lib/theme/common/reset.css

@@ -237,6 +237,7 @@
 .milkdown .ProseMirror ul:has(mark) p:has(mark),
     .milkdown .ProseMirror ol:has(mark) p:has(mark) {
       padding: 4px 0;
+      margin: 0px;
       border: none;
       border-radius: 0;
       background-color: transparent;
@@ -260,6 +261,7 @@
 .milkdown .ProseMirror pre code {
         padding: 0;
         background: transparent;
+        color: var(--crepe-color-inline-code);
       }
 
 .milkdown .ProseMirror blockquote {
@@ -323,4 +325,5 @@
 .milkdown .ProseMirror ul,
     .milkdown .ProseMirror ol {
       padding: 0;
+      list-style: none;
     }

package/lib/theme/common/toolbar.css

@@ -17,13 +17,14 @@
 }
   .milkdown .milkdown-toolbar .divider {
       width: 1px;
+      align-self: center;
       background: color-mix(
         in srgb,
         var(--crepe-color-outline),
         transparent 80%
       );
       height: 24px;
-      margin: 10px;
+      margin: 0 4px;
     }
   .milkdown .milkdown-toolbar .toolbar-item {
       min-width: 32px;
@@ -33,6 +34,9 @@
       cursor: pointer;
       border-radius: 4px;
     }
+  .milkdown .milkdown-toolbar .toolbar-item:has(.milkdown-icon) {
+        padding: 2px 6px;
+      }
   .milkdown .milkdown-toolbar .toolbar-item:hover {
         background: var(--crepe-color-hover);
       }
@@ -72,15 +76,33 @@
     top: 0;
     flex-shrink: 0;
   }
+  .milkdown .milkdown-fixed-toolbar .toolbar-shortcut-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      border-radius: 4px;
+      color: var(--crepe-color-on-surface-variant, #666);
+      margin-left: 6px;
+    }
+  .milkdown .milkdown-fixed-toolbar .toolbar-shortcut-btn:hover {
+        background: var(--crepe-color-hover);
+      }
   .milkdown .milkdown-fixed-toolbar .divider {
       width: 1px;
+      align-self: center;
       background: color-mix(
         in srgb,
         var(--crepe-color-outline),
         transparent 80%
       );
       height: 20px;
-      margin: 10px;
+      margin: 0 4px;
     }
   .milkdown .milkdown-fixed-toolbar .toolbar-item {
       min-width: 28px;
@@ -90,6 +112,9 @@
       cursor: pointer;
       border-radius: 4px;
     }
+  .milkdown .milkdown-fixed-toolbar .toolbar-item:has(.milkdown-icon) {
+        padding: 2px 6px;
+      }
   .milkdown .milkdown-fixed-toolbar .toolbar-item:hover {
         background: var(--crepe-color-hover);
       }