mirror of https://github.com/fantasticit/think.git
feat: improve tiptap
This commit is contained in:
fantasticit
parent
cc30e00984
commit
1835f8504b
|
|
@ -72,6 +72,7 @@
|
||||||
"marked": "^4.0.12",
|
"marked": "^4.0.12",
|
||||||
"next": "12.0.10",
|
"next": "12.0.10",
|
||||||
"prosemirror-markdown": "^1.7.0",
|
"prosemirror-markdown": "^1.7.0",
|
||||||
|
"prosemirror-tables": "^1.1.1",
|
||||||
"prosemirror-utils": "^0.9.6",
|
"prosemirror-utils": "^0.9.6",
|
||||||
"prosemirror-view": "^1.23.6",
|
"prosemirror-view": "^1.23.6",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconHorizontalRule: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<rect fill="currentColor" x="17" y="116" width="223" height="24" rx="12"></rect>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconList: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||||
|
<g fill="currentColor" fill-rule="evenodd">
|
||||||
|
<g fill-rule="nonzero">
|
||||||
|
<path d="M215 118c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 138H96c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L96 118h119ZM215 35c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 55H96c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L96 35h119ZM215 201c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 221H96c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L96 201h119Z"></path>
|
||||||
|
</g>
|
||||||
|
<circle cx="44" cy="45" r="16"></circle>
|
||||||
|
<circle cx="44" cy="128" r="16"></circle>
|
||||||
|
<circle cx="44" cy="211" r="16"></circle>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconOrderedList: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||||
|
<g fill="currentColor" fill-rule="nonzero">
|
||||||
|
<path d="M215 118c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 138H101c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L101 118h114ZM215 35c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 55H101c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L101 35h114ZM215 201c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L215 221H101c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L101 201h114ZM65.988 190.061l-.739.79-1.88 2.061-4.394 4.885-6.435 7.205h13.852a9 9 0 0 1 8.996 8.736l.004.265a9 9 0 0 1-8.735 8.996l-.265.004H32.5c-7.762 0-11.883-9.167-6.732-14.973l15.666-17.621 6.446-7.197 3.323-3.665 1.424-1.54.623-.653.408-.407.042-.039c1.203-1.106 1.855-2.536 1.855-4.05 0-3.128-2.87-5.855-6.637-5.855-3.681 0-6.508 2.607-6.632 5.647l-.004.208a9 9 0 1 1-18 0c0-13.281 11.13-23.855 24.636-23.855 13.507 0 24.637 10.574 24.637 23.855 0 6.497-2.703 12.572-7.355 17.003l-.212.2ZM43.206 25.413c5.694-5.302 14.934-1.363 15.13 6.337l.003.25v73a9 9 0 0 1-17.996.265L40.34 105V52.583c-3.556 2.568-8.513 2.208-11.653-.96l-.198-.207a9 9 0 0 1 .247-12.522l.206-.198 14.265-13.283Z"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconQuote: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path d="M36 143h44c6.627 0 12 5.373 12 12v44c0 6.627-5.373 12-12 12H36c-6.627 0-12-5.373-12-12v-44c0-6.627 5.373-12 12-12Z"></path>
|
||||||
|
<path
|
||||||
|
d="M84.144 53.257c5.502-.485 10.355 3.582 10.84 9.084.476 5.408-3.447 10.19-8.806 10.81l-.279.029c-23.384 2.06-41.533 21.544-41.894 45.105L44 119v41.723c0 5.523-4.477 10-10 10-5.43 0-9.848-4.326-9.996-9.72l-.004-.28V119c0-34.269 26.22-62.755 60.144-65.743Z"
|
||||||
|
fill-rule="nonzero"
|
||||||
|
></path>
|
||||||
|
<path d="M43.272 120.769 38.56 142.58a9.567 9.567 0 0 0 13.93 10.42l11.401-6.216a2.015 2.015 0 0 0-.964-3.784h-2.933c-8.837 0-16-7.164-16-16v-6.155a.365.365 0 0 0-.722-.077Z"></path>
|
||||||
|
</g>
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path d="M176 143h44c6.627 0 12 5.373 12 12v44c0 6.627-5.373 12-12 12h-44c-6.627 0-12-5.373-12-12v-44c0-6.627 5.373-12 12-12Z"></path>
|
||||||
|
<path
|
||||||
|
d="M224.144 53.257c5.502-.485 10.355 3.582 10.84 9.084.476 5.408-3.447 10.19-8.806 10.81l-.279.029c-23.384 2.06-41.533 21.544-41.894 45.105L184 119v41.723c0 5.523-4.477 10-10 10-5.43 0-9.848-4.326-9.996-9.72l-.004-.28V119c0-34.269 26.22-62.755 60.144-65.743Z"
|
||||||
|
fill-rule="nonzero"
|
||||||
|
></path>
|
||||||
|
<path d="m183.272 120.769-4.712 21.812a9.567 9.567 0 0 0 13.93 10.42l11.401-6.216a2.015 2.015 0 0 0-.964-3.784h-2.933c-8.837 0-16-7.164-16-16v-6.155a.365.365 0 0 0-.722-.077Z"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -5,12 +5,19 @@ export const IconTask: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
|
||||||
<Icon
|
<Icon
|
||||||
style={style}
|
style={style}
|
||||||
svg={
|
svg={
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
|
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||||
<path
|
<g fill="none" fill-rule="evenodd">
|
||||||
d="M7.5 6h9A1.5 1.5 0 0118 7.5v9a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 016 16.5v-9A1.5 1.5 0 017.5 6zm3.072 8.838l.143.154a.5.5 0 00.769-.042l.13-.175 3.733-5.045a.8.8 0 00-.11-1.064.665.665 0 00-.984.118l-3.243 4.387-1.315-1.422a.663.663 0 00-.99 0 .801.801 0 000 1.07l1.867 2.019z"
|
<path
|
||||||
fill="currentColor"
|
d="M169.002 89.757c3.945-3.865 10.276-3.8 14.141.145 3.795 3.873 3.801 10.047.067 13.928l-.212.213-63.285 62a10 10 0 0 1-13.776.209l-.219-.208-32.715-32.041c-3.946-3.865-4.012-10.196-.147-14.142 3.794-3.873 9.966-4.007 13.924-.354l.217.207 25.717 25.187 56.288-55.144Z"
|
||||||
fillRule="evenodd"
|
fill="currentColor"
|
||||||
></path>
|
fill-rule="nonzero"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M201 23c17.673 0 32 14.327 32 32v146c0 17.673-14.327 32-32 32H55c-17.673 0-32-14.327-32-32V55c0-17.673 14.327-32 32-32h146Zm0 20H55c-6.525 0-11.834 5.209-11.996 11.695L43 55v146c0 6.525 5.209 11.834 11.695 11.996L55 213h146c6.525 0 11.834-5.209 11.996-11.695L213 201V55c0-6.525-5.209-11.834-11.695-11.996L201 43Z"
|
||||||
|
fill="currentColor"
|
||||||
|
fill-rule="nonzero"
|
||||||
|
></path>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -35,3 +35,7 @@ export * from './IconAttachment';
|
||||||
export * from './IconMath';
|
export * from './IconMath';
|
||||||
export * from './IconSearch';
|
export * from './IconSearch';
|
||||||
export * from './IconSearchReplace';
|
export * from './IconSearchReplace';
|
||||||
|
export * from './IconQuote';
|
||||||
|
export * from './IconHorizontalRule';
|
||||||
|
export * from './IconOrderedList';
|
||||||
|
export * from './IconList';
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import { DocumentChildren } from './extensions/documentChildren';
|
||||||
import { DocumentReference } from './extensions/documentReference';
|
import { DocumentReference } from './extensions/documentReference';
|
||||||
import { Dropcursor } from './extensions/dropCursor';
|
import { Dropcursor } from './extensions/dropCursor';
|
||||||
import { Emoji } from './extensions/emoji';
|
import { Emoji } from './extensions/emoji';
|
||||||
|
import { EvokeMenu } from './extensions/evokeMenu';
|
||||||
import { FontSize } from './extensions/fontSize';
|
import { FontSize } from './extensions/fontSize';
|
||||||
import { FootnoteDefinition } from './extensions/footnoteDefinition';
|
import { FootnoteDefinition } from './extensions/footnoteDefinition';
|
||||||
import { FootnoteReference } from './extensions/footnoteReference';
|
import { FootnoteReference } from './extensions/footnoteReference';
|
||||||
|
|
@ -65,6 +66,7 @@ export const BaseKit = [
|
||||||
DocumentReference,
|
DocumentReference,
|
||||||
Dropcursor,
|
Dropcursor,
|
||||||
Emoji,
|
Emoji,
|
||||||
|
EvokeMenu,
|
||||||
FontSize,
|
FontSize,
|
||||||
FootnoteDefinition,
|
FootnoteDefinition,
|
||||||
FootnoteReference,
|
FootnoteReference,
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,19 @@
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
border-top: 1px solid var(--semi-color-border);
|
border-top: 1px solid var(--semi-color-border);
|
||||||
|
|
||||||
|
&.isEditable {
|
||||||
|
&:hover {
|
||||||
|
outline: 1px solid var(--semi-color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemWrap {
|
||||||
|
&:hover {
|
||||||
|
color: var(--semi-color-text-1);
|
||||||
|
border-color: var(--semi-color-border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.itemWrap {
|
.itemWrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
|
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import cls from 'classnames';
|
||||||
import { Typography } from '@douyinfe/semi-ui';
|
import { Typography } from '@douyinfe/semi-ui';
|
||||||
import { useChildrenDocument } from 'data/document';
|
import { useChildrenDocument } from 'data/document';
|
||||||
import { DataRender } from 'components/data-render';
|
import { DataRender } from 'components/data-render';
|
||||||
|
|
@ -10,7 +11,8 @@ import styles from './index.module.scss';
|
||||||
|
|
||||||
const { Text } = Typography;
|
const { Text } = Typography;
|
||||||
|
|
||||||
export const DocumentChildrenWrapper = () => {
|
export const DocumentChildrenWrapper = ({ editor }) => {
|
||||||
|
const isEditable = editor.isEditable;
|
||||||
const { pathname, query } = useRouter();
|
const { pathname, query } = useRouter();
|
||||||
const wikiId = query?.wikiId;
|
const wikiId = query?.wikiId;
|
||||||
const documentId = query?.documentId;
|
const documentId = query?.documentId;
|
||||||
|
|
@ -18,7 +20,7 @@ export const DocumentChildrenWrapper = () => {
|
||||||
const { data: documents, loading, error } = useChildrenDocument({ wikiId, documentId, isShare });
|
const { data: documents, loading, error } = useChildrenDocument({ wikiId, documentId, isShare });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeViewWrapper as="div" className={styles.wrap}>
|
<NodeViewWrapper as="div" className={cls(styles.wrap, isEditable && styles.isEditable)}>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<Text type="tertiary">子文档</Text>
|
<Text type="tertiary">子文档</Text>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,19 @@
|
||||||
.wrap {
|
.wrap {
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
|
|
||||||
|
&.isEditable {
|
||||||
|
&:hover {
|
||||||
|
outline: 1px solid var(--semi-color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemWrap {
|
||||||
|
&:hover {
|
||||||
|
color: var(--semi-color-text-1);
|
||||||
|
border-color: var(--semi-color-border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.itemWrap {
|
.itemWrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
|
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import cls from 'classnames';
|
||||||
import { Select } from '@douyinfe/semi-ui';
|
import { Select } from '@douyinfe/semi-ui';
|
||||||
import { useWikiTocs } from 'data/wiki';
|
import { useWikiTocs } from 'data/wiki';
|
||||||
import { DataRender } from 'components/data-render';
|
import { DataRender } from 'components/data-render';
|
||||||
|
|
@ -21,7 +22,7 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeViewWrapper as="div" className={styles.wrap}>
|
<NodeViewWrapper as="div" className={cls(styles.wrap, isEditable && styles.isEditable)}>
|
||||||
<div>
|
<div>
|
||||||
{isEditable && (
|
{isEditable && (
|
||||||
<DataRender
|
<DataRender
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
items: any[];
|
items: Array<{ name: string; emoji: string; fallbackImage?: string }>;
|
||||||
command: any;
|
command: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -35,6 +35,7 @@ export const EmojiList: React.FC<IProps> = forwardRef((props, ref) => {
|
||||||
useEffect(() => setSelectedIndex(0), [props.items]);
|
useEffect(() => setSelectedIndex(0), [props.items]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (Number.isNaN(selectedIndex + 1)) return;
|
||||||
const el = $container.current.querySelector(`button:nth-of-type(${selectedIndex + 1})`);
|
const el = $container.current.querySelector(`button:nth-of-type(${selectedIndex + 1})`);
|
||||||
el && scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
|
el && scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
|
||||||
}, [selectedIndex]);
|
}, [selectedIndex]);
|
||||||
|
|
@ -63,15 +64,19 @@ export const EmojiList: React.FC<IProps> = forwardRef((props, ref) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.items}>
|
<div className={styles.items}>
|
||||||
<div ref={$container}>
|
<div ref={$container}>
|
||||||
{props.items.map((item, index) => (
|
{props.items.length ? (
|
||||||
<button
|
props.items.map((item, index) => (
|
||||||
className={cls(styles.item, index === selectedIndex ? styles['is-selected'] : '')}
|
<button
|
||||||
key={index}
|
className={cls(styles.item, index === selectedIndex ? styles['is-selected'] : '')}
|
||||||
onClick={() => selectItem(index)}
|
key={index}
|
||||||
>
|
onClick={() => selectItem(index)}
|
||||||
{item.fallbackImage ? <img src={item.fallbackImage} /> : item.emoji}:{item.name}:
|
>
|
||||||
</button>
|
{item.fallbackImage ? <img src={item.fallbackImage} /> : item.emoji}:{item.name}:
|
||||||
))}
|
</button>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className={styles.item}>没有找到结果</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
.items {
|
||||||
|
width: 160px;
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0.2rem;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--semi-color-text-0);
|
||||||
|
border-radius: var(--semi-border-radius-medium);
|
||||||
|
background-color: var(--semi-color-bg-0);
|
||||||
|
border: 1px solid var(--semi-color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-selected {
|
||||||
|
border-color: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { Editor } from '@tiptap/core';
|
||||||
|
import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
|
||||||
|
import cls from 'classnames';
|
||||||
|
import scrollIntoView from 'scroll-into-view-if-needed';
|
||||||
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
editor: Editor;
|
||||||
|
items: Array<{ label: React.ReactNode | ((editor: Editor) => React.ReactNode) }>;
|
||||||
|
command: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MenuList: React.FC<IProps> = forwardRef((props, ref) => {
|
||||||
|
const $container = useRef<HTMLDivElement>();
|
||||||
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||||
|
|
||||||
|
const selectItem = (index) => {
|
||||||
|
const item = props.items[index];
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
props.command(item);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const upHandler = () => {
|
||||||
|
setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
const downHandler = () => {
|
||||||
|
setSelectedIndex((selectedIndex + 1) % props.items.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
const enterHandler = () => {
|
||||||
|
selectItem(selectedIndex);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => setSelectedIndex(0), [props.items]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (Number.isNaN(selectedIndex + 1)) return;
|
||||||
|
const el = $container.current.querySelector(`button:nth-of-type(${selectedIndex + 1})`);
|
||||||
|
el && scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
|
||||||
|
}, [selectedIndex]);
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => ({
|
||||||
|
onKeyDown: ({ event }) => {
|
||||||
|
if (event.key === 'ArrowUp') {
|
||||||
|
upHandler();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'ArrowDown') {
|
||||||
|
downHandler();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
enterHandler();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.items}>
|
||||||
|
<div ref={$container}>
|
||||||
|
{props.items.length ? (
|
||||||
|
props.items.map((item, index) => (
|
||||||
|
<button
|
||||||
|
className={cls(styles.item, index === selectedIndex ? styles['is-selected'] : '')}
|
||||||
|
key={index}
|
||||||
|
onClick={() => selectItem(index)}
|
||||||
|
>
|
||||||
|
{typeof item.label === 'function' ? item.label(props.editor) : item.label}
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className={styles.item}>没有找到结果</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
|
||||||
|
import { Space, Popover, Tag, Input } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const TableWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
|
const isEditable = editor.isEditable;
|
||||||
|
const { color, text } = node.attrs;
|
||||||
|
const content = <Tag color={color}>{text || '点击设置状态'}</Tag>;
|
||||||
|
|
||||||
|
console.log(node.attrs);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NodeViewWrapper as="div">
|
||||||
|
<table>
|
||||||
|
<NodeViewContent></NodeViewContent>
|
||||||
|
</table>
|
||||||
|
</NodeViewWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -15,8 +15,8 @@ export const DocumentChildrenInputRegex = /^documentChildren\$$/;
|
||||||
export const DocumentChildren = Node.create({
|
export const DocumentChildren = Node.create({
|
||||||
name: 'documentChildren',
|
name: 'documentChildren',
|
||||||
group: 'block',
|
group: 'block',
|
||||||
defining: true,
|
|
||||||
draggable: true,
|
draggable: true,
|
||||||
|
selectable: true,
|
||||||
atom: true,
|
atom: true,
|
||||||
|
|
||||||
addAttributes() {
|
addAttributes() {
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,9 @@ export const DocumentReferenceInputRegex = /^documentReference\$$/;
|
||||||
export const DocumentReference = Node.create({
|
export const DocumentReference = Node.create({
|
||||||
name: 'documentReference',
|
name: 'documentReference',
|
||||||
group: 'block',
|
group: 'block',
|
||||||
defining: true,
|
|
||||||
draggable: true,
|
draggable: true,
|
||||||
atom: true,
|
atom: true,
|
||||||
|
selectable: true,
|
||||||
|
|
||||||
addAttributes() {
|
addAttributes() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { Node } from '@tiptap/core';
|
import { Node, findParentNode } from '@tiptap/core';
|
||||||
import { ReactRenderer } from '@tiptap/react';
|
import { ReactRenderer } from '@tiptap/react';
|
||||||
import { PluginKey } from 'prosemirror-state';
|
import { Plugin, PluginKey } from 'prosemirror-state';
|
||||||
|
import { Decoration, DecorationSet } from 'prosemirror-view';
|
||||||
import Suggestion from '@tiptap/suggestion';
|
import Suggestion from '@tiptap/suggestion';
|
||||||
import tippy from 'tippy.js';
|
import tippy from 'tippy.js';
|
||||||
import { EmojiList } from '../components/emojiList';
|
import { EmojiList } from '../components/emojiList';
|
||||||
|
|
@ -41,11 +42,48 @@ export const Emoji = Node.create({
|
||||||
},
|
},
|
||||||
|
|
||||||
addProseMirrorPlugins() {
|
addProseMirrorPlugins() {
|
||||||
|
const { editor } = this;
|
||||||
|
|
||||||
return [
|
return [
|
||||||
Suggestion({
|
Suggestion({
|
||||||
editor: this.editor,
|
editor: this.editor,
|
||||||
...this.options.suggestion,
|
...this.options.suggestion,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
new Plugin({
|
||||||
|
key: new PluginKey('emojiPlaceholder'),
|
||||||
|
props: {
|
||||||
|
decorations: (state) => {
|
||||||
|
if (!editor.isEditable) return;
|
||||||
|
|
||||||
|
const parent = findParentNode((node) => node.type.name === 'paragraph')(
|
||||||
|
state.selection
|
||||||
|
);
|
||||||
|
if (!parent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const decorations: Decoration[] = [];
|
||||||
|
const isEmpty = parent && parent.node.content.size === 0;
|
||||||
|
const isSlash = parent && parent.node.textContent === ':';
|
||||||
|
const isTopLevel = state.selection.$from.depth === 1;
|
||||||
|
|
||||||
|
if (isTopLevel) {
|
||||||
|
if (isSlash) {
|
||||||
|
decorations.push(
|
||||||
|
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||||
|
'class': 'placeholder',
|
||||||
|
'data-placeholder': ` 继续输入进行过滤`,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return DecorationSet.create(state.doc, decorations);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
}).configure({
|
}).configure({
|
||||||
|
|
@ -56,9 +94,13 @@ export const Emoji = Node.create({
|
||||||
render: () => {
|
render: () => {
|
||||||
let component;
|
let component;
|
||||||
let popup;
|
let popup;
|
||||||
|
let isEditable;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
onStart: (props) => {
|
onStart: (props) => {
|
||||||
|
isEditable = props.editor.isEditable;
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
component = new ReactRenderer(EmojiList, {
|
component = new ReactRenderer(EmojiList, {
|
||||||
props,
|
props,
|
||||||
editor: props.editor,
|
editor: props.editor,
|
||||||
|
|
@ -76,6 +118,8 @@ export const Emoji = Node.create({
|
||||||
},
|
},
|
||||||
|
|
||||||
onUpdate(props) {
|
onUpdate(props) {
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
component.updateProps(props);
|
component.updateProps(props);
|
||||||
popup[0].setProps({
|
popup[0].setProps({
|
||||||
getReferenceClientRect: props.clientRect,
|
getReferenceClientRect: props.clientRect,
|
||||||
|
|
@ -83,6 +127,8 @@ export const Emoji = Node.create({
|
||||||
},
|
},
|
||||||
|
|
||||||
onKeyDown(props) {
|
onKeyDown(props) {
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
if (props.event.key === 'Escape') {
|
if (props.event.key === 'Escape') {
|
||||||
popup[0].hide();
|
popup[0].hide();
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -91,6 +137,8 @@ export const Emoji = Node.create({
|
||||||
},
|
},
|
||||||
|
|
||||||
onExit() {
|
onExit() {
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
popup[0].destroy();
|
popup[0].destroy();
|
||||||
component.destroy();
|
component.destroy();
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,383 @@
|
||||||
|
import { Node, findParentNode } from '@tiptap/core';
|
||||||
|
import { ReactRenderer } from '@tiptap/react';
|
||||||
|
import { Plugin, PluginKey } from 'prosemirror-state';
|
||||||
|
import { Decoration, DecorationSet } from 'prosemirror-view';
|
||||||
|
import Suggestion from '@tiptap/suggestion';
|
||||||
|
import tippy from 'tippy.js';
|
||||||
|
import { Space } from '@douyinfe/semi-ui';
|
||||||
|
import { IconList, IconOrderedList } from '@douyinfe/semi-icons';
|
||||||
|
import {
|
||||||
|
IconLink,
|
||||||
|
IconQuote,
|
||||||
|
IconHorizontalRule,
|
||||||
|
IconTask,
|
||||||
|
IconDocument,
|
||||||
|
IconMind,
|
||||||
|
IconTable,
|
||||||
|
IconImage,
|
||||||
|
IconCodeBlock,
|
||||||
|
IconStatus,
|
||||||
|
IconInfo,
|
||||||
|
IconAttachment,
|
||||||
|
IconMath,
|
||||||
|
} from 'components/icons';
|
||||||
|
import { Upload } from 'components/upload';
|
||||||
|
import { MenuList } from '../components/menuList';
|
||||||
|
import { getImageOriginSize } from '../services/image';
|
||||||
|
|
||||||
|
export const EvokeMenuPluginKey = new PluginKey('evokeMenu');
|
||||||
|
|
||||||
|
const COMMANDS = [
|
||||||
|
{
|
||||||
|
key: '标题1',
|
||||||
|
label: '标题1',
|
||||||
|
command: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '标题1',
|
||||||
|
label: '标题2',
|
||||||
|
command: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '标题1',
|
||||||
|
label: '标题3',
|
||||||
|
command: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '标题1',
|
||||||
|
label: '标题4',
|
||||||
|
command: (editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '标题1',
|
||||||
|
label: '标题5',
|
||||||
|
command: (editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '标题1',
|
||||||
|
label: '标题6',
|
||||||
|
command: (editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '无序列表',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconList />
|
||||||
|
无序列表
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().toggleBulletList().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '有序列表',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconOrderedList />
|
||||||
|
有序列表
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().toggleOrderedList().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '任务列表',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconTask />
|
||||||
|
任务列表
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().toggleTaskList().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '链接',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconLink />
|
||||||
|
链接
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().toggleLink().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '引用',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconQuote />
|
||||||
|
引用
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().toggleBlockquote().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '分割线',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconHorizontalRule />
|
||||||
|
分割线
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().setHorizontalRule().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '表格',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconTable />
|
||||||
|
表格
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) =>
|
||||||
|
editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '代码块',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconCodeBlock />
|
||||||
|
代码块
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().toggleCodeBlock().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '图片',
|
||||||
|
label: (editor) => (
|
||||||
|
<Space>
|
||||||
|
<IconImage />
|
||||||
|
<Upload
|
||||||
|
accept="image/*"
|
||||||
|
onOK={async (url, fileName) => {
|
||||||
|
const { width, height } = await getImageOriginSize(url);
|
||||||
|
console.log('upload', width, height);
|
||||||
|
editor.chain().focus().setImage({ src: url, alt: fileName, width, height }).run();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{() => '图片'}
|
||||||
|
</Upload>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '附件',
|
||||||
|
label: (editor) => (
|
||||||
|
<Space>
|
||||||
|
<IconAttachment />
|
||||||
|
<Upload
|
||||||
|
onOK={(url, name) => {
|
||||||
|
editor.chain().focus().setAttachment({ url, name }).run();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{() => '附件'}
|
||||||
|
</Upload>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '外链',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconLink />
|
||||||
|
外链
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().insertIframe({ url: '' }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '思维导图',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconMind />
|
||||||
|
思维导图
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().insertMind().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '数学公式',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconMath />
|
||||||
|
数学公式
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().setKatex().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '状态',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconStatus />
|
||||||
|
状态
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().setStatus().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '信息框',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconInfo />
|
||||||
|
信息框
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().setBanner({ type: 'info' }).run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '文档',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconDocument />
|
||||||
|
文档
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().setDocumentReference().run(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '子文档',
|
||||||
|
label: (
|
||||||
|
<Space>
|
||||||
|
<IconDocument />
|
||||||
|
子文档
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
command: (editor) => editor.chain().focus().setDocumentChildren().run(),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const EvokeMenu = Node.create({
|
||||||
|
name: 'evokeMenu',
|
||||||
|
|
||||||
|
addOptions() {
|
||||||
|
return {
|
||||||
|
HTMLAttributes: {},
|
||||||
|
suggestion: {
|
||||||
|
char: '/',
|
||||||
|
pluginKey: EvokeMenuPluginKey,
|
||||||
|
command: ({ editor, range, props }) => {
|
||||||
|
const { state, dispatch } = editor.view;
|
||||||
|
const $from = state.selection.$from;
|
||||||
|
const tr = state.tr.deleteRange($from.start(), $from.pos);
|
||||||
|
dispatch(tr);
|
||||||
|
props?.command(editor);
|
||||||
|
editor.view.focus();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
addProseMirrorPlugins() {
|
||||||
|
const { editor } = this;
|
||||||
|
|
||||||
|
return [
|
||||||
|
Suggestion({
|
||||||
|
editor: this.editor,
|
||||||
|
...this.options.suggestion,
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Plugin({
|
||||||
|
key: new PluginKey('evokeMenuPlaceholder'),
|
||||||
|
props: {
|
||||||
|
decorations: (state) => {
|
||||||
|
if (!editor.isEditable) return;
|
||||||
|
|
||||||
|
const parent = findParentNode((node) => node.type.name === 'paragraph')(
|
||||||
|
state.selection
|
||||||
|
);
|
||||||
|
if (!parent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const decorations: Decoration[] = [];
|
||||||
|
const isEmpty = parent && parent.node.content.size === 0;
|
||||||
|
const isSlash = parent && parent.node.textContent === '/';
|
||||||
|
const isTopLevel = state.selection.$from.depth === 1;
|
||||||
|
|
||||||
|
if (isTopLevel) {
|
||||||
|
if (isEmpty) {
|
||||||
|
decorations.push(
|
||||||
|
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||||
|
'class': 'placeholder',
|
||||||
|
'data-placeholder': '输入 / 唤起更多',
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSlash) {
|
||||||
|
decorations.push(
|
||||||
|
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||||
|
'class': 'placeholder',
|
||||||
|
'data-placeholder': ` 继续输入进行过滤`,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return DecorationSet.create(state.doc, decorations);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}).configure({
|
||||||
|
suggestion: {
|
||||||
|
items: ({ query }) => {
|
||||||
|
return COMMANDS.filter((command) => command.key.startsWith(query));
|
||||||
|
},
|
||||||
|
render: () => {
|
||||||
|
let component;
|
||||||
|
let popup;
|
||||||
|
let isEditable;
|
||||||
|
|
||||||
|
return {
|
||||||
|
onStart: (props) => {
|
||||||
|
isEditable = props.editor.isEditable;
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
|
component = new ReactRenderer(MenuList, {
|
||||||
|
props,
|
||||||
|
editor: props.editor,
|
||||||
|
});
|
||||||
|
|
||||||
|
popup = tippy('body', {
|
||||||
|
getReferenceClientRect: props.clientRect,
|
||||||
|
appendTo: () => document.body,
|
||||||
|
content: component.element,
|
||||||
|
showOnCreate: true,
|
||||||
|
interactive: true,
|
||||||
|
trigger: 'manual',
|
||||||
|
placement: 'bottom-start',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onUpdate(props) {
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
|
component.updateProps(props);
|
||||||
|
popup[0].setProps({
|
||||||
|
getReferenceClientRect: props.clientRect,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyDown(props) {
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
|
if (props.event.key === 'Escape') {
|
||||||
|
popup[0].hide();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return component.ref?.onKeyDown(props);
|
||||||
|
},
|
||||||
|
|
||||||
|
onExit(props) {
|
||||||
|
if (!isEditable) return;
|
||||||
|
|
||||||
|
popup[0].destroy();
|
||||||
|
component.destroy();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
import BuiltInPlaceholder from '@tiptap/extension-placeholder';
|
import BuiltInPlaceholder from '@tiptap/extension-placeholder';
|
||||||
|
|
||||||
export const Placeholder = BuiltInPlaceholder.configure({
|
export const Placeholder = BuiltInPlaceholder.configure({
|
||||||
placeholder: ({ node }) => {
|
placeholder: ({ node, editor }) => {
|
||||||
|
if (!editor.isEditable) return;
|
||||||
|
|
||||||
if (node.type.name === 'title') {
|
if (node.type.name === 'title') {
|
||||||
return '请输入标题';
|
return '请输入标题';
|
||||||
}
|
}
|
||||||
return '请输入内容';
|
return '输入 / 唤起更多';
|
||||||
},
|
},
|
||||||
showOnlyCurrent: false,
|
showOnlyCurrent: false,
|
||||||
showOnlyWhenEditable: true,
|
showOnlyWhenEditable: true,
|
||||||
|
|
|
||||||
|
|
@ -1 +1,120 @@
|
||||||
export { TableCell } from '@tiptap/extension-table-cell';
|
import { TableCell as BuiltInTable } from '@tiptap/extension-table-cell';
|
||||||
|
import { Plugin, PluginKey } from 'prosemirror-state';
|
||||||
|
import { Decoration, DecorationSet } from 'prosemirror-view';
|
||||||
|
import {
|
||||||
|
getCellsInColumn,
|
||||||
|
isRowSelected,
|
||||||
|
isTableSelected,
|
||||||
|
selectRow,
|
||||||
|
selectTable,
|
||||||
|
} from '../services/table';
|
||||||
|
|
||||||
|
export const TableCell = BuiltInTable.extend({
|
||||||
|
addProseMirrorPlugins() {
|
||||||
|
return [
|
||||||
|
new Plugin({
|
||||||
|
key: new PluginKey(`${this.name}FloatMenu`),
|
||||||
|
// view: () =>
|
||||||
|
// new FloatMenuView({
|
||||||
|
// editor: this.editor,
|
||||||
|
// // has one selected should show
|
||||||
|
// shouldShow: ({ editor }) => {
|
||||||
|
// if (!editor.isEditable) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// const cells = getCellsInColumn(0)(editor.state.selection);
|
||||||
|
// return !!cells?.some((cell, index) =>
|
||||||
|
// isRowSelected(index)(editor.state.selection)
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// init: (dom, editor) => {
|
||||||
|
// const insertTop = buttonView({
|
||||||
|
// id: "insert-top",
|
||||||
|
// name: this.options.dictionary.insertTop,
|
||||||
|
// icon: DoubleUp({}),
|
||||||
|
// });
|
||||||
|
// insertTop.button.addEventListener("click", () => {
|
||||||
|
// editor.chain().addRowBefore().run();
|
||||||
|
// });
|
||||||
|
// const insertBottom = buttonView({
|
||||||
|
// id: "insert-bottom",
|
||||||
|
// name: this.options.dictionary.insertBottom,
|
||||||
|
// icon: DoubleDown({}),
|
||||||
|
// });
|
||||||
|
// insertBottom.button.addEventListener("click", () => {
|
||||||
|
// editor.chain().addRowAfter().run();
|
||||||
|
// });
|
||||||
|
// const remove = buttonView({
|
||||||
|
// name: this.options.dictionary.delete,
|
||||||
|
// icon: Delete({}),
|
||||||
|
// });
|
||||||
|
// remove.button.addEventListener("click", () => {
|
||||||
|
// if (isTableSelected(editor.state.selection)) {
|
||||||
|
// editor.chain().deleteTable().run();
|
||||||
|
// } else {
|
||||||
|
// editor.chain().deleteRow().run();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// dom.append(insertTop.button);
|
||||||
|
// dom.append(insertBottom.button);
|
||||||
|
// dom.append(remove.button);
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
props: {
|
||||||
|
decorations: (state) => {
|
||||||
|
const { doc, selection } = state;
|
||||||
|
const decorations: Decoration[] = [];
|
||||||
|
const cells = getCellsInColumn(0)(selection);
|
||||||
|
|
||||||
|
if (cells) {
|
||||||
|
cells.forEach(({ pos }, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
decorations.push(
|
||||||
|
Decoration.widget(pos + 1, () => {
|
||||||
|
const grip = document.createElement('a');
|
||||||
|
grip.classList.add('grip-table');
|
||||||
|
if (isTableSelected(selection)) {
|
||||||
|
grip.classList.add('selected');
|
||||||
|
}
|
||||||
|
grip.addEventListener('mousedown', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
this.editor.view.dispatch(selectTable(this.editor.state.tr));
|
||||||
|
});
|
||||||
|
return grip;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
decorations.push(
|
||||||
|
Decoration.widget(pos + 1, () => {
|
||||||
|
const rowSelected = isRowSelected(index)(selection);
|
||||||
|
const grip = document.createElement('a');
|
||||||
|
grip.classList.add('grip-row');
|
||||||
|
if (rowSelected) {
|
||||||
|
grip.classList.add('selected');
|
||||||
|
}
|
||||||
|
if (index === 0) {
|
||||||
|
grip.classList.add('first');
|
||||||
|
}
|
||||||
|
if (index === cells.length - 1) {
|
||||||
|
grip.classList.add('last');
|
||||||
|
}
|
||||||
|
grip.addEventListener('mousedown', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
this.editor.view.dispatch(selectRow(index)(this.editor.state.tr));
|
||||||
|
});
|
||||||
|
return grip;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return DecorationSet.create(doc, decorations);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1 +1,94 @@
|
||||||
export { TableHeader } from '@tiptap/extension-table-header';
|
import { TableHeader as BuiltInTableHeader } from '@tiptap/extension-table-header';
|
||||||
|
import { Plugin, PluginKey } from 'prosemirror-state';
|
||||||
|
import { Decoration, DecorationSet } from 'prosemirror-view';
|
||||||
|
import { getCellsInRow, isColumnSelected, isTableSelected, selectColumn } from '../services/table';
|
||||||
|
|
||||||
|
export const TableHeader = BuiltInTableHeader.extend({
|
||||||
|
addProseMirrorPlugins() {
|
||||||
|
return [
|
||||||
|
new Plugin({
|
||||||
|
key: new PluginKey(`${this.name}FloatMenu`),
|
||||||
|
// view: () =>
|
||||||
|
// new FloatMenuView({
|
||||||
|
// editor: this.editor,
|
||||||
|
// // has one selected should show
|
||||||
|
// shouldShow: ({ editor }) => {
|
||||||
|
// if (!editor.isEditable) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// const selection = editor.state.selection;
|
||||||
|
// if (isTableSelected(selection)) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// const cells = getCellsInRow(0)(selection);
|
||||||
|
// return !!cells?.some((cell, index) =>
|
||||||
|
// isColumnSelected(index)(selection)
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// init: (dom, editor) => {
|
||||||
|
// const insertLeft = buttonView({
|
||||||
|
// name: this.options.dictionary.insertLeft,
|
||||||
|
// icon: DoubleLeft({}),
|
||||||
|
// });
|
||||||
|
// insertLeft.button.addEventListener("click", () => {
|
||||||
|
// editor.chain().addColumnBefore().run();
|
||||||
|
// });
|
||||||
|
// const insertRight = buttonView({
|
||||||
|
// name: this.options.dictionary.insertRight,
|
||||||
|
// icon: DoubleRight({}),
|
||||||
|
// });
|
||||||
|
// insertRight.button.addEventListener("click", () => {
|
||||||
|
// editor.chain().addColumnAfter().run();
|
||||||
|
// });
|
||||||
|
// const remove = buttonView({
|
||||||
|
// name: this.options.dictionary.delete,
|
||||||
|
// icon: Delete({}),
|
||||||
|
// });
|
||||||
|
// remove.button.addEventListener("click", () => {
|
||||||
|
// editor.chain().deleteColumn().run();
|
||||||
|
// });
|
||||||
|
|
||||||
|
// dom.append(insertLeft.button);
|
||||||
|
// dom.append(insertRight.button);
|
||||||
|
// dom.append(remove.button);
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
props: {
|
||||||
|
decorations: (state) => {
|
||||||
|
const { doc, selection } = state;
|
||||||
|
const decorations: Decoration[] = [];
|
||||||
|
const cells = getCellsInRow(0)(selection);
|
||||||
|
|
||||||
|
if (cells) {
|
||||||
|
cells.forEach(({ pos }, index) => {
|
||||||
|
decorations.push(
|
||||||
|
Decoration.widget(pos + 1, () => {
|
||||||
|
const colSelected = isColumnSelected(index)(selection);
|
||||||
|
const grip = document.createElement('a');
|
||||||
|
grip.classList.add('grip-column');
|
||||||
|
if (colSelected) {
|
||||||
|
grip.classList.add('selected');
|
||||||
|
}
|
||||||
|
if (index === 0) {
|
||||||
|
grip.classList.add('first');
|
||||||
|
} else if (index === cells.length - 1) {
|
||||||
|
grip.classList.add('last');
|
||||||
|
}
|
||||||
|
grip.addEventListener('mousedown', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
this.editor.view.dispatch(selectColumn(index)(this.editor.state.tr));
|
||||||
|
});
|
||||||
|
return grip;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return DecorationSet.create(doc, decorations);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button } from '@douyinfe/semi-ui';
|
import { Button } from '@douyinfe/semi-ui';
|
||||||
import { IconQuote, IconCheckboxIndeterminate, IconLink } from '@douyinfe/semi-icons';
|
|
||||||
import { Tooltip } from 'components/tooltip';
|
import { Tooltip } from 'components/tooltip';
|
||||||
|
import { IconQuote, IconLink, IconHorizontalRule } from 'components/icons';
|
||||||
import { isTitleActive } from '../services/isActive';
|
import { isTitleActive } from '../services/isActive';
|
||||||
import { Emoji } from './components/emoji';
|
import { Emoji } from './components/emoji';
|
||||||
import { Search } from './search';
|
import { Search } from './search';
|
||||||
|
|
@ -40,7 +40,7 @@ export const BaseInsertMenu: React.FC<{ editor: any }> = ({ editor }) => {
|
||||||
<Button
|
<Button
|
||||||
theme={'borderless'}
|
theme={'borderless'}
|
||||||
type="tertiary"
|
type="tertiary"
|
||||||
icon={<IconCheckboxIndeterminate />}
|
icon={<IconHorizontalRule />}
|
||||||
onClick={() => editor.chain().focus().setHorizontalRule().run()}
|
onClick={() => editor.chain().focus().setHorizontalRule().run()}
|
||||||
disabled={isTitleActive(editor)}
|
disabled={isTitleActive(editor)}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button } from '@douyinfe/semi-ui';
|
import { Button } from '@douyinfe/semi-ui';
|
||||||
import { IconList, IconOrderedList, IconIndentLeft, IconIndentRight } from '@douyinfe/semi-icons';
|
import { IconIndentLeft, IconIndentRight } from '@douyinfe/semi-icons';
|
||||||
|
import { IconOrderedList, IconList } from 'components/icons';
|
||||||
import { Tooltip } from 'components/tooltip';
|
import { Tooltip } from 'components/tooltip';
|
||||||
import { IconTask } from 'components/icons';
|
import { IconTask } from 'components/icons';
|
||||||
import { isTitleActive } from '../services/isActive';
|
import { isTitleActive } from '../services/isActive';
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ export const TableBubbleMenu = ({ editor }) => {
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip content="删除当前列">
|
<Tooltip content="删除当前列" hideOnClick>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => editor.chain().focus().deleteColumn().run()}
|
onClick={() => editor.chain().focus().deleteColumn().run()}
|
||||||
icon={<IconDeleteColumn />}
|
icon={<IconDeleteColumn />}
|
||||||
|
|
@ -78,7 +78,7 @@ export const TableBubbleMenu = ({ editor }) => {
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
<Tooltip content="删除当前行">
|
<Tooltip content="删除当前行" hideOnClick>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => editor.chain().focus().deleteRow().run()}
|
onClick={() => editor.chain().focus().deleteRow().run()}
|
||||||
icon={<IconDeleteRow />}
|
icon={<IconDeleteRow />}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
import { findParentNode } from '@tiptap/core';
|
||||||
|
import { Selection, Transaction } from 'prosemirror-state';
|
||||||
|
import { CellSelection, TableMap } from 'prosemirror-tables';
|
||||||
|
import { Node, ResolvedPos } from 'prosemirror-model';
|
||||||
|
|
||||||
|
export const isRectSelected = (rect: any) => (selection: CellSelection) => {
|
||||||
|
const map = TableMap.get(selection.$anchorCell.node(-1));
|
||||||
|
const start = selection.$anchorCell.start(-1);
|
||||||
|
const cells = map.cellsInRect(rect);
|
||||||
|
const selectedCells = map.cellsInRect(
|
||||||
|
map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start)
|
||||||
|
);
|
||||||
|
|
||||||
|
for (let i = 0, count = cells.length; i < count; i++) {
|
||||||
|
if (selectedCells.indexOf(cells[i]) === -1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const findTable = (selection: Selection) =>
|
||||||
|
findParentNode((node) => node.type.spec.tableRole && node.type.spec.tableRole === 'table')(
|
||||||
|
selection
|
||||||
|
);
|
||||||
|
|
||||||
|
export const isCellSelection = (selection: any) => {
|
||||||
|
return selection instanceof CellSelection;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isColumnSelected = (columnIndex: number) => (selection: any) => {
|
||||||
|
if (isCellSelection(selection)) {
|
||||||
|
const map = TableMap.get(selection.$anchorCell.node(-1));
|
||||||
|
return isRectSelected({
|
||||||
|
left: columnIndex,
|
||||||
|
right: columnIndex + 1,
|
||||||
|
top: 0,
|
||||||
|
bottom: map.height,
|
||||||
|
})(selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isRowSelected = (rowIndex: number) => (selection: any) => {
|
||||||
|
if (isCellSelection(selection)) {
|
||||||
|
const map = TableMap.get(selection.$anchorCell.node(-1));
|
||||||
|
return isRectSelected({
|
||||||
|
left: 0,
|
||||||
|
right: map.width,
|
||||||
|
top: rowIndex,
|
||||||
|
bottom: rowIndex + 1,
|
||||||
|
})(selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isTableSelected = (selection: any) => {
|
||||||
|
if (isCellSelection(selection)) {
|
||||||
|
const map = TableMap.get(selection.$anchorCell.node(-1));
|
||||||
|
return isRectSelected({
|
||||||
|
left: 0,
|
||||||
|
right: map.width,
|
||||||
|
top: 0,
|
||||||
|
bottom: map.height,
|
||||||
|
})(selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCellsInColumn = (columnIndex: number | number[]) => (selection: Selection) => {
|
||||||
|
const table = findTable(selection);
|
||||||
|
if (table) {
|
||||||
|
const map = TableMap.get(table.node);
|
||||||
|
const indexes = Array.isArray(columnIndex) ? columnIndex : Array.from([columnIndex]);
|
||||||
|
return indexes.reduce((acc, index) => {
|
||||||
|
if (index >= 0 && index <= map.width - 1) {
|
||||||
|
const cells = map.cellsInRect({
|
||||||
|
left: index,
|
||||||
|
right: index + 1,
|
||||||
|
top: 0,
|
||||||
|
bottom: map.height,
|
||||||
|
});
|
||||||
|
return acc.concat(
|
||||||
|
cells.map((nodePos) => {
|
||||||
|
const node = table.node.nodeAt(nodePos);
|
||||||
|
const pos = nodePos + table.start;
|
||||||
|
return { pos, start: pos + 1, node };
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, [] as { pos: number; start: number; node: Node | null | undefined }[]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCellsInRow = (rowIndex: number | number[]) => (selection: Selection) => {
|
||||||
|
const table = findTable(selection);
|
||||||
|
if (table) {
|
||||||
|
const map = TableMap.get(table.node);
|
||||||
|
const indexes = Array.isArray(rowIndex) ? rowIndex : Array.from([rowIndex]);
|
||||||
|
return indexes.reduce((acc, index) => {
|
||||||
|
if (index >= 0 && index <= map.height - 1) {
|
||||||
|
const cells = map.cellsInRect({
|
||||||
|
left: 0,
|
||||||
|
right: map.width,
|
||||||
|
top: index,
|
||||||
|
bottom: index + 1,
|
||||||
|
});
|
||||||
|
return acc.concat(
|
||||||
|
cells.map((nodePos) => {
|
||||||
|
const node = table.node.nodeAt(nodePos);
|
||||||
|
const pos = nodePos + table.start;
|
||||||
|
return { pos, start: pos + 1, node };
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, [] as { pos: number; start: number; node: Node | null | undefined }[]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCellsInTable = (selection: Selection) => {
|
||||||
|
const table = findTable(selection);
|
||||||
|
if (table) {
|
||||||
|
const map = TableMap.get(table.node);
|
||||||
|
const cells = map.cellsInRect({
|
||||||
|
left: 0,
|
||||||
|
right: map.width,
|
||||||
|
top: 0,
|
||||||
|
bottom: map.height,
|
||||||
|
});
|
||||||
|
return cells.map((nodePos) => {
|
||||||
|
const node = table.node.nodeAt(nodePos);
|
||||||
|
const pos = nodePos + table.start;
|
||||||
|
return { pos, start: pos + 1, node };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const findParentNodeClosestToPos = (
|
||||||
|
$pos: ResolvedPos,
|
||||||
|
predicate: (node: Node) => boolean
|
||||||
|
) => {
|
||||||
|
for (let i = $pos.depth; i > 0; i--) {
|
||||||
|
const node = $pos.node(i);
|
||||||
|
if (predicate(node)) {
|
||||||
|
return {
|
||||||
|
pos: i > 0 ? $pos.before(i) : 0,
|
||||||
|
start: $pos.start(i),
|
||||||
|
depth: i,
|
||||||
|
node,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const findCellClosestToPos = ($pos: ResolvedPos) => {
|
||||||
|
const predicate = (node: Node) =>
|
||||||
|
node.type.spec.tableRole && /cell/i.test(node.type.spec.tableRole);
|
||||||
|
return findParentNodeClosestToPos($pos, predicate);
|
||||||
|
};
|
||||||
|
|
||||||
|
const select = (type: 'row' | 'column') => (index: number) => (tr: Transaction) => {
|
||||||
|
const table = findTable(tr.selection);
|
||||||
|
const isRowSelection = type === 'row';
|
||||||
|
if (table) {
|
||||||
|
const map = TableMap.get(table.node);
|
||||||
|
|
||||||
|
// Check if the index is valid
|
||||||
|
if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
|
||||||
|
const left = isRowSelection ? 0 : index;
|
||||||
|
const top = isRowSelection ? index : 0;
|
||||||
|
const right = isRowSelection ? map.width : index + 1;
|
||||||
|
const bottom = isRowSelection ? index + 1 : map.height;
|
||||||
|
|
||||||
|
const cellsInFirstRow = map.cellsInRect({
|
||||||
|
left,
|
||||||
|
top,
|
||||||
|
right: isRowSelection ? right : left + 1,
|
||||||
|
bottom: isRowSelection ? top + 1 : bottom,
|
||||||
|
});
|
||||||
|
|
||||||
|
const cellsInLastRow =
|
||||||
|
bottom - top === 1
|
||||||
|
? cellsInFirstRow
|
||||||
|
: map.cellsInRect({
|
||||||
|
left: isRowSelection ? left : right - 1,
|
||||||
|
top: isRowSelection ? bottom - 1 : top,
|
||||||
|
right,
|
||||||
|
bottom,
|
||||||
|
});
|
||||||
|
|
||||||
|
const head = table.start + cellsInFirstRow[0];
|
||||||
|
const anchor = table.start + cellsInLastRow[cellsInLastRow.length - 1];
|
||||||
|
const $head = tr.doc.resolve(head);
|
||||||
|
const $anchor = tr.doc.resolve(anchor);
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
return tr.setSelection(new CellSelection($anchor, $head));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tr;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const selectColumn = select('column');
|
||||||
|
|
||||||
|
export const selectRow = select('row');
|
||||||
|
|
||||||
|
export const selectTable = (tr: Transaction) => {
|
||||||
|
const table = findTable(tr.selection);
|
||||||
|
if (table) {
|
||||||
|
const { map } = TableMap.get(table.node);
|
||||||
|
if (map && map.length) {
|
||||||
|
const head = table.start + map[0];
|
||||||
|
const anchor = table.start + map[map.length - 1];
|
||||||
|
const $head = tr.doc.resolve(head);
|
||||||
|
const $anchor = tr.doc.resolve(anchor);
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
return tr.setSelection(new CellSelection($anchor, $head));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tr;
|
||||||
|
};
|
||||||
|
|
@ -50,6 +50,14 @@
|
||||||
transform: translate(10px, 10px);
|
transform: translate(10px, 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.placeholder::before {
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
float: left;
|
||||||
|
color: #aaa;
|
||||||
|
pointer-events: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.hr-line {
|
.hr-line {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
|
|
@ -102,6 +110,49 @@
|
||||||
border-bottom: 1px solid var(--semi-color-border);
|
border-bottom: 1px solid var(--semi-color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
cursor: text;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--tiptap-font-family-mono);
|
||||||
|
color: var(--tiptap-color-text-secondly);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 0;
|
||||||
|
margin-left: -24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1:not(.title):before {
|
||||||
|
content: 'H1';
|
||||||
|
}
|
||||||
|
|
||||||
|
h2::before {
|
||||||
|
content: 'H2';
|
||||||
|
}
|
||||||
|
|
||||||
|
h3::before {
|
||||||
|
content: 'H3';
|
||||||
|
}
|
||||||
|
|
||||||
|
h4::before {
|
||||||
|
content: 'H4';
|
||||||
|
}
|
||||||
|
|
||||||
|
h5::before {
|
||||||
|
content: 'H5';
|
||||||
|
}
|
||||||
|
|
||||||
|
h6::before {
|
||||||
|
content: 'H6';
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1.87em;
|
font-size: 1.87em;
|
||||||
margin: 26px 0 12px 0;
|
margin: 26px 0 12px 0;
|
||||||
|
|
@ -234,18 +285,21 @@
|
||||||
.tableWrapper {
|
.tableWrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
padding: 1em 0 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin: 14px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin: 14px 0;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
border: 1px solid var(--semi-color-border);
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--semi-color-fill-2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-width: 1em;
|
min-width: 1em;
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
|
|
@ -263,7 +317,76 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectedCell {
|
.selectedCell {
|
||||||
background: var(--semi-color-fill-0);
|
border-style: double;
|
||||||
|
border-color: var(--semi-color-info);
|
||||||
|
background: var(--semi-color-info-light-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grip-column {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.7em;
|
||||||
|
left: 0;
|
||||||
|
top: -1em;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ced4da;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
background: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected::after {
|
||||||
|
background: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.grip-row {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.7em;
|
||||||
|
top: 0;
|
||||||
|
left: -1em;
|
||||||
|
margin-right: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ced4da;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
background: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected::after {
|
||||||
|
background: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.grip-table {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0.8em;
|
||||||
|
height: 0.8em;
|
||||||
|
top: -1em;
|
||||||
|
left: -1em;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ced4da;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
background: var(--semi-color-info);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected::after {
|
||||||
|
background: var(--semi-color-info);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-resize-handle {
|
.column-resize-handle {
|
||||||
|
|
|
||||||
|
|
@ -108,6 +108,7 @@ importers:
|
||||||
marked: ^4.0.12
|
marked: ^4.0.12
|
||||||
next: 12.0.10
|
next: 12.0.10
|
||||||
prosemirror-markdown: ^1.7.0
|
prosemirror-markdown: ^1.7.0
|
||||||
|
prosemirror-tables: ^1.1.1
|
||||||
prosemirror-utils: ^0.9.6
|
prosemirror-utils: ^0.9.6
|
||||||
prosemirror-view: ^1.23.6
|
prosemirror-view: ^1.23.6
|
||||||
react: 17.0.2
|
react: 17.0.2
|
||||||
|
|
@ -183,7 +184,8 @@ importers:
|
||||||
marked: 4.0.12
|
marked: 4.0.12
|
||||||
next: 12.0.10_react-dom@17.0.2+react@17.0.2
|
next: 12.0.10_react-dom@17.0.2+react@17.0.2
|
||||||
prosemirror-markdown: 1.7.0
|
prosemirror-markdown: 1.7.0
|
||||||
prosemirror-utils: 0.9.6
|
prosemirror-tables: 1.1.1
|
||||||
|
prosemirror-utils: 0.9.6_prosemirror-tables@1.1.1
|
||||||
prosemirror-view: 1.23.6
|
prosemirror-view: 1.23.6
|
||||||
react: 17.0.2
|
react: 17.0.2
|
||||||
react-dom: 17.0.2_react@17.0.2
|
react-dom: 17.0.2_react@17.0.2
|
||||||
|
|
@ -6840,12 +6842,14 @@ packages:
|
||||||
prosemirror-model: 1.16.1
|
prosemirror-model: 1.16.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/prosemirror-utils/0.9.6:
|
/prosemirror-utils/0.9.6_prosemirror-tables@1.1.1:
|
||||||
resolution: {integrity: sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==}
|
resolution: {integrity: sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
prosemirror-model: ^1.0.0
|
prosemirror-model: ^1.0.0
|
||||||
prosemirror-state: ^1.0.1
|
prosemirror-state: ^1.0.1
|
||||||
prosemirror-tables: ^0.9.1
|
prosemirror-tables: ^0.9.1
|
||||||
|
dependencies:
|
||||||
|
prosemirror-tables: 1.1.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/prosemirror-view/1.23.6:
|
/prosemirror-view/1.23.6:
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue