fix text component cannot be selected bug

This commit is contained in:
Bowen Tan 2022-02-17 13:50:44 +08:00
parent f782e68ae3
commit 8df35c22bf
6 changed files with 53 additions and 44 deletions

View File

@ -31,6 +31,7 @@
"dependencies": {
"@chakra-ui/icons": "^1.0.15",
"@chakra-ui/react": "^1.7.1",
"@emotion/styled": "^11.6.0",
"@sinclair/typebox": "^0.21.2",
"@sunmao-ui/core": "^0.3.6",
"@sunmao-ui/runtime": "^0.3.12",

View File

@ -34,7 +34,6 @@
"@chakra-ui/icons": "^1.0.15",
"@chakra-ui/react": "^1.7.1",
"@emotion/css": "^11.7.1",
"@emotion/styled": "^11",
"@sunmao-ui/chakra-ui-lib": "^0.1.6",
"@sunmao-ui/core": "^0.3.6",
"@sunmao-ui/runtime": "^0.3.12",

View File

@ -37,7 +37,6 @@ type Props = {
wrapperRef: React.MutableRefObject<HTMLDivElement | null>;
};
// Read this pr to understand the coordinates system before you modify this component.
// https://github.com/webzard-io/sunmao-ui/pull/286
export const EditorMask: React.FC<Props> = observer((props: Props) => {

View File

@ -30,7 +30,6 @@
},
"dependencies": {
"@emotion/css": "^11.7.1",
"@emotion/styled": "^11",
"@sinclair/typebox": "^0.21.2",
"@sunmao-ui/core": "^0.3.6",
"@vue/reactivity": "^3.1.5",

View File

@ -1,24 +1,28 @@
import React from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/css';
import ReactMarkdown from 'react-markdown';
import { Static, Type } from '@sinclair/typebox';
export const TextPropertySchema = Type.Object({
raw: Type.String({
title: 'Raw',
}),
format: Type.KeyOf(
Type.Object({
plain: Type.String(),
md: Type.String(),
}), {
title: 'Format',
}
),
}, {
title: 'Text',
category: 'Basic',
});
export const TextPropertySchema = Type.Object(
{
raw: Type.String({
title: 'Raw',
}),
format: Type.KeyOf(
Type.Object({
plain: Type.String(),
md: Type.String(),
}),
{
title: 'Format',
}
),
},
{
title: 'Text',
category: 'Basic',
}
);
export type TextProps = {
value: Static<typeof TextPropertySchema>;
@ -28,21 +32,28 @@ export type TextProps = {
const Text = React.forwardRef<HTMLDivElement, TextProps>(({ value, cssStyle }, ref) => {
const text = typeof value.raw === 'string' ? value.raw : `${value.raw}`;
if (value.format === 'md') {
const Div = styled.div`
${cssStyle}
`;
return (
<Div ref={ref}>
<div
className={css`
${cssStyle}
`}
ref={ref}
>
<ReactMarkdown>{text}</ReactMarkdown>
</Div>
</div>
);
}
// TODO: For some unknown reason, emotion css doesn't work in this file. So I use styled instead.
const Span = styled.span`
${cssStyle}
`;
return <Span ref={ref}>{text}</Span>;
return (
<span
className={css`
${cssStyle}
`}
ref={ref}
>
{text}
</span>
);
});
export default Text;

View File

@ -1580,9 +1580,9 @@
integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
"@emotion/babel-plugin@^11.3.0":
version "11.3.0"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
version "11.7.2"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0"
integrity sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==
dependencies:
"@babel/helper-module-imports" "^7.12.13"
"@babel/plugin-syntax-jsx" "^7.12.13"
@ -1595,7 +1595,7 @@
escape-string-regexp "^4.0.0"
find-root "^1.1.0"
source-map "^0.5.7"
stylis "^4.0.3"
stylis "4.0.13"
"@emotion/babel-plugin@^11.7.1":
version "11.7.1"
@ -1660,10 +1660,10 @@
dependencies:
"@emotion/memoize" "0.7.4"
"@emotion/is-prop-valid@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==
"@emotion/is-prop-valid@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz#cbd843d409dfaad90f9404e7c0404c55eae8c134"
integrity sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==
dependencies:
"@emotion/memoize" "^0.7.4"
@ -1711,14 +1711,14 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
"@emotion/styled@^11":
version "11.3.0"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207"
integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==
"@emotion/styled@^11.6.0":
version "11.6.0"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d"
integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==
dependencies:
"@babel/runtime" "^7.13.10"
"@emotion/babel-plugin" "^11.3.0"
"@emotion/is-prop-valid" "^1.1.0"
"@emotion/is-prop-valid" "^1.1.1"
"@emotion/serialize" "^1.0.2"
"@emotion/utils" "^1.0.0"
@ -9731,7 +9731,7 @@ stylis@4.0.13:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
stylis@^4.0.10, stylis@^4.0.3:
stylis@^4.0.10:
version "4.0.10"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==