diff --git a/bun.lockb b/bun.lockb index d9e6f2a2..631e9cfa 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 973d5023..c07f34ca 100644 --- a/package.json +++ b/package.json @@ -76,10 +76,6 @@ "react-error-boundary": "^4", "react-intersection-observer": "^9.5.2", "react-layout-kit": "^1.7.1", - "react-markdown": "^8", - "rehype-katex": "^6", - "remark-gfm": "^3", - "remark-math": "^5", "shikiji": "^0", "swr": "^2", "use-merge-value": "^1", @@ -88,7 +84,6 @@ }, "devDependencies": { "@commitlint/cli": "^17", - "@lobehub/ui": "^1", "@testing-library/react": "^14", "@types/chroma-js": "^2", "@types/lodash-es": "^4", diff --git a/src/ActionIconGroup/index.tsx b/src/ActionIconGroup/index.tsx index 221490a5..0755b9e7 100644 --- a/src/ActionIconGroup/index.tsx +++ b/src/ActionIconGroup/index.tsx @@ -60,7 +60,7 @@ const ActionIconGroup = memo( items = [], placement, spotlight = false, - direction = 'column', + direction = 'row', dropdownMenu = [], onActionClick, className, diff --git a/src/ChatItem/demos/index.tsx b/src/ChatItem/demos/index.tsx index a80ca344..05b2c5a8 100644 --- a/src/ChatItem/demos/index.tsx +++ b/src/ChatItem/demos/index.tsx @@ -1,55 +1,48 @@ import { ActionIconGroup, ChatItem, ChatItemProps } from '@ant-design/pro-chat'; -import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; import { useState } from 'react'; import { avatar, dropdownMenu, items } from './data'; export default () => { const [edit, setEdit] = useState(false); - const store = useCreateStore(); - const control: ChatItemProps | any = useControls( - { - loading: false, - message: { - rows: true, - value: - "要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：\n\n```javascript\ndayjs().fromNow();\ndayjs('2021-05-01').fromNow();\n```", - }, - placement: { - options: ['left', 'right'], - value: 'left', - }, - primary: false, - showTitle: false, - time: 1_686_538_950_084, - type: { - options: ['block', 'pure'], - value: 'block', - }, + const control: ChatItemProps | any = { + loading: false, + message: { + rows: true, + value: + "要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：\n\n```javascript\ndayjs().fromNow();\ndayjs('2021-05-01').fromNow();\n```", }, - { store }, - ); + placement: { + options: ['left', 'right'], + value: 'left', + }, + primary: false, + showTitle: false, + time: 1_686_538_950_084, + type: { + options: ['block', 'pure'], + value: 'block', + }, + }; return ( - - { - if (action.key === 'edit') { - setEdit(true); - } - }} - type="ghost" - /> - } - avatar={avatar} - editing={edit} - onEditingChange={setEdit} - /> - + { + if (action.key === 'edit') { + setEdit(true); + } + }} + type="ghost" + /> + } + avatar={avatar} + editing={edit} + onEditingChange={setEdit} + /> ); }; diff --git a/src/EditableMessage/demos/index.tsx b/src/EditableMessage/demos/index.tsx index 072b52e8..61801d6a 100644 --- a/src/EditableMessage/demos/index.tsx +++ b/src/EditableMessage/demos/index.tsx @@ -1,36 +1,106 @@ import { EditableMessage } from '@ant-design/pro-chat'; -import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; -import { button } from 'leva'; import { useState } from 'react'; -import { content } from '../../Markdown/demos/data'; +export const content = `# This is an H1 +## This is an H2 +### This is an H3 +#### This is an H4 +##### This is an H5 + +The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text. + +--- + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. +> +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +> id sem consectetuer libero luctus adipiscing. + +--- + +an example | *an example* | **an example** + +--- + +1. Bird +1. McHale +1. Parish + 1. Bird + 1. McHale + 1. Parish + +--- + +- Red +- Green +- Blue + - Red + - Green + - Blue + +--- + +This is [an example](http://example.com/ "Title") inline link. + + + + +| title | title | title | +| --- | --- | --- | +| content | content | content | + + +\`\`\`bash +$ pnpm install +\`\`\` + + +\`\`\`javascript +import { renderHook } from '@testing-library/react-hooks'; +import { act } from 'react-dom/test-utils'; +import { useDropNodeOnCanvas } from './useDropNodeOnCanvas'; +\`\`\` + +--- + +以下是一段Markdown格式的LaTeX数学公式： + +我是一个行内公式：$E=mc^2$ + +我是一个独立公式： +$$ +\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n +$$ + +我是一个带有分式的公式： +$$ +\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k} +$$ + +我是一个带有上下标的公式： +$$ +x^{2} + y^{2} = r^{2} +$$ + +我是一个带有积分符号的公式： +$$ +\\int_{a}^{b} f(x) \\, dx +$$ +`; export default () => { const [openModal, setOpenModal] = useState(false); const [editing, setEdit] = useState(false); - const store = useCreateStore(); - - useControls( - { - editing: button(() => { - setEdit(true); - }), - openModal: button(() => { - setOpenModal(true); - }), - }, - { store }, - ); return ( - - - + ); }; diff --git a/src/EditableMessage/index.tsx b/src/EditableMessage/index.tsx index f34f94ac..a0ceb867 100644 --- a/src/EditableMessage/index.tsx +++ b/src/EditableMessage/index.tsx @@ -1,9 +1,9 @@ import { CSSProperties, memo } from 'react'; import useControlledState from 'use-merge-value'; -import Markdown from '@/Markdown'; import MessageInput, { type MessageInputProps } from '@/MessageInput'; import MessageModal, { type MessageModalProps } from '@/MessageModal'; +import { Markdown } from '@ant-design/pro-editor'; export interface EditableMessageProps { /** @@ -136,7 +136,9 @@ const EditableMessage = memo( ) : ( ({ - label: item, - value: item.toLowerCase(), -})); - -export const Highlighter = memo( - ({ children, language = 'markdown', className, style, ...props }) => { - const [expand, setExpand] = useState(true); - const [lang, setLang] = useState(language); - const { styles, cx } = useStyles('block'); - const container = cx(styles.container, className); - - return ( -
- - setExpand(!expand)} - size={{ blockSize: 24, fontSize: 14, strokeWidth: 3 }} - /> - - -