@jvs-milkdown/crepe 1.2.0 → 1.2.2

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

@@ -152,10 +152,16 @@
     outline: none;
     margin: 4px 0;
     display: block;
+    position: relative;
+
+    &:hover {
+      z-index: 120;
+    }
 
     & > .image-wrapper {
       position: relative;
       width: fit-content;
+      max-width: 100%;
       margin: 0 auto;
       min-width: 100px;
     }
@@ -168,15 +174,6 @@
       margin: 0 0 0 auto;
     }
 
-    & > .image-wrapper .operation {
-      position: absolute;
-      display: flex;
-    }
-
-    & > .image-wrapper .operation > .operation-item {
-      cursor: pointer;
-    }
-
     & > .image-wrapper img {
       max-width: 100%;
       min-height: 100px;
@@ -269,32 +266,64 @@
       display: flex;
       justify-content: center;
       align-items: center;
+
+      &.cropping {
+        outline: none !important;
+      }
     }
 
-    .image-wrapper .operation {
-      gap: 12px;
-      right: 12px;
-      top: 12px;
+    .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: fit-content;
+      z-index: 10;
+      white-space: nowrap;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -8px;
+        height: 8px;
+      }
     }
 
-    &:hover > .image-wrapper .operation {
+    &:hover > .image-toolbar {
       opacity: 1;
+      pointer-events: auto;
     }
 
-    .image-wrapper .operation > .operation-item {
-      color: var(--crepe-color-on-inverse);
-      padding: 4px;
-      background: var(--crepe-color-inverse);
-      opacity: 0.6;
-      border-radius: 50%;
+    .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);
 
       svg {
-        width: 24px;
-        height: 24px;
+        width: 20px;
+        height: 20px;
+      }
+
+      &:hover {
+        background: var(--crepe-color-hover);
       }
     }
 
@@ -431,5 +460,321 @@
           var(--crepe-color-secondary);
       }
     }
+
+    .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;
+    }
+
+    .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);
+    }
+
+    .crop-options {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .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);
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      &.active {
+        background: var(--crepe-color-selected);
+        color: var(--crepe-color-primary);
+      }
+    }
+
+    .setting-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .setting-label {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--crepe-color-on-surface-variant);
+      min-width: 32px;
+      font-family: var(--crepe-font-default);
+    }
+
+    .setting-value {
+      font-size: 12px;
+      color: var(--crepe-color-on-surface-variant);
+      min-width: 30px;
+      font-family: var(--crepe-font-default);
+    }
+
+    .border-style-options {
+      display: flex;
+      gap: 4px;
+    }
+
+    .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);
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      &.active {
+        background: var(--crepe-color-selected);
+        color: var(--crepe-color-primary);
+      }
+    }
+
+    input[type='range'] {
+      flex: 1;
+      height: 4px;
+      accent-color: var(--crepe-color-primary);
+    }
+
+    input[type='color'] {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: 1px solid var(--crepe-color-outline);
+      border-radius: 4px;
+      cursor: pointer;
+      background: transparent;
+    }
+
+    .crop-actions {
+      display: flex;
+      gap: 4px;
+      margin-top: 8px;
+      flex-wrap: wrap;
+    }
+
+    .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);
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      &.primary {
+        background: var(--crepe-color-primary);
+        color: #fff;
+        border-color: var(--crepe-color-primary);
+      }
+    }
+
+    .crop-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 5;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+
+    .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;
+    }
+
+    .crop-grid {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
+    .crop-grid-line {
+      position: absolute;
+      background: rgba(255, 255, 255, 0.4);
+
+      &.horizontal {
+        left: 0;
+        right: 0;
+        height: 1px;
+      }
+
+      &.horizontal.first {
+        top: 33.33%;
+      }
+
+      &.horizontal.second {
+        top: 66.66%;
+      }
+
+      &.vertical {
+        top: 0;
+        bottom: 0;
+        width: 1px;
+      }
+
+      &.vertical.first {
+        left: 33.33%;
+      }
+
+      &.vertical.second {
+        left: 66.66%;
+      }
+    }
+
+    .crop-handle {
+      position: absolute;
+      background: transparent;
+      z-index: 3;
+
+      &.nw {
+        top: 0;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        border-top: 2px solid #000;
+        border-left: 2px solid #000;
+        cursor: nwse-resize;
+      }
+
+      &.ne {
+        top: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        border-top: 2px solid #000;
+        border-right: 2px solid #000;
+        cursor: nesw-resize;
+      }
+
+      &.sw {
+        bottom: 0;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        border-bottom: 2px solid #000;
+        border-left: 2px solid #000;
+        cursor: nesw-resize;
+      }
+
+      &.se {
+        bottom: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        border-bottom: 2px solid #000;
+        border-right: 2px solid #000;
+        cursor: nwse-resize;
+      }
+
+      &.n {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 0;
+        border-top: 2px solid #000;
+        cursor: ns-resize;
+      }
+
+      &.s {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 0;
+        border-bottom: 2px solid #000;
+        cursor: ns-resize;
+      }
+
+      &.w {
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 20px;
+        border-left: 2px solid #000;
+        cursor: ew-resize;
+      }
+
+      &.e {
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 20px;
+        border-right: 2px solid #000;
+        cursor: ew-resize;
+      }
+    }
+
+    .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);
+    }
+
+    .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);
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+    }
   }
 }

package/src/theme/common/reset.css

@@ -206,6 +206,7 @@
     ul:has(mark) p:has(mark),
     ol:has(mark) p:has(mark) {
       padding: 4px 0;
+      margin: 0px;
       border: none;
       border-radius: 0;
       background-color: transparent;
@@ -228,6 +229,7 @@
       code {
         padding: 0;
         background: transparent;
+        color: var(--crepe-color-inline-code);
       }
     }
 
@@ -292,6 +294,7 @@
     ul,
     ol {
       padding: 0;
+      list-style: none;
     }
   }
 }

package/src/theme/common/toolbar.css

@@ -19,13 +19,14 @@
 
     .divider {
       width: 1px;
+      align-self: center;
       background: color-mix(
         in srgb,
         var(--crepe-color-outline),
         transparent 80%
       );
       height: 24px;
-      margin: 10px;
+      margin: 0 4px;
     }
 
     .toolbar-item {
@@ -36,6 +37,10 @@
       cursor: pointer;
       border-radius: 4px;
 
+      &:has(.milkdown-icon) {
+        padding: 2px 6px;
+      }
+
       &:hover {
         background: var(--crepe-color-hover);
       }
@@ -85,15 +90,34 @@
     top: 0;
     flex-shrink: 0;
 
+    .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;
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+    }
+
     .divider {
       width: 1px;
+      align-self: center;
       background: color-mix(
         in srgb,
         var(--crepe-color-outline),
         transparent 80%
       );
       height: 20px;
-      margin: 10px;
+      margin: 0 4px;
     }
 
     .toolbar-item {
@@ -104,6 +128,10 @@
       cursor: pointer;
       border-radius: 4px;
 
+      &:has(.milkdown-icon) {
+        padding: 2px 6px;
+      }
+
       &:hover {
         background: var(--crepe-color-hover);
       }