feat: add components in storybook (#1323)

e2e/src/components/code-block.css

@@ -0,0 +1,127 @@
+milkdown-code-block {
+  padding: 24px 40px;
+  background: #F5F5F5;
+  margin: 20px 0;
+}
+
+milkdown-code-block .cm-editor {
+  outline: none !important;
+}
+
+milkdown-code-block .language-button {
+  gap: 8px;
+  padding: 8px;
+  background: antiquewhite;
+  border-radius: 8px;
+  font-size: 14px;
+  margin-bottom: 24px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+milkdown-code-block:hover .language-button {
+  opacity: 1;
+}
+
+milkdown-code-block .language-button:hover {
+  background: bisque;
+}
+
+milkdown-code-block .language-button .expand-icon {
+  transition: transform 0.2s ease-in-out;
+}
+
+milkdown-code-block .language-button .expand-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+milkdown-code-block .language-button[data-expanded="true"] .expand-icon {
+  transform: rotate(180deg);
+}
+
+milkdown-code-block .language-button .expand-icon svg:focus,
+milkdown-code-block .language-button .expand-icon:focus-visible {
+  outline: none;
+}
+
+milkdown-code-block .language-picker {
+  padding-top: 16px;
+}
+
+milkdown-code-block .list-wrapper {
+  background: antiquewhite;
+  border-radius: 16px;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+  width: 220px;
+}
+
+milkdown-code-block .language-list {
+  height: 356px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+}
+
+milkdown-code-block .language-list-item {
+  cursor: pointer;
+  margin: 0;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+milkdown-code-block .language-list-item:hover {
+  background: cornsilk;
+}
+
+milkdown-code-block .language-list-item:focus-visible {
+  outline: none;
+  background: cornsilk;
+}
+
+milkdown-code-block .language-list-item .leading,
+milkdown-code-block .language-list-item .leading svg {
+  width: 16px;
+  height: 16px;
+}
+
+milkdown-code-block .list-wrapper {
+  padding-top: 20px;
+}
+
+milkdown-code-block .search-box {
+  margin: 0 16px 12px;
+  background: white;
+  height: 32px;
+  border-radius: 4px;
+  outline: 2px solid fuchsia;
+  gap: 8px;
+  padding: 0 16px;
+  font-size: 12px;
+}
+
+milkdown-code-block .search-box .search-input {
+  width: 100%;
+}
+
+milkdown-code-block .search-box .search-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+milkdown-code-block .search-box .clear-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+milkdown-code-block .search-box input {
+  background: transparent;
+}
+
+milkdown-code-block .search-box input:focus {
+  outline: none;
+}

e2e/src/components/code-block.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/html'
+import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/core'
+import { nord } from '@milkdown/theme-nord'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { history } from '@milkdown/plugin-history'
+import { codeBlockComponent, codeBlockConfig } from '@milkdown/components/code-block'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { languages } from '@codemirror/language-data'
+import { basicSetup } from 'codemirror'
+import { defaultKeymap } from '@codemirror/commands'
+import { keymap } from '@codemirror/view'
+import { html } from 'atomico'
+
+import '@milkdown/theme-nord/style.css'
+import '../style.css'
+import './code-block.css'
+
+const meta: Meta = {
+  title: 'Components/Code Block',
+}
+
+export default meta
+
+const check = 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="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+`
+
+interface Args {
+  defaultValue: string
+  readonly: boolean
+}
+
+const markdown = `
+# Code Block
+
+\`\`\`javascript
+const a = 1;
+\`\`\`
+`
+
+export const Javascript: StoryObj<Args> = {
+  render: (args) => {
+    const root = document.createElement('div')
+    Editor.make()
+      .config((ctx) => {
+        ctx.set(rootCtx, root)
+        ctx.set(defaultValueCtx, args.defaultValue)
+        ctx.set(editorViewOptionsCtx, {
+          editable: () => !args.readonly,
+        })
+        ctx.update(codeBlockConfig.key, defaultConfig => ({
+          ...defaultConfig,
+          languages,
+          extensions: [basicSetup, oneDark, keymap.of(defaultKeymap)],
+          renderLanguage: (language, selected) => {
+            return html`<span class="leading">${selected ? check : null}</span>${language}`
+          },
+        }))
+      })
+      .config(nord)
+      .use(commonmark)
+      .use(codeBlockComponent)
+      .use(history)
+      .create()
+
+    return root
+  },
+  args: {
+    defaultValue: markdown,
+    readonly: false,
+  },
+}

e2e/src/components/image-block.css

@@ -0,0 +1,96 @@
+milkdown-image-block.selected > .image-edit {
+  outline: 2px solid fuchsia;
+}
+
+milkdown-image-block.selected > .image-wrapper img {
+  outline: 2px solid fuchsia;
+}
+
+milkdown-image-block > .image-wrapper .operation {
+  gap: 16px;
+  right: 16px;
+  top: 16px;
+  opacity: 0;
+  transition: all 0.2s;
+}
+
+milkdown-image-block:hover > .image-wrapper .operation {
+  opacity: 1;
+}
+
+milkdown-image-block > .image-wrapper .operation > .operation-item {
+  color: antiquewhite;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+}
+
+milkdown-image-block > .image-wrapper .image-resize-handle {
+  height: 8px;
+  bottom: -4px;
+  width: 160px;
+  background: antiquewhite;
+  opacity: 0;
+  transition: all 0.2s;
+}
+
+milkdown-image-block:hover > .image-wrapper .image-resize-handle {
+  opacity: 1;
+}
+
+milkdown-image-block > .caption-input {
+  margin: 16px auto;
+}
+
+milkdown-image-block > .image-edit {
+  align-items: center;
+  padding: 16px 24px;
+  gap: 16px;
+  background: oldlace;
+  height: 56px;
+}
+
+milkdown-image-block > .image-edit .image-icon {
+  color: darkgray;
+}
+
+milkdown-image-block > .image-edit .image-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+milkdown-image-block > .image-edit .link-importer .placeholder {
+  color: darkgray;
+}
+
+milkdown-image-block > .image-edit .link-importer .link-input-area {
+  line-height: 24px;
+}
+
+milkdown-image-block > .image-edit .link-importer .placeholder .uploader {
+  gap: 8px;
+  color: fuchsia;
+  justify-content: center;
+  transition: color 0.2s;
+}
+
+milkdown-image-block > .image-edit .link-importer.focus .placeholder .uploader {
+  color: unset;
+}
+
+milkdown-image-block > .image-edit .link-importer .placeholder .uploader:hover {
+  color: fuchsia;
+}
+
+milkdown-image-block > .image-edit .link-importer .placeholder .text {
+  margin-left: 8px;
+}
+
+milkdown-image-block > .image-edit .confirm {
+  background: darkgray;
+  color: antiquewhite;
+  line-height: 40px;
+  padding: 0 24px;
+  border-radius: 100px;
+  font-size: 14px;
+}

e2e/src/components/image-block.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/html'
+import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/core'
+import { nord } from '@milkdown/theme-nord'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { history } from '@milkdown/plugin-history'
+import { imageBlockComponent } from '@milkdown/components/image-block'
+
+import '@milkdown/theme-nord/style.css'
+import '../style.css'
+import './image-block.css'
+
+const meta: Meta = {
+  title: 'Components/Image Block',
+}
+
+export default meta
+
+interface Args {
+  readonly: boolean
+  defaultValue: string
+}
+
+const logo = `
+![0.5](/milkdown-logo.png)
+`
+
+const empty = `
+![]()
+`
+
+export const Empty: StoryObj<Args> = {
+  render: (args) => {
+    const root = document.createElement('div')
+    Editor.make()
+      .config((ctx) => {
+        ctx.set(rootCtx, root)
+        ctx.set(defaultValueCtx, args.defaultValue)
+        ctx.set(editorViewOptionsCtx, {
+          editable: () => !args.readonly,
+        })
+      })
+      .config(nord)
+      .use(commonmark)
+      .use(imageBlockComponent)
+      .use(history)
+      .create()
+
+    return root
+  },
+  args: {
+    readonly: false,
+    defaultValue: empty,
+  },
+}
+
+export const Logo: StoryObj<Args> = {
+  ...Empty,
+  args: {
+    readonly: false,
+    defaultValue: logo,
+  },
+}