From eee90f1a5c23a3474e752427e0012f4ce5120704 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 4 Aug 2022 19:18:45 +0800 Subject: [PATCH 01/95] feat: improved clipboard event determination conditions --- .../src/editor/clipboard/browser-clipboard.ts | 31 ++++++++++++------- .../src/editor/clipboard/clipboard-parse.ts | 6 ++-- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts index eefca42b0..b3dab25ca 100644 --- a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts +++ b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts @@ -17,6 +17,18 @@ import { MarkdownParser } from './markdown-parse'; // todo needs to be a switch const support_markdown_paste = true; +const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; + +const shouldHandlerContinue = (event: Event, editor: Editor) => { + if (event.defaultPrevented) { + return false; + } + if (filterNodes.includes((event.target as HTMLElement)?.tagName)) { + return false; + } + + return editor.selectionManager.currentSelectInfo.type !== 'None'; +}; enum ClipboardAction { COPY = 'copy', @@ -72,8 +84,7 @@ class BrowserClipboard { } private handle_copy(e: Event) { - //@ts-ignore - if (e.defaultPrevented || e.target.nodeName === 'INPUT') { + if (!shouldHandlerContinue(e, this.editor)) { return; } @@ -84,33 +95,31 @@ class BrowserClipboard { } private handle_cut(e: Event) { - //@ts-ignore - if (e.defaultPrevented || e.target.nodeName === 'INPUT') { + if (!shouldHandlerContinue(e, this.editor)) { return; } + this.dispatch_clipboard_event(ClipboardAction.CUT, e as ClipboardEvent); } private handle_paste(e: Event) { - //@ts-ignore TODO should be handled more scientifically here, whether to trigger the paste time, also need some whitelist mechanism - if (e.defaultPrevented || e.target.nodeName === 'INPUT') { + if (!shouldHandlerContinue(e, this.editor)) { return; } + e.stopPropagation(); const clipboardData = (e as ClipboardEvent).clipboardData; const isPureFile = this.is_pure_file_in_clipboard(clipboardData); - if (!isPureFile) { - this.paste_content(clipboardData); - } else { + if (isPureFile) { this.paste_file(clipboardData); + } else { + this.paste_content(clipboardData); } // this.editor.selectionManager // .getSelectInfo() // .then(selectionInfo => console.log(selectionInfo)); - - e.stopPropagation(); } private paste_content(clipboardData: any) { diff --git a/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts b/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts index a4a59bd2b..43b72ed6e 100644 --- a/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts +++ b/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts @@ -115,10 +115,8 @@ export default class ClipboardParse { const block_utils = this.editor.getView( ClipboardParse.block_types[i] ); - const blocks = - block_utils && - block_utils.html2block && - block_utils.html2block(el, this.parse_dom); + const blocks = block_utils?.html2block?.(el, this.parse_dom); + if (blocks) { return blocks; } From 75083f1c75bebec7c670513ee9c7854533245d83 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Tue, 9 Aug 2022 14:54:59 +0800 Subject: [PATCH 02/95] style: update code style --- .../src/editor/clipboard/browser-clipboard.ts | 300 +++++++++--------- 1 file changed, 148 insertions(+), 152 deletions(-) diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts index b3dab25ca..6c6d4ad03 100644 --- a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts +++ b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts @@ -16,10 +16,11 @@ import { import { MarkdownParser } from './markdown-parse'; // todo needs to be a switch -const support_markdown_paste = true; -const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; +const SUPPORT_MARKDOWN_PASTE = true; const shouldHandlerContinue = (event: Event, editor: Editor) => { + const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; + if (event.defaultPrevented) { return false; } @@ -36,96 +37,94 @@ enum ClipboardAction { PASTE = 'paste', } class BrowserClipboard { - private event_target: Element; - private hooks: HooksRunner; - private editor: Editor; - private clipboard_parse: ClipboardParse; - private markdown_parse: MarkdownParser; + private _eventTarget: Element; + private _hooks: HooksRunner; + private _editor: Editor; + private _clipboardParse: ClipboardParse; + private _markdownParse: MarkdownParser; - private static optimal_mime_type: string[] = [ + private static _optimalMimeType: string[] = [ OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, OFFICE_CLIPBOARD_MIMETYPE.HTML, OFFICE_CLIPBOARD_MIMETYPE.TEXT, ]; constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) { - this.event_target = eventTarget; - this.hooks = hooks; - this.editor = editor; - this.clipboard_parse = new ClipboardParse(editor); - this.markdown_parse = new MarkdownParser(); - this.initialize(); + this._eventTarget = eventTarget; + this._hooks = hooks; + this._editor = editor; + this._clipboardParse = new ClipboardParse(editor); + this._markdownParse = new MarkdownParser(); + this._initialize(); } public getClipboardParse() { - return this.clipboard_parse; + return this._clipboardParse; } - private initialize() { - this.handle_copy = this.handle_copy.bind(this); - this.handle_cut = this.handle_cut.bind(this); - this.handle_paste = this.handle_paste.bind(this); + private _initialize() { + this._handleCopy = this._handleCopy.bind(this); + this._handleCut = this._handleCut.bind(this); + this._handlePaste = this._handlePaste.bind(this); - document.addEventListener(ClipboardAction.COPY, this.handle_copy); - document.addEventListener(ClipboardAction.CUT, this.handle_cut); - document.addEventListener(ClipboardAction.PASTE, this.handle_paste); - this.event_target.addEventListener( + document.addEventListener(ClipboardAction.COPY, this._handleCopy); + document.addEventListener(ClipboardAction.CUT, this._handleCut); + document.addEventListener(ClipboardAction.PASTE, this._handlePaste); + this._eventTarget.addEventListener( ClipboardAction.COPY, - this.handle_copy + this._handleCopy ); - this.event_target.addEventListener( + this._eventTarget.addEventListener( ClipboardAction.CUT, - this.handle_cut + this._handleCut ); - this.event_target.addEventListener( + this._eventTarget.addEventListener( ClipboardAction.PASTE, - this.handle_paste + this._handlePaste ); } - private handle_copy(e: Event) { - if (!shouldHandlerContinue(e, this.editor)) { + private _handleCopy(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { return; } - this.dispatch_clipboard_event( - ClipboardAction.COPY, - e as ClipboardEvent - ); + this._dispatchClipboardEvent(ClipboardAction.COPY, e as ClipboardEvent); } - private handle_cut(e: Event) { - if (!shouldHandlerContinue(e, this.editor)) { + private _handleCut(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { return; } - this.dispatch_clipboard_event(ClipboardAction.CUT, e as ClipboardEvent); + this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent); } - private handle_paste(e: Event) { - if (!shouldHandlerContinue(e, this.editor)) { + private _handlePaste(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { return; } e.stopPropagation(); const clipboardData = (e as ClipboardEvent).clipboardData; - const isPureFile = this.is_pure_file_in_clipboard(clipboardData); + const isPureFile = this._isPureFileInClipboard(clipboardData); if (isPureFile) { - this.paste_file(clipboardData); + this._pasteFile(clipboardData); } else { - this.paste_content(clipboardData); + this._pasteContent(clipboardData); } - // this.editor.selectionManager + // this._editor.selectionManager // .getSelectInfo() // .then(selectionInfo => console.log(selectionInfo)); } - private paste_content(clipboardData: any) { + private _pasteContent(clipboardData: any) { const originClip: { data: any; type: any } = this.getOptimalClip( clipboardData ) as { data: any; type: any }; + const originTextClipData = clipboardData.getData( OFFICE_CLIPBOARD_MIMETYPE.TEXT ); @@ -133,19 +132,19 @@ class BrowserClipboard { let clipData = originClip['data']; if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { - clipData = this.excape_html(clipData); + clipData = this._excapeHtml(clipData); } switch (originClip['type']) { /** Protocol paste */ case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: - this.fire_paste_edit_action(clipData); + this._firePasteEditAction(clipData); break; case OFFICE_CLIPBOARD_MIMETYPE.HTML: - this.paste_html(clipData, originTextClipData); + this._pasteHtml(clipData, originTextClipData); break; case OFFICE_CLIPBOARD_MIMETYPE.TEXT: - this.paste_text(clipData, originTextClipData); + this._pasteText(clipData, originTextClipData); break; default: @@ -153,14 +152,14 @@ class BrowserClipboard { } } - private paste_html(clipData: any, originTextClipData: any) { - if (support_markdown_paste) { - const has_markdown = - this.markdown_parse.checkIfTextContainsMd(originTextClipData); - if (has_markdown) { + private _pasteHtml(clipData: any, originTextClipData: any) { + if (SUPPORT_MARKDOWN_PASTE) { + const hasMarkdown = + this._markdownParse.checkIfTextContainsMd(originTextClipData); + if (hasMarkdown) { try { const convertedDataObj = - this.markdown_parse.md2Html(originTextClipData); + this._markdownParse.md2Html(originTextClipData); if (convertedDataObj.isConverted) { clipData = convertedDataObj.text; } @@ -171,23 +170,23 @@ class BrowserClipboard { } } - const blocks = this.clipboard_parse.html2blocks(clipData); + const blocks = this._clipboardParse.html2blocks(clipData); this.insert_blocks(blocks); } - private paste_text(clipData: any, originTextClipData: any) { - const blocks = this.clipboard_parse.text2blocks(clipData); + private _pasteText(clipData: any, originTextClipData: any) { + const blocks = this._clipboardParse.text2blocks(clipData); this.insert_blocks(blocks); } - private async paste_file(clipboardData: any) { - const file = this.get_image_file(clipboardData); + private async _pasteFile(clipboardData: any) { + const file = this._getImageFile(clipboardData); if (file) { const result = await services.api.file.create({ - workspace: this.editor.workspace, + workspace: this._editor.workspace, file: file, }); - const block_info: ClipBlockInfo = { + const blockInfo: ClipBlockInfo = { type: 'image', properties: { image: { @@ -199,11 +198,11 @@ class BrowserClipboard { }, children: [] as ClipBlockInfo[], }; - this.insert_blocks([block_info]); + this.insert_blocks([blockInfo]); } } - private get_image_file(clipboardData: any) { + private _getImageFile(clipboardData: any) { const files = clipboardData.files; if (files && files[0] && files[0].type.indexOf('image') > -1) { return files[0]; @@ -211,7 +210,7 @@ class BrowserClipboard { return; } - private excape_html(data: any, onlySpace?: any) { + private _excapeHtml(data: any, onlySpace?: any) { if (!onlySpace) { // TODO: // data = string.htmlEscape(data); @@ -224,7 +223,7 @@ class BrowserClipboard { } public getOptimalClip(clipboardData: any) { - const mimeTypeArr = BrowserClipboard.optimal_mime_type; + const mimeTypeArr = BrowserClipboard._optimalMimeType; for (let i = 0; i < mimeTypeArr.length; i++) { const data = @@ -242,24 +241,23 @@ class BrowserClipboard { return ''; } - private is_pure_file_in_clipboard(clipboardData: DataTransfer) { + private _isPureFileInClipboard(clipboardData: DataTransfer) { const types = clipboardData.types; - const res = + return ( (types.length === 1 && types[0] === 'Files') || (types.length === 2 && (types.includes('text/plain') || types.includes('text/html')) && - types.includes('Files')); - - return res; + types.includes('Files')) + ); } - private async fire_paste_edit_action(clipboardData: any) { - const clip_info: InnerClipInfo = JSON.parse(clipboardData); - clip_info && this.insert_blocks(clip_info.data, clip_info.select); + private async _firePasteEditAction(clipboardData: any) { + const clipInfo: InnerClipInfo = JSON.parse(clipboardData); + clipInfo && this.insert_blocks(clipInfo.data, clipInfo.select); } - private can_edit_text(type: BlockFlavorKeys) { + private _canEditText(type: BlockFlavorKeys) { return ( type === Protocol.Block.Type.page || type === Protocol.Block.Type.text || @@ -282,144 +280,142 @@ class BrowserClipboard { } const cur_select_info = - await this.editor.selectionManager.getSelectInfo(); + await this._editor.selectionManager.getSelectInfo(); if (cur_select_info.blocks.length === 0) { return; } - let begin_index = 0; - const cur_node_id = + let beginIndex = 0; + const curNodeId = cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId; - let cur_block = await this.editor.getBlockById(cur_node_id); - const block_view = this.editor.getView(cur_block.type); + let curBlock = await this._editor.getBlockById(curNodeId); + const blockView = this._editor.getView(curBlock.type); if ( cur_select_info.type === 'Range' && - cur_block.type === 'text' && - block_view.isEmpty(cur_block) + curBlock.type === 'text' && + blockView.isEmpty(curBlock) ) { - cur_block.setType(blocks[0].type); - cur_block.setProperties(blocks[0].properties); - this.paste_children(cur_block, blocks[0].children); - begin_index = 1; + await curBlock.setType(blocks[0].type); + curBlock.setProperties(blocks[0].properties); + await this._pasteChildren(curBlock, blocks[0].children); + beginIndex = 1; } else if ( select?.type === 'Range' && cur_select_info.type === 'Range' && - this.can_edit_text(cur_block.type) && - this.can_edit_text(blocks[0].type) + this._canEditText(curBlock.type) && + this._canEditText(blocks[0].type) ) { if ( cur_select_info.blocks.length > 0 && cur_select_info.blocks[0].startInfo ) { - const start_info = cur_select_info.blocks[0].startInfo; - const end_info = cur_select_info.blocks[0].endInfo; - const cur_text_value = cur_block.getProperty('text').value; - const pre_cur_text_value = cur_text_value.slice( + const startInfo = cur_select_info.blocks[0].startInfo; + const endInfo = cur_select_info.blocks[0].endInfo; + const curTextValue = curBlock.getProperty('text').value; + const pre_curTextValue = curTextValue.slice( 0, - start_info.arrayIndex + startInfo.arrayIndex ); - const last_cur_text_value = cur_text_value.slice( - end_info.arrayIndex + 1 + const lastCurTextValue = curTextValue.slice( + endInfo.arrayIndex + 1 ); - const pre_text = cur_text_value[ - start_info.arrayIndex - ].text.substring(0, start_info.offset); - const last_text = cur_text_value[ - end_info.arrayIndex - ].text.substring(end_info.offset); + const preText = curTextValue[ + startInfo.arrayIndex + ].text.substring(0, startInfo.offset); + const lastText = curTextValue[ + endInfo.arrayIndex + ].text.substring(endInfo.offset); - let last_block: ClipBlockInfo = blocks[blocks.length - 1]; - if (!this.can_edit_text(last_block.type)) { - last_block = { type: 'text', children: [] }; - blocks.push(last_block); + let lastBlock: ClipBlockInfo = blocks[blocks.length - 1]; + if (!this._canEditText(lastBlock.type)) { + lastBlock = { type: 'text', children: [] }; + blocks.push(lastBlock); } - const last_values = last_block.properties?.text?.value; - last_text && last_values.push({ text: last_text }); - last_values.push(...last_cur_text_value); - last_block.properties = { - text: { value: last_values }, + const lastValues = lastBlock.properties?.text?.value; + lastText && lastValues.push({ text: lastText }); + lastValues.push(...lastCurTextValue); + lastBlock.properties = { + text: { value: lastValues }, }; - const insert_info = blocks[0].properties.text; - pre_text && pre_cur_text_value.push({ text: pre_text }); - pre_cur_text_value.push(...insert_info.value); - this.editor.blockHelper.setBlockBlur(cur_node_id); + const insertInfo = blocks[0].properties.text; + preText && pre_curTextValue.push({ text: preText }); + pre_curTextValue.push(...insertInfo.value); + this._editor.blockHelper.setBlockBlur(curNodeId); setTimeout(async () => { - const cur_block = await this.editor.getBlockById( - cur_node_id - ); - cur_block.setProperties({ - text: { value: pre_cur_text_value }, + const curBlock = await this._editor.getBlockById(curNodeId); + curBlock.setProperties({ + text: { value: pre_curTextValue }, }); - this.paste_children(cur_block, blocks[0].children); + await this._pasteChildren(curBlock, blocks[0].children); }, 0); - begin_index = 1; + beginIndex = 1; } } - for (let i = begin_index; i < blocks.length; i++) { - const next_block = await this.editor.createBlock(blocks[i].type); - next_block.setProperties(blocks[i].properties); - if (cur_block.type === 'page') { - cur_block.prepend(next_block); + for (let i = beginIndex; i < blocks.length; i++) { + const nextBlock = await this._editor.createBlock(blocks[i].type); + nextBlock.setProperties(blocks[i].properties); + if (curBlock.type === 'page') { + curBlock.prepend(nextBlock); } else { - cur_block.after(next_block); + curBlock.after(nextBlock); } - this.paste_children(next_block, blocks[i].children); - cur_block = next_block; + await this._pasteChildren(nextBlock, blocks[i].children); + curBlock = nextBlock; } } - private async paste_children(parent: AsyncBlock, children: any[]) { + private async _pasteChildren(parent: AsyncBlock, children: any[]) { for (let i = 0; i < children.length; i++) { - const next_block = await this.editor.createBlock(children[i].type); - next_block.setProperties(children[i].properties); - parent.append(next_block); - await this.paste_children(next_block, children[i].children); + const nextBlock = await this._editor.createBlock(children[i].type); + nextBlock.setProperties(children[i].properties); + await parent.append(nextBlock); + await this._pasteChildren(nextBlock, children[i].children); } } - private pre_copy_cut(action: ClipboardAction, e: ClipboardEvent) { + private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) { switch (action) { case ClipboardAction.COPY: - this.hooks.beforeCopy(e); + this._hooks.beforeCopy(e); break; case ClipboardAction.CUT: - this.hooks.beforeCut(e); + this._hooks.beforeCut(e); break; } } - private dispatch_clipboard_event( + private _dispatchClipboardEvent( action: ClipboardAction, e: ClipboardEvent ) { - this.pre_copy_cut(action, e); + this._preCopyCut(action, e); } dispose() { - document.removeEventListener(ClipboardAction.COPY, this.handle_copy); - document.removeEventListener(ClipboardAction.CUT, this.handle_cut); - document.removeEventListener(ClipboardAction.PASTE, this.handle_paste); - this.event_target.removeEventListener( + document.removeEventListener(ClipboardAction.COPY, this._handleCopy); + document.removeEventListener(ClipboardAction.CUT, this._handleCut); + document.removeEventListener(ClipboardAction.PASTE, this._handlePaste); + this._eventTarget.removeEventListener( ClipboardAction.COPY, - this.handle_copy + this._handleCopy ); - this.event_target.removeEventListener( + this._eventTarget.removeEventListener( ClipboardAction.CUT, - this.handle_cut + this._handleCut ); - this.event_target.removeEventListener( + this._eventTarget.removeEventListener( ClipboardAction.PASTE, - this.handle_paste + this._handlePaste ); - this.clipboard_parse.dispose(); - this.clipboard_parse = null; - this.event_target = null; - this.hooks = null; - this.editor = null; + this._clipboardParse.dispose(); + this._clipboardParse = null; + this._eventTarget = null; + this._hooks = null; + this._editor = null; } } From a22aeae644ce94217383777e9fad4b1f32b2a362 Mon Sep 17 00:00:00 2001 From: CJSS Date: Tue, 9 Aug 2022 14:59:41 +0800 Subject: [PATCH 03/95] Update README.md --- README.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 666d76fab..7f93b10a0 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,8 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066 # How to use -If you have experience in front-end development, please [refer to here](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine); if you want to experience our latest version, please wait a moment, we will launch a web version in the near future. -And, thanks to Lee who [made a desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out. +If you have experience in front-end development, you may wish to refer to our [documentation](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. For those intersting in trying our latest version, please bear with us as we are planning to launch a web version soon. +Also, thanks to Lee who has made a [desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out. Please notice that AFFiNE is still under Alpha stage and is not ready for production use. # Table of contents @@ -85,13 +85,13 @@ Please notice that AFFiNE is still under Alpha stage and is not ready for produc ## Create your story -We want your data always to be yours, and we don't want to make any sacrifice to your accessibility. Your data is always local-stored first, yet we support real-time collaboration on a peer-to-peer basis. We don't think "privacy-first" is a good excuse for not supporting modern web features. -Collaboration isn't only necessary for teams -- you may take and insert pics on your phone, then edit them on your desktop, and share them with your collaborators. -Affine is fully built with web technologies so that consistency and accessibility are always guaranteed on Mac, Windows and Linux. The local file system support will be available when version 0.0.1beta is released. +We want your data always to be yours, without any sacrifice to your accessibility. Your data is always stored local first, yet we support real-time collaboration on a peer-to-peer basis. We don't think "privacy-first" is a good excuse for not supporting modern web features. +And when it comes to collaboration, these features are not just necessarily for teams -- you can take and insert pictures on your phone, edit them from your desktop, and then share them with your collaborators. +Affine is fully built with web technologies to ensure consistency and accessibility on Mac, Windows and Linux. The local file system support will be available when version 0.0.1beta is released. # Documentation -AFFiNE is not yet ready for production use. To install, you may check how to build or deploy the AFFiNE in [quick-start](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine/quick-start). For the full documentation, please view it [here](https://affine.gitbook.io/affine/). +AFFiNE is not yet ready for production use. For installation, you may check how to build or deploy AFFiNE from our [quick-start](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine/quick-start) guide. Alternatively, you can view our [full documentation](https://affine.gitbook.io/affine/). ## Getting Started with development @@ -107,28 +107,28 @@ Get our latest [release notes](https://github.com/toeverything/AFFiNE/wiki) from # Feature requests -Please go to [Feature request](https://github.com/toeverything/AFFiNE/issues). +Please go to [feature requests](https://github.com/toeverything/AFFiNE/issues). # FAQ -Get quick help on [Telegram](https://t.me/affineworkos) and [Discord](https://discord.gg/yz6tGVsf5p) along with other developers and contributors. +Get quick help on [Telegram](https://t.me/affineworkos) or [Discord](https://discord.gg/yz6tGVsf5p) and join our community of developers and contributors. -Latest news and technology sharing on [Twitter](https://twitter.com/AffineOfficial), [Medium](https://medium.com/@affineworkos) and [AFFiNE Blog](https://blog.affine.pro/). +Our latest news can be found on [Twitter](https://twitter.com/AffineOfficial), [Medium](https://medium.com/@affineworkos) and the [AFFiNE Blog](https://blog.affine.pro/). # The Philosophy of AFFiNE Timothy Berners-Lee once taught us about the idea of the semantic web, where all the data can be interpreted in any form while the "truth" is kept. This gives our best image of an ideal knowledge base by far, that sorting of information, planning of project and goals as well as creating of knowledge can be all together. We have witnessed waves of paradigm shift so many times. At first, everything was noted on office-like apps or DSL like LaTeX, then we found todo-list apps and WYSIWYG markdown editors better for writing and planning. Finally, here comes Notion and Miro, who take advantage of the idea of blocks to further liberate our creativity. -It is all perfect... If there are not so many waste operations and redundant information. And, we insist that privacy first should always be given by default. +It is all perfect... without waste operations and redundant information. And, we insist that privacy first should always be given by default. That's why we are making AFFiNE. Some of the most important features are: - Transformable - - Every block can be transformed equally well as a database - - e.g. you can now set up a to-do with MarkDown in text view and edit it in kanban view. - - Every doc can be turned into a whiteboard + - Every block can be transformed equally + - e.g. you can create a todo in Markdown in the text view and then later edit it in the kanban view. + - Every document can be turned into a whiteboard - An always good-to-read, structured docs-form page is the best for your notes, but a boundless doodle surface is better for collaboration and creativity. - Atomic - - The basic element of affine are blocks, not pages. + - The basic elements of AFFiNE are blocks, not pages. - Blocks can be directly reused and synced between pages. - Pages and blocks are searched and organized based on connected graphs, not tree-like paths. - Dual-link and semantic search are fully supported. @@ -136,8 +136,7 @@ That's why we are making AFFiNE. Some of the most important features are: - Data is always stored locally by default - CRDTs are applied so that peer-to-peer collaboration is possible. -We really appreciate the idea of Monday, Airtable and Notion databases. They inspired what we think is right for task management. But we don't like the repeated works -- we don't want to set a todo easily with markdown but end up re-write it again in kanban or other databases. -With AFFiNE, every block group has infinite views, for you to keep your single source of truth. +We appreciate the ideas of Monday, Airtable and Notion databases. They have inspired us and shaped our product, helping us get it right when it comes to task management. But we also do things differently. We don't like doing things again and again. It's easy to set a todo with Markdown, but then why do you need to repeat and recreate data for a kanban or other databases. This is the power of AFFiNE. With AFFiNE, every block group has infinite views, for you to keep your single source of data, a signle source of truth. We would like to give special thanks to the innovators and pioneers who greatly inspired us: From 9fa914c6d07038929a2455f4b5a200fba1948185 Mon Sep 17 00:00:00 2001 From: CJSS Date: Tue, 9 Aug 2022 15:01:38 +0800 Subject: [PATCH 04/95] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7f93b10a0..5018d0ba4 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ That's why we are making AFFiNE. Some of the most important features are: - Data is always stored locally by default - CRDTs are applied so that peer-to-peer collaboration is possible. -We appreciate the ideas of Monday, Airtable and Notion databases. They have inspired us and shaped our product, helping us get it right when it comes to task management. But we also do things differently. We don't like doing things again and again. It's easy to set a todo with Markdown, but then why do you need to repeat and recreate data for a kanban or other databases. This is the power of AFFiNE. With AFFiNE, every block group has infinite views, for you to keep your single source of data, a signle source of truth. +We appreciate the ideas of Monday, Airtable, and Notion databases. They have inspired us and shaped our product, helping us get it right when it comes to task management. But we also do things differently. We don't like doing things again and again. It's easy to set a todo with Markdown, but then why do you need to repeat and recreate data for a kanban or other databases. This is the power of AFFiNE. With AFFiNE, every block group has infinite views, for you to keep your single source of data, a signle source of truth. We would like to give special thanks to the innovators and pioneers who greatly inspired us: From 36ad39237b20da14f35ec904b56b33821ebd6b74 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 9 Aug 2022 18:41:08 +0800 Subject: [PATCH 05/95] feat: add selection function --- .../src/editor/selection/selection.ts | 49 +++++++++++++------ 1 file changed, 34 insertions(+), 15 deletions(-) diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index b66d1b5fd..ad52fdd2d 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -30,6 +30,7 @@ import { } from './types'; import { isLikeBlockListIds } from './utils'; import { Protocol } from '@toeverything/datasource/db-service'; +import { Editor } from 'slate'; // IMP: maybe merge active and select into single function export type SelectionInfo = InstanceType< @@ -321,16 +322,16 @@ export class SelectionManager implements VirgoSelection { if (selectionRect.isIntersect(domToRect(block.dom))) { const childrenBlocks = await block.children(); // should check directly in structured block - const structuredChildrenBlocks: Array = - childrenBlocks.filter(childBlock => { + const structuredChildrenBlocks: Array = childrenBlocks.filter( + childBlock => { return this._editor.getView(childBlock.type).layoutOnly; - }); + } + ); for await (const childBlock of structuredChildrenBlocks) { - const childSelectedNodes = - await this.calcRenderBlockIntersect( - selectionRect, - childBlock - ); + const childSelectedNodes = await this.calcRenderBlockIntersect( + selectionRect, + childBlock + ); selectedNodes.push(...childSelectedNodes); } const selectableChildren = childrenBlocks.filter(childBlock => { @@ -347,11 +348,10 @@ export class SelectionManager implements VirgoSelection { } // if just only has one selected maybe select the children if (selectedNodes.length === 1) { - const childrenSelectedNodes: Array = - await this.calcRenderBlockIntersect( - selectionRect, - selectedNodes[0] - ); + const childrenSelectedNodes: Array = await this.calcRenderBlockIntersect( + selectionRect, + selectedNodes[0] + ); if (childrenSelectedNodes.length) return childrenSelectedNodes; } @@ -584,8 +584,7 @@ export class SelectionManager implements VirgoSelection { } else { const new_node = await this._editor.getBlockById(newNodeId); if (new_node) { - const new_node_children_ids = - await new_node.childrenIds; + const new_node_children_ids = await new_node.childrenIds; let select_ids_new = this._selectedNodesIds; if ( new_node_children_ids && @@ -1050,4 +1049,24 @@ export class SelectionManager implements VirgoSelection { this._windowSelectionChangeHandler ); } + /** + * + * move active selection to the new position + * @param index:number + * @memberof SelectionManager + */ + public moveCursor(index: number, blockId: string): void { + const now_range = window.getSelection().getRangeAt(0); + let preRang = document.createRange(); + preRang.setStart( + now_range.startContainer, + now_range.startOffset + index + ); + preRang.setEnd(now_range.endContainer, now_range.endOffset + index); + let prePosition = preRang.getClientRects().item(0); + this.activeNodeByNodeId( + blockId, + new Point(prePosition.left, prePosition.bottom) + ); + } } From 1b337e97667478daf36f363f8b26e8ac4a6adfef Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 9 Aug 2022 18:43:09 +0800 Subject: [PATCH 06/95] feat: add selection function --- libs/components/editor-core/src/editor/selection/selection.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index ad52fdd2d..882d637b1 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -1052,7 +1052,8 @@ export class SelectionManager implements VirgoSelection { /** * * move active selection to the new position - * @param index:number + * @param {number} index + * @param {string} blockId * @memberof SelectionManager */ public moveCursor(index: number, blockId: string): void { From 4522e0a56c495f237eea152605dab4342734c6e8 Mon Sep 17 00:00:00 2001 From: SaikaSakura Date: Tue, 9 Aug 2022 18:44:14 +0800 Subject: [PATCH 07/95] feat: new grid drop logic --- .../src/editor/commands/block-commands.ts | 4 +- .../src/editor/drag-drop/drag-drop.ts | 54 ++++++++++++++----- .../src/menu/command-menu/Menu.tsx | 1 + .../src/menu/left-menu/LeftMenuPlugin.tsx | 15 +++--- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/libs/components/editor-core/src/editor/commands/block-commands.ts b/libs/components/editor-core/src/editor/commands/block-commands.ts index 54f9e5d2f..5972e9d41 100644 --- a/libs/components/editor-core/src/editor/commands/block-commands.ts +++ b/libs/components/editor-core/src/editor/commands/block-commands.ts @@ -162,7 +162,7 @@ export class BlockCommands { public async moveInNewGridItem( blockId: string, gridItemId: string, - isBefore = false + type = GridDropType.left ) { const block = await this._editor.getBlockById(blockId); if (block) { @@ -175,7 +175,7 @@ export class BlockCommands { await block.remove(); await gridItemBlock.append(block); if (targetGridItemBlock && gridItemBlock) { - if (isBefore) { + if (type === GridDropType.left) { await targetGridItemBlock.before(gridItemBlock); } else { await targetGridItemBlock.after(gridItemBlock); diff --git a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts index eccdfb081..be64c07b9 100644 --- a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts +++ b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts @@ -95,6 +95,9 @@ export class DragDropManager { } private async _handleDropBlock(event: React.DragEvent) { + const targetBlock = await this._editor.getBlockById( + this._blockDragTargetId + ); if (this._blockDragDirection !== BlockDropPlacement.none) { const blockId = event.dataTransfer.getData(this._blockIdKey); if (!(await this._canBeDrop(event))) return; @@ -109,13 +112,24 @@ export class DragDropManager { this._blockDragDirection ) ) { - await this._editor.commands.blockCommands.createLayoutBlock( - blockId, - this._blockDragTargetId, + const dropType = this._blockDragDirection === BlockDropPlacement.left ? GridDropType.left - : GridDropType.right - ); + : GridDropType.right; + // if target is a grid item create grid item + if (targetBlock.type !== Protocol.Block.Type.gridItem) { + await this._editor.commands.blockCommands.createLayoutBlock( + blockId, + this._blockDragTargetId, + dropType + ); + } else { + await this._editor.commands.blockCommands.moveInNewGridItem( + blockId, + this._blockDragTargetId, + dropType + ); + } } if ( [ @@ -123,9 +137,6 @@ export class DragDropManager { BlockDropPlacement.outerRight, ].includes(this._blockDragDirection) ) { - const targetBlock = await this._editor.getBlockById( - this._blockDragTargetId - ); if (targetBlock.type !== Protocol.Block.Type.grid) { await this._editor.commands.blockCommands.createLayoutBlock( blockId, @@ -154,7 +165,7 @@ export class DragDropManager { await this._editor.commands.blockCommands.moveInNewGridItem( blockId, gridItems[0].id, - true + GridDropType.right ); } } @@ -347,10 +358,10 @@ export class DragDropManager { blockId: string ) { const { clientX, clientY } = event; - this._setBlockDragTargetId(blockId); const path = await this._editor.getBlockPath(blockId); const mousePoint = new Point(clientX, clientY); const rect = domToRect(blockDom); + let targetBlock: AsyncBlock = path[path.length - 1]; /** * IMP: compute the level of the target block * future feature drag drop has level support do not delete @@ -386,13 +397,30 @@ export class DragDropManager { const gridBlocks = path.filter( block => block.type === Protocol.Block.Type.grid ); - // limit grid block floor counts, when drag block to init grid - if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) { + const parentBlock = path[path.length - 2]; + // a new grid should not be grid item`s child + if ( + parentBlock && + parentBlock.type === Protocol.Block.Type.gridItem + ) { + targetBlock = parentBlock; + // gridItem`s parent must be grid block + const gridItemCounts = (await path[path.length - 3].children()) + .length; + if ( + gridItemCounts >= + this._editor.configManager.grid.maxGridItemCount + ) { + direction = BlockDropPlacement.none; + } + // limit grid block floor counts, when drag block to init grid + } else if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) { direction = BlockDropPlacement.none; } } + this._setBlockDragTargetId(targetBlock.id); this._setBlockDragDirection(direction); - return direction; + return { direction, block: targetBlock }; } public handlerEditorDrop(event: React.DragEvent) { diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx index b6d174e51..d99d53d9b 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx @@ -18,6 +18,7 @@ import { menuItemsMap, } from './config'; import { QueryResult } from '../../search'; +import { getBlockIdByNode } from '@toeverything/utils'; export type CommandMenuProps = { editor: Virgo; diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx index 91402bbd9..5281c21b0 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx @@ -105,16 +105,17 @@ export class LeftMenuPlugin extends BasePlugin { new Point(event.clientX, event.clientY) ); if (block == null || ignoreBlockTypes.includes(block.type)) return; - const direction = await this.editor.dragDropManager.checkBlockDragTypes( - event, - block.dom, - block.id - ); + const { direction, block: targetBlock } = + await this.editor.dragDropManager.checkBlockDragTypes( + event, + block.dom, + block.id + ); this._lineInfo.next({ direction, blockInfo: { - block, - rect: block.dom.getBoundingClientRect(), + block: targetBlock, + rect: targetBlock.dom.getBoundingClientRect(), }, }); }; From e795655bd94771696d41a2805219289d620bccc2 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 9 Aug 2022 18:57:41 +0800 Subject: [PATCH 08/95] fix:lint --- .../editor-core/src/editor/selection/selection.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index 882d637b1..4b2da05cb 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -1057,13 +1057,10 @@ export class SelectionManager implements VirgoSelection { * @memberof SelectionManager */ public moveCursor(index: number, blockId: string): void { - const now_range = window.getSelection().getRangeAt(0); + const nowRange = window.getSelection().getRangeAt(0); let preRang = document.createRange(); - preRang.setStart( - now_range.startContainer, - now_range.startOffset + index - ); - preRang.setEnd(now_range.endContainer, now_range.endOffset + index); + preRang.setStart(nowRange.startContainer, nowRange.startOffset + index); + preRang.setEnd(nowRange.endContainer, nowRange.endOffset + index); let prePosition = preRang.getClientRects().item(0); this.activeNodeByNodeId( blockId, From 50270f87edf58038ed2d54d492428b43397ad504 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Tue, 9 Aug 2022 21:04:09 +0800 Subject: [PATCH 09/95] feat: migrate to styled --- .../page-tree/tree-item/styles.ts | 204 ++++++++++++++++++ 1 file changed, 204 insertions(+) create mode 100644 libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts new file mode 100644 index 000000000..5c291f228 --- /dev/null +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts @@ -0,0 +1,204 @@ +import { styled } from '@toeverything/components/ui'; +import { Link } from 'react-router-dom'; + +export const TreeItemContainer = styled('div')` + box-sizing: border-box; + display: flex; + align-items: center; + color: #4c6275; +`; + +export const Wrapper = styled('li')<{ + spacing: string; + clone?: boolean; + ghost?: boolean; + indicator?: boolean; + disableSelection?: boolean; + disableInteraction?: boolean; +}>` + box-sizing: border-box; + padding-left: ${({ spacing }) => spacing}; + list-style: none; + font-size: 14px; + + ${({ clone, disableSelection }) => + (clone || disableSelection) && + `width: 100%; + .Text, + .Count { + user-select: none; + -webkit-user-select: none; + }`} + + ${({ indicator }) => + indicator && + `width: 100%; + .Text, + .Count { + user-select: none; + -webkit-user-select: none; + }`} + + ${({ disableInteraction }) => disableInteraction && `pointer-events: none;`} + + &:hover { + background: #f5f7f8; + border-radius: 5px; + } + + &.clone { + display: inline-block; + padding: 0; + margin-left: 10px; + margin-top: 5px; + pointer-events: none; + + ${TreeItemContainer} { + padding-right: 20px; + border-radius: 4px; + box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1); + } + } + + &.ghost { + &.indicator { + opacity: 1; + position: relative; + z-index: 1; + margin-bottom: -1px; + + ${TreeItemContainer} { + position: relative; + padding: 0; + height: 8px; + border-color: #2389ff; + background-color: #56a1f8; + + &:before { + position: absolute; + left: -8px; + top: -4px; + display: block; + content: ''; + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid #2389ff; + } + + > * { + /* Items are hidden using height and opacity to retain focus */ + opacity: 0; + height: 0; + } + } + } + + &:not(.indicator) { + opacity: 0.5; + } + + ${TreeItemContainer} > * { + box-shadow: none; + background-color: transparent; + } + } +`; + +export const Counter = styled('span')` + position: absolute; + top: 8px; + right: 0; + display: flex; + justify-content: center; + align-items: center; + width: 18px; + height: 18px; + border-radius: 50%; + background-color: #2389ff; + font-size: 0.9rem; + font-weight: 500; + color: #fff; +`; + +export const ActionButton = styled('button')<{ + background?: string; + fill?: string; +}>` + display: flex; + width: 12px; + padding: 0 15px; + align-items: center; + justify-content: center; + flex: 0 0 auto; + touch-action: none; + cursor: pointer; + border-radius: 5px; + border: none; + outline: none; + appearance: none; + background-color: transparent; + -webkit-tap-highlight-color: transparent; + + svg { + flex: 0 0 auto; + margin: auto; + height: 100%; + overflow: visible; + fill: #919eab; + } + + &:active { + background-color: ${({ background }) => + background ?? 'rgba(0, 0, 0, 0.05)'}; + + svg { + fill: ${({ fill }) => fill ?? '#788491'}; + } + } + + &:focus-visible { + outline: none; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe; + } +`; + +export const TreeItemMoreActions = styled('div')` + display: block; + visibility: hidden; +`; + +export const TextLink = styled(Link)<{ active?: boolean }>` + display: flex; + align-items: center; + flex-grow: 1; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + cursor: pointer; + appearance: none; + text-decoration: none; + color: ${({ theme, active }) => + active ? theme.affine.palette.primary : 'unset'}; +`; + +export const TreeItemContent = styled('div')` + box-sizing: border-box; + width: 100%; + height: 32px; + position: relative; + display: flex; + align-items: center; + justify-content: space-around; + color: #4c6275; + padding-right: 0.5rem; + overflow: hidden; + + &:hover { + ${TreeItemMoreActions} { + visibility: visible; + cursor: pointer; + } + } +`; From 8d1da35b56a7fe397f23ca647212bf6c1a5f300c Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Tue, 9 Aug 2022 21:04:44 +0800 Subject: [PATCH 10/95] refactor: update component styles --- .../page-tree/tree-item/MoreActions.tsx | 28 ++-- .../page-tree/tree-item/TreeItem.tsx | 137 ++++-------------- 2 files changed, 44 insertions(+), 121 deletions(-) diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx index f23e377f4..1d211d9a3 100644 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx @@ -1,20 +1,18 @@ -import styles from './tree-item.module.scss'; +import { AddIcon, MoreIcon } from '@toeverything/components/icons'; import { - MuiSnackbar as Snackbar, Cascader, CascaderItemProps, - MuiDivider as Divider, - MuiClickAwayListener as ClickAwayListener, IconButton, + MuiClickAwayListener as ClickAwayListener, + MuiSnackbar as Snackbar, styled, } from '@toeverything/components/ui'; -import React from 'react'; -import { NavLink, useNavigate } from 'react-router-dom'; -import { copyToClipboard } from '@toeverything/utils'; import { services, TemplateFactory } from '@toeverything/datasource/db-service'; -import { NewFromTemplatePortal } from './NewFromTemplatePortal'; import { useFlag } from '@toeverything/datasource/feature-flags'; -import { MoreIcon, AddIcon } from '@toeverything/components/icons'; +import { copyToClipboard } from '@toeverything/utils'; +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { TreeItemMoreActions } from './styles'; const MESSAGES = { COPY_LINK_SUCCESS: 'Copyed link to clipboard', @@ -47,6 +45,10 @@ function DndTreeItemMoreActions(props: ActionsProps) { set_alert_open(false); }; const handleClick = (event: React.MouseEvent) => { + if (anchorEl) { + setAnchorEl(null); + return; + } setAnchorEl(event.currentTarget); }; const handleClose = () => { @@ -246,10 +248,11 @@ function DndTreeItemMoreActions(props: ActionsProps) { return ( handleClose()}>
-
+ @@ -262,14 +265,15 @@ function DndTreeItemMoreActions(props: ActionsProps) { -
+ + + /> ( 'BooleanPageTreeItemMoreActions', true ); - const theme = useTheme(); return ( -
  • -
    - + + {childCount !== 0 && (collapsed ? ( ) : ( ))} - + -
    - + {value} - + {BooleanPageTreeItemMoreActions && ( ( {/*{!clone && onRemove && }*/} {clone && childCount && childCount > 1 ? ( - - {childCount} - + {childCount} ) : null} -
    -
    -
    • + + + ); } ); - -export interface ActionProps extends React.HTMLAttributes { - active?: { - fill: string; - background: string; - }; - // cursor?: CSSProperties['cursor']; - cursor?: 'pointer' | 'grab'; -} - -/** Customizable buttons */ -export function Action({ - active, - className, - cursor, - style, - ...props -}: ActionProps) { - return ( -
    From 52a59d8dfd30d6c2cdcb7e0de6931cfdc2a1caa1 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 14:06:31 +0800 Subject: [PATCH 38/95] fix: add message after link copied, fixed #131 --- .../layout/src/settings-sidebar/Settings/use-settings.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts b/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts index 1ce5bcb55..639afef92 100644 --- a/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts +++ b/libs/components/layout/src/settings-sidebar/Settings/use-settings.ts @@ -1,4 +1,5 @@ import { useNavigate } from 'react-router-dom'; +import { message } from '@toeverything/components/ui'; import { useSettingFlags, type SettingFlags } from './use-setting-flags'; import { copyToClipboard } from '@toeverything/utils'; import { @@ -91,7 +92,10 @@ export const useSettings = (): SettingItem[] => { { type: 'button', name: 'Copy Page Link', - onClick: () => copyToClipboard(window.location.href), + onClick: () => { + copyToClipboard(window.location.href); + message.success('Page link copied successfully'); + }, }, { type: 'separator', From 011aac0bfc68ae31636624a444a30e7783bc852b Mon Sep 17 00:00:00 2001 From: SaikaSakura Date: Thu, 11 Aug 2022 14:35:33 +0800 Subject: [PATCH 39/95] feat: fix-track-pad-scroll --- libs/components/editor-core/src/RenderRoot.tsx | 7 +++++++ libs/components/editor-core/src/Selection.tsx | 10 ++++++++++ 2 files changed, 17 insertions(+) diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index e4534b813..caa840cb3 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/libs/components/editor-core/src/RenderRoot.tsx @@ -102,6 +102,12 @@ export const RenderRoot: FC> = ({ editor.getHooks().onRootNodeMouseLeave(event); }; + const onContextmenu = ( + event: React.MouseEvent + ) => { + selectionRef.current?.onContextmenu(event); + }; + const onKeyDown: React.KeyboardEventHandler = event => { // IMP move into keyboard managers? editor.getHooks().onRootNodeKeyDown(event); @@ -165,6 +171,7 @@ export const RenderRoot: FC> = ({ onMouseUp={onMouseUp} onMouseLeave={onMouseLeave} onMouseOut={onMouseOut} + onContextMenu={onContextmenu} onKeyDown={onKeyDown} onKeyDownCapture={onKeyDownCapture} onKeyUp={onKeyUp} diff --git a/libs/components/editor-core/src/Selection.tsx b/libs/components/editor-core/src/Selection.tsx index e2dc34ed3..98ad9ccb1 100644 --- a/libs/components/editor-core/src/Selection.tsx +++ b/libs/components/editor-core/src/Selection.tsx @@ -29,6 +29,9 @@ export type SelectionRef = { onMouseDown: (event: React.MouseEvent) => void; onMouseMove: (event: React.MouseEvent) => void; onMouseUp: (event: React.MouseEvent) => void; + onContextmenu: ( + event: React.MouseEvent + ) => void; }; const getFixedPoint = ( @@ -207,10 +210,17 @@ export const SelectionRect = forwardRef( scrollManager.stopAutoScroll(); }; + const onContextmenu = () => { + if (mouseType.current === 'down') { + onMouseUp(); + } + }; + useImperativeHandle(ref, () => ({ onMouseDown, onMouseMove, onMouseUp, + onContextmenu, })); useEffect(() => { From 137d6a1923ee16ecb01f436facd230e76a708506 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 14:42:27 +0800 Subject: [PATCH 40/95] fix: hold pendant popover when completed incorrectly --- .../CreatePendantPanel.tsx | 20 +++++++++++- .../UpdatePendantPanel.tsx | 15 +++++++-- .../pendant-operation-panel/hooks.ts | 31 +------------------ 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx index b09f23ed3..5a483adb5 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx @@ -1,5 +1,11 @@ import React, { useState, useEffect } from 'react'; -import { Input, Option, Select, Tooltip } from '@toeverything/components/ui'; +import { + Input, + message, + Option, + Select, + Tooltip, +} from '@toeverything/components/ui'; import { HelpCenterIcon } from '@toeverything/components/icons'; import { AsyncBlock } from '../../editor'; @@ -18,6 +24,7 @@ import { generateRandomFieldName, generateInitialOptions, getPendantConfigByType, + checkPendantForm, } from '../utils'; import { useOnCreateSure } from './hooks'; @@ -98,6 +105,17 @@ export const CreatePendantPanel = ({ )} iconConfig={getPendantConfigByType(selectedOption.type)} onSure={async (type, newPropertyItem, newValue) => { + const checkResult = checkPendantForm( + type, + fieldName, + newPropertyItem, + newValue + ); + + if (!checkResult.passed) { + await message.error(checkResult.message); + return; + } await onCreateSure({ type, newPropertyItem, diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx index 40ef97631..796ef39e0 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Input, Tooltip } from '@toeverything/components/ui'; +import { Input, message, Tooltip } from '@toeverything/components/ui'; import { HelpCenterIcon } from '@toeverything/components/icons'; import { PendantModifyPanel } from '../pendant-modify-panel'; import type { AsyncBlock } from '../../editor'; @@ -8,7 +8,7 @@ import { type RecastBlockValue, type RecastMetaProperty, } from '../../recast-block'; -import { getPendantConfigByType } from '../utils'; +import { checkPendantForm, getPendantConfigByType } from '../utils'; import { StyledPopoverWrapper, StyledOperationLabel, @@ -98,6 +98,17 @@ export const UpdatePendantPanel = ({ property={property} type={property.type} onSure={async (type, newPropertyItem, newValue) => { + const checkResult = checkPendantForm( + type, + fieldName, + newPropertyItem, + newValue + ); + + if (!checkResult.passed) { + await message.error(checkResult.message); + return; + } await onUpdateSure({ type, newPropertyItem, diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts index 079cb2627..55016cc21 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts @@ -23,12 +23,7 @@ import { PendantTypes, type TempInformationType, } from '../types'; -import { - checkPendantForm, - getOfficialSelected, - getPendantConfigByType, -} from '../utils'; -import { message } from '@toeverything/components/ui'; +import { getOfficialSelected, getPendantConfigByType } from '../utils'; type SelectPropertyType = MultiSelectProperty | SelectProperty; type SureParams = { @@ -56,18 +51,6 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => { newPropertyItem, newValue, }: SureParams) => { - const checkResult = checkPendantForm( - type, - fieldName, - newPropertyItem, - newValue - ); - - if (!checkResult.passed) { - await message.error(checkResult.message); - return; - } - if ( type === PendantTypes.MultiSelect || type === PendantTypes.Select || @@ -181,18 +164,6 @@ export const useOnUpdateSure = ({ newPropertyItem, newValue, }: SureParams) => { - const checkResult = checkPendantForm( - type, - fieldName, - newPropertyItem, - newValue - ); - - if (!checkResult.passed) { - await message.error(checkResult.message); - return; - } - if ( type === PendantTypes.MultiSelect || type === PendantTypes.Select || From 9b0f608b6b2e713b5401f20983f1f60c83d40a98 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 11 Aug 2022 15:15:47 +0800 Subject: [PATCH 41/95] fix: add moveCursor function --- .../editor-core/src/editor/selection/selection.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index 4b2da05cb..99f648a93 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -1056,11 +1056,14 @@ export class SelectionManager implements VirgoSelection { * @param {string} blockId * @memberof SelectionManager */ - public moveCursor(index: number, blockId: string): void { - const nowRange = window.getSelection().getRangeAt(0); + public async moveCursor( + nowRange: any, + index: number, + blockId: string + ): Promise { let preRang = document.createRange(); - preRang.setStart(nowRange.startContainer, nowRange.startOffset + index); - preRang.setEnd(nowRange.endContainer, nowRange.endOffset + index); + preRang.setStart(nowRange.startContainer, index); + preRang.setEnd(nowRange.endContainer, index); let prePosition = preRang.getClientRects().item(0); this.activeNodeByNodeId( blockId, From 9ad7332b30eb31889016b4d829ae37967842bae7 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 11 Aug 2022 15:39:22 +0800 Subject: [PATCH 42/95] fix: lint --- .../src/components/text-manage/TextManage.tsx | 124 ++++++++---------- 1 file changed, 57 insertions(+), 67 deletions(-) diff --git a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx index 2e146c770..cc55e9b7b 100644 --- a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx +++ b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx @@ -42,13 +42,13 @@ const TextBlockContainer = styled(Text)(({ theme }) => ({ })); const findSlice = (arr: string[], p: string, q: string) => { - let should_include = false; + let shouldInclude = false; return arr.filter(block => { if (block === p || block === q) { - should_include = !should_include; + shouldInclude = !shouldInclude; return true; } else { - return should_include; + return shouldInclude; } }); }; @@ -112,11 +112,8 @@ export const TextManage = forwardRef( (ref as MutableRefObject) || defaultRef; const properties = block.getProperties(); - // const [is_select, set_is_select] = useState(); - // useOnSelect(block.id, (is_select: boolean) => { - // set_is_select(is_select); - // }); - const on_text_view_set_selection = (selection: Range | Point) => { + + const onTextViewSetSelection = (selection: Range | Point) => { if (selection instanceof Point) { //do some thing } else { @@ -125,18 +122,18 @@ export const TextManage = forwardRef( }; // block = await editor.commands.blockCommands.createNextBlock(block.id,) - const on_text_view_active = useCallback( + const onTextViewActive = useCallback( (point: CursorTypes) => { // TODO code to be optimized if (textRef.current) { - const end_selection = textRef.current.getEndSelection(); - const start_selection = textRef.current.getStartSelection(); + const endSelection = textRef.current.getEndSelection(); + const startSelection = textRef.current.getStartSelection(); if (point === 'start') { - textRef.current.setSelection(start_selection); + textRef.current.setSelection(startSelection); return; } if (point === 'end') { - textRef.current.setSelection(end_selection); + textRef.current.setSelection(endSelection); return; } try { @@ -151,24 +148,24 @@ export const TextManage = forwardRef( } else { blockTop = blockDomStyle.top + 5; } - const end_position = ReactEditor.toDOMRange( + const endPosition = ReactEditor.toDOMRange( textRef.current.editor, - end_selection + endSelection ) .getClientRects() .item(0); - const start_position = ReactEditor.toDOMRange( + const startPosition = ReactEditor.toDOMRange( textRef.current.editor, - start_selection + startSelection ) .getClientRects() .item(0); - if (end_position.left <= point.x) { - textRef.current.setSelection(end_selection); + if (endPosition.left <= point.x) { + textRef.current.setSelection(endSelection); return; } - if (start_position.left >= point.x) { - textRef.current.setSelection(start_selection); + if (startPosition.left >= point.x) { + textRef.current.setSelection(startSelection); return; } let range: globalThis.Range; @@ -186,7 +183,7 @@ export const TextManage = forwardRef( range = document.createRange(); range.setStart(caret.offsetNode, caret.offset); } - const slate_rang = ReactEditor.toSlateRange( + const slateRang = ReactEditor.toSlateRange( textRef.current.editor, range, { @@ -194,19 +191,19 @@ export const TextManage = forwardRef( suppressThrow: true, } ); - textRef.current.setSelection(slate_rang); + textRef.current.setSelection(slateRang); } } catch (e) { console.log('e: ', e); - textRef.current.setSelection(end_selection); + textRef.current.setSelection(endSelection); } } }, [textRef] ); - useOnSelectActive(block.id, on_text_view_active); - useOnSelectSetSelection<'Range'>(block.id, on_text_view_set_selection); + useOnSelectActive(block.id, onTextViewActive); + useOnSelectSetSelection<'Range'>(block.id, onTextViewSetSelection); useEffect(() => { if (textRef.current) { @@ -232,17 +229,17 @@ export const TextManage = forwardRef( (block.id === lastSelectNodeId && type === 'Range') || (type === 'Range' && info) ) { - on_text_view_active('end'); + onTextViewActive('end'); } else { - on_text_view_active('start'); + onTextViewActive('start'); } } } catch (e) { console.warn('error occured in set active in initialization'); } - }, [block.id, editor.selectionManager, on_text_view_active, textRef]); + }, [block.id, editor.selectionManager, onTextViewActive, textRef]); - const on_text_change: TextProps['handleChange'] = async ( + const onTextChange: TextProps['handleChange'] = async ( value, textStyle ) => { @@ -263,39 +260,34 @@ export const TextManage = forwardRef( }); } }; - const get_now_and_pre_rang_position = () => { - window.getSelection().getRangeAt(0); - // const now_range = - // editor.selectionManager.currentSelectInfo?.browserSelection.getRangeAt( - // 0 - // ); - const now_range = window.getSelection().getRangeAt(0); - let pre_position = null; - const now_position = now_range.getClientRects().item(0); + const getNowAndPreRangPosition = () => { + const nowRange = window.getSelection().getRangeAt(0); + let prePosition = null; + const nowPosition = nowRange.getClientRects().item(0); try { - if (now_range.startOffset !== 0) { - const pre_rang = document.createRange(); - pre_rang.setStart( - now_range.startContainer, - now_range.startOffset + 1 + if (nowRange.startOffset !== 0) { + const preRang = document.createRange(); + preRang.setStart( + nowRange.startContainer, + nowRange.startOffset + 1 ); - pre_rang.setEnd( - now_range.endContainer, - now_range.endOffset + 1 + preRang.setEnd( + nowRange.endContainer, + nowRange.endOffset + 1 ); - pre_position = pre_rang.getClientRects().item(0); + prePosition = preRang.getClientRects().item(0); } } catch (e) { // console.log(e); } - return { nowPosition: now_position, prePosition: pre_position }; + return { nowPosition: nowPosition, prePosition: prePosition }; }; const onKeyboardUp = (event: React.KeyboardEvent) => { // if default event is prevented do noting // if U want to disable up/down/enter use capture event for preventing if (!event.isDefaultPrevented()) { - const positions = get_now_and_pre_rang_position(); + const positions = getNowAndPreRangPosition(); const prePosition = positions.prePosition; const nowPosition = positions.nowPosition; if (prePosition) { @@ -336,7 +328,7 @@ export const TextManage = forwardRef( // editor.selectionManager.activeNextNode(block.id, 'start'); // return; if (!event.isDefaultPrevented()) { - const positions = get_now_and_pre_rang_position(); + const positions = getNowAndPreRangPosition(); const prePosition = positions.prePosition; const nowPosition = positions.nowPosition; // Create the last element range of slate_editor @@ -392,7 +384,7 @@ export const TextManage = forwardRef( return false; } }; - const on_select_all = () => { + const onSelectAll = () => { const isSelectAll = textRef.current.isEmpty() || textRef.current.isSelectAll(); if (isSelectAll) { @@ -402,22 +394,20 @@ export const TextManage = forwardRef( return false; }; - const on_undo = () => { + const onUndo = () => { editor.undo(); }; - const on_redo = () => { + const onRedo = () => { editor.redo(); }; - const on_keyboard_esc = () => { + const onKeyboardEsc = () => { if (editor.selectionManager.getSelectedNodesIds().length === 0) { - const active_node_id = + const activeNodeId = editor.selectionManager.getActivatedNodeId(); - if (active_node_id) { - editor.selectionManager.setSelectedNodesIds([ - active_node_id, - ]); + if (activeNodeId) { + editor.selectionManager.setSelectedNodesIds([activeNodeId]); ReactEditor.blur(textRef.current.editor); } } else { @@ -425,7 +415,7 @@ export const TextManage = forwardRef( } }; - const on_shift_click = async (e: MouseEvent) => { + const onShiftClick = async (e: MouseEvent) => { if (e.shiftKey) { const activeId = editor.selectionManager.getActivatedNodeId(); if (activeId === block.id) { @@ -474,16 +464,16 @@ export const TextManage = forwardRef( className={`${otherOptions.className}`} currentValue={properties.text.value} textStyle={properties.textStyle} - handleChange={on_text_change} + handleChange={onTextChange} handleUp={onKeyboardUp} handleDown={onKeyboardDown} handleLeft={onKeyboardLeft} handleRight={onKeyboardRight} - handleSelectAll={on_select_all} - handleMouseDown={on_shift_click} - handleUndo={on_undo} - handleRedo={on_redo} - handleEsc={on_keyboard_esc} + handleSelectAll={onSelectAll} + handleMouseDown={onShiftClick} + handleUndo={onUndo} + handleRedo={onRedo} + handleEsc={onKeyboardEsc} {...otherOptions} /> ); From b4724f3ae098135c6097d696ce556a6d581cfd75 Mon Sep 17 00:00:00 2001 From: JimmFly <102217452+JimmFly@users.noreply.github.com> Date: Thu, 11 Aug 2022 15:48:51 +0800 Subject: [PATCH 43/95] fix: windows zoom (#190) Co-authored-by: JimmFly --- libs/components/board-state/src/tldraw-app.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts index ab9492aab..05a7e8007 100644 --- a/libs/components/board-state/src/tldraw-app.ts +++ b/libs/components/board-state/src/tldraw-app.ts @@ -4075,7 +4075,12 @@ export class TldrawApp extends StateManager { onZoom: TLWheelEventHandler = (info, e) => { if (this.state.appState.status !== TDStatus.Idle) return; - const delta = info.delta[2] / 50; + // Normalize zoom scroll + // Fix https://github.com/toeverything/AFFiNE/issues/135 + const delta = + Math.abs(info.delta[2]) > 10 + ? 0.2 * Math.sign(info.delta[2]) + : info.delta[2] / 50; this.zoomBy(delta, info.point); this.onPointerMove(info, e as unknown as React.PointerEvent); }; From 716c9ea34cae0314c2e03fcdc44c6087e48eb7c6 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 15:51:24 +0800 Subject: [PATCH 44/95] feat: update animate of pandent trigger line --- .../block-pendant/BlockPendantProvider.tsx | 36 ++++++++++++------- .../PendantHistoryPanel.tsx | 4 ++- .../pendant-popover/PendantPopover.tsx | 1 + 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx index 66cf4001a..48de13f4b 100644 --- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx +++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx @@ -3,6 +3,7 @@ import { styled } from '@toeverything/components/ui'; import type { AsyncBlock } from '../editor'; import { PendantPopover } from './pendant-popover'; import { PendantRender } from './pendant-render'; +import { useRef } from 'react'; /** * @deprecated */ @@ -14,13 +15,16 @@ export const BlockPendantProvider: FC> = ({ block, children, }) => { + const triggerRef = useRef(); return ( {children} - - - + + + + + @@ -43,10 +47,12 @@ const StyledTriggerLine = styled('div')({ width: '100%', height: '2px', background: '#dadada', - display: 'none', + display: 'flex', position: 'absolute', left: '0', top: '4px', + transition: 'opacity .2s', + opacity: '0', }, '::after': { content: "''", @@ -60,18 +66,24 @@ const StyledTriggerLine = styled('div')({ transition: 'width .3s', }, }); - -const Container = styled('div')({ - position: 'relative', - paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`, +const StyledPendantContainer = styled('div')({ + width: '100px', '&:hover': { - [StyledTriggerLine.toString()]: { - '&::before': { - display: 'flex', - }, + [`${StyledTriggerLine}`]: { '&::after': { width: '100%', }, }, }, }); +const Container = styled('div')({ + position: 'relative', + paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`, + '&:hover': { + [`${StyledTriggerLine}`]: { + '&::before': { + opacity: '1', + }, + }, + }, +}); diff --git a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx index 0f610301d..ade7ced37 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx @@ -29,6 +29,7 @@ export const PendantHistoryPanel = ({ const [history, setHistory] = useState([]); const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({}); + const historyPanelRef = useRef(); const { getValueHistory } = getRecastItemValue(block); useEffect(() => { @@ -84,7 +85,7 @@ export const PendantHistoryPanel = ({ }, [block, getProperties, groupBlock, recastBlock]); return ( - + {history.map(item => { const property = getProperty(item.id); return ( @@ -116,6 +117,7 @@ export const PendantHistoryPanel = ({ /> } trigger="click" + container={historyPanelRef.current} > { popoverHandlerRef.current?.setVisible(false); From 2d18e8f558fd0d1833b5ae9629a559f86a2e4bbe Mon Sep 17 00:00:00 2001 From: mitsuha Date: Thu, 11 Aug 2022 16:17:02 +0800 Subject: [PATCH 45/95] improvement: 1.left toolbar hover style#148; --- .../workspace/docs/collapsible-page-tree.tsx | 23 ++++------ .../pages/workspace/docs/workspace-name.tsx | 44 ++++++++++--------- .../src/lib/collapsible-title/index.tsx | 6 +-- .../EditorBoardSwitcher/StatusTrack.tsx | 1 - .../layout/src/header/LayoutHeader.tsx | 5 ++- .../activities/activities.tsx | 7 ++- .../workspace-sidebar/dot-icon/DotIcon.tsx | 9 ++++ .../src/workspace-sidebar/dot-icon/index.ts | 1 + .../workspace-sidebar/page-tree/DndTree.tsx | 2 +- .../workspace-sidebar/page-tree/PageTree.tsx | 6 +-- .../page-tree/tree-item/TreeItem.tsx | 18 ++++---- .../page-tree/tree-item/styles.ts | 13 +++--- 12 files changed, 72 insertions(+), 63 deletions(-) create mode 100644 libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx create mode 100644 libs/components/layout/src/workspace-sidebar/dot-icon/index.ts diff --git a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx index 913f4024c..d37910583 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx @@ -8,6 +8,7 @@ import { usePageTree, } from '@toeverything/components/layout'; import { + IconButton, MuiBox as Box, MuiCollapse as Collapse, styled, @@ -27,6 +28,7 @@ const StyledBtn = styled('div')({ cursor: 'pointer', userSelect: 'none', flex: 1, + marginLeft: '12px', }); export type CollapsiblePageTreeProps = { @@ -70,7 +72,7 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) { display: 'flex', justifyContent: 'space-between', alignItems: 'center', - paddingRight: 1, + paddingRight: '12px', '&:hover': { background: '#f5f7f8', borderRadius: '5px', @@ -80,24 +82,17 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) { onMouseLeave={() => setNewPageBtnVisible(false)} > setOpen(prev => !prev)}> - {open ? ( - - ) : ( - - )} {title} {newPageBtnVisible && ( - + > + + )} {children ? ( diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx index 631149716..67a36e1ce 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx @@ -1,13 +1,16 @@ -import { - styled, - MuiOutlinedInput as OutlinedInput, -} from '@toeverything/components/ui'; +import { styled, Input } from '@toeverything/components/ui'; import { PinIcon } from '@toeverything/components/icons'; import { useUserAndSpaces, useShowSpaceSidebar, } from '@toeverything/datasource/state'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { + ChangeEvent, + KeyboardEvent, + useCallback, + useEffect, + useState, +} from 'react'; import { services } from '@toeverything/datasource/db-service'; import { Logo } from './components/logo/Logo'; @@ -124,24 +127,24 @@ export const WorkspaceName = () => { }; }, [currentSpaceId, fetchWorkspaceName]); - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - e.stopPropagation(); - e.preventDefault(); - setInRename(false); - } - }, - [] - ); + const handleKeyDown = useCallback((e: KeyboardEvent) => { + if (e.key === 'Enter') { + e.stopPropagation(); + e.preventDefault(); + setInRename(false); + } + }, []); const handleChange = useCallback( - (e: React.ChangeEvent) => { - services.api.userConfig.setWorkspaceName( + async (e: ChangeEvent) => { + const name = e.target.value; + + await setWorkspaceName(name); + await services.api.userConfig.setWorkspaceName( currentSpaceId, - e.currentTarget.value + name ); }, - [] + [currentSpaceId] ); return ( @@ -165,7 +168,8 @@ export const WorkspaceName = () => { {inRename ? ( - setOpen(prev => !prev)}> - {open ? ( - - ) : ( - - )}
    { return { width: '64px', height: '32px', - backgroundColor: theme.affine.palette.textHover, border: '1px solid #ECF1FB', borderRadius: '8px', cursor: 'pointer', diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 978b7f8df..85e715733 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -31,6 +31,7 @@ export const LayoutHeader = () => { size="large" hoverColor={'transparent'} disabled={true} + style={{ cursor: 'not-allowed' }} > @@ -124,11 +125,11 @@ const StyledHelper = styled('div')({ alignItems: 'center', }); -const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({ +const StyledShare = styled('div')<{ disabled?: boolean }>({ padding: '10px 12px', fontWeight: 600, fontSize: '14px', - cursor: 'pointer', + cursor: 'not-allowed', color: '#98ACBD', textTransform: 'none', /* disabled for current time */ diff --git a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx index a532d9bd0..50c552c0a 100644 --- a/libs/components/layout/src/workspace-sidebar/activities/activities.tsx +++ b/libs/components/layout/src/workspace-sidebar/activities/activities.tsx @@ -10,9 +10,10 @@ import { } from '@toeverything/components/ui'; import { useNavigate } from 'react-router'; import { formatDistanceToNow } from 'date-fns'; +import { DotIcon } from '../dot-icon'; const StyledWrapper = styled('div')({ - paddingLeft: '12px', + width: '100%', span: { textOverflow: 'ellipsis', overflow: 'hidden', @@ -22,8 +23,8 @@ const StyledWrapper = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - paddingRight: '20px', whiteSpace: 'nowrap', + paddingLeft: '12px', '&:hover': { background: '#f5f7f8', borderRadius: '5px', @@ -106,6 +107,8 @@ export const Activities = () => { const { id, title, updated } = item; return ( + + { navigate(`/${currentSpaceId}/${id}`); diff --git a/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx b/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx new file mode 100644 index 000000000..4a86326d4 --- /dev/null +++ b/libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx @@ -0,0 +1,9 @@ +import { PageInPageTreeIcon } from '@toeverything/components/icons'; + +export const DotIcon = () => { + return ( + + ); +}; diff --git a/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts b/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts new file mode 100644 index 000000000..5ee35a697 --- /dev/null +++ b/libs/components/layout/src/workspace-sidebar/dot-icon/index.ts @@ -0,0 +1 @@ +export { DotIcon } from './DotIcon'; diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx index 57d7643bb..40991b930 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx @@ -44,7 +44,7 @@ export type DndTreeProps = { */ export function DndTree(props: DndTreeProps) { const { - indentationWidth = 12, + indentationWidth = 20, collapsible, removable, showDragIndicator, diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx index d40442ce0..b2ea531e5 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx @@ -3,10 +3,8 @@ import { DndTree } from './DndTree'; import { useDndTreeAutoUpdate } from './use-page-tree'; const Root = styled('div')({ - minWidth: 160, - maxWidth: 260, - marginLeft: 18, - marginRight: 6, + minWidth: '160px', + maxWidth: '276px', }); export const PageTree = () => { diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx index 1a084d7b3..e2c0c7def 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx @@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom'; import { useFlag } from '@toeverything/datasource/feature-flags'; import MoreActions from './MoreActions'; +import { DotIcon } from '../../dot-icon'; import { ActionButton, Counter, @@ -76,24 +77,25 @@ export const TreeItem = forwardRef( ghost={ghost} disableSelection={disableSelection} disableInteraction={disableInteraction} - spacing={`${indentationWidth * depth}px`} + spacing={`${indentationWidth * depth + 12}px`} + active={pageId === page_id} {...props} > - {childCount !== 0 && - (collapsed ? ( + {childCount !== 0 ? ( + collapsed ? ( ) : ( - ))} + ) + ) : ( + + )} - + {value} {BooleanPageTreeItemMoreActions && ( diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts index e05415ce8..0040e5bef 100644 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts @@ -15,11 +15,14 @@ export const Wrapper = styled('li')<{ indicator?: boolean; disableSelection?: boolean; disableInteraction?: boolean; + active?: boolean; }>` box-sizing: border-box; padding-left: ${({ spacing }) => spacing}; list-style: none; font-size: 14px; + background-color: ${({ active }) => (active ? '#f5f7f8' : 'transparent')}; + border-radius: 5px; ${({ clone, disableSelection }) => (clone || disableSelection) && @@ -126,8 +129,6 @@ export const ActionButton = styled('button')<{ fill?: string; }>` display: flex; - width: 12px; - padding: 0 15px; align-items: center; justify-content: center; flex: 0 0 auto; @@ -141,9 +142,10 @@ export const ActionButton = styled('button')<{ -webkit-tap-highlight-color: transparent; svg { + width: 20px; + height: 20px; flex: 0 0 auto; margin: auto; - height: 100%; overflow: visible; fill: #919eab; } @@ -182,8 +184,7 @@ export const TextLink = styled(Link, { appearance: none; text-decoration: none; user-select: none; - color: ${({ theme, active }) => - active ? theme.affine.palette.primary : 'unset'}; + color: #4c6275; `; export const TreeItemContent = styled('div')` @@ -195,7 +196,7 @@ export const TreeItemContent = styled('div')` align-items: center; justify-content: space-around; color: #4c6275; - padding-right: 0.5rem; + padding-right: 12px; overflow: hidden; &:hover { From 0a265f9981533cfa6e2055dbd247613ab3964553 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 17:06:16 +0800 Subject: [PATCH 46/95] refactor: refactor paste behavior (not support selection) --- .../clipboard/browser-clipboard-back.ts | 422 ++++++++++++++ .../src/editor/clipboard/browser-clipboard.ts | 322 +---------- .../editor-core/src/editor/clipboard/paste.ts | 535 ++++++++++++++++++ .../editor-core/src/editor/clipboard/utils.ts | 14 + 4 files changed, 991 insertions(+), 302 deletions(-) create mode 100644 libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts create mode 100644 libs/components/editor-core/src/editor/clipboard/paste.ts create mode 100644 libs/components/editor-core/src/editor/clipboard/utils.ts diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts new file mode 100644 index 000000000..6c6d4ad03 --- /dev/null +++ b/libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts @@ -0,0 +1,422 @@ +import { HooksRunner } from '../types'; +import { + OFFICE_CLIPBOARD_MIMETYPE, + InnerClipInfo, + ClipBlockInfo, +} from './types'; +import { Editor } from '../editor'; +import { AsyncBlock } from '../block'; +import ClipboardParse from './clipboard-parse'; +import { SelectInfo } from '../selection'; +import { + Protocol, + BlockFlavorKeys, + services, +} from '@toeverything/datasource/db-service'; +import { MarkdownParser } from './markdown-parse'; + +// todo needs to be a switch +const SUPPORT_MARKDOWN_PASTE = true; + +const shouldHandlerContinue = (event: Event, editor: Editor) => { + const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; + + if (event.defaultPrevented) { + return false; + } + if (filterNodes.includes((event.target as HTMLElement)?.tagName)) { + return false; + } + + return editor.selectionManager.currentSelectInfo.type !== 'None'; +}; + +enum ClipboardAction { + COPY = 'copy', + CUT = 'cut', + PASTE = 'paste', +} +class BrowserClipboard { + private _eventTarget: Element; + private _hooks: HooksRunner; + private _editor: Editor; + private _clipboardParse: ClipboardParse; + private _markdownParse: MarkdownParser; + + private static _optimalMimeType: string[] = [ + OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, + OFFICE_CLIPBOARD_MIMETYPE.HTML, + OFFICE_CLIPBOARD_MIMETYPE.TEXT, + ]; + + constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) { + this._eventTarget = eventTarget; + this._hooks = hooks; + this._editor = editor; + this._clipboardParse = new ClipboardParse(editor); + this._markdownParse = new MarkdownParser(); + this._initialize(); + } + + public getClipboardParse() { + return this._clipboardParse; + } + + private _initialize() { + this._handleCopy = this._handleCopy.bind(this); + this._handleCut = this._handleCut.bind(this); + this._handlePaste = this._handlePaste.bind(this); + + document.addEventListener(ClipboardAction.COPY, this._handleCopy); + document.addEventListener(ClipboardAction.CUT, this._handleCut); + document.addEventListener(ClipboardAction.PASTE, this._handlePaste); + this._eventTarget.addEventListener( + ClipboardAction.COPY, + this._handleCopy + ); + this._eventTarget.addEventListener( + ClipboardAction.CUT, + this._handleCut + ); + this._eventTarget.addEventListener( + ClipboardAction.PASTE, + this._handlePaste + ); + } + + private _handleCopy(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { + return; + } + + this._dispatchClipboardEvent(ClipboardAction.COPY, e as ClipboardEvent); + } + + private _handleCut(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { + return; + } + + this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent); + } + + private _handlePaste(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { + return; + } + e.stopPropagation(); + + const clipboardData = (e as ClipboardEvent).clipboardData; + + const isPureFile = this._isPureFileInClipboard(clipboardData); + + if (isPureFile) { + this._pasteFile(clipboardData); + } else { + this._pasteContent(clipboardData); + } + // this._editor.selectionManager + // .getSelectInfo() + // .then(selectionInfo => console.log(selectionInfo)); + } + + private _pasteContent(clipboardData: any) { + const originClip: { data: any; type: any } = this.getOptimalClip( + clipboardData + ) as { data: any; type: any }; + + const originTextClipData = clipboardData.getData( + OFFICE_CLIPBOARD_MIMETYPE.TEXT + ); + + let clipData = originClip['data']; + + if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { + clipData = this._excapeHtml(clipData); + } + + switch (originClip['type']) { + /** Protocol paste */ + case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: + this._firePasteEditAction(clipData); + break; + case OFFICE_CLIPBOARD_MIMETYPE.HTML: + this._pasteHtml(clipData, originTextClipData); + break; + case OFFICE_CLIPBOARD_MIMETYPE.TEXT: + this._pasteText(clipData, originTextClipData); + break; + + default: + break; + } + } + + private _pasteHtml(clipData: any, originTextClipData: any) { + if (SUPPORT_MARKDOWN_PASTE) { + const hasMarkdown = + this._markdownParse.checkIfTextContainsMd(originTextClipData); + if (hasMarkdown) { + try { + const convertedDataObj = + this._markdownParse.md2Html(originTextClipData); + if (convertedDataObj.isConverted) { + clipData = convertedDataObj.text; + } + } catch (e) { + console.error(e); + clipData = originTextClipData; + } + } + } + + const blocks = this._clipboardParse.html2blocks(clipData); + this.insert_blocks(blocks); + } + + private _pasteText(clipData: any, originTextClipData: any) { + const blocks = this._clipboardParse.text2blocks(clipData); + this.insert_blocks(blocks); + } + + private async _pasteFile(clipboardData: any) { + const file = this._getImageFile(clipboardData); + if (file) { + const result = await services.api.file.create({ + workspace: this._editor.workspace, + file: file, + }); + const blockInfo: ClipBlockInfo = { + type: 'image', + properties: { + image: { + value: result.id, + name: file.name, + size: file.size, + type: file.type, + }, + }, + children: [] as ClipBlockInfo[], + }; + this.insert_blocks([blockInfo]); + } + } + + private _getImageFile(clipboardData: any) { + const files = clipboardData.files; + if (files && files[0] && files[0].type.indexOf('image') > -1) { + return files[0]; + } + return; + } + + private _excapeHtml(data: any, onlySpace?: any) { + if (!onlySpace) { + // TODO: + // data = string.htmlEscape(data); + // data = data.replace(/\n/g, '
    '); + } + + // data = data.replace(/ /g, ' '); + // data = data.replace(/\t/g, '    '); + return data; + } + + public getOptimalClip(clipboardData: any) { + const mimeTypeArr = BrowserClipboard._optimalMimeType; + + for (let i = 0; i < mimeTypeArr.length; i++) { + const data = + clipboardData[mimeTypeArr[i]] || + clipboardData.getData(mimeTypeArr[i]); + + if (data) { + return { + type: mimeTypeArr[i], + data: data, + }; + } + } + + return ''; + } + + private _isPureFileInClipboard(clipboardData: DataTransfer) { + const types = clipboardData.types; + + return ( + (types.length === 1 && types[0] === 'Files') || + (types.length === 2 && + (types.includes('text/plain') || types.includes('text/html')) && + types.includes('Files')) + ); + } + + private async _firePasteEditAction(clipboardData: any) { + const clipInfo: InnerClipInfo = JSON.parse(clipboardData); + clipInfo && this.insert_blocks(clipInfo.data, clipInfo.select); + } + + private _canEditText(type: BlockFlavorKeys) { + return ( + type === Protocol.Block.Type.page || + type === Protocol.Block.Type.text || + type === Protocol.Block.Type.heading1 || + type === Protocol.Block.Type.heading2 || + type === Protocol.Block.Type.heading3 || + type === Protocol.Block.Type.quote || + type === Protocol.Block.Type.todo || + type === Protocol.Block.Type.code || + type === Protocol.Block.Type.callout || + type === Protocol.Block.Type.numbered || + type === Protocol.Block.Type.bullet + ); + } + + // TODO: cursor positioning problem + private async insert_blocks(blocks: ClipBlockInfo[], select?: SelectInfo) { + if (blocks.length === 0) { + return; + } + + const cur_select_info = + await this._editor.selectionManager.getSelectInfo(); + if (cur_select_info.blocks.length === 0) { + return; + } + + let beginIndex = 0; + const curNodeId = + cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId; + let curBlock = await this._editor.getBlockById(curNodeId); + const blockView = this._editor.getView(curBlock.type); + if ( + cur_select_info.type === 'Range' && + curBlock.type === 'text' && + blockView.isEmpty(curBlock) + ) { + await curBlock.setType(blocks[0].type); + curBlock.setProperties(blocks[0].properties); + await this._pasteChildren(curBlock, blocks[0].children); + beginIndex = 1; + } else if ( + select?.type === 'Range' && + cur_select_info.type === 'Range' && + this._canEditText(curBlock.type) && + this._canEditText(blocks[0].type) + ) { + if ( + cur_select_info.blocks.length > 0 && + cur_select_info.blocks[0].startInfo + ) { + const startInfo = cur_select_info.blocks[0].startInfo; + const endInfo = cur_select_info.blocks[0].endInfo; + const curTextValue = curBlock.getProperty('text').value; + const pre_curTextValue = curTextValue.slice( + 0, + startInfo.arrayIndex + ); + const lastCurTextValue = curTextValue.slice( + endInfo.arrayIndex + 1 + ); + const preText = curTextValue[ + startInfo.arrayIndex + ].text.substring(0, startInfo.offset); + const lastText = curTextValue[ + endInfo.arrayIndex + ].text.substring(endInfo.offset); + + let lastBlock: ClipBlockInfo = blocks[blocks.length - 1]; + if (!this._canEditText(lastBlock.type)) { + lastBlock = { type: 'text', children: [] }; + blocks.push(lastBlock); + } + const lastValues = lastBlock.properties?.text?.value; + lastText && lastValues.push({ text: lastText }); + lastValues.push(...lastCurTextValue); + lastBlock.properties = { + text: { value: lastValues }, + }; + + const insertInfo = blocks[0].properties.text; + preText && pre_curTextValue.push({ text: preText }); + pre_curTextValue.push(...insertInfo.value); + this._editor.blockHelper.setBlockBlur(curNodeId); + setTimeout(async () => { + const curBlock = await this._editor.getBlockById(curNodeId); + curBlock.setProperties({ + text: { value: pre_curTextValue }, + }); + await this._pasteChildren(curBlock, blocks[0].children); + }, 0); + beginIndex = 1; + } + } + + for (let i = beginIndex; i < blocks.length; i++) { + const nextBlock = await this._editor.createBlock(blocks[i].type); + nextBlock.setProperties(blocks[i].properties); + if (curBlock.type === 'page') { + curBlock.prepend(nextBlock); + } else { + curBlock.after(nextBlock); + } + + await this._pasteChildren(nextBlock, blocks[i].children); + curBlock = nextBlock; + } + } + + private async _pasteChildren(parent: AsyncBlock, children: any[]) { + for (let i = 0; i < children.length; i++) { + const nextBlock = await this._editor.createBlock(children[i].type); + nextBlock.setProperties(children[i].properties); + await parent.append(nextBlock); + await this._pasteChildren(nextBlock, children[i].children); + } + } + + private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) { + switch (action) { + case ClipboardAction.COPY: + this._hooks.beforeCopy(e); + break; + + case ClipboardAction.CUT: + this._hooks.beforeCut(e); + break; + } + } + + private _dispatchClipboardEvent( + action: ClipboardAction, + e: ClipboardEvent + ) { + this._preCopyCut(action, e); + } + + dispose() { + document.removeEventListener(ClipboardAction.COPY, this._handleCopy); + document.removeEventListener(ClipboardAction.CUT, this._handleCut); + document.removeEventListener(ClipboardAction.PASTE, this._handlePaste); + this._eventTarget.removeEventListener( + ClipboardAction.COPY, + this._handleCopy + ); + this._eventTarget.removeEventListener( + ClipboardAction.CUT, + this._handleCut + ); + this._eventTarget.removeEventListener( + ClipboardAction.PASTE, + this._handlePaste + ); + this._clipboardParse.dispose(); + this._clipboardParse = null; + this._eventTarget = null; + this._hooks = null; + this._editor = null; + } +} + +export { BrowserClipboard }; diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts index 6c6d4ad03..64eecbc5c 100644 --- a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts +++ b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts @@ -14,40 +14,24 @@ import { services, } from '@toeverything/datasource/db-service'; import { MarkdownParser } from './markdown-parse'; - +import { shouldHandlerContinue } from './utils'; +import { Paste } from './paste'; // todo needs to be a switch -const SUPPORT_MARKDOWN_PASTE = true; - -const shouldHandlerContinue = (event: Event, editor: Editor) => { - const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; - - if (event.defaultPrevented) { - return false; - } - if (filterNodes.includes((event.target as HTMLElement)?.tagName)) { - return false; - } - - return editor.selectionManager.currentSelectInfo.type !== 'None'; -}; enum ClipboardAction { COPY = 'copy', CUT = 'cut', PASTE = 'paste', } + +//TODO: need to consider the cursor position after inserting the children class BrowserClipboard { private _eventTarget: Element; private _hooks: HooksRunner; private _editor: Editor; private _clipboardParse: ClipboardParse; private _markdownParse: MarkdownParser; - - private static _optimalMimeType: string[] = [ - OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, - OFFICE_CLIPBOARD_MIMETYPE.HTML, - OFFICE_CLIPBOARD_MIMETYPE.TEXT, - ]; + private _paste: Paste; constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) { this._eventTarget = eventTarget; @@ -55,6 +39,11 @@ class BrowserClipboard { this._editor = editor; this._clipboardParse = new ClipboardParse(editor); this._markdownParse = new MarkdownParser(); + this._paste = new Paste( + editor, + this._clipboardParse, + this._markdownParse + ); this._initialize(); } @@ -65,11 +54,13 @@ class BrowserClipboard { private _initialize() { this._handleCopy = this._handleCopy.bind(this); this._handleCut = this._handleCut.bind(this); - this._handlePaste = this._handlePaste.bind(this); document.addEventListener(ClipboardAction.COPY, this._handleCopy); document.addEventListener(ClipboardAction.CUT, this._handleCut); - document.addEventListener(ClipboardAction.PASTE, this._handlePaste); + document.addEventListener( + ClipboardAction.PASTE, + this._paste.handlePaste + ); this._eventTarget.addEventListener( ClipboardAction.COPY, this._handleCopy @@ -80,7 +71,7 @@ class BrowserClipboard { ); this._eventTarget.addEventListener( ClipboardAction.PASTE, - this._handlePaste + this._paste.handlePaste ); } @@ -100,282 +91,6 @@ class BrowserClipboard { this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent); } - private _handlePaste(e: Event) { - if (!shouldHandlerContinue(e, this._editor)) { - return; - } - e.stopPropagation(); - - const clipboardData = (e as ClipboardEvent).clipboardData; - - const isPureFile = this._isPureFileInClipboard(clipboardData); - - if (isPureFile) { - this._pasteFile(clipboardData); - } else { - this._pasteContent(clipboardData); - } - // this._editor.selectionManager - // .getSelectInfo() - // .then(selectionInfo => console.log(selectionInfo)); - } - - private _pasteContent(clipboardData: any) { - const originClip: { data: any; type: any } = this.getOptimalClip( - clipboardData - ) as { data: any; type: any }; - - const originTextClipData = clipboardData.getData( - OFFICE_CLIPBOARD_MIMETYPE.TEXT - ); - - let clipData = originClip['data']; - - if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { - clipData = this._excapeHtml(clipData); - } - - switch (originClip['type']) { - /** Protocol paste */ - case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: - this._firePasteEditAction(clipData); - break; - case OFFICE_CLIPBOARD_MIMETYPE.HTML: - this._pasteHtml(clipData, originTextClipData); - break; - case OFFICE_CLIPBOARD_MIMETYPE.TEXT: - this._pasteText(clipData, originTextClipData); - break; - - default: - break; - } - } - - private _pasteHtml(clipData: any, originTextClipData: any) { - if (SUPPORT_MARKDOWN_PASTE) { - const hasMarkdown = - this._markdownParse.checkIfTextContainsMd(originTextClipData); - if (hasMarkdown) { - try { - const convertedDataObj = - this._markdownParse.md2Html(originTextClipData); - if (convertedDataObj.isConverted) { - clipData = convertedDataObj.text; - } - } catch (e) { - console.error(e); - clipData = originTextClipData; - } - } - } - - const blocks = this._clipboardParse.html2blocks(clipData); - this.insert_blocks(blocks); - } - - private _pasteText(clipData: any, originTextClipData: any) { - const blocks = this._clipboardParse.text2blocks(clipData); - this.insert_blocks(blocks); - } - - private async _pasteFile(clipboardData: any) { - const file = this._getImageFile(clipboardData); - if (file) { - const result = await services.api.file.create({ - workspace: this._editor.workspace, - file: file, - }); - const blockInfo: ClipBlockInfo = { - type: 'image', - properties: { - image: { - value: result.id, - name: file.name, - size: file.size, - type: file.type, - }, - }, - children: [] as ClipBlockInfo[], - }; - this.insert_blocks([blockInfo]); - } - } - - private _getImageFile(clipboardData: any) { - const files = clipboardData.files; - if (files && files[0] && files[0].type.indexOf('image') > -1) { - return files[0]; - } - return; - } - - private _excapeHtml(data: any, onlySpace?: any) { - if (!onlySpace) { - // TODO: - // data = string.htmlEscape(data); - // data = data.replace(/\n/g, '
    '); - } - - // data = data.replace(/ /g, ' '); - // data = data.replace(/\t/g, '    '); - return data; - } - - public getOptimalClip(clipboardData: any) { - const mimeTypeArr = BrowserClipboard._optimalMimeType; - - for (let i = 0; i < mimeTypeArr.length; i++) { - const data = - clipboardData[mimeTypeArr[i]] || - clipboardData.getData(mimeTypeArr[i]); - - if (data) { - return { - type: mimeTypeArr[i], - data: data, - }; - } - } - - return ''; - } - - private _isPureFileInClipboard(clipboardData: DataTransfer) { - const types = clipboardData.types; - - return ( - (types.length === 1 && types[0] === 'Files') || - (types.length === 2 && - (types.includes('text/plain') || types.includes('text/html')) && - types.includes('Files')) - ); - } - - private async _firePasteEditAction(clipboardData: any) { - const clipInfo: InnerClipInfo = JSON.parse(clipboardData); - clipInfo && this.insert_blocks(clipInfo.data, clipInfo.select); - } - - private _canEditText(type: BlockFlavorKeys) { - return ( - type === Protocol.Block.Type.page || - type === Protocol.Block.Type.text || - type === Protocol.Block.Type.heading1 || - type === Protocol.Block.Type.heading2 || - type === Protocol.Block.Type.heading3 || - type === Protocol.Block.Type.quote || - type === Protocol.Block.Type.todo || - type === Protocol.Block.Type.code || - type === Protocol.Block.Type.callout || - type === Protocol.Block.Type.numbered || - type === Protocol.Block.Type.bullet - ); - } - - // TODO: cursor positioning problem - private async insert_blocks(blocks: ClipBlockInfo[], select?: SelectInfo) { - if (blocks.length === 0) { - return; - } - - const cur_select_info = - await this._editor.selectionManager.getSelectInfo(); - if (cur_select_info.blocks.length === 0) { - return; - } - - let beginIndex = 0; - const curNodeId = - cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId; - let curBlock = await this._editor.getBlockById(curNodeId); - const blockView = this._editor.getView(curBlock.type); - if ( - cur_select_info.type === 'Range' && - curBlock.type === 'text' && - blockView.isEmpty(curBlock) - ) { - await curBlock.setType(blocks[0].type); - curBlock.setProperties(blocks[0].properties); - await this._pasteChildren(curBlock, blocks[0].children); - beginIndex = 1; - } else if ( - select?.type === 'Range' && - cur_select_info.type === 'Range' && - this._canEditText(curBlock.type) && - this._canEditText(blocks[0].type) - ) { - if ( - cur_select_info.blocks.length > 0 && - cur_select_info.blocks[0].startInfo - ) { - const startInfo = cur_select_info.blocks[0].startInfo; - const endInfo = cur_select_info.blocks[0].endInfo; - const curTextValue = curBlock.getProperty('text').value; - const pre_curTextValue = curTextValue.slice( - 0, - startInfo.arrayIndex - ); - const lastCurTextValue = curTextValue.slice( - endInfo.arrayIndex + 1 - ); - const preText = curTextValue[ - startInfo.arrayIndex - ].text.substring(0, startInfo.offset); - const lastText = curTextValue[ - endInfo.arrayIndex - ].text.substring(endInfo.offset); - - let lastBlock: ClipBlockInfo = blocks[blocks.length - 1]; - if (!this._canEditText(lastBlock.type)) { - lastBlock = { type: 'text', children: [] }; - blocks.push(lastBlock); - } - const lastValues = lastBlock.properties?.text?.value; - lastText && lastValues.push({ text: lastText }); - lastValues.push(...lastCurTextValue); - lastBlock.properties = { - text: { value: lastValues }, - }; - - const insertInfo = blocks[0].properties.text; - preText && pre_curTextValue.push({ text: preText }); - pre_curTextValue.push(...insertInfo.value); - this._editor.blockHelper.setBlockBlur(curNodeId); - setTimeout(async () => { - const curBlock = await this._editor.getBlockById(curNodeId); - curBlock.setProperties({ - text: { value: pre_curTextValue }, - }); - await this._pasteChildren(curBlock, blocks[0].children); - }, 0); - beginIndex = 1; - } - } - - for (let i = beginIndex; i < blocks.length; i++) { - const nextBlock = await this._editor.createBlock(blocks[i].type); - nextBlock.setProperties(blocks[i].properties); - if (curBlock.type === 'page') { - curBlock.prepend(nextBlock); - } else { - curBlock.after(nextBlock); - } - - await this._pasteChildren(nextBlock, blocks[i].children); - curBlock = nextBlock; - } - } - - private async _pasteChildren(parent: AsyncBlock, children: any[]) { - for (let i = 0; i < children.length; i++) { - const nextBlock = await this._editor.createBlock(children[i].type); - nextBlock.setProperties(children[i].properties); - await parent.append(nextBlock); - await this._pasteChildren(nextBlock, children[i].children); - } - } - private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) { switch (action) { case ClipboardAction.COPY: @@ -398,7 +113,10 @@ class BrowserClipboard { dispose() { document.removeEventListener(ClipboardAction.COPY, this._handleCopy); document.removeEventListener(ClipboardAction.CUT, this._handleCut); - document.removeEventListener(ClipboardAction.PASTE, this._handlePaste); + document.removeEventListener( + ClipboardAction.PASTE, + this._paste.handlePaste + ); this._eventTarget.removeEventListener( ClipboardAction.COPY, this._handleCopy @@ -409,7 +127,7 @@ class BrowserClipboard { ); this._eventTarget.removeEventListener( ClipboardAction.PASTE, - this._handlePaste + this._paste.handlePaste ); this._clipboardParse.dispose(); this._clipboardParse = null; diff --git a/libs/components/editor-core/src/editor/clipboard/paste.ts b/libs/components/editor-core/src/editor/clipboard/paste.ts new file mode 100644 index 000000000..022b3de21 --- /dev/null +++ b/libs/components/editor-core/src/editor/clipboard/paste.ts @@ -0,0 +1,535 @@ +import { HooksRunner } from '../types'; +import { + OFFICE_CLIPBOARD_MIMETYPE, + InnerClipInfo, + ClipBlockInfo, +} from './types'; +import { Editor } from '../editor'; +import { AsyncBlock } from '../block'; +import ClipboardParse from './clipboard-parse'; +import { SelectInfo } from '../selection'; +import { + Protocol, + BlockFlavorKeys, + services, +} from '@toeverything/datasource/db-service'; +import { MarkdownParser } from './markdown-parse'; +import { shouldHandlerContinue } from './utils'; +const SUPPORT_MARKDOWN_PASTE = true; + +type TextValueItem = { + text: string; + [key: string]: any; +}; + +export class Paste { + private _editor: Editor; + private _markdownParse: MarkdownParser; + private _clipboardParse: ClipboardParse; + + constructor( + editor: Editor, + clipboardParse: ClipboardParse, + markdownParse: MarkdownParser + ) { + this._markdownParse = markdownParse; + this._clipboardParse = clipboardParse; + this._editor = editor; + this.handlePaste = this.handlePaste.bind(this); + } + private static _optimalMimeType: string[] = [ + OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, + OFFICE_CLIPBOARD_MIMETYPE.HTML, + OFFICE_CLIPBOARD_MIMETYPE.TEXT, + ]; + public handlePaste(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { + return; + } + e.stopPropagation(); + + const clipboardData = (e as ClipboardEvent).clipboardData; + + const isPureFile = Paste._isPureFileInClipboard(clipboardData); + if (isPureFile) { + this._pasteFile(clipboardData); + } else { + this._pasteContent(clipboardData); + } + } + public getOptimalClip(clipboardData: any) { + const mimeTypeArr = Paste._optimalMimeType; + + for (let i = 0; i < mimeTypeArr.length; i++) { + const data = + clipboardData[mimeTypeArr[i]] || + clipboardData.getData(mimeTypeArr[i]); + + if (data) { + return { + type: mimeTypeArr[i], + data: data, + }; + } + } + + return ''; + } + + private _pasteContent(clipboardData: any) { + const originClip: { data: any; type: any } = this.getOptimalClip( + clipboardData + ) as { data: any; type: any }; + + const originTextClipData = clipboardData.getData( + OFFICE_CLIPBOARD_MIMETYPE.TEXT + ); + + let clipData = originClip['data']; + + if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { + clipData = Paste._excapeHtml(clipData); + } + + switch (originClip['type']) { + /** Protocol paste */ + case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: + this._firePasteEditAction(clipData); + break; + case OFFICE_CLIPBOARD_MIMETYPE.HTML: + this._pasteHtml(clipData, originTextClipData); + break; + case OFFICE_CLIPBOARD_MIMETYPE.TEXT: + this._pasteText(clipData, originTextClipData); + break; + + default: + break; + } + } + private async _firePasteEditAction(clipboardData: any) { + const clipInfo: InnerClipInfo = JSON.parse(clipboardData); + clipInfo && this._insertBlocks(clipInfo.data, clipInfo.select); + } + private async _pasteFile(clipboardData: any) { + const file = Paste._getImageFile(clipboardData); + if (file) { + const result = await services.api.file.create({ + workspace: this._editor.workspace, + file: file, + }); + const blockInfo: ClipBlockInfo = { + type: 'image', + properties: { + image: { + value: result.id, + name: file.name, + size: file.size, + type: file.type, + }, + }, + children: [] as ClipBlockInfo[], + }; + await this._insertBlocks([blockInfo]); + } + } + private static _isPureFileInClipboard(clipboardData: DataTransfer) { + const types = clipboardData.types; + + return ( + (types.length === 1 && types[0] === 'Files') || + (types.length === 2 && + (types.includes('text/plain') || types.includes('text/html')) && + types.includes('Files')) + ); + } + + private static _isTextEditBlock(type: BlockFlavorKeys) { + return ( + type === Protocol.Block.Type.page || + type === Protocol.Block.Type.text || + type === Protocol.Block.Type.heading1 || + type === Protocol.Block.Type.heading2 || + type === Protocol.Block.Type.heading3 || + type === Protocol.Block.Type.quote || + type === Protocol.Block.Type.todo || + type === Protocol.Block.Type.code || + type === Protocol.Block.Type.callout || + type === Protocol.Block.Type.numbered || + type === Protocol.Block.Type.bullet + ); + } + + private async _insertBlocks( + blocks: ClipBlockInfo[], + pasteSelect?: SelectInfo + ) { + if (blocks.length === 0) { + return; + } + const currentSelectInfo = + await this._editor.selectionManager.getSelectInfo(); + + // 当选区在某一个block中时 + // select?.type === 'Range' + if (currentSelectInfo.type === 'Range') { + // 当 currentSelectInfo.type === 'Range' 时，光标选中的block必然只有一个 + const selectedBlock = await this._editor.getBlockById( + currentSelectInfo.blocks[0].blockId + ); + const isSelectedBlockEdit = Paste._isTextEditBlock( + selectedBlock.type + ); + if (isSelectedBlockEdit) { + const shouldSplitBlock = + blocks.length > 1 || + !Paste._isTextEditBlock(blocks[0].type); + const pureText = !shouldSplitBlock + ? blocks[0].properties.text.value + : [{ text: '' }]; + this._editor.blockHelper.setBlockBlur( + currentSelectInfo.blocks[0].blockId + ); + + const { startInfo, endInfo } = currentSelectInfo.blocks[0]; + + // 选中的当前的可编辑block的文字信息 + const currentTextValue = + selectedBlock.getProperty('text').value; + // 当光标选区跨越不同样式文字时 + if (startInfo?.arrayIndex !== endInfo?.arrayIndex) { + if (shouldSplitBlock) { + const newTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i < startInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === startInfo?.arrayIndex) { + newTextValue.push({ + text: text.slice(0, startInfo?.offset), + ...props, + }); + } + return newTextValue; + }, + [] + ); + const nextTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i > endInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === endInfo?.arrayIndex) { + newTextValue.push({ + text: text.slice(endInfo?.offset), + ...props, + }); + } + return newTextValue; + }, + [] + ); + + selectedBlock.setProperties({ + text: { + value: newTextValue, + }, + }); + const pasteBlocks = await this._createBlocks(blocks); + pasteBlocks.forEach(block => { + selectedBlock.after(block); + }); + const nextBlock = await this._editor.createBlock( + selectedBlock?.type + ); + nextBlock.setProperties({ + text: { + value: nextTextValue, + }, + }); + pasteBlocks[pasteBlocks.length - 1].after(nextBlock); + + this._setEndSelectToBlock( + pasteBlocks[pasteBlocks.length - 1].id + ); + } else { + const newTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if ( + i < startInfo?.arrayIndex || + i > endInfo?.arrayIndex + ) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === startInfo?.arrayIndex) { + newTextValue.push({ + text: text.slice(0, startInfo?.offset), + ...props, + }); + } else if (i === endInfo?.arrayIndex) { + newTextValue.push({ + text: text.slice(endInfo?.offset), + ...props, + }); + } + return newTextValue; + }, + [] + ); + newTextValue.splice( + startInfo?.arrayIndex + 1, + 0, + ...pureText + ); + selectedBlock.setProperties({ + text: { + value: newTextValue, + }, + }); + } + } + // 当光标选区没有跨越不同样式文字时 + if (startInfo?.arrayIndex === endInfo?.arrayIndex) { + if (shouldSplitBlock) { + const newTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i < startInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === startInfo?.arrayIndex) { + newTextValue.push({ + text: `${text.slice( + 0, + startInfo?.offset + )}`, + ...props, + }); + } + return newTextValue; + }, + [] + ); + + const nextTextValue = currentTextValue.reduce( + ( + nextTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i > endInfo?.arrayIndex) { + nextTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === endInfo?.arrayIndex) { + nextTextValue.push({ + text: `${text.slice(endInfo?.offset)}`, + ...props, + }); + } + return nextTextValue; + }, + [] + ); + selectedBlock.setProperties({ + text: { + value: newTextValue, + }, + }); + const pasteBlocks = await this._createBlocks(blocks); + pasteBlocks.forEach((block: AsyncBlock) => { + selectedBlock.after(block); + }); + const nextBlock = await this._editor.createBlock( + selectedBlock?.type + ); + nextBlock.setProperties({ + text: { + value: nextTextValue, + }, + }); + pasteBlocks[pasteBlocks.length - 1].after(nextBlock); + + this._setEndSelectToBlock( + pasteBlocks[pasteBlocks.length - 1].id + ); + } else { + const newTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i !== startInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === startInfo?.arrayIndex) { + newTextValue.push({ + text: `${text.slice( + 0, + startInfo?.offset + )}`, + ...props, + }); + newTextValue.push(...pureText); + + newTextValue.push({ + text: `${text.slice(endInfo?.offset)}`, + ...props, + }); + } + return newTextValue; + }, + [] + ); + selectedBlock.setProperties({ + text: { + value: newTextValue, + }, + }); + + const pastedTextLength = pureText.reduce( + (sumLength: number, textItem: TextValueItem) => { + sumLength += textItem.text.length; + return sumLength; + }, + 0 + ); + + // this._editor.selectionManager.moveCursor( + // window.getSelection().getRangeAt(0), + // pastedTextLength, + // selectedBlock.id + // ); + } + } + } else { + const pasteBlocks = await this._createBlocks(blocks); + pasteBlocks.forEach(block => { + selectedBlock.after(block); + }); + this._setEndSelectToBlock( + pasteBlocks[pasteBlocks.length - 1].id + ); + } + } + + if (currentSelectInfo.type === 'Block') { + const selectedBlock = await this._editor.getBlockById( + currentSelectInfo.blocks[currentSelectInfo.blocks.length - 1] + .blockId + ); + const pasteBlocks = await this._createBlocks(blocks); + + let groupBlock: AsyncBlock; + if ( + selectedBlock?.type === 'group' || + selectedBlock?.type === 'page' + ) { + groupBlock = await this._editor.createBlock('group'); + pasteBlocks.forEach(block => { + groupBlock.append(block); + }); + await selectedBlock.after(groupBlock); + } else { + pasteBlocks.forEach(block => { + selectedBlock.after(block); + }); + } + this._setEndSelectToBlock(pasteBlocks[pasteBlocks.length - 1].id); + } + } + + private _setEndSelectToBlock(blockId: string) { + setTimeout(() => { + this._editor.selectionManager.activeNodeByNodeId(blockId, 'end'); + }, 100); + } + + private async _createBlocks(blocks: ClipBlockInfo[], parentId?: string) { + return Promise.all( + blocks.map(async clipBlockInfo => { + const block = await this._editor.createBlock( + clipBlockInfo.type + ); + block?.setProperties(clipBlockInfo.properties); + await this._createBlocks(clipBlockInfo.children, block?.id); + return block; + }) + ); + } + + private async _pasteHtml(clipData: any, originTextClipData: any) { + if (SUPPORT_MARKDOWN_PASTE) { + const hasMarkdown = + this._markdownParse.checkIfTextContainsMd(originTextClipData); + if (hasMarkdown) { + try { + const convertedDataObj = + this._markdownParse.md2Html(originTextClipData); + if (convertedDataObj.isConverted) { + clipData = convertedDataObj.text; + } + } catch (e) { + console.error(e); + clipData = originTextClipData; + } + } + } + + const blocks = this._clipboardParse.html2blocks(clipData); + + await this._insertBlocks(blocks); + } + + private async _pasteText(clipData: any, originTextClipData: any) { + const blocks = this._clipboardParse.text2blocks(clipData); + await this._insertBlocks(blocks); + } + + private static _getImageFile(clipboardData: any) { + const files = clipboardData.files; + if (files && files[0] && files[0].type.indexOf('image') > -1) { + return files[0]; + } + return; + } + + private static _excapeHtml(data: any, onlySpace?: any) { + if (!onlySpace) { + // TODO: + // data = string.htmlEscape(data); + // data = data.replace(/\n/g, '
    '); + } + + // data = data.replace(/ /g, ' '); + // data = data.replace(/\t/g, '    '); + return data; + } +} diff --git a/libs/components/editor-core/src/editor/clipboard/utils.ts b/libs/components/editor-core/src/editor/clipboard/utils.ts new file mode 100644 index 000000000..7b4d420a3 --- /dev/null +++ b/libs/components/editor-core/src/editor/clipboard/utils.ts @@ -0,0 +1,14 @@ +import {Editor} from "../editor"; + +export const shouldHandlerContinue = (event: Event, editor: Editor) => { + const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; + + if (event.defaultPrevented) { + return false; + } + if (filterNodes.includes((event.target as HTMLElement)?.tagName)) { + return false; + } + + return editor.selectionManager.currentSelectInfo.type !== 'None'; +}; From 99355569472557dbfaa4e05c49ed02b986337e05 Mon Sep 17 00:00:00 2001 From: alt0 Date: Thu, 11 Aug 2022 17:40:50 +0800 Subject: [PATCH 47/95] fix: change edgeless tool selected color --- .../board-draw/src/components/tools-panel/ToolsPanel.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx index 48550054e..e8d10e1f7 100644 --- a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx +++ b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx @@ -6,6 +6,7 @@ import { Tooltip, PopoverContainer, IconButton, + useTheme, } from '@toeverything/components/ui'; import { FrameIcon, @@ -71,6 +72,7 @@ export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => { const activeTool = app.useStore(activeToolSelector); const isToolLocked = app.useStore(toolLockedSelector); + const theme = useTheme(); return ( = ({ app }) => { style={{ color: activeTool === type - ? 'blue' + ? theme.affine.palette + .primary : '', }} onClick={() => { From 5e3f914182689d940bb6e0d4ea76c1696cb44e83 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 18:52:31 +0800 Subject: [PATCH 48/95] fix: fix ui problems --- .../block-pendant/BlockPendantProvider.tsx | 22 +++++-- .../CreatePendantPanel.tsx | 2 +- .../UpdatePendantPanel.tsx | 2 +- libs/components/ui/src/select/Select.tsx | 64 +++++++++++-------- 4 files changed, 57 insertions(+), 33 deletions(-) diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx index 48de13f4b..031aa5e3a 100644 --- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx +++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx @@ -4,6 +4,7 @@ import type { AsyncBlock } from '../editor'; import { PendantPopover } from './pendant-popover'; import { PendantRender } from './pendant-render'; import { useRef } from 'react'; +import { getRecastItemValue, useRecastBlockMeta } from '../recast-block'; /** * @deprecated */ @@ -16,15 +17,26 @@ export const BlockPendantProvider: FC> = ({ children, }) => { const triggerRef = useRef(); + const { getProperties } = useRecastBlockMeta(); + const properties = getProperties(); + const { getValue } = getRecastItemValue(block); + const showTriggerLine = + properties.filter(property => getValue(property.id)).length === 0; + return ( {children} - - - - - + {showTriggerLine ? ( + + + + + + ) : null} diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx index 5a483adb5..6135d2b3c 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx @@ -81,7 +81,7 @@ export const CreatePendantPanel = ({ setFieldName(e.target.value); }} endAdornment={ - + diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx index 796ef39e0..2ff5515ba 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx @@ -70,7 +70,7 @@ export const UpdatePendantPanel = ({ setFieldName(e.target.value); }} endAdornment={ - + diff --git a/libs/components/ui/src/select/Select.tsx b/libs/components/ui/src/select/Select.tsx index d1f3141e6..607c3bfa6 100644 --- a/libs/components/ui/src/select/Select.tsx +++ b/libs/components/ui/src/select/Select.tsx @@ -12,6 +12,7 @@ import SelectUnstyled, { } from '@mui/base/SelectUnstyled'; /* eslint-disable no-restricted-imports */ import PopperUnstyled from '@mui/base/PopperUnstyled'; +import { ArrowDropDownIcon } from '@toeverything/components/icons'; import { styled } from '../styled'; type ExtendSelectProps = { @@ -41,20 +42,29 @@ export const Select = forwardRef(function CustomSelect( const { width = '100%', style, listboxStyle, placeholder } = props; const components: SelectUnstyledProps['components'] = { // Root: generateStyledRoot({ width, ...style }), - Root: forwardRef((rootProps, rootRef) => ( - - {rootProps.children || ( - {placeholder} - )} - - )), + Root: forwardRef((rootProps, rootRef) => { + const { + ownerState: { open }, + } = rootProps; + + return ( + + {rootProps.children || ( + {placeholder} + )} + + + + + ); + }), Listbox: forwardRef((listboxProps, listboxRef) => ( ( RefAttributes ) => JSX.Element; +const StyledSelectedArrowWrapper = styled('div')<{ open: boolean }>( + ({ open }) => ({ + position: 'absolute', + top: '0', + bottom: '0', + right: '12px', + margin: 'auto', + lineHeight: '32px', + display: 'flex', + alignItems: 'center', + transform: `rotate(${open ? '180deg' : '0'})`, + }) +); + const StyledRoot = styled('div')(({ theme }) => ({ height: '32px', border: `1px solid ${theme.affine.palette.borderColor}`, @@ -95,18 +119,6 @@ const StyledRoot = styled('div')(({ theme }) => ({ [`&.${selectUnstyledClasses.expanded}`]: { borderColor: `${theme.affine.palette.primary}`, - '&::after': { - content: '"▴"', - }, - }, - '&::after': { - content: '"▾"', - position: ' absolute', - top: '0', - bottom: '0', - right: '12px', - margin: 'auto', - lineHeight: '32px', }, })); From 11c7e3ad83b49eb2944d1864e51d9be678982164 Mon Sep 17 00:00:00 2001 From: austaras Date: Thu, 11 Aug 2022 19:00:52 +0800 Subject: [PATCH 49/95] fix(editor): gap between block --- libs/components/account/src/login/fs.tsx | 1 + .../editor-blocks/src/blocks/group/GroupView.tsx | 4 +++- .../src/components/BlockContainer/BlockContainer.tsx | 1 + .../editor-core/src/block-pendant/BlockPendantProvider.tsx | 4 ++-- .../src/menu/left-menu/LeftMenuDraggable.tsx | 7 ++++--- 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/libs/components/account/src/login/fs.tsx b/libs/components/account/src/login/fs.tsx index 99f1252db..07d6465ba 100644 --- a/libs/components/account/src/login/fs.tsx +++ b/libs/components/account/src/login/fs.tsx @@ -76,6 +76,7 @@ export const FileSystem = () => { onSelected(); } catch (e) { setError(true); + onSelected(); setTimeout(() => setError(false), 3000); } }} diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx index 9b0f0f910..b990d1aa5 100644 --- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx +++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx @@ -1,6 +1,8 @@ import { addNewGroup, + LINE_GAP, RecastScene, + TAG_GAP, useCurrentView, useOnSelect, } from '@toeverything/components/editor-core'; @@ -61,7 +63,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>( ({ isSelect, theme }) => ({ background: theme.affine.palette.white, border: '2px solid rgba(236,241,251,.5)', - padding: `15px 16px 0 16px`, + padding: `15px 16px ${LINE_GAP - TAG_GAP * 2}px 16px`, borderRadius: '10px', ...(isSelect ? { diff --git a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx index f03cd9ffe..dbe12277b 100644 --- a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx +++ b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx @@ -27,5 +27,6 @@ export const BlockContainer: FC = function ({ export const Container = styled('div')<{ selected: boolean }>( ({ selected, theme }) => ({ backgroundColor: selected ? theme.affine.palette.textSelected : '', + marginBottom: '2px', }) ); diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx index 66cf4001a..71b28ead6 100644 --- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx +++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx @@ -28,7 +28,7 @@ export const BlockPendantProvider: FC> = ({ }; export const LINE_GAP = 16; -const TAG_GAP = 4; +export const TAG_GAP = 4; const StyledTriggerLine = styled('div')({ padding: `${TAG_GAP}px 0`, @@ -63,7 +63,7 @@ const StyledTriggerLine = styled('div')({ const Container = styled('div')({ position: 'relative', - paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`, + padding: `${TAG_GAP * 2}px 0 ${LINE_GAP - TAG_GAP * 4}px 0`, '&:hover': { [StyledTriggerLine.toString()]: { '&::before': { diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx index 4f10f16fb..750490650 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx @@ -15,6 +15,7 @@ import { BlockDropPlacement, LINE_GAP, AsyncBlock, + TAG_GAP, } from '@toeverything/framework/virgo'; import { Button } from '@toeverything/components/common'; import { styled } from '@toeverything/components/ui'; @@ -78,13 +79,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) { }; const bottomLineStyle = { ...horizontalLineStyle, - top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP, + top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP + TAG_GAP, }; const verticalLineStyle = { ...lineStyle, width: 2, - height: intersectionRect.height - LINE_GAP, + height: intersectionRect.height - LINE_GAP + TAG_GAP, top: intersectionRect.y - rootRect.y, }; const leftLineStyle = { @@ -228,7 +229,7 @@ export const LeftMenuDraggable: FC = props => { MENU_WIDTH - MENU_BUTTON_OFFSET - rootRect.left, - top: block.rect.top - rootRect.top, + top: block.rect.top - rootRect.top + TAG_GAP * 2, opacity: visible ? 1 : 0, zIndex: 1, }} From 5a23f67d312ecb329b50b2d47effe0d6562b3ba9 Mon Sep 17 00:00:00 2001 From: austaras Date: Thu, 11 Aug 2022 16:33:03 +0800 Subject: [PATCH 50/95] feat(whiteboard): cursor style when dragging --- libs/components/board-draw/src/TlDraw.tsx | 53 +++++++++++-------- libs/components/board-state/src/tldraw-app.ts | 41 ++++++++------ .../src/hand-draw/hand-draw-tool.ts | 39 +++++--------- libs/components/board-types/src/types.ts | 1 + .../src/menu/left-menu/LeftMenuPlugin.tsx | 2 +- 5 files changed, 72 insertions(+), 64 deletions(-) diff --git a/libs/components/board-draw/src/TlDraw.tsx b/libs/components/board-draw/src/TlDraw.tsx index 21044ad51..1e95506ab 100644 --- a/libs/components/board-draw/src/TlDraw.tsx +++ b/libs/components/board-draw/src/TlDraw.tsx @@ -1,5 +1,13 @@ /* eslint-disable max-lines */ -import * as React from 'react'; +import { + memo, + useEffect, + useLayoutEffect, + useRef, + useMemo, + useState, + type RefObject, +} from 'react'; import { Renderer } from '@tldraw/core'; import { styled } from '@toeverything/components/ui'; import { @@ -132,13 +140,13 @@ export function Tldraw({ getSession, tools, }: TldrawProps) { - const [sId, set_sid] = React.useState(id); + const [sId, setSid] = useState(id); const { pageClientWidth } = usePageClientWidth(); // page padding left and right total 300px const editorShapeInitSize = pageClientWidth - 300; // Create a new app when the component mounts. - const [app, setApp] = React.useState(() => { + const [app, setApp] = useState(() => { const app = new TldrawApp({ id, callbacks, @@ -151,7 +159,7 @@ export function Tldraw({ }); // Create a new app if the `id` prop changes. - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (id === sId) return; const newApp = new TldrawApp({ id, @@ -161,14 +169,14 @@ export function Tldraw({ tools, }); - set_sid(id); + setSid(id); setApp(newApp); }, [sId, id]); // Update the document if the `document` prop changes but the ids, // are the same, or else load a new document if the ids are different. - React.useEffect(() => { + useEffect(() => { if (!document) return; if (document.id === app.document.id) { @@ -179,34 +187,34 @@ export function Tldraw({ }, [document, app]); // Disable assets when the `disableAssets` prop changes. - React.useEffect(() => { + useEffect(() => { app.setDisableAssets(disableAssets); }, [app, disableAssets]); // Change the page when the `currentPageId` prop changes. - React.useEffect(() => { + useEffect(() => { if (!currentPageId) return; app.changePage(currentPageId); }, [currentPageId, app]); // Toggle the app's readOnly mode when the `readOnly` prop changes. - React.useEffect(() => { + useEffect(() => { app.readOnly = readOnly; }, [app, readOnly]); // Toggle the app's darkMode when the `darkMode` prop changes. - React.useEffect(() => { + useEffect(() => { if (darkMode !== app.settings.isDarkMode) { app.toggleDarkMode(); } }, [app, darkMode]); // Update the app's callbacks when any callback changes. - React.useEffect(() => { + useEffect(() => { app.callbacks = callbacks || {}; }, [app, callbacks]); - React.useLayoutEffect(() => { + useLayoutEffect(() => { if (typeof window === 'undefined') return; if (!window.document?.fonts) return; @@ -260,7 +268,7 @@ interface InnerTldrawProps { showSponsorLink?: boolean; } -const InnerTldraw = React.memo(function InnerTldraw({ +const InnerTldraw = memo(function InnerTldraw({ id, autofocus, showPages, @@ -276,7 +284,7 @@ const InnerTldraw = React.memo(function InnerTldraw({ }: InnerTldrawProps) { const app = useTldrawApp(); - const rWrapper = React.useRef(null); + const rWrapper = useRef(null); const state = app.useStore(); @@ -299,7 +307,7 @@ const InnerTldraw = React.memo(function InnerTldraw({ TLDR.get_shape_util(page.shapes[selectedIds[0]].type).hideResizeHandles; // Custom rendering meta, with dark mode for shapes - const meta: TDMeta = React.useMemo(() => { + const meta: TDMeta = useMemo(() => { return { isDarkMode: settings.isDarkMode, app }; }, [settings.isDarkMode, app]); @@ -308,7 +316,7 @@ const InnerTldraw = React.memo(function InnerTldraw({ : appState.selectByContain; // Custom theme, based on darkmode - const theme = React.useMemo(() => { + const theme = useMemo(() => { const { selectByContain } = appState; const { isDarkMode, isCadSelectMode } = settings; @@ -373,9 +381,11 @@ const InnerTldraw = React.memo(function InnerTldraw({ !isSelecting || !settings.showCloneHandles || pageState.camera.zoom < 0.2; + return ( @@ -477,17 +487,17 @@ const InnerTldraw = React.memo(function InnerTldraw({ ); }); -const OneOff = React.memo(function OneOff({ +const OneOff = memo(function OneOff({ focusableRef, autofocus, }: { autofocus?: boolean; - focusableRef: React.RefObject; + focusableRef: RefObject; }) { useKeyboardShortcuts(focusableRef); useStylesheet(); - React.useEffect(() => { + useEffect(() => { if (autofocus) { focusableRef.current?.focus(); } @@ -496,8 +506,8 @@ const OneOff = React.memo(function OneOff({ return null; }); -const StyledLayout = styled('div')<{ penColor: string }>( - ({ theme, penColor }) => { +const StyledLayout = styled('div')<{ penColor: string; panning: boolean }>( + ({ theme, panning, penColor }) => { return { position: 'relative', height: '100%', @@ -509,6 +519,7 @@ const StyledLayout = styled('div')<{ penColor: string }>( overflow: 'hidden', boxSizing: 'border-box', outline: 'none', + cursor: panning ? 'grab' : 'unset', '& .tl-container': { position: 'absolute', diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts index 05a7e8007..b062cc8b8 100644 --- a/libs/components/board-state/src/tldraw-app.ts +++ b/libs/components/board-state/src/tldraw-app.ts @@ -219,8 +219,6 @@ export class TldrawApp extends StateManager { isPointing = false; - isForcePanning = false; - editingStartTime = -1; fileSystemHandle: FileSystemHandle | null = null; @@ -262,7 +260,7 @@ export class TldrawApp extends StateManager { constructor(props: TldrawAppCtorProps) { super( - TldrawApp.default_state, + TldrawApp.defaultState, props.id, TldrawApp.version, (prev, next, prevVersion) => { @@ -326,9 +324,9 @@ export class TldrawApp extends StateManager { ); this.patchState({ - ...TldrawApp.default_state, + ...TldrawApp.defaultState, appState: { - ...TldrawApp.default_state.appState, + ...TldrawApp.defaultState.appState, status: TDStatus.Idle, }, }); @@ -1473,13 +1471,13 @@ export class TldrawApp extends StateManager { this.replace_state( { - ...TldrawApp.default_state, + ...TldrawApp.defaultState, settings: { ...this.state.settings, }, document: migrate(document, TldrawApp.version), appState: { - ...TldrawApp.default_state.appState, + ...TldrawApp.defaultState.appState, ...this.state.appState, currentPageId: Object.keys(document.pages)[0], disableAssets: this.disableAssets, @@ -3913,7 +3911,11 @@ export class TldrawApp extends StateManager { break; } case ' ': { - this.isForcePanning = true; + this.patchState({ + settings: { + forcePanning: true, + }, + }); this.spaceKey = true; break; } @@ -3976,7 +3978,12 @@ export class TldrawApp extends StateManager { break; } case ' ': { - this.isForcePanning = false; + this.patchState({ + settings: { + forcePanning: + this.currentTool.type === TDShapeType.HandDraw, + }, + }); this.spaceKey = false; break; } @@ -4069,7 +4076,7 @@ export class TldrawApp extends StateManager { this.pan(delta); // When panning, we also want to call onPointerMove, except when "force panning" via spacebar / middle wheel button (it's called elsewhere in that case) - if (!this.isForcePanning) + if (!this.useStore.getState().settings.forcePanning) this.onPointerMove(info, e as unknown as React.PointerEvent); }; @@ -4098,7 +4105,7 @@ export class TldrawApp extends StateManager { onPointerMove: TLPointerEventHandler = (info, e) => { this.previousPoint = this.currentPoint; this.updateInputs(info, e); - if (this.isForcePanning && this.isPointing) { + if (this.useStore.getState().settings.forcePanning && this.isPointing) { this.onPan?.( { ...info, delta: Vec.neg(info.delta) }, e as unknown as WheelEvent @@ -4122,20 +4129,23 @@ export class TldrawApp extends StateManager { onPointerDown: TLPointerEventHandler = (info, e) => { if (e.buttons === 4) { - this.isForcePanning = true; + this.patchState({ + settings: { + forcePanning: true, + }, + }); } else if (this.isPointing) { return; } this.isPointing = true; this.originPoint = this.getPagePoint(info.point).concat(info.pressure); this.updateInputs(info, e); - if (this.isForcePanning) return; + if (this.useStore.getState().settings.forcePanning) return; this.currentTool.onPointerDown?.(info, e); }; onPointerUp: TLPointerEventHandler = (info, e) => { this.isPointing = false; - if (!this.shiftKey) this.isForcePanning = false; this.updateInputs(info, e); this.currentTool.onPointerUp?.(info, e); }; @@ -4522,7 +4532,7 @@ export class TldrawApp extends StateManager { assets: {}, }; - static default_state: TDSnapshot = { + static defaultState: TDSnapshot = { settings: { isCadSelectMode: false, isPenMode: false, @@ -4532,6 +4542,7 @@ export class TldrawApp extends StateManager { isSnapping: false, isDebugMode: false, isReadonlyMode: false, + forcePanning: false, keepStyleMenuOpen: false, nudgeDistanceLarge: 16, nudgeDistanceSmall: 1, diff --git a/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts b/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts index c579c8e7e..180b93644 100644 --- a/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts +++ b/libs/components/board-tools/src/hand-draw/hand-draw-tool.ts @@ -18,34 +18,19 @@ export class HandDrawTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ - override onPointerDown: TLPointerEventHandler = () => { - if (this.app.readOnly) return; - if (this.status !== Status.Idle) return; - - this.set_status(Status.Pointing); + override onEnter = () => { + this.app.patchState({ + settings: { + forcePanning: true, + }, + }); }; - override onPointerMove: TLPointerEventHandler = (info, e) => { - if (this.app.readOnly) return; - const delta = Vec.div(info.delta, this.app.camera.zoom); - const prev = this.app.camera.point; - const next = Vec.sub(prev, delta); - if (Vec.isEqual(next, prev)) return; - - switch (this.status) { - case Status.Pointing: { - this.app.pan(Vec.neg(delta)); - - break; - } - } - }; - - override onPointerUp: TLPointerEventHandler = () => { - this.set_status(Status.Idle); - }; - - override onCancel = () => { - this.set_status(Status.Idle); + override onExit = () => { + this.app.patchState({ + settings: { + forcePanning: false, + }, + }); }; } diff --git a/libs/components/board-types/src/types.ts b/libs/components/board-types/src/types.ts index fbf3e5c30..6f80a965b 100644 --- a/libs/components/board-types/src/types.ts +++ b/libs/components/board-types/src/types.ts @@ -84,6 +84,7 @@ export interface TDSnapshot { isPenMode: boolean; isReadonlyMode: boolean; isZoomSnap: boolean; + forcePanning: boolean; keepStyleMenuOpen: boolean; nudgeDistanceSmall: number; nudgeDistanceLarge: number; diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx index 5281c21b0..4eda43b55 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx @@ -10,7 +10,7 @@ import { import { PluginRenderRoot } from '../../utils'; import { Subject, throttleTime } from 'rxjs'; import { domToRect, last, Point } from '@toeverything/utils'; -const DRAG_THROTTLE_DELAY = 150; +const DRAG_THROTTLE_DELAY = 60; export class LeftMenuPlugin extends BasePlugin { private _mousedown?: boolean; private _root?: PluginRenderRoot; From d7a41cd68d7d390faca1e2ff7c549dda83c2fdc7 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 11 Aug 2022 18:57:27 +0800 Subject: [PATCH 51/95] chroe: update contributors --- .all-contributorsrc | 115 ++++++++++++++++++++++++++++++++++++++++++-- README.md | 40 ++++++++++----- 2 files changed, 140 insertions(+), 15 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 3286d1be2..9f85871a6 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1,12 +1,12 @@ { - "projectName": "toeverything", + "projectName": "AFFiNE", "projectOwner": "toeverything", "repoType": "github", "repoHost": "https://github.com", "files": [ "README.md" ], - "imageSize": 100, + "imageSize": 50, "commit": false, "commitConvention": "angular", "contributorsPerLine": 7, @@ -115,11 +115,120 @@ "login": "uptonking", "name": "Jin Yao", "avatar_url": "https://avatars.githubusercontent.com/u/11391549?v=4", - "profile": "https://github.com/uptonking?tab=repositories&type=source", + "profile": "https://github.com/uptonking", "contributions": [ "code", "doc" ] + }, + { + "login": "HeJiachen-PM", + "name": "HeJiachen-PM", + "avatar_url": "https://avatars.githubusercontent.com/u/79301703?v=4", + "profile": "https://github.com/HeJiachen-PM", + "contributions": [ + "doc" + ] + }, + { + "login": "Yipei-Operation", + "name": "Yipei Wei", + "avatar_url": "https://avatars.githubusercontent.com/u/79373028?v=4", + "profile": "https://github.com/Yipei-Operation", + "contributions": [ + "doc" + ] + }, + { + "login": "fanjing22", + "name": "fanjing22", + "avatar_url": "https://avatars.githubusercontent.com/u/109729699?v=4", + "profile": "https://github.com/fanjing22", + "contributions": [ + "design" + ] + }, + { + "login": "Svaney-ssman", + "name": "Svaney", + "avatar_url": "https://avatars.githubusercontent.com/u/110808979?v=4", + "profile": "https://github.com/Svaney-ssman", + "contributions": [ + "design" + ] + }, + { + "login": "xell", + "name": "Guozhu Liu", + "avatar_url": "https://avatars.githubusercontent.com/u/132558?v=4", + "profile": "http://xell.me/", + "contributions": [ + "design" + ] + }, + { + "login": "fyZheng07", + "name": "fyZheng07", + "avatar_url": "https://avatars.githubusercontent.com/u/63830919?v=4", + "profile": "https://github.com/fyZheng07", + "contributions": [ + "eventOrganizing", + "userTesting" + ] + }, + { + "login": "CJSS", + "name": "CJSS", + "avatar_url": "https://avatars.githubusercontent.com/u/4605025?v=4", + "profile": "https://github.com/CJSS", + "contributions": [ + "doc" + ] + }, + { + "login": "CarlosZoft", + "name": "Carlos Rafael ", + "avatar_url": "https://avatars.githubusercontent.com/u/62192072?v=4", + "profile": "https://github.com/clean-software", + "contributions": [ + "code" + ] + }, + { + "login": "caleboleary", + "name": "Caleb OLeary", + "avatar_url": "https://avatars.githubusercontent.com/u/12816579?v=4", + "profile": "https://github.com/caleboleary", + "contributions": [ + "code" + ] + }, + { + "login": "JimmFly", + "name": "JimmFly", + "avatar_url": "https://avatars.githubusercontent.com/u/102217452?v=4", + "profile": "https://github.com/JimmFly", + "contributions": [ + "code" + ] + }, + { + "login": "westongraham", + "name": "Weston Graham", + "avatar_url": "https://avatars.githubusercontent.com/u/89493023?v=4", + "profile": "https://github.com/westongraham", + "contributions": [ + "doc" + ] + }, + { + "login": "pointmax", + "name": "pointmax", + "avatar_url": "https://avatars.githubusercontent.com/u/49361135?v=4", + "profile": "https://github.com/pointmax", + "contributions": [ + "doc" + ] } ] } diff --git a/README.md b/README.md index 8076877f0..9e2ebc85f 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066 --> -[all-contributors-badge]: https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square +[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square @@ -171,19 +171,35 @@ For help, discussion about best practices, or any other conversation that would - - - - - - - + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + +

    DarkSky
    💻 📖
    Chi Zhang
    💻 📖
    wang xinglong
    💻 📖
    DiamondThree
    💻 📖
    Whitewater
    💻 📖
    xiaodong zuo
    💻 📖
    MingLIang Wang
    💻 📖
    DarkSky
    💻 📖
    Chi Zhang
    💻 📖
    wang xinglong
    💻 📖
    DiamondThree
    💻 📖
    Whitewater
    💻 📖
    xiaodong zuo
    💻 📖
    MingLIang Wang
    💻 📖

    Qi
    💻 📖
    mitsuhatu
    💻 📖
    Austaras
    💻 📖
    Jin Yao
    💻 📖
    Qi
    💻 📖
    mitsuhatu
    💻 📖
    Austaras
    💻 📖
    Jin Yao
    💻 📖
    HeJiachen-PM
    📖
    Yipei Wei
    📖
    fanjing22
    🎨

    Svaney
    🎨
    Guozhu Liu
    🎨
    fyZheng07
    📋 📓
    CJSS
    📖
    Carlos Rafael
    💻
    Caleb OLeary
    💻
    JimmFly
    💻

    Weston Graham
    📖
    pointmax
    📖
    From 76fa003189cedbacdac6d962e0a8b254330c7b38 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 21:27:57 +0800 Subject: [PATCH 52/95] feat: update help info of pendant field title --- .../src/block-pendant/PendantTag.tsx | 7 +----- .../CreatePendantPanel.tsx | 21 +++------------- .../FieldTitleInput.tsx | 24 +++++++++++++++++++ .../UpdatePendantPanel.tsx | 16 +++---------- 4 files changed, 31 insertions(+), 37 deletions(-) create mode 100644 libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx diff --git a/libs/components/editor-core/src/block-pendant/PendantTag.tsx b/libs/components/editor-core/src/block-pendant/PendantTag.tsx index 52d5bfc14..4c2f788a6 100644 --- a/libs/components/editor-core/src/block-pendant/PendantTag.tsx +++ b/libs/components/editor-core/src/block-pendant/PendantTag.tsx @@ -1,9 +1,4 @@ -import React, { - FC, - FunctionComponent, - PropsWithChildren, - CSSProperties, -} from 'react'; +import React from 'react'; import { Tag, type TagProps } from '@toeverything/components/ui'; import { DateValue, diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx index 6135d2b3c..42e36e063 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx @@ -1,12 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { - Input, - message, - Option, - Select, - Tooltip, -} from '@toeverything/components/ui'; -import { HelpCenterIcon } from '@toeverything/components/icons'; +import { message, Option, Select } from '@toeverything/components/ui'; import { AsyncBlock } from '../../editor'; import { IconMap, pendantOptions } from '../config'; @@ -14,7 +7,6 @@ import { PendantOptions } from '../types'; import { PendantModifyPanel } from '../pendant-modify-panel'; import { StyledDivider, - StyledInputEndAdornment, StyledOperationLabel, StyledOperationTitle, StyledPopoverSubTitle, @@ -26,6 +18,7 @@ import { getPendantConfigByType, checkPendantForm, } from '../utils'; +import { FieldTitleInput } from './FieldTitleInput'; import { useOnCreateSure } from './hooks'; export const CreatePendantPanel = ({ @@ -74,19 +67,11 @@ export const CreatePendantPanel = ({ })} Field Title - { setFieldName(e.target.value); }} - endAdornment={ - - - - - - } /> {selectedOption ? ( <> diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx new file mode 100644 index 000000000..6a11bf20d --- /dev/null +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Input, Tooltip, InputProps } from '@toeverything/components/ui'; +import { StyledInputEndAdornment } from '../StyledComponent'; +import { HelpCenterIcon } from '@toeverything/components/icons'; + +export const FieldTitleInput = (props: InputProps) => { + return ( + + + + +     + } + {...props} + /> + ); +}; diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx index 2ff5515ba..5b968d33b 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx @@ -1,6 +1,5 @@ import { useState } from 'react'; -import { Input, message, Tooltip } from '@toeverything/components/ui'; -import { HelpCenterIcon } from '@toeverything/components/icons'; +import { message } from '@toeverything/components/ui'; import { PendantModifyPanel } from '../pendant-modify-panel'; import type { AsyncBlock } from '../../editor'; import { @@ -12,13 +11,12 @@ import { checkPendantForm, getPendantConfigByType } from '../utils'; import { StyledPopoverWrapper, StyledOperationLabel, - StyledInputEndAdornment, StyledDivider, StyledPopoverContent, StyledPopoverSubTitle, } from '../StyledComponent'; import { IconMap, pendantOptions } from '../config'; - +import { FieldTitleInput } from './FieldTitleInput'; import { useOnUpdateSure } from './hooks'; type Props = { @@ -63,19 +61,11 @@ export const UpdatePendantPanel = ({ Field Title {titleEditable ? ( - { setFieldName(e.target.value); }} - endAdornment={ - - - - - - } /> ) : ( {property.name} From bb0219c5edaa9e298841e327cc8ded6ac86043c7 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 21:43:51 +0800 Subject: [PATCH 53/95] feat: support keep block in view --- libs/components/editor-core/src/editor/selection/selection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index b66d1b5fd..1c45060cd 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -692,7 +692,7 @@ export class SelectionManager implements VirgoSelection { this.emit(nodeId, SelectEventTypes.active, this.lastPoint); // TODO: Optimize the related logic after implementing the scroll bar setTimeout(() => { - // this._editor.scrollManager.keepBlockInView(node); + this._editor.scrollManager.keepBlockInView(node); }, this._scrollDelay); } else { console.warn('Can not find node by this id'); From b3f1ba6ca0ec165fbdf7f94b0dcbbe02757200d7 Mon Sep 17 00:00:00 2001 From: DarkSky Date: Thu, 11 Aug 2022 22:02:53 +0800 Subject: [PATCH 54/95] feat: login reduce --- .../components/account/src/login/firebase.tsx | 72 +++---------- libs/components/account/src/login/fs.tsx | 102 +++++++----------- libs/components/account/src/login/index.tsx | 59 +++++++++- libs/components/layout/src/header/Title.tsx | 10 +- 4 files changed, 116 insertions(+), 127 deletions(-) diff --git a/libs/components/account/src/login/firebase.tsx b/libs/components/account/src/login/firebase.tsx index 55453782b..0c295010e 100644 --- a/libs/components/account/src/login/firebase.tsx +++ b/libs/components/account/src/login/firebase.tsx @@ -1,5 +1,5 @@ /* eslint-disable filename-rules/match */ -import { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { initializeApp } from 'firebase/app'; import { GoogleAuthProvider, @@ -8,15 +8,7 @@ import { browserLocalPersistence, } from 'firebase/auth'; -import { LogoImg } from '@toeverything/components/common'; -import { - MuiButton, - MuiBox, - MuiGrid, - MuiSnackbar, -} from '@toeverything/components/ui'; - -import { Error } from './../error'; +import { MuiButton } from '@toeverything/components/ui'; const _firebaseConfig = { apiKey: 'AIzaSyD7A_VyGaKTXsPqtga9IbwrEsbWWc4rH3Y', @@ -75,7 +67,7 @@ const GoogleIcon = () => ( ); -export const Firebase = () => { +export const Firebase = (props: { onError: () => void }) => { const [auth, provider] = useMemo(() => { const auth = getAuth(_app); auth.setPersistence(browserLocalPersistence); @@ -83,8 +75,6 @@ export const Firebase = () => { return [auth, provider]; }, []); - const [error, setError] = useState(false); - const handleAuth = useCallback(() => { signInWithPopup(auth, provider).catch(error => { const errorCode = error.code; @@ -92,53 +82,19 @@ export const Firebase = () => { const email = error.customData.email; const credential = GoogleAuthProvider.credentialFromError(error); console.log(errorCode, errorMessage, email, credential); - setError(true); - setTimeout(() => setError(false), 3000); + props.onError(); }); - }, [auth, provider]); + }, [auth, props, provider]); return ( - - - - - - - - - - - } - > - Continue with Google - - - - + } + onClick={handleAuth} + > + Continue with Google + ); }; diff --git a/libs/components/account/src/login/fs.tsx b/libs/components/account/src/login/fs.tsx index 07d6465ba..104e13ed6 100644 --- a/libs/components/account/src/login/fs.tsx +++ b/libs/components/account/src/login/fs.tsx @@ -1,20 +1,22 @@ /* eslint-disable filename-rules/match */ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo } from 'react'; -import { LogoImg } from '@toeverything/components/common'; -import { - MuiButton, - MuiBox, - MuiGrid, - MuiSnackbar, -} from '@toeverything/components/ui'; +import { LogoIcon } from '@toeverything/components/icons'; +import { MuiButton } from '@toeverything/components/ui'; import { services } from '@toeverything/datasource/db-service'; import { useLocalTrigger } from '@toeverything/datasource/state'; -import { Error } from './../error'; +const cleanupWorkspace = (workspace: string) => + new Promise((resolve, reject) => { + const req = indexedDB.deleteDatabase(workspace); + req.addEventListener('error', e => reject(e)); + req.addEventListener('blocked', e => reject(e)); + req.addEventListener('upgradeneeded', e => reject(e)); + req.addEventListener('success', e => resolve(e)); + }); const requestPermission = async (workspace: string) => { - indexedDB.deleteDatabase(workspace); + await cleanupWorkspace(workspace); const dirHandler = await window.showDirectoryPicker({ id: 'AFFiNE_' + workspace, mode: 'readwrite', @@ -43,9 +45,16 @@ const requestPermission = async (workspace: string) => { ); }; -export const FileSystem = () => { +export const FileSystem = (props: { onError: () => void }) => { const onSelected = useLocalTrigger(); - const [error, setError] = useState(false); + + const apiSupported = useMemo(() => { + try { + return 'showOpenFilePicker' in window; + } catch (e) { + return false; + } + }, []); useEffect(() => { if (process.env['NX_E2E']) { @@ -54,54 +63,25 @@ export const FileSystem = () => { }, []); return ( - - - - - - - - { - try { - await requestPermission('AFFiNE'); - onSelected(); - } catch (e) { - setError(true); - onSelected(); - setTimeout(() => setError(false), 3000); - } - }} - style={{ - textAlign: 'center', - width: '300px', - margin: '300px auto 20px auto', - }} - sx={{ mt: 1 }} - > - - - - Sync to Disk - - - - + } + onClick={async () => { + try { + if (apiSupported) { + await requestPermission('AFFiNE'); + onSelected(); + } else { + onSelected(); + } + } catch (e) { + props.onError(); + } + }} + > + {apiSupported ? 'Sync to Disk' : 'Try Live Demo'} + ); }; diff --git a/libs/components/account/src/login/index.tsx b/libs/components/account/src/login/index.tsx index ba7a589c8..e29b84f12 100644 --- a/libs/components/account/src/login/index.tsx +++ b/libs/components/account/src/login/index.tsx @@ -1,13 +1,64 @@ /* eslint-disable filename-rules/match */ +import { useCallback, useState } from 'react'; +import { LogoImg } from '@toeverything/components/common'; +import { MuiBox, MuiGrid, MuiSnackbar } from '@toeverything/components/ui'; + // import { Authing } from './authing'; import { Firebase } from './firebase'; import { FileSystem } from './fs'; +import { Error } from './../error'; export function Login() { + const [error, setError] = useState(false); + + const onError = useCallback(() => { + setError(true); + setTimeout(() => setError(false), 3000); + }, []); + return ( - <> - {/* */} - {process.env['NX_LOCAL'] ? : } - + + + + + + + + {' '} + + + {/* {((process.env['NX_LOCAL'] || true) && ( */} + + {/* )) || + null} + {((!process.env['NX_LOCAL'] || true) && ( */} + + {/* )) || + null} */}{' '} + + + ); } diff --git a/libs/components/layout/src/header/Title.tsx b/libs/components/layout/src/header/Title.tsx index 16017e43f..61f2d3a24 100644 --- a/libs/components/layout/src/header/Title.tsx +++ b/libs/components/layout/src/header/Title.tsx @@ -3,12 +3,14 @@ import { useParams } from 'react-router-dom'; import { Typography, styled } from '@toeverything/components/ui'; import { services } from '@toeverything/datasource/db-service'; +import { useUserAndSpaces } from '@toeverything/datasource/state'; /* card.7: Demand changes, temporarily closed, see https://github.com/toeverything/AFFiNE/issues/522 */ // import { usePageTree} from '@toeverything/components/layout'; // import { pickPath } from './utils'; export const CurrentPageTitle = () => { + const { user } = useUserAndSpaces(); const params = useParams(); const { workspace_id } = params; const [pageId, setPageId] = useState(''); @@ -40,11 +42,11 @@ export const CurrentPageTitle = () => { }, [pageId, workspace_id]); useEffect(() => { - fetchPageTitle(); - }, [fetchPageTitle]); + if (user) fetchPageTitle(); + }, [fetchPageTitle, user]); useEffect(() => { - if (!workspace_id || !pageId || pageTitle === undefined) + if (!user || !workspace_id || !pageId || pageTitle === undefined) return () => {}; let unobserve: () => void; @@ -63,7 +65,7 @@ export const CurrentPageTitle = () => { return () => { // unobserve?.(); }; - }, [fetchPageTitle, pageId, pageTitle, workspace_id]); + }, [fetchPageTitle, pageId, pageTitle, user, workspace_id]); useEffect(() => { document.title = pageTitle || ''; From 322fb098a4288ffcf94dcc22b0a7234d35cbeddc Mon Sep 17 00:00:00 2001 From: SaikaSakura Date: Thu, 11 Aug 2022 22:06:50 +0800 Subject: [PATCH 55/95] feat: repair paste cursor --- .../common/src/lib/text/slate-utils.ts | 13 ++++ .../src/editor/block/block-helper.ts | 66 ++++++++++++++++++- .../editor-core/src/editor/clipboard/paste.ts | 26 +++++--- .../editor-core/src/editor/clipboard/utils.ts | 2 +- .../src/editor/selection/selection.ts | 28 ++++---- 5 files changed, 109 insertions(+), 26 deletions(-) diff --git a/libs/components/common/src/lib/text/slate-utils.ts b/libs/components/common/src/lib/text/slate-utils.ts index 3f5fb5769..1783d79ca 100644 --- a/libs/components/common/src/lib/text/slate-utils.ts +++ b/libs/components/common/src/lib/text/slate-utils.ts @@ -905,6 +905,19 @@ class SlateUtils { ); } + public insertNodes( + nodes: SlateNode | Array, + options?: Parameters[2] + ) { + Transforms.insertNodes(this.editor, nodes, { + ...options, + }); + } + + public getNodeByPath(path: Path) { + Editor.node(this.editor, path); + } + public getStartSelection() { return { anchor: this.getStart(), diff --git a/libs/components/editor-core/src/editor/block/block-helper.ts b/libs/components/editor-core/src/editor/block/block-helper.ts index 1c1ab37db..7bd0284ff 100644 --- a/libs/components/editor-core/src/editor/block/block-helper.ts +++ b/libs/components/editor-core/src/editor/block/block-helper.ts @@ -3,7 +3,13 @@ import type { SlateUtils, TextAlignOptions, } from '@toeverything/components/common'; -import { Point, Selection as SlateSelection } from 'slate'; +import { + BaseRange, + Node, + Path, + Point, + Selection as SlateSelection, +} from 'slate'; import { Editor } from '../editor'; type TextUtilsFunctions = @@ -28,7 +34,10 @@ type TextUtilsFunctions = | 'removeSelection' | 'insertReference' | 'isCollapsed' - | 'blur'; + | 'blur' + | 'setSelection' + | 'insertNodes' + | 'getNodeByPath'; type ExtendedTextUtils = SlateUtils & { setLinkModalVisible: (visible: boolean) => void; @@ -193,6 +202,59 @@ export class BlockHelper { return ''; } + /** + * + * set selection of a text input + * @param {string} blockId + * @param {BaseRange} selection + * @return {*} + * @memberof BlockHelper + */ + public setSelection(blockId: string, selection: BaseRange) { + const text_utils = this._blockTextUtilsMap[blockId]; + if (text_utils) { + return text_utils.setSelection(selection); + } + console.warn('Could find the block text utils'); + } + + /** + * + * insert nodes in text + * @param {string} blockId + * @param {Array} nodes + * @param {Parameters[1]} options + * @return {*} + * @memberof BlockHelper + */ + public insertNodes( + blockId: string, + nodes: Array, + options?: Parameters[1] + ) { + const text_utils = this._blockTextUtilsMap[blockId]; + if (text_utils) { + return text_utils.insertNodes(nodes, options); + } + console.warn('Could find the block text utils'); + } + + /** + * + * get text(slate node) by path + * @param {string} blockId + * @param {Path} path + * @return {*} + * @memberof BlockHelper + */ + public getNodeByPath(blockId: string, path: Path) { + const text_utils = this._blockTextUtilsMap[blockId]; + if (text_utils) { + return text_utils.getNodeByPath(path); + } + console.warn('Could find the block text utils'); + } + public transformPoint( blockId: string, ...restArgs: Parameters diff --git a/libs/components/editor-core/src/editor/clipboard/paste.ts b/libs/components/editor-core/src/editor/clipboard/paste.ts index 022b3de21..6633b618e 100644 --- a/libs/components/editor-core/src/editor/clipboard/paste.ts +++ b/libs/components/editor-core/src/editor/clipboard/paste.ts @@ -1,4 +1,4 @@ -import { HooksRunner } from '../types'; +/* eslint-disable max-lines */ import { OFFICE_CLIPBOARD_MIMETYPE, InnerClipInfo, @@ -187,10 +187,15 @@ export class Paste { const pureText = !shouldSplitBlock ? blocks[0].properties.text.value : [{ text: '' }]; - this._editor.blockHelper.setBlockBlur( - currentSelectInfo.blocks[0].blockId + this._editor.blockHelper.insertNodes( + selectedBlock.id, + pureText, + { select: true } ); + return; + //TODO repair the following logics + /** const { startInfo, endInfo } = currentSelectInfo.blocks[0]; // 选中的当前的可编辑block的文字信息 @@ -414,13 +419,13 @@ export class Paste { }, }); - const pastedTextLength = pureText.reduce( - (sumLength: number, textItem: TextValueItem) => { - sumLength += textItem.text.length; - return sumLength; - }, - 0 - ); + // const pastedTextLength = pureText.reduce( + // (sumLength: number, textItem: TextValueItem) => { + // sumLength += textItem.text.length; + // return sumLength; + // }, + // 0 + // ); // this._editor.selectionManager.moveCursor( // window.getSelection().getRangeAt(0), @@ -429,6 +434,7 @@ export class Paste { // ); } } + */ } else { const pasteBlocks = await this._createBlocks(blocks); pasteBlocks.forEach(block => { diff --git a/libs/components/editor-core/src/editor/clipboard/utils.ts b/libs/components/editor-core/src/editor/clipboard/utils.ts index 7b4d420a3..cb5d10241 100644 --- a/libs/components/editor-core/src/editor/clipboard/utils.ts +++ b/libs/components/editor-core/src/editor/clipboard/utils.ts @@ -1,4 +1,4 @@ -import {Editor} from "../editor"; +import { Editor } from '../editor'; export const shouldHandlerContinue = (event: Event, editor: Editor) => { const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index 99f648a93..40c069b94 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -322,16 +322,16 @@ export class SelectionManager implements VirgoSelection { if (selectionRect.isIntersect(domToRect(block.dom))) { const childrenBlocks = await block.children(); // should check directly in structured block - const structuredChildrenBlocks: Array = childrenBlocks.filter( - childBlock => { + const structuredChildrenBlocks: Array = + childrenBlocks.filter(childBlock => { return this._editor.getView(childBlock.type).layoutOnly; - } - ); + }); for await (const childBlock of structuredChildrenBlocks) { - const childSelectedNodes = await this.calcRenderBlockIntersect( - selectionRect, - childBlock - ); + const childSelectedNodes = + await this.calcRenderBlockIntersect( + selectionRect, + childBlock + ); selectedNodes.push(...childSelectedNodes); } const selectableChildren = childrenBlocks.filter(childBlock => { @@ -348,10 +348,11 @@ export class SelectionManager implements VirgoSelection { } // if just only has one selected maybe select the children if (selectedNodes.length === 1) { - const childrenSelectedNodes: Array = await this.calcRenderBlockIntersect( - selectionRect, - selectedNodes[0] - ); + const childrenSelectedNodes: Array = + await this.calcRenderBlockIntersect( + selectionRect, + selectedNodes[0] + ); if (childrenSelectedNodes.length) return childrenSelectedNodes; } @@ -584,7 +585,8 @@ export class SelectionManager implements VirgoSelection { } else { const new_node = await this._editor.getBlockById(newNodeId); if (new_node) { - const new_node_children_ids = await new_node.childrenIds; + const new_node_children_ids = + await new_node.childrenIds; let select_ids_new = this._selectedNodesIds; if ( new_node_children_ids && From f57aaf7e808de2a36716b96b4868202e861c1d4a Mon Sep 17 00:00:00 2001 From: DarkSky Date: Thu, 11 Aug 2022 22:31:38 +0800 Subject: [PATCH 56/95] feat: header switcher --- .../src/header/EditorBoardSwitcher/Switcher.tsx | 1 + libs/components/layout/src/header/LayoutHeader.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx index 3c350c237..d37385044 100644 --- a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx +++ b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx @@ -62,4 +62,5 @@ export const Switcher = () => { const StyledContainerForSwitcher = styled('div')({ display: 'flex', alignItems: 'center', + pointerEvents: 'all', }); diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 85e715733..604b6caa6 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -147,9 +147,10 @@ const StyledLogoIcon = styled(LogoIcon)(({ theme }) => { }; }); -const StyledContainerForEditorBoardSwitcher = styled('div')(({ theme }) => { - return { - position: 'absolute', - left: '50%', - }; +const StyledContainerForEditorBoardSwitcher = styled('div')({ + width: '100%', + position: 'absolute', + display: 'flex', + justifyContent: 'center', + pointerEvents: 'none', }); From 6ad94242c4a0117735e122a11f2502f4883f1902 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 22:33:51 +0800 Subject: [PATCH 57/95] fix: insert correct selection after paste --- .../editor-core/src/editor/clipboard/paste.ts | 116 +++--------------- 1 file changed, 15 insertions(+), 101 deletions(-) diff --git a/libs/components/editor-core/src/editor/clipboard/paste.ts b/libs/components/editor-core/src/editor/clipboard/paste.ts index 6633b618e..0c48eee56 100644 --- a/libs/components/editor-core/src/editor/clipboard/paste.ts +++ b/libs/components/editor-core/src/editor/clipboard/paste.ts @@ -170,8 +170,8 @@ export class Paste { const currentSelectInfo = await this._editor.selectionManager.getSelectInfo(); - // 当选区在某一个block中时 - // select?.type === 'Range' + // When the selection is in one of the blocks, select?.type === 'Range' + // Currently the selection does not support cross-blocking, so this case is not considered if (currentSelectInfo.type === 'Range') { // 当 currentSelectInfo.type === 'Range' 时，光标选中的block必然只有一个 const selectedBlock = await this._editor.getBlockById( @@ -187,23 +187,15 @@ export class Paste { const pureText = !shouldSplitBlock ? blocks[0].properties.text.value : [{ text: '' }]; - this._editor.blockHelper.insertNodes( - selectedBlock.id, - pureText, - { select: true } - ); - return; - //TODO repair the following logics - - /** const { startInfo, endInfo } = currentSelectInfo.blocks[0]; - // 选中的当前的可编辑block的文字信息 + // Text content of the selected current editable block const currentTextValue = selectedBlock.getProperty('text').value; - // 当光标选区跨越不同样式文字时 + // When the cursor selection spans different styles of text if (startInfo?.arrayIndex !== endInfo?.arrayIndex) { if (shouldSplitBlock) { + // TODO: split block maybe should use slate method to support, like "this._editor.blockHelper.insertNodes" const newTextValue = currentTextValue.reduce( ( newTextValue: TextValueItem[], @@ -270,50 +262,17 @@ export class Paste { pasteBlocks[pasteBlocks.length - 1].id ); } else { - const newTextValue = currentTextValue.reduce( - ( - newTextValue: TextValueItem[], - textStore: TextValueItem, - i: number - ) => { - if ( - i < startInfo?.arrayIndex || - i > endInfo?.arrayIndex - ) { - newTextValue.push(textStore); - } - const { text, ...props } = textStore; - - if (i === startInfo?.arrayIndex) { - newTextValue.push({ - text: text.slice(0, startInfo?.offset), - ...props, - }); - } else if (i === endInfo?.arrayIndex) { - newTextValue.push({ - text: text.slice(endInfo?.offset), - ...props, - }); - } - return newTextValue; - }, - [] + this._editor.blockHelper.insertNodes( + selectedBlock.id, + pureText, + { select: true } ); - newTextValue.splice( - startInfo?.arrayIndex + 1, - 0, - ...pureText - ); - selectedBlock.setProperties({ - text: { - value: newTextValue, - }, - }); } } - // 当光标选区没有跨越不同样式文字时 + // When the cursor selection does not span different styles of text if (startInfo?.arrayIndex === endInfo?.arrayIndex) { if (shouldSplitBlock) { + // TODO: split block maybe should use slate method to support, like "this._editor.blockHelper.insertNodes" const newTextValue = currentTextValue.reduce( ( newTextValue: TextValueItem[], @@ -383,58 +342,13 @@ export class Paste { pasteBlocks[pasteBlocks.length - 1].id ); } else { - const newTextValue = currentTextValue.reduce( - ( - newTextValue: TextValueItem[], - textStore: TextValueItem, - i: number - ) => { - if (i !== startInfo?.arrayIndex) { - newTextValue.push(textStore); - } - const { text, ...props } = textStore; - - if (i === startInfo?.arrayIndex) { - newTextValue.push({ - text: `${text.slice( - 0, - startInfo?.offset - )}`, - ...props, - }); - newTextValue.push(...pureText); - - newTextValue.push({ - text: `${text.slice(endInfo?.offset)}`, - ...props, - }); - } - return newTextValue; - }, - [] + this._editor.blockHelper.insertNodes( + selectedBlock.id, + pureText, + { select: true } ); - selectedBlock.setProperties({ - text: { - value: newTextValue, - }, - }); - - // const pastedTextLength = pureText.reduce( - // (sumLength: number, textItem: TextValueItem) => { - // sumLength += textItem.text.length; - // return sumLength; - // }, - // 0 - // ); - - // this._editor.selectionManager.moveCursor( - // window.getSelection().getRangeAt(0), - // pastedTextLength, - // selectedBlock.id - // ); } } - */ } else { const pasteBlocks = await this._createBlocks(blocks); pasteBlocks.forEach(block => { From 0674a4885455ce08f5bfa28576a645580c9ffad1 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Thu, 11 Aug 2022 22:49:42 +0800 Subject: [PATCH 58/95] refactor: remove useless file --- .../clipboard/browser-clipboard-back.ts | 422 ------------------ 1 file changed, 422 deletions(-) delete mode 100644 libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts deleted file mode 100644 index 6c6d4ad03..000000000 --- a/libs/components/editor-core/src/editor/clipboard/browser-clipboard-back.ts +++ /dev/null @@ -1,422 +0,0 @@ -import { HooksRunner } from '../types'; -import { - OFFICE_CLIPBOARD_MIMETYPE, - InnerClipInfo, - ClipBlockInfo, -} from './types'; -import { Editor } from '../editor'; -import { AsyncBlock } from '../block'; -import ClipboardParse from './clipboard-parse'; -import { SelectInfo } from '../selection'; -import { - Protocol, - BlockFlavorKeys, - services, -} from '@toeverything/datasource/db-service'; -import { MarkdownParser } from './markdown-parse'; - -// todo needs to be a switch -const SUPPORT_MARKDOWN_PASTE = true; - -const shouldHandlerContinue = (event: Event, editor: Editor) => { - const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; - - if (event.defaultPrevented) { - return false; - } - if (filterNodes.includes((event.target as HTMLElement)?.tagName)) { - return false; - } - - return editor.selectionManager.currentSelectInfo.type !== 'None'; -}; - -enum ClipboardAction { - COPY = 'copy', - CUT = 'cut', - PASTE = 'paste', -} -class BrowserClipboard { - private _eventTarget: Element; - private _hooks: HooksRunner; - private _editor: Editor; - private _clipboardParse: ClipboardParse; - private _markdownParse: MarkdownParser; - - private static _optimalMimeType: string[] = [ - OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, - OFFICE_CLIPBOARD_MIMETYPE.HTML, - OFFICE_CLIPBOARD_MIMETYPE.TEXT, - ]; - - constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) { - this._eventTarget = eventTarget; - this._hooks = hooks; - this._editor = editor; - this._clipboardParse = new ClipboardParse(editor); - this._markdownParse = new MarkdownParser(); - this._initialize(); - } - - public getClipboardParse() { - return this._clipboardParse; - } - - private _initialize() { - this._handleCopy = this._handleCopy.bind(this); - this._handleCut = this._handleCut.bind(this); - this._handlePaste = this._handlePaste.bind(this); - - document.addEventListener(ClipboardAction.COPY, this._handleCopy); - document.addEventListener(ClipboardAction.CUT, this._handleCut); - document.addEventListener(ClipboardAction.PASTE, this._handlePaste); - this._eventTarget.addEventListener( - ClipboardAction.COPY, - this._handleCopy - ); - this._eventTarget.addEventListener( - ClipboardAction.CUT, - this._handleCut - ); - this._eventTarget.addEventListener( - ClipboardAction.PASTE, - this._handlePaste - ); - } - - private _handleCopy(e: Event) { - if (!shouldHandlerContinue(e, this._editor)) { - return; - } - - this._dispatchClipboardEvent(ClipboardAction.COPY, e as ClipboardEvent); - } - - private _handleCut(e: Event) { - if (!shouldHandlerContinue(e, this._editor)) { - return; - } - - this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent); - } - - private _handlePaste(e: Event) { - if (!shouldHandlerContinue(e, this._editor)) { - return; - } - e.stopPropagation(); - - const clipboardData = (e as ClipboardEvent).clipboardData; - - const isPureFile = this._isPureFileInClipboard(clipboardData); - - if (isPureFile) { - this._pasteFile(clipboardData); - } else { - this._pasteContent(clipboardData); - } - // this._editor.selectionManager - // .getSelectInfo() - // .then(selectionInfo => console.log(selectionInfo)); - } - - private _pasteContent(clipboardData: any) { - const originClip: { data: any; type: any } = this.getOptimalClip( - clipboardData - ) as { data: any; type: any }; - - const originTextClipData = clipboardData.getData( - OFFICE_CLIPBOARD_MIMETYPE.TEXT - ); - - let clipData = originClip['data']; - - if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { - clipData = this._excapeHtml(clipData); - } - - switch (originClip['type']) { - /** Protocol paste */ - case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: - this._firePasteEditAction(clipData); - break; - case OFFICE_CLIPBOARD_MIMETYPE.HTML: - this._pasteHtml(clipData, originTextClipData); - break; - case OFFICE_CLIPBOARD_MIMETYPE.TEXT: - this._pasteText(clipData, originTextClipData); - break; - - default: - break; - } - } - - private _pasteHtml(clipData: any, originTextClipData: any) { - if (SUPPORT_MARKDOWN_PASTE) { - const hasMarkdown = - this._markdownParse.checkIfTextContainsMd(originTextClipData); - if (hasMarkdown) { - try { - const convertedDataObj = - this._markdownParse.md2Html(originTextClipData); - if (convertedDataObj.isConverted) { - clipData = convertedDataObj.text; - } - } catch (e) { - console.error(e); - clipData = originTextClipData; - } - } - } - - const blocks = this._clipboardParse.html2blocks(clipData); - this.insert_blocks(blocks); - } - - private _pasteText(clipData: any, originTextClipData: any) { - const blocks = this._clipboardParse.text2blocks(clipData); - this.insert_blocks(blocks); - } - - private async _pasteFile(clipboardData: any) { - const file = this._getImageFile(clipboardData); - if (file) { - const result = await services.api.file.create({ - workspace: this._editor.workspace, - file: file, - }); - const blockInfo: ClipBlockInfo = { - type: 'image', - properties: { - image: { - value: result.id, - name: file.name, - size: file.size, - type: file.type, - }, - }, - children: [] as ClipBlockInfo[], - }; - this.insert_blocks([blockInfo]); - } - } - - private _getImageFile(clipboardData: any) { - const files = clipboardData.files; - if (files && files[0] && files[0].type.indexOf('image') > -1) { - return files[0]; - } - return; - } - - private _excapeHtml(data: any, onlySpace?: any) { - if (!onlySpace) { - // TODO: - // data = string.htmlEscape(data); - // data = data.replace(/\n/g, '
    '); - } - - // data = data.replace(/ /g, ' '); - // data = data.replace(/\t/g, '    '); - return data; - } - - public getOptimalClip(clipboardData: any) { - const mimeTypeArr = BrowserClipboard._optimalMimeType; - - for (let i = 0; i < mimeTypeArr.length; i++) { - const data = - clipboardData[mimeTypeArr[i]] || - clipboardData.getData(mimeTypeArr[i]); - - if (data) { - return { - type: mimeTypeArr[i], - data: data, - }; - } - } - - return ''; - } - - private _isPureFileInClipboard(clipboardData: DataTransfer) { - const types = clipboardData.types; - - return ( - (types.length === 1 && types[0] === 'Files') || - (types.length === 2 && - (types.includes('text/plain') || types.includes('text/html')) && - types.includes('Files')) - ); - } - - private async _firePasteEditAction(clipboardData: any) { - const clipInfo: InnerClipInfo = JSON.parse(clipboardData); - clipInfo && this.insert_blocks(clipInfo.data, clipInfo.select); - } - - private _canEditText(type: BlockFlavorKeys) { - return ( - type === Protocol.Block.Type.page || - type === Protocol.Block.Type.text || - type === Protocol.Block.Type.heading1 || - type === Protocol.Block.Type.heading2 || - type === Protocol.Block.Type.heading3 || - type === Protocol.Block.Type.quote || - type === Protocol.Block.Type.todo || - type === Protocol.Block.Type.code || - type === Protocol.Block.Type.callout || - type === Protocol.Block.Type.numbered || - type === Protocol.Block.Type.bullet - ); - } - - // TODO: cursor positioning problem - private async insert_blocks(blocks: ClipBlockInfo[], select?: SelectInfo) { - if (blocks.length === 0) { - return; - } - - const cur_select_info = - await this._editor.selectionManager.getSelectInfo(); - if (cur_select_info.blocks.length === 0) { - return; - } - - let beginIndex = 0; - const curNodeId = - cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId; - let curBlock = await this._editor.getBlockById(curNodeId); - const blockView = this._editor.getView(curBlock.type); - if ( - cur_select_info.type === 'Range' && - curBlock.type === 'text' && - blockView.isEmpty(curBlock) - ) { - await curBlock.setType(blocks[0].type); - curBlock.setProperties(blocks[0].properties); - await this._pasteChildren(curBlock, blocks[0].children); - beginIndex = 1; - } else if ( - select?.type === 'Range' && - cur_select_info.type === 'Range' && - this._canEditText(curBlock.type) && - this._canEditText(blocks[0].type) - ) { - if ( - cur_select_info.blocks.length > 0 && - cur_select_info.blocks[0].startInfo - ) { - const startInfo = cur_select_info.blocks[0].startInfo; - const endInfo = cur_select_info.blocks[0].endInfo; - const curTextValue = curBlock.getProperty('text').value; - const pre_curTextValue = curTextValue.slice( - 0, - startInfo.arrayIndex - ); - const lastCurTextValue = curTextValue.slice( - endInfo.arrayIndex + 1 - ); - const preText = curTextValue[ - startInfo.arrayIndex - ].text.substring(0, startInfo.offset); - const lastText = curTextValue[ - endInfo.arrayIndex - ].text.substring(endInfo.offset); - - let lastBlock: ClipBlockInfo = blocks[blocks.length - 1]; - if (!this._canEditText(lastBlock.type)) { - lastBlock = { type: 'text', children: [] }; - blocks.push(lastBlock); - } - const lastValues = lastBlock.properties?.text?.value; - lastText && lastValues.push({ text: lastText }); - lastValues.push(...lastCurTextValue); - lastBlock.properties = { - text: { value: lastValues }, - }; - - const insertInfo = blocks[0].properties.text; - preText && pre_curTextValue.push({ text: preText }); - pre_curTextValue.push(...insertInfo.value); - this._editor.blockHelper.setBlockBlur(curNodeId); - setTimeout(async () => { - const curBlock = await this._editor.getBlockById(curNodeId); - curBlock.setProperties({ - text: { value: pre_curTextValue }, - }); - await this._pasteChildren(curBlock, blocks[0].children); - }, 0); - beginIndex = 1; - } - } - - for (let i = beginIndex; i < blocks.length; i++) { - const nextBlock = await this._editor.createBlock(blocks[i].type); - nextBlock.setProperties(blocks[i].properties); - if (curBlock.type === 'page') { - curBlock.prepend(nextBlock); - } else { - curBlock.after(nextBlock); - } - - await this._pasteChildren(nextBlock, blocks[i].children); - curBlock = nextBlock; - } - } - - private async _pasteChildren(parent: AsyncBlock, children: any[]) { - for (let i = 0; i < children.length; i++) { - const nextBlock = await this._editor.createBlock(children[i].type); - nextBlock.setProperties(children[i].properties); - await parent.append(nextBlock); - await this._pasteChildren(nextBlock, children[i].children); - } - } - - private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) { - switch (action) { - case ClipboardAction.COPY: - this._hooks.beforeCopy(e); - break; - - case ClipboardAction.CUT: - this._hooks.beforeCut(e); - break; - } - } - - private _dispatchClipboardEvent( - action: ClipboardAction, - e: ClipboardEvent - ) { - this._preCopyCut(action, e); - } - - dispose() { - document.removeEventListener(ClipboardAction.COPY, this._handleCopy); - document.removeEventListener(ClipboardAction.CUT, this._handleCut); - document.removeEventListener(ClipboardAction.PASTE, this._handlePaste); - this._eventTarget.removeEventListener( - ClipboardAction.COPY, - this._handleCopy - ); - this._eventTarget.removeEventListener( - ClipboardAction.CUT, - this._handleCut - ); - this._eventTarget.removeEventListener( - ClipboardAction.PASTE, - this._handlePaste - ); - this._clipboardParse.dispose(); - this._clipboardParse = null; - this._eventTarget = null; - this._hooks = null; - this._editor = null; - } -} - -export { BrowserClipboard }; From d8b176a329230aea8329654921f11e40c812382d Mon Sep 17 00:00:00 2001 From: DarkSky Date: Thu, 11 Aug 2022 23:02:36 +0800 Subject: [PATCH 59/95] chore: login condition --- libs/components/account/src/login/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/libs/components/account/src/login/index.tsx b/libs/components/account/src/login/index.tsx index e29b84f12..82f460c78 100644 --- a/libs/components/account/src/login/index.tsx +++ b/libs/components/account/src/login/index.tsx @@ -49,14 +49,14 @@ export function Login() { width: '100px', }} /> - {/* {((process.env['NX_LOCAL'] || true) && ( */} - - {/* )) || - null} - {((!process.env['NX_LOCAL'] || true) && ( */} - - {/* )) || - null} */}{' '} + {(process.env['NX_LOCAL'] && ( + + )) || + null} + {(!process.env['NX_LOCAL'] && ( + + )) || + null} From f81c600aaf55da87de623472545a99dc1b96a29f Mon Sep 17 00:00:00 2001 From: Bryan Lee Date: Fri, 12 Aug 2022 00:55:52 +0800 Subject: [PATCH 60/95] fix: type error --- .../editor-blocks/src/blocks/todo/CheckBox.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx index badd4f6a6..59d0d20fb 100644 --- a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx +++ b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx @@ -9,19 +9,19 @@ interface CheckBoxProps { } export const CheckBox: FC = ({ - size = '16px', - height = '23px', + size = 16, + height = 23, checked, onChange, }) => { const dynamic_style = useMemo( () => ({ height: { - height, + height: `${height}px`, }, size: { - width: size, - height: size, + width: `${size}px`, + height: `${size}px`, }, }), [height, size] From 40b617c42944f1cc12a11482fa2a5b9283cc3fec Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 01:26:27 +0800 Subject: [PATCH 61/95] chore: reduce code by gndelia/codemod-replace-react-fc-typescript --- apps/ligo-virgo/src/pages/tools/icons/Icons.tsx | 4 ++-- .../command-panel/BorderColorConfig.tsx | 5 +---- .../components/command-panel/CommandPanel.tsx | 2 +- .../components/command-panel/DeleteOperation.tsx | 2 +- .../components/command-panel/FillColorConfig.tsx | 5 +---- .../components/command-panel/FontSizeConfig.tsx | 2 +- .../command-panel/FrameFillColorConfig.tsx | 4 ++-- .../components/command-panel/GroupOperation.tsx | 4 ++-- .../components/command-panel/LockOperation.tsx | 4 ++-- .../stroke-line-style-config/LineStyle.tsx | 4 ++-- .../StrokeLineStyleConfig.tsx | 4 ++-- .../src/components/context-menu/context-menu.tsx | 2 +- .../src/components/palette/Palette.tsx | 4 ++-- .../src/components/tools-panel/LineTools.tsx | 2 +- .../src/components/tools-panel/ShapeTools.tsx | 2 +- .../src/components/tools-panel/ToolsPanel.tsx | 2 +- .../src/components/tools-panel/pen-tools/Pen.tsx | 4 ++-- .../tools-panel/pen-tools/PenTools.tsx | 2 +- .../src/components/zoom-bar/ZoomBar.tsx | 2 +- .../src/components/zoom-bar/mini-map/MiniMap.tsx | 2 +- .../zoom-bar/mini-map/SimplifiedShape.tsx | 4 ++-- .../components/zoom-bar/mini-map/Viewport.tsx | 4 ++-- .../src/blocks/bullet/BulletView.tsx | 2 +- .../editor-blocks/src/blocks/code/CodeView.tsx | 2 +- .../src/blocks/divider/divider-view.tsx | 2 +- .../src/blocks/embed-link/EmbedLinkView.tsx | 2 +- .../editor-blocks/src/blocks/figma/FigmaView.tsx | 2 +- .../editor-blocks/src/blocks/file/FileView.tsx | 2 +- .../src/blocks/grid-item/GridItem.tsx | 2 +- .../src/blocks/grid-item/GridItemRender.tsx | 2 +- .../editor-blocks/src/blocks/grid/GirdHandle.tsx | 4 ++-- .../editor-blocks/src/blocks/grid/Grid.tsx | 2 +- .../editor-blocks/src/blocks/group/GroupView.tsx | 2 +- .../editor-blocks/src/blocks/group/ScenePage.tsx | 2 +- .../src/blocks/group/SceneTable.tsx | 2 +- .../src/blocks/groupDvider/groupDividerView.tsx | 2 +- .../editor-blocks/src/blocks/image/ImageView.tsx | 2 +- .../src/blocks/numbered/NumberedView.tsx | 2 +- .../editor-blocks/src/blocks/page/PageView.tsx | 2 +- .../src/blocks/ref-link/ref-link-view.tsx | 2 +- .../editor-blocks/src/blocks/text/TextView.tsx | 4 ++-- .../editor-blocks/src/blocks/toc/toc-view.tsx | 2 +- .../editor-blocks/src/blocks/todo/CheckBox.tsx | 4 ++-- .../editor-blocks/src/blocks/todo/TodoView.tsx | 2 +- .../src/blocks/youtube/YoutubeView.tsx | 2 +- .../components/BlockContainer/BlockContainer.tsx | 4 ++-- .../src/components/ImageView/ImageView.tsx | 2 +- .../components/IndentWrapper/IndentWrapper.tsx | 2 +- .../src/components/editable/editable.tsx | 2 +- .../src/components/source-view/SourceView.tsx | 2 +- .../src/components/table/basic-table.tsx | 16 ++++++++++------ .../table/custom-cell/check-box/index.tsx | 4 ++-- .../src/components/table/custom-cell/index.tsx | 4 ++-- .../table/custom-cell/select/index.tsx | 4 ++-- .../editor-blocks/src/components/table/table.tsx | 2 +- .../src/components/upload/upload.tsx | 2 +- libs/components/editor-core/src/RenderRoot.tsx | 4 ++-- .../src/block-pendant/BlockPendantProvider.tsx | 4 ++-- .../pendant-popover/PendantPopover.tsx | 6 +++--- .../editor-core/src/render-block/RenderBlock.tsx | 4 ++-- .../src/render-block/RenderBlockChildren.tsx | 2 +- .../src/menu/left-menu/LeftMenuDraggable.tsx | 2 +- .../header/EditorBoardSwitcher/StatusTrack.tsx | 2 +- .../settings-sidebar/Settings/footer/Footer.tsx | 2 +- .../Settings/footer/LastModified.tsx | 2 +- .../settings-sidebar/Settings/footer/Logout.tsx | 2 +- libs/components/ui/src/button/IconButton.tsx | 4 ++-- libs/components/ui/src/divider/Divider.tsx | 4 ++-- libs/components/ui/src/list/ListItem.tsx | 4 ++-- libs/components/ui/src/select/OldSelect.tsx | 7 +------ libs/components/ui/src/slider/Slider.tsx | 2 +- libs/components/ui/src/tag/Tag.tsx | 4 ++-- libs/components/ui/src/theme/utils.tsx | 2 +- 73 files changed, 108 insertions(+), 115 deletions(-) diff --git a/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx b/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx index a496a5867..9a3ba1683 100644 --- a/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx +++ b/apps/ligo-virgo/src/pages/tools/icons/Icons.tsx @@ -3,7 +3,7 @@ import * as uiIcons from '@toeverything/components/icons'; import { message, styled } from '@toeverything/components/ui'; import { copy } from './copy'; -const IconBooth: FC<{ name: string; Icon: FC }> = ({ name, Icon }) => { +const IconBooth = ({ name, Icon }: { name: string; Icon: FC }) => { const on_click = () => { copy(`<${name} />`); message.success('Copied ~'); @@ -18,7 +18,7 @@ const IconBooth: FC<{ name: string; Icon: FC }> = ({ name, Icon }) => { const _icons = Object.entries(uiIcons).filter(([key]) => key !== 'timestamp'); -export const Icons: FC = () => { +export const Icons = () => { const ref = useRef(null); return ( diff --git a/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx index 9810dcaf3..8b13982b8 100644 --- a/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx +++ b/libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx @@ -34,10 +34,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => { return max[0]; }; -export const BorderColorConfig: FC = ({ - app, - shapes, -}) => { +export const BorderColorConfig = ({ app, shapes }: BorderColorConfigProps) => { const setBorderColor = (color: string) => { app.style({ stroke: color }, getShapeIds(shapes)); }; diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx index 1e73889fb..6c45bfc4e 100644 --- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx +++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx @@ -13,7 +13,7 @@ import { DeleteShapes } from './DeleteOperation'; import { Lock, Unlock } from './LockOperation'; import { FrameFillColorConfig } from './FrameFillColorConfig'; -export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => { +export const CommandPanel = ({ app }: { app: TldrawApp }) => { const state = app.useStore(); const bounds = TLDR.get_selected_bounds(state); const camera = app.useStore( diff --git a/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx b/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx index c93d02254..050c1e23d 100644 --- a/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx +++ b/libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx @@ -10,7 +10,7 @@ interface DeleteShapesProps { shapes: TDShape[]; } -export const DeleteShapes: FC = ({ app, shapes }) => { +export const DeleteShapes = ({ app, shapes }: DeleteShapesProps) => { const deleteShapes = () => { app.delete(getShapeIds(shapes)); }; diff --git a/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx index 1c8ce3660..57c6a68d1 100644 --- a/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx +++ b/libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx @@ -41,10 +41,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => { return max[0]; }; -export const FillColorConfig: FC = ({ - app, - shapes, -}) => { +export const FillColorConfig = ({ app, shapes }: BorderColorConfigProps) => { const theme = useTheme(); const setFillColor = (color: ColorType) => { app.style( diff --git a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx index 86d23a433..dfb625229 100644 --- a/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx +++ b/libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx @@ -51,7 +51,7 @@ const _getFontSize = (shapes: TDShape[]): FontSizeStyle => { return max[0] as unknown as FontSizeStyle; }; -export const FontSizeConfig: FC = ({ app, shapes }) => { +export const FontSizeConfig = ({ app, shapes }: FontSizeConfigProps) => { const setFontSize = (size: FontSizeStyle) => { app.style({ fontSize: size }, getShapeIds(shapes)); }; diff --git a/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx b/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx index e8cbe0727..7e325a06f 100644 --- a/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx +++ b/libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx @@ -40,10 +40,10 @@ const _getIconRenderColor = (shapes: TDShape[]) => { return max[0]; }; -export const FrameFillColorConfig: FC = ({ +export const FrameFillColorConfig = ({ app, shapes, -}) => { +}: BorderColorConfigProps) => { const theme = useTheme(); const setFillColor = (color: ColorType) => { app.style( diff --git a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx index 8a9b3f3ac..6e6a0fcc9 100644 --- a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx +++ b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx @@ -10,7 +10,7 @@ interface GroupAndUnGroupProps { shapes: TDShape[]; } -export const Group: FC = ({ app, shapes }) => { +export const Group = ({ app, shapes }: GroupAndUnGroupProps) => { const group = () => { app.group(getShapeIds(shapes)); }; @@ -23,7 +23,7 @@ export const Group: FC = ({ app, shapes }) => { ); }; -export const UnGroup: FC = ({ app, shapes }) => { +export const UnGroup = ({ app, shapes }: GroupAndUnGroupProps) => { const ungroup = () => { app.ungroup(getShapeIds(shapes)); }; diff --git a/libs/components/board-draw/src/components/command-panel/LockOperation.tsx b/libs/components/board-draw/src/components/command-panel/LockOperation.tsx index aeb59b2cf..c03ec01e1 100644 --- a/libs/components/board-draw/src/components/command-panel/LockOperation.tsx +++ b/libs/components/board-draw/src/components/command-panel/LockOperation.tsx @@ -10,7 +10,7 @@ interface GroupAndUnGroupProps { shapes: TDShape[]; } -export const Lock: FC = ({ app, shapes }) => { +export const Lock = ({ app, shapes }: GroupAndUnGroupProps) => { const lock = () => { app.lock(getShapeIds(shapes)); }; @@ -23,7 +23,7 @@ export const Lock: FC = ({ app, shapes }) => { ); }; -export const Unlock: FC = ({ app, shapes }) => { +export const Unlock = ({ app, shapes }: GroupAndUnGroupProps) => { const unlock = () => { app.unlock(getShapeIds(shapes)); }; diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx index ee54446d0..e68df6c28 100644 --- a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx +++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx @@ -44,12 +44,12 @@ interface LineStyleProps { onStrokeWidthChange: (width: StrokeWidth) => void; } -export const LineStyle: FC = ({ +export const LineStyle = ({ strokeStyle, onStrokeStyleChange, strokeWidth, onStrokeWidthChange, -}) => { +}: LineStyleProps) => { return ( Stroke Style diff --git a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx index 5a47534d5..fb9bea617 100644 --- a/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx +++ b/libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx @@ -24,10 +24,10 @@ interface BorderColorConfigProps { shapes: TDShape[]; } -export const StrokeLineStyleConfig: FC = ({ +export const StrokeLineStyleConfig = ({ app, shapes, -}) => { +}: BorderColorConfigProps) => { const strokeStyle = _getStrokeStyle(shapes); const strokeWidth = _getStrokeWidth(shapes); const setStrokeLineStyle = (style: DashStyle) => { diff --git a/libs/components/board-draw/src/components/context-menu/context-menu.tsx b/libs/components/board-draw/src/components/context-menu/context-menu.tsx index 82f1c37ce..6d8bb5c00 100644 --- a/libs/components/board-draw/src/components/context-menu/context-menu.tsx +++ b/libs/components/board-draw/src/components/context-menu/context-menu.tsx @@ -1,5 +1,5 @@ import type { FC, ReactNode } from 'react'; -export const ContextMenu: FC<{ children: ReactNode }> = ({ children }) => { +export const ContextMenu = ({ children }: { children: ReactNode }) => { return
    {children}
    ; }; diff --git a/libs/components/board-draw/src/components/palette/Palette.tsx b/libs/components/board-draw/src/components/palette/Palette.tsx index 34021444a..f89decdd2 100644 --- a/libs/components/board-draw/src/components/palette/Palette.tsx +++ b/libs/components/board-draw/src/components/palette/Palette.tsx @@ -26,11 +26,11 @@ const formatColors = (colors: ColorValue[]): ColorObject[] => { }); }; -export const Palette: FC = ({ +export const Palette = ({ colors: propColors, selected, onSelect, -}) => { +}: PaletteProps) => { const colorObjects = useMemo(() => formatColors(propColors), [propColors]); return ( diff --git a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx index 3959e3629..ea54a2014 100644 --- a/libs/components/board-draw/src/components/tools-panel/LineTools.tsx +++ b/libs/components/board-draw/src/components/tools-panel/LineTools.tsx @@ -33,7 +33,7 @@ const shapes = [ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool; -export const LineTools: FC<{ app: TldrawApp }> = ({ app }) => { +export const LineTools = ({ app }: { app: TldrawApp }) => { const activeTool = app.useStore(activeToolSelector); const [lastActiveTool, setLastActiveTool] = useState( diff --git a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx index c042d860f..32f8a5ba9 100644 --- a/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx +++ b/libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx @@ -69,7 +69,7 @@ const shapes = [ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool; -export const ShapeTools: FC<{ app: TldrawApp }> = ({ app }) => { +export const ShapeTools = ({ app }: { app: TldrawApp }) => { const activeTool = app.useStore(activeToolSelector); const [lastActiveTool, setLastActiveTool] = useState( diff --git a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx index e8d10e1f7..f650f8dd8 100644 --- a/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx +++ b/libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx @@ -68,7 +68,7 @@ const tools: Array<{ }, ]; -export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => { +export const ToolsPanel = ({ app }: { app: TldrawApp }) => { const activeTool = app.useStore(activeToolSelector); const isToolLocked = app.useStore(toolLockedSelector); diff --git a/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx b/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx index 94d83774f..bcfc0b3bd 100644 --- a/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx +++ b/libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx @@ -9,13 +9,13 @@ interface PenProps { onClick: () => void; } -export const Pen: FC = ({ +export const Pen = ({ name, icon, primaryColor, secondaryColor, onClick, -}) => { +}: PenProps) => { return ( ); -export const PenTools: FC<{ app: TldrawApp }> = ({ app }) => { +export const PenTools = ({ app }: { app: TldrawApp }) => { const appCurrentTool = app.useStore(state => state.appState.activeTool); const chosenPen = PENCIL_CONFIGS.find(config => config.key === appCurrentTool) || diff --git a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx index 9a1693031..ba05686c8 100644 --- a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx +++ b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx @@ -16,7 +16,7 @@ import { MiniMap } from './mini-map'; const zoomSelector = (s: TDSnapshot) => s.document.pageStates[s.appState.currentPageId].camera.zoom; -export const ZoomBar: FC = () => { +export const ZoomBar = () => { const app = useTldrawApp(); const zoom = app.useStore(zoomSelector); diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx index f3ad75843..0b950fe02 100644 --- a/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx +++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx @@ -18,7 +18,7 @@ const getScaleToMap = (width: number, height: number) => { return scaleWidth > scaleHeight ? scaleWidth : scaleHeight; }; -export const MiniMap: FC = () => { +export const MiniMap = () => { const app = useTldrawApp(); const page = app.useStore(s => s.document.pages[s.appState.currentPageId]); const pageState = app.useStore( diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx index e64cf18f7..9edb3eda6 100644 --- a/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx +++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx @@ -6,13 +6,13 @@ interface SimplifiedShapeProps extends TLBounds { onClick?: () => void; } -export const SimplifiedShape: FC = ({ +export const SimplifiedShape = ({ onClick, width, height, minX, minY, -}) => { +}: SimplifiedShapeProps) => { const style: CSSProperties = { width: `${width}px`, height: `${height}px`, diff --git a/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx b/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx index de923a6af..7cd830f16 100644 --- a/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx +++ b/libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx @@ -8,13 +8,13 @@ interface ViewportProps extends TLBounds { onPan?: (delta: [number, number]) => void; } -export const Viewport: FC = ({ +export const Viewport = ({ onPan, width, height, minX, minY, -}) => { +}: ViewportProps) => { const style: CSSProperties = { width: `${width}px`, height: `${height}px`, diff --git a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx index dee9042e7..a2ef05300 100644 --- a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx +++ b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx @@ -43,7 +43,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => { const BulletLeft = styled('div')(() => ({ height: '22px', })); -export const BulletView: FC = ({ block, editor }) => { +export const BulletView = ({ block, editor }: CreateView) => { // block.remove(); const properties = { ...defaultBulletProps, ...block.getProperties() }; const textRef = useRef(null); diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index 9ce542acf..2d421296e 100644 --- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx +++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx @@ -126,7 +126,7 @@ const CodeBlock = styled('div')(({ theme }) => ({ outline: 'none !important', }, })); -export const CodeView: FC = ({ block, editor }) => { +export const CodeView = ({ block, editor }: CreateCodeView) => { const initValue: string = block.getProperty('text')?.value?.[0]?.text; const langType: string = block.getProperty('lang'); const [extensions, setExtensions] = useState(); diff --git a/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx b/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx index 7611f78f3..293fd2c4c 100644 --- a/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx +++ b/libs/components/editor-blocks/src/blocks/divider/divider-view.tsx @@ -18,7 +18,7 @@ const Line = styled('div')({ backgroundColor: '#e2e8f0', }); -export const DividerView: FC = ({ block, editor }) => { +export const DividerView = ({ block, editor }: CreateView) => { const [isSelected, setIsSelected] = useState(false); useOnSelect(block.id, (isSelect: boolean) => { diff --git a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx index da33c2be4..e939f3951 100644 --- a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx +++ b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx @@ -13,7 +13,7 @@ const MESSAGES = { }; type EmbedLinkView = CreateView; -export const EmbedLinkView: FC = props => { +export const EmbedLinkView = (props: EmbedLinkView) => { const { block, editor } = props; const [isSelect, setIsSelect] = useState(false); diff --git a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx index 2d1231523..ad2bf5720 100644 --- a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx +++ b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx @@ -16,7 +16,7 @@ const MESSAGES = { interface FigmaView extends CreateView { figmaUrl?: string; } -export const FigmaView: FC = ({ block, editor }) => { +export const FigmaView = ({ block, editor }: FigmaView) => { const [figmaUrl, setFigmaUrl] = useState( block.getProperty('embedLink')?.value ); diff --git a/libs/components/editor-blocks/src/blocks/file/FileView.tsx b/libs/components/editor-blocks/src/blocks/file/FileView.tsx index 819bb5a5d..32dfe0843 100644 --- a/libs/components/editor-blocks/src/blocks/file/FileView.tsx +++ b/libs/components/editor-blocks/src/blocks/file/FileView.tsx @@ -48,7 +48,7 @@ const FileViewContainer = styled('div')<{ isSelected: boolean }>( }; } ); -export const FileView: FC = ({ block, editor }) => { +export const FileView = ({ block, editor }: FileView) => { const [fileUrl, setFileUrl] = useState(); const fileInfo = block.getProperty('file') || ({} as FileColumnValue); const file_id = fileInfo.value; diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx index 4273e7c5d..770d3792a 100644 --- a/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx +++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx @@ -7,7 +7,7 @@ import { GRID_PROPERTY_KEY, removePercent } from '../grid'; export const GRID_ITEM_CLASS_NAME = 'grid-item'; export const GRID_ITEM_CONTENT_CLASS_NAME = `${GRID_ITEM_CLASS_NAME}-content`; -export const GridItem: FC = function (props) { +export const GridItem = function (props: ChildrenView) { const { children, block, editor } = props; const RENDER_DELAY_TIME = 100; const ref = useRef(); diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx index ee7146879..0d945b88e 100644 --- a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx +++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx @@ -3,7 +3,7 @@ import { RenderBlock } from '@toeverything/components/editor-core'; import { ChildrenView, CreateView } from '@toeverything/framework/virgo'; export const GridItemRender = function (creator: FC) { - const GridItem: FC = function (props) { + const GridItem = function (props: CreateView) { const { block } = props; const children = ( <> diff --git a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx index 687cc2873..f87e1c899 100644 --- a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx @@ -16,7 +16,7 @@ type GridHandleProps = { onMouseEnter?: React.MouseEventHandler; }; -export const GridHandle: FC = function ({ +export const GridHandle = function ({ blockId, editor, enabledAddItem, @@ -25,7 +25,7 @@ export const GridHandle: FC = function ({ draggable, alertHandleId, onMouseEnter, -}) { +}: GridHandleProps) { const [isMouseDown, setIsMouseDown] = useState(false); const handleMouseDown: React.MouseEventHandler = e => { if (draggable) { diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx index ec06c1049..79ab22d0a 100644 --- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx @@ -20,7 +20,7 @@ export function removePercent(str: string) { return str.replace('%', ''); } -export const Grid: FC = function (props) { +export const Grid = function (props: CreateView) { const { block, editor } = props; const gridItemMinWidth = editor.configManager.grid.gridItemMinWidth; const [isOnDrag, setIsOnDrag] = useState(false); diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx index b990d1aa5..9ab7dec7c 100644 --- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx +++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx @@ -78,7 +78,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>( }) ); -export const GroupView: FC = props => { +export const GroupView = (props: CreateView) => { const { block, editor } = props; const [currentView] = useCurrentView(); const [groupIsSelect, setGroupIsSelect] = useState(false); diff --git a/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx b/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx index 2ff26ba55..ba73bcd6b 100644 --- a/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx +++ b/libs/components/editor-blocks/src/blocks/group/ScenePage.tsx @@ -2,6 +2,6 @@ import { RenderBlockChildren } from '@toeverything/components/editor-core'; import type { CreateView } from '@toeverything/framework/virgo'; import { FC } from 'react'; -export const ScenePage: FC = ({ block }) => { +export const ScenePage = ({ block }: CreateView) => { return ; }; diff --git a/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx b/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx index 6b7a56cb5..f7a3422bc 100644 --- a/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx +++ b/libs/components/editor-blocks/src/blocks/group/SceneTable.tsx @@ -5,7 +5,7 @@ import type { CreateView } from '@toeverything/framework/virgo'; import type { TableColumn, TableRow } from '../../components/table'; import { Table, CustomCell } from '../../components/table'; -export const SceneTable: FC = ({ block, columns, editor }) => { +export const SceneTable = ({ block, columns, editor }: CreateView) => { const [rows, set_rows] = useState([]); const data_columns = useMemo(() => { return (columns || []) diff --git a/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx b/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx index c14d4bbf0..bb5d1f3c9 100644 --- a/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx +++ b/libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; import { CreateView } from '@toeverything/framework/virgo'; -export const GroupDividerView: FC = ({ block, editor }) => { +export const GroupDividerView = ({ block, editor }: CreateView) => { return <>; }; diff --git a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx index 369dceac8..3a7eb0fbc 100644 --- a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx +++ b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx @@ -54,7 +54,7 @@ const KanbanImageContainer = styled('div')<{ isSelected: boolean }>( }; } ); -export const ImageView: FC = ({ block, editor }) => { +export const ImageView = ({ block, editor }: ImageView) => { const workspace = editor.workspace; const [imgUrl, set_image_url] = useState(); const [imgWidth, setImgWidth] = useState(0); diff --git a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx index 2f8f29b70..80fd35077 100644 --- a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx +++ b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx @@ -40,7 +40,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => { ); }; -export const NumberedView: FC = ({ block, editor }) => { +export const NumberedView = ({ block, editor }: CreateView) => { // block.remove(); const properties = { ...defaultTodoProps, ...block.getProperties() }; const [number, set_number] = useState(1); diff --git a/libs/components/editor-blocks/src/blocks/page/PageView.tsx b/libs/components/editor-blocks/src/blocks/page/PageView.tsx index 17ad6cae9..64ea3c953 100644 --- a/libs/components/editor-blocks/src/blocks/page/PageView.tsx +++ b/libs/components/editor-blocks/src/blocks/page/PageView.tsx @@ -15,7 +15,7 @@ import { type ExtendedTextUtils, } from '../../components/text-manage'; -export const PageView: FC = ({ block, editor }) => { +export const PageView = ({ block, editor }: CreateView) => { const { workspace_id } = useParams(); const textRef = useRef(null); const [backLinks, setBackLinks] = diff --git a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx index 80e035775..07d66175f 100644 --- a/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx +++ b/libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx @@ -5,7 +5,7 @@ import { CreateView } from '@toeverything/framework/virgo'; type RefLinkView = CreateView; -export const RefLinkView: FC = ({ block, editor }) => { +export const RefLinkView = ({ block, editor }: RefLinkView) => { const page_id = useMemo(() => block.getProperty('reference'), [block]); const [block_content, set_block] = diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx index 2f26e17c3..5f55e6d64 100644 --- a/libs/components/editor-blocks/src/blocks/text/TextView.tsx +++ b/libs/components/editor-blocks/src/blocks/text/TextView.tsx @@ -51,11 +51,11 @@ const TextBlock = styled(TextManage)<{ type: string }>(({ theme, type }) => { } }); -export const TextView: FC = ({ +export const TextView = ({ block, editor, containerClassName, -}) => { +}: CreateTextView) => { const [isSelect, setIsSelect] = useState(); useOnSelect(block.id, (is_select: boolean) => { setIsSelect(is_select); diff --git a/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx b/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx index 6e16889b2..bc1b5397b 100644 --- a/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx +++ b/libs/components/editor-blocks/src/blocks/toc/toc-view.tsx @@ -11,7 +11,7 @@ const INITIAL_LIST: MenuItem[] = []; const MESSAGES = { NO_HEADINGS_FOUND: 'No headings found', }; -export const TocView: FC = ({ block, editor }) => { +export const TocView = ({ block, editor }: CreateView) => { const [list, setList] = useState(INITIAL_LIST); useEffect(() => { const sync_toc = async () => { diff --git a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx index 59d0d20fb..67641c8bb 100644 --- a/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx +++ b/libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx @@ -8,12 +8,12 @@ interface CheckBoxProps { onChange: (checked: boolean) => void; } -export const CheckBox: FC = ({ +export const CheckBox = ({ size = 16, height = 23, checked, onChange, -}) => { +}: CheckBoxProps) => { const dynamic_style = useMemo( () => ({ height: { diff --git a/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx b/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx index e5588d46f..cf1685709 100644 --- a/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx +++ b/libs/components/editor-blocks/src/blocks/todo/TodoView.tsx @@ -33,7 +33,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => { ); }; -export const TodoView: FC = ({ block, editor }) => { +export const TodoView = ({ block, editor }: CreateView) => { const properties = { ...defaultTodoProps, ...block.getProperties() }; const text_ref = useRef(null); diff --git a/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx b/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx index d761e8e10..d5b385fbd 100644 --- a/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx +++ b/libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx @@ -10,7 +10,7 @@ const _messages = { }; type YoutubeView = CreateView; -export const YoutubeView: FC = ({ block }) => { +export const YoutubeView = ({ block }: YoutubeView) => { const [youtubeUrl, setYoutubeUrl] = useState( block.getProperty('embedLink')?.value ); diff --git a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx index dbe12277b..603846a5a 100644 --- a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx +++ b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx @@ -7,13 +7,13 @@ type BlockContainerProps = Parameters[0] & { editor: BlockEditor; }; -export const BlockContainer: FC = function ({ +export const BlockContainer = function ({ block, children, className, editor, ...restProps -}) { +}: BlockContainerProps) { return ( ( }; } ); -export const Image: FC = props => { +export const Image = (props: Props) => { const { link, viewStyle, isSelected, block } = props; const on_resize_end = (e: any, data: any) => { block.setProperty('image_style', data.size); diff --git a/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx b/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx index f342d28ba..b8ff537d9 100644 --- a/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx +++ b/libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx @@ -5,7 +5,7 @@ import { styled } from '@toeverything/components/ui'; /** * Indent rendering child nodes */ -export const IndentWrapper: FC = props => { +export const IndentWrapper = (props: PropsWithChildren) => { return {props.children}; }; diff --git a/libs/components/editor-blocks/src/components/editable/editable.tsx b/libs/components/editor-blocks/src/components/editable/editable.tsx index 5354b0869..fbf80482f 100644 --- a/libs/components/editor-blocks/src/components/editable/editable.tsx +++ b/libs/components/editor-blocks/src/components/editable/editable.tsx @@ -9,7 +9,7 @@ import { ErrorBoundary } from '@toeverything/utils'; // onChange: () => void; // } -export const Editable: FC = () => { +export const Editable = () => { const editor = useMemo(() => withReact(createEditor()), []); return ( { return loading...; }; -export const SourceView: FC = props => { +export const SourceView = (props: Props) => { const { link, isSelected, block, editorElement } = props; const src = formatUrl(link); // let iframeShow = useLazyIframe(src, 3000, iframeContainer); diff --git a/libs/components/editor-blocks/src/components/table/basic-table.tsx b/libs/components/editor-blocks/src/components/table/basic-table.tsx index 61373017a..875e56051 100644 --- a/libs/components/editor-blocks/src/components/table/basic-table.tsx +++ b/libs/components/editor-blocks/src/components/table/basic-table.tsx @@ -64,8 +64,13 @@ export const DEFAULT_RENDER_CELL: CustomCell = ({ value }) => { return {value ? String(value) : '--'}; }; -const Cell: FC> = memo( - ({ data, rowIndex, columnIndex, style }) => { +const Cell = memo( + ({ + data, + rowIndex, + columnIndex, + style, + }: GridChildComponentProps) => { const column = data.columns[columnIndex]; const row = data.rows[rowIndex]; const is_first_column = columnIndex === 0; @@ -89,18 +94,17 @@ const Cell: FC> = memo( />
    ); - }, - areEqual + } ); -export const BasicTable: FC = ({ +export const BasicTable = ({ columns, rows, headerHeight = DEFAULT_ROW_HEIGHT, rowKey, border = true, renderCell = DEFAULT_RENDER_CELL, -}) => { +}: BasicTableProps) => { const container_ref = useRef(); const [table_width, set_table_width] = useState(0); diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx index 37361f78f..423f0cc29 100644 --- a/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx +++ b/libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx @@ -6,10 +6,10 @@ import type { CellProps } from '../types'; /** * @deprecated */ -export const CheckBoxCell: FC> = ({ +export const CheckBoxCell = ({ value, onChange, -}) => { +}: CellProps) => { return ( = ({ onChange, ...props }) => { +const DefaultCell = ({ onChange, ...props }: CellProps) => { return ; }; @@ -33,7 +33,7 @@ interface CustomCellProps extends TableCustomCellProps { onChange: (data: TableCustomCellProps) => void; } -export const CustomCell: FC = props => { +export const CustomCell = (props: CustomCellProps) => { const View = props.rowIndex === 0 ? DefaultCell diff --git a/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx b/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx index e5175533e..ed2099950 100644 --- a/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx +++ b/libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx @@ -8,11 +8,11 @@ import type { CellProps } from '../types'; /** * @deprecated */ -export const SelectCell: FC> = ({ +export const SelectCell = ({ value, column, onChange, -}) => { +}: CellProps) => { const options = useMemo(() => { if (isEnumColumn(column.columnConfig)) { return column.columnConfig.options.map(option => { diff --git a/libs/components/editor-blocks/src/components/table/table.tsx b/libs/components/editor-blocks/src/components/table/table.tsx index 1c65c63b5..73dd42108 100644 --- a/libs/components/editor-blocks/src/components/table/table.tsx +++ b/libs/components/editor-blocks/src/components/table/table.tsx @@ -6,7 +6,7 @@ interface TableProps extends BasicTableProps { addon?: ReactNode; } -export const Table: FC = ({ addon, ...props }) => { +export const Table = ({ addon, ...props }: TableProps) => { return (
    {addon} diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx index 02066bd2b..279a74f2c 100644 --- a/libs/components/editor-blocks/src/components/upload/upload.tsx +++ b/libs/components/editor-blocks/src/components/upload/upload.tsx @@ -71,7 +71,7 @@ const UploadBox = styled('div')<{ isSelected: boolean }>( ); const button_styles: SxProps = { width: '60%', fontSize: '12px' }; -export const Upload: FC = props => { +export const Upload = (props: Props) => { const { fileChange, size, diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index caa840cb3..893016008 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/libs/components/editor-core/src/RenderRoot.tsx @@ -24,11 +24,11 @@ interface RenderRootProps { const MAX_PAGE_WIDTH = 5000; export const MIN_PAGE_WIDTH = 1480; -export const RenderRoot: FC> = ({ +export const RenderRoot = ({ editor, editorElement, children, -}) => { +}: PropsWithChildren) => { const selectionRef = useRef(null); const triggeredBySelect = useRef(false); const [pageWidth, setPageWidth] = useState(MIN_PAGE_WIDTH); diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx index 70c56af04..d9dcdd57c 100644 --- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx +++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx @@ -12,10 +12,10 @@ interface BlockTagProps { block: AsyncBlock; } -export const BlockPendantProvider: FC> = ({ +export const BlockPendantProvider = ({ block, children, -}) => { +}: PropsWithChildren) => { const triggerRef = useRef(); const { getProperties } = useRecastBlockMeta(); const properties = getProperties(); diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx index 9ec79d03e..d92a2ab8b 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx @@ -8,11 +8,11 @@ import { } from '@toeverything/components/ui'; import { AddPendantPopover } from '../AddPendantPopover'; -export const PendantPopover: FC< - { +export const PendantPopover = ( + props: { block: AsyncBlock; } & Omit -> = props => { +) => { const { block, ...popoverProps } = props; const popoverHandlerRef = useRef(); return ( diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 74f6c659c..426b27053 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx @@ -10,10 +10,10 @@ interface RenderBlockProps { hasContainer?: boolean; } -export const RenderBlock: FC = ({ +export const RenderBlock = ({ blockId, hasContainer = true, -}) => { +}: RenderBlockProps) => { const { editor, editorElement } = useEditor(); const { block } = useBlock(blockId); const blockRef = useRef(null); diff --git a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx index 23391057f..96dc07676 100644 --- a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx @@ -6,7 +6,7 @@ interface RenderChildrenProps { block: AsyncBlock; } -export const RenderBlockChildren: FC = ({ block }) => { +export const RenderBlockChildren = ({ block }: RenderChildrenProps) => { return block.childrenIds.length ? ( <> {block.childrenIds.map(childId => { diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx index 750490650..f07380e0b 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx @@ -128,7 +128,7 @@ function DragComponent(props: { ); } -export const LeftMenuDraggable: FC = props => { +export const LeftMenuDraggable = (props: LeftMenuProps) => { const { editor, blockInfo, defaultVisible, lineInfo } = props; const [visible, setVisible] = useState(defaultVisible); const [anchorEl, setAnchorEl] = useState(); diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx index 839c429da..c4c0503dd 100644 --- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx +++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx @@ -8,7 +8,7 @@ interface StatusTrackProps { onClick: () => void; } -export const StatusTrack: FC = ({ mode, onClick }) => { +export const StatusTrack = ({ mode, onClick }: StatusTrackProps) => { return ( diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx index 712fe2a59..ab2a97662 100644 --- a/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx +++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx @@ -3,7 +3,7 @@ import { styled } from '@toeverything/components/ui'; import { LastModified } from './LastModified'; import { Logout } from './Logout'; -export const Footer: FC = () => { +export const Footer = () => { return ( diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx index 3bac52c47..e7e937a90 100644 --- a/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx +++ b/libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx @@ -4,7 +4,7 @@ import { Typography, styled } from '@toeverything/components/ui'; import { useUserAndSpaces } from '@toeverything/datasource/state'; import { usePageLastUpdated, useWorkspaceAndPageId } from '../util'; -export const LastModified: FC = () => { +export const LastModified = () => { const { user } = useUserAndSpaces(); const username = user ? user.nickname : 'Anonymous'; const { workspaceId, pageId } = useWorkspaceAndPageId(); diff --git a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx index 361ad8475..0acd0b3e6 100644 --- a/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx +++ b/libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx @@ -21,7 +21,7 @@ const logout = () => { window.location.href = '/'; }; -export const Logout: FC = () => { +export const Logout = () => { return ( diff --git a/libs/components/ui/src/button/IconButton.tsx b/libs/components/ui/src/button/IconButton.tsx index 77e1f08a6..ab66b36cf 100644 --- a/libs/components/ui/src/button/IconButton.tsx +++ b/libs/components/ui/src/button/IconButton.tsx @@ -39,13 +39,13 @@ interface IconButtonProps { hoverColor?: string; } -export const IconButton: FC> = ({ +export const IconButton = ({ children, disabled, onClick, className, ...props -}) => { +}: PropsWithChildren) => { return ( = ({ +export const Divider = ({ orientation = 'horizontal', textAlign = 'center', children, -}) => { +}: DividerProps) => { return ( > = ({ +export const ListItem = ({ active, children, onClick, className, style, -}) => { +}: PropsWithChildren) => { return ( = ({ - value, - options, - onChange, - extraStyle, -}: Props) => { +export const OldSelect = ({ value, options, onChange, extraStyle }: Props) => { const onSelectChange = useCallback( (e: ChangeEvent) => { onChange(e.target.value); diff --git a/libs/components/ui/src/slider/Slider.tsx b/libs/components/ui/src/slider/Slider.tsx index b9cb98bb8..2e22114e7 100644 --- a/libs/components/ui/src/slider/Slider.tsx +++ b/libs/components/ui/src/slider/Slider.tsx @@ -14,7 +14,7 @@ interface SliderProps { onChange?: SliderUnstyledProps['onChange']; } -export const Slider: FC = props => { +export const Slider = (props: SliderProps) => { return ; }; diff --git a/libs/components/ui/src/tag/Tag.tsx b/libs/components/ui/src/tag/Tag.tsx index 7ef614e81..70ffc2aa7 100644 --- a/libs/components/ui/src/tag/Tag.tsx +++ b/libs/components/ui/src/tag/Tag.tsx @@ -19,7 +19,7 @@ export interface TagProps { endElement?: ReactNode; } -export const Tag: FC> = ({ +export const Tag = ({ onClick, style, children, @@ -27,7 +27,7 @@ export const Tag: FC> = ({ onClose, startElement, endElement, -}) => { +}: PropsWithChildren) => { return ( = ({ children }) => { +export const ThemeProvider = ({ children }: { children?: ReactNode }) => { return {children}; }; From d3b4906da91da50627a0cf3e5bf5665ff6c2cd61 Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 01:42:17 +0800 Subject: [PATCH 62/95] chore: reduce code for icons --- .../icons/src/auto-icons/add-view/add-view.tsx | 7 ++----- libs/components/icons/src/auto-icons/add/add.tsx | 7 ++----- .../icons/src/auto-icons/align-center/align-center.tsx | 7 ++----- .../icons/src/auto-icons/align-justify/align-justify.tsx | 7 ++----- .../icons/src/auto-icons/align-left/align-left.tsx | 7 ++----- .../icons/src/auto-icons/align-right/align-right.tsx | 7 ++----- .../icons/src/auto-icons/arrow-big/arrow-big.tsx | 7 ++----- .../src/auto-icons/arrow-drop-down/arrow-drop-down.tsx | 7 ++----- .../icons/src/auto-icons/arrow-right/arrow-right.tsx | 7 ++----- libs/components/icons/src/auto-icons/arrow/arrow.tsx | 7 ++----- libs/components/icons/src/auto-icons/at/at.tsx | 7 ++----- .../icons/src/auto-icons/backlinks/backlinks.tsx | 7 ++----- .../icons/src/auto-icons/backward-undo/backward-undo.tsx | 7 ++----- libs/components/icons/src/auto-icons/blocks/blocks.tsx | 7 ++----- .../icons/src/auto-icons/board-view/board-view.tsx | 7 ++----- .../border-color-duotone/border-color-duotone.tsx | 7 ++----- .../auto-icons/border-color-none/border-color-none.tsx | 7 ++----- libs/components/icons/src/auto-icons/brush/brush.tsx | 7 ++----- libs/components/icons/src/auto-icons/bullet/bullet.tsx | 7 ++----- .../src/auto-icons/bulleted-list-1/bulleted-list-1.tsx | 7 ++----- .../src/auto-icons/bulleted-list-2/bulleted-list-2.tsx | 7 ++----- .../src/auto-icons/bulleted-list-3/bulleted-list-3.tsx | 7 ++----- .../src/auto-icons/bulleted-list-4/bulleted-list-4.tsx | 7 ++----- libs/components/icons/src/auto-icons/callout/callout.tsx | 7 ++----- libs/components/icons/src/auto-icons/card/card.tsx | 7 ++----- .../src/auto-icons/check-box-check/check-box-check.tsx | 7 ++----- .../auto-icons/check-box-uncheck/check-box-uncheck.tsx | 7 ++----- .../icons/src/auto-icons/code-block/code-block.tsx | 7 ++----- libs/components/icons/src/auto-icons/code/code.tsx | 7 ++----- .../icons/src/auto-icons/collaborator/collaborator.tsx | 7 ++----- libs/components/icons/src/auto-icons/comment/comment.tsx | 7 ++----- .../src/auto-icons/conector-arrow/conector-arrow.svg | 2 +- .../src/auto-icons/conector-arrow/conector-arrow.tsx | 9 +++------ .../icons/src/auto-icons/conector-line/conector-line.tsx | 7 ++----- .../icons/src/auto-icons/connector/connector.tsx | 7 ++----- .../icons/src/auto-icons/dash-line/dash-line.tsx | 7 ++----- libs/components/icons/src/auto-icons/date/date.tsx | 7 ++----- .../src/auto-icons/delete-cash-bin/delete-cash-bin.tsx | 7 ++----- .../src/auto-icons/delete-small-tag/delete-small-tag.tsx | 7 ++----- libs/components/icons/src/auto-icons/divider/divider.tsx | 7 ++----- .../icons/src/auto-icons/doc-view/doc-view.tsx | 7 ++----- libs/components/icons/src/auto-icons/done/done.tsx | 7 ++----- .../icons/src/auto-icons/duplicate/duplicate.tsx | 7 ++----- libs/components/icons/src/auto-icons/edit/edit.tsx | 7 ++----- libs/components/icons/src/auto-icons/ellipse/ellipse.tsx | 7 ++----- libs/components/icons/src/auto-icons/email/email.tsx | 7 ++----- libs/components/icons/src/auto-icons/embed/embed.tsx | 7 ++----- libs/components/icons/src/auto-icons/eraser/eraser.tsx | 7 ++----- libs/components/icons/src/auto-icons/figma/figma.tsx | 7 ++----- libs/components/icons/src/auto-icons/file/file.tsx | 7 ++----- libs/components/icons/src/auto-icons/filter/filter.tsx | 7 ++----- .../auto-icons/format-background/format-background.tsx | 7 ++----- .../format-bold-emphasis/format-bold-emphasis.tsx | 7 ++----- .../icons/src/auto-icons/format-clear/format-clear.tsx | 7 ++----- .../auto-icons/format-color-text/format-color-text.tsx | 7 ++----- .../icons/src/auto-icons/format-italic/format-italic.tsx | 7 ++----- .../format-strikethrough/format-strikethrough.tsx | 7 ++----- .../icons/src/auto-icons/forward-redo/forward-redo.tsx | 7 ++----- libs/components/icons/src/auto-icons/frame/frame.tsx | 7 ++----- .../icons/src/auto-icons/full-screen/full-screen.tsx | 7 ++----- .../icons/src/auto-icons/group-by/group-by.tsx | 7 ++----- libs/components/icons/src/auto-icons/group/group.tsx | 7 ++----- .../icons/src/auto-icons/hand-tool/hand-tool.tsx | 7 ++----- .../icons/src/auto-icons/handle-child/handle-child.tsx | 7 ++----- .../icons/src/auto-icons/handle-parent/handle-parent.tsx | 7 ++----- .../icons/src/auto-icons/heading-one/heading-one.tsx | 7 ++----- .../icons/src/auto-icons/heading-three/heading-three.tsx | 7 ++----- .../icons/src/auto-icons/heading-two/heading-two.tsx | 7 ++----- .../icons/src/auto-icons/help-center/help-center.tsx | 7 ++----- .../highlighter-duotone/highlighter-duotone.tsx | 7 ++----- .../icons/src/auto-icons/hover-frame/hover-frame.tsx | 7 ++----- libs/components/icons/src/auto-icons/image/image.tsx | 7 ++----- libs/components/icons/src/auto-icons/index.ts | 2 +- .../icons/src/auto-icons/information/information.tsx | 7 ++----- libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx | 7 ++----- .../auto-icons/laser-pen-duotone/laser-pen-duotone.tsx | 7 ++----- libs/components/icons/src/auto-icons/layout/layout.tsx | 7 ++----- .../icons/src/auto-icons/line-none/line-none.tsx | 7 ++----- libs/components/icons/src/auto-icons/link/link.tsx | 7 ++----- .../icons/src/auto-icons/location/location.tsx | 7 ++----- libs/components/icons/src/auto-icons/lock/lock.tsx | 7 ++----- libs/components/icons/src/auto-icons/log-out/log-out.tsx | 7 ++----- libs/components/icons/src/auto-icons/logo/logo.tsx | 7 ++----- .../more-tags-an-subblocks/more-tags-an-subblocks.tsx | 7 ++----- libs/components/icons/src/auto-icons/more/more.tsx | 7 ++----- libs/components/icons/src/auto-icons/move-to/move-to.tsx | 7 ++----- .../icons/src/auto-icons/multi-select/multi-select.tsx | 7 ++----- libs/components/icons/src/auto-icons/number/number.tsx | 7 ++----- .../icons/src/auto-icons/page-duallink/page-duallink.tsx | 7 ++----- .../auto-icons/page-in-page-tree/page-in-page-tree.tsx | 7 ++----- libs/components/icons/src/auto-icons/pages/pages.tsx | 7 ++----- libs/components/icons/src/auto-icons/pen/pen.tsx | 7 ++----- .../src/auto-icons/pencil-duotone/pencil-duotone.tsx | 7 ++----- libs/components/icons/src/auto-icons/phone/phone.tsx | 7 ++----- libs/components/icons/src/auto-icons/pin/pin.tsx | 7 ++----- .../icons/src/auto-icons/point-line/point-line.tsx | 7 ++----- libs/components/icons/src/auto-icons/polygon/polygon.tsx | 7 ++----- libs/components/icons/src/auto-icons/quote/quote.tsx | 7 ++----- .../icons/src/auto-icons/reaction/reaction.tsx | 7 ++----- .../icons/src/auto-icons/rectangle-93/rectangle-93.tsx | 7 ++----- .../icons/src/auto-icons/rectangle/rectangle.tsx | 7 ++----- libs/components/icons/src/auto-icons/search/search.tsx | 7 ++----- .../auto-icons/select-box-select/select-box-select.tsx | 7 ++----- .../select-box-unselect/select-box-unselect.tsx | 7 ++----- libs/components/icons/src/auto-icons/select/select.tsx | 7 ++----- .../icons/src/auto-icons/settings/settings.tsx | 7 ++----- .../shape-color-duotone/shape-color-duotone.tsx | 7 ++----- .../src/auto-icons/shape-color-none/shape-color-none.tsx | 7 ++----- libs/components/icons/src/auto-icons/shape/shape.tsx | 7 ++----- .../side-bar-view-close/side-bar-view-close.tsx | 7 ++----- .../icons/src/auto-icons/side-bar-view/side-bar-view.tsx | 7 ++----- .../icons/src/auto-icons/single-select/single-select.tsx | 7 ++----- .../icons/src/auto-icons/solid-line/solid-line.tsx | 7 ++----- libs/components/icons/src/auto-icons/sort/sort.tsx | 7 ++----- libs/components/icons/src/auto-icons/sql/sql.tsx | 7 ++----- libs/components/icons/src/auto-icons/stamp/stamp.tsx | 7 ++----- libs/components/icons/src/auto-icons/star/star.tsx | 7 ++----- libs/components/icons/src/auto-icons/status/status.tsx | 7 ++----- .../auto-icons/switch-off-duotone/switch-off-duotone.tsx | 7 ++----- .../auto-icons/switch-on-duotone/switch-on-duotone.tsx | 7 ++----- libs/components/icons/src/auto-icons/table/table.tsx | 7 ++----- .../src/auto-icons/tag-add-duotone/tag-add-duotone.tsx | 7 ++----- libs/components/icons/src/auto-icons/tags/tags.tsx | 7 ++----- .../icons/src/auto-icons/text-font/text-font.tsx | 7 ++----- libs/components/icons/src/auto-icons/text/text.tsx | 7 ++----- libs/components/icons/src/auto-icons/to-do/to-do.tsx | 7 ++----- .../icons/src/auto-icons/todo-list/todo-list.tsx | 7 ++----- .../icons/src/auto-icons/triangle/triangle.tsx | 7 ++----- .../icons/src/auto-icons/turn-into/turn-into.tsx | 7 ++----- libs/components/icons/src/auto-icons/ungroup/ungroup.tsx | 7 ++----- libs/components/icons/src/auto-icons/unlock/unlock.tsx | 7 ++----- libs/components/icons/src/auto-icons/web-app/web-app.tsx | 7 ++----- libs/components/icons/src/auto-icons/youtube/youtube.tsx | 7 ++----- tools/executors/figmaRes/figma/generateReactIcon.js | 9 +++------ tools/executors/svgOptimize/svgo.js | 4 ---- 135 files changed, 268 insertions(+), 668 deletions(-) diff --git a/libs/components/icons/src/auto-icons/add-view/add-view.tsx b/libs/components/icons/src/auto-icons/add-view/add-view.tsx index 17d439570..268eaf8e6 100644 --- a/libs/components/icons/src/auto-icons/add-view/add-view.tsx +++ b/libs/components/icons/src/auto-icons/add-view/add-view.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AddViewIconProps extends Omit { color?: string } -export const AddViewIcon: FC = ({ color, style, ...props}) => { +export const AddViewIcon = ({ color, style, ...props}: AddViewIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/add/add.tsx b/libs/components/icons/src/auto-icons/add/add.tsx index 59e6fc072..016f9fb9b 100644 --- a/libs/components/icons/src/auto-icons/add/add.tsx +++ b/libs/components/icons/src/auto-icons/add/add.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AddIconProps extends Omit { color?: string } -export const AddIcon: FC = ({ color, style, ...props}) => { +export const AddIcon = ({ color, style, ...props}: AddIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/align-center/align-center.tsx b/libs/components/icons/src/auto-icons/align-center/align-center.tsx index 1a87ccc29..71bcaac6e 100644 --- a/libs/components/icons/src/auto-icons/align-center/align-center.tsx +++ b/libs/components/icons/src/auto-icons/align-center/align-center.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AlignCenterIconProps extends Omit { color?: string } -export const AlignCenterIcon: FC = ({ color, style, ...props}) => { +export const AlignCenterIcon = ({ color, style, ...props}: AlignCenterIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx b/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx index 50a97b9f3..86dfcc43e 100644 --- a/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx +++ b/libs/components/icons/src/auto-icons/align-justify/align-justify.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AlignJustifyIconProps extends Omit { color?: string } -export const AlignJustifyIcon: FC = ({ color, style, ...props}) => { +export const AlignJustifyIcon = ({ color, style, ...props}: AlignJustifyIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/align-left/align-left.tsx b/libs/components/icons/src/auto-icons/align-left/align-left.tsx index d00f9c9ee..d697280ca 100644 --- a/libs/components/icons/src/auto-icons/align-left/align-left.tsx +++ b/libs/components/icons/src/auto-icons/align-left/align-left.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AlignLeftIconProps extends Omit { color?: string } -export const AlignLeftIcon: FC = ({ color, style, ...props}) => { +export const AlignLeftIcon = ({ color, style, ...props}: AlignLeftIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/align-right/align-right.tsx b/libs/components/icons/src/auto-icons/align-right/align-right.tsx index b4674bf93..759688c4e 100644 --- a/libs/components/icons/src/auto-icons/align-right/align-right.tsx +++ b/libs/components/icons/src/auto-icons/align-right/align-right.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AlignRightIconProps extends Omit { color?: string } -export const AlignRightIcon: FC = ({ color, style, ...props}) => { +export const AlignRightIcon = ({ color, style, ...props}: AlignRightIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/arrow-big/arrow-big.tsx b/libs/components/icons/src/auto-icons/arrow-big/arrow-big.tsx index 2ab1222fd..439eca1b3 100644 --- a/libs/components/icons/src/auto-icons/arrow-big/arrow-big.tsx +++ b/libs/components/icons/src/auto-icons/arrow-big/arrow-big.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ArrowBigIconProps extends Omit { color?: string } -export const ArrowBigIcon: FC = ({ color, style, ...props}) => { +export const ArrowBigIcon = ({ color, style, ...props}: ArrowBigIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx b/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx index 94d8e9b84..27c7dd003 100644 --- a/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx +++ b/libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ArrowDropDownIconProps extends Omit { color?: string } -export const ArrowDropDownIcon: FC = ({ color, style, ...props}) => { +export const ArrowDropDownIcon = ({ color, style, ...props}: ArrowDropDownIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx b/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx index 284a7fec9..bbe7057e0 100644 --- a/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx +++ b/libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ArrowRightIconProps extends Omit { color?: string } -export const ArrowRightIcon: FC = ({ color, style, ...props}) => { +export const ArrowRightIcon = ({ color, style, ...props}: ArrowRightIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/arrow/arrow.tsx b/libs/components/icons/src/auto-icons/arrow/arrow.tsx index 0446fee91..f8519c54a 100644 --- a/libs/components/icons/src/auto-icons/arrow/arrow.tsx +++ b/libs/components/icons/src/auto-icons/arrow/arrow.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ArrowIconProps extends Omit { color?: string } -export const ArrowIcon: FC = ({ color, style, ...props}) => { +export const ArrowIcon = ({ color, style, ...props}: ArrowIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/at/at.tsx b/libs/components/icons/src/auto-icons/at/at.tsx index 2eef208e8..212686d72 100644 --- a/libs/components/icons/src/auto-icons/at/at.tsx +++ b/libs/components/icons/src/auto-icons/at/at.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface AtIconProps extends Omit { color?: string } -export const AtIcon: FC = ({ color, style, ...props}) => { +export const AtIcon = ({ color, style, ...props}: AtIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx b/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx index 4ba3cc7c9..fbfd454bc 100644 --- a/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx +++ b/libs/components/icons/src/auto-icons/backlinks/backlinks.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BacklinksIconProps extends Omit { color?: string } -export const BacklinksIcon: FC = ({ color, style, ...props}) => { +export const BacklinksIcon = ({ color, style, ...props}: BacklinksIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx b/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx index 58d8daa11..4d099e427 100644 --- a/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx +++ b/libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BackwardUndoIconProps extends Omit { color?: string } -export const BackwardUndoIcon: FC = ({ color, style, ...props}) => { +export const BackwardUndoIcon = ({ color, style, ...props}: BackwardUndoIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/blocks/blocks.tsx b/libs/components/icons/src/auto-icons/blocks/blocks.tsx index f175a64e6..e454b05b2 100644 --- a/libs/components/icons/src/auto-icons/blocks/blocks.tsx +++ b/libs/components/icons/src/auto-icons/blocks/blocks.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BlocksIconProps extends Omit { color?: string } -export const BlocksIcon: FC = ({ color, style, ...props}) => { +export const BlocksIcon = ({ color, style, ...props}: BlocksIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/board-view/board-view.tsx b/libs/components/icons/src/auto-icons/board-view/board-view.tsx index 372feee00..98753e90e 100644 --- a/libs/components/icons/src/auto-icons/board-view/board-view.tsx +++ b/libs/components/icons/src/auto-icons/board-view/board-view.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BoardViewIconProps extends Omit { color?: string } -export const BoardViewIcon: FC = ({ color, style, ...props}) => { +export const BoardViewIcon = ({ color, style, ...props}: BoardViewIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx b/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx index fb97c5379..4c79d4e65 100644 --- a/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx +++ b/libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx @@ -1,16 +1,13 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BorderColorDuotoneIconProps extends Omit { color0?: string primaryColor?: string } -export const BorderColorDuotoneIcon: FC = ({ color0, primaryColor, style, ...props}) => { +export const BorderColorDuotoneIcon = ({ color0, primaryColor, style, ...props}: BorderColorDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx b/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx index 105b3754e..9602fed80 100644 --- a/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx +++ b/libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BorderColorNoneIconProps extends Omit { color?: string } -export const BorderColorNoneIcon: FC = ({ color, style, ...props}) => { +export const BorderColorNoneIcon = ({ color, style, ...props}: BorderColorNoneIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/brush/brush.tsx b/libs/components/icons/src/auto-icons/brush/brush.tsx index 716b9e74b..8164d8edc 100644 --- a/libs/components/icons/src/auto-icons/brush/brush.tsx +++ b/libs/components/icons/src/auto-icons/brush/brush.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BrushIconProps extends Omit { color?: string } -export const BrushIcon: FC = ({ color, style, ...props}) => { +export const BrushIcon = ({ color, style, ...props}: BrushIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/bullet/bullet.tsx b/libs/components/icons/src/auto-icons/bullet/bullet.tsx index 126e1321e..a07f6e284 100644 --- a/libs/components/icons/src/auto-icons/bullet/bullet.tsx +++ b/libs/components/icons/src/auto-icons/bullet/bullet.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BulletIconProps extends Omit { color?: string } -export const BulletIcon: FC = ({ color, style, ...props}) => { +export const BulletIcon = ({ color, style, ...props}: BulletIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx b/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx index 59dddc056..1acb76f30 100644 --- a/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx +++ b/libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BulletedList_1IconProps extends Omit { color?: string } -export const BulletedList_1Icon: FC = ({ color, style, ...props}) => { +export const BulletedList_1Icon = ({ color, style, ...props}: BulletedList_1IconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx b/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx index f5a8be5de..f4d1e2a23 100644 --- a/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx +++ b/libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BulletedList_2IconProps extends Omit { color?: string } -export const BulletedList_2Icon: FC = ({ color, style, ...props}) => { +export const BulletedList_2Icon = ({ color, style, ...props}: BulletedList_2IconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx b/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx index 44d686255..161c14fae 100644 --- a/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx +++ b/libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BulletedList_3IconProps extends Omit { color?: string } -export const BulletedList_3Icon: FC = ({ color, style, ...props}) => { +export const BulletedList_3Icon = ({ color, style, ...props}: BulletedList_3IconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx b/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx index 9c54e6118..ab1b42a45 100644 --- a/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx +++ b/libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface BulletedList_4IconProps extends Omit { color?: string } -export const BulletedList_4Icon: FC = ({ color, style, ...props}) => { +export const BulletedList_4Icon = ({ color, style, ...props}: BulletedList_4IconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/callout/callout.tsx b/libs/components/icons/src/auto-icons/callout/callout.tsx index 469a5baf7..228025aff 100644 --- a/libs/components/icons/src/auto-icons/callout/callout.tsx +++ b/libs/components/icons/src/auto-icons/callout/callout.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CalloutIconProps extends Omit { color?: string } -export const CalloutIcon: FC = ({ color, style, ...props}) => { +export const CalloutIcon = ({ color, style, ...props}: CalloutIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/card/card.tsx b/libs/components/icons/src/auto-icons/card/card.tsx index 8c7250165..2f67f5e96 100644 --- a/libs/components/icons/src/auto-icons/card/card.tsx +++ b/libs/components/icons/src/auto-icons/card/card.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CardIconProps extends Omit { color?: string } -export const CardIcon: FC = ({ color, style, ...props}) => { +export const CardIcon = ({ color, style, ...props}: CardIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx b/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx index b2cc8fb7b..ca724e4c3 100644 --- a/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx +++ b/libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CheckBoxCheckIconProps extends Omit { color?: string } -export const CheckBoxCheckIcon: FC = ({ color, style, ...props}) => { +export const CheckBoxCheckIcon = ({ color, style, ...props}: CheckBoxCheckIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx b/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx index 56fae7819..f44864cb5 100644 --- a/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx +++ b/libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CheckBoxUncheckIconProps extends Omit { color?: string } -export const CheckBoxUncheckIcon: FC = ({ color, style, ...props}) => { +export const CheckBoxUncheckIcon = ({ color, style, ...props}: CheckBoxUncheckIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/code-block/code-block.tsx b/libs/components/icons/src/auto-icons/code-block/code-block.tsx index f2807ea6b..6a6ae7d6c 100644 --- a/libs/components/icons/src/auto-icons/code-block/code-block.tsx +++ b/libs/components/icons/src/auto-icons/code-block/code-block.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CodeBlockIconProps extends Omit { color?: string } -export const CodeBlockIcon: FC = ({ color, style, ...props}) => { +export const CodeBlockIcon = ({ color, style, ...props}: CodeBlockIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/code/code.tsx b/libs/components/icons/src/auto-icons/code/code.tsx index f20f5a709..4fbf67519 100644 --- a/libs/components/icons/src/auto-icons/code/code.tsx +++ b/libs/components/icons/src/auto-icons/code/code.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CodeIconProps extends Omit { color?: string } -export const CodeIcon: FC = ({ color, style, ...props}) => { +export const CodeIcon = ({ color, style, ...props}: CodeIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx b/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx index 99413bff2..6e76a68fb 100644 --- a/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx +++ b/libs/components/icons/src/auto-icons/collaborator/collaborator.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CollaboratorIconProps extends Omit { color?: string } -export const CollaboratorIcon: FC = ({ color, style, ...props}) => { +export const CollaboratorIcon = ({ color, style, ...props}: CollaboratorIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/comment/comment.tsx b/libs/components/icons/src/auto-icons/comment/comment.tsx index e8186e6e1..e85904b02 100644 --- a/libs/components/icons/src/auto-icons/comment/comment.tsx +++ b/libs/components/icons/src/auto-icons/comment/comment.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface CommentIconProps extends Omit { color?: string } -export const CommentIcon: FC = ({ color, style, ...props}) => { +export const CommentIcon = ({ color, style, ...props}: CommentIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg index c9a63d7de..f494ee977 100644 --- a/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg +++ b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx index d04fb4bd3..3aa9ccb3c 100644 --- a/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx +++ b/libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx @@ -1,21 +1,18 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ConectorArrowIconProps extends Omit { color?: string } -export const ConectorArrowIcon: FC = ({ color, style, ...props}) => { +export const ConectorArrowIcon = ({ color, style, ...props}: ConectorArrowIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} return ( - + ) }; diff --git a/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx b/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx index c2b492e52..61607a68b 100644 --- a/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx +++ b/libs/components/icons/src/auto-icons/conector-line/conector-line.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ConectorLineIconProps extends Omit { color?: string } -export const ConectorLineIcon: FC = ({ color, style, ...props}) => { +export const ConectorLineIcon = ({ color, style, ...props}: ConectorLineIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/connector/connector.tsx b/libs/components/icons/src/auto-icons/connector/connector.tsx index 18f11e3aa..6b498795b 100644 --- a/libs/components/icons/src/auto-icons/connector/connector.tsx +++ b/libs/components/icons/src/auto-icons/connector/connector.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ConnectorIconProps extends Omit { color?: string } -export const ConnectorIcon: FC = ({ color, style, ...props}) => { +export const ConnectorIcon = ({ color, style, ...props}: ConnectorIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx b/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx index 71b889c45..13b226010 100644 --- a/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx +++ b/libs/components/icons/src/auto-icons/dash-line/dash-line.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DashLineIconProps extends Omit { color?: string } -export const DashLineIcon: FC = ({ color, style, ...props}) => { +export const DashLineIcon = ({ color, style, ...props}: DashLineIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/date/date.tsx b/libs/components/icons/src/auto-icons/date/date.tsx index 02e74a09f..a39ebcf27 100644 --- a/libs/components/icons/src/auto-icons/date/date.tsx +++ b/libs/components/icons/src/auto-icons/date/date.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DateIconProps extends Omit { color?: string } -export const DateIcon: FC = ({ color, style, ...props}) => { +export const DateIcon = ({ color, style, ...props}: DateIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx b/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx index 8ae563568..f2611bf76 100644 --- a/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx +++ b/libs/components/icons/src/auto-icons/delete-cash-bin/delete-cash-bin.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DeleteCashBinIconProps extends Omit { color?: string } -export const DeleteCashBinIcon: FC = ({ color, style, ...props}) => { +export const DeleteCashBinIcon = ({ color, style, ...props}: DeleteCashBinIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx b/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx index 7260c5db4..ac3a39327 100644 --- a/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx +++ b/libs/components/icons/src/auto-icons/delete-small-tag/delete-small-tag.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DeleteSmallTagIconProps extends Omit { color?: string } -export const DeleteSmallTagIcon: FC = ({ color, style, ...props}) => { +export const DeleteSmallTagIcon = ({ color, style, ...props}: DeleteSmallTagIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/divider/divider.tsx b/libs/components/icons/src/auto-icons/divider/divider.tsx index 08009a3e7..e3711fcea 100644 --- a/libs/components/icons/src/auto-icons/divider/divider.tsx +++ b/libs/components/icons/src/auto-icons/divider/divider.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DividerIconProps extends Omit { color?: string } -export const DividerIcon: FC = ({ color, style, ...props}) => { +export const DividerIcon = ({ color, style, ...props}: DividerIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx b/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx index a75e9f2f5..aecd5a446 100644 --- a/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx +++ b/libs/components/icons/src/auto-icons/doc-view/doc-view.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DocViewIconProps extends Omit { color?: string } -export const DocViewIcon: FC = ({ color, style, ...props}) => { +export const DocViewIcon = ({ color, style, ...props}: DocViewIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/done/done.tsx b/libs/components/icons/src/auto-icons/done/done.tsx index 1550405f8..a87367888 100644 --- a/libs/components/icons/src/auto-icons/done/done.tsx +++ b/libs/components/icons/src/auto-icons/done/done.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DoneIconProps extends Omit { color?: string } -export const DoneIcon: FC = ({ color, style, ...props}) => { +export const DoneIcon = ({ color, style, ...props}: DoneIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx b/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx index 8421aa6ca..1a97e5b5a 100644 --- a/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx +++ b/libs/components/icons/src/auto-icons/duplicate/duplicate.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface DuplicateIconProps extends Omit { color?: string } -export const DuplicateIcon: FC = ({ color, style, ...props}) => { +export const DuplicateIcon = ({ color, style, ...props}: DuplicateIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/edit/edit.tsx b/libs/components/icons/src/auto-icons/edit/edit.tsx index 25a1238e1..b744f552c 100644 --- a/libs/components/icons/src/auto-icons/edit/edit.tsx +++ b/libs/components/icons/src/auto-icons/edit/edit.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface EditIconProps extends Omit { color?: string } -export const EditIcon: FC = ({ color, style, ...props}) => { +export const EditIcon = ({ color, style, ...props}: EditIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx b/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx index e77a90925..24265258d 100644 --- a/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx +++ b/libs/components/icons/src/auto-icons/ellipse/ellipse.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface EllipseIconProps extends Omit { color?: string } -export const EllipseIcon: FC = ({ color, style, ...props}) => { +export const EllipseIcon = ({ color, style, ...props}: EllipseIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/email/email.tsx b/libs/components/icons/src/auto-icons/email/email.tsx index 8d7068943..f5da3eb78 100644 --- a/libs/components/icons/src/auto-icons/email/email.tsx +++ b/libs/components/icons/src/auto-icons/email/email.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface EmailIconProps extends Omit { color?: string } -export const EmailIcon: FC = ({ color, style, ...props}) => { +export const EmailIcon = ({ color, style, ...props}: EmailIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/embed/embed.tsx b/libs/components/icons/src/auto-icons/embed/embed.tsx index 6b8118629..d3a4e0d64 100644 --- a/libs/components/icons/src/auto-icons/embed/embed.tsx +++ b/libs/components/icons/src/auto-icons/embed/embed.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface EmbedIconProps extends Omit { color?: string } -export const EmbedIcon: FC = ({ color, style, ...props}) => { +export const EmbedIcon = ({ color, style, ...props}: EmbedIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/eraser/eraser.tsx b/libs/components/icons/src/auto-icons/eraser/eraser.tsx index a6b4a504e..7337f5261 100644 --- a/libs/components/icons/src/auto-icons/eraser/eraser.tsx +++ b/libs/components/icons/src/auto-icons/eraser/eraser.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface EraserIconProps extends Omit { color?: string } -export const EraserIcon: FC = ({ color, style, ...props}) => { +export const EraserIcon = ({ color, style, ...props}: EraserIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/figma/figma.tsx b/libs/components/icons/src/auto-icons/figma/figma.tsx index ebd0c50d7..4651659fa 100644 --- a/libs/components/icons/src/auto-icons/figma/figma.tsx +++ b/libs/components/icons/src/auto-icons/figma/figma.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FigmaIconProps extends Omit { color?: string } -export const FigmaIcon: FC = ({ color, style, ...props}) => { +export const FigmaIcon = ({ color, style, ...props}: FigmaIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/file/file.tsx b/libs/components/icons/src/auto-icons/file/file.tsx index 7c8d5a564..26c44ffa7 100644 --- a/libs/components/icons/src/auto-icons/file/file.tsx +++ b/libs/components/icons/src/auto-icons/file/file.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FileIconProps extends Omit { color?: string } -export const FileIcon: FC = ({ color, style, ...props}) => { +export const FileIcon = ({ color, style, ...props}: FileIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/filter/filter.tsx b/libs/components/icons/src/auto-icons/filter/filter.tsx index 72bd22d75..a95c55242 100644 --- a/libs/components/icons/src/auto-icons/filter/filter.tsx +++ b/libs/components/icons/src/auto-icons/filter/filter.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FilterIconProps extends Omit { color?: string } -export const FilterIcon: FC = ({ color, style, ...props}) => { +export const FilterIcon = ({ color, style, ...props}: FilterIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/format-background/format-background.tsx b/libs/components/icons/src/auto-icons/format-background/format-background.tsx index 6baf1ba3c..1c3a24d1c 100644 --- a/libs/components/icons/src/auto-icons/format-background/format-background.tsx +++ b/libs/components/icons/src/auto-icons/format-background/format-background.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FormatBackgroundIconProps extends Omit { color?: string } -export const FormatBackgroundIcon: FC = ({ color, style, ...props}) => { +export const FormatBackgroundIcon = ({ color, style, ...props}: FormatBackgroundIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx b/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx index 849681b6f..b6b35cb75 100644 --- a/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx +++ b/libs/components/icons/src/auto-icons/format-bold-emphasis/format-bold-emphasis.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FormatBoldEmphasisIconProps extends Omit { color?: string } -export const FormatBoldEmphasisIcon: FC = ({ color, style, ...props}) => { +export const FormatBoldEmphasisIcon = ({ color, style, ...props}: FormatBoldEmphasisIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx b/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx index a4da1e465..e85483e69 100644 --- a/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx +++ b/libs/components/icons/src/auto-icons/format-clear/format-clear.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FormatClearIconProps extends Omit { color?: string } -export const FormatClearIcon: FC = ({ color, style, ...props}) => { +export const FormatClearIcon = ({ color, style, ...props}: FormatClearIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx b/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx index aa68b248f..1ce7a0d7e 100644 --- a/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx +++ b/libs/components/icons/src/auto-icons/format-color-text/format-color-text.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FormatColorTextIconProps extends Omit { color?: string } -export const FormatColorTextIcon: FC = ({ color, style, ...props}) => { +export const FormatColorTextIcon = ({ color, style, ...props}: FormatColorTextIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx b/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx index ba3a82b16..1ed8ff0fb 100644 --- a/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx +++ b/libs/components/icons/src/auto-icons/format-italic/format-italic.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FormatItalicIconProps extends Omit { color?: string } -export const FormatItalicIcon: FC = ({ color, style, ...props}) => { +export const FormatItalicIcon = ({ color, style, ...props}: FormatItalicIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx b/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx index 1868a9a16..72057b538 100644 --- a/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx +++ b/libs/components/icons/src/auto-icons/format-strikethrough/format-strikethrough.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FormatStrikethroughIconProps extends Omit { color?: string } -export const FormatStrikethroughIcon: FC = ({ color, style, ...props}) => { +export const FormatStrikethroughIcon = ({ color, style, ...props}: FormatStrikethroughIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx b/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx index 52e5893e4..98dbdca1e 100644 --- a/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx +++ b/libs/components/icons/src/auto-icons/forward-redo/forward-redo.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ForwardRedoIconProps extends Omit { color?: string } -export const ForwardRedoIcon: FC = ({ color, style, ...props}) => { +export const ForwardRedoIcon = ({ color, style, ...props}: ForwardRedoIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/frame/frame.tsx b/libs/components/icons/src/auto-icons/frame/frame.tsx index 295410dd7..9e64227b6 100644 --- a/libs/components/icons/src/auto-icons/frame/frame.tsx +++ b/libs/components/icons/src/auto-icons/frame/frame.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FrameIconProps extends Omit { color?: string } -export const FrameIcon: FC = ({ color, style, ...props}) => { +export const FrameIcon = ({ color, style, ...props}: FrameIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx b/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx index 614d4a598..90a6f7d48 100644 --- a/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx +++ b/libs/components/icons/src/auto-icons/full-screen/full-screen.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface FullScreenIconProps extends Omit { color?: string } -export const FullScreenIcon: FC = ({ color, style, ...props}) => { +export const FullScreenIcon = ({ color, style, ...props}: FullScreenIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/group-by/group-by.tsx b/libs/components/icons/src/auto-icons/group-by/group-by.tsx index 36a029891..7289a982b 100644 --- a/libs/components/icons/src/auto-icons/group-by/group-by.tsx +++ b/libs/components/icons/src/auto-icons/group-by/group-by.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface GroupByIconProps extends Omit { color?: string } -export const GroupByIcon: FC = ({ color, style, ...props}) => { +export const GroupByIcon = ({ color, style, ...props}: GroupByIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/group/group.tsx b/libs/components/icons/src/auto-icons/group/group.tsx index abf8a0080..4c913180b 100644 --- a/libs/components/icons/src/auto-icons/group/group.tsx +++ b/libs/components/icons/src/auto-icons/group/group.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface GroupIconProps extends Omit { color?: string } -export const GroupIcon: FC = ({ color, style, ...props}) => { +export const GroupIcon = ({ color, style, ...props}: GroupIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx b/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx index 33566d795..8a71600ea 100644 --- a/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx +++ b/libs/components/icons/src/auto-icons/hand-tool/hand-tool.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HandToolIconProps extends Omit { color?: string } -export const HandToolIcon: FC = ({ color, style, ...props}) => { +export const HandToolIcon = ({ color, style, ...props}: HandToolIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx b/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx index 94b45e7bd..46e42ee9f 100644 --- a/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx +++ b/libs/components/icons/src/auto-icons/handle-child/handle-child.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HandleChildIconProps extends Omit { color?: string } -export const HandleChildIcon: FC = ({ color, style, ...props}) => { +export const HandleChildIcon = ({ color, style, ...props}: HandleChildIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx b/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx index 0703b8b71..545b5fcde 100644 --- a/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx +++ b/libs/components/icons/src/auto-icons/handle-parent/handle-parent.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HandleParentIconProps extends Omit { color?: string } -export const HandleParentIcon: FC = ({ color, style, ...props}) => { +export const HandleParentIcon = ({ color, style, ...props}: HandleParentIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx b/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx index 357c943f2..7b4025c20 100644 --- a/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx +++ b/libs/components/icons/src/auto-icons/heading-one/heading-one.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HeadingOneIconProps extends Omit { color?: string } -export const HeadingOneIcon: FC = ({ color, style, ...props}) => { +export const HeadingOneIcon = ({ color, style, ...props}: HeadingOneIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx b/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx index 1e10e1f1a..60bb5b9ba 100644 --- a/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx +++ b/libs/components/icons/src/auto-icons/heading-three/heading-three.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HeadingThreeIconProps extends Omit { color?: string } -export const HeadingThreeIcon: FC = ({ color, style, ...props}) => { +export const HeadingThreeIcon = ({ color, style, ...props}: HeadingThreeIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx b/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx index f41b618e4..b6de565ea 100644 --- a/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx +++ b/libs/components/icons/src/auto-icons/heading-two/heading-two.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HeadingTwoIconProps extends Omit { color?: string } -export const HeadingTwoIcon: FC = ({ color, style, ...props}) => { +export const HeadingTwoIcon = ({ color, style, ...props}: HeadingTwoIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/help-center/help-center.tsx b/libs/components/icons/src/auto-icons/help-center/help-center.tsx index 73e836d13..a6e412892 100644 --- a/libs/components/icons/src/auto-icons/help-center/help-center.tsx +++ b/libs/components/icons/src/auto-icons/help-center/help-center.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HelpCenterIconProps extends Omit { color?: string } -export const HelpCenterIcon: FC = ({ color, style, ...props}) => { +export const HelpCenterIcon = ({ color, style, ...props}: HelpCenterIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx b/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx index 506f45454..d2f6f44c5 100644 --- a/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx +++ b/libs/components/icons/src/auto-icons/highlighter-duotone/highlighter-duotone.tsx @@ -1,9 +1,6 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HighlighterDuotoneIconProps extends Omit { color0?: string @@ -12,7 +9,7 @@ export interface HighlighterDuotoneIconProps extends Omit secondaryColor?: string } -export const HighlighterDuotoneIcon: FC = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => { +export const HighlighterDuotoneIcon = ({ color0, primaryColor, color1, secondaryColor, style, ...props}: HighlighterDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx b/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx index 2e80468f9..9159e957d 100644 --- a/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx +++ b/libs/components/icons/src/auto-icons/hover-frame/hover-frame.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface HoverFrameIconProps extends Omit { color?: string } -export const HoverFrameIcon: FC = ({ color, style, ...props}) => { +export const HoverFrameIcon = ({ color, style, ...props}: HoverFrameIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/image/image.tsx b/libs/components/icons/src/auto-icons/image/image.tsx index 23f79a4d0..569df1b59 100644 --- a/libs/components/icons/src/auto-icons/image/image.tsx +++ b/libs/components/icons/src/auto-icons/image/image.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ImageIconProps extends Omit { color?: string } -export const ImageIcon: FC = ({ color, style, ...props}) => { +export const ImageIcon = ({ color, style, ...props}: ImageIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/index.ts b/libs/components/icons/src/auto-icons/index.ts index 4ea171d7b..f59db7967 100644 --- a/libs/components/icons/src/auto-icons/index.ts +++ b/libs/components/icons/src/auto-icons/index.ts @@ -1,4 +1,4 @@ -export const timestamp = 1659423582387; +export const timestamp = 1660239514133; export * from './image/image'; export * from './format-clear/format-clear'; export * from './backward-undo/backward-undo'; diff --git a/libs/components/icons/src/auto-icons/information/information.tsx b/libs/components/icons/src/auto-icons/information/information.tsx index 73bd08109..22484790d 100644 --- a/libs/components/icons/src/auto-icons/information/information.tsx +++ b/libs/components/icons/src/auto-icons/information/information.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface InformationIconProps extends Omit { color?: string } -export const InformationIcon: FC = ({ color, style, ...props}) => { +export const InformationIcon = ({ color, style, ...props}: InformationIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx b/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx index b3b351ee0..a0f07a8fe 100644 --- a/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx +++ b/libs/components/icons/src/auto-icons/kan-ban/kan-ban.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface KanBanIconProps extends Omit { color?: string } -export const KanBanIcon: FC = ({ color, style, ...props}) => { +export const KanBanIcon = ({ color, style, ...props}: KanBanIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx b/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx index b7d924edb..483ef807f 100644 --- a/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx +++ b/libs/components/icons/src/auto-icons/laser-pen-duotone/laser-pen-duotone.tsx @@ -1,9 +1,6 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LaserPenDuotoneIconProps extends Omit { color0?: string @@ -12,7 +9,7 @@ export interface LaserPenDuotoneIconProps extends Omit { secondaryColor?: string } -export const LaserPenDuotoneIcon: FC = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => { +export const LaserPenDuotoneIcon = ({ color0, primaryColor, color1, secondaryColor, style, ...props}: LaserPenDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/layout/layout.tsx b/libs/components/icons/src/auto-icons/layout/layout.tsx index 9a03e4d6e..6285edba4 100644 --- a/libs/components/icons/src/auto-icons/layout/layout.tsx +++ b/libs/components/icons/src/auto-icons/layout/layout.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LayoutIconProps extends Omit { color?: string } -export const LayoutIcon: FC = ({ color, style, ...props}) => { +export const LayoutIcon = ({ color, style, ...props}: LayoutIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/line-none/line-none.tsx b/libs/components/icons/src/auto-icons/line-none/line-none.tsx index 862879f12..14ef03c1c 100644 --- a/libs/components/icons/src/auto-icons/line-none/line-none.tsx +++ b/libs/components/icons/src/auto-icons/line-none/line-none.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LineNoneIconProps extends Omit { color?: string } -export const LineNoneIcon: FC = ({ color, style, ...props}) => { +export const LineNoneIcon = ({ color, style, ...props}: LineNoneIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/link/link.tsx b/libs/components/icons/src/auto-icons/link/link.tsx index 9828e5942..9fa4d328c 100644 --- a/libs/components/icons/src/auto-icons/link/link.tsx +++ b/libs/components/icons/src/auto-icons/link/link.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LinkIconProps extends Omit { color?: string } -export const LinkIcon: FC = ({ color, style, ...props}) => { +export const LinkIcon = ({ color, style, ...props}: LinkIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/location/location.tsx b/libs/components/icons/src/auto-icons/location/location.tsx index 7988b3c38..6a22f62e0 100644 --- a/libs/components/icons/src/auto-icons/location/location.tsx +++ b/libs/components/icons/src/auto-icons/location/location.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LocationIconProps extends Omit { color?: string } -export const LocationIcon: FC = ({ color, style, ...props}) => { +export const LocationIcon = ({ color, style, ...props}: LocationIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/lock/lock.tsx b/libs/components/icons/src/auto-icons/lock/lock.tsx index c2637b240..4b7b67c67 100644 --- a/libs/components/icons/src/auto-icons/lock/lock.tsx +++ b/libs/components/icons/src/auto-icons/lock/lock.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LockIconProps extends Omit { color?: string } -export const LockIcon: FC = ({ color, style, ...props}) => { +export const LockIcon = ({ color, style, ...props}: LockIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/log-out/log-out.tsx b/libs/components/icons/src/auto-icons/log-out/log-out.tsx index a7844fe2c..b48528fe1 100644 --- a/libs/components/icons/src/auto-icons/log-out/log-out.tsx +++ b/libs/components/icons/src/auto-icons/log-out/log-out.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LogOutIconProps extends Omit { color?: string } -export const LogOutIcon: FC = ({ color, style, ...props}) => { +export const LogOutIcon = ({ color, style, ...props}: LogOutIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/logo/logo.tsx b/libs/components/icons/src/auto-icons/logo/logo.tsx index cbf840ee7..716bc0d1c 100644 --- a/libs/components/icons/src/auto-icons/logo/logo.tsx +++ b/libs/components/icons/src/auto-icons/logo/logo.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface LogoIconProps extends Omit { color?: string } -export const LogoIcon: FC = ({ color, style, ...props}) => { +export const LogoIcon = ({ color, style, ...props}: LogoIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx b/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx index c631600a8..73c5ee52f 100644 --- a/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx +++ b/libs/components/icons/src/auto-icons/more-tags-an-subblocks/more-tags-an-subblocks.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface MoreTagsAnSubblocksIconProps extends Omit { color?: string } -export const MoreTagsAnSubblocksIcon: FC = ({ color, style, ...props}) => { +export const MoreTagsAnSubblocksIcon = ({ color, style, ...props}: MoreTagsAnSubblocksIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/more/more.tsx b/libs/components/icons/src/auto-icons/more/more.tsx index 643779bb8..31a3bcbb7 100644 --- a/libs/components/icons/src/auto-icons/more/more.tsx +++ b/libs/components/icons/src/auto-icons/more/more.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface MoreIconProps extends Omit { color?: string } -export const MoreIcon: FC = ({ color, style, ...props}) => { +export const MoreIcon = ({ color, style, ...props}: MoreIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/move-to/move-to.tsx b/libs/components/icons/src/auto-icons/move-to/move-to.tsx index a1a5f9b44..3a95826f8 100644 --- a/libs/components/icons/src/auto-icons/move-to/move-to.tsx +++ b/libs/components/icons/src/auto-icons/move-to/move-to.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface MoveToIconProps extends Omit { color?: string } -export const MoveToIcon: FC = ({ color, style, ...props}) => { +export const MoveToIcon = ({ color, style, ...props}: MoveToIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx b/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx index a56de13a0..b8f325e3f 100644 --- a/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx +++ b/libs/components/icons/src/auto-icons/multi-select/multi-select.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface MultiSelectIconProps extends Omit { color?: string } -export const MultiSelectIcon: FC = ({ color, style, ...props}) => { +export const MultiSelectIcon = ({ color, style, ...props}: MultiSelectIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/number/number.tsx b/libs/components/icons/src/auto-icons/number/number.tsx index b636516b8..48d708b63 100644 --- a/libs/components/icons/src/auto-icons/number/number.tsx +++ b/libs/components/icons/src/auto-icons/number/number.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface NumberIconProps extends Omit { color?: string } -export const NumberIcon: FC = ({ color, style, ...props}) => { +export const NumberIcon = ({ color, style, ...props}: NumberIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx b/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx index da28fe455..cfe410ecc 100644 --- a/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx +++ b/libs/components/icons/src/auto-icons/page-duallink/page-duallink.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PageDuallinkIconProps extends Omit { color?: string } -export const PageDuallinkIcon: FC = ({ color, style, ...props}) => { +export const PageDuallinkIcon = ({ color, style, ...props}: PageDuallinkIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx b/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx index 9d404fb4e..d11ae048e 100644 --- a/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx +++ b/libs/components/icons/src/auto-icons/page-in-page-tree/page-in-page-tree.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PageInPageTreeIconProps extends Omit { color?: string } -export const PageInPageTreeIcon: FC = ({ color, style, ...props}) => { +export const PageInPageTreeIcon = ({ color, style, ...props}: PageInPageTreeIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/pages/pages.tsx b/libs/components/icons/src/auto-icons/pages/pages.tsx index f62e5c142..48c0bc81b 100644 --- a/libs/components/icons/src/auto-icons/pages/pages.tsx +++ b/libs/components/icons/src/auto-icons/pages/pages.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PagesIconProps extends Omit { color?: string } -export const PagesIcon: FC = ({ color, style, ...props}) => { +export const PagesIcon = ({ color, style, ...props}: PagesIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/pen/pen.tsx b/libs/components/icons/src/auto-icons/pen/pen.tsx index ad0751641..827078d22 100644 --- a/libs/components/icons/src/auto-icons/pen/pen.tsx +++ b/libs/components/icons/src/auto-icons/pen/pen.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PenIconProps extends Omit { color?: string } -export const PenIcon: FC = ({ color, style, ...props}) => { +export const PenIcon = ({ color, style, ...props}: PenIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx b/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx index bd18d7cac..63a193490 100644 --- a/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx +++ b/libs/components/icons/src/auto-icons/pencil-duotone/pencil-duotone.tsx @@ -1,9 +1,6 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PencilDuotoneIconProps extends Omit { color0?: string @@ -12,7 +9,7 @@ export interface PencilDuotoneIconProps extends Omit { secondaryColor?: string } -export const PencilDuotoneIcon: FC = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => { +export const PencilDuotoneIcon = ({ color0, primaryColor, color1, secondaryColor, style, ...props}: PencilDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/phone/phone.tsx b/libs/components/icons/src/auto-icons/phone/phone.tsx index 691aaa6df..f915615fe 100644 --- a/libs/components/icons/src/auto-icons/phone/phone.tsx +++ b/libs/components/icons/src/auto-icons/phone/phone.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PhoneIconProps extends Omit { color?: string } -export const PhoneIcon: FC = ({ color, style, ...props}) => { +export const PhoneIcon = ({ color, style, ...props}: PhoneIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/pin/pin.tsx b/libs/components/icons/src/auto-icons/pin/pin.tsx index 60f1db57f..327de5a24 100644 --- a/libs/components/icons/src/auto-icons/pin/pin.tsx +++ b/libs/components/icons/src/auto-icons/pin/pin.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PinIconProps extends Omit { color?: string } -export const PinIcon: FC = ({ color, style, ...props}) => { +export const PinIcon = ({ color, style, ...props}: PinIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/point-line/point-line.tsx b/libs/components/icons/src/auto-icons/point-line/point-line.tsx index e2818689f..c4c32ad44 100644 --- a/libs/components/icons/src/auto-icons/point-line/point-line.tsx +++ b/libs/components/icons/src/auto-icons/point-line/point-line.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PointLineIconProps extends Omit { color?: string } -export const PointLineIcon: FC = ({ color, style, ...props}) => { +export const PointLineIcon = ({ color, style, ...props}: PointLineIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/polygon/polygon.tsx b/libs/components/icons/src/auto-icons/polygon/polygon.tsx index 29e820aca..9544d79d7 100644 --- a/libs/components/icons/src/auto-icons/polygon/polygon.tsx +++ b/libs/components/icons/src/auto-icons/polygon/polygon.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface PolygonIconProps extends Omit { color?: string } -export const PolygonIcon: FC = ({ color, style, ...props}) => { +export const PolygonIcon = ({ color, style, ...props}: PolygonIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/quote/quote.tsx b/libs/components/icons/src/auto-icons/quote/quote.tsx index 403fec355..bdbd9a441 100644 --- a/libs/components/icons/src/auto-icons/quote/quote.tsx +++ b/libs/components/icons/src/auto-icons/quote/quote.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface QuoteIconProps extends Omit { color?: string } -export const QuoteIcon: FC = ({ color, style, ...props}) => { +export const QuoteIcon = ({ color, style, ...props}: QuoteIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/reaction/reaction.tsx b/libs/components/icons/src/auto-icons/reaction/reaction.tsx index e50612e3f..a36c87639 100644 --- a/libs/components/icons/src/auto-icons/reaction/reaction.tsx +++ b/libs/components/icons/src/auto-icons/reaction/reaction.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ReactionIconProps extends Omit { color?: string } -export const ReactionIcon: FC = ({ color, style, ...props}) => { +export const ReactionIcon = ({ color, style, ...props}: ReactionIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx b/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx index beb3b61b5..5a327a1c8 100644 --- a/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx +++ b/libs/components/icons/src/auto-icons/rectangle-93/rectangle-93.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface Rectangle_93IconProps extends Omit { color?: string } -export const Rectangle_93Icon: FC = ({ color, style, ...props}) => { +export const Rectangle_93Icon = ({ color, style, ...props}: Rectangle_93IconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx b/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx index cdd56157b..39bca5eb4 100644 --- a/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx +++ b/libs/components/icons/src/auto-icons/rectangle/rectangle.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface RectangleIconProps extends Omit { color?: string } -export const RectangleIcon: FC = ({ color, style, ...props}) => { +export const RectangleIcon = ({ color, style, ...props}: RectangleIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/search/search.tsx b/libs/components/icons/src/auto-icons/search/search.tsx index e19e5b630..c352b447b 100644 --- a/libs/components/icons/src/auto-icons/search/search.tsx +++ b/libs/components/icons/src/auto-icons/search/search.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SearchIconProps extends Omit { color?: string } -export const SearchIcon: FC = ({ color, style, ...props}) => { +export const SearchIcon = ({ color, style, ...props}: SearchIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx b/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx index e2207f52a..b2bc838f3 100644 --- a/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx +++ b/libs/components/icons/src/auto-icons/select-box-select/select-box-select.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SelectBoxSelectIconProps extends Omit { color?: string } -export const SelectBoxSelectIcon: FC = ({ color, style, ...props}) => { +export const SelectBoxSelectIcon = ({ color, style, ...props}: SelectBoxSelectIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx b/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx index 6d4f5838b..58e5a44b1 100644 --- a/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx +++ b/libs/components/icons/src/auto-icons/select-box-unselect/select-box-unselect.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SelectBoxUnselectIconProps extends Omit { color?: string } -export const SelectBoxUnselectIcon: FC = ({ color, style, ...props}) => { +export const SelectBoxUnselectIcon = ({ color, style, ...props}: SelectBoxUnselectIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/select/select.tsx b/libs/components/icons/src/auto-icons/select/select.tsx index eaa55cf47..cc3d8a88d 100644 --- a/libs/components/icons/src/auto-icons/select/select.tsx +++ b/libs/components/icons/src/auto-icons/select/select.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SelectIconProps extends Omit { color?: string } -export const SelectIcon: FC = ({ color, style, ...props}) => { +export const SelectIcon = ({ color, style, ...props}: SelectIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/settings/settings.tsx b/libs/components/icons/src/auto-icons/settings/settings.tsx index d75d48e7e..94d4e7f4b 100644 --- a/libs/components/icons/src/auto-icons/settings/settings.tsx +++ b/libs/components/icons/src/auto-icons/settings/settings.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SettingsIconProps extends Omit { color?: string } -export const SettingsIcon: FC = ({ color, style, ...props}) => { +export const SettingsIcon = ({ color, style, ...props}: SettingsIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx b/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx index cb44911c6..fd15d8ab4 100644 --- a/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx +++ b/libs/components/icons/src/auto-icons/shape-color-duotone/shape-color-duotone.tsx @@ -1,16 +1,13 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ShapeColorDuotoneIconProps extends Omit { color0?: string primaryColor?: string } -export const ShapeColorDuotoneIcon: FC = ({ color0, primaryColor, style, ...props}) => { +export const ShapeColorDuotoneIcon = ({ color0, primaryColor, style, ...props}: ShapeColorDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx b/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx index 18340931c..4c278955f 100644 --- a/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx +++ b/libs/components/icons/src/auto-icons/shape-color-none/shape-color-none.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ShapeColorNoneIconProps extends Omit { color?: string } -export const ShapeColorNoneIcon: FC = ({ color, style, ...props}) => { +export const ShapeColorNoneIcon = ({ color, style, ...props}: ShapeColorNoneIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/shape/shape.tsx b/libs/components/icons/src/auto-icons/shape/shape.tsx index 3e6a38d5a..8e811d30a 100644 --- a/libs/components/icons/src/auto-icons/shape/shape.tsx +++ b/libs/components/icons/src/auto-icons/shape/shape.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ShapeIconProps extends Omit { color?: string } -export const ShapeIcon: FC = ({ color, style, ...props}) => { +export const ShapeIcon = ({ color, style, ...props}: ShapeIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx b/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx index dcca9989e..5967965a5 100644 --- a/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx +++ b/libs/components/icons/src/auto-icons/side-bar-view-close/side-bar-view-close.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SideBarViewCloseIconProps extends Omit { color?: string } -export const SideBarViewCloseIcon: FC = ({ color, style, ...props}) => { +export const SideBarViewCloseIcon = ({ color, style, ...props}: SideBarViewCloseIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx b/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx index ecd466c8c..8f69dcf71 100644 --- a/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx +++ b/libs/components/icons/src/auto-icons/side-bar-view/side-bar-view.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SideBarViewIconProps extends Omit { color?: string } -export const SideBarViewIcon: FC = ({ color, style, ...props}) => { +export const SideBarViewIcon = ({ color, style, ...props}: SideBarViewIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/single-select/single-select.tsx b/libs/components/icons/src/auto-icons/single-select/single-select.tsx index 3f7bdc99d..3b355bca3 100644 --- a/libs/components/icons/src/auto-icons/single-select/single-select.tsx +++ b/libs/components/icons/src/auto-icons/single-select/single-select.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SingleSelectIconProps extends Omit { color?: string } -export const SingleSelectIcon: FC = ({ color, style, ...props}) => { +export const SingleSelectIcon = ({ color, style, ...props}: SingleSelectIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx b/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx index 331fde47c..883a2ddc4 100644 --- a/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx +++ b/libs/components/icons/src/auto-icons/solid-line/solid-line.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SolidLineIconProps extends Omit { color?: string } -export const SolidLineIcon: FC = ({ color, style, ...props}) => { +export const SolidLineIcon = ({ color, style, ...props}: SolidLineIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/sort/sort.tsx b/libs/components/icons/src/auto-icons/sort/sort.tsx index 8b7f1f327..a42f0e8b2 100644 --- a/libs/components/icons/src/auto-icons/sort/sort.tsx +++ b/libs/components/icons/src/auto-icons/sort/sort.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SortIconProps extends Omit { color?: string } -export const SortIcon: FC = ({ color, style, ...props}) => { +export const SortIcon = ({ color, style, ...props}: SortIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/sql/sql.tsx b/libs/components/icons/src/auto-icons/sql/sql.tsx index d8d613db1..b2e12d4c1 100644 --- a/libs/components/icons/src/auto-icons/sql/sql.tsx +++ b/libs/components/icons/src/auto-icons/sql/sql.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SqlIconProps extends Omit { color?: string } -export const SqlIcon: FC = ({ color, style, ...props}) => { +export const SqlIcon = ({ color, style, ...props}: SqlIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/stamp/stamp.tsx b/libs/components/icons/src/auto-icons/stamp/stamp.tsx index ec6a69d85..8ce688192 100644 --- a/libs/components/icons/src/auto-icons/stamp/stamp.tsx +++ b/libs/components/icons/src/auto-icons/stamp/stamp.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface StampIconProps extends Omit { color?: string } -export const StampIcon: FC = ({ color, style, ...props}) => { +export const StampIcon = ({ color, style, ...props}: StampIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/star/star.tsx b/libs/components/icons/src/auto-icons/star/star.tsx index ef3e355bd..104b6a214 100644 --- a/libs/components/icons/src/auto-icons/star/star.tsx +++ b/libs/components/icons/src/auto-icons/star/star.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface StarIconProps extends Omit { color?: string } -export const StarIcon: FC = ({ color, style, ...props}) => { +export const StarIcon = ({ color, style, ...props}: StarIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/status/status.tsx b/libs/components/icons/src/auto-icons/status/status.tsx index c2a5d672a..3c9a70ad9 100644 --- a/libs/components/icons/src/auto-icons/status/status.tsx +++ b/libs/components/icons/src/auto-icons/status/status.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface StatusIconProps extends Omit { color?: string } -export const StatusIcon: FC = ({ color, style, ...props}) => { +export const StatusIcon = ({ color, style, ...props}: StatusIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx b/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx index 277e26eb8..be39640e9 100644 --- a/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx +++ b/libs/components/icons/src/auto-icons/switch-off-duotone/switch-off-duotone.tsx @@ -1,9 +1,6 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SwitchOffDuotoneIconProps extends Omit { color0?: string @@ -13,7 +10,7 @@ export interface SwitchOffDuotoneIconProps extends Omit { color2?: string } -export const SwitchOffDuotoneIcon: FC = ({ color0, primaryColor, color1, secondaryColor, color2, style, ...props}) => { +export const SwitchOffDuotoneIcon = ({ color0, primaryColor, color1, secondaryColor, color2, style, ...props}: SwitchOffDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor, "--color-2": color2}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx b/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx index 4ac41c532..b4f381ced 100644 --- a/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx +++ b/libs/components/icons/src/auto-icons/switch-on-duotone/switch-on-duotone.tsx @@ -1,9 +1,6 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface SwitchOnDuotoneIconProps extends Omit { color0?: string @@ -12,7 +9,7 @@ export interface SwitchOnDuotoneIconProps extends Omit { secondaryColor?: string } -export const SwitchOnDuotoneIcon: FC = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => { +export const SwitchOnDuotoneIcon = ({ color0, primaryColor, color1, secondaryColor, style, ...props}: SwitchOnDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/table/table.tsx b/libs/components/icons/src/auto-icons/table/table.tsx index 0534eadd6..08f5a6601 100644 --- a/libs/components/icons/src/auto-icons/table/table.tsx +++ b/libs/components/icons/src/auto-icons/table/table.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TableIconProps extends Omit { color?: string } -export const TableIcon: FC = ({ color, style, ...props}) => { +export const TableIcon = ({ color, style, ...props}: TableIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx b/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx index 045115b9e..294839959 100644 --- a/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx +++ b/libs/components/icons/src/auto-icons/tag-add-duotone/tag-add-duotone.tsx @@ -1,9 +1,6 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TagAddDuotoneIconProps extends Omit { color0?: string @@ -12,7 +9,7 @@ export interface TagAddDuotoneIconProps extends Omit { secondaryColor?: string } -export const TagAddDuotoneIcon: FC = ({ color0, primaryColor, color1, secondaryColor, style, ...props}) => { +export const TagAddDuotoneIcon = ({ color0, primaryColor, color1, secondaryColor, style, ...props}: TagAddDuotoneIconProps) => { const propsStyles = {"--color-0": color0 || primaryColor, "--color-1": color1 || secondaryColor}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/tags/tags.tsx b/libs/components/icons/src/auto-icons/tags/tags.tsx index 4d79fa6ed..b2f4ab7e4 100644 --- a/libs/components/icons/src/auto-icons/tags/tags.tsx +++ b/libs/components/icons/src/auto-icons/tags/tags.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TagsIconProps extends Omit { color?: string } -export const TagsIcon: FC = ({ color, style, ...props}) => { +export const TagsIcon = ({ color, style, ...props}: TagsIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/text-font/text-font.tsx b/libs/components/icons/src/auto-icons/text-font/text-font.tsx index 84188037f..590081243 100644 --- a/libs/components/icons/src/auto-icons/text-font/text-font.tsx +++ b/libs/components/icons/src/auto-icons/text-font/text-font.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TextFontIconProps extends Omit { color?: string } -export const TextFontIcon: FC = ({ color, style, ...props}) => { +export const TextFontIcon = ({ color, style, ...props}: TextFontIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/text/text.tsx b/libs/components/icons/src/auto-icons/text/text.tsx index 3500e2356..38ebf8547 100644 --- a/libs/components/icons/src/auto-icons/text/text.tsx +++ b/libs/components/icons/src/auto-icons/text/text.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TextIconProps extends Omit { color?: string } -export const TextIcon: FC = ({ color, style, ...props}) => { +export const TextIcon = ({ color, style, ...props}: TextIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/to-do/to-do.tsx b/libs/components/icons/src/auto-icons/to-do/to-do.tsx index 4db46b78b..03253fa6e 100644 --- a/libs/components/icons/src/auto-icons/to-do/to-do.tsx +++ b/libs/components/icons/src/auto-icons/to-do/to-do.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ToDoIconProps extends Omit { color?: string } -export const ToDoIcon: FC = ({ color, style, ...props}) => { +export const ToDoIcon = ({ color, style, ...props}: ToDoIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx b/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx index c34489080..164fbd000 100644 --- a/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx +++ b/libs/components/icons/src/auto-icons/todo-list/todo-list.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TodoListIconProps extends Omit { color?: string } -export const TodoListIcon: FC = ({ color, style, ...props}) => { +export const TodoListIcon = ({ color, style, ...props}: TodoListIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/triangle/triangle.tsx b/libs/components/icons/src/auto-icons/triangle/triangle.tsx index 4eea5fc3c..dd2761652 100644 --- a/libs/components/icons/src/auto-icons/triangle/triangle.tsx +++ b/libs/components/icons/src/auto-icons/triangle/triangle.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TriangleIconProps extends Omit { color?: string } -export const TriangleIcon: FC = ({ color, style, ...props}) => { +export const TriangleIcon = ({ color, style, ...props}: TriangleIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx b/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx index bc1e24cde..a9773ac4a 100644 --- a/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx +++ b/libs/components/icons/src/auto-icons/turn-into/turn-into.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface TurnIntoIconProps extends Omit { color?: string } -export const TurnIntoIcon: FC = ({ color, style, ...props}) => { +export const TurnIntoIcon = ({ color, style, ...props}: TurnIntoIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx b/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx index 1b5ecb9b2..d1c3c3be1 100644 --- a/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx +++ b/libs/components/icons/src/auto-icons/ungroup/ungroup.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface UngroupIconProps extends Omit { color?: string } -export const UngroupIcon: FC = ({ color, style, ...props}) => { +export const UngroupIcon = ({ color, style, ...props}: UngroupIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/unlock/unlock.tsx b/libs/components/icons/src/auto-icons/unlock/unlock.tsx index 05fde07d9..55219afb1 100644 --- a/libs/components/icons/src/auto-icons/unlock/unlock.tsx +++ b/libs/components/icons/src/auto-icons/unlock/unlock.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface UnlockIconProps extends Omit { color?: string } -export const UnlockIcon: FC = ({ color, style, ...props}) => { +export const UnlockIcon = ({ color, style, ...props}: UnlockIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/web-app/web-app.tsx b/libs/components/icons/src/auto-icons/web-app/web-app.tsx index ee1bcba6e..ccb93a04d 100644 --- a/libs/components/icons/src/auto-icons/web-app/web-app.tsx +++ b/libs/components/icons/src/auto-icons/web-app/web-app.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface WebAppIconProps extends Omit { color?: string } -export const WebAppIcon: FC = ({ color, style, ...props}) => { +export const WebAppIcon = ({ color, style, ...props}: WebAppIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/libs/components/icons/src/auto-icons/youtube/youtube.tsx b/libs/components/icons/src/auto-icons/youtube/youtube.tsx index 0f8138329..cd22e2bc2 100644 --- a/libs/components/icons/src/auto-icons/youtube/youtube.tsx +++ b/libs/components/icons/src/auto-icons/youtube/youtube.tsx @@ -1,15 +1,12 @@ -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface YoutubeIconProps extends Omit { color?: string } -export const YoutubeIcon: FC = ({ color, style, ...props}) => { +export const YoutubeIcon = ({ color, style, ...props}: YoutubeIconProps) => { const propsStyles = {"color": color}; const customStyles = {}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/tools/executors/figmaRes/figma/generateReactIcon.js b/tools/executors/figmaRes/figma/generateReactIcon.js index dfc481f64..48dfe88a0 100644 --- a/tools/executors/figmaRes/figma/generateReactIcon.js +++ b/tools/executors/figmaRes/figma/generateReactIcon.js @@ -100,19 +100,16 @@ module.exports = async function generateReactIcon(name, svgCode, customStyles) { const colors = getColors(colorIdx); return ` -import { FC } from 'react'; // eslint-disable-next-line no-restricted-imports -import { SvgIcon } from '@mui/material'; -// eslint-disable-next-line no-restricted-imports -import type { SvgIconProps } from '@mui/material'; +import { SvgIcon, SvgIconProps } from '@mui/material'; export interface ${name}IconProps extends Omit { ${getColorsInterfaceProps(colors)} } -export const ${name}Icon: FC<${name}IconProps> = ({ ${getRestColors( +export const ${name}Icon = ({ ${getRestColors( colors - )}, style, ...props}) => { + )}, style, ...props}: ${name}IconProps) => { const propsStyles = ${getPropNameToColorValue(colors)}; const customStyles = ${JSON.stringify(customStyles || {})}; const styles = {...propsStyles, ...customStyles, ...style} diff --git a/tools/executors/svgOptimize/svgo.js b/tools/executors/svgOptimize/svgo.js index 6235fadb6..0f8902ed8 100644 --- a/tools/executors/svgOptimize/svgo.js +++ b/tools/executors/svgOptimize/svgo.js @@ -4,10 +4,6 @@ const { readdir, readFile, writeFile, exists } = require('fs/promises'); const { pascalCase, paramCase } = require('change-case'); const svgr = require('@svgr/core'); -function isDuotone(name) { - return name.endsWith('Duotone'); -} - async function optimizeSvg(folder) { try { const icons = await readdir(folder); From b9e69ec8334d7cc2cc4c5ae3921816975efc01fd Mon Sep 17 00:00:00 2001 From: alt0 Date: Fri, 12 Aug 2022 11:44:04 +0800 Subject: [PATCH 63/95] fix: left menu color --- libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx | 1 + .../editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx index 73ab1fde1..c6e5d6a9d 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx @@ -54,4 +54,5 @@ const StyledButton = styled('div')({ backgroundColor: 'transparent', width: '100%', height: '100%', + color: '#B9CAD5', }); diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx index f07380e0b..f9d9e947d 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx @@ -265,6 +265,7 @@ const Draggable = styled(Button)({ backgroundColor: 'transparent', width: '16px', height: '22px', + color: '#B9CAD5', '& svg': { fontSize: '20px', marginLeft: '-2px', From dbd16f33a971aa4f55f8244296958f5ecbcf4a7a Mon Sep 17 00:00:00 2001 From: MingLIang Wang Date: Fri, 12 Aug 2022 13:29:52 +0800 Subject: [PATCH 64/95] feat: repair grid border in selection (#206) --- libs/components/editor-blocks/src/blocks/grid/Grid.tsx | 2 +- libs/components/editor-core/src/editor/selection/selection.ts | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx index 79ab22d0a..822270f49 100644 --- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx @@ -261,7 +261,7 @@ const GridContainer = styled('div')<{ display: 'flex', alignItems: 'stretch', borderRadius: '10px', - border: '1px solid #FFF', + border: '1px solid transparent', minWidth: `${gridItemMinWidth}%`, [`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: { borderColor: theme.affine.palette.borderColor, diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index b66d1b5fd..30e7f4efd 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -77,9 +77,6 @@ export class SelectionManager implements VirgoSelection { type: 'None', info: null, }; - // IMP: to delete - // @ts-ignore - window['selectionManager'] = this; this._initWindowSelectionChangeListen(); } From 41980188cff9533d9b8a3b0016bbafbba9248beb Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 12 Aug 2022 13:53:51 +0800 Subject: [PATCH 65/95] chore: update warn message --- libs/components/layout/src/header/LayoutHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 604b6caa6..beade0de0 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -52,8 +52,8 @@ export const LayoutHeader = () => { - AFFiNE now under active development, the version is - UNSTABLE, please DO NOT store important data in this version + AFFiNE is currently under active development. This build is + UNSTABLE. Please DO NOT store important data. From 7024b7f11a1edd8c410c7528f28973aae6274652 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 12 Aug 2022 13:54:11 +0800 Subject: [PATCH 66/95] chore: clean page tree styles --- .../workspace-sidebar/page-tree/DndTree.tsx | 12 +- .../page-tree/tree-item/DndTreeItem.tsx | 6 +- .../page-tree/tree-item/TreeItem.tsx | 73 ++++++------- .../page-tree/tree-item/styles.ts | 103 +++--------------- 4 files changed, 53 insertions(+), 141 deletions(-) diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx index 40991b930..6db19e3e8 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx @@ -36,19 +36,13 @@ export type DndTreeProps = { indentationWidth?: number; collapsible?: boolean; removable?: boolean; - showDragIndicator?: boolean; }; /** * Currently does not support drag and drop using the keyboard. */ export function DndTree(props: DndTreeProps) { - const { - indentationWidth = 20, - collapsible, - removable, - showDragIndicator, - } = props; + const { indentationWidth = 20, collapsible, removable } = props; const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } }) @@ -111,7 +105,6 @@ export function DndTree(props: DndTreeProps) { : depth } indentationWidth={indentationWidth} - indicator={showDragIndicator} childCount={children.length} onCollapse={ collapsible && children.length @@ -129,7 +122,8 @@ export function DndTree(props: DndTreeProps) { )} {activeId && activeItem ? ( ble-node; the ref of the inner dom is often used as draggable-node */ - wrapperRef?(node: HTMLLIElement): void; -} & HTMLAttributes; +} & HTMLAttributes; export const TreeItem = forwardRef( ( @@ -52,13 +48,10 @@ export const TreeItem = forwardRef( ghost, handleProps, indentationWidth, - indicator, collapsed, onCollapse, onRemove, - style, value, - wrapperRef, pageId, ...props }, @@ -71,8 +64,8 @@ export const TreeItem = forwardRef( ); return ( - ( active={pageId === page_id} {...props} > - - - {childCount !== 0 ? ( - collapsed ? ( - - ) : ( - - ) - ) : ( - - )} - + {childCount !== 0 ? ( + collapsed ? ( + + + + ) : ( + + + + ) + ) : ( + + )} - - - {value} - - {BooleanPageTreeItemMoreActions && ( - - )} + + + {value} + + {BooleanPageTreeItemMoreActions && ( + + )} - {/*{!clone && onRemove && }*/} - {clone && childCount && childCount > 1 ? ( - {childCount} - ) : null} - - - + {/*{!clone && onRemove && }*/} + {clone && childCount && childCount > 1 ? ( + {childCount} + ) : null} + + ); } ); diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts index 0040e5bef..442715229 100644 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts @@ -1,22 +1,18 @@ import { styled } from '@toeverything/components/ui'; import { Link } from 'react-router-dom'; -export const TreeItemContainer = styled('div')` - box-sizing: border-box; - display: flex; - align-items: center; - color: #4c6275; -`; - -export const Wrapper = styled('li')<{ +export const TreeItemContainer = styled('div')<{ spacing: string; clone?: boolean; ghost?: boolean; - indicator?: boolean; disableSelection?: boolean; disableInteraction?: boolean; active?: boolean; }>` + display: flex; + align-items: center; + color: #4c6275; + box-sizing: border-box; padding-left: ${({ spacing }) => spacing}; list-style: none; @@ -26,21 +22,13 @@ export const Wrapper = styled('li')<{ ${({ clone, disableSelection }) => (clone || disableSelection) && - `width: 100%; - .Text, - .Count { - user-select: none; - -webkit-user-select: none; - }`} - - ${({ indicator }) => - indicator && - `width: 100%; - .Text, - .Count { - user-select: none; - -webkit-user-select: none; - }`} + ` + width: 100%; + user-select: none; + opacity: 0.7; + background: transparent; + cursor: grab; + `} ${({ disableInteraction }) => disableInteraction && `pointer-events: none;`} @@ -48,64 +36,6 @@ export const Wrapper = styled('li')<{ background: #f5f7f8; border-radius: 5px; } - - &.clone { - display: inline-block; - padding: 0; - margin-left: 10px; - margin-top: 5px; - pointer-events: none; - - ${TreeItemContainer} { - padding-right: 20px; - border-radius: 4px; - box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1); - } - } - - &.ghost { - &.indicator { - opacity: 1; - position: relative; - z-index: 1; - margin-bottom: -1px; - - ${TreeItemContainer} { - position: relative; - padding: 0; - height: 8px; - border-color: #2389ff; - background-color: #56a1f8; - - &:before { - position: absolute; - left: -8px; - top: -4px; - display: block; - content: ''; - width: 12px; - height: 12px; - border-radius: 50%; - border: 1px solid #2389ff; - } - - > * { - /* Items are hidden using height and opacity to retain focus */ - opacity: 0; - height: 0; - } - } - } - - &:not(.indicator) { - opacity: 0.5; - } - - ${TreeItemContainer} > * { - box-shadow: none; - background-color: transparent; - } - } `; export const Counter = styled('span')` @@ -138,7 +68,7 @@ export const ActionButton = styled('button')<{ border: none; outline: none; appearance: none; - background-color: transparent; + background: transparent; -webkit-tap-highlight-color: transparent; svg { @@ -151,8 +81,7 @@ export const ActionButton = styled('button')<{ } &:active { - background-color: ${({ background }) => - background ?? 'rgba(0, 0, 0, 0.05)'}; + background: ${({ background }) => background ?? 'rgba(0, 0, 0, 0.05)'}; svg { fill: ${({ fill }) => fill ?? '#788491'}; @@ -170,9 +99,7 @@ export const TreeItemMoreActions = styled('div')` visibility: hidden; `; -export const TextLink = styled(Link, { - shouldForwardProp: (prop: string) => !['active'].includes(prop), -})<{ active?: boolean }>` +export const TextLink = styled(Link)` display: flex; align-items: center; flex-grow: 1; From 7177e625176823265915419a1c76ac9cdb52af23 Mon Sep 17 00:00:00 2001 From: MingLIang Wang Date: Fri, 12 Aug 2022 14:58:11 +0800 Subject: [PATCH 67/95] feat: fix selection on scroll --- libs/components/editor-core/src/Selection.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/Selection.tsx b/libs/components/editor-core/src/Selection.tsx index 98ad9ccb1..6317c9ac0 100644 --- a/libs/components/editor-core/src/Selection.tsx +++ b/libs/components/editor-core/src/Selection.tsx @@ -233,7 +233,8 @@ export const SelectionRect = forwardRef( startPointRef.current && endPointRef.current && scrollManager.scrollContainer && - scrollContainerRect.current + scrollContainerRect.current && + mouseType.current === 'down' ) { const xSign = DIRECTION_VALUE_MAP[direction[0]] || 0; const ySign = DIRECTION_VALUE_MAP[direction[1]] || 0; From 9be07352076244f0a6ef78f3ec19999ded142373 Mon Sep 17 00:00:00 2001 From: Whitewater Date: Fri, 12 Aug 2022 15:17:51 +0800 Subject: [PATCH 68/95] chore: align tree line (#211) --- .../src/utils/WithTreeViewChildren.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx index f2b2b3652..f26690cbd 100644 --- a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx +++ b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx @@ -27,7 +27,7 @@ const defaultConfig: WithChildrenConfig = { const TreeView = forwardRef< HTMLDivElement, { lastItem?: boolean } & ComponentPropsWithRef<'div'> ->(({ lastItem, children, onClick, ...restProps }, ref) => { +>(({ lastItem = false, children, onClick, ...restProps }, ref) => { return ( @@ -155,8 +155,10 @@ const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' }); const Children = Wrapper; const TREE_COLOR = '#D5DFE6'; -// TODO determine the position of the horizontal line by the type of the item -const ITEM_POINT_HEIGHT = '12.5px'; // '50%' +// adjust left and right margins of the the tree line +const TREE_LINE_LEFT_OFFSET = '-16px'; +// determine the position of the horizontal line by the type of the item +const TREE_LINE_TOP_OFFSET = '20px'; // '50%' const TreeWrapper = styled('div')({ position: 'relative', @@ -164,7 +166,7 @@ const TreeWrapper = styled('div')({ const StyledTreeView = styled('div')({ position: 'absolute', - left: '-21px', + left: TREE_LINE_LEFT_OFFSET, height: '100%', }); @@ -183,7 +185,7 @@ const Line = styled('div')({ const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ width: '1px', - height: last ? ITEM_POINT_HEIGHT : '100%', + height: last ? TREE_LINE_TOP_OFFSET : '100%', paddingTop: 0, paddingBottom: 0, transform: 'translate(-50%, 0)', @@ -196,7 +198,7 @@ const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ height: '1px', paddingLeft: 0, paddingRight: 0, - top: ITEM_POINT_HEIGHT, + top: TREE_LINE_TOP_OFFSET, transform: 'translate(0, -50%)', opacity: last ? 0 : 'unset', })); @@ -204,7 +206,8 @@ const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ const Collapsed = styled('div')({ cursor: 'pointer', display: 'inline-block', - color: '#B9CAD5', + color: '#98ACBD', + padding: '8px', }); const LastItemRadius = styled('div')({ @@ -212,7 +215,7 @@ const LastItemRadius = styled('div')({ position: 'absolute', left: '-0.5px', top: 0, - height: ITEM_POINT_HEIGHT, + height: TREE_LINE_TOP_OFFSET, bottom: '50%', width: '16px', borderWidth: '1px', From ac84c16a4adaa41a465d1c8bd42f0cd0458344d2 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 12 Aug 2022 15:23:11 +0800 Subject: [PATCH 69/95] fix: fix color and text of status pendant --- libs/components/editor-core/src/block-pendant/config.ts | 4 ++-- libs/components/editor-core/src/block-pendant/utils.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/components/editor-core/src/block-pendant/config.ts b/libs/components/editor-core/src/block-pendant/config.ts index 077a79514..74471647d 100644 --- a/libs/components/editor-core/src/block-pendant/config.ts +++ b/libs/components/editor-core/src/block-pendant/config.ts @@ -98,8 +98,8 @@ export const pendantConfig: { [key: string]: PendantConfig } = { }, [PendantTypes.Status]: { iconName: IconNames.STATUS, - background: ['#C5FBE0', '#FFF5AB', '#FFCECE', '#E3DEFF'], - color: ['#05683D', '#896406', '#AF1212', '#511AAB'], + background: ['#FFCECE', '#FFF5AB', '#C5FBE0', '#E3DEFF'], + color: ['#AF1212', '#896406', '#05683D', '#511AAB'], }, [PendantTypes.Select]: { iconName: IconNames.SINGLE_SELECT, diff --git a/libs/components/editor-core/src/block-pendant/utils.ts b/libs/components/editor-core/src/block-pendant/utils.ts index 63a3344a9..bebdef192 100644 --- a/libs/components/editor-core/src/block-pendant/utils.ts +++ b/libs/components/editor-core/src/block-pendant/utils.ts @@ -88,7 +88,7 @@ export const generateInitialOptions = ( ) => { if (type === PendantTypes.Status) { return [ - generateBasicOption({ index: 0, iconConfig, name: 'No Started' }), + generateBasicOption({ index: 0, iconConfig, name: 'Not Started' }), generateBasicOption({ index: 1, iconConfig, From 551ddf5f94e438ea6443439a8147f2f105cceab9 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Fri, 12 Aug 2022 15:24:16 +0800 Subject: [PATCH 70/95] fix: code style (#208) * fix: code style * fix: add copy icon --- .../common/src/lib/text/EditableText.tsx | 10 +++++----- .../src/blocks/bullet/BulletView.tsx | 3 ++- .../editor-blocks/src/blocks/code/CodeView.tsx | 17 +++++++++++++++-- .../src/components/style-container/index.tsx | 1 + 4 files changed, 23 insertions(+), 8 deletions(-) diff --git a/libs/components/common/src/lib/text/EditableText.tsx b/libs/components/common/src/lib/text/EditableText.tsx index 8970f6a00..3c9ca6fe5 100644 --- a/libs/components/common/src/lib/text/EditableText.tsx +++ b/libs/components/common/src/lib/text/EditableText.tsx @@ -799,11 +799,11 @@ const EditorLeaf = ({ attributes, children, leaf }: any) => { {customChildren} diff --git a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx index a2ef05300..2835a284c 100644 --- a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx +++ b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx @@ -40,8 +40,9 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => { (todoValue.length === 1 && !todoValue[0]['text']) ); }; -const BulletLeft = styled('div')(() => ({ +const BulletLeft = styled('div')(({ theme }) => ({ height: '22px', + color: theme.affine.typography.body1.color, })); export const BulletView = ({ block, editor }: CreateView) => { // block.remove(); diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index 2d421296e..680bbea84 100644 --- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx +++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx @@ -52,6 +52,8 @@ import { BlockPendantProvider, } from '@toeverything/components/editor-core'; import { copyToClipboard } from '@toeverything/utils'; +import { DuplicateIcon } from '@toeverything/components/icons'; + interface CreateCodeView extends CreateView { style9?: StyleWithAtRules; containerClassName?: string; @@ -117,10 +119,21 @@ const CodeBlock = styled('div')(({ theme }) => ({ justifyContent: 'space-between', }, '.copy-block': { - padding: '6px 10px', + padding: '0px 10px', backgroundColor: '#fff', + height: '32px', + display: 'flex', + width: '90px', + justifyContent: 'center', + alignItems: 'center', + color: '#4C6275', + fontSize: '14px', borderRadius: theme.affine.shape.borderRadius, cursor: 'pointer', + svg: { + marginRight: '4px', + display: 'block', + }, }, '.cm-focused': { outline: 'none !important', @@ -187,7 +200,7 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
    - Copy + Copy
    diff --git a/libs/components/editor-blocks/src/components/style-container/index.tsx b/libs/components/editor-blocks/src/components/style-container/index.tsx index 28ca5d6ae..b0dfd8dd2 100644 --- a/libs/components/editor-blocks/src/components/style-container/index.tsx +++ b/libs/components/editor-blocks/src/components/style-container/index.tsx @@ -5,6 +5,7 @@ export const List = styled('div')(({ theme }) => ({ '.checkBoxContainer': { marginRight: '4px', lineHeight: theme.affine.typography.body1.lineHeight, + color: theme.affine.typography.body1.color, }, '.textContainer': { flex: 1, From 7e3df042ecf0312e89cdf2478ce1bdd46f22eb7f Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 12 Aug 2022 16:10:05 +0800 Subject: [PATCH 71/95] feat: update pendant add button --- .../src/block-pendant/AddPendantPopover.tsx | 27 ++++++++++++++++--- .../pendant-popover/PendantPopover.tsx | 1 + 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx index bbb61be63..015f8a412 100644 --- a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx @@ -4,7 +4,10 @@ import { Popover, type PopoverProps, PopperHandler, + Tag, } from '@toeverything/components/ui'; +import { TagsIcon } from '@toeverything/components/icons'; + import { CreatePendantPanel } from './pendant-operation-panel'; import { IconButton } from './StyledComponent'; import { AsyncBlock } from '../editor'; @@ -13,11 +16,13 @@ type Props = { block: AsyncBlock; onSure?: () => void; iconStyle?: CSSProperties; + useAddIcon?: boolean; } & Omit; export const AddPendantPopover = ({ block, onSure, iconStyle, + useAddIcon = true, ...popoverProps }: Props) => { const popoverHandlerRef = useRef(); @@ -38,9 +43,25 @@ export const AddPendantPopover = ({ style={{ padding: 0 }} {...popoverProps} > - - - + {useAddIcon ? ( + + + + ) : ( + + } + > + Tag App + + )} ); }; diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx index d92a2ab8b..36d785a18 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx @@ -33,6 +33,7 @@ export const PendantPopover = ( }} offset={[0, -30]} trigger="click" + useAddIcon={false} /> } onClose={() => { From 82c3d773d6fb782d05a4528ce9ef7605dbfe2ba9 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 12 Aug 2022 16:24:51 +0800 Subject: [PATCH 72/95] fix: move the pendant popover to the body layer --- .../src/block-pendant/pendant-popover/PendantPopover.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx index 36d785a18..09ad31777 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx @@ -26,7 +26,6 @@ export const PendantPopover = ( block={block} endElement={ { popoverHandlerRef.current?.setVisible(false); From 29c2d8b1a21c90fd130509ae795ec6d15123af0d Mon Sep 17 00:00:00 2001 From: zuomeng wang Date: Fri, 12 Aug 2022 16:38:15 +0800 Subject: [PATCH 73/95] fix: add star badge & add link to contributor badge (#214) --- README.md | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 9e2ebc85f..7f0c70e37 100644 --- a/README.md +++ b/README.md @@ -12,17 +12,8 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre
    - - - -[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square - - - -[![All Contributors][all-contributors-badge]](#contributors) +[![stars](https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=deeppink&label=stars)](https://github.com/toeverything/AFFiNE) +[![contributors](https://img.shields.io/github/contributors/toeverything/AFFiNE?color=%23fe7230)](https://github.com/toeverything/AFFiNE/graphs/contributors) [![Node](https://img.shields.io/badge/node->=16.0-success)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/TypeScript-4.7-3178c6)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/React-18-61dafb)](https://reactjs.org/) From e47268bb8b0a6559527436e7b9d8e810c58b46f4 Mon Sep 17 00:00:00 2001 From: xiaodong zuo Date: Fri, 12 Aug 2022 16:41:37 +0800 Subject: [PATCH 74/95] fix: link style issues --- libs/components/common/src/lib/text/plugins/link.tsx | 11 ++++++----- .../editor-blocks/src/blocks/page/PageView.tsx | 3 +++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx index 60193e38a..5c1425460 100644 --- a/libs/components/common/src/lib/text/plugins/link.tsx +++ b/libs/components/common/src/lib/text/plugins/link.tsx @@ -25,7 +25,6 @@ import { ReactEditor } from 'slate-react'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import EditIcon from '@mui/icons-material/Edit'; import LinkOffIcon from '@mui/icons-material/LinkOff'; -import AttachmentIcon from '@mui/icons-material/Attachment'; import { MuiTooltip as Tooltip, styled, @@ -39,7 +38,7 @@ import { import { getRandomString } from '../utils'; import { colors } from '../../colors'; - +import { LinkIcon } from '@toeverything/components/icons'; export type LinkElement = { type: 'link'; url: string; @@ -124,7 +123,7 @@ const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => ( ))(({ theme }) => ({ [`& .${muiTooltipClasses.tooltip}`]: { backgroundColor: '#fff', - color: '#4C6275', + color: '#3E6FDB', boxShadow: theme.affine.shadows.shadow1, fontSize: '14px', }, @@ -419,8 +418,8 @@ export const LinkModal = memo((props: LinkModalProps) => { }} >
    -
    ({ const styles = style9.create({ linkModalContainerIcon: { + display: 'flex', width: '16px', margin: '0 16px 0 4px', }, @@ -517,6 +517,7 @@ const styles = style9.create({ '::-webkit-input-placeholder': { color: '#98acbd', }, + color: '#4C6275', }, linkMask: { position: 'fixed', diff --git a/libs/components/editor-blocks/src/blocks/page/PageView.tsx b/libs/components/editor-blocks/src/blocks/page/PageView.tsx index 64ea3c953..4d5de824c 100644 --- a/libs/components/editor-blocks/src/blocks/page/PageView.tsx +++ b/libs/components/editor-blocks/src/blocks/page/PageView.tsx @@ -119,5 +119,8 @@ const PageTitleBlock = styled('div')(({ theme }) => { '.content': { outline: 'none', }, + a: { + color: '#3e6fdb', + }, }; }); From 174779bb28176b6b7ddca33c56a9329fdfd31334 Mon Sep 17 00:00:00 2001 From: xiaodong zuo Date: Fri, 12 Aug 2022 16:49:17 +0800 Subject: [PATCH 75/95] fix: link style issues --- libs/components/common/src/lib/text/plugins/link.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx index 5c1425460..619239c64 100644 --- a/libs/components/common/src/lib/text/plugins/link.tsx +++ b/libs/components/common/src/lib/text/plugins/link.tsx @@ -507,6 +507,7 @@ const styles = style9.create({ display: 'flex', width: '16px', margin: '0 16px 0 4px', + color: '#4C6275', }, linkModalContainerInput: { flex: '1', From edfa95057b47af1fca828268df6bc55a8ec578a3 Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 16:54:47 +0800 Subject: [PATCH 76/95] feat: optional provider --- apps/ligo-virgo/src/pages/RoutePrivate.tsx | 2 +- libs/components/account/src/login/fs.tsx | 8 +- libs/components/account/src/login/index.tsx | 3 +- .../layout/src/header/FileSystem.tsx | 112 ++++++++++++++++++ .../layout/src/header/LayoutHeader.tsx | 6 +- .../db-service/src/services/database/index.ts | 13 +- libs/datasource/jwt/src/adapter/yjs/index.ts | 42 ++++--- .../jwt/src/adapter/yjs/provider.ts | 97 ++++++++------- libs/datasource/jwt/src/index.ts | 1 + libs/datasource/state/src/user.ts | 21 +++- pnpm-lock.yaml | 47 +++++++- 11 files changed, 267 insertions(+), 85 deletions(-) create mode 100644 libs/components/layout/src/header/FileSystem.tsx diff --git a/apps/ligo-virgo/src/pages/RoutePrivate.tsx b/apps/ligo-virgo/src/pages/RoutePrivate.tsx index 58dcbe3db..a7cedac93 100644 --- a/apps/ligo-virgo/src/pages/RoutePrivate.tsx +++ b/apps/ligo-virgo/src/pages/RoutePrivate.tsx @@ -23,7 +23,7 @@ export function RoutePrivate({ return ; } - if (!user) { + if (!user || !pathname.startsWith(`/${user.id}`)) { return ( { }; export const FileSystem = (props: { onError: () => void }) => { - const onSelected = useLocalTrigger(); + const [, onSelected] = useLocalTrigger(); const apiSupported = useMemo(() => { try { @@ -56,12 +56,6 @@ export const FileSystem = (props: { onError: () => void }) => { } }, []); - useEffect(() => { - if (process.env['NX_E2E']) { - onSelected(); - } - }, []); - return ( - {' '} + new Promise((resolve, reject) => { + const req = indexedDB.deleteDatabase(workspace); + req.addEventListener('error', e => reject(e)); + req.addEventListener('blocked', e => reject(e)); + req.addEventListener('upgradeneeded', e => reject(e)); + req.addEventListener('success', e => resolve(e)); + }); + +const requestPermission = async (workspace: string) => { + await cleanupWorkspace(workspace); + const dirHandler = await window.showDirectoryPicker({ + id: 'AFFiNE_' + workspace, + mode: 'readwrite', + startIn: 'documents', + }); + + const fileHandle = await dirHandler.getFileHandle('affine.db', { + create: true, + }); + const file = await fileHandle.getFile(); + const initialData = new Uint8Array(await file.arrayBuffer()); + + const exporter = async (contents: Uint8Array) => { + try { + const writable = await fileHandle.createWritable(); + await writable.write(contents); + await writable.close(); + } catch (e) { + console.log(e); + } + }; + + await services.api.editorBlock.setupDataExporter( + workspace, + new Uint8Array(initialData), + exporter + ); +}; + +const StyledFileSystem = styled('div')<{ disabled?: boolean }>({ + padding: '10px 12px', + fontWeight: 600, + fontSize: '14px', + color: '#3E6FDB', + textTransform: 'uppercase', + cursor: 'pointer', + '&:hover': { + background: '#F5F7F8', + borderRadius: '5px', + }, +}); + +export const FileSystem = () => { + const [selected, onSelected] = useLocalTrigger(); + const [error, setError] = useState(false); + + const onError = useCallback(() => { + setError(true); + setTimeout(() => setError(false), 3000); + }, []); + + const apiSupported = useMemo(() => { + try { + return 'showOpenFilePicker' in window; + } catch (e) { + return false; + } + }, []); + + if (apiSupported && !selected) { + return ( + <> + setError(false)} + > + + + } + /> + { + try { + await requestPermission('AFFiNE'); + onSelected(); + } catch (e) { + onError(); + } + }} + > + Sync to Disk + + + ); + } + return null; +}; diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index beade0de0..bc3373615 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -1,4 +1,4 @@ -import { IconButton, styled, MuiButton } from '@toeverything/components/ui'; +import { IconButton, styled } from '@toeverything/components/ui'; import { LogoIcon, SideBarViewIcon, @@ -7,8 +7,9 @@ import { } from '@toeverything/components/icons'; import { useShowSettingsSidebar } from '@toeverything/datasource/state'; -import { CurrentPageTitle } from './Title'; import { EditorBoardSwitcher } from './EditorBoardSwitcher'; +import { FileSystem } from './FileSystem'; +import { CurrentPageTitle } from './Title'; export const LayoutHeader = () => { const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } = @@ -25,6 +26,7 @@ export const LayoutHeader = () => { + Share
    void; + type YjsProviders = { awareness: Awareness; - idb: IndexedDBProvider; - binariesIdb: IndexedDBProvider; + binaries: Doc; + doc: Doc; gatekeeper: GateKeeper; connListener: { listeners?: ConnectivityListener }; userId: string; remoteToken?: string; // remote storage token }; + const _yjsDatabaseInstance = new Map(); const _asyncInitLoading = new Set(); @@ -90,13 +90,9 @@ async function _initYjsDatabase( const { userId, token } = options; const doc = new Doc({ autoLoad: true, shouldLoad: true }); - const idb = await new IndexedDBProvider(workspace, doc).whenSynced; + // const idb = await new IndexedDBProvider(workspace, doc).whenSynced; const binaries = new Doc({ autoLoad: true, shouldLoad: true }); - const binariesIdb = await new IndexedDBProvider( - `${workspace}_binaries`, - binaries - ).whenSynced; const awareness = new Awareness(doc); @@ -114,16 +110,24 @@ async function _initYjsDatabase( const emitState = (c: Connectivity) => connListener.listeners?.(workspace, c); await Promise.all( - Object.entries(options.provider).map(async ([, p]) => - p({ awareness, doc, token, workspace, emitState }) - ) + Object.entries(options.provider).flatMap(async ([, p]) => [ + p({ awareness, doc, token, workspace, emitState }), + p({ + awareness, + doc: binaries, + token, + workspace: `${workspace}_binaries`, + emitState, + }), + ]) ); } const newInstance = { awareness, - idb, - binariesIdb, + binaries, + doc, gatekeeper, + connListener, userId, remoteToken: token, @@ -183,7 +187,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { private constructor(providers: YjsProviders) { this._provider = providers; - this._doc = providers.idb.doc; + this._doc = providers.doc; this._awareness = providers.awareness; this._gatekeeper = providers.gatekeeper; this._reload = () => { @@ -201,7 +205,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { }); // @ts-ignore this._binaries = new YjsRemoteBinaries( - providers.binariesIdb.doc.getMap(), + providers.binaries.getMap(), providers.remoteToken ); // @ts-ignore @@ -336,7 +340,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { }); const [file] = (await fromEvent(handles)) as File[]; const binary = await file.arrayBuffer(); - await this._provider.idb.clearData(); + // await this._provider.idb.clearData(); const doc = new Doc({ autoLoad: true, shouldLoad: true }); let updated = 0; let isUpdated = false; @@ -357,8 +361,8 @@ export class YjsAdapter implements AsyncDatabaseAdapter { }; check(); }); - await new IndexedDBProvider(this._provider.idb.name, doc) - .whenSynced; + // await new IndexedDBProvider(this._provider.idb.name, doc) + // .whenSynced; applyUpdate(doc, new Uint8Array(binary)); await update_check; console.log('load success'); diff --git a/libs/datasource/jwt/src/adapter/yjs/provider.ts b/libs/datasource/jwt/src/adapter/yjs/provider.ts index f7068288f..e4cebd1f0 100644 --- a/libs/datasource/jwt/src/adapter/yjs/provider.ts +++ b/libs/datasource/jwt/src/adapter/yjs/provider.ts @@ -2,6 +2,7 @@ import { Doc } from 'yjs'; import { Awareness } from 'y-protocols/awareness.js'; import { + IndexedDBProvider, SQLiteProvider, WebsocketProvider, } from '@toeverything/datasource/jwt-rpc'; @@ -19,7 +20,10 @@ type YjsDefaultInstances = { export type YjsProvider = (instances: YjsDefaultInstances) => Promise; +type ProviderType = 'idb' | 'sqlite' | 'ws'; + export type YjsProviderOptions = { + enabled: ProviderType[]; backend: typeof BucketBackend[keyof typeof BucketBackend]; params?: Record; importData?: () => Promise | Uint8Array | undefined; @@ -30,53 +34,64 @@ export type YjsProviderOptions = { export const getYjsProviders = ( options: YjsProviderOptions ): Record => { + console.log('getYjsProviders', options); return { + indexeddb: async (instances: YjsDefaultInstances) => { + if (options.enabled.includes('idb')) { + await new IndexedDBProvider(instances.workspace, instances.doc) + .whenSynced; + } + }, sqlite: async (instances: YjsDefaultInstances) => { - const fsHandle = setInterval(async () => { - if (options.hasExporter?.()) { - clearInterval(fsHandle); - const fs = new SQLiteProvider( - instances.workspace, - instances.doc, - await options.importData?.() - ); - if (options.exportData) { - fs.registerExporter(options.exportData); + if (options.enabled.includes('sqlite')) { + const fsHandle = setInterval(async () => { + if (options.hasExporter?.()) { + clearInterval(fsHandle); + const fs = new SQLiteProvider( + instances.workspace, + instances.doc, + await options.importData?.() + ); + if (options.exportData) { + fs.registerExporter(options.exportData); + } + await fs.whenSynced; } - await fs.whenSynced; - } - }, 500); + }, 500); + } }, ws: async (instances: YjsDefaultInstances) => { - if (instances.token) { - const ws = new WebsocketProvider( - instances.token, - options.backend, - instances.workspace, - instances.doc, - { - awareness: instances.awareness, - params: options.params, - } - ) as any; // TODO: type is erased after cascading references + if (options.enabled.includes('ws')) { + if (instances.token) { + const ws = new WebsocketProvider( + instances.token, + options.backend, + instances.workspace, + instances.doc, + { + awareness: instances.awareness, + params: options.params, + } + ) as any; // TODO: type is erased after cascading references - // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later - return new Promise((resolve, reject) => { - // TODO: synced will also be triggered on reconnection after losing sync - // There needs to be an event mechanism to emit the synchronization state to the upper layer - ws.once('synced', () => resolve()); - ws.once('lost-connection', () => resolve()); - ws.once('connection-error', () => reject()); - ws.on('synced', () => instances.emitState('connected')); - ws.on('lost-connection', () => - instances.emitState('retry') - ); - ws.on('connection-error', () => - instances.emitState('retry') - ); - }); - } else { - return; + // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later + return new Promise((resolve, reject) => { + // TODO: synced will also be triggered on reconnection after losing sync + // There needs to be an event mechanism to emit the synchronization state to the upper layer + ws.once('synced', () => resolve()); + ws.once('lost-connection', () => resolve()); + ws.once('connection-error', () => reject()); + ws.on('synced', () => instances.emitState('connected')); + ws.on('lost-connection', () => + instances.emitState('retry') + ); + ws.on('connection-error', () => + instances.emitState('retry') + ); + }); + } else { + return; + } } }, }; diff --git a/libs/datasource/jwt/src/index.ts b/libs/datasource/jwt/src/index.ts index ecad7aebf..38bc11396 100644 --- a/libs/datasource/jwt/src/index.ts +++ b/libs/datasource/jwt/src/index.ts @@ -618,6 +618,7 @@ export class BlockClient< const instance = await YjsAdapter.init(workspace, { provider: getYjsProviders({ + enabled: [], backend: BucketBackend.YjsWebSocketAffine, importData, exportData, diff --git a/libs/datasource/state/src/user.ts b/libs/datasource/state/src/user.ts index fefb689f0..d32fef2c5 100644 --- a/libs/datasource/state/src/user.ts +++ b/libs/datasource/state/src/user.ts @@ -1,3 +1,4 @@ +import { useNavigate } from 'react-router'; import { getAuth, onAuthStateChanged, @@ -62,11 +63,17 @@ const BRAND_ID = 'AFFiNE'; const _localTrigger = atom(false); const _useUserAndSpacesForFreeLogin = () => { + const navigate = useNavigate(); const [user, setUser] = useAtom(_userAtom); const [loading, setLoading] = useAtom(_loadingAtom); const [localTrigger] = useAtom(_localTrigger); - useEffect(() => setLoading(false), []); + useEffect(() => { + if (loading) { + navigate('/demo'); + setLoading(false); + } + }, []); useEffect(() => { if (localTrigger) { @@ -77,6 +84,14 @@ const _useUserAndSpacesForFreeLogin = () => { nickname: BRAND_ID, email: '', }); + } else { + setUser({ + photo: '', + id: 'demo', + username: 'demo', + nickname: 'demo', + email: '', + }); } }, [localTrigger, setLoading, setUser]); @@ -86,8 +101,8 @@ const _useUserAndSpacesForFreeLogin = () => { }; export const useLocalTrigger = () => { - const [, setTrigger] = useAtom(_localTrigger); - return () => setTrigger(true); + const [trigger, setTrigger] = useAtom(_localTrigger); + return [trigger, () => setTrigger(true)] as [boolean, () => void]; }; export const useUserAndSpaces = process.env['NX_LOCAL'] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dacfe065a..a632fb99b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -194,7 +194,7 @@ importers: yjs: ^13.5.41 dependencies: authing-js-sdk: 4.23.35 - firebase-admin: 11.0.1_@firebase+app-types@0.7.0 + firebase-admin: 11.0.1 lib0: 0.2.52 lru-cache: 7.13.2 nanoid: 4.0.0 @@ -571,6 +571,9 @@ importers: dependencies: ffc-js-client-side-sdk: 1.1.5 + libs/datasource/jwst/pkg: + specifiers: {} + libs/datasource/jwt: specifiers: '@types/debug': ^4.1.7 @@ -3291,6 +3294,15 @@ packages: - utf-8-validate dev: true + /@firebase/auth-interop-types/0.1.6_@firebase+util@1.6.3: + resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==} + peerDependencies: + '@firebase/app-types': 0.x + '@firebase/util': 1.x + dependencies: + '@firebase/util': 1.6.3 + dev: false + /@firebase/auth-interop-types/0.1.6_pbfwexsq7uf6mrzcwnikj3g37m: resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==} peerDependencies: @@ -3299,6 +3311,7 @@ packages: dependencies: '@firebase/app-types': 0.7.0 '@firebase/util': 1.6.3 + dev: true /@firebase/auth-types/0.11.0_pbfwexsq7uf6mrzcwnikj3g37m: resolution: {integrity: sha512-q7Bt6cx+ySj9elQHTsKulwk3+qDezhzRBFC9zlQ1BjgMueUOnGMcvqmU0zuKlQ4RhLSH7MNAdBV2znVaoN3Vxw==} @@ -3334,6 +3347,19 @@ packages: '@firebase/util': 1.6.3 tslib: 2.4.0 + /@firebase/database-compat/0.2.4: + resolution: {integrity: sha512-VtsGixO5mTjNMJn6PwxAJEAR70fj+3blCXIdQKel3q+eYGZAfdqxox1+tzZDnf9NWBJpaOgAHPk3JVDxEo9NFQ==} + dependencies: + '@firebase/component': 0.5.17 + '@firebase/database': 0.13.4 + '@firebase/database-types': 0.9.12 + '@firebase/logger': 0.3.3 + '@firebase/util': 1.6.3 + tslib: 2.4.0 + transitivePeerDependencies: + - '@firebase/app-types' + dev: false + /@firebase/database-compat/0.2.4_@firebase+app-types@0.7.0: resolution: {integrity: sha512-VtsGixO5mTjNMJn6PwxAJEAR70fj+3blCXIdQKel3q+eYGZAfdqxox1+tzZDnf9NWBJpaOgAHPk3JVDxEo9NFQ==} dependencies: @@ -3345,6 +3371,7 @@ packages: tslib: 2.4.0 transitivePeerDependencies: - '@firebase/app-types' + dev: true /@firebase/database-types/0.9.10: resolution: {integrity: sha512-2ji6nXRRsY+7hgU6zRhUtK0RmSjVWM71taI7Flgaw+BnopCo/lDF5HSwxp8z7LtiHlvQqeRA3Ozqx5VhlAbiKg==} @@ -3359,6 +3386,19 @@ packages: '@firebase/app-types': 0.7.0 '@firebase/util': 1.6.3 + /@firebase/database/0.13.4: + resolution: {integrity: sha512-NW7bOoiaC4sJCj6DY/m9xHoFNa0CK32YPMCh6FiMweLCDQbOZM8Ql/Kn6yyuxCb7K7ypz9eSbRlCWQJsJRQjhg==} + dependencies: + '@firebase/auth-interop-types': 0.1.6_@firebase+util@1.6.3 + '@firebase/component': 0.5.17 + '@firebase/logger': 0.3.3 + '@firebase/util': 1.6.3 + faye-websocket: 0.11.4 + tslib: 2.4.0 + transitivePeerDependencies: + - '@firebase/app-types' + dev: false + /@firebase/database/0.13.4_@firebase+app-types@0.7.0: resolution: {integrity: sha512-NW7bOoiaC4sJCj6DY/m9xHoFNa0CK32YPMCh6FiMweLCDQbOZM8Ql/Kn6yyuxCb7K7ypz9eSbRlCWQJsJRQjhg==} dependencies: @@ -3370,6 +3410,7 @@ packages: tslib: 2.4.0 transitivePeerDependencies: - '@firebase/app-types' + dev: true /@firebase/firestore-compat/0.1.23_53yvy43rwpg2c45kgeszsxtrca: resolution: {integrity: sha512-QfcuyMAavp//fQnjSfCEpnbWi7spIdKaXys1kOLu7395fLr+U6ykmto1HUMCSz8Yus9cEr/03Ujdi2SUl2GUAA==} @@ -10863,12 +10904,12 @@ packages: semver-regex: 2.0.0 dev: true - /firebase-admin/11.0.1_@firebase+app-types@0.7.0: + /firebase-admin/11.0.1: resolution: {integrity: sha512-rL3wlZbi2Kb/KJgcmj1YHlD4ZhfmhfgRO2YJialxAllm0tj1IQea878hHuBLGmv4DpbW9t9nLvX9kddNR2Y65Q==} engines: {node: '>=14'} dependencies: '@fastify/busboy': 1.1.0 - '@firebase/database-compat': 0.2.4_@firebase+app-types@0.7.0 + '@firebase/database-compat': 0.2.4 '@firebase/database-types': 0.9.10 '@types/node': 18.0.1 jsonwebtoken: 8.5.1 From ce0590449a89bcb4486ba5471e61ba7216841b9d Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Fri, 12 Aug 2022 17:04:12 +0800 Subject: [PATCH 77/95] fix:setTimeout error (#215) --- .../editor-core/src/editor/selection/selection.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index 38d7f86b0..406f9adec 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -48,7 +48,7 @@ export class SelectionManager implements VirgoSelection { private _scrollDelay = 150; private _selectEndDelayTime = 500; private _hasEmitEndPending = false; - + private _scrollTimer: number | null = null; /** * * the selection info before current @@ -681,6 +681,9 @@ export class SelectionManager implements VirgoSelection { */ public async activeNodeByNodeId(nodeId: string, position?: CursorTypes) { try { + if (this._scrollTimer) { + clearTimeout(this._scrollTimer); + } const node = await this._editor.getBlockById(nodeId); if (node) { this._activatedNodeId = nodeId; @@ -689,7 +692,7 @@ export class SelectionManager implements VirgoSelection { } this.emit(nodeId, SelectEventTypes.active, this.lastPoint); // TODO: Optimize the related logic after implementing the scroll bar - setTimeout(() => { + this._scrollTimer = window.setTimeout(() => { this._editor.scrollManager.keepBlockInView(node); }, this._scrollDelay); } else { From 06d4dbc99b5ed75523c136028482e25e367968c6 Mon Sep 17 00:00:00 2001 From: xiaodong zuo Date: Fri, 12 Aug 2022 17:06:21 +0800 Subject: [PATCH 78/95] fix: link style issues --- libs/components/editor-blocks/src/blocks/page/PageView.tsx | 3 --- .../editor-blocks/src/components/text-manage/TextManage.tsx | 3 +++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/page/PageView.tsx b/libs/components/editor-blocks/src/blocks/page/PageView.tsx index 4d5de824c..64ea3c953 100644 --- a/libs/components/editor-blocks/src/blocks/page/PageView.tsx +++ b/libs/components/editor-blocks/src/blocks/page/PageView.tsx @@ -119,8 +119,5 @@ const PageTitleBlock = styled('div')(({ theme }) => { '.content': { outline: 'none', }, - a: { - color: '#3e6fdb', - }, }; }); diff --git a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx index 99179220a..f433c1fba 100644 --- a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx +++ b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx @@ -42,6 +42,9 @@ const TextBlockContainer = styled(Text)(({ theme }) => ({ fontFamily: theme.affine.typography.body1.fontFamily, color: theme.affine.typography.body1.color, letterSpacing: '0.1px', + a: { + color: '#3e6fdb', + }, })); const findSlice = (arr: string[], p: string, q: string) => { From a8e1de079c50731eee6e95e96a202887d50bba8a Mon Sep 17 00:00:00 2001 From: alt0 Date: Fri, 12 Aug 2022 17:41:14 +0800 Subject: [PATCH 79/95] feat: update Get Started template --- apps/ligo-virgo/src/pages/workspace/Home.tsx | 4 +- .../templates/get-started-group0.json | 197 +++++++++++++++++ .../templates/get-started-group1.json | 200 ++++++++++++++++++ .../templates/template-factory.ts | 14 +- 4 files changed, 411 insertions(+), 4 deletions(-) create mode 100644 libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json create mode 100644 libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json diff --git a/apps/ligo-virgo/src/pages/workspace/Home.tsx b/apps/ligo-virgo/src/pages/workspace/Home.tsx index a424a2052..0077fa69b 100644 --- a/apps/ligo-virgo/src/pages/workspace/Home.tsx +++ b/apps/ligo-virgo/src/pages/workspace/Home.tsx @@ -22,8 +22,8 @@ export function WorkspaceHome() { workspace_id, user_initial_page_id, TemplateFactory.generatePageTemplateByGroupKeys({ - name: null, - groupKeys: ['todolist'], + name: '👋 Get Started with AFFINE', + groupKeys: ['getStartedGroup0', 'getStartedGroup1'], }) ); } diff --git a/libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json new file mode 100644 index 000000000..1b58d6c2b --- /dev/null +++ b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json @@ -0,0 +1,197 @@ +{ + "type": "group", + "properties": { + "metaProps": [ + { + "id": "JaBsu39eY_tAWjJM", + "type": "information", + "name": "Information#XvIJ", + "emailOptions": [ + { + "id": "flJIydQpaSqr9Mvc", + "name": "Email", + "color": "#8f4400", + "background": "#ffcca7", + "iconName": "email" + } + ], + "phoneOptions": [ + { + "id": "DODf7wtotk-n_-sH", + "name": "Phone", + "color": "#263486", + "background": "#c3dbff", + "iconName": "phone" + } + ], + "locationOptions": [ + { + "id": "aYqpJse4RX2n2tuq", + "name": "Location", + "color": "#263486", + "background": "#c5f1f3", + "iconName": "location" + } + ] + }, + { + "id": "tgbUMhgz0yWEPfKj", + "name": "Select#kWWx", + "type": "select", + "options": [ + { + "id": "fIsk1MI2bCq5mtyE", + "name": "Single Select", + "color": "#896406", + "background": "#FFF5AB", + "iconName": "singleSelect" + } + ] + }, + { + "id": "xZld2XD__Cojniv5", + "name": "MultiSelect#tjdY", + "type": "multiSelect", + "options": [ + { + "id": "pXKGBw3_mPXxXIwV", + "name": "Multiple Select", + "color": "#511AAB", + "background": "#E3DEFF", + "iconName": "multiSelect" + } + ] + } + ] + }, + "blocks": [ + { + "type": "heading1", + "properties": { + "text": { + "value": [ + { + "text": "The Essentials. Check things off in Text view" + } + ] + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { + "text": "Click anywhere and just start typing. Hit `/` to see all the types of content you can add - images, videos, figma files, code blocks, and more." + } + ] + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { "text": "Do you see the " }, + { "text": "⋮", "inlinecode": true }, + { + "text": " when you hover over the left of this checkbox? Click and drag the " + }, + { "text": "⋮", "inlinecode": true }, + { + "text": " to move this block, and see more settings inside." + } + ] + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { "text": "Find the " }, + { "text": "⋮⋮", "inlinecode": true }, + { + "text": " button while hovering anywhere on this group. Click the " + }, + { + "text": "—— + Add New Group Here + ——", + "inlinecode": true + }, + { "text": " divider to add a new group." } + ] + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { "text": "Hover over the " }, + { "text": "——————", "inlinecode": true }, + { + "text": " button at the bottom of every block to evoke Tag App. Click on the " + }, + { "text": "+", "inlinecode": true }, + { + "text": " button following the tagged labels to see more options - status, date, collaborators, text, information, multiple/single select... and you can can expect more options soon!" + } + ] + }, + "textStyle": {}, + "collapsed": { "value": false }, + "recastValues": { + "JaBsu39eY_tAWjJM": { + "id": "JaBsu39eY_tAWjJM", + "type": "information", + "value": { + "email": ["flJIydQpaSqr9Mvc"], + "phone": ["DODf7wtotk-n_-sH"], + "location": ["aYqpJse4RX2n2tuq"] + } + }, + "tgbUMhgz0yWEPfKj": { + "id": "tgbUMhgz0yWEPfKj", + "type": "select", + "value": "fIsk1MI2bCq5mtyE" + }, + "xZld2XD__Cojniv5": { + "id": "xZld2XD__Cojniv5", + "type": "multiSelect", + "value": ["pXKGBw3_mPXxXIwV"] + } + } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { + "text": "An incredible design! You can check your tasks in different views, switch between Text View and Kanban View on group menu. → try it out!" + } + ] + }, + "textStyle": {} + }, + "blocks": [] + } + ] +} diff --git a/libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json new file mode 100644 index 000000000..96c967a08 --- /dev/null +++ b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json @@ -0,0 +1,200 @@ +{ + "type": "group", + "properties": { + "recastCurrentViewId": "vwjI_O0J2CEsHyMW", + "metaProps": [ + { + "id": "bNjVwBq8YLxvmvr7", + "name": "Status#GVsG", + "type": "status", + "options": [ + { + "id": "wusZ8Qht8rsmFD1s", + "name": "No Started", + "color": "#05683D", + "background": "#C5FBE0", + "iconName": "status" + }, + { + "id": "qLJFK5bqYhW8NLtQ", + "name": "In Progress", + "color": "#896406", + "background": "#FFF5AB", + "iconName": "status" + }, + { + "id": "u0ZgY0sRCnqMkxzn", + "name": "Complete", + "color": "#AF1212", + "background": "#FFCECE", + "iconName": "status" + } + ] + }, + { + "id": "DfVMd-EXXO9-WZTO", + "type": "date", + "name": "Date#0neY", + "background": "#6880FF", + "color": "#fff", + "iconName": "date" + }, + { + "id": "UgQQiv9D-72nRyYy", + "type": "mention", + "name": "Mention#Recx", + "background": "#FFD568", + "color": "#FFFFFF", + "iconName": "collaborator" + }, + { + "id": "ICT1AlKCQkwYLjGs", + "type": "text", + "name": "Text#uObM", + "background": "#67dcaa", + "color": "#FFF", + "iconName": "text" + } + ], + "recastViews": [ + { + "id": "qJslh-HAKnf8gGV-", + "name": "Text", + "type": "page" + }, + { + "id": "vwjI_O0J2CEsHyMW", + "name": "Kanban", + "type": "kanban", + "groupBy": "bNjVwBq8YLxvmvr7" + } + ] + }, + "blocks": [ + { + "type": "text", + "properties": { + "text": { + "value": [ + { + "text": "You can customize a Kanban to fit your workflow. Such as by adding/removing columns or changing Tag App labels." + } + ] + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "text", + "properties": { + "text": { + "value": [{ "text": "Add a Due Date to set a reminder" }] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "wusZ8Qht8rsmFD1s" + }, + "DfVMd-EXXO9-WZTO": { + "id": "DfVMd-EXXO9-WZTO", + "type": "date", + "value": 1660233600000 + } + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "text", + "properties": { + "text": { + "value": [{ "text": "Type ＠ to mention people" }] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "wusZ8Qht8rsmFD1s" + }, + "UgQQiv9D-72nRyYy": { + "id": "UgQQiv9D-72nRyYy", + "type": "mention", + "value": "AFFiNE" + } + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { + "text": "Check the box to complete the task!" + } + ] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "qLJFK5bqYhW8NLtQ" + } + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [ + { + "type": "todo", + "properties": { + "text": { "value": [{ "text": "Check 01" }] }, + "textStyle": {}, + "collapsed": { "value": false }, + "checked": { "value": true } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { "value": [{ "text": "Check 02" }] }, + "textStyle": {} + }, + "blocks": [] + } + ] + }, + { + "type": "text", + "properties": { + "text": { + "value": [ + { + "text": "The GroupBy button allows you to customise how you want your data grouped just utilize your preferred Tag App settings" + } + ] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "u0ZgY0sRCnqMkxzn" + }, + "ICT1AlKCQkwYLjGs": { + "id": "ICT1AlKCQkwYLjGs", + "type": "text", + "value": "GroupBy others" + } + }, + "textStyle": {} + }, + "blocks": [] + } + ] +} diff --git a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts index 88a8d08bb..10af0eebb 100644 --- a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts +++ b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts @@ -3,14 +3,24 @@ import blogTemplate from './blog.json'; import emptyTemplate from './empty.json'; import gridTemplate from './grid.json'; import todoTemplate from './todo.json'; +import getStartedGroup0 from './get-started-group0.json'; +import getStartedGroup1 from './get-started-group1.json'; -export type GroupTemplateKeys = 'todolist' | 'blog' | 'empty' | 'grid'; -type GroupTemplateMap = Record; +export type GroupTemplateKeys = + | 'todolist' + | 'blog' + | 'empty' + | 'grid' + | 'getStartedGroup0' + | 'getStartedGroup1'; +type GroupTemplateMap = Record; const groupTemplateMap = { empty: emptyTemplate, todolist: todoTemplate, blog: blogTemplate, grid: gridTemplate, + getStartedGroup0, + getStartedGroup1, } as GroupTemplateMap; const defaultTemplateList: Array = [ From c0c042dac0bcdcef23cc1341d82b2b3035e2d69e Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 17:49:39 +0800 Subject: [PATCH 80/95] feat: warning tips --- apps/venus/src/app/index.tsx | 2 +- .../layout/src/header/FileSystem.tsx | 16 ++++++------ .../layout/src/header/LayoutHeader.tsx | 25 ++++++++++++++----- 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/apps/venus/src/app/index.tsx b/apps/venus/src/app/index.tsx index e3b4a76c9..6939299df 100644 --- a/apps/venus/src/app/index.tsx +++ b/apps/venus/src/app/index.tsx @@ -27,7 +27,7 @@ const DiscordIcon = (props: any) => { viewBox="0 0 71 55" fill="currentcolor" > - + ({ }, }); +export const fsApiSupported = () => { + try { + return 'showOpenFilePicker' in window; + } catch (e) { + return false; + } +}; + export const FileSystem = () => { const [selected, onSelected] = useLocalTrigger(); const [error, setError] = useState(false); @@ -68,13 +76,7 @@ export const FileSystem = () => { setTimeout(() => setError(false), 3000); }, []); - const apiSupported = useMemo(() => { - try { - return 'showOpenFilePicker' in window; - } catch (e) { - return false; - } - }, []); + const apiSupported = useMemo(() => fsApiSupported(), []); if (apiSupported && !selected) { return ( diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index bc3373615..f93334840 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -1,3 +1,5 @@ +import { useMemo } from 'react'; + import { IconButton, styled } from '@toeverything/components/ui'; import { LogoIcon, @@ -5,16 +7,30 @@ import { SearchIcon, SideBarViewCloseIcon, } from '@toeverything/components/icons'; -import { useShowSettingsSidebar } from '@toeverything/datasource/state'; +import { + useShowSettingsSidebar, + useLocalTrigger, +} from '@toeverything/datasource/state'; import { EditorBoardSwitcher } from './EditorBoardSwitcher'; -import { FileSystem } from './FileSystem'; +import { fsApiSupported, FileSystem } from './FileSystem'; import { CurrentPageTitle } from './Title'; export const LayoutHeader = () => { + const [isLocalWorkspace] = useLocalTrigger(); const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } = useShowSettingsSidebar(); + const warningTips = useMemo(() => { + if (!fsApiSupported()) { + return 'Your browser does not support the local storage feature, please upgrade to the latest version of Chrome or Edge browser'; + } else if (isLocalWorkspace) { + return 'You are in DEMO mode. Changes will NOT be saved unless you SYNC TO DISK'; + } else { + return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data'; + } + }, [isLocalWorkspace]); + return ( @@ -53,10 +69,7 @@ export const LayoutHeader = () => { - - AFFiNE is currently under active development. This build is - UNSTABLE. Please DO NOT store important data. - + {warningTips} ); From dc98d4042befa122dbde0147c73b849a80103e5a Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 17:57:40 +0800 Subject: [PATCH 81/95] fix: types --- libs/components/account/src/login/fs.tsx | 1 + libs/components/layout/src/header/FileSystem.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/libs/components/account/src/login/fs.tsx b/libs/components/account/src/login/fs.tsx index bdccdd47e..2482e5187 100644 --- a/libs/components/account/src/login/fs.tsx +++ b/libs/components/account/src/login/fs.tsx @@ -17,6 +17,7 @@ const cleanupWorkspace = (workspace: string) => const requestPermission = async (workspace: string) => { await cleanupWorkspace(workspace); + // @ts-ignore const dirHandler = await window.showDirectoryPicker({ id: 'AFFiNE_' + workspace, mode: 'readwrite', diff --git a/libs/components/layout/src/header/FileSystem.tsx b/libs/components/layout/src/header/FileSystem.tsx index a29ad9ea9..83c638c5b 100644 --- a/libs/components/layout/src/header/FileSystem.tsx +++ b/libs/components/layout/src/header/FileSystem.tsx @@ -17,6 +17,7 @@ const cleanupWorkspace = (workspace: string) => const requestPermission = async (workspace: string) => { await cleanupWorkspace(workspace); + // @ts-ignore const dirHandler = await window.showDirectoryPicker({ id: 'AFFiNE_' + workspace, mode: 'readwrite', From feda6d390e4f523c4b4534cac68bbfc14821b4e8 Mon Sep 17 00:00:00 2001 From: alt0 Date: Fri, 12 Aug 2022 18:24:32 +0800 Subject: [PATCH 82/95] fix: update e2e --- apps/ligo-virgo-e2e/src/integration/app.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/ligo-virgo-e2e/src/integration/app.spec.ts b/apps/ligo-virgo-e2e/src/integration/app.spec.ts index 651bf215f..86404fe6c 100644 --- a/apps/ligo-virgo-e2e/src/integration/app.spec.ts +++ b/apps/ligo-virgo-e2e/src/integration/app.spec.ts @@ -4,7 +4,7 @@ describe('ligo-virgo', () => { beforeEach(() => cy.visit('/')); it('basic load check', () => { - getTitle().contains('Get Started with AFFiNE'); + getTitle().contains('👋 Get Started with AFFINE'); cy.get('.block_container').contains('The Essentials'); From c67a033f8a8354848109501309214d2ffdf1d62a Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 18:33:25 +0800 Subject: [PATCH 83/95] chore: adjust content --- apps/venus/src/app/index.tsx | 105 +++++++++++++++++++++++++---------- 1 file changed, 76 insertions(+), 29 deletions(-) diff --git a/apps/venus/src/app/index.tsx b/apps/venus/src/app/index.tsx index 6939299df..40250c0c6 100644 --- a/apps/venus/src/app/index.tsx +++ b/apps/venus/src/app/index.tsx @@ -9,6 +9,7 @@ import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy'; import GitHubIcon from '@mui/icons-material/GitHub'; import RedditIcon from '@mui/icons-material/Reddit'; import TelegramIcon from '@mui/icons-material/Telegram'; +import { LogoIcon } from '@toeverything/components/icons'; // eslint-disable-next-line no-restricted-imports import { useMediaQuery } from '@mui/material'; @@ -203,9 +204,7 @@ const GitHub = (props: { center?: boolean; flat?: boolean }) => { return ( + ); +}; + +const AFFiNEOnline = (props: { center?: boolean; flat?: boolean }) => { + const matches = useMediaQuery('(max-width: 1024px)'); + + return ( + ); }; @@ -258,7 +300,10 @@ export function App() {
    diff --git a/libs/components/ui/src/popover/Popover.tsx b/libs/components/ui/src/popover/Popover.tsx index d03a65f32..c165b4519 100644 --- a/libs/components/ui/src/popover/Popover.tsx +++ b/libs/components/ui/src/popover/Popover.tsx @@ -1,6 +1,6 @@ import type { MuiPopperPlacementType as PopperPlacementType } from '../mui'; -import React, { forwardRef, type PropsWithChildren } from 'react'; -import { type PopperHandler, Popper } from '../popper'; +import React, { type PropsWithChildren } from 'react'; +import { Popper } from '../popper'; import { PopoverContainer } from './Container'; import type { PopoverProps, PopoverDirection } from './interface'; @@ -25,15 +25,11 @@ export const placementToContainerDirection: Record< 'auto-end': 'none', }; -export const Popover = forwardRef< - PopperHandler, - PropsWithChildren ->((props, ref) => { +export const Popover = (props: PropsWithChildren) => { const { popoverDirection, placement, content, children, style } = props; return ( ); -}); +}; diff --git a/libs/components/ui/src/popper/Popper.tsx b/libs/components/ui/src/popper/Popper.tsx index f74cf8998..12a621101 100644 --- a/libs/components/ui/src/popper/Popper.tsx +++ b/libs/components/ui/src/popper/Popper.tsx @@ -1,184 +1,182 @@ import React, { - forwardRef, + CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react'; -import { - MuiPopper, - MuiClickAwayListener as ClickAwayListener, - MuiGrow as Grow, -} from '../mui'; +/* eslint-disable no-restricted-imports */ +import PopperUnstyled from '@mui/base/PopperUnstyled'; +/* eslint-disable no-restricted-imports */ +import ClickAwayListener from '@mui/base/ClickAwayListener'; +/* eslint-disable no-restricted-imports */ +import Grow from '@mui/material/Grow'; + import { styled } from '../styled'; -import { PopperProps, PopperHandler, VirtualElement } from './interface'; +import { PopperProps, VirtualElement } from './interface'; import { useTheme } from '../theme'; import { PopperArrow } from './PopoverArrow'; -export const Popper = forwardRef( - ( - { - children, - content, - anchor: propsAnchor, - placement = 'top-start', - defaultVisible = false, - container, - keepMounted = false, - visible: propsVisible, - trigger = 'hover', - pointerEnterDelay = 100, - pointerLeaveDelay = 100, - onVisibleChange, - popoverStyle, - popoverClassName, - anchorStyle, - anchorClassName, - zIndex, - offset = [0, 5], - showArrow = false, - }, - ref - ) => { - const [anchorEl, setAnchorEl] = useState(null); - const [visible, setVisible] = useState(defaultVisible); - const [arrowRef, setArrowRef] = useState(null); +export const Popper = ({ + children, + content, + anchorEl: propsAnchorEl, + placement = 'top-start', + defaultVisible = false, + visible: propsVisible, + trigger = 'hover', + pointerEnterDelay = 100, + pointerLeaveDelay = 100, + onVisibleChange, + popoverStyle, + popoverClassName, + anchorStyle, + anchorClassName, + zIndex, + offset = [0, 5], + showArrow = false, + popperHandlerRef, + ...popperProps +}: PopperProps) => { + const [anchorEl, setAnchorEl] = useState(null); + const [visible, setVisible] = useState(defaultVisible); + const [arrowRef, setArrowRef] = useState(null); + const popperRef = useRef(); + const pointerLeaveTimer = useRef(); + const pointerEnterTimer = useRef(); - const pointerLeaveTimer = useRef(); - const pointerEnterTimer = useRef(); - - const visibleControlledByParent = typeof propsVisible !== 'undefined'; - const isAnchorCustom = typeof propsAnchor !== 'undefined'; - - const hasHoverTrigger = useMemo(() => { - return ( - trigger === 'hover' || - (Array.isArray(trigger) && trigger.includes('hover')) - ); - }, [trigger]); - - const hasClickTrigger = useMemo(() => { - return ( - trigger === 'click' || - (Array.isArray(trigger) && trigger.includes('click')) - ); - }, [trigger]); - - const theme = useTheme(); - - const onPointerEnterHandler = () => { - if (!hasHoverTrigger || visibleControlledByParent) { - return; - } - window.clearTimeout(pointerLeaveTimer.current); - - pointerEnterTimer.current = window.setTimeout(() => { - setVisible(true); - }, pointerEnterDelay); - }; - - const onPointerLeaveHandler = () => { - if (!hasHoverTrigger || visibleControlledByParent) { - return; - } - window.clearTimeout(pointerEnterTimer.current); - pointerLeaveTimer.current = window.setTimeout(() => { - setVisible(false); - }, pointerLeaveDelay); - }; - - useEffect(() => { - onVisibleChange?.(visible); - }, [visible, onVisibleChange]); - - useImperativeHandle(ref, () => { - return { - setVisible: (visible: boolean) => { - !visibleControlledByParent && setVisible(visible); - }, - }; - }); + const visibleControlledByParent = typeof propsVisible !== 'undefined'; + const isAnchorCustom = typeof propsAnchorEl !== 'undefined'; + const hasHoverTrigger = useMemo(() => { return ( - { - setVisible(false); - }} - > - - {isAnchorCustom ? null : ( -
    setAnchorEl(dom)} - onClick={() => { - if ( - !hasClickTrigger || - visibleControlledByParent - ) { - return; - } - setVisible(!visible); - }} - onPointerEnter={onPointerEnterHandler} - onPointerLeave={onPointerLeaveHandler} - style={anchorStyle} - className={anchorClassName} - > - {children} -
    - )} - - {({ TransitionProps }) => ( - -
    - {showArrow && ( - - )} - {content} -
    -     - )} -     -     -     + trigger === 'hover' || + (Array.isArray(trigger) && trigger.includes('hover')) ); - } -); + }, [trigger]); + + const hasClickTrigger = useMemo(() => { + return ( + trigger === 'click' || + (Array.isArray(trigger) && trigger.includes('click')) + ); + }, [trigger]); + + const onPointerEnterHandler = () => { + if (!hasHoverTrigger || visibleControlledByParent) { + return; + } + window.clearTimeout(pointerLeaveTimer.current); + + pointerEnterTimer.current = window.setTimeout(() => { + setVisible(true); + }, pointerEnterDelay); + }; + + const onPointerLeaveHandler = () => { + if (!hasHoverTrigger || visibleControlledByParent) { + return; + } + window.clearTimeout(pointerEnterTimer.current); + pointerLeaveTimer.current = window.setTimeout(() => { + setVisible(false); + }, pointerLeaveDelay); + }; + + useEffect(() => { + onVisibleChange?.(visible); + }, [visible, onVisibleChange]); + + useImperativeHandle(popperHandlerRef, () => { + return { + setVisible: (visible: boolean) => { + !visibleControlledByParent && setVisible(visible); + }, + }; + }); + + return ( + { + setVisible(false); + }} + > + + {isAnchorCustom ? null : ( +
    setAnchorEl(dom)} + onClick={() => { + if (!hasClickTrigger || visibleControlledByParent) { + return; + } + setVisible(!visible); + }} + onPointerEnter={onPointerEnterHandler} + onPointerLeave={onPointerLeaveHandler} + style={anchorStyle} + className={anchorClassName} + > + {children} +
    + )} + + {({ TransitionProps }) => ( + +
    + {showArrow && ( + + )} + {content} +
    +     + )} +     +     +     + ); +}; // The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains const Container = styled('div')({ display: 'contents', }); + +const BasicStyledPopper = styled(PopperUnstyled)<{ + zIndex?: CSSProperties['zIndex']; +}>(({ zIndex, theme }) => { + return { + zIndex: zIndex || theme.affine.zIndex.popover, + }; +}); diff --git a/libs/components/ui/src/popper/interface.ts b/libs/components/ui/src/popper/interface.ts index 9f52cf551..4930de15f 100644 --- a/libs/components/ui/src/popper/interface.ts +++ b/libs/components/ui/src/popper/interface.ts @@ -1,6 +1,9 @@ -import type { CSSProperties, ReactNode } from 'react'; -import type { MuiPopperPlacementType as PopperPlacementType } from '../mui'; - +import type { CSSProperties, ReactNode, Ref } from 'react'; +/* eslint-disable no-restricted-imports */ +import { + type PopperUnstyledProps, + type PopperPlacementType, +} from '@mui/base/PopperUnstyled'; export type VirtualElement = { getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; @@ -21,26 +24,12 @@ export type PopperProps = { // Popover trigger children?: ReactNode; - // Position of Popover - placement?: PopperPlacementType; - - // The popover will pop up based on the anchor position - // And if this parameter is passed, children will not be rendered - anchor?: VirtualElement | (() => VirtualElement); - // Whether the default is implicit defaultVisible?: boolean; // Used to manually control the visibility of the Popover visible?: boolean; - // A HTML element or function that returns one. The container will have the portal children appended to it. - // By default, it uses the body of the top-level document object, so it's simply document.body most of the time. - container?: HTMLElement; - - // Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper - keepMounted?: boolean; - // TODO: support focus trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[]; @@ -66,9 +55,11 @@ export type PopperProps = { anchorClassName?: string; // Popover z-index - zIndex?: number; + zIndex?: CSSProperties['zIndex']; offset?: [number, number]; showArrow?: boolean; -}; + + popperHandlerRef?: Ref; +} & Omit; diff --git a/libs/components/ui/src/tooltip/Tooltip.tsx b/libs/components/ui/src/tooltip/Tooltip.tsx index 2c896e5c0..ff0b47262 100644 --- a/libs/components/ui/src/tooltip/Tooltip.tsx +++ b/libs/components/ui/src/tooltip/Tooltip.tsx @@ -1,5 +1,5 @@ -import { forwardRef, type PropsWithChildren, type CSSProperties } from 'react'; -import { type PopperHandler, type PopperProps, Popper } from '../popper'; +import { type PropsWithChildren, type CSSProperties } from 'react'; +import { type PopperProps, Popper } from '../popper'; import { PopoverContainer, placementToContainerDirection } from '../popover'; import type { TooltipProps } from './interface'; import { useTheme } from '../theme'; @@ -14,17 +14,15 @@ const useTooltipStyle = (): CSSProperties => { }; }; -export const Tooltip = forwardRef< - PopperHandler, - PropsWithChildren ->((props, ref) => { +export const Tooltip = ( + props: PropsWithChildren +) => { const { content, placement = 'top-start' } = props; const style = useTooltipStyle(); // If there is no content, hide forever const visibleProp = content ? {} : { visible: false }; return ( ); -}); +}; From 4944887d4a22237d34e1b8be1e8a63bf69525a9f Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 12 Aug 2022 18:51:56 +0800 Subject: [PATCH 87/95] fix: fix pendant popover obscured by screen --- .../editor-core/src/block-pendant/AddPendantPopover.tsx | 8 +++++++- .../src/block-pendant/pendant-modify-panel/types.ts | 1 + .../pendant-operation-panel/CreatePendantPanel.tsx | 6 ++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx index 015f8a412..ce5dc6cdc 100644 --- a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx @@ -5,6 +5,7 @@ import { type PopoverProps, PopperHandler, Tag, + type PopperProps, } from '@toeverything/components/ui'; import { TagsIcon } from '@toeverything/components/icons'; @@ -26,9 +27,11 @@ export const AddPendantPopover = ({ ...popoverProps }: Props) => { const popoverHandlerRef = useRef(); + const popperRef = useRef(); return ( { + popperRef.current?.update?.(); + }} /> } placement="bottom-start" diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts index a7ed9e019..5afbb29ad 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts +++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts @@ -11,6 +11,7 @@ export type ModifyPanelProps = { iconConfig?: PendantConfig; isStatusSelect?: boolean; property?: RecastMetaProperty; + onTypeChange?: (type: PendantTypes) => void; }; export type ModifyPanelContentProps = { diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx index 42e36e063..88fd5b039 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx @@ -24,9 +24,11 @@ import { useOnCreateSure } from './hooks'; export const CreatePendantPanel = ({ block, onSure, + onTypeChange, }: { block: AsyncBlock; onSure?: () => void; + onTypeChange?: (option: PendantOptions) => void; }) => { const [selectedOption, setSelectedOption] = useState(); const [fieldName, setFieldName] = useState(''); @@ -37,6 +39,10 @@ export const CreatePendantPanel = ({ setFieldName(generateRandomFieldName(selectedOption.type)); }, [selectedOption]); + useEffect(() => { + onTypeChange?.(selectedOption); + }, [selectedOption, onTypeChange]); + return ( Add Field From ea865eb0aa66b88102f3790a27dc170758d9ad51 Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 18:47:09 +0800 Subject: [PATCH 88/95] chore: adjust styles --- apps/venus/src/app/index.tsx | 2 +- libs/components/layout/src/header/LayoutHeader.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/venus/src/app/index.tsx b/apps/venus/src/app/index.tsx index 40250c0c6..b40f3deee 100644 --- a/apps/venus/src/app/index.tsx +++ b/apps/venus/src/app/index.tsx @@ -235,7 +235,7 @@ const GitHub = (props: { center?: boolean; flat?: boolean }) => { startIcon={} size="lg" > - Check GitHub + {props.center ? 'Check ' : ''}GitHub ); }; diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index f93334840..511823390 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -24,7 +24,7 @@ export const LayoutHeader = () => { const warningTips = useMemo(() => { if (!fsApiSupported()) { return 'Your browser does not support the local storage feature, please upgrade to the latest version of Chrome or Edge browser'; - } else if (isLocalWorkspace) { + } else if (!isLocalWorkspace) { return 'You are in DEMO mode. Changes will NOT be saved unless you SYNC TO DISK'; } else { return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data'; From 6368485cf315aaa2e2614b42d92366c8b9f55f2f Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:01:20 +0800 Subject: [PATCH 89/95] chore: tweak styles --- .../editor-blocks/src/utils/WithTreeViewChildren.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx index f26690cbd..f4fdd2924 100644 --- a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx +++ b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx @@ -159,6 +159,7 @@ const TREE_COLOR = '#D5DFE6'; const TREE_LINE_LEFT_OFFSET = '-16px'; // determine the position of the horizontal line by the type of the item const TREE_LINE_TOP_OFFSET = '20px'; // '50%' +const TREE_LINE_WIDTH = '12px'; const TreeWrapper = styled('div')({ position: 'relative', @@ -194,7 +195,7 @@ const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ })); const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ - width: '16px', + width: TREE_LINE_WIDTH, height: '1px', paddingLeft: 0, paddingRight: 0, @@ -217,7 +218,7 @@ const LastItemRadius = styled('div')({ top: 0, height: TREE_LINE_TOP_OFFSET, bottom: '50%', - width: '16px', + width: TREE_LINE_WIDTH, borderWidth: '1px', borderStyle: 'solid', borderLeftColor: TREE_COLOR, From c9a5fe3d25328fd669ff6a97ffb4431630920e9a Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 12 Aug 2022 19:01:40 +0800 Subject: [PATCH 90/95] fix: Property zIndex does not exist on type CSSProperties --- libs/components/ui/src/popper/Popper.tsx | 4 +--- libs/components/ui/src/popper/interface.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/libs/components/ui/src/popper/Popper.tsx b/libs/components/ui/src/popper/Popper.tsx index 12a621101..4cf9f6a78 100644 --- a/libs/components/ui/src/popper/Popper.tsx +++ b/libs/components/ui/src/popper/Popper.tsx @@ -1,5 +1,4 @@ import React, { - CSSProperties, useEffect, useImperativeHandle, useMemo, @@ -16,7 +15,6 @@ import Grow from '@mui/material/Grow'; import { styled } from '../styled'; import { PopperProps, VirtualElement } from './interface'; -import { useTheme } from '../theme'; import { PopperArrow } from './PopoverArrow'; export const Popper = ({ children, @@ -174,7 +172,7 @@ const Container = styled('div')({ }); const BasicStyledPopper = styled(PopperUnstyled)<{ - zIndex?: CSSProperties['zIndex']; + zIndex?: number; }>(({ zIndex, theme }) => { return { zIndex: zIndex || theme.affine.zIndex.popover, diff --git a/libs/components/ui/src/popper/interface.ts b/libs/components/ui/src/popper/interface.ts index 4930de15f..d60fac29f 100644 --- a/libs/components/ui/src/popper/interface.ts +++ b/libs/components/ui/src/popper/interface.ts @@ -55,7 +55,7 @@ export type PopperProps = { anchorClassName?: string; // Popover z-index - zIndex?: CSSProperties['zIndex']; + zIndex?: number; offset?: [number, number]; From 043389524ab5660a4d8943e10b7a754cd0a7ee46 Mon Sep 17 00:00:00 2001 From: HeJiachen-PM <79301703+HeJiachen-PM@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:12:36 +0800 Subject: [PATCH 91/95] REALEASE: WEB LIVE DEMO --- README.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7f0c70e37..0046a3d3d 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,23 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre ![952cd7a5-70fe-48ab-b74f-23981d94d2c5](https://user-images.githubusercontent.com/79301703/182365526-df074c64-cee4-45f6-b8e0-b912f17332c6.gif) # How to use +

    +🥳🥳🥳 Our web live demo is out! 🥳🥳🥳 +

    -If you have experience in front-end development, you may wish to refer to our [documentation](https://docs.affine.pro/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. For those intersting in trying our latest version, please bear with us as we are planning to launch a web version soon. +

    +Start to try out AFFiNE web version on our landing page: +

    + +

    + check_live_demo +

    + +If you have experience in front-end development, you may wish to refer to our [documentation](https://docs.affine.pro/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. Also, thanks to Lee who has made a [desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out. Please notice that AFFiNE is still under Alpha stage and is not ready for production use. From ebed12dbecbf0b93fc49f07f27e5c914b790efc9 Mon Sep 17 00:00:00 2001 From: HeJiachen-PM <79301703+HeJiachen-PM@users.noreply.github.com> Date: Fri, 12 Aug 2022 19:16:17 +0800 Subject: [PATCH 92/95] fix:typo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0046a3d3d..b9fdf16e0 100644 --- a/README.md +++ b/README.md @@ -37,11 +37,11 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre # How to use

    -🥳🥳🥳 Our web live demo is out! 🥳🥳🥳 +🥳🥳🥳 Our web live demo is ready! 🥳🥳🥳

    -Start to try out AFFiNE web version on our landing page: +Start to play with AFFiNE web version on our landing page:

    From 3f49c7e509635f728387a4bba4c8b38b5c644159 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 12 Aug 2022 19:25:29 +0800 Subject: [PATCH 93/95] feat: update paste behavior --- .../editor-core/src/editor/clipboard/paste.ts | 44 ++++++++++++------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/libs/components/editor-core/src/editor/clipboard/paste.ts b/libs/components/editor-core/src/editor/clipboard/paste.ts index 0c48eee56..b24d06b23 100644 --- a/libs/components/editor-core/src/editor/clipboard/paste.ts +++ b/libs/components/editor-core/src/editor/clipboard/paste.ts @@ -177,10 +177,12 @@ export class Paste { const selectedBlock = await this._editor.getBlockById( currentSelectInfo.blocks[0].blockId ); - const isSelectedBlockEdit = Paste._isTextEditBlock( + const isSelectedBlockCanEdit = Paste._isTextEditBlock( selectedBlock.type ); - if (isSelectedBlockEdit) { + const blockView = this._editor.getView(selectedBlock.type); + const isSelectedBlockEmpty = blockView.isEmpty(selectedBlock); + if (isSelectedBlockCanEdit && !isSelectedBlockEmpty) { const shouldSplitBlock = blocks.length > 1 || !Paste._isTextEditBlock(blocks[0].type); @@ -245,9 +247,10 @@ export class Paste { }, }); const pasteBlocks = await this._createBlocks(blocks); - pasteBlocks.forEach(block => { - selectedBlock.after(block); - }); + await Promise.all( + pasteBlocks.map(block => selectedBlock.after(block)) + ); + const nextBlock = await this._editor.createBlock( selectedBlock?.type ); @@ -351,9 +354,15 @@ export class Paste { } } else { const pasteBlocks = await this._createBlocks(blocks); - pasteBlocks.forEach(block => { - selectedBlock.after(block); - }); + + await Promise.all( + pasteBlocks.map(block => selectedBlock.after(block)) + ); + + if (isSelectedBlockEmpty) { + selectedBlock?.remove(); + } + this._setEndSelectToBlock( pasteBlocks[pasteBlocks.length - 1].id ); @@ -373,20 +382,25 @@ export class Paste { selectedBlock?.type === 'page' ) { groupBlock = await this._editor.createBlock('group'); - pasteBlocks.forEach(block => { - groupBlock.append(block); - }); + await Promise.all( + pasteBlocks.map(block => groupBlock.append(block)) + ); await selectedBlock.after(groupBlock); } else { - pasteBlocks.forEach(block => { - selectedBlock.after(block); - }); + await Promise.all( + pasteBlocks.map(block => selectedBlock.after(block)) + ); } this._setEndSelectToBlock(pasteBlocks[pasteBlocks.length - 1].id); } } - private _setEndSelectToBlock(blockId: string) { + private async _setEndSelectToBlock(blockId: string) { + const block = await this._editor.getBlockById(blockId); + const isBlockCanEdit = Paste._isTextEditBlock(block.type); + if (!isBlockCanEdit) { + return; + } setTimeout(() => { this._editor.selectionManager.activeNodeByNodeId(blockId, 'end'); }, 100); From 8358c667027ba02fb8326b286dc62043bace947b Mon Sep 17 00:00:00 2001 From: zuomeng wang Date: Fri, 12 Aug 2022 19:28:48 +0800 Subject: [PATCH 94/95] feat: add website badge & update star badge & update contributors badge (#222) --- README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b9fdf16e0..f7c168ad7 100644 --- a/README.md +++ b/README.md @@ -12,8 +12,19 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre

    -[![stars](https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=deeppink&label=stars)](https://github.com/toeverything/AFFiNE) -[![contributors](https://img.shields.io/github/contributors/toeverything/AFFiNE?color=%23fe7230)](https://github.com/toeverything/AFFiNE/graphs/contributors) + + + +[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square + + + +[![affine.pro](https://img.shields.io/static/v1?label=affine.pro&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAhpJREFUWEdjZEACtnl3MxgY/0YzMjAaMzAwcCLLUYH9/T/D/7MM/5mXHp6kPANmHiOI4Zx9Xfg3C+tKBob/zlSwiAgjGPey/vkdvneq5luwA+zy7+yhn+Vwv+89NFHFhREU7IyM/6YT4WyqK/n/nymT0Tb/1mFGBkYbqptOhIH/Gf4fYbTLv/2NBgmOCOvBSr6DHPCfWNW0UEe2A2x1uRlakiXBbtpx6jND+7KXZLmPbAdURokzeJjxwi31rrzH8OX7P5IdQbYDtnUoMXBzMMEt7Fj2imH7qU/0cQBy8MNsPHL5K0P13Of0cQB68MNsJScaSI4CHk4mhq3tSnCf3n36k0FZmh3Mn7L+DcPqgx9ICgWSHeBpxsdQESUGtgRk+eqDH+H8O09/MiR3P6atA1qTJRlsdLnhPgYlPOQQCW96wPDi3R+iHUFSCKAHP8wydEeREg0kOQA9+JOgwR1qL8CQEygC9jWp0UCSA+aVysIT3JqDHxgmr38DtlRCiIVhZZ0CPNhB6QDkEGIA0Q4gZAkuxxFyBNEOQA7ml+/+MIQ1PUAxG1kelAhB6YMYQLQDCPmQUAjhcgxRDiDWcEKOxOYIohyQGyjCEGIvANaPLfhhBiNHA6hmBBXNhABRDgCV/aBQAAFQpYMrn4PUgNTCACiXEMoNRDmAkC8okR8UDhjYRumAN8sHvGMCSkAD2jUDOWDAO6ewbDQQ3XMAy/oxKownQR0AAAAASUVORK5CYII=&color=orange&message=→)](https://affine.pro) +[![stars](https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=red&label=stars)](https://github.com/toeverything/AFFiNE) +[![All Contributors][all-contributors-badge]](#contributors) [![Node](https://img.shields.io/badge/node->=16.0-success)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/TypeScript-4.7-3178c6)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/React-18-61dafb)](https://reactjs.org/) From 8b239cd2928745141485f9bf956c331cc02a1bcf Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 12 Aug 2022 19:29:33 +0800 Subject: [PATCH 95/95] chore: workspace name --- README.md | 3 ++- .../src/pages/workspace/docs/workspace-name.tsx | 12 +++++------- .../db-service/src/services/workspace/user-config.ts | 5 ----- libs/utils/src/utils.ts | 9 --------- 4 files changed, 7 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index f7c168ad7..50c429c53 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066 ![952cd7a5-70fe-48ab-b74f-23981d94d2c5](https://user-images.githubusercontent.com/79301703/182365526-df074c64-cee4-45f6-b8e0-b912f17332c6.gif) # How to use +

    🥳🥳🥳 Our web live demo is ready! 🥳🥳🥳

    @@ -63,7 +64,7 @@ Start to play with     AFFiNE web version on />

    -If you have experience in front-end development, you may wish to refer to our [documentation](https://docs.affine.pro/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. +If you have experience in front-end development, you may wish to refer to our [documentation](https://docs.affine.pro/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. Also, thanks to Lee who has made a [desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out. Please notice that AFFiNE is still under Alpha stage and is not ready for production use. diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx index 67a36e1ce..6769ed288 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx @@ -92,18 +92,16 @@ export const WorkspaceName = () => { const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar(); const [inRename, setInRename] = useState(false); const [workspaceName, setWorkspaceName] = useState(''); - const [workspaceId, setWorkspaceId] = useState(''); const fetchWorkspaceName = useCallback(async () => { if (!currentSpaceId) { return; } - const [name, workspaceId] = await Promise.all([ - services.api.userConfig.getWorkspaceName(currentSpaceId), - services.api.userConfig.getWorkspaceId(currentSpaceId), - ]); + const name = await services.api.userConfig.getWorkspaceName( + currentSpaceId + ); + setWorkspaceName(name); - setWorkspaceId(workspaceId); }, [currentSpaceId]); useEffect(() => { @@ -180,7 +178,7 @@ export const WorkspaceName = () => { ) : ( setInRename(true)}> - {workspaceName || workspaceId} + {workspaceName || currentSpaceId} )} diff --git a/libs/datasource/db-service/src/services/workspace/user-config.ts b/libs/datasource/db-service/src/services/workspace/user-config.ts index 887bb1ec2..277c3473c 100644 --- a/libs/datasource/db-service/src/services/workspace/user-config.ts +++ b/libs/datasource/db-service/src/services/workspace/user-config.ts @@ -114,11 +114,6 @@ export class UserConfig extends ServiceBaseClass { return workspaceName; } - async getWorkspaceId(workspace: string): Promise { - const workspaceDbBlock = await this.getWorkspaceDbBlock(workspace); - return workspaceDbBlock.id; - } - async setWorkspaceName(workspace: string, workspaceName: string) { const workspaceDbBlock = await this.getWorkspaceDbBlock(workspace); workspaceDbBlock.setDecoration(WORKSPACE_CONFIG, workspaceName); diff --git a/libs/utils/src/utils.ts b/libs/utils/src/utils.ts index 4388128e9..28adc6c4d 100644 --- a/libs/utils/src/utils.ts +++ b/libs/utils/src/utils.ts @@ -5,15 +5,6 @@ export function getUserDisplayName(user?: UserInfo) { return nickname || username || email || 'Unknown User'; } -/** - * Get workspace_id from URL - * @returns workspace_id - */ -export function getWorkspaceId() { - const path = window.location.pathname.match(/\/(\w+)\//); - return path ? path[1] : undefined; -} - /** * Get page_id from URL * @returns page_id