feat: update editor

This commit is contained in:
fantasticit 2022-03-26 23:26:48 +08:00
parent 5b43a7f971
commit 60a330cdfa
13 changed files with 57 additions and 40 deletions

View File

@ -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",

View File

@ -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"

View File

@ -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>
} }

View File

@ -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>

View File

@ -17,8 +17,4 @@ export const BulletList = BuiltInBulletList.extend({
}, },
}; };
}, },
addInputRules() {
return [listInputRule(/^\s*([-+*])\s([^\s[])$/, this.type)];
},
}); });

View File

@ -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;

View File

@ -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) =>

View File

@ -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() {

View File

@ -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;

View File

@ -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"

View File

@ -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;
}
} }
} }

View File

@ -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;

View File

@ -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",