mirror of https://github.com/fantasticit/think.git
feat: update editor
This commit is contained in:
parent
5b43a7f971
commit
60a330cdfa
|
@ -6,7 +6,7 @@
|
||||||
"prebuild": "rimraf .next",
|
"prebuild": "rimraf .next",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "cross-env NODE_ENV=production next start -p 5002",
|
"start": "cross-env NODE_ENV=production next start -p 5002",
|
||||||
"pm2": "pm2 start npm --name @think/client -- start"
|
"pm2": "pm2 start -i max npm --name @think/client -- start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@douyinfe/semi-icons": "^2.3.1",
|
"@douyinfe/semi-icons": "^2.3.1",
|
||||||
|
|
|
@ -5,7 +5,7 @@ export const IconTableHeaderCell: React.FC<{ style?: React.CSSProperties }> = ({
|
||||||
<Icon
|
<Icon
|
||||||
style={style}
|
style={style}
|
||||||
svg={
|
svg={
|
||||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||||
<path
|
<path
|
||||||
d="M128 266.666667A138.666667 138.666667 0 0 1 266.666667 128h490.666666A138.666667 138.666667 0 0 1 896 266.666667v490.666666A138.666667 138.666667 0 0 1 757.333333 896H266.666667A138.666667 138.666667 0 0 1 128 757.333333V266.666667zM266.666667 192A74.666667 74.666667 0 0 0 192 266.666667V362.666667h170.666667v-170.666667H266.666667zM192 426.666667h170.666667v170.666666h-170.666667v-170.666666z m234.666667 0v170.666666h170.666666v-170.666666h-170.666666z m234.666666 0v170.666666h170.666667v-170.666666h-170.666667zM597.333333 661.333333h-170.666666v170.666667h170.666666v-170.666667z m64 170.666667v-170.666667h170.666667v96a74.666667 74.666667 0 0 1-74.666667 74.666667H661.333333z m0-469.333333v-170.666667h96c41.216 0 74.666667 33.450667 74.666667 74.666667V362.666667h-170.666667z m-64-170.666667v170.666667h-170.666666v-170.666667h170.666666z m-405.333333 469.333333h170.666667v170.666667H266.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V661.333333z"
|
d="M128 266.666667A138.666667 138.666667 0 0 1 266.666667 128h490.666666A138.666667 138.666667 0 0 1 896 266.666667v490.666666A138.666667 138.666667 0 0 1 757.333333 896H266.666667A138.666667 138.666667 0 0 1 128 757.333333V266.666667zM266.666667 192A74.666667 74.666667 0 0 0 192 266.666667V362.666667h170.666667v-170.666667H266.666667zM192 426.666667h170.666667v170.666666h-170.666667v-170.666666z m234.666667 0v170.666666h170.666666v-170.666666h-170.666666z m234.666666 0v170.666666h170.666667v-170.666666h-170.666667zM597.333333 661.333333h-170.666666v170.666667h170.666666v-170.666667z m64 170.666667v-170.666667h170.666667v96a74.666667 74.666667 0 0 1-74.666667 74.666667H661.333333z m0-469.333333v-170.666667h96c41.216 0 74.666667 33.450667 74.666667 74.666667V362.666667h-170.666667z m-64-170.666667v170.666667h-170.666666v-170.666667h170.666666z m-405.333333 469.333333h170.666667v170.666667H266.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V661.333333z"
|
||||||
p-id="15067"
|
p-id="15067"
|
||||||
|
|
|
@ -5,7 +5,7 @@ export const IconTableHeaderColumn: React.FC<{ style?: React.CSSProperties }> =
|
||||||
<Icon
|
<Icon
|
||||||
style={style}
|
style={style}
|
||||||
svg={
|
svg={
|
||||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
|
||||||
<path d="M64 960l896 0L960 64 64 64 64 960zM640 384l0 256L384 640 384 384 640 384zM384 896l0-192 256 0 0 192L384 896zM320 896 258.88 896 320 834.88 320 896zM320 744.384 168.384 896 128 896l0-76.096 192-192L320 744.384zM128 729.344 128 611.904l192-192 0 117.504L128 729.344zM128 521.344 128 403.904l192-192 0 117.504L128 521.344zM128 313.344 128 227.904 227.904 128l85.504 0L128 313.344zM896 896l-192 0 0-192 192 0L896 896zM896 640l-192 0L704 384l192 0L896 640zM896 128l0 192-192 0L704 128 896 128zM640 320 384 320 384 128l256 0L640 320z"></path>
|
<path d="M64 960l896 0L960 64 64 64 64 960zM640 384l0 256L384 640 384 384 640 384zM384 896l0-192 256 0 0 192L384 896zM320 896 258.88 896 320 834.88 320 896zM320 744.384 168.384 896 128 896l0-76.096 192-192L320 744.384zM128 729.344 128 611.904l192-192 0 117.504L128 729.344zM128 521.344 128 403.904l192-192 0 117.504L128 521.344zM128 313.344 128 227.904 227.904 128l85.504 0L128 313.344zM896 896l-192 0 0-192 192 0L896 896zM896 640l-192 0L704 384l192 0L896 640zM896 128l0 192-192 0L704 128 896 128zM640 320 384 320 384 128l256 0L640 320z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ export const IconTableHeaderRow: React.FC<{ style?: React.CSSProperties }> = ({
|
||||||
<Icon
|
<Icon
|
||||||
style={style}
|
style={style}
|
||||||
svg={
|
svg={
|
||||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||||
<path d="M128.1024 371.5072V216.9856a28.5696 28.5696 0 0 1 28.8768-28.2624h711.8848a28.5696 28.5696 0 0 1 28.8768 28.2624v154.5216z m769.6384 231.8336H675.0208v-182.272h222.8224v182.272z m0 204.0832a28.5696 28.5696 0 0 1-28.8768 28.2624H675.0208v-182.272h222.8224v153.6z m-496.128 27.7504v-182.272H624.64v182.272z m-244.6336 0a28.5696 28.5696 0 0 1-28.8768-28.2624V652.3904h222.8224v182.3744H156.9792z m193.9456-231.8336H128.1024v-182.272h222.8224zM624.64 421.0688v182.3744H401.6128V421.0688z m251.392-281.9072h-727.04a71.0656 71.0656 0 0 0-71.68 70.4512v605.3888a71.0656 71.0656 0 0 0 71.68 70.3488h727.04a71.68 71.68 0 0 0 71.68-70.3488V209.5104a71.0656 71.0656 0 0 0-71.68-70.3488z m0 0"></path>
|
<path d="M128.1024 371.5072V216.9856a28.5696 28.5696 0 0 1 28.8768-28.2624h711.8848a28.5696 28.5696 0 0 1 28.8768 28.2624v154.5216z m769.6384 231.8336H675.0208v-182.272h222.8224v182.272z m0 204.0832a28.5696 28.5696 0 0 1-28.8768 28.2624H675.0208v-182.272h222.8224v153.6z m-496.128 27.7504v-182.272H624.64v182.272z m-244.6336 0a28.5696 28.5696 0 0 1-28.8768-28.2624V652.3904h222.8224v182.3744H156.9792z m193.9456-231.8336H128.1024v-182.272h222.8224zM624.64 421.0688v182.3744H401.6128V421.0688z m251.392-281.9072h-727.04a71.0656 71.0656 0 0 0-71.68 70.4512v605.3888a71.0656 71.0656 0 0 0 71.68 70.3488h727.04a71.68 71.68 0 0 0 71.68-70.3488V209.5104a71.0656 71.0656 0 0 0-71.68-70.3488z m0 0"></path>
|
||||||
<path d="M169.984 211.2512h685.568a20.48 20.48 0 0 1 20.48 20.48v120.4224H149.504V231.7312a20.48 20.48 0 0 1 20.48-20.48z"></path>
|
<path d="M169.984 211.2512h685.568a20.48 20.48 0 0 1 20.48 20.48v120.4224H149.504V231.7312a20.48 20.48 0 0 1 20.48-20.48z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
@ -17,8 +17,4 @@ export const BulletList = BuiltInBulletList.extend({
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
addInputRules() {
|
|
||||||
return [listInputRule(/^\s*([-+*])\s([^\s[])$/, this.type)];
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -11,11 +11,17 @@
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
|
||||||
&:nth-of-type(n + 8) {
|
&:nth-of-type(n + 8) {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgb(193, 199, 208);
|
||||||
|
}
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
|
|
|
@ -26,7 +26,7 @@ export const TableBubbleMenu = ({ editor }) => {
|
||||||
pluginKey="table-bubble-menu"
|
pluginKey="table-bubble-menu"
|
||||||
shouldShow={() => editor.isActive(Table.name)}
|
shouldShow={() => editor.isActive(Table.name)}
|
||||||
tippyOptions={{
|
tippyOptions={{
|
||||||
maxWidth: 456,
|
maxWidth: 486,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
}}
|
}}
|
||||||
matchRenderContainer={(node: HTMLElement) =>
|
matchRenderContainer={(node: HTMLElement) =>
|
||||||
|
|
|
@ -4,11 +4,11 @@ export class Heading extends Node {
|
||||||
|
|
||||||
getLevel() {
|
getLevel() {
|
||||||
const matches = this.DOMNode.nodeName.match(/^H([1-6])/);
|
const matches = this.DOMNode.nodeName.match(/^H([1-6])/);
|
||||||
return matches ? matches[1] : null;
|
return matches ? +matches[1] : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
matching() {
|
matching() {
|
||||||
return Boolean(this.getLevel());
|
return this.DOMNode?.tagName?.startsWith('H') && Boolean(this.getLevel());
|
||||||
}
|
}
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
|
@ -2,10 +2,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.handleWrap {
|
.handleWrap {
|
||||||
position: absolute;
|
display: flex;
|
||||||
right: 0.5rem;
|
justify-content: space-between;
|
||||||
top: 0.5rem;
|
padding: 6px 8px;
|
||||||
z-index: 100;
|
background-color: var(--semi-color-fill-0);
|
||||||
|
border-bottom: 1px solid var(--semi-color-border);
|
||||||
|
|
||||||
.selectorWrap {
|
.selectorWrap {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
|
|
@ -6,26 +6,21 @@ import { IconCopy } from '@douyinfe/semi-icons';
|
||||||
import { copy } from 'helpers/copy';
|
import { copy } from 'helpers/copy';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
export const CodeBlockWrapper = ({
|
export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, extension }) => {
|
||||||
editor,
|
|
||||||
node: {
|
|
||||||
attrs: { language: defaultLanguage },
|
|
||||||
},
|
|
||||||
updateAttributes,
|
|
||||||
extension,
|
|
||||||
}) => {
|
|
||||||
const isEditable = editor.isEditable;
|
const isEditable = editor.isEditable;
|
||||||
|
const { language: defaultLanguage } = attrs;
|
||||||
const $container = useRef<HTMLPreElement>();
|
const $container = useRef<HTMLPreElement>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeViewWrapper className={cls(styles.wrap, 'render-wrapper')}>
|
<NodeViewWrapper className={cls(styles.wrap, 'render-wrapper')}>
|
||||||
<div className={styles.handleWrap}>
|
<div className={styles.handleWrap}>
|
||||||
{isEditable && (
|
|
||||||
<Select
|
<Select
|
||||||
size="small"
|
size="small"
|
||||||
defaultValue={defaultLanguage || 'null'}
|
defaultValue={defaultLanguage || 'null'}
|
||||||
onChange={(value) => updateAttributes({ language: value })}
|
onChange={(value) => updateAttributes({ language: value })}
|
||||||
className={styles.selectorWrap}
|
className={styles.selectorWrap}
|
||||||
|
disabled={!isEditable}
|
||||||
|
filter
|
||||||
>
|
>
|
||||||
<Select.Option value="null">auto</Select.Option>
|
<Select.Option value="null">auto</Select.Option>
|
||||||
{extension.options.lowlight.listLanguages().map((lang, index) => (
|
{extension.options.lowlight.listLanguages().map((lang, index) => (
|
||||||
|
@ -34,7 +29,6 @@ export const CodeBlockWrapper = ({
|
||||||
</Select.Option>
|
</Select.Option>
|
||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
)}
|
|
||||||
<Tooltip content="复制" spacing={6}>
|
<Tooltip content="复制" spacing={6}>
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
|
|
|
@ -40,10 +40,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
|
position: relative;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: var(--semi-color-border);
|
background: var(--semi-color-border);
|
||||||
margin: 18px 0;
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
background-color: var(--semi-color-nav-bg);
|
background-color: var(--semi-color-nav-bg);
|
||||||
|
border: 1px solid var(--semi-color-border);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,6 +15,7 @@
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
background-color: var(--semi-color-nav-bg);
|
background-color: var(--semi-color-nav-bg);
|
||||||
|
border: 1px solid var(--semi-color-border);
|
||||||
|
|
||||||
&.row {
|
&.row {
|
||||||
column-gap: 8px;
|
column-gap: 8px;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"dev": "nest start --watch",
|
"dev": "nest start --watch",
|
||||||
"debug": "nest start --debug --watch",
|
"debug": "nest start --debug --watch",
|
||||||
"start": "cross-env NODE_ENV=production node dist/main",
|
"start": "cross-env NODE_ENV=production node dist/main",
|
||||||
"pm2": "pm2 start npm --name @think/server -- start",
|
"pm2": "pm2 start -i max npm --name @think/server -- start",
|
||||||
"lint": "tslint -p tsconfig.json -c tslint.json",
|
"lint": "tslint -p tsconfig.json -c tslint.json",
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
"test:watch": "jest --watch",
|
"test:watch": "jest --watch",
|
||||||
|
|
Loading…
Reference in New Issue