✨ feat: Add shield editor

package.json

@@ -17,6 +17,7 @@
     "build": "next build",
     "dev": "next dev -p 3020",
     "i18n": "lobe-i18n",
+    "icon-sync": "node ./scripts/syncSimpleIconList.mjs",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",
@@ -59,7 +60,6 @@
     "@icons-pack/react-simple-icons": "^9",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
-    "@wooorm/starry-night": "^3.0.0",
     "ahooks": "^3",
     "ai": "^2",
     "antd": "^5",
@@ -69,24 +69,28 @@
     "gpt-tokenizer": "^2",
     "i18next": "^23",
     "immer": "^10",
+    "leva": "latest",
     "lodash-es": "^4",
     "lucide-react": "latest",
-    "next": "13.4.7",
+    "next": "13",
     "next-i18next": "^14",
     "openai": "^4.6.0",
     "polished": "^4",
+    "query-string": "^8",
     "react": "^18",
     "react-dom": "^18",
     "react-i18next": "^13",
     "react-intersection-observer": "^9",
-    "react-layout-kit": "^1.7.1",
+    "react-layout-kit": "^1",
     "react-markdown": "^8.0.7",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-highlight": "^7.0.0",
-    "rehype-raw": "^7.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-slug": "^7.0.1",
-    "remark-toc": "^8.0.1",
+    "react-syntax-highlighter": "^15",
+    "rehype-highlight": "^7",
+    "rehype-raw": "^7",
+    "remark-gfm": "^3",
+    "remark-slug": "^7",
+    "remark-toc": "^8",
+    "simple-icons": "^9",
+    "swr": "^2",
     "url-join": "^5",
     "use-merge-value": "^1",
     "utility-types": "^3",
@@ -127,6 +131,7 @@
     "semantic-release": "^21",
     "stylelint": "^15",
     "ts-node": "^10",
+    "tsx": "^3",
     "typescript": "^5",
     "vitest": "latest"
   },

scripts/syncSimpleIconList.mjs

@@ -0,0 +1,15 @@
+import { writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { getIconsData, titleToSlug } from 'simple-icons/sdk';
+
+const runIconSync = async () => {
+  const data = await getIconsData();
+  const list = data.map((icon) => titleToSlug(icon.title));
+  writeFileSync(
+    resolve('./src/const/icons.ts'),
+    `export default ${JSON.stringify(Array.from(new Set(list.filter(Boolean))))} as const`,
+    'utf8',
+  );
+};
+
+runIconSync();

src/Features/MarkdownEditor/style.ts

@@ -10,8 +10,8 @@ export const useStyles = createStyles(({ css, token, responsive }) => {
       width: 100%;
 
       background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorder};
       border-radius: ${token.borderRadiusLG}px;
+      box-shadow: 0 0 0 1px ${token.colorBorder};
     `,
     editor: css`
       flex: 1;

src/Features/MarkdownPreivew/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Highlight from '@/components/Highlight';
+import Markdown from '@/components/Markdown';
+
+import { useStyles } from './style';
+
+const MarkdownEditor = memo<{ children: string }>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container}>
+      <Markdown className={styles.markdown}>{children}</Markdown>;
+      <Highlight className={styles.preview} language={'md'} type={'pure'}>
+        {children}
+      </Highlight>
+    </Flexbox>
+  );
+});
+
+export default MarkdownEditor;

src/Features/MarkdownPreivew/style.ts

@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    `,
+    markdown: css`
+      overflow: hidden;
+      flex: 1;
+      height: 100%;
+      border-bottom: 1px solid ${token.colorBorder};
+    `,
+    preview: css`
+      flex: 1;
+      border-radius: 0;
+    `,
+  };
+});

src/Features/MarkdownStorybook/index.tsx

@@ -0,0 +1,27 @@
+import { StroyBook, StroyBookProps } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Highlight from '@/components/Highlight';
+import Markdown from '@/components/Markdown';
+
+import { useStyles } from './style';
+
+const MarkdownEditor = memo<{ children: string; levaStore: StroyBookProps['levaStore'] }>(
+  ({ children, levaStore }) => {
+    const { styles } = useStyles();
+
+    return (
+      <Flexbox className={styles.container}>
+        <StroyBook levaStore={levaStore} noPadding>
+          <Markdown className={styles.markdown}>{children}</Markdown>
+        </StroyBook>
+        <Highlight className={styles.preview} fullFeatured language={'md'} type={'pure'}>
+          {children}
+        </Highlight>
+      </Flexbox>
+    );
+  },
+);
+
+export default MarkdownEditor;

src/Features/MarkdownStorybook/style.ts

@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      position: relative;
+
+      overflow: hidden;
+
+      width: 100%;
+
+      border-radius: ${token.borderRadiusLG}px;
+      box-shadow: 0 0 0 1px ${token.colorBorder};
+    `,
+    markdown: css`
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: 100%;
+      height: 100%;
+    `,
+    preview: css`
+      border-top: 1px solid ${token.colorBorder};
+      border-radius: 0;
+    `,
+  };
+});

src/components/Highlight/index.tsx

@@ -0,0 +1,17 @@
+import { Highlighter, HighlighterProps } from '@lobehub/ui';
+import { memo } from 'react';
+import useSWR from 'swr';
+
+import { remarkFormat } from '@/utils/remarkFormat';
+
+const Highlight = memo<HighlighterProps>(({ children, ...props }) => {
+  const { data, isLoading } = useSWR(children, () => remarkFormat(children));
+
+  return (
+    <Highlighter {...props} language={'md'} type={'pure'}>
+      {isLoading ? '' : String(data)}
+    </Highlighter>
+  );
+});
+
+export default Highlight;