feat: add frame theme for crepe (#1464)

* feat: add frame theme for crepe * chore: adjust e2e deps * chore: cleanup * ci: add ut in workflow * ci: fix
Milkdown · Aug 9, 2024 · 5f0d4f6 · 5f0d4f6
1 parent 4d22b4f
commit 5f0d4f6
Show file tree

Hide file tree

Showing 20 changed files with 196 additions and 80 deletions.
diff --git a/.github/workflows/ci-for-pr.yml b/.github/workflows/ci-for-pr.yml
@@ -57,6 +57,9 @@ jobs:
       - name: run lint
         run: pnpm test:lint
 
+      - name: run unit tests
+        run: pnpm test:unit
+
       - name: run cypress
         run: pnpm nx affected -t e2e-ci @milkdown/e2e
 

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -52,6 +52,9 @@ jobs:
       - name: run lint
         run: pnpm test:lint
 
+      - name: run unit tests
+        run: pnpm test:unit
+
       - name: run cypress
         run: pnpm nx affected -t e2e-ci @milkdown/e2e
 

diff --git a/e2e/package.json b/e2e/package.json
@@ -2,9 +2,6 @@
   "name": "@milkdown/e2e",
   "version": "7.4.0",
   "private": true,
-  "files": [
-    "style"
-  ],
   "scripts": {
     "start": "vite",
     "build": "vite build",
@@ -19,9 +16,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.26.0",
-    "@milkdown/components": "workspace:*",
     "@milkdown/core": "workspace:*",
-    "@milkdown/crepe": "workspace:*",
     "@milkdown/ctx": "workspace:*",
     "@milkdown/plugin-automd": "workspace:*",
     "@milkdown/plugin-clipboard": "workspace:*",
@@ -36,10 +31,7 @@
     "@milkdown/prose": "workspace:*",
     "@milkdown/theme-nord": "workspace:*",
     "@milkdown/utils": "workspace:*",
-    "@uiw/codemirror-theme-basic": "^4.22.1",
-    "@uiw/codemirror-theme-nord": "^4.22.1",
     "atomico": "^1.75.1",
-    "codemirror": "^6.0.1",
     "katex": "^0.16.0",
     "tslib": "^2.5.0"
   },

diff --git a/e2e/src/crepe/index.html b/e2e/src/crepe/index.html
diff --git a/e2e/src/crepe/index.ts b/e2e/src/crepe/index.ts
diff --git a/e2e/src/crepe/main.ts b/e2e/src/crepe/main.ts
diff --git a/e2e/src/crepe/style.css b/e2e/src/crepe/style.css
diff --git a/e2e/src/data.ts b/e2e/src/data.ts
@@ -1,4 +1,3 @@
-import { crepe } from './crepe'
 import { multiEditor } from './multi-editor'
 import { automd } from './plugin-automd'
 import { math } from './plugin-math'
@@ -7,7 +6,6 @@ import { commonmark } from './preset-commonmark'
 import { gfm } from './preset-gfm'
 
 export const cases: { title: string, link: string }[] = [
-  crepe,
   commonmark,
   gfm,
   multiEditor,

diff --git a/packages/crepe/package.json b/packages/crepe/package.json
@@ -23,7 +23,9 @@
     "./theme/crepe.css": "./src/theme/crepe/style.css",
     "./theme/crepe-dark.css": "./src/theme/crepe-dark/style.css",
     "./theme/nord.css": "./src/theme/nord/style.css",
-    "./theme/nord-dark.css": "./src/theme/nord-dark/style.css"
+    "./theme/nord-dark.css": "./src/theme/nord-dark/style.css",
+    "./theme/frame.css": "./src/theme/frame/style.css",
+    "./theme/frame-dark.css": "./src/theme/frame-dark/style.css"
   },
   "main": "./src/index.ts",
   "publishConfig": {
@@ -39,7 +41,9 @@
       "./theme/classic.css": "./lib/theme/classic/style.css",
       "./theme/classic-dark.css": "./lib/theme/classic-dark/style.css",
       "./theme/nord.css": "./lib/theme/nord/style.css",
-      "./theme/nord-dark.css": "./lib/theme/nord-dark/style.css"
+      "./theme/nord-dark.css": "./lib/theme/nord-dark/style.css",
+      "./theme/frame.css": "./lib/theme/frame/style.css",
+      "./theme/frame-dark.css": "./lib/theme/frame-dark/style.css"
     }
   },
   "files": [

diff --git a/packages/crepe/src/feature/index.ts b/packages/crepe/src/feature/index.ts
@@ -41,7 +41,7 @@ export const defaultFeatures: Record<CrepeFeature, boolean> = {
   [CrepeFeature.BlockEdit]: true,
   [CrepeFeature.Placeholder]: true,
   [CrepeFeature.Toolbar]: true,
-  [CrepeFeature.CodeMirror]: false,
+  [CrepeFeature.CodeMirror]: true,
   [CrepeFeature.Table]: true,
 }
 

diff --git a/packages/crepe/src/theme/_internal/classic-common.css b/packages/crepe/src/theme/_internal/classic-common.css
@@ -141,11 +141,12 @@
     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: 14px;
+      font-size: 87.5%;
       display: inline-block;
-      line-height: 20px;
+      line-height: 1.4286;
     }
 
     a {

diff --git a/packages/crepe/src/theme/frame-dark/style.css b/packages/crepe/src/theme/frame-dark/style.css
@@ -0,0 +1,28 @@
+@import "../_internal/classic-common.css";
+
+.milkdown {
+  --crepe-color-background: #1A1A1A;
+  --crepe-color-on-background: #E6E6E6;
+  --crepe-color-surface: #121212;
+  --crepe-color-surface-low: #1C1C1C;
+  --crepe-color-on-surface: #D1D1D1;
+  --crepe-color-on-surface-variant: #A9A9A9;
+  --crepe-color-outline: #757575;
+  --crepe-color-primary: #B5B5B5;
+  --crepe-color-secondary: #4D4D4D;
+  --crepe-color-on-secondary: #D6D6D6;
+  --crepe-color-inverse: #E5E5E5;
+  --crepe-color-on-inverse: #2A2A2A;
+  --crepe-color-inline-code: #FF6666;
+  --crepe-color-error: #FF6666;
+  --crepe-color-hover: #232323;
+  --crepe-color-selected: #2F2F2F;
+  --crepe-color-inline-area: #2B2B2B;
+
+  --crepe-font-title: "Noto Serif", Cambria, "Times New Roman", Times, serif;
+  --crepe-font-default: "Noto Sans", Arial, Helvetica, sans-serif;
+  --crepe-font-code: "Space Mono", Fira Code, Menlo, Monaco, "Courier New", Courier, monospace;
+
+  --crepe-shadow-1: 0px 1px 2px 0px rgba(255, 255, 255, 0.30), 0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --crepe-shadow-2: 0px 1px 2px 0px rgba(255, 255, 255, 0.30), 0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+}
diff --git a/packages/crepe/src/theme/frame/style.css b/packages/crepe/src/theme/frame/style.css
@@ -0,0 +1,28 @@
+@import "../_internal/classic-common.css";
+
+.milkdown {
+  --crepe-color-background: #FFFFFF;
+  --crepe-color-on-background: #000000;
+  --crepe-color-surface: #F7F7F7;
+  --crepe-color-surface-low: #EDEDED;
+  --crepe-color-on-surface: #1C1C1C;
+  --crepe-color-on-surface-variant: #4D4D4D;
+  --crepe-color-outline: #A8A8A8;
+  --crepe-color-primary: #333333;
+  --crepe-color-secondary: #CFCFCF;
+  --crepe-color-on-secondary: #000000;
+  --crepe-color-inverse: #F0F0F0;
+  --crepe-color-on-inverse: #1A1A1A;
+  --crepe-color-inline-code: #BA1A1A;
+  --crepe-color-error: #BA1A1A;
+  --crepe-color-hover: #E0E0E0;
+  --crepe-color-selected: #D5D5D5;
+  --crepe-color-inline-area: #CACACA;
+
+  --crepe-font-title: "Noto Serif", Cambria, "Times New Roman", Times, serif;
+  --crepe-font-default: "Noto Sans", Arial, Helvetica, sans-serif;
+  --crepe-font-code: "Space Mono", Fira Code, Menlo, Monaco, "Courier New", Courier, monospace;
+
+  --crepe-shadow-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+  --crepe-shadow-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+}
diff --git a/packages/crepe/src/theme/nord-dark/style.css b/packages/crepe/src/theme/nord-dark/style.css
@@ -19,7 +19,6 @@
   --crepe-color-selected: #32353A;
   --crepe-color-inline-area: #111418;
 
-
   --crepe-font-title: Rubik, Cambria, "Times New Roman", Times, serif;
   --crepe-font-default: Inter, Arial, Helvetica, sans-serif;
   --crepe-font-code: "JetBrains Mono", Menlo, Monaco, "Courier New", Courier, monospace;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/storybook/.storybook/preview-head.html b/storybook/.storybook/preview-head.html
@@ -1,7 +1,14 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<!--Crepe Theme Fonts-->
 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
+<!--Nord Theme Fonts-->
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
+<!--Frank Theme Fonts-->
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+
diff --git a/storybook/stories/crepe/crepe-dark.stories.ts b/storybook/stories/crepe/crepe-dark.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/html'
 import { basicDark } from '@uiw/codemirror-theme-basic'
 
-import classic from '@milkdown/crepe/theme/crepe-dark.css?inline'
+import crepeDark from '@milkdown/crepe/theme/crepe-dark.css?inline'
 import type { Args } from './setup'
 import { longContent, setup, wikiContent } from './setup'
 
@@ -30,7 +30,7 @@ export const Empty: Story = {
   render: (args) => {
     return setup({
       args,
-      style: classic,
+      style: crepeDark,
       theme: basicDark,
     })
   },

diff --git a/storybook/stories/crepe/crepe.stories.ts b/storybook/stories/crepe/crepe.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/html'
 import { basicLight } from '@uiw/codemirror-theme-basic'
 
-import classic from '@milkdown/crepe/theme/crepe.css?inline'
+import crepe from '@milkdown/crepe/theme/crepe.css?inline'
 import type { Args } from './setup'
 import { longContent, setup, wikiContent } from './setup'
 
@@ -30,7 +30,7 @@ export const Empty: Story = {
   render: (args) => {
     return setup({
       args,
-      style: classic,
+      style: crepe,
       theme: basicLight,
     })
   },

diff --git a/storybook/stories/crepe/frame-dark.stories.ts b/storybook/stories/crepe/frame-dark.stories.ts
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/html'
+import { basicDark } from '@uiw/codemirror-theme-basic'
+
+import frameDark from '@milkdown/crepe/theme/frame-dark.css?inline'
+import type { Args } from './setup'
+import { longContent, setup, wikiContent } from './setup'
+
+const meta: Meta = {
+  title: 'Crepe/Frame Dark',
+  argTypes: {
+    language: {
+      options: ['EN', 'JA'],
+      control: { type: 'radio' },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<Args>
+
+const defaultArgs: Omit<Args, 'instance'> = {
+  readonly: false,
+  defaultValue: '',
+  enableCodemirror: true,
+  language: 'EN',
+}
+
+export const Empty: Story = {
+  render: (args) => {
+    return setup({
+      args,
+      style: frameDark,
+      theme: basicDark,
+    })
+  },
+  args: {
+    ...defaultArgs,
+  },
+}
+
+export const WithDefaultValue: Story = {
+  ...Empty,
+  args: {
+    ...defaultArgs,
+    defaultValue: longContent,
+  },
+}
+
+export const WikiValue: Story = {
+  ...Empty,
+  args: {
+    ...defaultArgs,
+    defaultValue: wikiContent,
+  },
+}