fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: fix status input blur

fix/tiptap
fantasticit 2022-08-19 14:38:57 +08:00
parent c502474e57
commit cb811ab21f
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/client/src/tiptap/core/wrappers/status/index.tsx
View File

@ -4,7 +4,7 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { useUser } from 'data/user';
import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styles from './index.module.scss';
@ -24,14 +24,15 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
const { user } = useUser();
const ref = useRef<HTMLInputElement>();
const [visible, toggleVisible] = useToggle(false);
const [currentText, setCurrentText] = useState(text);
const content = useMemo(
() => (
<Tag className="render-wrapper" style={{ backgroundColor: bgcolor, border: `1px solid ${borderColor}` }}>
<span style={{ color: currentTextColor }}>{text || '点击设置状态'}</span>
<span style={{ color: currentTextColor }}>{currentText || '点击设置状态'}</span>
</Tag>
),
[bgcolor, borderColor, currentTextColor, text]
[bgcolor, borderColor, currentTextColor, currentText]
);
const onVisibleChange = useCallback(
@ -64,8 +65,10 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
useEffect(() => {
if (visible) {
ref.current?.focus();
} else {
updateAttributes({ text: currentText });
}
}, [visible]);
}, [visible, updateAttributes, currentText]);
return (
<NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
@ -78,7 +81,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
content={
<div style={{ width: 184, height: 65 }}>
<div style={{ marginBottom: 8 }}>
<Input ref={ref} placeholder="输入状态" onChange={(v) => updateAttributes({ text: v })} />
<Input ref={ref} placeholder="输入状态" value={currentText} onChange={setCurrentText} />
</div>
<Space>
{STATUS_COLORS.map((color) => {