@milkdown/crepe 7.3.3

package/src/feature/block-edit/style.css

@@ -0,0 +1,126 @@
+.milkdown {
+  milkdown-block-handle {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+    padding-right: 4px;
+
+    .operation-item {
+      border-radius: 4px;
+      width: 32px;
+      height: 32px;
+      padding: 4px;
+
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+
+      &.active {
+        background: var(--crepe-color-selected);
+      }
+    }
+  }
+
+  milkdown-slash-menu {
+    display: block;
+    width: 254px;
+    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;
+
+      .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 {
+          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);
+          }
+          & > 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/feature/code-mirror/index.ts

@@ -0,0 +1,60 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { codeBlockComponent, codeBlockConfig } from '@milkdown/components/code-block'
+import { languages } from '@codemirror/language-data'
+import { basicSetup } from 'codemirror'
+import { keymap } from '@codemirror/view'
+import { defaultKeymap } from '@codemirror/commands'
+import { bespin, espresso, rosePineDawn } from 'thememirror'
+import { html } from 'atomico'
+import { ThemeCtx, injectStyle } from '../../core/slice'
+import type { DefineFeature } from '../shared'
+import { CrepeTheme } from '../../theme'
+import style from './style.css?inline'
+
+function pickTheme(theme: CrepeTheme) {
+  switch (theme) {
+    case CrepeTheme.Classic:
+      return rosePineDawn
+    case CrepeTheme.ClassicDark:
+      return bespin
+    default:
+      return espresso
+  }
+}
+
+const check = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M5.99986 10.7799L3.21986 7.9999L2.27319 8.9399L5.99986 12.6666L13.9999 4.66656L13.0599 3.72656L5.99986 10.7799Z" fill="#49454F"/>
+  </svg>
+`
+
+const clearIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_1098_15553)">
+      <path d="M18.3007 5.70973C17.9107 5.31973 17.2807 5.31973 16.8907 5.70973L12.0007 10.5897L7.1107 5.69973C6.7207 5.30973 6.0907 5.30973 5.7007 5.69973C5.3107 6.08973 5.3107 6.71973 5.7007 7.10973L10.5907 11.9997L5.7007 16.8897C5.3107 17.2797 5.3107 17.9097 5.7007 18.2997C6.0907 18.6897 6.7207 18.6897 7.1107 18.2997L12.0007 13.4097L16.8907 18.2997C17.2807 18.6897 17.9107 18.6897 18.3007 18.2997C18.6907 17.9097 18.6907 17.2797 18.3007 16.8897L13.4107 11.9997L18.3007 7.10973C18.6807 6.72973 18.6807 6.08973 18.3007 5.70973Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1098_15553">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const defineFeature: DefineFeature = (editor) => {
+  editor.config(injectStyle(style))
+    .config(async (ctx) => {
+      const crepeTheme = ctx.get(ThemeCtx)
+
+      ctx.update(codeBlockConfig.key, defaultConfig => ({
+        ...defaultConfig,
+        languages,
+        clearSearchIcon: () => clearIcon,
+        extensions: [basicSetup, keymap.of(defaultKeymap), pickTheme(crepeTheme)],
+        renderLanguage: (language, selected) => {
+          return html`<span class="leading">${selected ? check : null}</span>${language}`
+        },
+      }))
+    })
+    .use(codeBlockComponent)
+}

package/src/feature/code-mirror/style.css

@@ -0,0 +1,159 @@
+.milkdown {
+  milkdown-code-block {
+    padding: 24px 40px;
+    background: var(--crepe-color-surface);
+    margin: 20px 0;
+
+    &.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 {
+      font-family: var(--crepe-font-default);
+      gap: 6px;
+      padding: 6px 8px 6px 18px;
+      background: var(--crepe-color-surface-low);
+      color: var(--crepe-color-on-surface-variant);
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      margin-bottom: 24px;
+      opacity: 0;
+      cursor: pointer;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover .language-button {
+      opacity: 1;
+    }
+
+    .language-button:hover {
+      background: var(--crepe-color-hover);
+    }
+
+    .language-button .expand-icon {
+      transition: transform 0.2s ease-in-out;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .language-button .expand-icon svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .language-button[data-expanded="true"] .expand-icon {
+      transform: rotate(180deg);
+    }
+
+    .language-button .expand-icon svg:focus,
+    .language-button .expand-icon:focus-visible {
+      outline: none;
+    }
+
+    .language-picker {
+      padding-top: 16px;
+    }
+
+    .list-wrapper {
+      background: var(--crepe-color-surface-low);
+      border-radius: 12px;
+      box-shadow: var(--crepe-shadow-1);
+      width: 244px;
+    }
+
+    .language-list {
+      height: 410px;
+      overflow-y: auto;
+      margin: 0;
+      padding: 0;
+    }
+
+    .language-list-item {
+      cursor: pointer;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px 12px 10px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .language-list-item:hover {
+      background: var(--crepe-color-hover);
+    }
+
+    .language-list-item:focus-visible {
+      outline: none;
+      background: var(--crepe-color-hover);
+    }
+
+    .language-list-item .leading,
+    .language-list-item .leading svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .list-wrapper {
+      padding-top: 20px;
+    }
+
+    .search-box {
+      margin: 0 16px 12px;
+      background: transparent;
+      border-radius: 4px;
+      outline: 1px solid var(--crepe-color-primary);
+      gap: 8px;
+      padding: 12px 20px 12px 10px;
+    }
+
+    .search-box .search-input {
+      width: 100%;
+      color: var(--crepe-color-on-surface);
+    }
+
+    .search-box .search-icon {
+      display: none;
+    }
+
+    .search-box .clear-icon {
+      width: 24px;
+      height: 24px;
+      svg {
+        width: 24px;
+        height: 24px;
+        color: var(--crepe-color-primary);
+      }
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+    }
+
+    .search-box input {
+      font-family: var(--crepe-font-default);
+      font-size: 16px;
+      line-height: 24px;
+      background: transparent;
+    }
+
+    .search-box input:focus {
+      outline: none;
+    }
+  }
+}

package/src/feature/gap-cursor/index.ts

@@ -0,0 +1,31 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { cursor, dropCursorConfig } from '@milkdown/plugin-cursor'
+import gapCursor from '@milkdown/prose/gapcursor/style/gapcurosr.css?inline'
+
+import type { DefineFeature } from '../shared'
+import { CrepeTheme } from '../../theme'
+import { ThemeCtx, injectStyle } from '../../core/slice'
+
+function getColorFromTheme(theme: CrepeTheme) {
+  switch (theme) {
+    case CrepeTheme.Classic:
+      return '#1F1B16'
+    case CrepeTheme.ClassicDark:
+      return '#EAE1D9'
+    default:
+      return undefined
+  }
+}
+
+export const defineFeature: DefineFeature = (editor) => {
+  editor
+    .config(injectStyle(gapCursor))
+    .config((ctx) => {
+      const theme = ctx.get(ThemeCtx)
+      ctx.update(dropCursorConfig.key, value => ({
+        ...value,
+        color: getColorFromTheme(theme),
+      }))
+    })
+    .use(cursor)
+}

package/src/feature/image-block/index.ts

@@ -0,0 +1,59 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { imageBlockComponent, imageBlockConfig } from '@milkdown/components/image-block'
+import { imageInlineComponent, inlineImageConfig } from '@milkdown/components/image-inline'
+import { html } from 'atomico'
+import type { DefineFeature } from '../shared'
+import { injectStyle } from '../../core/slice'
+import style from './style.css?inline'
+
+const imageIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_1013_1596)">
+      <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1596">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+const confirmIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_1013_1606)">
+      <path d="M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1606">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+const captionIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z"/></svg>
+`
+
+export const defineFeature: DefineFeature = (editor) => {
+  editor
+    .config(injectStyle(style))
+    .config((ctx) => {
+      ctx.update(inlineImageConfig.key, value => ({
+        ...value,
+        imageIcon: () => imageIcon,
+        confirmButton: () => confirmIcon,
+        uploadPlaceholderText: 'or paste link',
+      }))
+      ctx.update(imageBlockConfig.key, value => ({
+        ...value,
+        imageIcon: () => imageIcon,
+        captionIcon: () => captionIcon,
+        confirmButton: () => html`Confirm`,
+        captionPlaceholderText: 'Write Image Caption',
+      }))
+    })
+    .use(imageBlockComponent)
+    .use(imageInlineComponent)
+}

package/src/feature/image-block/style.css

@@ -0,0 +1,215 @@
+.milkdown {
+  milkdown-image-inline {
+    &.empty.selected {
+      background: none;
+      outline: none;
+      .empty-image-inline {
+        box-shadow: var(--crepe-shadow-1);
+      }
+    }
+
+    &.selected {
+      background: none;
+      outline: 1px solid var(--crepe-color-primary);
+      ::selection {
+        background: transparent;
+      }
+    }
+
+    img.image-inline {
+      vertical-align: text-bottom;
+    }
+
+    .empty-image-inline {
+      align-items: center;
+      padding: 4px 10px;
+      gap: 10px;
+      background: var(--crepe-color-surface);
+      font-family: var(--crepe-font-default);
+      border-radius: 8px;
+    }
+
+    .empty-image-inline .image-icon {
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+      padding: 3px;
+      width: 24px;
+      height: 24px;
+    }
+
+    .empty-image-inline .link-importer {
+      height: 24px;
+    }
+
+    .empty-image-inline .link-importer .placeholder {
+      color: color-mix(in srgb, var(--crepe-color-on-background), transparent 60%);
+      ::selection {
+        background: transparent;
+      }
+    }
+
+    .empty-image-inline .link-importer .link-input-area {
+      line-height: 24px;
+    }
+
+    .empty-image-inline .link-importer .placeholder .uploader {
+      gap: 8px;
+      color: var(--crepe-color-primary);
+      justify-content: center;
+      transition: color 0.2s;
+      font-family: var(--crepe-font-default);
+    }
+
+    .empty-image-inline .link-importer.focus .placeholder .uploader {
+      color: unset;
+    }
+
+    .empty-image-inline .link-importer .placeholder .uploader:hover {
+      color: var(--crepe-color-primary);
+    }
+
+    .empty-image-inline .link-importer .placeholder .text {
+      margin-left: 8px;
+    }
+
+    .empty-image-inline .confirm {
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+      width: 24px;
+      height: 24px;
+      padding: 3px;
+      border-radius: 8px;
+      color: var(--crepe-color-primary);
+      &:hover {
+        background: var(--crepe-color-hover);
+      }
+    }
+  }
+
+  milkdown-image-block {
+    &.selected > .image-edit {
+      outline: 1px solid var(--crepe-color-outline);
+    }
+
+    &.selected {
+      & > .image-wrapper img {
+        outline: 1px solid var(--crepe-color-outline);
+      }
+      ::selection {
+        background: transparent;
+      }
+    }
+
+    .image-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .image-wrapper .operation {
+      gap: 16px;
+      right: 16px;
+      top: 16px;
+      opacity: 0;
+      transition: all 0.2s;
+    }
+
+    &:hover > .image-wrapper .operation {
+      opacity: 1;
+    }
+
+    .image-wrapper .operation > .operation-item {
+      color: var(--crepe-color-on-inverse);
+      padding: 8px;
+      background: var(--crepe-color-inverse);
+      opacity: 0.6;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .image-wrapper .image-resize-handle {
+      height: 4px;
+      bottom: -3px;
+      max-width: 160px;
+      width: 100%;
+      background: var(--crepe-color-outline);
+      opacity: 0;
+      transition: all 0.2s;
+      border-radius: 4px;
+    }
+
+    &:hover > .image-wrapper .image-resize-handle {
+      opacity: 1;
+    }
+
+    .caption-input {
+      margin: 16px auto;
+      font-family: var(--crepe-font-default);
+    }
+
+    .image-edit {
+      align-items: center;
+      padding: 16px 24px;
+      gap: 16px;
+      background: var(--crepe-color-surface);
+      height: 56px;
+    }
+
+    .image-edit .image-icon {
+      color: var(--crepe-color-outline);
+    }
+
+    .image-edit .image-icon svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .image-edit .link-importer .placeholder {
+      color: color-mix(in srgb, var(--crepe-color-on-background), transparent 60%);
+      ::selection {
+        background: transparent;
+      }
+    }
+
+    .image-edit .link-importer .link-input-area {
+      line-height: 24px;
+    }
+
+    .image-edit .link-importer .placeholder .uploader {
+      gap: 8px;
+      color: var(--crepe-color-primary);
+      justify-content: center;
+      transition: color 0.2s;
+    }
+
+    .image-edit .link-importer.focus .placeholder .uploader {
+      color: unset;
+    }
+
+    .image-edit .link-importer .placeholder .uploader:hover {
+      color: var(--crepe-color-primary);
+    }
+
+    .image-edit .link-importer .placeholder .text {
+      margin-left: 8px;
+    }
+
+    .image-edit .confirm {
+      background: var(--crepe-color-secondary);
+      color: var(--crepe-color-on-secondary);
+      line-height: 40px;
+      padding: 0 24px;
+      border-radius: 100px;
+      font-size: 14px;
+    }
+  }
+}