Merge branch 'develop' into fix/clipboard

libs/components/editor-core/src/RenderRoot.tsx

@@ -24,11 +24,11 @@ interface RenderRootProps {
 const MAX_PAGE_WIDTH = 5000;
 export const MIN_PAGE_WIDTH = 1480;
 
-export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
+export const RenderRoot = ({
     editor,
     editorElement,
     children,
-}) => {
+}: PropsWithChildren<RenderRootProps>) => {
     const selectionRef = useRef<SelectionRef>(null);
     const triggeredBySelect = useRef(false);
     const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -12,10 +12,10 @@ interface BlockTagProps {
     block: AsyncBlock;
 }
 
-export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
+export const BlockPendantProvider = ({
     block,
     children,
-}) => {
+}: PropsWithChildren<BlockTagProps>) => {
     const triggerRef = useRef<HTMLDivElement>();
     const { getProperties } = useRecastBlockMeta();
     const properties = getProperties();

libs/components/editor-core/src/block-pendant/PendantTag.tsx

@@ -1,9 +1,4 @@
-import React, {
-    FC,
-    FunctionComponent,
-    PropsWithChildren,
-    CSSProperties,
-} from 'react';
+import React from 'react';
 import { Tag, type TagProps } from '@toeverything/components/ui';
 import {
     DateValue,

libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx

@@ -1,12 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import {
-    Input,
-    message,
-    Option,
-    Select,
-    Tooltip,
-} from '@toeverything/components/ui';
-import { HelpCenterIcon } from '@toeverything/components/icons';
+import { message, Option, Select } from '@toeverything/components/ui';
 import { AsyncBlock } from '../../editor';
 
 import { IconMap, pendantOptions } from '../config';
@@ -14,7 +7,6 @@ import { PendantOptions } from '../types';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import {
     StyledDivider,
-    StyledInputEndAdornment,
     StyledOperationLabel,
     StyledOperationTitle,
     StyledPopoverSubTitle,
@@ -26,6 +18,7 @@ import {
     getPendantConfigByType,
     checkPendantForm,
 } from '../utils';
+import { FieldTitleInput } from './FieldTitleInput';
 import { useOnCreateSure } from './hooks';
 
 export const CreatePendantPanel = ({
@@ -74,19 +67,11 @@ export const CreatePendantPanel = ({
                 })}
             </Select>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
-            <Input
+            <FieldTitleInput
                 value={fieldName}
-                placeholder="Input your field name here"
                 onChange={e => {
                     setFieldName(e.target.value);
                 }}
-                endAdornment={
-                    <Tooltip content="Help info here" placement="top">
-                        <StyledInputEndAdornment>
-                            <HelpCenterIcon />
-                        </StyledInputEndAdornment>
-                    </Tooltip>
-                }
             />
             {selectedOption ? (
                 <>

libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input, Tooltip, InputProps } from '@toeverything/components/ui';
+import { StyledInputEndAdornment } from '../StyledComponent';
+import { HelpCenterIcon } from '@toeverything/components/icons';
+
+export const FieldTitleInput = (props: InputProps) => {
+    return (
+        <Input
+            placeholder="Input your field name here"
+            endAdornment={
+                <Tooltip
+                    offset={[15, -5]}
+                    content="Name your tag of the current series"
+                    placement="top"
+                >
+                    <StyledInputEndAdornment>
+                        <HelpCenterIcon />
+                    </StyledInputEndAdornment>
+                </Tooltip>
+            }
+            {...props}
+        />
+    );
+};

libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input, message, Tooltip } from '@toeverything/components/ui';
-import { HelpCenterIcon } from '@toeverything/components/icons';
+import { message } from '@toeverything/components/ui';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
 import {
@@ -12,13 +11,12 @@ import { checkPendantForm, getPendantConfigByType } from '../utils';
 import {
     StyledPopoverWrapper,
     StyledOperationLabel,
-    StyledInputEndAdornment,
     StyledDivider,
     StyledPopoverContent,
     StyledPopoverSubTitle,
 } from '../StyledComponent';
 import { IconMap, pendantOptions } from '../config';
-
+import { FieldTitleInput } from './FieldTitleInput';
 import { useOnUpdateSure } from './hooks';
 
 type Props = {
@@ -63,19 +61,11 @@ export const UpdatePendantPanel = ({
             </StyledPopoverContent>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
             {titleEditable ? (
-                <Input
+                <FieldTitleInput
                     value={fieldName}
-                    placeholder="Input your field name here"
                     onChange={e => {
                         setFieldName(e.target.value);
                     }}
-                    endAdornment={
-                        <Tooltip content="Help info here" placement="top">
-                            <StyledInputEndAdornment>
-                                <HelpCenterIcon />
-                            </StyledInputEndAdornment>
-                        </Tooltip>
-                    }
                 />
             ) : (
                 <StyledPopoverContent>{property.name}</StyledPopoverContent>

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -8,11 +8,11 @@ import {
 } from '@toeverything/components/ui';
 import { AddPendantPopover } from '../AddPendantPopover';
 
-export const PendantPopover: FC<
-    {
+export const PendantPopover = (
+    props: {
         block: AsyncBlock;
     } & Omit<PopperProps, 'content'>
-> = props => {
+) => {
     const { block, ...popoverProps } = props;
     const popoverHandlerRef = useRef<PopperHandler>();
     return (

libs/components/editor-core/src/render-block/RenderBlock.tsx

@@ -10,10 +10,10 @@ interface RenderBlockProps {
     hasContainer?: boolean;
 }
 
-export const RenderBlock: FC<RenderBlockProps> = ({
+export const RenderBlock = ({
     blockId,
     hasContainer = true,
-}) => {
+}: RenderBlockProps) => {
     const { editor, editorElement } = useEditor();
     const { block } = useBlock(blockId);
     const blockRef = useRef<HTMLDivElement>(null);

libs/components/editor-core/src/render-block/RenderBlockChildren.tsx

@@ -6,7 +6,7 @@ interface RenderChildrenProps {
     block: AsyncBlock;
 }
 
-export const RenderBlockChildren: FC<RenderChildrenProps> = ({ block }) => {
+export const RenderBlockChildren = ({ block }: RenderChildrenProps) => {
     return block.childrenIds.length ? (
         <>
             {block.childrenIds.map(childId => {