Merge branch 'develop' into feature/remove-react-fc

libs/components/common/src/lib/text/EditableText.tsx

@@ -799,11 +799,11 @@ const EditorLeaf = ({ attributes, children, leaf }: any) => {
             <span {...attributes}>
                 <code
                     style={{
-                        backgroundColor: 'rgba(135,131,120,0.15)',
-                        borderRadius: '3px',
-                        color: '#EB5757',
-                        fontSize: '0.875em',
-                        padding: '0.25em 0.375em',
+                        backgroundColor: '#F2F5F9',
+                        borderRadius: '5px',
+                        color: '#3A4C5C',
+                        padding: '3px 8px',
+                        margin: '0 2px',
                     }}
                 >
                     {customChildren}

libs/components/common/src/lib/text/plugins/link.tsx

@@ -25,7 +25,6 @@ import { ReactEditor } from 'slate-react';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import EditIcon from '@mui/icons-material/Edit';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
-import AttachmentIcon from '@mui/icons-material/Attachment';
 import {
     MuiTooltip as Tooltip,
     styled,
@@ -39,7 +38,7 @@ import {
 
 import { getRandomString } from '../utils';
 import { colors } from '../../colors';
-
+import { LinkIcon } from '@toeverything/components/icons';
 export type LinkElement = {
     type: 'link';
     url: string;
@@ -124,7 +123,7 @@ const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
 ))(({ theme }) => ({
     [`& .${muiTooltipClasses.tooltip}`]: {
         backgroundColor: '#fff',
-        color: '#4C6275',
+        color: '#3E6FDB',
         boxShadow: theme.affine.shadows.shadow1,
         fontSize: '14px',
     },
@@ -419,8 +418,8 @@ export const LinkModal = memo((props: LinkModalProps) => {
                     }}
                 >
                     <div className={styles('linkModalContainerIcon')}>
-                        <AttachmentIcon
-                            style={{ color: colors.Gray04, fontSize: 16 }}
+                        <LinkIcon
+                            style={{ fontSize: '16px', marginTop: '2px' }}
                         />
                     </div>
                     <input
@@ -505,8 +504,10 @@ const LinkModalContainer = styled('div')(({ theme }) => ({
 
 const styles = style9.create({
     linkModalContainerIcon: {
+        display: 'flex',
         width: '16px',
         margin: '0 16px 0 4px',
+        color: '#4C6275',
     },
     linkModalContainerInput: {
         flex: '1',
@@ -517,6 +518,7 @@ const styles = style9.create({
         '::-webkit-input-placeholder': {
             color: '#98acbd',
         },
+        color: '#4C6275',
     },
     linkMask: {
         position: 'fixed',

libs/components/common/src/lib/text/slate-utils.ts

@@ -905,6 +905,19 @@ class SlateUtils {
         );
     }
 
+    public insertNodes(
+        nodes: SlateNode | Array<SlateNode>,
+        options?: Parameters<typeof Transforms.insertNodes>[2]
+    ) {
+        Transforms.insertNodes(this.editor, nodes, {
+            ...options,
+        });
+    }
+
+    public getNodeByPath(path: Path) {
+        Editor.node(this.editor, path);
+    }
+
     public getStartSelection() {
         return {
             anchor: this.getStart(),