gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/package.json
View File

@ -6,7 +6,7 @@
"prebuild": "rimraf .next",
"build": "next build",
"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": {
"@douyinfe/semi-icons": "^2.3.1",

2
packages/client/src/components/icons/IconTableHeaderCell.tsx
View File

@ -5,7 +5,7 @@ export const IconTableHeaderCell: React.FC<{ style?: React.CSSProperties }> = ({
<Icon
style={style}
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 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"

2
packages/client/src/components/icons/IconTableHeaderColumn.tsx
View File

@ -5,7 +5,7 @@ export const IconTableHeaderColumn: React.FC<{ style?: React.CSSProperties }> =
<Icon
style={style}
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>
</svg>
}

2
packages/client/src/components/icons/IconTableHeaderRow.tsx
View File

@ -5,7 +5,7 @@ export const IconTableHeaderRow: React.FC<{ style?: React.CSSProperties }> = ({
<Icon
style={style}
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="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>

4
packages/client/src/components/tiptap/extensions/bulletList.ts
View File

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

6
packages/client/src/components/tiptap/menus/colorPicker/style.module.scss
View File

@ -11,11 +11,17 @@
width: 32px;
height: 32px;
cursor: pointer;
border-radius: 4px;
border: 1px solid transparent;
&:nth-of-type(n + 8) {
margin-top: 4px;
}
&:hover {
border-color: rgb(193, 199, 208);
}
> span {
display: block;
width: 28px;

2
packages/client/src/components/tiptap/menus/table.tsx
View File

@ -26,7 +26,7 @@ export const TableBubbleMenu = ({ editor }) => {
pluginKey="table-bubble-menu"
shouldShow={() => editor.isActive(Table.name)}
tippyOptions={{
maxWidth: 456,
maxWidth: 486,
placement: 'bottom',
}}
matchRenderContainer={(node: HTMLElement) =>

4
packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/nodes/heading.ts
View File

@ -4,11 +4,11 @@ export class Heading extends Node {
getLevel() {
const matches = this.DOMNode.nodeName.match(/^H([1-6])/);
return matches ? matches[1] : null;
return matches ? +matches[1] : null;
}
matching() {
return Boolean(this.getLevel());
return this.DOMNode?.tagName?.startsWith('H') && Boolean(this.getLevel());
}
data() {

9
packages/client/src/components/tiptap/wrappers/codeBlock/index.module.scss
View File

@ -2,10 +2,11 @@
position: relative;
.handleWrap {
position: absolute;
right: 0.5rem;
top: 0.5rem;
z-index: 100;
display: flex;
justify-content: space-between;
padding: 6px 8px;
background-color: var(--semi-color-fill-0);
border-bottom: 1px solid var(--semi-color-border);
.selectorWrap {
margin-right: 8px;

40
packages/client/src/components/tiptap/wrappers/codeBlock/index.tsx
View File

@ -6,35 +6,29 @@ import { IconCopy } from '@douyinfe/semi-icons';
import { copy } from 'helpers/copy';
import styles from './index.module.scss';
export const CodeBlockWrapper = ({
editor,
node: {
attrs: { language: defaultLanguage },
},
updateAttributes,
extension,
}) => {
export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, extension }) => {
const isEditable = editor.isEditable;
const { language: defaultLanguage } = attrs;
const $container = useRef<HTMLPreElement>();
return (
<NodeViewWrapper className={cls(styles.wrap, 'render-wrapper')}>
<div className={styles.handleWrap}>
{isEditable && (
<Select
size="small"
defaultValue={defaultLanguage || 'null'}
onChange={(value) => updateAttributes({ language: value })}
className={styles.selectorWrap}
>
<Select.Option value="null">auto</Select.Option>
{extension.options.lowlight.listLanguages().map((lang, index) => (
<Select.Option key={index} value={lang}>
{lang}
</Select.Option>
))}
</Select>
)}
<Select
size="small"
defaultValue={defaultLanguage || 'null'}
onChange={(value) => updateAttributes({ language: value })}
className={styles.selectorWrap}
disabled={!isEditable}
filter
>
<Select.Option value="null">auto</Select.Option>
{extension.options.lowlight.listLanguages().map((lang, index) => (
<Select.Option key={index} value={lang}>
{lang}
</Select.Option>
))}
</Select>
<Tooltip content="复制" spacing={6}>
<Button
size="small"

20
packages/client/src/styles/editor/base.scss
View File

@ -40,10 +40,28 @@
}
hr {
position: relative;
border: 0;
height: 2px;
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;
}
}
}

2
packages/client/src/styles/editor/menu.scss
View File

@ -5,6 +5,7 @@
border-radius: 3px;
box-shadow: var(--box-shadow);
background-color: var(--semi-color-nav-bg);
border: 1px solid var(--semi-color-border);
overflow-x: auto;
}
@ -14,6 +15,7 @@
border-radius: 3px;
box-shadow: var(--box-shadow);
background-color: var(--semi-color-nav-bg);
border: 1px solid var(--semi-color-border);
&.row {
column-gap: 8px;

2
packages/server/package.json
View File

@ -9,7 +9,7 @@
"dev": "nest start --watch",
"debug": "nest start --debug --watch",
"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",
"test": "jest",
"test:watch": "jest --watch",