fix: 🐛 解决Antd与Semi同时使用时基础组织注册的bug

rojer95 · Jan 8, 2024 · a99afad · a99afad
1 parent 6a0b634
commit a99afad
Show file tree

Hide file tree

Showing 28 changed files with 3,322 additions and 3,645 deletions.
diff --git a/docs/demos/antd.tsx b/docs/demos/antd.tsx
@@ -60,7 +60,7 @@ export default () => {
     >
       <div>
         <Form.Item label="普通输入框">
-          <Input />
+          <Input placeholder="输入框" />
         </Form.Item>
 
         <DSlate ref={ref} value={value} onChange={setValue} />

diff --git a/docs/demos/base.tsx b/docs/demos/base.tsx
@@ -12,7 +12,7 @@ export default () => {
   ]);
 
   return (
-    <div>
+    <>
       <DSlateAntd
         value={value}
         onChange={setValue}
@@ -25,6 +25,6 @@ export default () => {
         onChange={setValue}
         placeholder="Semi 风格编辑器"
       />
-    </div>
+    </>
   );
 };
diff --git a/docs/demos/math.tsx b/docs/demos/math.tsx
@@ -2,8 +2,8 @@
  * defaultShowCode: true
  */
 import DSlate, { DefaultToolbar, DSlateRef } from '@dslate/antd';
-import { Button, ConfigProvider, Input, Space, theme } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import { Button, Input, Space } from 'antd';
+import React, { useRef, useState } from 'react';
 import type { Descendant } from 'slate';
 
 export default () => {
@@ -72,92 +72,47 @@ export default () => {
   ]);
 
   const ref = useRef<DSlateRef>(null);
-  const [mode, setMode] = useState(
-    document.documentElement.getAttribute('data-prefers-color') ?? 'light',
-  );
-
-  const switchMode = () => {
-    const doc = document.documentElement;
-    const attrName = 'data-prefers-color';
-    if (!doc.hasAttribute(attrName) || doc.getAttribute(attrName) === 'dark') {
-      doc.setAttribute(attrName, 'light');
-      setMode('light');
-    } else {
-      doc.setAttribute(attrName, 'dark');
-      setMode('dark');
-    }
-  };
-
-  const watch = (mutationsList: any[]) => {
-    const attrName = 'data-prefers-color';
-    for (const mutation of mutationsList) {
-      if (mutation.attributeName === attrName) {
-        setMode(document.documentElement.getAttribute(attrName) ?? 'light');
-      }
-    }
-  };
-
-  useEffect(() => {
-    let observer: any;
-    if (MutationObserver) {
-      observer = new MutationObserver(watch);
-      // 以上述配置开始观察目标节点
-      observer.observe(document.documentElement, { attributes: true });
-      // 之后，可停止观察
-    }
-    return () => observer?.disconnect?.();
-  }, []);
 
   return (
-    <ConfigProvider
-      theme={{
-        algorithm:
-          mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
-      }}
-    >
-      <div>
-        <DSlate
-          toolbar={[...DefaultToolbar, 'latex']}
-          ref={ref}
-          value={value}
-          onChange={setValue}
-        />
-        <br />
-        <Space>
-          <Button
-            onClick={() => {
-              console.log(JSON.stringify(value));
+    <div>
+      <DSlate
+        toolbar={[...DefaultToolbar, 'latex']}
+        ref={ref}
+        value={value}
+        onChange={setValue}
+      />
+      <br />
+      <Space>
+        <Button
+          onClick={() => {
+            console.log(JSON.stringify(value));
 
-              setResultWeapp(
-                JSON.stringify(
-                  ref.current?.serializeWeapp({
-                    children: value,
-                  }),
-                  null,
-                  2,
-                ),
-              );
-              setResultHtml(
-                ref.current?.serialize?.({
+            setResultWeapp(
+              JSON.stringify(
+                ref.current?.serializeWeapp({
                   children: value,
                 }),
-              );
-            }}
-          >
-            转格式
-          </Button>
-          <Button onClick={switchMode}>
-            {mode === 'dark' ? '亮色模式' : '暗色模式'}
-          </Button>
-        </Space>
-        <br />
-        <p>小程序结果：</p>
-        <Input.TextArea value={resultWeapp} autoSize readOnly />
+                null,
+                2,
+              ),
+            );
+            setResultHtml(
+              ref.current?.serialize?.({
+                children: value,
+              }),
+            );
+          }}
+        >
+          转格式
+        </Button>
+      </Space>
+      <br />
+      <p>小程序结果：</p>
+      <Input.TextArea value={resultWeapp} autoSize readOnly />
 
-        <br />
-        <p>html结果：</p>
-        <Input.TextArea value={resultHtml} autoSize readOnly />
-      </div>
-    </ConfigProvider>
+      <br />
+      <p>html结果：</p>
+      <Input.TextArea value={resultHtml} autoSize readOnly />
+    </div>
   );
 };
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
@@ -31,4 +31,4 @@ $ npm i @dslate/semi --save # Semi 风格
 
 ## 在项目中使用
 
-<code src="../demos/base.tsx"></code>
+<code src="../demos/base.tsx"  background="#FFFFFF"></code>
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "@umijs/lint": "^4.0.71",
-    "antd": "^5.1.7",
+    "antd": "^5.12.0",
     "dumi": "^2.2.1",
     "eslint": "^8.43.0",
     "gh-pages": "^5.0.0",

diff --git a/packages/antd/lib/components/button.tsx b/packages/antd/lib/components/button.tsx
@@ -1,7 +1,8 @@
-import React, { PropsWithChildren } from "react";
-import { Button as AntdButton, theme } from "antd";
+import { Button as AntdButton, theme } from 'antd';
+import { PropsWithChildren } from 'react';
 
 const { useToken } = theme;
+
 export const Button = ({
   children,
   active,

diff --git a/packages/antd/lib/components/divider.tsx b/packages/antd/lib/components/divider.tsx
@@ -1,10 +1,10 @@
-import { Divider as AntdDivider } from "antd";
-import React, { PropsWithChildren } from "react";
+import { Divider as AntdDivider } from 'antd';
+import { PropsWithChildren } from 'react';
 
 export const Divider = ({
   layout,
 }: PropsWithChildren<{
-  layout?: "vertical" | "horizontal";
+  layout?: 'vertical' | 'horizontal';
 }>) => {
   return <AntdDivider type={layout} />;
 };
diff --git a/packages/antd/lib/components/editor.tsx b/packages/antd/lib/components/editor.tsx
@@ -1,27 +1,32 @@
-import { forwardRef } from "react";
-import { theme } from "antd";
-import { useFocused } from "slate-react";
-import { DSlateRef, DSlateCore } from "@dslate/core";
-import classNames from "classnames";
-import styled from "styled-components";
-import { Toolbar, Progress, Counter, Editable } from "@dslate/component";
+import { Counter, Editable, Progress, Toolbar } from '@dslate/component';
+import { DSlateCore, DSlateRef } from '@dslate/core';
+import { theme } from 'antd';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { useFocused } from 'slate-react';
+import styled from 'styled-components';
 
-import type { AntdStyleDSlateProps } from "../typing";
+import type { AntdStyleDSlateProps } from '../typing';
 
 const StyledComponent = styled.div<{ token: any }>`
   border-radius: ${(props) => `${props.token.borderRadius}px`};
   border-width: ${(props) => `${props.token.lineWidth}px`};
   border-style: ${(props) => `${props.token.lineType}`};
   border-color: ${(props) => `${props.token.colorBorder}`};
+  background-color: ${(props) => `${props.token.colorBgContainer}`};
+  transition: ${(props) => `all ${props.token.motionDurationMid}`};
 
   &.focus {
-    border-color: ${(props) => props.token.colorPrimaryHover};
+    border-color: ${(props) => `${props.token.colorPrimary}`};
     box-shadow: ${(props) =>
       `0 0 0 ${props.token.controlOutlineWidth}px ${props.token.controlOutline}`};
-    border-inline-end-width: ${(props) => props.token.lineWidth};
     outline: 0;
   }
 
+  &:hover {
+    border-color: ${(props) => props.token.colorPrimaryHover};
+  }
+
   &.borderless {
     background-color: transparent;
     border: none;
@@ -60,11 +65,11 @@ const StyledComponent = styled.div<{ token: any }>`
           ((props.token.controlHeight -
             props.token.fontSize * props.token.lineHeight) /
             2) *
-            10
+            10,
         ) /
           10 -
           props.token.lineWidth,
-        3
+        3,
       )}px ${props.token.paddingSM - props.token.lineWidth}px`};
 
     h1 {
@@ -110,7 +115,7 @@ const AntdStyleEditor = ({
   placeholder,
   toolbar,
   className,
-}: Omit<AntdStyleDSlateProps, "value" | "onChange">) => {
+}: Omit<AntdStyleDSlateProps, 'value' | 'onChange'>) => {
   const focused = useFocused();
   const { token } = useToken();
 
@@ -153,7 +158,7 @@ const AntdEditor = forwardRef<DSlateRef, AntdStyleDSlateProps>(
         <AntdStyleEditor {...rest} disabled={disabled} />
       </DSlateCore>
     );
-  }
+  },
 );
 
 export { AntdEditor };
diff --git a/packages/antd/lib/components/popover.tsx b/packages/antd/lib/components/popover.tsx
@@ -1,5 +1,5 @@
-import { Popover as AntdPopover } from "antd";
-import React, { PropsWithChildren } from "react";
+import { Popover as AntdPopover } from 'antd';
+import React, { PropsWithChildren } from 'react';
 
 export const Popover = ({
   content,
@@ -10,20 +10,20 @@ export const Popover = ({
 }: PropsWithChildren<{
   content?: React.ReactNode;
   position?:
-    | "top"
-    | "topLeft"
-    | "topRight"
-    | "left"
-    | "leftTop"
-    | "leftBottom"
-    | "right"
-    | "rightTop"
-    | "rightBottom"
-    | "bottom"
-    | "bottomLeft"
-    | "bottomRight";
+    | 'top'
+    | 'topLeft'
+    | 'topRight'
+    | 'left'
+    | 'leftTop'
+    | 'leftBottom'
+    | 'right'
+    | 'rightTop'
+    | 'rightBottom'
+    | 'bottom'
+    | 'bottomLeft'
+    | 'bottomRight';
 
-  trigger?: string;
+  trigger?: any;
   visible?: boolean;
 }>) => {
   return (

diff --git a/packages/antd/lib/components/tooltip.tsx b/packages/antd/lib/components/tooltip.tsx
@@ -1,5 +1,5 @@
-import { Tooltip as AntdTooltip } from "antd";
-import React, { PropsWithChildren } from "react";
+import { Tooltip as AntdTooltip } from 'antd';
+import { PropsWithChildren } from 'react';
 
 export const Tooltip = ({
   content,
@@ -8,18 +8,18 @@ export const Tooltip = ({
 }: PropsWithChildren<{
   content?: string;
   position?:
-    | "top"
-    | "topLeft"
-    | "topRight"
-    | "left"
-    | "leftTop"
-    | "leftBottom"
-    | "right"
-    | "rightTop"
-    | "rightBottom"
-    | "bottom"
-    | "bottomLeft"
-    | "bottomRight";
+    | 'top'
+    | 'topLeft'
+    | 'topRight'
+    | 'left'
+    | 'leftTop'
+    | 'leftBottom'
+    | 'right'
+    | 'rightTop'
+    | 'rightBottom'
+    | 'bottom'
+    | 'bottomLeft'
+    | 'bottomRight';
 }>) => {
   return (
     <AntdTooltip placement={position} title={content} destroyTooltipOnHide>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,4 +31,4 @@ $ npm i @dslate/semi --save # Semi 风格

		## 在项目中使用

		<code src="../demos/base.tsx"></code>
		<code src="../demos/base.tsx" background="#FFFFFF"></code>