@milkdown/crepe 7.14.0 → 7.15.1

package/lib/types/core/builder.d.ts

@@ -8,7 +8,7 @@ export interface CrepeBuilderConfig {
 }
 export declare class CrepeBuilder {
     #private;
-    constructor({ root, defaultValue }: CrepeBuilderConfig);
+    constructor({ root, defaultValue }?: CrepeBuilderConfig);
     addFeature: {
         <T extends CrepeFeature>(feature: DefineFeature<CrepeFeatureConfig[T]>, config?: CrepeFeatureConfig[T]): CrepeBuilder;
         <C>(feature: DefineFeature<C>, config?: C): CrepeBuilder;
@@ -16,6 +16,7 @@ export declare class CrepeBuilder {
     create: () => Promise<Editor>;
     destroy: () => Promise<Editor>;
     get editor(): Editor;
+    get readonly(): boolean;
     setReadonly: (value: boolean) => this;
     getMarkdown: () => string;
     on: (fn: (api: ListenerManager) => void) => this;

package/lib/types/core/builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../../src/core/builder.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EAEjB,MAAM,EAKP,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AAMtC,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAKtD,MAAM,WAAW,kBAAkB;IAIjC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAG3B,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B;AAID,qBAAa,YAAY;;gBAYX,EAAE,IAAI,EAAE,YAAiB,EAAE,EAAE,kBAAkB;IA8B3D,UAAU,EAAE;QACV,CAAC,CAAC,SAAS,YAAY,EACrB,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAC7C,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC7B,YAAY,CAAA;QACf,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY,CAAA;KACzD,CAGA;IAGD,MAAM,wBAEL;IAGD,OAAO,wBAEN;IAGD,IAAI,MAAM,IAAI,MAAM,CAEnB;IAGD,WAAW,GAAI,OAAO,OAAO,UAW5B;IAGD,WAAW,eAEV;IAGD,EAAE,GAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,UAavC;CACF"}
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../../src/core/builder.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EAEjB,MAAM,EAKP,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AAMtC,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAKtD,MAAM,WAAW,kBAAkB;IAIjC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAG3B,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B;AAID,qBAAa,YAAY;;gBAYX,EAAE,IAAI,EAAE,YAAiB,EAAE,GAAE,kBAAuB;IA8BhE,UAAU,EAAE;QACV,CAAC,CAAC,SAAS,YAAY,EACrB,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAC7C,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC7B,YAAY,CAAA;QACf,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY,CAAA;KACzD,CAGA;IAGD,MAAM,wBAEL;IAGD,OAAO,wBAEN;IAGD,IAAI,MAAM,IAAI,MAAM,CAEnB;IAGD,IAAI,QAAQ,YAEX;IAGD,WAAW,GAAI,OAAO,OAAO,UAW5B;IAGD,WAAW,eAEV;IAGD,EAAE,GAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,UAavC;CACF"}

package/lib/types/core/crepe.d.ts

@@ -7,6 +7,6 @@ export interface CrepeConfig extends CrepeBuilderConfig {
 }
 export declare class Crepe extends CrepeBuilder {
     static Feature: typeof CrepeFeature;
-    constructor({ features, featureConfigs, ...crepeBuilderConfig }: CrepeConfig);
+    constructor({ features, featureConfigs, ...crepeBuilderConfig }?: CrepeConfig);
 }
 //# sourceMappingURL=crepe.d.ts.map

package/lib/types/core/crepe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crepe.d.ts","sourceRoot":"","sources":["../../../src/core/crepe.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAmB,MAAM,YAAY,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGjE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IAErD,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAGjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;CACpC;AAGD,qBAAa,KAAM,SAAQ,YAAY;IAErC,MAAM,CAAC,OAAO,sBAAe;gBAKjB,EACV,QAAa,EACb,cAAmB,EACnB,GAAG,kBAAkB,EACtB,EAAE,WAAW;CAmBf"}
+{"version":3,"file":"crepe.d.ts","sourceRoot":"","sources":["../../../src/core/crepe.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAmB,MAAM,YAAY,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGjE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IAErD,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAGjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;CACpC;AAGD,qBAAa,KAAM,SAAQ,YAAY;IAErC,MAAM,CAAC,OAAO,sBAAe;gBAKjB,EACV,QAAa,EACb,cAAmB,EACnB,GAAG,kBAAkB,EACtB,GAAE,WAAgB;CAmBpB"}

package/lib/types/feature/code-mirror/index.d.ts

@@ -9,6 +9,9 @@ interface CodeMirrorConfig {
     searchIcon: string;
     clearSearchIcon: string;
     searchPlaceholder: string;
+    copyText: string;
+    copyIcon: string;
+    onCopy: (text: string) => void;
     noResultText: string;
     renderLanguage: (language: string, selected: boolean) => string;
     renderPreview: (language: string, content: string) => string | HTMLElement | null;

package/lib/types/feature/code-mirror/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/code-mirror/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAUlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAY9C,UAAU,gBAAgB;IACxB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,SAAS,EAAE,mBAAmB,EAAE,CAAA;IAChC,KAAK,EAAE,SAAS,CAAA;IAEhB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IAEvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IAEpB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAA;IAE/D,aAAa,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,KACZ,MAAM,GAAG,WAAW,GAAG,IAAI,CAAA;IAEhC,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;IACvD,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;IACvD,YAAY,EAAE,MAAM,CAAA;CACrB;AACD,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAE/D,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,uBAAuB,CA2C7D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/code-mirror/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAUlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAa9C,UAAU,gBAAgB;IACxB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,SAAS,EAAE,mBAAmB,EAAE,CAAA;IAChC,KAAK,EAAE,SAAS,CAAA;IAEhB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IAEvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,YAAY,EAAE,MAAM,CAAA;IAEpB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAA;IAE/D,aAAa,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,KACZ,MAAM,GAAG,WAAW,GAAG,IAAI,CAAA;IAEhC,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;IACvD,iBAAiB,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,MAAM,CAAA;IACvD,YAAY,EAAE,MAAM,CAAA;CACrB;AACD,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAE/D,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,uBAAuB,CA8C7D,CAAA"}

package/lib/types/feature/latex/block-latex.d.ts

@@ -1,2 +1,2 @@
-export declare const blockLatexSchema: import("@milkdown/ctx").MilkdownPlugin;
+export declare const blockLatexSchema: import("@milkdown/utils").$NodeSchema<"code_block">;
 //# sourceMappingURL=block-latex.d.ts.map

package/lib/types/feature/latex/block-latex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-latex.d.ts","sourceRoot":"","sources":["../../../../src/feature/latex/block-latex.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,wCAsB3B,CAAA"}
+{"version":3,"file":"block-latex.d.ts","sourceRoot":"","sources":["../../../../src/feature/latex/block-latex.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,qDAsB3B,CAAA"}

package/lib/types/feature/placeholder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/placeholder/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAgC9C,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,GAAG,OAAO,CAAA;CACtB;AAED,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAA;AAEjE,eAAO,MAAM,iBAAiB,2EAM7B,CAAA;AAED,eAAO,MAAM,iBAAiB,kCAmB5B,CAAA;AAEF,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,wBAAwB,CAkB/D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/placeholder/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAgC9C,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,GAAG,OAAO,CAAA;CACtB;AAED,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAA;AAEjE,eAAO,MAAM,iBAAiB,2EAM7B,CAAA;AAED,eAAO,MAAM,iBAAiB,kCAsB5B,CAAA;AAEF,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,wBAAwB,CAkB/D,CAAA"}

package/lib/types/feature/placeholder/placeholder.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=placeholder.spec.d.ts.map

package/lib/types/feature/placeholder/placeholder.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.spec.d.ts","sourceRoot":"","sources":["../../../../src/feature/placeholder/placeholder.spec.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/crepe",
   "type": "module",
-  "version": "7.14.0",
+  "version": "7.15.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -108,7 +108,7 @@
     "tslib": "^2.8.1",
     "unist-util-visit": "^5.0.0",
     "vue": "^3.5.13",
-    "@milkdown/kit": "7.14.0"
+    "@milkdown/kit": "7.15.1"
   },
   "scripts": {
     "build": "pnpm run build:es && pnpm run build:theme && echo",

package/src/core/builder.ts

@@ -50,7 +50,7 @@ export class CrepeBuilder {
 
   /// The constructor of the crepe builder.
   /// You can pass configs to the builder to configure the editor.
-  constructor({ root, defaultValue = '' }: CrepeBuilderConfig) {
+  constructor({ root, defaultValue = '' }: CrepeBuilderConfig = {}) {
     this.#rootElement =
       (typeof root === 'string' ? document.querySelector(root) : root) ??
       document.body
@@ -106,6 +106,11 @@ export class CrepeBuilder {
     return this.#editor
   }
 
+  /// Get the readonly state of the editor.
+  get readonly() {
+    return !this.#editable
+  }
+
   /// Set the readonly mode of the editor.
   setReadonly = (value: boolean) => {
     this.#editable = !value

package/src/core/crepe.ts

@@ -28,7 +28,7 @@ export class Crepe extends CrepeBuilder {
     features = {},
     featureConfigs = {},
     ...crepeBuilderConfig
-  }: CrepeConfig) {
+  }: CrepeConfig = {}) {
     super(crepeBuilderConfig)
 
     const finalConfigs = defaultsDeep(featureConfigs, defaultConfig)

package/src/feature/code-mirror/index.ts

@@ -15,6 +15,7 @@ import { crepeFeatureConfig } from '../../core/slice'
 import {
   chevronDownIcon,
   clearIcon,
+  copyIcon,
   editIcon,
   searchIcon,
   visibilityOffIcon,
@@ -31,6 +32,9 @@ interface CodeMirrorConfig {
   clearSearchIcon: string
 
   searchPlaceholder: string
+  copyText: string
+  copyIcon: string
+  onCopy: (text: string) => void
   noResultText: string
 
   renderLanguage: (language: string, selected: boolean) => string
@@ -73,6 +77,9 @@ export const codeMirror: DefineFeature<CodeMirrorFeatureConfig> = (
         searchIcon: config.searchIcon || searchIcon,
         clearSearchIcon: config.clearSearchIcon || clearIcon,
         searchPlaceholder: config.searchPlaceholder || 'Search language',
+        copyText: config.copyText || 'Copy',
+        copyIcon: config.copyIcon || copyIcon,
+        onCopy: config.onCopy || (() => {}),
         noResultText: config.noResultText || 'No result',
         renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,
         renderPreview: config.renderPreview || defaultConfig.renderPreview,

package/src/feature/placeholder/index.ts

@@ -8,7 +8,7 @@ import { $ctx, $prose } from '@milkdown/kit/utils'
 
 import type { DefineFeature } from '../shared'
 
-import { crepeFeatureConfig } from '../../core/slice'
+import { crepeFeatureConfig, useCrepe } from '../../core/slice'
 import { isInCodeBlock, isInList } from '../../utils'
 import { CrepeFeature } from '../index'
 
@@ -58,6 +58,9 @@ export const placeholderPlugin = $prose((ctx) => {
     key: new PluginKey('CREPE_PLACEHOLDER'),
     props: {
       decorations: (state) => {
+        const crepe = useCrepe(ctx)
+        if (crepe.readonly) return null
+
         const config = ctx.get(placeholderConfig.key)
         if (config.mode === 'doc' && !isDocEmpty(state.doc)) return null
 

package/src/feature/placeholder/placeholder.spec.ts

@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom/vitest'
+import { editorViewCtx } from '@milkdown/kit/core'
+import { test, expect, describe } from 'vitest'
+
+import { Crepe } from '../../core'
+
+test('show placeholder in empty editor', async () => {
+  const crepe = new Crepe()
+  await crepe.create()
+
+  const view = crepe.editor.ctx.get(editorViewCtx)
+  expect(view.dom.querySelector('[data-placeholder]')).toBeInTheDocument()
+})
+
+describe('hide placeholder in readonly editor', () => {
+  test('hide before create', async () => {
+    const crepe = new Crepe()
+    crepe.setReadonly(true)
+    await crepe.create()
+
+    const view = crepe.editor.ctx.get(editorViewCtx)
+    expect(view.dom.querySelector('[data-placeholder]')).not.toBeInTheDocument()
+  })
+
+  test('hide after create', async () => {
+    const crepe = new Crepe()
+    await crepe.create()
+
+    crepe.setReadonly(true)
+
+    const view = crepe.editor.ctx.get(editorViewCtx)
+    expect(view.dom.querySelector('[data-placeholder]')).not.toBeInTheDocument()
+  })
+})

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

@@ -100,27 +100,42 @@
         caret-color: var(--crepe-color-outline);
       }
 
-      .preview-toggle-button {
-        background: var(--crepe-color-secondary);
-        color: var(--crepe-color-on-surface-variant);
-        padding: 4px 10px;
-        opacity: 0;
-        cursor: pointer;
-        border-radius: 100px;
-        font-size: 12px;
-        line-height: 16px;
-        font-weight: 600;
-        font-family: var(--crepe-font-default);
-        transition: opacity 0.2s ease-in-out;
+      .tools-button-group {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
+        gap: 2px;
 
-        svg {
-          width: 14px;
-          height: 14px;
-          fill: var(--crepe-color-on-surface-variant);
+        button {
+          background: var(--crepe-color-secondary);
+          color: var(--crepe-color-on-surface-variant);
+          padding: 4px 10px;
+          opacity: 0;
+          cursor: pointer;
+          border-radius: 4px;
+          font-size: 12px;
+          line-height: 16px;
+          font-weight: 600;
+          font-family: var(--crepe-font-default);
+          transition: opacity 0.2s ease-in-out;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 4px;
+
+          svg {
+            width: 14px;
+            height: 14px;
+            fill: var(--crepe-color-on-surface-variant);
+          }
+        }
+
+        button:first-child {
+          border-top-left-radius: 100px;
+          border-bottom-left-radius: 100px;
+        }
+
+        button:last-child {
+          border-top-right-radius: 100px;
+          border-bottom-right-radius: 100px;
         }
       }
 
@@ -175,7 +190,7 @@
       opacity: 1;
     }
 
-    &:hover .preview-toggle-button {
+    &:hover .tools-button-group > button {
       opacity: 1;
     }