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

Merge pull request #176 from fantasticit/fix/tiptap

fix/0824
fantasticit 2022-08-19 22:42:11 +08:00 committed by GitHub
parent a9bd41948f 27599dca10
commit b318923fa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 794 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/client/src/thirtypart/kityminder/index.ts
View File

@ -24,15 +24,25 @@ export function renderMind(options: Options) {
const Editor = window.kityminder.Editor;
const editor = new Editor(options.container);
const mind = editor.minder;
mind.editor = editor;
options.data && mind.importJson(options.data);
if (!options.isEditable) {
mind.disable();
mind.setStatus('readonly');
}
setTimeout(() => {
mind.execCommand('camera');
if (!options.isEditable) {
const selectedNodes = mind.getSelectedNodes();
if (selectedNodes.length) {
mind.removeSelectedNodes(selectedNodes);
}
}
}, 0);
return mind;

3
packages/client/src/thirtypart/kityminder/kity-core/core/event.js
View File

@ -138,6 +138,9 @@ define(function (require, exports, module) {
},
_bindEvents: function () {
if (this.getStatus() === 'readonly') {
return this;
}
/* jscs:disable maximumLineLength */
this._paper.on(
'click dblclick mousedown contextmenu mouseup mousemove mouseover mousewheel DOMMouseScroll touchstart touchmove touchend dragenter dragleave drop',

4
packages/client/src/thirtypart/kityminder/kity-core/core/focus.js
View File

@ -17,6 +17,10 @@ define(function (require, exports, module) {
kity.extendClass(Minder, {
focus: function () {
if (this.getStatus() === 'readonly') {
return this;
}
if (!this.isFocused()) {
var renderTarget = this._renderTarget;
renderTarget.classList.add('focus');

18
packages/client/src/thirtypart/kityminder/kity-core/core/keyreceiver.js
View File

@ -23,6 +23,10 @@ define(function (require, exports, module) {
kity.extendClass(Minder, {
_initKeyReceiver: function () {
if (this.getStatus() === 'readonly') {
return;
}
if (this._keyReceiver) return;
var receiver = (this._keyReceiver = document.createElement('input'));
@ -34,6 +38,10 @@ define(function (require, exports, module) {
var minder = this;
listen(receiver, 'keydown keyup keypress copy paste blur focus input', function (e) {
if (minder.getStatus() === 'readonly') {
return;
}
switch (e.type) {
case 'blur':
minder.blur();
@ -50,14 +58,24 @@ define(function (require, exports, module) {
});
this.on('focus', function () {
if (this.getStatus() === 'readonly') {
return;
}
receiver.select();
receiver.focus();
});
this.on('blur', function () {
if (this.getStatus() === 'readonly') {
return;
}
receiver.blur();
});
if (this.isFocused()) {
if (this.getStatus() === 'readonly') {
return;
}
receiver.select();
receiver.focus();
}

2
packages/client/src/thirtypart/kityminder/kity-core/module/expand.js
View File

@ -142,6 +142,8 @@ define(function (require, exports, module) {
initEvent: function (node) {
this.on('mousedown', function (e) {
if (minder._status === 'readonly') return;
minder.select([node], true);
if (node.isExpanded()) {
node.collapse();

2
packages/client/src/thirtypart/kityminder/kity-core/module/priority.js
View File

@ -82,7 +82,7 @@ define(function (require, exports, module) {
mask.fill(color[0]);
}
number.setContent(value);
number.setContent('P' + value);
},
});

34
packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js
View File

@ -21,9 +21,11 @@ define(function (require, exports, module) {
var receiverElement = receiver.element;
var isGecko = window.kity.Browser.gecko;
// setup everything to go
setupReciverElement();
setupFsm();
setupHotbox();
// expose editText()
this.editText = editText;
// listen the fsm changes, make action.
@ -32,6 +34,8 @@ define(function (require, exports, module) {
fsm.when('* -> input', enterInputMode);
// when exited, commit or exit depends on the exit reason
fsm.when('input -> *', function (exit, enter, reason) {
if (minder._status === 'readonly') return;
switch (reason) {
case 'input-cancel':
return exitInputMode();
@ -43,11 +47,15 @@ define(function (require, exports, module) {
});
// lost focus to commit
receiver.onblur(function (e) {
if (minder._status === 'readonly') return;
if (fsm.state() == 'input') {
fsm.jump('normal', 'input-commit');
}
});
minder.on('beforemousedown', function () {
if (minder._status === 'readonly') return;
if (fsm.state() == 'input') {
fsm.jump('normal', 'input-commit');
}
@ -69,9 +77,14 @@ define(function (require, exports, module) {
minder.on('layoutallfinish viewchange viewchanged selectionchange', function (e) {
// viewchange event is too frequenced, lazy it
if (e.type == 'viewchange' && fsm.state() != 'input') return;
updatePosition();
if (minder.getStatus() !== 'readonly') {
updatePosition();
}
});
updatePosition();
if (minder.getStatus() !== 'readonly') {
updatePosition();
}
}
// edit entrance in hotbox
function setupHotbox() {
@ -121,6 +134,8 @@ define(function (require, exports, module) {
* @Date 2015-12-2
*/
function enterInputMode() {
if (minder._status === 'readonly') return;
var node = minder.getSelectedNode();
if (node) {
var fontSize = node.getData('font-size') || node.getStyle('font-size');
@ -141,6 +156,13 @@ define(function (require, exports, module) {
* @Date: 2015.9.16
*/
function commitInputText(textNodes) {
if (minder._status === 'readonly') return;
var node = minder.getSelectedNode();
if (!node) {
return;
}
var text = '';
var TAB_CHAR = '\t',
ENTER_CHAR = '\n',
@ -282,6 +304,8 @@ define(function (require, exports, module) {
* @Date: 2015.9.16
*/
function commitInputNode(node, text) {
if (minder._status === 'readonly') return;
try {
minder.decodeData('text', text).then(function (json) {
function importText(node, json, minder) {
@ -309,6 +333,8 @@ define(function (require, exports, module) {
}
}
function commitInputResult() {
if (minder._status === 'readonly') return;
/**
* @Desc: 进行如下处理：
* 根据用户的输入判断是否生成新的节点
@ -338,10 +364,14 @@ define(function (require, exports, module) {
}
}
function exitInputMode() {
if (minder._status === 'readonly') return;
receiverElement.classList.remove('input');
receiver.selectAll();
}
function updatePosition() {
if (minder._status === 'readonly') return;
var planed = updatePosition;
var focusNode = minder.getSelectedNode();
if (!focusNode) return;

19
packages/client/src/thirtypart/kityminder/kity-editor/runtime/jumping.js
View File

@ -48,18 +48,26 @@ define(function (require, exports, module) {
var receiverElement = receiver.element;
var hotbox = this.hotbox;
var compositionLock = false;
var that = this;
// normal -> *
receiver.listen('normal', function (e) {
if (minder._status === 'readonly') return;
// 为了防止处理进入edit模式而丢失处理的首字母,此时receiver必须为enable
receiver.enable();
// normal -> hotbox
if (e.is('Space')) {
// 非编辑模式
if (that.minder.getStatus() === 'readonly') {
return;
}
e.preventDefault();
// safari下Space触发hotbox,然而这时Space已在receiver上留下作案痕迹,因此抹掉
if (kity.Browser.safari) {
receiverElement.innerHTML = '';
}
return fsm.jump('hotbox', 'space-trigger');
}
@ -91,6 +99,8 @@ define(function (require, exports, module) {
// hotbox -> normal
receiver.listen('hotbox', function (e) {
if (minder._status === 'readonly') return;
receiver.disable();
e.preventDefault();
var handleResult = hotbox.dispatch(e);
@ -101,6 +111,8 @@ define(function (require, exports, module) {
// input => normal
receiver.listen('input', function (e) {
if (minder._status === 'readonly') return;
receiver.enable();
if (e.type == 'keydown') {
if (e.is('Enter')) {
@ -138,6 +150,8 @@ define(function (require, exports, module) {
container.addEventListener(
'mousedown',
function (e) {
if (minder._status === 'readonly') return;
if (e.button == MOUSE_RB) {
e.preventDefault();
}
@ -155,6 +169,8 @@ define(function (require, exports, module) {
container.addEventListener(
'mousewheel',
function (e) {
if (minder._status === 'readonly') return;
if (fsm.state() == 'hotbox') {
hotbox.active(Hotbox.STATE_IDLE);
fsm.jump('normal', 'mousemove-blur');
@ -164,12 +180,14 @@ define(function (require, exports, module) {
);
container.addEventListener('contextmenu', function (e) {
if (minder._status === 'readonly') return;
e.preventDefault();
});
container.addEventListener(
'mouseup',
function (e) {
if (minder._status === 'readonly') return;
if (fsm.state() != 'normal') {
return;
}
@ -186,6 +204,7 @@ define(function (require, exports, module) {
// 阻止热盒事件冒泡，在热盒正确执行前导致热盒关闭
hotbox.$element.addEventListener('mousedown', function (e) {
if (minder._status === 'readonly') return;
e.stopPropagation();
});
}

2
packages/client/src/tiptap/core/extensions/callout.ts
View File

@ -69,7 +69,7 @@ export const Callout = Node.create({
addInputRules() {
return [
wrappingInputRule({
find: /^\$callout $/,
find: /^\$callout\$$/,
type: this.type,
getAttributes: (match) => {
return { type: match[1] };

2
packages/client/src/tiptap/core/extensions/columns.ts
View File

@ -268,7 +268,7 @@ export const Columns = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$columns $/,
find: /^\$columns\$$/,
type: this.type,
getAttributes: () => {
return { type: 'left-right', columns: 2 };

2
packages/client/src/tiptap/core/extensions/countdown.ts
View File

@ -78,7 +78,7 @@ export const Countdown = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$countdown $/,
find: /^\$countdown\$$/,
type: this.type,
getAttributes: () => {
return { width: '100%' };

2
packages/client/src/tiptap/core/extensions/excalidraw.ts
View File

@ -103,7 +103,7 @@ export const Excalidraw = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$excalidraw $/,
find: /^\$excalidraw\$$/,
type: this.type,
getAttributes: () => {
return { width: '100%' };

12
packages/client/src/tiptap/core/extensions/flow.ts
View File

@ -12,6 +12,11 @@ export interface IFlowAttrs {
createUser?: IUser['id'];
}
interface IFlowOptions {
HTMLAttributes: Record<string, any>;
getCreateUserId: () => string | number;
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
flow: {
@ -20,7 +25,7 @@ declare module '@tiptap/core' {
}
}
export const Flow = Node.create({
export const Flow = Node.create<IFlowOptions>({
name: 'flow',
group: 'block',
selectable: true,
@ -55,6 +60,7 @@ export const Flow = Node.create({
HTMLAttributes: {
class: 'flow',
},
getCreateUserId: () => null,
};
},
@ -102,10 +108,10 @@ export const Flow = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$flow $/,
find: /^\$flow\$$/,
type: this.type,
getAttributes: () => {
return { width: '100%' };
return { width: '100%', defaultShowPicker: true, createUser: this.options.getCreateUserId() };
},
}),
];

2
packages/client/src/tiptap/core/extensions/iframe.ts
View File

@ -98,7 +98,7 @@ export const Iframe = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$iframe $/,
find: /^\$iframe\$$/,
type: this.type,
getAttributes: () => {
return { width: '100%' };

13
packages/client/src/tiptap/core/extensions/katex.ts
View File

@ -10,6 +10,11 @@ export type IKatexAttrs = {
createUser?: IUser['id'];
};
interface IKatexOptions {
HTMLAttributes: Record<string, any>;
getCreateUserId: () => string | number;
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
katex: {
@ -18,7 +23,7 @@ declare module '@tiptap/core' {
}
}
export const Katex = Node.create({
export const Katex = Node.create<IKatexOptions>({
name: 'katex',
group: 'block',
selectable: true,
@ -30,6 +35,7 @@ export const Katex = Node.create({
HTMLAttributes: {
class: 'katex',
},
getCreateUserId: () => null,
};
},
@ -72,8 +78,11 @@ export const Katex = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$katex $/,
find: /^\$katex\$$/,
type: this.type,
getAttributes: () => {
return { defaultShowPicker: true, createUser: this.options.getCreateUserId() };
},
}),
];
},

12
packages/client/src/tiptap/core/extensions/mind.ts
View File

@ -22,6 +22,11 @@ export interface IMindAttrs {
zoom?: number;
}
interface IMindOptions {
HTMLAttributes: Record<string, any>;
getCreateUserId: () => string | number;
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
mind: {
@ -30,7 +35,7 @@ declare module '@tiptap/core' {
}
}
export const Mind = Node.create({
export const Mind = Node.create<IMindOptions>({
name: 'mind',
group: 'block',
selectable: true,
@ -66,6 +71,7 @@ export const Mind = Node.create({
HTMLAttributes: {
class: 'mind',
},
getCreateUserId: () => null,
};
},
@ -113,10 +119,10 @@ export const Mind = Node.create({
addInputRules() {
return [
nodeInputRule({
find: /^\$mind $/,
find: /^\$mind\$$/,
type: this.type,
getAttributes: () => {
return { width: '100%' };
return { width: '100%', defaultShowPicker: true, createUser: this.options.getCreateUserId() };
},
}),
];

110
packages/client/src/tiptap/core/extensions/placeholder.ts
View File

@ -1,3 +1,109 @@
import BuiltInPlaceholder from '@tiptap/extension-placeholder';
import { Editor, Extension } from '@tiptap/core';
import { Node as ProsemirrorNode } from 'prosemirror-model';
import { Plugin } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
export const Placeholder = BuiltInPlaceholder;
export interface PlaceholderOptions {
emptyEditorClass: string;
emptyNodeClass: string;
placeholder: ((PlaceholderProps: { editor: Editor; node: ProsemirrorNode; pos: number }) => string) | string;
showOnlyWhenEditable: boolean;
showOnlyCurrent: boolean;
includeChildren: boolean;
}
export const Placeholder = Extension.create<PlaceholderOptions>({
name: 'placeholder',
addOptions() {
return {
emptyEditorClass: 'is-editor-empty',
emptyNodeClass: 'is-empty',
placeholder: 'Write something …',
showOnlyWhenEditable: true,
showOnlyCurrent: true,
includeChildren: false,
};
},
addStorage() {
return new Map();
},
addProseMirrorPlugins() {
return [
new Plugin({
props: {
decorations: ({ doc, selection }) => {
const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
const { anchor } = selection;
const decorations: Decoration[] = [];
if (!active) {
return;
}
doc.descendants((node, pos) => {
const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
const isEmpty = !node.isLeaf && !node.childCount;
if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
const classes = [this.options.emptyNodeClass];
if (this.editor.isEmpty) {
classes.push(this.options.emptyEditorClass);
}
const start = pos;
const end = pos + node.nodeSize;
let placeholder = '';
if (this.editor.isEditable) {
const key = `${start}-${end}`;
if (!this.editor.storage[this.name].has(key)) {
this.editor.storage[this.name].set(
key,
typeof this.options.placeholder === 'function'
? this.options.placeholder({
editor: this.editor,
node,
pos,
})
: this.options.placeholder
);
}
placeholder = this.editor.storage[this.name].get(key);
setTimeout(() => {
this.editor.storage[this.name].delete(key);
}, 500);
} else {
placeholder =
typeof this.options.placeholder === 'function'
? this.options.placeholder({
editor: this.editor,
node,
pos,
})
: this.options.placeholder;
}
const decoration = Decoration.node(start, end, {
'class': classes.join(' '),
'data-placeholder': placeholder,
});
decorations.push(decoration);
}
return this.options.includeChildren;
});
return DecorationSet.create(doc, decorations);
},
},
}),
];
},
});

6
packages/client/src/tiptap/core/extensions/quick-insert.ts
View File

@ -8,7 +8,7 @@ import { insertMenuLRUCache, QUICK_INSERT_COMMANDS, transformToCommands } from '
import { MenuList } from 'tiptap/core/wrappers/menu-list';
export const QuickInsertPluginKey = new PluginKey('quickInsert');
const extensionName = 'quickInsert'
const extensionName = 'quickInsert';
export const QuickInsert = Node.create({
name: extensionName,
@ -63,8 +63,8 @@ export const QuickInsert = Node.create({
top: 0,
right: 0,
bottom: 0,
}
}
},
};
},
}).configure({
suggestion: {

8
packages/client/src/tiptap/core/menus/excalidraw/modal.tsx
View File

@ -32,7 +32,6 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
);
const renderExcalidraw = useCallback((app) => {
console.log('render', app);
setTimeout(() => {
app.refresh();
});
@ -54,7 +53,14 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
return;
}
/**
* FIXME: 绘图更新后会滚动 dom 到顶点，原因未知，在此 hack 修复下！
*/
const currentScrollTop = document.querySelector('main#js-tocs-container')?.scrollTop;
editor.chain().focus().setExcalidraw({ data }).run();
setTimeout(() => {
document.querySelector('main#js-tocs-container').scrollTop = currentScrollTop;
});
toggleVisible(false);
}, [Excalidraw, editor, data, toggleVisible]);

2
packages/client/src/tiptap/core/menus/katex/bubble.tsx
View File

@ -43,7 +43,7 @@ export const KatexBubbleMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
useEffect(() => {
if (visible) {
setTimeout(() => ref.current?.focus(), 100);
setTimeout(() => ref.current?.focus(), 200);
}
}, [visible]);

33
packages/client/src/tiptap/core/menus/mind/constant.ts
View File

@ -1,3 +1,36 @@
const getProgressTitle = (index) => {
switch (index) {
case 0:
return '移除进度';
case 1:
return '未开始';
case 9:
return '全部完成';
default:
return '完成' + (index - 1) + '/8';
}
};
export const PROGRESSES = Array.from({ length: 10 }, (_, i) => {
return {
text: getProgressTitle(i),
value: i,
};
});
export const PRIORITIES = [
{
text: '移除优先级',
value: 0,
},
...Array.from({ length: 9 }, (_, i) => {
return {
text: `P${i + 1}`,
value: i + 1,
};
}),
];
export const TEMPLATES = [
{
label: '经典',

14
packages/client/src/tiptap/core/menus/mind/modal.tsx
View File

@ -46,7 +46,14 @@ export const MindSettingModal: React.FC<IProps> = ({ editor }) => {
return;
}
const data = mind.exportJson();
/**
* FIXME: 百度脑图更新后会滚动 dom 到顶点，原因未知，在此 hack 修复下！
*/
const currentScrollTop = document.querySelector('main#js-tocs-container')?.scrollTop;
editor.chain().focus().setMind({ data }).run();
setTimeout(() => {
document.querySelector('main#js-tocs-container').scrollTop = currentScrollTop;
});
toggleVisible(false);
}, [editor, toggleVisible, mind]);
@ -65,6 +72,12 @@ export const MindSettingModal: React.FC<IProps> = ({ editor }) => {
};
}, [editor, toggleVisible]);
useEffect(() => {
if (!visible && mind) {
mind.destroy();
}
}, [visible, mind]);
return (
<Modal
centered
@ -75,6 +88,7 @@ export const MindSettingModal: React.FC<IProps> = ({ editor }) => {
onOk={save}
okText="保存"
cancelText="退出"
motion={false}
>
<div
style={{

39
packages/client/src/tiptap/core/menus/mind/toolbar/bgcolor.tsx 100644
View File

@ -0,0 +1,39 @@
import { IconMark } from '@douyinfe/semi-icons';
import { Button, Tooltip } from '@douyinfe/semi-ui';
import { ColorPicker } from 'components/color-picker';
export const BgColor = ({ bgColor, selectedNode, setBackgroundColor }) => {
return (
<ColorPicker
onSetColor={(color) => {
setBackgroundColor(color);
}}
>
<Tooltip content="背景色" zIndex={10000}>
<Button
disabled={!selectedNode}
type="tertiary"
theme={bgColor ? 'light' : 'borderless'}
icon={
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<IconMark />
<span
style={{
width: 12,
height: 2,
backgroundColor: bgColor,
}}
></span>
</div>
}
/>
</Tooltip>
</ColorPicker>
);
};

39
packages/client/src/tiptap/core/menus/mind/toolbar/font-color.tsx 100644
View File

@ -0,0 +1,39 @@
import { IconFont } from '@douyinfe/semi-icons';
import { Button, Tooltip } from '@douyinfe/semi-ui';
import { ColorPicker } from 'components/color-picker';
export const FontColor = ({ selectedNode, setFontColor, textColor }) => {
return (
<ColorPicker
onSetColor={(color) => {
setFontColor(color);
}}
>
<Tooltip content="文本色" zIndex={10000}>
<Button
disabled={!selectedNode}
type="tertiary"
theme={textColor ? 'light' : 'borderless'}
icon={
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<IconFont />
<span
style={{
width: 12,
height: 2,
backgroundColor: textColor,
}}
></span>
</div>
}
/>
</Tooltip>
</ColorPicker>
);
};

33
packages/client/src/tiptap/core/menus/mind/toolbar/help.tsx 100644
View File

@ -0,0 +1,33 @@
import { IconHelpCircle } from '@douyinfe/semi-icons';
import { Button, Descriptions, Popover } from '@douyinfe/semi-ui';
import styles from './index.module.scss';
const HELP_MESSAGE = [
{ key: '新增同级节点', value: 'Enter 键' },
{ key: '新增子节点', value: 'Tab 键' },
{ key: '编辑节点文字', value: '双击节点' },
{ key: '编辑节点菜单', value: '在节点右键' },
];
const HELP_MESSAGE_STYLE = {
width: '200px',
};
export const Help = () => {
return (
<Popover
zIndex={10000}
spacing={10}
style={{ padding: 12, overflow: 'hidden' }}
position="bottomLeft"
content={
<section className={styles.sectionWrap}>
<Descriptions data={HELP_MESSAGE} style={HELP_MESSAGE_STYLE} />
</section>
}
>
<Button size="small" theme="borderless" type="tertiary" icon={<IconHelpCircle />} />
</Popover>
);
};

4
packages/client/src/tiptap/core/menus/mind/toolbar/image.tsx
View File

@ -1,4 +1,4 @@
import { IconFile } from '@douyinfe/semi-icons';
import { IconImage } from '@douyinfe/semi-icons';
import { Button, Dropdown, Form, Tooltip } from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { Upload } from 'components/upload';
@ -48,7 +48,7 @@ export const Image = ({ disabled, image, setImage }) => {
>
<span style={{ display: 'inline-block' }}>
<Tooltip content="设置图片" zIndex={10000}>
<Button disabled={disabled} type="tertiary" theme={image ? 'light' : 'borderless'} icon={<IconFile />} />
<Button disabled={disabled} type="tertiary" theme={image ? 'light' : 'borderless'} icon={<IconImage />} />
</Tooltip>
</span>
</Dropdown>

387
packages/client/src/tiptap/core/menus/mind/toolbar/index.tsx
View File

@ -1,108 +1,188 @@
import { IconBold, IconFont, IconHelpCircle, IconMark } from '@douyinfe/semi-icons';
import { Button, Descriptions, Popover, Space, Tooltip, Typography } from '@douyinfe/semi-ui';
import cls from 'classnames';
import { ColorPicker } from 'components/color-picker';
import { IconDrawBoard, IconMindCenter, IconStructure } from 'components/icons';
import { IconBold, IconRedo, IconUndo } from '@douyinfe/semi-icons';
import { Button, Space, Tooltip } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { IconMindCenter } from 'components/icons';
import { IconZoomIn, IconZoomOut } from 'components/icons';
import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useState } from 'react';
import { clamp } from 'tiptap/prose-utils';
import { MAX_ZOOM, MIN_ZOOM, TEMPLATES, THEMES, ZOOM_STEP } from '../constant';
import { BgColor } from './bgcolor';
import { FontColor } from './font-color';
import { Help } from './help';
import { Image } from './image';
import styles from './index.module.scss';
import { Link } from './link';
const { Text } = Typography;
const HELP_MESSAGE = [
{ key: '新增同级节点', value: 'Enter 键' },
{ key: '新增子节点', value: 'Tab 键' },
{ key: '编辑节点文字', value: '双击节点' },
{ key: '编辑节点菜单', value: '在节点右键' },
];
const HELP_MESSAGE_STYLE = {
width: '200px',
};
import { Priority } from './priority';
import { Progress } from './progress';
import { Template } from './template';
import { Theme } from './theme';
export const Toolbar = ({ mind }) => {
const [template, setTemplateState] = useState('');
const [theme, setThemeState] = useState('');
const [node, setNode] = useState(null);
const [node, setNode] = useState(null); // 当前选择节点
const [hasUndo, toggleHasUndo] = useToggle(false);
const [hasRedo, toggleHasRedo] = useToggle(false);
const [isBold, toggleIsBold] = useToggle(false);
const [textColor, setTextColor] = useState('');
const [bgColor, setBgColor] = useState('');
const [link, setLink] = useState('');
const [image, setImage] = useState('');
const setTemplate = useCallback(
(template) => {
mind.execCommand('template', template);
},
[mind]
);
const [template, setTemplateState] = useState('');
const [theme, setThemeState] = useState('');
const setTheme = useCallback(
(theme) => {
mind.execCommand('theme', theme);
},
[mind]
);
const setZoom = useCallback(
(type: 'minus' | 'plus') => {
return () => {
if (!mind) return;
const currentZoom = mind.getZoomValue();
const nextZoom = clamp(
type === 'minus' ? currentZoom - ZOOM_STEP : currentZoom + ZOOM_STEP,
MIN_ZOOM,
MAX_ZOOM
);
mind.zoom(nextZoom);
};
},
[mind]
);
const setCenter = useCallback(() => {
/**
* 撤销
*/
const undo = useCallback(() => {
if (!mind) return;
mind.execCommand('camera');
if (mind.editor.history.hasUndo()) {
mind.editor.history.undo();
}
}, [mind]);
/**
* 重做
*/
const redo = useCallback(() => {
if (!mind) return;
if (mind.editor.history.hasRedo()) {
mind.editor.history.redo();
}
}, [mind]);
/**
* 加粗
*/
const toggleBold = useCallback(() => {
if (!mind) return;
mind.execCommand('Bold');
}, [mind]);
/**
* 设置文字颜色
*/
const setFontColor = useCallback(
(color) => {
if (!mind) return;
mind.execCommand('ForeColor', color);
},
[mind]
);
/**
* 设置背景色
*/
const setBackgroundColor = useCallback(
(color) => {
if (!mind) return;
mind.execCommand('Background', color);
},
[mind]
);
/**
* 设置链接
*/
const setHyperLink = useCallback(
(url) => {
if (!mind) return;
mind.execCommand('HyperLink', url);
},
[mind]
);
/**
* 插入图片
*/
const insertImage = useCallback(
(url) => {
if (!mind) return;
mind.execCommand('Image', url);
},
[mind]
);
/**
* 设置进度
*/
const setProgress = useCallback(
(value) => () => {
if (!mind) return;
const node = mind.getSelectedNode();
if (!node) return;
mind.execCommand('progress', value);
},
[mind]
);
/**
* 设置优先级
*/
const setPriority = useCallback(
(value) => () => {
if (!mind) return;
const node = mind.getSelectedNode();
if (!node) return;
mind.execCommand('priority', value);
},
[mind]
);
/**
* 模板
*/
const setTemplate = useCallback(
(template) => {
if (!mind) return;
mind.execCommand('template', template);
},
[mind]
);
/**
* 主题
*/
const setTheme = useCallback(
(theme) => {
if (!mind) return;
mind.execCommand('theme', theme);
},
[mind]
);
/**
* 缩放
*/
const setZoom = useCallback(
(type: 'minus' | 'plus') => {
return () => {
if (!mind) return;
mind.execCommand(type === 'minus' ? 'zoomOut' : 'zoomIn');
};
},
[mind]
);
/**
* 定位到根节点
*/
const setCenter = useCallback(() => {
if (!mind) return;
mind.execCommand('camera', mind.getRoot(), 600);
}, [mind]);
useEffect(() => {
if (!mind) return;
@ -126,6 +206,9 @@ export const Toolbar = ({ mind }) => {
setNode(null);
}
toggleHasUndo(mind.editor.history.hasUndo());
toggleHasRedo(mind.editor.history.hasRedo());
setTemplateState(mind.queryCommandValue('Template'));
setThemeState(mind.queryCommandValue('Theme'));
toggleIsBold(isBold);
@ -140,68 +223,53 @@ export const Toolbar = ({ mind }) => {
return () => {
mind.off('interactchange', handler);
};
}, [mind, toggleIsBold, setBackgroundColor]);
}, [mind, toggleHasUndo, toggleHasRedo, toggleIsBold, setBackgroundColor]);
return (
<Space>
<Popover
zIndex={10000}
spacing={10}
style={{ padding: '0 12px 12px', overflow: 'hidden' }}
position="bottomLeft"
content={
<section className={styles.sectionWrap}>
<Text type="secondary">布局</Text>
<div>
<ul>
{TEMPLATES.map((item) => {
return (
<li
key={item.label}
className={cls(template === item.value && styles.active)}
onClick={() => setTemplate(item.value)}
>
<Text>{item.label}</Text>
</li>
);
})}
</ul>
</div>
</section>
}
>
<Button icon={<IconStructure />} type="tertiary" theme="borderless" size="small" />
</Popover>
<Tooltip content="撤销">
<Button
onClick={undo}
icon={<IconUndo />}
disabled={!hasUndo}
theme={hasUndo ? 'light' : 'borderless'}
type="tertiary"
/>
</Tooltip>
<Popover
zIndex={10000}
spacing={10}
style={{ padding: '0 12px 12px', overflow: 'hidden' }}
position="bottomLeft"
content={
<section className={styles.sectionWrap}>
<Text type="secondary">主题</Text>
<div>
<ul>
{THEMES.map((item) => {
return (
<li
key={item.label}
className={cls(theme === item.value && styles.active)}
style={item.style || {}}
onClick={() => setTheme(item.value)}
>
{item.label}
</li>
);
})}
</ul>
</div>
</section>
}
>
<Button icon={<IconDrawBoard />} type="tertiary" theme="borderless" size="small" />
</Popover>
<Tooltip content="重做">
<Button
onClick={redo}
icon={<IconRedo />}
disabled={!hasRedo}
theme={hasRedo ? 'light' : 'borderless'}
type="tertiary"
/>
</Tooltip>
<Divider />
<Tooltip content="加粗" zIndex={10000}>
<Button
disabled={!node}
theme={isBold ? 'light' : 'borderless'}
type="tertiary"
onClick={toggleBold}
icon={<IconBold />}
/>
</Tooltip>
<FontColor selectedNode={node} textColor={textColor} setFontColor={setFontColor} />
<BgColor selectedNode={node} bgColor={bgColor} setBackgroundColor={setBackgroundColor} />
<Link disabled={!node} link={link} setLink={setHyperLink} />
<Image disabled={!node} image={image} setImage={insertImage} />
<Divider />
<Progress selectedNode={node} setProgress={setProgress} />
<Priority selectedNode={node} setPriority={setPriority} />
<Divider />
<Tooltip content="居中">
<Button
@ -233,97 +301,14 @@ export const Toolbar = ({ mind }) => {
/>
</Tooltip>
<Tooltip content="加粗" zIndex={10000}>
<Button
disabled={!node}
type="tertiary"
theme={isBold ? 'light' : 'borderless'}
onClick={toggleBold}
icon={<IconBold />}
/>
</Tooltip>
<Divider />
<ColorPicker
onSetColor={(color) => {
setFontColor(color);
}}
>
<Tooltip content="文本色" zIndex={10000}>
<Button
disabled={!node}
type="tertiary"
theme={textColor ? 'light' : 'borderless'}
icon={
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<IconFont />
<span
style={{
width: 12,
height: 2,
backgroundColor: textColor,
}}
></span>
</div>
}
/>
</Tooltip>
</ColorPicker>
<Template template={template} setTemplate={setTemplate} />
<Theme theme={theme} setTheme={setTheme} />
<ColorPicker
onSetColor={(color) => {
setBackgroundColor(color);
}}
>
<Tooltip content="背景色" zIndex={10000}>
<Button
disabled={!node}
type="tertiary"
theme={bgColor ? 'light' : 'borderless'}
icon={
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<IconMark />
<span
style={{
width: 12,
height: 2,
backgroundColor: bgColor,
}}
></span>
</div>
}
/>
</Tooltip>
</ColorPicker>
<Divider />
<Link disabled={!node} link={link} setLink={setHyperLink} />
<Image disabled={!node} image={image} setImage={insertImage} />
<Popover
zIndex={10000}
spacing={10}
style={{ padding: 12, overflow: 'hidden' }}
position="bottomLeft"
content={
<section className={styles.sectionWrap}>
<Descriptions data={HELP_MESSAGE} style={HELP_MESSAGE_STYLE} />
</section>
}
>
<Button size="small" theme="borderless" type="tertiary" icon={<IconHelpCircle />} />
</Popover>
<Help />
</Space>
);
};

29
packages/client/src/tiptap/core/menus/mind/toolbar/priority.tsx 100644
View File

@ -0,0 +1,29 @@
import { IconClock } from '@douyinfe/semi-icons';
import { Button, Dropdown, Tooltip } from '@douyinfe/semi-ui';
import { PRIORITIES } from '../constant';
export const Priority = ({ selectedNode, setPriority }) => {
return (
<Dropdown
trigger="click"
render={
<Dropdown.Menu>
{PRIORITIES.map((item) => {
return (
<Dropdown.Item key={item.value} onClick={setPriority(item.value)}>
{item.text}
</Dropdown.Item>
);
})}
</Dropdown.Menu>
}
>
<span>
<Tooltip content="优先级" zIndex={10000}>
<Button size="small" theme="borderless" type="tertiary" disabled={!selectedNode} icon={<IconClock />} />
</Tooltip>
</span>
</Dropdown>
);
};

29
packages/client/src/tiptap/core/menus/mind/toolbar/progress.tsx 100644
View File

@ -0,0 +1,29 @@
import { IconDuration } from '@douyinfe/semi-icons';
import { Button, Dropdown, Tooltip } from '@douyinfe/semi-ui';
import { PROGRESSES } from '../constant';
export const Progress = ({ selectedNode, setProgress }) => {
return (
<Dropdown
trigger="click"
render={
<Dropdown.Menu>
{PROGRESSES.map((progress) => {
return (
<Dropdown.Item key={progress.value} onClick={setProgress(progress.value)}>
{progress.text}
</Dropdown.Item>
);
})}
</Dropdown.Menu>
}
>
<span>
<Tooltip content="进度" zIndex={10000}>
<Button size="small" theme="borderless" type="tertiary" disabled={!selectedNode} icon={<IconDuration />} />
</Tooltip>
</span>
</Dropdown>
);
};

41
packages/client/src/tiptap/core/menus/mind/toolbar/template.tsx 100644
View File

@ -0,0 +1,41 @@
import { Button, Popover, Typography } from '@douyinfe/semi-ui';
import cls from 'classnames';
import { IconStructure } from 'components/icons';
import { TEMPLATES } from '../constant';
import styles from './index.module.scss';
const { Text } = Typography;
export const Template = ({ template, setTemplate }) => {
return (
<Popover
zIndex={10000}
spacing={10}
style={{ padding: '0 12px 12px', overflow: 'hidden' }}
position="bottomLeft"
content={
<section className={styles.sectionWrap}>
<Text type="secondary">布局</Text>
<div>
<ul>
{TEMPLATES.map((item) => {
return (
<li
key={item.label}
className={cls(template === item.value && styles.active)}
onClick={() => setTemplate(item.value)}
>
<Text>{item.label}</Text>
</li>
);
})}
</ul>
</div>
</section>
}
>
<Button icon={<IconStructure />} type="tertiary" theme="borderless" size="small" />
</Popover>
);
};

42
packages/client/src/tiptap/core/menus/mind/toolbar/theme.tsx 100644
View File

@ -0,0 +1,42 @@
import { Button, Popover, Typography } from '@douyinfe/semi-ui';
import cls from 'classnames';
import { IconDrawBoard } from 'components/icons';
import { THEMES } from '../constant';
import styles from './index.module.scss';
const { Text } = Typography;
export const Theme = ({ theme, setTheme }) => {
return (
<Popover
zIndex={10000}
spacing={10}
style={{ padding: '0 12px 12px', overflow: 'hidden' }}
position="bottomLeft"
content={
<section className={styles.sectionWrap}>
<Text type="secondary">主题</Text>
<div>
<ul>
{THEMES.map((item) => {
return (
<li
key={item.label}
className={cls(theme === item.value && styles.active)}
style={item.style || {}}
onClick={() => setTheme(item.value)}
>
{item.label}
</li>
);
})}
</ul>
</div>
</section>
}
>
<Button icon={<IconDrawBoard />} type="tertiary" theme="borderless" size="small" />
</Popover>
);
};

12
packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
View File

@ -3,7 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { IconMind } from 'components/icons';
import { Resizeable } from 'components/resizeable';
import deepEqual from 'deep-equal';
import { useToggle } from 'hooks/use-toggle';
import React from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
@ -15,7 +17,7 @@ const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
export const _ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
const exportToSvgRef = useRef(null);
const isEditable = editor.isEditable;
const isActive = editor.isActive(Excalidraw.name);
@ -111,3 +113,11 @@ export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
</NodeViewWrapper>
);
};
export const ExcalidrawWrapper = React.memo(_ExcalidrawWrapper, (prevProps, nextProps) => {
if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
return true;
}
return false;
});

14
packages/client/src/tiptap/core/wrappers/flow/index.tsx
View File

@ -3,7 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable';
import deepEqual from 'deep-equal';
import { useToggle } from 'hooks/use-toggle';
import React from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { load, renderXml } from 'thirtypart/diagram';
@ -15,7 +17,7 @@ import styles from './index.module.scss';
const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
export const FlowWrapper = ({ editor, node, updateAttributes }) => {
export const _FlowWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable;
const isActive = editor.isActive(Flow.name);
const { width: maxWidth } = getEditorContainerDOMSize(editor);
@ -81,7 +83,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const onViewportChange = useCallback(
(visible) => {
if (visible) {
if (visible && !$graph.current) {
toggleVisible(true);
}
},
@ -137,3 +139,11 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
</NodeViewWrapper>
);
};
export const FlowWrapper = React.memo(_FlowWrapper, (prevProps, nextProps) => {
if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
return true;
}
return false;
});

20
packages/client/src/tiptap/core/wrappers/mind/index.tsx
View File

@ -6,10 +6,9 @@ import { Resizeable } from 'components/resizeable';
import { Tooltip } from 'components/tooltip';
import deepEqual from 'deep-equal';
import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { load, renderMind } from 'thirtypart/kityminder';
import { Mind } from 'tiptap/core/extensions/mind';
import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant';
import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils';
@ -19,10 +18,9 @@ const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
export const MindWrapper = ({ editor, node, updateAttributes }) => {
export const _MindWrapper = ({ editor, node, updateAttributes }) => {
const $mind = useRef(null);
const isEditable = editor.isEditable;
const isActive = editor.isActive(Mind.name);
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const { data, width, height } = node.attrs;
const [visible, toggleVisible] = useToggle(false);
@ -80,7 +78,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
const onViewportChange = useCallback(
(visible) => {
if (visible) {
if (visible && !$mind.current) {
toggleVisible(true);
}
},
@ -108,7 +106,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
}, [width, height, setCenter]);
return (
<NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
<NodeViewWrapper className={cls(styles.wrap)}>
<VisibilitySensor onChange={onViewportChange}>
<Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
<div
@ -123,7 +121,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
{loading && <Spin spinning style={INHERIT_SIZE_STYLE}></Spin>}
{!loading && !error && visible && (
{!loading && !error && (
<div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
)}
@ -165,3 +163,11 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
</NodeViewWrapper>
);
};
export const MindWrapper = React.memo(_MindWrapper, (prevProps, nextProps) => {
if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
return true;
}
return false;
});

13
packages/client/src/tiptap/core/wrappers/status/index.tsx
View File

@ -4,7 +4,7 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { useUser } from 'data/user';
import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styles from './index.module.scss';
@ -24,14 +24,15 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
const { user } = useUser();
const ref = useRef<HTMLInputElement>();
const [visible, toggleVisible] = useToggle(false);
const [currentText, setCurrentText] = useState(text);
const content = useMemo(
() => (
<Tag className="render-wrapper" style={{ backgroundColor: bgcolor, border: `1px solid ${borderColor}` }}>
<span style={{ color: currentTextColor }}>{text || '点击设置状态'}</span>
<span style={{ color: currentTextColor }}>{currentText || '点击设置状态'}</span>
</Tag>
),
[bgcolor, borderColor, currentTextColor, text]
[bgcolor, borderColor, currentTextColor, currentText]
);
const onVisibleChange = useCallback(
@ -64,8 +65,10 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
useEffect(() => {
if (visible) {
ref.current?.focus();
} else {
updateAttributes({ text: currentText });
}
}, [visible]);
}, [visible, updateAttributes, currentText]);
return (
<NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
@ -78,7 +81,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
content={
<div style={{ width: 184, height: 65 }}>
<div style={{ marginBottom: 8 }}>
<Input ref={ref} placeholder="输入状态" onChange={(v) => updateAttributes({ text: v })} />
<Input ref={ref} placeholder="输入状态" value={currentText} onChange={setCurrentText} />
</div>
<Space>
{STATUS_COLORS.map((color) => {

26
packages/client/src/tiptap/editor/collaboration/kit.ts
View File

@ -1,5 +1,5 @@
import { Toast } from '@douyinfe/semi-ui';
import scrollIntoView from 'scroll-into-view-if-needed';
import { safeJSONParse } from 'helpers/json';
// 自定义节点扩展
import { Attachment } from 'tiptap/core/extensions/attachment';
import { BackgroundColor } from 'tiptap/core/extensions/background-color';
@ -78,6 +78,16 @@ const DocumentWithTitle = Document.extend({
export { Document };
const placeholders = [
'输入 / 唤起更多',
'使用 markdown 语法进行输入',
'输入 @ 来提及他人',
'输入 : 来插入表情',
'你知道吗？输入 $katex 然后在输入一个 $ 就可以快速插入数学公式，其他节点操作类似哦',
];
const getCreateUserId = () => safeJSONParse(window.localStorage.getItem('user')).id;
export const CollaborationKit = [
Paragraph,
Placeholder.configure({
@ -88,7 +98,7 @@ export const CollaborationKit = [
if (!editor.isEditable) return;
return '输入 / 唤起更多';
return placeholders[~~(Math.random() * placeholders.length)];
},
showOnlyCurrent: false,
showOnlyWhenEditable: false,
@ -152,11 +162,17 @@ export const CollaborationKit = [
DocumentChildren,
DocumentReference,
Emoji,
Flow,
Flow.configure({
getCreateUserId,
}),
Iframe,
Katex,
Katex.configure({
getCreateUserId,
}),
Mention,
Mind,
Mind.configure({
getCreateUserId,
}),
QuickInsert,
SearchNReplace,
Status,