@ctzhian/tiptap 1.11.3 → 1.12.0

package/dist/index.css

@@ -1,9 +1,16 @@
 @import url('./asset/css/index.css');
 
+:root {
+  --common-row-font-size: 16px;
+  --common-row-line-height: 26px;
+  --udtoken-quote-bar-bg: #bbbfc4;
+}
+
 .tiptap.ProseMirror {
   overflow-y: auto;
   outline: none;
   color: var(--mui-palette-text-primary);
+  line-height: 1.8;
 }
 
 /* 节点缩进（依赖 data-indent 属性） */
@@ -51,28 +58,19 @@
   margin-bottom: 0 !important;
 }
 
-.tiptap.ProseMirror a {
-  text-decoration: underline;
-}
-
 .tiptap.ProseMirror p {
-  line-height: 1.625;
-  margin-top: 0;
-  font-size: 16px;
-  margin-bottom: 20px;
-}
-
-.tiptap.ProseMirror blockquote p,
-.tiptap.ProseMirror .node-alert p {
-  margin: 10px;
+  line-height: var(--common-row-line-height);
+  font-size: var(--common-row-font-size);
+  margin: 8px 0;
 }
 
 /* blockquote */
 .tiptap.ProseMirror blockquote {
   position: relative;
-  padding: 8px 16px;
-  margin: 0 0 20px;
-  background-color: var(--mui-palette-background-paper3);
+  padding-left: 12px;
+  margin: 8px 0;
+  line-height: var(--common-row-line-height);
+  color: var(--mui-palette-text-auxiliary);
 }
 
 .tiptap.ProseMirror blockquote::after {
@@ -80,53 +78,60 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 4px;
+  width: 2px;
   height: 100%;
-  background-color: var(--mui-palette-action-selected);
+  background-color: var(--udtoken-quote-bar-bg);
 }
 
 /* list */
 .tiptap.ProseMirror ol,
 .tiptap.ProseMirror ul {
   padding: 0 32px;
-  margin: 20px 16px 20px 0;
+  margin: 8px 0;
   list-style: none;
 }
 
-.tiptap.ProseMirror li ol,
-.tiptap.ProseMirror li ul {
-  margin: 0;
+.tiptap.ProseMirror li {
+  margin: 8px 0;
 }
 
-.tiptap.ProseMirror ol {
+.tiptap.ProseMirror ol ol ol ol {
   list-style: decimal;
 }
 
+.tiptap.ProseMirror ol ol ol {
+  list-style: lower-roman;
+}
+
 .tiptap.ProseMirror ol ol {
   list-style: lower-alpha;
 }
 
-.tiptap.ProseMirror ol ol ol {
-  list-style: lower-roman;
+.tiptap.ProseMirror ol {
+  list-style: decimal;
 }
 
 .tiptap.ProseMirror ul:not([data-type='taskList']) {
   list-style: disc;
 }
 
-.tiptap.ProseMirror ul:not([data-type='taskList']) li {
-  position: relative;
-  padding-left: 0;
-}
-
 .tiptap.ProseMirror ul:not([data-type='taskList']) ul {
-  list-style: disc;
+  list-style: circle;
 }
 
 .tiptap.ProseMirror ul:not([data-type='taskList']) ul ul {
+  list-style: square;
+}
+
+.tiptap.ProseMirror ul:not([data-type='taskList']) ul ul ul {
   list-style: disc;
 }
 
+.tiptap.ProseMirror ul:not([data-type='taskList']) li {
+  position: relative;
+  padding-left: 0;
+}
+
 .tiptap.ProseMirror ul[data-type='taskList'] {
   list-style: none;
   margin-left: 0;
@@ -141,7 +146,7 @@
 .tiptap.ProseMirror ul[data-type='taskList'] li>label {
   flex: 0 0 auto;
   user-select: none;
-  margin-right: 0.5rem;
+  margin-right: 8px;
   height: 28px;
   display: flex;
   align-items: center;
@@ -153,7 +158,8 @@
 }
 
 .tiptap.ProseMirror ul[data-type='taskList'] li[data-checked='true']>div {
-  color: var(--mui-palette-text-disabled);
+  color: var(--mui-palette-text-auxiliary);
+  opacity: 0.7;
   text-decoration: line-through;
 }
 
@@ -169,14 +175,10 @@
   margin: 0;
 }
 
-.tiptap.ProseMirror ul p,
-.tiptap.ProseMirror ol p {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.tiptap.ProseMirror ol li::marker {
-  font-family: monospace;
+.tiptap.ProseMirror li::marker {
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--mui-palette-primary-main);
 }
 
 /* code */
@@ -186,8 +188,11 @@
 
 .tiptap.ProseMirror pre {
   position: relative;
-  color: var(--mui-palette-common-white);
-  background-color: #171c19;
+  border: 1px solid;
+  border-color: var(--mui-palette-divider);
+  border-radius: var(--mui-shape-borderRadius);
+  color: var(--mui-palette-text-auxiliary);
+  background-color: var(--mui-palette-background-paper3);
 }
 
 .tiptap.ProseMirror pre[data-type="yaml-frontmatter"] {
@@ -315,48 +320,38 @@
   position: relative;
   color: inherit;
   font-style: inherit;
+  line-height: 1.4;
+  font-weight: 500;
 }
 
 .tiptap.ProseMirror h1 {
-  font-size: 30px;
-  line-height: 36px;
-  font-weight: 700;
-  margin: 48px 0 20px;
+  font-size: 26px;
+  margin: 26px 0 10px;
 }
 
 .tiptap.ProseMirror h2 {
-  font-size: 24px;
-  line-height: 32px;
-  font-weight: 700;
-  margin: 40px 0 20px;
+  font-size: 22px;
+  margin: 22px 0 8px;
 }
 
 .tiptap.ProseMirror h3 {
   font-size: 20px;
-  line-height: 28px;
-  font-weight: 600;
-  margin: 36px 0 20px;
+  margin: 20px 0 8px;
 }
 
 .tiptap.ProseMirror h4 {
   font-size: 18px;
-  line-height: 26px;
-  font-weight: 600;
-  margin: 32px 0 20px;
+  margin: 18px 0 8px;
 }
 
 .tiptap.ProseMirror h5 {
   font-size: 18px;
-  line-height: 26px;
-  font-weight: 600;
-  margin: 32px 0 20px;
+  margin: 16px 0 8px;
 }
 
 .tiptap.ProseMirror h6 {
   font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
-  margin: 32px 0 20px;
+  margin: 16px 0 8px;
 }
 
 /* horizontal rule */
@@ -534,4 +529,10 @@
 .tiptap.ProseMirror table *[data-placeholder]::before,
 .tiptap.ProseMirror li p[data-placeholder]::before {
   display: none;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/dist/themes/dark.js

@@ -1,6 +1,6 @@
 var dark = {
   primary: {
-    main: '#3248F2',
+    main: '#4c88ff',
     contrastText: '#000'
   },
   secondary: {
@@ -57,7 +57,7 @@ var dark = {
     inverseAuxiliary: 'rgba(0,0,0,0.5)',
     inverseDisabled: 'rgba(0,0,0,0.15)'
   },
-  divider: '#ededed',
+  divider: '#505050',
   background: {
     default: '#141923',
     paper: '#141923',

package/dist/themes/light.d.ts

@@ -50,7 +50,7 @@ declare const light: {
     text: {
         primary: string;
         secondary: string;
-        tertiary: string;
+        auxiliary: string;
         disabled: string;
         slave: string;
         inverse: string;

package/dist/themes/light.js

@@ -48,9 +48,9 @@ var light = {
     contrastText: '#FFFFFF'
   },
   text: {
-    primary: '#171c19',
+    primary: '#1f2329',
     secondary: '#3f4441',
-    tertiary: '#717572',
+    auxiliary: '#646a73',
     disabled: '#6e7781',
     slave: 'rgba(33,34,35,0.3)',
     inverse: '#FFFFFF',

package/dist/themes/palette.d.ts

@@ -58,7 +58,7 @@ export default function themePalette(color: ThemeColor, mode: Omit<ThemeMode, 's
     text: {
         primary: string;
         secondary: string;
-        tertiary: string;
+        auxiliary: string;
         disabled: string;
         slave: string;
         inverse: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/extension/component/Attachment/Readonly.d.ts

@@ -1,9 +0,0 @@
-import { NodeViewProps } from "@tiptap/react";
-import React from "react";
-import { AttachmentAttributes } from ".";
-interface ReadonlyAttachmentProps extends Partial<NodeViewProps> {
-    attrs: AttachmentAttributes;
-    type: 'icon' | 'block';
-}
-declare const ReadonlyAttachment: ({ attrs, type }: ReadonlyAttachmentProps) => React.JSX.Element;
-export default ReadonlyAttachment;

package/dist/extension/component/Attachment/Readonly.js

@@ -1,91 +0,0 @@
-import { Attachment2Icon } from "../../../component/Icons";
-import { Box, Stack } from "@mui/material";
-import { NodeViewWrapper } from "@tiptap/react";
-import React from "react";
-var ReadonlyAttachment = function ReadonlyAttachment(_ref) {
-  var attrs = _ref.attrs,
-    type = _ref.type;
-  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
-    className: "attachment-wrapper".concat(type === 'block' ? ' block-attachment-wrapper' : ''),
-    as: type === 'block' ? 'div' : 'span'
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "a",
-    href: attrs.url,
-    target: "_blank",
-    download: attrs.title,
-    sx: {
-      textDecoration: 'none !important',
-      color: 'inherit'
-    }
-  }, type === 'block' ? /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
-    gap: 2,
-    sx: {
-      border: '1px solid',
-      borderColor: attrs.url === 'error' ? 'error.main' : 'divider',
-      cursor: 'pointer',
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      p: 2,
-      ':hover': {
-        borderColor: attrs.url === 'error' ? 'error.main' : 'primary.main',
-        color: attrs.url === 'error' ? 'error.main' : 'primary.main'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Attachment2Icon, {
-    sx: {
-      fontSize: '2rem',
-      cursor: 'grab',
-      color: attrs.url === 'error' ? 'error.main' : 'primary.main',
-      alignSelf: 'center',
-      ':active': {
-        cursor: 'grabbing'
-      }
-    }
-  }), /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      flex: 1
-    },
-    gap: 0.5
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: '0.875rem',
-      fontWeight: 'bold'
-    }
-  }, attrs.title), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: '0.75rem',
-      color: 'text.secondary'
-    }
-  }, attrs.size))) : /*#__PURE__*/React.createElement(Box, {
-    component: 'span',
-    sx: {
-      color: 'primary.main',
-      textDecoration: 'none',
-      cursor: 'pointer',
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      transition: 'background-color 0.2s ease',
-      ':hover': {
-        bgcolor: 'background.paper'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: 'span',
-    sx: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 0.5
-    }
-  }, /*#__PURE__*/React.createElement(Attachment2Icon, {
-    sx: {
-      fontSize: '0.875rem',
-      cursor: 'grab',
-      color: 'primary.main',
-      alignSelf: 'center',
-      ':active': {
-        cursor: 'grabbing'
-      }
-    }
-  }), attrs.title))));
-};
-export default ReadonlyAttachment;

package/dist/extension/component/CustomLink/Insert.js

@@ -1,176 +0,0 @@
-// import { Box, Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, TextField } from "@mui/material"
-// import { MarkViewContent } from "@tiptap/react"
-// import FloatingPopover from "@ctzhian/tiptap/component/FloatingPopover"
-// import { LinkIcon } from "@ctzhian/tiptap/component/Icons"
-// import React, { useRef, useState } from "react"
-// import { LinkAttributes } from "."
-
-// interface InsertLinkProps {
-//   updateAttributes?: (attrs: Partial<LinkAttributes>) => void
-// }
-
-// export const InsertLink: React.FC<InsertLinkProps> = ({ updateAttributes }) => {
-//   const [title, setTitle] = useState('')
-//   const [href, setHref] = useState('')
-//   const [type, setType] = useState<'link' | 'card'>('link')
-//   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-//   const containerRef = useRef<HTMLAnchorElement>(null)
-
-//   const handleShowPopover = (event: React.MouseEvent<HTMLElement>) => {
-//     setAnchorEl(event.currentTarget)
-//   }
-
-//   const handleClosePopover = () => {
-//     setAnchorEl(null)
-//     // 重置表单
-//     setTitle('')
-//     setHref('')
-//     setType('link')
-//   }
-
-//   const handleSave = () => {
-//     if (href.trim() && updateAttributes) {
-//       updateAttributes({
-//         href: href.trim(),
-//         title: title.trim() || href.trim(),
-//         type
-//       })
-//       handleClosePopover()
-//     }
-//   }
-
-//   const handleKeyDown = (event: React.KeyboardEvent) => {
-//     if (event.key === 'Enter') {
-//       event.preventDefault()
-//       handleSave()
-//     } else if (event.key === 'Escape') {
-//       event.preventDefault()
-//       handleClosePopover()
-//     }
-//   }
-
-//   return <>
-//     <MarkViewContent
-//       as="span"
-//       ref={containerRef}
-//       className="link-insert-wrapper"
-//       data-drag-handle
-//       role="button"
-//       tabIndex={0}
-//       onClick={handleShowPopover}
-//       onKeyDown={handleKeyDown}
-//       style={{
-//         display: 'inline-block',
-//         margin: '0 2px',
-//       }}
-//     >
-//       <Stack
-//         direction="row"
-//         alignItems="center"
-//         gap={1}
-//         sx={{
-//           border: '1px dashed',
-//           borderColor: 'divider',
-//           borderRadius: 1,
-//           px: 2,
-//           py: 1,
-//           minWidth: 120,
-//           color: 'text.secondary',
-//           bgcolor: 'action.hover',
-//           cursor: 'pointer',
-//           transition: 'all 0.2s ease',
-//           '&:hover': {
-//             bgcolor: 'action.selected',
-//             borderColor: 'primary.main',
-//             color: 'primary.main',
-//           },
-//           '&:focus-within': {
-//             outline: '2px solid',
-//             outlineColor: 'primary.main',
-//             outlineOffset: 1,
-//           },
-//         }}
-//       >
-//         <LinkIcon sx={{ fontSize: '1rem' }} />
-//         <Box sx={{
-//           fontSize: '0.875rem',
-//           fontWeight: 500,
-//           whiteSpace: 'nowrap'
-//         }}>
-//           插入链接
-//         </Box>
-//       </Stack>
-//     </MarkViewContent>
-//     <FloatingPopover
-//       open={Boolean(anchorEl)}
-//       anchorEl={anchorEl}
-//       onClose={handleClosePopover}
-//       placement="bottom"
-//     >
-//       <Stack gap={2} sx={{ p: 2, width: 320 }}>
-//         <TextField
-//           fullWidth
-//           size="small"
-//           label="标题"
-//           value={title}
-//           onChange={(e) => setTitle(e.target.value)}
-//           placeholder="链接标题（可选）"
-//           onKeyDown={handleKeyDown}
-//         />
-//         <TextField
-//           fullWidth
-//           size="small"
-//           label="地址"
-//           value={href}
-//           onChange={(e) => setHref(e.target.value)}
-//           placeholder="https://example.com"
-//           required
-//           autoFocus
-//           error={href.length > 0 && !href.trim()}
-//           helperText={href.length > 0 && !href.trim() ? "请输入有效的链接地址" : ""}
-//           onKeyDown={handleKeyDown}
-//         />
-//         <FormControl component="fieldset">
-//           <FormLabel component="legend" sx={{ fontSize: '0.875rem' }}>显示风格</FormLabel>
-//           <RadioGroup
-//             row
-//             value={type}
-//             onChange={(e) => setType(e.target.value as 'link' | 'card')}
-//           >
-//             <FormControlLabel
-//               value="link"
-//               control={<Radio size="small" />}
-//               label="文字链接"
-//             />
-//             <FormControlLabel
-//               value="card"
-//               control={<Radio size="small" />}
-//               label="卡片链接"
-//             />
-//           </RadioGroup>
-//         </FormControl>
-//         <Stack direction="row" gap={1}>
-//           <Button
-//             variant="outlined"
-//             size="small"
-//             fullWidth
-//             onClick={handleClosePopover}
-//           >
-//             取消
-//           </Button>
-//           <Button
-//             variant="contained"
-//             size="small"
-//             fullWidth
-//             onClick={handleSave}
-//             disabled={!href.trim()}
-//           >
-//             插入链接
-//           </Button>
-//         </Stack>
-//       </Stack>
-//     </FloatingPopover>
-//   </>
-// }
-
-// export default InsertLink