@milkdown/crepe 7.3.6 → 7.5.0

package/src/icons/quote.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const quoteIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_7897)">
+      <path d="M7.17 17C7.68 17 8.15 16.71 8.37 16.26L9.79 13.42C9.93 13.14 10 12.84 10 12.53V8C10 7.45 9.55 7 9 7H5C4.45 7 4 7.45 4 8V12C4 12.55 4.45 13 5 13H7L5.97 15.06C5.52 15.95 6.17 17 7.17 17ZM17.17 17C17.68 17 18.15 16.71 18.37 16.26L19.79 13.42C19.93 13.14 20 12.84 20 12.53V8C20 7.45 19.55 7 19 7H15C14.45 7 14 7.45 14 8V12C14 12.55 14.45 13 15 13H17L15.97 15.06C15.52 15.95 16.17 17 17.17 17Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7897">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/remove.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const removeIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"/>
+  </svg>
+`

package/src/icons/search.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const searchIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+  </svg>
+`

package/src/icons/strikethrough.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const strikethroughIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M3.25 13.7404C3.0375 13.7404 2.85938 13.6684 2.71563 13.5246C2.57188 13.3808 2.5 13.2026 2.5 12.99C2.5 12.7774 2.57188 12.5993 2.71563 12.4558C2.85938 12.3122 3.0375 12.2404 3.25 12.2404H20.75C20.9625 12.2404 21.1406 12.3123 21.2843 12.4561C21.4281 12.5999 21.5 12.7781 21.5 12.9907C21.5 13.2033 21.4281 13.3814 21.2843 13.525C21.1406 13.6686 20.9625 13.7404 20.75 13.7404H3.25ZM10.9423 10.2596V6.62495H6.5673C6.2735 6.62495 6.02377 6.52201 5.8181 6.31613C5.61245 6.11026 5.50963 5.86027 5.50963 5.56615C5.50963 5.27205 5.61245 5.02083 5.8181 4.8125C6.02377 4.60417 6.2735 4.5 6.5673 4.5H17.4423C17.7361 4.5 17.9858 4.60294 18.1915 4.80883C18.3971 5.01471 18.5 5.2647 18.5 5.5588C18.5 5.85292 18.3971 6.10413 18.1915 6.31245C17.9858 6.52078 17.7361 6.62495 17.4423 6.62495H13.0673V10.2596H10.9423ZM10.9423 15.7211H13.0673V18.4423C13.0673 18.7361 12.9643 18.9858 12.7584 19.1915C12.5526 19.3971 12.3026 19.5 12.0085 19.5C11.7144 19.5 11.4631 19.3962 11.2548 19.1887C11.0465 18.9811 10.9423 18.7291 10.9423 18.4327V15.7211Z"/>
+  </svg>
+`

package/src/icons/table.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const tableIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_8078)">
+      <path d="M20 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3ZM20 5V8H5V5H20ZM15 19H10V10H15V19ZM5 10H8V19H5V10ZM17 19V10H20V19H17Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8078">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/text.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const textIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_992_5547)">
+      <path d="M5 5.5C5 6.33 5.67 7 6.5 7H10.5V17.5C10.5 18.33 11.17 19 12 19C12.83 19 13.5 18.33 13.5 17.5V7H17.5C18.33 7 19 6.33 19 5.5C19 4.67 18.33 4 17.5 4H6.5C5.67 4 5 4.67 5 5.5Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5547">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/todoList.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const todoListIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M5.66936 16.3389L9.39244 12.6158C9.54115 12.4671 9.71679 12.3937 9.91936 12.3957C10.1219 12.3976 10.2975 12.4761 10.4463 12.6312C10.5847 12.7823 10.654 12.9585 10.654 13.1599C10.654 13.3613 10.5847 13.5363 10.4463 13.6851L6.32704 17.8197C6.14627 18.0004 5.93538 18.0908 5.69436 18.0908C5.45333 18.0908 5.24243 18.0004 5.06166 17.8197L3.01744 15.7754C2.87899 15.637 2.81136 15.4629 2.81456 15.2533C2.81776 15.0437 2.88859 14.8697 3.02706 14.7312C3.16551 14.5928 3.34008 14.5235 3.55076 14.5235C3.76144 14.5235 3.93494 14.5928 4.07126 14.7312L5.66936 16.3389ZM5.66936 8.72359L9.39244 5.00049C9.54115 4.85177 9.71679 4.77838 9.91936 4.78031C10.1219 4.78223 10.2975 4.86075 10.4463 5.01586C10.5847 5.16691 10.654 5.34314 10.654 5.54454C10.654 5.74592 10.5847 5.92097 10.4463 6.06969L6.32704 10.2043C6.14627 10.3851 5.93538 10.4755 5.69436 10.4755C5.45333 10.4755 5.24243 10.3851 5.06166 10.2043L3.01744 8.16009C2.87899 8.02162 2.81136 7.84759 2.81456 7.63799C2.81776 7.42837 2.88859 7.25433 3.02706 7.11586C3.16551 6.97741 3.34008 6.90819 3.55076 6.90819C3.76144 6.90819 3.93494 6.97741 4.07126 7.11586L5.66936 8.72359ZM13.7597 16.5581C13.5472 16.5581 13.3691 16.4862 13.2253 16.3424C13.0816 16.1986 13.0097 16.0204 13.0097 15.8078C13.0097 15.5952 13.0816 15.4171 13.2253 15.2735C13.3691 15.13 13.5472 15.0582 13.7597 15.0582H20.7597C20.9722 15.0582 21.1503 15.1301 21.2941 15.2739C21.4378 15.4177 21.5097 15.5959 21.5097 15.8085C21.5097 16.0211 21.4378 16.1992 21.2941 16.3427C21.1503 16.4863 20.9722 16.5581 20.7597 16.5581H13.7597ZM13.7597 8.94276C13.5472 8.94276 13.3691 8.87085 13.2253 8.72704C13.0816 8.58324 13.0097 8.40504 13.0097 8.19244C13.0097 7.97985 13.0816 7.80177 13.2253 7.65819C13.3691 7.5146 13.5472 7.44281 13.7597 7.44281H20.7597C20.9722 7.44281 21.1503 7.51471 21.2941 7.65851C21.4378 7.80233 21.5097 7.98053 21.5097 8.19311C21.5097 8.40571 21.4378 8.5838 21.2941 8.72739C21.1503 8.87097 20.9722 8.94276 20.7597 8.94276H13.7597Z"/>
+  </svg>
+`

package/src/index.ts

@@ -1,5 +1,2 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export { CrepeTheme } from './theme'
 export { CrepeFeature } from './feature'
 export * from './core'

package/src/theme/_internal/classic-common.css

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

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

@@ -0,0 +1,138 @@
+.milkdown {
+  milkdown-block-handle {
+    &[data-show='false'] {
+      opacity: 0;
+    }
+    transition: all 0.2s;
+    position: absolute;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+
+    .operation-item {
+      border-radius: 4px;
+      width: 32px;
+      height: 32px;
+      padding: 4px;
+
+      svg {
+        width: 24px;
+        height: 24px;
+        fill: var(--crepe-color-outline);
+      }
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      &.active {
+        background: var(--crepe-color-selected);
+      }
+    }
+  }
+
+  milkdown-slash-menu {
+    &[data-show='false'] {
+      display: none;
+    }
+    position: absolute;
+    display: block;
+    font-family: var(--crepe-font-default);
+    color: var(--crepe-color-on-surface);
+    background: var(--crepe-color-surface);
+    border-radius: 12px;
+    box-shadow: var(--crepe-shadow-1);
+
+    ul {
+      list-style-type: none;
+      li {
+        cursor: pointer;
+        border-radius: 8px;
+      }
+    }
+
+    .tab-group {
+      border-bottom: 1px solid color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      padding: 12px 12px 0;
+
+      ul {
+        padding: 8px 10px;
+        display: flex;
+        gap: 10px;
+        flex-wrap: nowrap;
+
+        li {
+          padding: 6px 10px;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 20px;
+          &:hover {
+            background: var(--crepe-color-hover);
+          }
+          &.selected {
+            background: var(--crepe-color-selected);
+          }
+        }
+      }
+    }
+
+    .menu-groups {
+      padding: 0 12px 12px;
+      max-height: 420px;
+      overflow: auto;
+      overscroll-behavior: contain;
+      scroll-behavior: smooth;
+
+      .menu-group {
+        h6 {
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 20px;
+          padding: 14px 10px;
+          text-transform: uppercase;
+          color: color-mix(in srgb, var(--crepe-color-on-surface), transparent 40%)
+        }
+
+        li {
+          min-width: 220px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          gap: 16px;
+          padding: 14px 10px;
+          &.hover {
+            background: var(--crepe-color-hover);
+          }
+          &.active {
+            background: var(--crepe-color-selected);
+          }
+
+          & > svg {
+            width: 24px;
+            height: 24px;
+            color: var(--crepe-color-outline);
+            fill: var(--crepe-color-outline);
+          }
+          & > span {
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 20px;
+          }
+        }
+      }
+
+      .menu-group + .menu-group::before {
+        content: '';
+        display: block;
+        height: 1px;
+        background: color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+        margin: 0 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,189 @@
+.milkdown {
+  milkdown-code-block {
+    display: block;
+    position: relative;
+    padding: 8px 20px 20px;
+    background: var(--crepe-color-surface);
+    margin: 4px 0;
+
+    .language-picker {
+      padding-top: 10px;
+      width: max-content;
+      position: absolute;
+      z-index: 1;
+      display: none;
+
+      &.show {
+        display: block;
+      }
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    &.selected {
+      outline: 1px solid var(--crepe-color-primary);
+    }
+
+    .cm-editor {
+      outline: none !important;
+      background: var(--crepe-color-surface);
+    }
+
+    .cm-gutters {
+      border-right: none;
+      background: var(--crepe-color-surface);
+    }
+
+    .language-button {
+      display: flex;
+      align-items: center;
+      font-family: var(--crepe-font-default);
+      gap: 6px;
+      padding: 2px 4px 2px 8px;
+      background: var(--crepe-color-surface-low);
+      color: var(--crepe-color-on-surface-variant);
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+      margin-bottom: 8px;
+      opacity: 0;
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      .expand-icon {
+        transition: transform 0.2s ease-in-out;
+        width: 18px;
+        height: 18px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .expand-icon svg {
+        width: 14px;
+        height: 14px;
+        color: var(--crepe-color-outline);
+      }
+
+      &[data-expanded="true"] .expand-icon {
+        transform: rotate(180deg);
+      }
+
+      .expand-icon svg:focus,
+      .expand-icon:focus-visible {
+        outline: none;
+      }
+    }
+
+    &:hover .language-button {
+      opacity: 1;
+    }
+
+    .list-wrapper {
+      background: var(--crepe-color-surface-low);
+      border-radius: 12px;
+      box-shadow: var(--crepe-shadow-1);
+      width: 240px;
+      padding-top: 12px;
+    }
+
+    .language-list {
+      height: 410px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      margin: 0;
+      padding: 0;
+    }
+
+    .language-list-item {
+      cursor: pointer;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 22px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      &:focus-visible {
+        outline: none;
+        background: var(--crepe-color-hover);
+      }
+
+      .leading,
+      .leading svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      &.no-result {
+        cursor: default;
+        opacity: 0.6;
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    .search-box {
+      display: flex;
+      align-items: center;
+      margin: 0 12px 8px;
+      background: transparent;
+      border-radius: 4px;
+      outline: 1px solid var(--crepe-color-primary);
+      gap: 8px;
+      padding: 6px 10px;
+      &:has(input:focus) {
+        outline: 2px solid var(--crepe-color-primary);
+      }
+
+      .search-input {
+        width: 100%;
+        color: var(--crepe-color-on-surface);
+      }
+
+      .search-icon {
+        display: none;
+      }
+
+      .clear-icon {
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        svg {
+          width: 20px;
+          height: 20px;
+          color: var(--crepe-color-primary);
+          fill: var(--crepe-color-primary);
+        }
+        &:hover {
+          background: var(--crepe-color-hover);
+        }
+      }
+
+      input {
+        font-family: var(--crepe-font-default);
+        font-size: 14px;
+        line-height: 20px;
+        background: transparent;
+      }
+
+      input:focus {
+        outline: none;
+      }
+    }
+  }
+}

package/src/theme/common/cursor.css

@@ -0,0 +1,15 @@
+@import "@milkdown/kit/prose/gapcursor/style/gapcursor.css";
+
+.milkdown {
+  .crepe-drop-cursor {
+    background-color: color-mix(in srgb, var(--crepe-color-outline), transparent 50%);
+    opacity: 0.5;
+    transition: all 0.2s;
+    pointer-events: none
+  }
+
+  .ProseMirror-gapcursor:after {
+    box-sizing: border-box;
+    border-top: 1px solid var(--crepe-color-on-background);
+  }
+}